.ui-icon-block-btn[data-v-c93ffbc4] {
--pad-y-sm: 8px; --pad-x-sm: 10px;
--pad-y-md: 12px; --pad-x-md: 16px;
--pad-y-lg: 20px; --pad-x-lg: 60px;
--square-sm: 40px; /* icon-only */
--square-md: 48px;
--square-lg: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--color-accent);
color: var(--color-primary);
border: none;
border-radius: var(--radius-sm);
/* Base shadows */
box-shadow:
inset 0 0 7px rgba(0, 0, 0, 0.08),
0 4px 4px rgba(164, 213, 73, 0.3);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transform-origin: center;
transition:
transform 400ms cubic-bezier(0.2, 0.6, 0.2, 1),
box-shadow 400ms cubic-bezier(0.2, 0.6, 0.2, 1);
will-change: transform, box-shadow;
}
.ui-icon-block-btn.radius-sm[data-v-c93ffbc4] { border-radius: var(--radius-sm);
}
.ui-icon-block-btn.radius-md[data-v-c93ffbc4] { border-radius: var(--radius-md);
}
.ui-icon-block-btn.radius-lg[data-v-c93ffbc4] { border-radius: var(--radius-lg);
}
.ui-icon-block-btn.size-sm[data-v-c93ffbc4] { padding: var(--pad-y-sm) var(--pad-x-sm);
}
.ui-icon-block-btn.size-md[data-v-c93ffbc4] { padding: var(--pad-y-md) var(--pad-x-md);
}
.ui-icon-block-btn.size-lg[data-v-c93ffbc4] { padding: var(--pad-y-lg) var(--pad-x-lg);
}
.ui-icon-block-btn.is-square.size-sm[data-v-c93ffbc4] { width: var(--square-sm); height: var(--square-sm); padding: 0;
}
.ui-icon-block-btn.is-square.size-md[data-v-c93ffbc4] { width: var(--square-md); height: var(--square-md); padding: 0;
}
.ui-icon-block-btn.is-square.size-lg[data-v-c93ffbc4] { width: var(--square-lg); height: var(--square-lg); padding: 0;
}
.ui-icon-block-btn .label[data-v-c93ffbc4] {
color: #1e1e1e;
font-weight: 700;
font-size: var(--font-size-16);
}
.ui-icon-block-btn.size-sm .label[data-v-c93ffbc4] { font-size: var(--font-size-14);
}
.ui-icon-block-btn.size-lg .label[data-v-c93ffbc4] { font-size: var(--font-size-20);
}
.ui-icon-block-btn .icon-slot[data-v-c93ffbc4] { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; flex: 0 0 auto;
}
.ui-icon-block-btn[data-v-c93ffbc4]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px;
}
.ui-icon-block-btn[data-v-c93ffbc4]:hover:not(:disabled) {
transform: scale(1.01);
/* Brighter, larger outer glow on hover */
box-shadow:
inset 0 0 7px rgba(0, 0, 0, 0.08),
0 4px 14px rgba(164, 213, 73, 0.5);
}
.ui-icon-block-btn[data-v-c93ffbc4]:active:not(:disabled) {
transform: scale(0.985);
/* Stronger inner shadow on press, modest outer */
box-shadow:
inset 0 0 10px rgba(0, 0, 0, 0.18),
0 2px 6px rgba(164, 213, 73, 0.35);
}
/* Disabled state */
.ui-icon-block-btn[data-v-c93ffbc4]:disabled,
.ui-icon-block-btn[aria-disabled="true"][data-v-c93ffbc4] {
opacity: .5;
cursor: not-allowed;
pointer-events: none;
transform: none;
box-shadow:
inset 0 0 7px rgba(0, 0, 0, 0.04),
0 2px 4px rgba(164, 213, 73, 0.2);
}
@media (prefers-reduced-motion: reduce) {
.ui-icon-block-btn[data-v-c93ffbc4] { transition: none;
}
}
/* no styles */
/* Payment Step Styles are handled on the dedicated checkout page */
/* Root wrapper: gradient background matching login/clear_my_data */
.start-view[data-v-8d544581] {
width: 100%;
background: linear-gradient(to bottom, #7fabce 0%, #fff 100%);
min-height: 100dvh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
/* Desktop: logo top-left */
.start-logo[data-v-8d544581] {
position: absolute;
left: 36px;
top: 36px;
z-index: 2;
display: block;
}
.start-logo__img[data-v-8d544581] {
height: 37px;
width: auto;
display: block;
}
/* Mobile header (hidden on desktop) */
.start-mobile-header[data-v-8d544581] {
display: none;
}
.start-container[data-v-8d544581] {
width: 100%;
max-width: 676px;
padding: 0 20px;
box-sizing: border-box;
position: relative;
z-index: 1;
}
/* White card (Figma: 676px, 32px radius, 32px padding) */
.start-card[data-v-8d544581] {
background: #fff;
border-radius: 32px;
padding: 32px;
width: 100%;
box-sizing: border-box;
box-shadow:
0 20px 44px rgba(0, 0, 0, 0.04),
0 81px 81px rgba(0, 0, 0, 0.03),
0 183px 109px rgba(0, 0, 0, 0.02),
0 325px 130px rgba(0, 0, 0, 0.01);
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
/* Progress bar (Figma: 4 steps, 6px height) */
.progress-bar[data-v-8d544581] {
display: flex;
gap: 8px;
width: 100%;
max-width: 614px;
}
.progress-bar__step[data-v-8d544581] {
flex: 1;
height: 6px;
border-radius: 197px;
background: #d9d9d9;
}
.progress-bar__step--active[data-v-8d544581] {
background: #c3fd56;
}
/* Tariff section: panel + total row */
.tariff-section[data-v-8d544581] {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
max-width: 616px;
}
/* Tariff panel (Figma: padding 23.845px, gap 40px) */
.tariff-panel[data-v-8d544581] {
position: relative;
overflow: hidden;
border-radius: 24px;
padding: 24px;
min-height: 210px;
border: 1px solid #fff;
display: flex;
flex-direction: column;
gap: 40px;
box-shadow: 0 424px 119px 0 rgba(179, 179, 179, 0.00), 0 271px 108px 0 rgba(179, 179, 179, 0.01), 0 153px 92px 0 rgba(179, 179, 179, 0.05), 0 68px 68px 0 rgba(179, 179, 179, 0.09), 0 17px 37px 0 rgba(179, 179, 179, 0.10);
}
.tariff-panel__art[data-v-8d544581] {
position: absolute;
inset: 0;
pointer-events: none;
}
.tariff-panel__flare[data-v-8d544581] {
position: absolute;
right: -50px;
top: 72%;
transform: translateY(-50%);
height: 180px;
max-width: none;
opacity: 0.9;
}
.tariff-panel__header[data-v-8d544581] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
position: relative;
z-index: 1;
}
.tariff-panel__name[data-v-8d544581] {
font-size: 18px;
font-weight: 500;
letter-spacing: -0.18px;
line-height: 1.3;
}
.tariff-panel__chooser[data-v-8d544581] {
position: relative;
}
.tariff-panel__change-btn[data-v-8d544581] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
height: 36px;
padding: 0 12px;
background: #000;
color: #fff;
border: none;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
}
.tariff-panel__change-arrow[data-v-8d544581] {
width: 5px;
height: 7.5px;
background: url("data:image/svg+xml;utf8,") no-repeat center;
background-size: contain;
transform: rotate(90deg);
}
.tariff-panel__price[data-v-8d544581] {
font-size: 36px;
font-weight: 500;
letter-spacing: -1.44px;
line-height: 0.9;
position: relative;
z-index: 1;
}
.tariff-panel__features[data-v-8d544581] {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 24px;
width: 100%;
min-width: 0;
position: relative;
z-index: 1;
}
.tariff-panel__metrics[data-v-8d544581] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
min-width: 0;
position: relative;
}
.tariff-panel__feat[data-v-8d544581] {
display: flex;
align-items: center;
gap: 4px;
font-size: 16.68px;
font-weight: 600;
letter-spacing: -0.33px;
}
/* Галочка слева от значения (ГБ, МИН, SMS) */
.tariff-panel__check[data-v-8d544581] {
width: 14px;
height: 11px;
flex-shrink: 0;
background: url("data:image/svg+xml;utf8,") no-repeat center;
background-size: contain;
}
.tariff-panel.is-dark .tariff-panel__check[data-v-8d544581] {
background-image: url("data:image/svg+xml;utf8,");
}
.tariff-panel__inf[data-v-8d544581] {
width: 14px;
height: 11px;
display: block;
flex-shrink: 0;
filter: brightness(0) invert(1);
}
.tariff-panel__ticket[data-v-8d544581] {
display: block;
flex-shrink: 0;
}
.tariff-panel__stickers[data-v-8d544581] {
display: flex;
align-items: center;
flex-shrink: 0;
}
.tariff-panel__stickers-bg[data-v-8d544581] {
display: flex;
align-items: center;
gap: 2.86px;
padding: 3px 6px;
background: #fff;
border-radius: 8px;
}
.tariff-panel__sticker[data-v-8d544581] {
display: flex;
align-items: center;
width: 28.91px;
padding-right: 7.23px;
isolation: isolate;
}
.tariff-panel__sticker-badge[data-v-8d544581] {
width: 18.07px;
height: 18.07px;
margin-right: -7.23px;
border: 1.45px solid #fff;
border-radius: 15.42px;
background: #373737;
color: #fff;
display: grid;
place-items: center;
font-size: 10.12px;
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.3px;
text-align: center;
position: relative;
z-index: 2;
flex-shrink: 0;
}
/* Tariff panel color variants */
.tariff-panel.is-blue[data-v-8d544581] {
background: #acc4ff;
color: #1e1e1e;
}
.tariff-panel.is-blue .tariff-panel__change-btn[data-v-8d544581] {
background: #000;
color: #fff;
}
.tariff-panel.is-dark[data-v-8d544581] {
background: #c3fd56;
color: #1e1e1e;
}
.tariff-panel.is-dark .tariff-panel__change-btn[data-v-8d544581] {
background: #000;
color: #fff;
}
.tariff-panel.is-black[data-v-8d544581] {
background: #4a48e9;
color: #fff;
}
.tariff-panel.is-blue .tariff-panel__inf[data-v-8d544581],
.tariff-panel.is-dark .tariff-panel__inf[data-v-8d544581] {
filter: none;
}
/* Total row: белая рамка (видимая граница) */
.total-row[data-v-8d544581] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
background: #fff;
border-radius: 12px;
box-sizing: border-box;
box-shadow: 0 424px 119px 0 rgba(179, 179, 179, 0.00), 0 271px 108px 0 rgba(179, 179, 179, 0.01), 0 153px 92px 0 rgba(179, 179, 179, 0.05), 0 68px 68px 0 rgba(179, 179, 179, 0.09), 0 17px 37px 0 rgba(179, 179, 179, 0.10);
}
.total-row__label[data-v-8d544581] {
font-size: 18px;
font-weight: 500;
color: #1e1e1e;
letter-spacing: -0.18px;
line-height: 1.3;
}
.total-row__value[data-v-8d544581] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
letter-spacing: -0.96px;
}
/* Form section */
.form-section[data-v-8d544581] {
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
width: 100%;
max-width: 442px;
}
.form-section__title[data-v-8d544581] {
margin: 0;
font-size: 32px;
font-weight: 600;
color: #1e1e1e;
letter-spacing: -0.64px;
text-align: center;
}
.form[data-v-8d544581] {
display: flex;
flex-direction: column;
gap: 32px;
width: 100%;
}
.form-row[data-v-8d544581] {
display: flex;
flex-direction: column;
gap: 8.5px;
}
.field-group[data-v-8d544581] {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
width: 100%;
}
.field[data-v-8d544581] {
display: block;
background: rgba(235, 235, 235, 0.5);
padding: 21px;
border-radius: 12px;
box-sizing: border-box;
max-height: 60px;
}
.input[data-v-8d544581] {
width: 100%;
padding: 0;
box-sizing: border-box;
border: 0;
background: transparent;
outline: none;
font-size: 16px;
color: #1e1e1e;
}
.input[data-v-8d544581]::placeholder {
color: rgba(30, 30, 30, 0.4);
}
/* Verify step (как в /login) */
.verify-card[data-v-8d544581] {
display: flex;
flex-direction: column;
align-items: center;
gap: 48px;
width: 100%;
}
.verify-title[data-v-8d544581] {
margin: 0;
font-size: 32px;
font-weight: 600;
color: #1e1e1e;
line-height: 1.2;
letter-spacing: -0.64px;
text-align: center;
max-width: 563px;
}
.verify-form[data-v-8d544581] {
display: flex;
flex-direction: column;
gap: 48px;
width: 100%;
max-width: 442px;
align-items: center;
}
.verify-code-group[data-v-8d544581] {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
width: 100%;
}
.code-inputs[data-v-8d544581] {
display: flex;
gap: 19px;
justify-content: center;
}
.code-input[data-v-8d544581] {
width: 64px;
height: 82px;
background: rgba(235, 235, 235, 0.5);
border: none;
border-radius: 17px;
font-size: 48px;
font-weight: 500;
color: #1e1e1e;
text-align: center;
outline: none;
box-sizing: border-box;
letter-spacing: -0.48px;
}
.code-input[data-v-8d544581]::placeholder {
color: rgba(30, 30, 30, 0.4);
}
.verify-actions[data-v-8d544581] {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
}
.btn-continue[data-v-8d544581] {
width: 100%;
padding: 21px;
border: none;
border-radius: 14px;
background: #c3fd56;
color: #1e1e1e;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: opacity 0.2s ease;
box-sizing: border-box;
}
.btn-continue[data-v-8d544581]:hover:not(:disabled) {
opacity: 0.9;
}
.btn-continue[data-v-8d544581]:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-back[data-v-8d544581] {
width: 100%;
padding: 21px;
border: none;
border-radius: 14px;
background: #eee;
color: #1e1e1e;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: opacity 0.2s ease;
box-sizing: border-box;
}
.btn-back[data-v-8d544581]:hover {
opacity: 0.9;
}
/* Mobile chooser: reuse tariff-header for list items */
.tariff-header[data-v-8d544581] {
background: #4a48e9;
border-radius: 24px;
min-height: 100px;
padding: 24px;
color: #fff;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.header-art[data-v-8d544581] {
position: absolute;
inset: 0;
pointer-events: none;
}
.flare[data-v-8d544581] {
position: absolute;
right: -80px;
top: 50%;
transform: translateY(-50%);
height: 180px;
max-width: none;
}
.tariff__badge[data-v-8d544581] {
font-size: 12px;
font-weight: 500;
margin: 0;
}
.tariff__name[data-v-8d544581] {
margin: 8px 0 0;
font-size: 24px;
line-height: 0.9;
font-weight: 600;
}
.tariff-header.is-blue[data-v-8d544581] {
background: #acc4ff;
color: #1e1e1e;
}
.tariff-header.is-dark[data-v-8d544581] {
background: #c3fd56;
color: #1e1e1e;
}
.tariff-header.is-black[data-v-8d544581] {
background: #4a48e9;
color: #fff;
}
/* Field error state */
.field--error[data-v-8d544581] {
border: 1px solid #ff3b30;
}
.field__error[data-v-8d544581] {
margin: 0;
color: #ff3b30;
font-size: 12px;
line-height: 1.35;
text-align: left;
padding: 0 2px;
}
.agreements[data-v-8d544581] {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 20px;
color: rgba(30, 30, 30, 0.6);
font-size: 14px;
}
.agreements a[data-v-8d544581] {
color: inherit;
text-decoration: underline;
}
.agree-row[data-v-8d544581] {
display: flex;
align-items: flex-start;
gap: 8px;
}
.agree-row--note .agree__dot[data-v-8d544581] {
width: 16px;
height: 16px;
border-radius: 999px;
background: #4a48e9;
opacity: 0.7;
margin-top: 4px;
}
.agree__checkbox[data-v-8d544581] {
min-width: 16px;
min-height: 16px;
border: none;
border-radius: 50%;
appearance: none;
background: #d9d9d9;
margin-top: 3px;
transition:
background-color 0.2s ease,
transform 0.08s ease,
box-shadow 0.2s ease;
will-change: transform;
}
.agree__checkbox[data-v-8d544581]:hover {
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06);
}
.agree__checkbox[data-v-8d544581]:active {
transform: scale(0.92);
}
.agree__checkbox[data-v-8d544581]:checked {
background-color: #c3fd56;
animation: checkbox-pop-8d544581 0.18s ease;
}
.agree__checkbox[data-v-8d544581]:focus-visible {
outline: none;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
}
.agree__checkbox.is-error[data-v-8d544581] {
box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.15);
animation: error-pulse-8d544581 0.5s ease;
}
.agreements-list[data-v-8d544581] {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Single agreement row (label) */
.agree[data-v-8d544581] {
display: flex;
align-items: flex-start;
gap: 8px;
color: rgba(30, 30, 30, 0.6);
font-size: 12px;
}
.agree a[data-v-8d544581] {
color: inherit;
text-decoration: underline;
}
/* Make UiIconBlockButton full-width and match login button style (#c3fd56) */
.form[data-v-8d544581] .ui-icon-block-btn {
width: 100%;
background: #c3fd56 !important;
color: #1e1e1e !important;
}
/* FIO field wrapper for dropdown positioning */
.field-wrapper[data-v-8d544581] {
position: relative;
}
/* FIO dropdown list */
.fio-dropdown[data-v-8d544581] {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 100;
margin: 0;
margin-top: 4px;
padding: 8px 0;
list-style: none;
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.fio-dropdown__item[data-v-8d544581] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
cursor: pointer;
transition: background-color 0.15s ease;
}
.fio-dropdown__item[data-v-8d544581]:hover,
.fio-dropdown__item.is-selected[data-v-8d544581] {
background: rgba(74, 72, 233, 0.08);
}
.fio-dropdown__value[data-v-8d544581] {
font-size: 16px;
color: #1e1e1e;
font-weight: 400;
}
.fio-dropdown__gender[data-v-8d544581] {
font-size: 14px;
color: rgba(30, 30, 30, 0.5);
margin-left: 8px;
}
/* Dropdown transition */
.dropdown-enter-active[data-v-8d544581],
.dropdown-leave-active[data-v-8d544581] {
transition: opacity 0.15s ease, transform 0.15s ease;
transform-origin: top;
}
.dropdown-enter-from[data-v-8d544581],
.dropdown-leave-to[data-v-8d544581] {
opacity: 0;
transform: translateY(-4px) scaleY(0.98);
}
.infinity-icon[data-v-8d544581] {
width: 36px;
display: block;
}
/* Mobile layout (max-width 480px): like login/clear_my_data */
@media (max-width: 480px) {
.start-logo[data-v-8d544581] {
display: none;
}
.start-view[data-v-8d544581] {
flex-direction: column;
align-items: stretch;
padding-top: 0;
min-height: 100dvh;
}
.start-mobile-header[data-v-8d544581] {
display: flex;
flex-shrink: 0;
width: 100%;
padding: 24px 16px;
align-items: center;
justify-content: flex-start;
z-index: 2;
box-sizing: border-box;
}
.start-mobile-header__back[data-v-8d544581] {
display: flex;
align-items: center;
gap: 17px;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: #fff;
font-size: 21px;
font-weight: 500;
letter-spacing: -0.2px;
font-family: inherit;
}
.start-mobile-header__back-icon[data-v-8d544581] {
width: 48px;
height: 48px;
display: block;
flex-shrink: 0;
}
.start-container[data-v-8d544581] {
flex: 1;
width: 100%;
max-width: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
min-height: 0;
}
.start-card[data-v-8d544581] {
flex: 1;
width: 100%;
border-radius: 24px 24px 0 0;
padding: 48px 24px 32px;
box-shadow: none;
}
/* Verify step: адаптивность панели с кодом */
.verify-card[data-v-8d544581] {
gap: 32px;
width: 100%;
min-width: 0;
overflow-x: hidden;
}
.verify-title[data-v-8d544581] {
font-size: 22px;
max-width: 100%;
}
.verify-form[data-v-8d544581] {
gap: 32px;
max-width: 100%;
width: 100%;
}
.code-inputs[data-v-8d544581] {
width: 100%;
max-width: 100%;
gap: 6px;
padding: 0 4px;
box-sizing: border-box;
}
.code-input[data-v-8d544581] {
flex: 1;
min-width: 0;
width: 100%;
max-width: 48px;
height: 56px;
font-size: 28px;
border-radius: 12px;
}
}
.tariff-panel__chooser[data-v-8d544581] {
position: relative;
}
.chooser-popover[data-v-8d544581] {
z-index: 9999;
width: max-content;
background: #fff;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
padding: 16px;
padding-top: 24px;
box-sizing: border-box;
}
.chooser-card[data-v-8d544581] {
background: #fff;
border-radius: 0 0 8px 8px;
padding: 16px;
padding-top: 24px;
display: grid;
gap: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.btn--chooser[data-v-8d544581] {
position: relative;
z-index: 100;
}
.chooser-title[data-v-8d544581] {
margin: 0;
font-size: 14px;
color: rgba(30, 30, 30, 0.9);
opacity: 0.6;
}
.chooser-item[data-v-8d544581] {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 40px;
padding: 0 16px;
border-radius: 8px;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
}
.chooser-item.is-active[data-v-8d544581] {
background: #f5f5f5;
}
.chooser-item-title[data-v-8d544581] {
font-size: 16px;
color: #1e1e1e;
font-weight: 500;
}
.chooser-item-arrow[data-v-8d544581] {
width: 7px;
height: 10.5px;
background-repeat: no-repeat;
background-position: center;
background-size: 7px 10.5px;
filter: none;
background-image: url("data:image/svg+xml;utf8,");
}
/* Mobile specific layout (portrait/square only, up to tablet AR) */
@media (max-aspect-ratio: 3/4) {
/* Mobile chooser overlay */
.mobile-chooser[data-v-8d544581] {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: grid;
place-items: center;
padding: 16px;
}
.mobile-chooser__dialog[data-v-8d544581] {
background: #fff;
border-radius: 20px;
width: 100%;
max-width: 360px;
max-height: 85vh;
display: grid;
grid-template-rows: auto 1fr;
gap: 16px;
padding: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.mobile-chooser__topbar[data-v-8d544581] {
display: flex;
align-items: center;
justify-content: space-between;
}
.mobile-chooser__title[data-v-8d544581] {
font-size: 16px;
font-weight: 500;
color: #1e1e1e;
}
.mobile-chooser__close[data-v-8d544581] {
width: 24px;
height: 24px;
border: 0;
padding: 0;
border-radius: 999px;
background: #1e1e1e;
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
}
.mobile-chooser__close-icon[data-v-8d544581] {
width: 12px;
height: 12px;
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
background-image: url("data:image/svg+xml;utf8,");
}
.mobile-chooser__list[data-v-8d544581] {
overflow: auto;
display: grid;
gap: 12px;
}
.mobile-chooser__item[data-v-8d544581] {
background: transparent;
border: 0;
padding: 0;
text-align: inherit;
cursor: pointer;
}
.mobile-chooser .tariff-header[data-v-8d544581] {
min-height: 107px;
padding: 12px;
border-radius: 16px;
}
.mobile-chooser .tariff__name[data-v-8d544581] {
font-size: 18px;
line-height: 0.9;
}
.limit[data-v-8d544581] {
padding: 12px;
border-radius: 8px;
}
.limits-grid[data-v-8d544581] {
gap: 4px;
}
.limit__icon[data-v-8d544581] {
width: 12px;
height: 12px;
background-size: 12px 12px;
}
.limit__value[data-v-8d544581] {
font-size: 16px;
}
.svc[data-v-8d544581] {
width: 20px;
height: 20px;
}
.group__title[data-v-8d544581] {
font-size: 12px;
}
.services-pills[data-v-8d544581] {
gap: 4px;
}
.services-pills .pill[data-v-8d544581] {
background-color: white;
padding: 6px;
}
.agree[data-v-8d544581] {
font-size: 10px;
}
.agree__checkbox[data-v-8d544581] {
min-width: 14px;
min-height: 14px;
}
/* Mobile FIO dropdown */
.fio-dropdown[data-v-8d544581] {
border-radius: 8px;
margin-top: 2px;
padding: 4px 0;
}
.fio-dropdown__item[data-v-8d544581] {
padding: 10px 14px;
}
.fio-dropdown__value[data-v-8d544581] {
font-size: 14px;
}
.fio-dropdown__gender[data-v-8d544581] {
font-size: 12px;
}
.field[data-v-8d544581] {
padding: 12px 18px;
border-radius: 12px;
}
.input[data-v-8d544581] {
font-size: 14px;
}
.flare[data-v-8d544581] {
height: 250px;
right: -70px;
top: 50px;
transform: translateY(-50%);
}
.tariff__features[data-v-8d544581] {
margin: 0;
}
.tariff-panel__features[data-v-8d544581] {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.tariff-panel__metrics[data-v-8d544581] {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.tariff-panel__flare[data-v-8d544581] {
top: 85%;
}
.tariff__badge[data-v-8d544581] {
font-size: 12px;
}
/* Mobile CTA: full-width, 12px padding, 20px bold */
.form[data-v-8d544581] .ui-icon-block-btn {
width: 100%;
padding: 12px;
font-size: 20px;
font-weight: 700;
}
}
/* ===== Animations & Transitions ===== */
/* Buttons */
.btn[data-v-8d544581] {
transition:
background-color 0.2s ease,
color 0.2s ease,
border-color 0.2s ease,
transform 0.1s ease,
box-shadow 0.2s ease;
}
.btn[data-v-8d544581]:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}
.btn[data-v-8d544581]:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.btn--primary[data-v-8d544581]:hover {
background: #b5f342;
border-color: #b5f342;
}
.btn--primary[data-v-8d544581]:active {
background: #a8e83a;
border-color: #a8e83a;
}
.btn--ghost[data-v-8d544581]:hover {
background: rgba(30, 30, 30, 0.05);
}
.btn--ghost[data-v-8d544581]:active {
background: rgba(30, 30, 30, 0.08);
}
/* Chooser items */
.chooser-item[data-v-8d544581] {
transition:
background-color 0.15s ease,
transform 0.1s ease;
}
.chooser-item[data-v-8d544581]:hover {
background: #f5f5f5;
}
.chooser-item[data-v-8d544581]:active {
transform: scale(0.99);
}
.mobile-chooser__item[data-v-8d544581] {
transition:
transform 0.1s ease,
opacity 0.2s ease;
}
.mobile-chooser__item[data-v-8d544581]:active {
transform: scale(0.99);
}
.mobile-chooser__close[data-v-8d544581] {
transition:
transform 0.1s ease,
background-color 0.2s ease;
}
.mobile-chooser__close[data-v-8d544581]:hover {
background-color: #2b2b2b;
}
.mobile-chooser__close[data-v-8d544581]:active {
transform: scale(0.96);
}
/* CTA button (UiIconBlockButton) */
.form[data-v-8d544581] .ui-icon-block-btn {
transition:
transform 0.12s ease,
box-shadow 0.2s ease,
filter 0.2s ease;
}
.form[data-v-8d544581] .ui-icon-block-btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.form[data-v-8d544581] .ui-icon-block-btn:active {
transform: translateY(0);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.form[data-v-8d544581] .ui-icon-block-btn[disabled],
.form[data-v-8d544581] .ui-icon-block-btn[aria-disabled='true'] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
transform: none;
box-shadow: none;
}
/* Overlay/dialog transitions */
.fade-enter-active[data-v-8d544581],
.fade-leave-active[data-v-8d544581] {
transition: opacity 0.2s ease;
}
.fade-enter-from[data-v-8d544581],
.fade-leave-to[data-v-8d544581] {
opacity: 0;
}
.slide-down-enter-active[data-v-8d544581],
.slide-down-leave-active[data-v-8d544581] {
transition:
opacity 0.2s ease,
transform 0.2s ease;
transform-origin: top;
}
.slide-down-enter-from[data-v-8d544581],
.slide-down-leave-to[data-v-8d544581] {
opacity: 0;
transform: translateY(-8px);
}
.pop-enter-active[data-v-8d544581],
.pop-leave-active[data-v-8d544581] {
transition:
opacity 0.25s ease,
transform 0.25s ease;
}
.pop-enter-from[data-v-8d544581],
.pop-leave-to[data-v-8d544581] {
opacity: 0;
transform: translateY(8px) scale(0.98);
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
[data-v-8d544581] {
transition: none !important;
animation: none !important;
}
}
/* Keyframes */
@keyframes checkbox-pop-8d544581 {
0% {
transform: scale(0.9);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
@keyframes error-pulse-8d544581 {
0% {
box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
}
50% {
box-shadow: 0 0 0 6px rgba(255, 59, 48, 0.18);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
}
}
/* Success overlay */
.success-overlay[data-v-8d544581] {
position: fixed;
inset: 0;
z-index: 300;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: grid;
place-items: center;
padding: 16px;
}
.success-dialog[data-v-8d544581] {
background: #fff;
border-radius: 20px;
width: 100%;
max-width: 460px;
display: grid;
gap: 16px;
padding: 24px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.success-topbar[data-v-8d544581] {
display: flex;
align-items: center;
justify-content: space-between;
}
.success-title[data-v-8d544581] {
font-size: 20px;
font-weight: 700;
color: #1e1e1e;
}
.success-text[data-v-8d544581] {
font-size: 14px;
color: rgba(30, 30, 30, 0.8);
}
.success-actions[data-v-8d544581] {
display: grid;
gap: 8px;
}
.success-actions[data-v-8d544581] .ui-icon-block-btn {
width: 100%;
}
@media (max-aspect-ratio: 3/4) {
.success-dialog[data-v-8d544581] {
border-radius: 16px;
max-width: 360px;
padding: 16px;
gap: 12px;
}
.success-title[data-v-8d544581] {
font-size: 18px;
}
.success-text[data-v-8d544581] {
font-size: 12px;
}
}
/* Generic Dialog Styles */
.overlay[data-v-8d544581] {
position: fixed;
inset: 0;
z-index: 300;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: grid;
place-items: center;
padding: 16px;
}
.dialog[data-v-8d544581] {
background: #fff;
border-radius: 20px;
width: 100%;
display: flex;
flex-direction: column;
max-height: 90vh;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.dialog--sm[data-v-8d544581] {
max-width: 400px;
}
.dialog--md[data-v-8d544581] {
max-width: 600px;
}
.dialog__header[data-v-8d544581] {
padding: 20px 24px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.dialog__title[data-v-8d544581] {
margin: 0;
font-size: 20px;
font-weight: 700;
color: #1e1e1e;
}
.dialog__close[data-v-8d544581] {
width: 32px;
height: 32px;
border: 0;
padding: 0;
border-radius: 50%;
background: #f5f5f5;
display: grid;
place-items: center;
cursor: pointer;
transition: background 0.2s;
}
.dialog__close[data-v-8d544581]:hover {
background: #ebebeb;
}
.close-icon[data-v-8d544581] {
width: 12px;
height: 12px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%231e1e1e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 3l6 6M9 3L3 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.dialog__body[data-v-8d544581] {
padding: 24px;
display: grid;
gap: 20px;
overflow-y: auto;
}
.dialog__text[data-v-8d544581] {
margin: 0;
font-size: 16px;
color: rgba(30, 30, 30, 0.8);
line-height: 1.5;
}
.input--code[data-v-8d544581] {
text-align: center;
font-size: 24px;
letter-spacing: 4px;
font-weight: 600;
background: #f5f5f5;
border-radius: 12px;
padding: 16px;
}
.error-text[data-v-8d544581] {
color: #ff3b30;
font-size: 14px;
margin: 0;
text-align: center;
}
.error-text--below-inputs[data-v-8d544581] {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 0 8px;
}
/* Small spinner for verification submit button */
.btn-spinner[data-v-8d544581] {
width: 16px;
height: 16px;
border-radius: 999px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-top-color: rgba(255, 255, 255, 1);
animation: btn-spin-8d544581 0.7s linear infinite;
}
@keyframes btn-spin-8d544581 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* CTA Spinner for submit button */
.cta-spinner[data-v-8d544581] {
width: 24px;
height: 24px;
border-radius: 50%;
border: 3px solid rgba(30, 30, 30, 0.2);
border-top-color: #1e1e1e;
animation: cta-spin-8d544581 0.8s linear infinite;
display: block;
}
@keyframes cta-spin-8d544581 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Loading state for CTA button */
.form[data-v-8d544581] .ui-icon-block-btn.is-loading {
pointer-events: none;
}
/* Page layout */
.payment-selector[data-v-7ad5e3c8] {
background: transparent;
position: relative;
padding: 0;
padding-top: 0;
padding-bottom: 40px;
box-sizing: border-box;
display: grid;
gap: 28px;
min-height: 100%;
align-content: start;
}
.payment-selector--embedded[data-v-7ad5e3c8] {
padding: 0;
gap: 0;
min-height: auto;
}
/* Hero (back button) */
.payment-selector__hero[data-v-7ad5e3c8] {
display: flex;
align-items: center;
}
.hero__back[data-v-7ad5e3c8] {
display: inline-flex;
align-items: center;
gap: 15px;
height: 100%;
background: none;
border: 0;
padding: 0;
cursor: pointer;
transition: transform 0.1s ease, opacity 0.2s ease;
}
.hero__back:hover .hero__back-icon[data-v-7ad5e3c8] {
background: rgba(255, 255, 255, 0.25);
}
.hero__back[data-v-7ad5e3c8]:active {
transform: scale(0.98);
}
.hero__back-icon[data-v-7ad5e3c8] {
width: 40px;
height: 40px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease;
}
.hero__back-icon svg[data-v-7ad5e3c8] {
display: block;
width: 50%;
height: 50%;
}
.hero__back-text[data-v-7ad5e3c8] {
color: #fff;
font-size: 32px;
font-weight: 600;
}
/* Selector layout */
.selector-layout[data-v-7ad5e3c8] {
display: flex;
align-items: flex-start;
justify-content: center;
width: 100%;
}
.payment-selector--embedded .selector-layout[data-v-7ad5e3c8] {
display: block;
}
.selector-cards[data-v-7ad5e3c8] {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
max-width: 597px;
}
.payment-selector--embedded .selector-cards[data-v-7ad5e3c8] {
max-width: none;
gap: 20px;
}
/* Info Card */
.info-card[data-v-7ad5e3c8] {
background: #fff;
border-radius: 28px;
padding: 28px;
overflow: hidden;
}
.payment-selector--embedded .info-card[data-v-7ad5e3c8],
.payment-selector--embedded .method-card[data-v-7ad5e3c8],
.payment-selector--embedded .summary-card[data-v-7ad5e3c8] {
background: rgba(235, 235, 235, 0.5);
border-radius: 24px;
padding: 24px;
}
.info-card__header[data-v-7ad5e3c8] {
display: flex;
align-items: center;
justify-content: space-between;
}
.info-card__title[data-v-7ad5e3c8],
.info-card__price[data-v-7ad5e3c8] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
letter-spacing: -0.48px;
}
/* Method Card */
.method-card[data-v-7ad5e3c8] {
background: #fff;
border-radius: 28px;
padding: 28px;
display: flex;
flex-direction: column;
gap: 30px;
overflow: hidden;
}
.method-card__title[data-v-7ad5e3c8] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
letter-spacing: -0.48px;
margin: 0;
}
/* Method List */
.method-list[data-v-7ad5e3c8] {
display: flex;
flex-direction: column;
gap: 20px;
}
/* Method Item */
.method-item[data-v-7ad5e3c8] {
display: flex;
align-items: center;
gap: 32px;
padding: 8px 16px;
border-radius: 8px;
background: transparent;
border: 0;
cursor: pointer;
width: 100%;
text-align: left;
transition: background-color 0.15s ease;
}
.method-item[data-v-7ad5e3c8]:hover {
background: rgba(235, 235, 235, 0.5);
}
.method-item__radio[data-v-7ad5e3c8] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.method-item__radio-visual[data-v-7ad5e3c8] {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid #8d8d8d;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: border-color 0.15s ease;
}
.method-item--selected .method-item__radio-visual[data-v-7ad5e3c8] {
border-color: #1e1e1e;
}
.method-item__radio-dot[data-v-7ad5e3c8] {
width: 8px;
height: 8px;
border-radius: 50%;
background: #1e1e1e;
transform: scale(0);
transition: transform 0.15s ease;
}
.method-item--selected .method-item__radio-dot[data-v-7ad5e3c8] {
transform: scale(1);
}
.method-item__card-icon[data-v-7ad5e3c8] {
width: 83.2px;
height: 52px;
border-radius: 5px;
background: #ebebeb;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.method-item__card-icon--new[data-v-7ad5e3c8] {
background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
border: none;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.method-item__new-card-dots[data-v-7ad5e3c8] {
font-size: 16px;
font-weight: 600;
color: #fff;
letter-spacing: 2px;
}
.method-item__card-img[data-v-7ad5e3c8] {
width: 68px;
height: 43px;
object-fit: contain;
}
.method-item__info[data-v-7ad5e3c8] {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 4px;
padding: 2px 0;
flex: 1;
}
.method-item__name[data-v-7ad5e3c8] {
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 16px;
color: #1e1e1e;
}
.method-item__number[data-v-7ad5e3c8] {
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 16px;
color: #8d8d8d;
}
.method-item__plus-icon[data-v-7ad5e3c8] {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.method-item__plus-icon svg[data-v-7ad5e3c8] {
display: block;
}
.method-item--add[data-v-7ad5e3c8] {
justify-content: flex-start;
}
.method-item__arrow[data-v-7ad5e3c8] {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
margin-left: auto;
}
.method-item__arrow svg[data-v-7ad5e3c8] {
display: block;
}
/* Divider */
.method-divider[data-v-7ad5e3c8] {
width: 100%;
height: 1px;
background: #ebebeb;
}
/* Summary Card */
.summary-card[data-v-7ad5e3c8] {
background: #fff;
border-radius: 28px;
padding: 28px;
display: flex;
flex-direction: column;
gap: 20px;
overflow: hidden;
}
.summary-card__title[data-v-7ad5e3c8] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
letter-spacing: -0.48px;
margin: 0;
}
.summary-card__content[data-v-7ad5e3c8] {
display: flex;
align-items: center;
gap: 20px;
padding: 8px 16px;
}
.summary-card__card-icon[data-v-7ad5e3c8] {
width: 83.2px;
height: 52px;
border-radius: 5px;
background: #ebebeb;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.summary-card__card-img[data-v-7ad5e3c8] {
width: 68px;
height: 43px;
object-fit: contain;
}
.summary-card__info[data-v-7ad5e3c8] {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 4px;
padding: 2px 0;
}
.summary-card__name[data-v-7ad5e3c8] {
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 16px;
color: #1e1e1e;
}
.summary-card__number[data-v-7ad5e3c8] {
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 16px;
color: #8d8d8d;
}
.summary-card__continue[data-v-7ad5e3c8] {
width: 100%;
height: 58px;
background: #c3fd56;
border: 0;
border-radius: 16px;
padding: 0 28px;
font-size: 20px;
font-weight: 700;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
}
.summary-card__continue[data-v-7ad5e3c8]:hover:not(:disabled) {
background: #b5f342;
}
.summary-card__continue[data-v-7ad5e3c8]:active:not(:disabled) {
transform: scale(0.99);
}
.summary-card__continue[data-v-7ad5e3c8]:disabled {
opacity: 0.6;
cursor: default;
}
/* Mobile responsive */
@media (max-aspect-ratio: 3/4) {
.payment-selector[data-v-7ad5e3c8] {
gap: 16px;
}
.payment-selector--embedded[data-v-7ad5e3c8] {
gap: 0;
}
.hero__back[data-v-7ad5e3c8] {
gap: 8px;
}
.hero__back-icon[data-v-7ad5e3c8] {
width: 30px;
height: 30px;
}
.hero__back-text[data-v-7ad5e3c8] {
font-size: 24px;
font-weight: 500;
}
.selector-cards[data-v-7ad5e3c8] {
gap: 8px;
}
.payment-selector--embedded .selector-cards[data-v-7ad5e3c8] {
gap: 16px;
}
.info-card[data-v-7ad5e3c8],
.method-card[data-v-7ad5e3c8],
.summary-card[data-v-7ad5e3c8] {
padding: 20px;
border-radius: 20px;
}
.payment-selector--embedded .info-card[data-v-7ad5e3c8],
.payment-selector--embedded .method-card[data-v-7ad5e3c8],
.payment-selector--embedded .summary-card[data-v-7ad5e3c8] {
border-radius: 18px;
padding: 20px;
}
.info-card__title[data-v-7ad5e3c8],
.info-card__price[data-v-7ad5e3c8],
.method-card__title[data-v-7ad5e3c8],
.summary-card__title[data-v-7ad5e3c8] {
font-size: 20px;
}
.method-card[data-v-7ad5e3c8] {
gap: 20px;
}
.method-list[data-v-7ad5e3c8] {
gap: 16px;
}
.method-item[data-v-7ad5e3c8] {
gap: 16px;
padding: 8px 12px;
}
.method-item__card-icon[data-v-7ad5e3c8],
.summary-card__card-icon[data-v-7ad5e3c8] {
width: 64px;
height: 40px;
}
.method-item__card-img[data-v-7ad5e3c8],
.summary-card__card-img[data-v-7ad5e3c8] {
width: 52px;
height: 33px;
}
.method-item__name[data-v-7ad5e3c8],
.method-item__number[data-v-7ad5e3c8],
.summary-card__name[data-v-7ad5e3c8],
.summary-card__number[data-v-7ad5e3c8] {
font-size: 14px;
}
.summary-card__continue[data-v-7ad5e3c8] {
height: 52px;
font-size: 18px;
}
}
@media (max-aspect-ratio: 2/3) {
.hero__back-icon[data-v-7ad5e3c8] {
width: 20px;
height: 20px;
}
.hero__back-text[data-v-7ad5e3c8] {
font-size: 14px;
font-weight: 500;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
[data-v-7ad5e3c8] {
transition: none !important;
animation: none !important;
}
}
/* Page shell */
.checkout-view[data-v-ca47a78b] {
background: linear-gradient(to bottom, #7fabce 0%, #fff 100%);
min-height: 100dvh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 48px 20px 40px;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.checkout-logo[data-v-ca47a78b] {
position: absolute;
left: 36px;
top: 36px;
z-index: 2;
display: block;
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
.checkout-logo__img[data-v-ca47a78b] {
height: 37px;
width: auto;
display: block;
}
.checkout-mobile-header[data-v-ca47a78b] {
display: none;
}
.checkout-container[data-v-ca47a78b] {
width: 100%;
max-width: 716px;
position: relative;
z-index: 1;
}
.checkout-card[data-v-ca47a78b] {
background: #fff;
border-radius: 32px;
width: 100%;
padding: 32px;
box-sizing: border-box;
box-shadow:
0 20px 44px rgba(0, 0, 0, 0.04),
0 81px 81px rgba(0, 0, 0, 0.03),
0 183px 109px rgba(0, 0, 0, 0.02),
0 325px 130px rgba(0, 0, 0, 0.01);
position: relative;
display: flex;
flex-direction: column;
gap: 32px;
}
/* Виджет ЮKassa: карточка растёт по контенту, без обрезки */
.checkout-card--widget[data-v-ca47a78b] {
max-width: 100%;
overflow: visible;
}
.checkout-card--status[data-v-ca47a78b] {
min-height: 360px;
align-items: center;
justify-content: center;
text-align: center;
}
.checkout-card--selector[data-v-ca47a78b] {
padding: 32px;
}
.checkout-card__title[data-v-ca47a78b] {
margin: 0;
font-size: 32px;
font-weight: 600;
color: #1e1e1e;
letter-spacing: -0.64px;
text-align: center;
}
.payment-form[data-v-ca47a78b] {
min-height: 100%;
}
/* ===== Animations & Transitions ===== */
/* Buttons */
.btn[data-v-ca47a78b] { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .1s ease, box-shadow .2s ease;
}
.btn[data-v-ca47a78b]:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.btn[data-v-ca47a78b]:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.btn--primary[data-v-ca47a78b]:hover { background: #b5f342; border-color: #b5f342;
}
.btn--primary[data-v-ca47a78b]:active { background: #a8e83a; border-color: #a8e83a;
}
.btn--ghost[data-v-ca47a78b]:hover { background: rgba(30,30,30,.05);
}
.btn--ghost[data-v-ca47a78b]:active { background: rgba(30,30,30,.08);
}
/* Chooser items */
.chooser-item[data-v-ca47a78b] { transition: background-color .15s ease, transform .1s ease;
}
.chooser-item[data-v-ca47a78b]:hover { background: #f5f5f5;
}
.chooser-item[data-v-ca47a78b]:active { transform: scale(0.99);
}
.mobile-chooser__item[data-v-ca47a78b] { transition: transform .1s ease, opacity .2s ease;
}
.mobile-chooser__item[data-v-ca47a78b]:active { transform: scale(0.99);
}
.mobile-chooser__close[data-v-ca47a78b] { transition: transform .1s ease, background-color .2s ease;
}
.mobile-chooser__close[data-v-ca47a78b]:hover { background-color: #2b2b2b;
}
.mobile-chooser__close[data-v-ca47a78b]:active { transform: scale(0.96);
}
/* CTA button (UiIconBlockButton) */
.form[data-v-ca47a78b] .ui-icon-block-btn { transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.form[data-v-ca47a78b] .ui-icon-block-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.form[data-v-ca47a78b] .ui-icon-block-btn:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.form[data-v-ca47a78b] .ui-icon-block-btn[disabled],
.form[data-v-ca47a78b] .ui-icon-block-btn[aria-disabled="true"] {
opacity: .5;
cursor: not-allowed;
pointer-events: none;
transform: none;
box-shadow: none;
}
/* Overlay/dialog transitions */
.fade-enter-active[data-v-ca47a78b], .fade-leave-active[data-v-ca47a78b] { transition: opacity .2s ease;
}
.fade-enter-from[data-v-ca47a78b], .fade-leave-to[data-v-ca47a78b] { opacity: 0;
}
.slide-down-enter-active[data-v-ca47a78b], .slide-down-leave-active[data-v-ca47a78b] { transition: opacity .2s ease, transform .2s ease; transform-origin: top;
}
.slide-down-enter-from[data-v-ca47a78b], .slide-down-leave-to[data-v-ca47a78b] { opacity: 0; transform: translateY(-8px);
}
.pop-enter-active[data-v-ca47a78b], .pop-leave-active[data-v-ca47a78b] { transition: opacity .25s ease, transform .25s ease;
}
.pop-enter-from[data-v-ca47a78b], .pop-leave-to[data-v-ca47a78b] { opacity: 0; transform: translateY(8px) scale(0.98);
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
[data-v-ca47a78b] { transition: none !important; animation: none !important;
}
}
/* Keyframes */
@keyframes checkbox-pop-ca47a78b {
0% { transform: scale(0.9);
}
50% { transform: scale(1.05);
}
100% { transform: scale(1);
}
}
@keyframes error-pulse-ca47a78b {
0% { box-shadow: 0 0 0 0 rgba(255,59,48,0.0);
}
50% { box-shadow: 0 0 0 6px rgba(255,59,48,0.18);
}
100% { box-shadow: 0 0 0 0 rgba(255,59,48,0.0);
}
}
/* Success overlay */
.success-overlay[data-v-ca47a78b] {
position: fixed;
inset: 0;
z-index: 300;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: grid;
place-items: center;
padding: 16px;
}
.success-dialog[data-v-ca47a78b] {
background: #fff;
border-radius: 20px;
width: 100%;
max-width: 460px;
display: grid;
gap: 16px;
padding: 24px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.success-topbar[data-v-ca47a78b] { display: flex; align-items: center; justify-content: space-between;
}
.success-title[data-v-ca47a78b] { font-size: 20px; font-weight: 700; color: #1e1e1e;
}
.success-text[data-v-ca47a78b] { font-size: 14px; color: rgba(30,30,30,.8);
}
.success-actions[data-v-ca47a78b] { display: grid; gap: 8px;
}
.success-actions[data-v-ca47a78b] .ui-icon-block-btn { width: 100%;
}
@media (max-aspect-ratio: 3/4) {
.success-dialog[data-v-ca47a78b] {
border-radius: 16px;
max-width: 360px;
padding: 16px;
gap: 12px;
}
.success-title[data-v-ca47a78b] { font-size: 18px;
}
.success-text[data-v-ca47a78b] { font-size: 12px;
}
}
/* Mascot underlay (mobile only) */
.mascot-underlay[data-v-ca47a78b] {
position: fixed;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
display: grid;
place-items: center;
}
.mascot-img[data-v-ca47a78b] {
width: 70%;
height: 100%;
object-fit: contain;
display: block;
}
@media (min-aspect-ratio: 3/4) {
.mascot-underlay[data-v-ca47a78b] { display: none;
}
}
/* Generic Dialog Styles */
.overlay[data-v-ca47a78b] {
position: fixed;
inset: 0;
z-index: 300;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: grid;
place-items: center;
padding: 16px;
}
.dialog[data-v-ca47a78b] {
background: #fff;
border-radius: 20px;
width: 100%;
display: flex;
flex-direction: column;
max-height: 90vh;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
overflow: hidden;
}
.dialog--sm[data-v-ca47a78b] { max-width: 400px;
}
.dialog--md[data-v-ca47a78b] { max-width: 600px;
}
.dialog__header[data-v-ca47a78b] {
padding: 20px 24px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.dialog__title[data-v-ca47a78b] {
margin: 0;
font-size: 20px;
font-weight: 700;
color: #1e1e1e;
}
.dialog__close[data-v-ca47a78b] {
width: 32px;
height: 32px;
border: 0;
padding: 0;
border-radius: 50%;
background: #f5f5f5;
display: grid;
place-items: center;
cursor: pointer;
transition: background .2s;
}
.dialog__close[data-v-ca47a78b]:hover { background: #ebebeb;
}
.close-icon[data-v-ca47a78b] {
width: 12px;
height: 12px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%231e1e1e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 3l6 6M9 3L3 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.dialog__body[data-v-ca47a78b] {
padding: 24px;
display: grid;
gap: 20px;
overflow-y: auto;
}
.dialog__text[data-v-ca47a78b] {
margin: 0;
font-size: 16px;
color: rgba(30,30,30,0.8);
line-height: 1.5;
}
.input--code[data-v-ca47a78b] {
text-align: center;
font-size: 24px;
letter-spacing: 4px;
font-weight: 600;
background: #f5f5f5;
border-radius: 12px;
padding: 16px;
}
.error-text[data-v-ca47a78b] {
color: #ff3b30;
font-size: 14px;
margin: 0;
text-align: center;
}
.payment-container[data-v-ca47a78b] {
width: 100%;
min-height: 683px;
flex: 1 1 auto;
overflow: visible;
display: flex;
flex-direction: column;
align-items: stretch;
}
.payment-container.is-hidden[data-v-ca47a78b] {
display: none;
}
/* Разметка, которую вставляет виджет ЮKassa (iframe / обёртки) */
.payment-container[data-v-ca47a78b] iframe {
width: 100% !important;
max-width: 100%;
min-height: 420px;
flex: 1 1 auto;
border: 0;
display: block;
box-sizing: border-box;
}
.checkout-card.is-hidden[data-v-ca47a78b] {
display: none;
}
/* Widget loading state */
.widget-loading-state[data-v-ca47a78b] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
gap: 20px;
min-height: 300px;
}
.widget-spinner[data-v-ca47a78b] {
width: 48px;
height: 48px;
border-radius: 50%;
border: 4px solid rgba(30, 30, 30, 0.15);
border-top-color: #1e1e1e;
animation: widget-spin-ca47a78b 0.9s linear infinite;
}
.widget-loading-text[data-v-ca47a78b] {
margin: 0;
font-size: 16px;
font-weight: 500;
color: rgba(30, 30, 30, 0.6);
}
@keyframes widget-spin-ca47a78b {
to {
transform: rotate(360deg);
}
}
.checkout-status-text[data-v-ca47a78b] {
margin: 0;
font-size: 18px;
font-weight: 500;
color: rgba(30, 30, 30, 0.6);
}
.loading-spinner[data-v-ca47a78b] {
width: 48px;
height: 48px;
border: 4px solid rgba(30, 30, 30, 0.15);
border-top-color: #1e1e1e;
border-radius: 50%;
animation: spin-ca47a78b 1s linear infinite;
}
@keyframes spin-ca47a78b {
to {
transform: rotate(360deg);
}
}
@media (max-width: 600px) {
.dialog[data-v-ca47a78b] { border-radius: 16px;
}
.dialog__header[data-v-ca47a78b] { padding: 16px;
}
.dialog__body[data-v-ca47a78b] { padding: 16px;
}
.dialog__title[data-v-ca47a78b] { font-size: 18px;
}
}
.error-card__text[data-v-ca47a78b] {
margin: 0;
font-size: 16px;
color: #1e1e1e;
line-height: 1.5;
}
.btn-back[data-v-ca47a78b] {
width: 100%;
height: 50px;
background: #f5f5f5;
border: 0;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease;
}
.btn-back[data-v-ca47a78b]:hover {
background: #ebebeb;
}
@media (max-width: 480px) {
.checkout-logo[data-v-ca47a78b] {
display: none;
}
.checkout-view[data-v-ca47a78b] {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
padding-top: 0;
padding-left: 0;
padding-right: 0;
padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.checkout-mobile-header[data-v-ca47a78b] {
display: flex;
flex-shrink: 0;
width: 100%;
padding: 24px 16px;
align-items: center;
justify-content: flex-start;
z-index: 2;
box-sizing: border-box;
}
.checkout-mobile-header__back[data-v-ca47a78b] {
display: flex;
align-items: center;
gap: 17px;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: #fff;
font-size: 21px;
font-weight: 500;
letter-spacing: -0.2px;
font-family: inherit;
}
.checkout-mobile-header__back-icon[data-v-ca47a78b] {
width: 48px;
height: 48px;
display: block;
flex-shrink: 0;
}
.checkout-container[data-v-ca47a78b] {
flex: 0 0 auto;
width: 100%;
max-width: none;
display: flex;
flex-direction: column;
min-height: auto;
}
.checkout-card[data-v-ca47a78b] {
flex: 0 1 auto;
border-radius: 24px 24px 0 0;
padding: 48px 24px 32px;
box-shadow: none;
min-height: 0;
}
.checkout-card--status[data-v-ca47a78b] {
flex: 1 1 auto;
min-height: min(50dvh, 400px);
}
.checkout-card--widget[data-v-ca47a78b] {
flex: 0 1 auto;
overflow: visible;
}
.checkout-card__title[data-v-ca47a78b] {
font-size: 28px;
}
}
/* Retry Dialog Modal */
.modal-overlay[data-v-ca47a78b] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
box-sizing: border-box;
overflow: auto;
}
.modal-dialog[data-v-ca47a78b] {
background: #fff;
border-radius: 28px;
padding: 32px;
width: 100%;
max-width: 420px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
margin: auto;
}
.modal-content--retry[data-v-ca47a78b] {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
}
.retry-icon[data-v-ca47a78b] {
margin-bottom: 4px;
}
.modal-title[data-v-ca47a78b] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
margin: 0;
}
.modal-text[data-v-ca47a78b] {
font-size: 16px;
color: #5c5c5c;
margin: 0;
line-height: 1.5;
}
.modal-actions[data-v-ca47a78b] {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
margin-top: 8px;
}
.btn-primary[data-v-ca47a78b] {
width: 100%;
height: 54px;
background: #c3fd56;
border: 0;
border-radius: 14px;
font-size: 17px;
font-weight: 700;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
}
.btn-primary[data-v-ca47a78b]:hover:not(:disabled) {
background: #b5f342;
}
.btn-primary[data-v-ca47a78b]:active:not(:disabled) {
transform: scale(0.99);
}
.btn-primary[data-v-ca47a78b]:disabled {
opacity: 0.6;
cursor: default;
}
.btn-secondary[data-v-ca47a78b] {
width: 100%;
height: 48px;
background: transparent;
border: 1px solid rgba(30, 30, 30, 0.2);
border-radius: 14px;
font-size: 15px;
font-weight: 600;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.btn-secondary[data-v-ca47a78b]:hover:not(:disabled) {
background: rgba(235, 235, 235, 0.5);
}
.btn-secondary[data-v-ca47a78b]:active:not(:disabled) {
transform: scale(0.99);
}
.btn-secondary[data-v-ca47a78b]:disabled {
opacity: 0.5;
cursor: default;
}
@media (max-aspect-ratio: 3/4) {
.modal-dialog[data-v-ca47a78b] {
padding: 24px;
border-radius: 20px;
}
.modal-title[data-v-ca47a78b] {
font-size: 20px;
}
.modal-text[data-v-ca47a78b] {
font-size: 14px;
}
.btn-primary[data-v-ca47a78b] {
height: 50px;
font-size: 16px;
border-radius: 12px;
}
.btn-secondary[data-v-ca47a78b] {
height: 44px;
font-size: 14px;
border-radius: 12px;
}
}
/* Confirmation URL Modal (iframe) */
.confirmation-modal-overlay[data-v-ca47a78b] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100dvh;
min-height: 100vh;
z-index: 10000;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
box-sizing: border-box;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.confirmation-modal[data-v-ca47a78b] {
position: relative;
background: #fff;
border-radius: 20px;
width: min(100%, 520px);
max-width: calc(100vw - 32px);
/* Высота под окно: форма 3‑DS / банка может быть выше фиксированных 500px */
height: min(90dvh, 880px);
max-height: calc(100dvh - max(32px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
min-height: min(360px, calc(100dvh - 48px));
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
overflow: hidden;
display: flex;
flex-direction: column;
flex-shrink: 0;
}
.confirmation-modal__iframe[data-v-ca47a78b] {
width: 100%;
flex: 1 1 auto;
min-height: 0;
height: 100%;
border: 0;
}
@media (max-aspect-ratio: 3/4) {
.confirmation-modal-overlay[data-v-ca47a78b] {
align-items: flex-start;
padding-top: max(12px, env(safe-area-inset-top));
}
.confirmation-modal[data-v-ca47a78b] {
width: 100%;
max-width: none;
margin: 0 auto;
height: min(92dvh, 900px);
max-height: calc(100dvh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
min-height: min(320px, calc(100dvh - 40px));
border-radius: 16px;
}
}
/* Verification Step Styles */
.panel--left-media[data-v-ca47a78b] {
height: 802px;
border-radius: 28px;
overflow: hidden;
position: relative;
padding: 0;
background: linear-gradient(90deg, #4752F1 0%, #B4DE5E 100%);
}
.media-content[data-v-ca47a78b] {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0;
transition: opacity 0.8s ease-in-out;
transform: scale(1.01);
}
.media-content.is-loaded[data-v-ca47a78b] {
opacity: 1;
}
.panel--right-verify[data-v-ca47a78b] {
background: #fff;
border-radius: 28px;
padding: 28px;
display: flex;
flex-direction: column;
gap: 42px;
min-height: 802px;
box-sizing: border-box;
}
.verify-title[data-v-ca47a78b] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
line-height: 1.2;
margin: 0;
letter-spacing: -0.48px;
}
.verify-form[data-v-ca47a78b] {
display: grid;
gap: 12px;
}
.verify-field[data-v-ca47a78b] {
display: block;
background: rgba(235, 235, 235, 0.5);
padding: 28px;
border-radius: 16px;
}
.verify-input[data-v-ca47a78b] {
width: 100%;
padding: 0;
box-sizing: border-box;
border: 0;
background: transparent;
outline: none;
font-size: 18px; /* Match other inputs */
color: #1e1e1e;
font-weight: 400; /* Match other inputs */
letter-spacing: normal;
text-align: left;
}
.verify-input[data-v-ca47a78b]::placeholder {
color: rgba(30, 30, 30, 0.4);
font-weight: 500;
}
/* Mobile adjustments for Verification Step */
@media (max-aspect-ratio: 3/4) {
.panel--left-media[data-v-ca47a78b] {
height: 300px; /* Smaller on mobile */
margin-top: 16px;
order: 1;
z-index: 1;
}
.panel--right-verify[data-v-ca47a78b] {
height: auto;
min-height: auto;
order: 2;
z-index: 2;
margin-top: -24px; /* overlap? or just stack */
margin-top: 16px;
padding: 16px;
gap: 24px;
}
.verify-title[data-v-ca47a78b] {
font-size: 20px;
}
.verify-field[data-v-ca47a78b] {
padding: 20px;
}
}
/* Как /start: градиент и белая карточка */
.thanks-view[data-v-e1302e87] {
width: 100%;
min-height: 100dvh;
background: linear-gradient(to bottom, #7fabce 0%, #fff 100%);
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 120px 20px 48px;
}
.thanks-logo[data-v-e1302e87] {
position: absolute;
left: 36px;
top: 36px;
z-index: 2;
display: block;
}
.thanks-logo__img[data-v-e1302e87] {
height: 37px;
width: auto;
display: block;
}
.thanks-lk-pill[data-v-e1302e87] {
position: absolute;
right: 36px;
top: 36px;
z-index: 2;
display: flex;
align-items: center;
gap: 5px;
padding: 10px 16px 10px 10px;
border-radius: 16px;
background: #c3fd56;
color: #1e1e1e;
text-decoration: none;
font-size: 16px;
font-weight: 500;
letter-spacing: -0.48px;
line-height: 1;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-sizing: border-box;
cursor: pointer;
font-family: inherit;
}
.thanks-lk-pill__icon[data-v-e1302e87] {
flex-shrink: 0;
display: block;
}
.thanks-mobile-header[data-v-e1302e87] {
display: none;
}
.thanks-container[data-v-e1302e87] {
width: 100%;
max-width: 676px;
box-sizing: border-box;
position: relative;
z-index: 1;
}
.thanks-card[data-v-e1302e87] {
background: #fff;
border-radius: 29px;
padding: 32px 32px 64px;
width: 100%;
box-sizing: border-box;
box-shadow:
0 20px 44px rgba(0, 0, 0, 0.04),
0 81px 81px rgba(0, 0, 0, 0.03),
0 183px 109px rgba(0, 0, 0, 0.02),
0 325px 130px rgba(0, 0, 0, 0.01);
display: flex;
flex-direction: column;
align-items: center;
gap: 42px;
}
.progress-bar[data-v-e1302e87] {
display: flex;
gap: 8px;
width: 100%;
max-width: 614px;
}
.progress-bar__step[data-v-e1302e87] {
flex: 1;
height: 6px;
border-radius: 197px;
background: #d9d9d9;
}
.progress-bar__step--active[data-v-e1302e87] {
background: #c3fd56;
}
.thanks-title[data-v-e1302e87] {
margin: 0;
max-width: 563px;
font-size: 32px;
font-weight: 700;
color: #1e1e1e;
line-height: 1;
letter-spacing: -0.64px;
text-align: center;
font-feature-settings: 'lnum' 1, 'pnum' 1;
}
.thanks-mascot-wrap[data-v-e1302e87] {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 424px;
}
.thanks-mascot[data-v-e1302e87] {
width: 100%;
max-width: 424px;
height: auto;
aspect-ratio: 424 / 356;
object-fit: contain;
display: block;
transform: scaleX(-1);
}
/* Обёртка: кнопка внутри — :deep() корректно находит .ui-icon-block-btn */
.thanks-cta-wrap[data-v-e1302e87] {
width: 100%;
max-width: 295px;
min-width: 0;
}
.thanks-cta-wrap[data-v-e1302e87] .ui-icon-block-btn {
box-sizing: border-box;
width: 100%;
min-height: 60px;
padding: 24px 16px;
background: #c3fd56 !important;
color: #1e1e1e !important;
border-radius: 14px !important;
font-weight: 700 !important;
}
.thanks-cta-wrap[data-v-e1302e87] .label {
display: block;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
}
/* Мобилка как /start: колонка, шапка сверху, карточка на всю ширину */
@media (max-width: 480px) {
.thanks-view[data-v-e1302e87] {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
padding: 0;
padding-bottom: env(safe-area-inset-bottom, 0);
min-height: 100dvh;
min-height: 100svh;
}
.thanks-logo[data-v-e1302e87],
.thanks-lk-pill[data-v-e1302e87] {
display: none;
}
.thanks-mobile-header[data-v-e1302e87] {
display: flex;
flex-shrink: 0;
width: 100%;
padding: 24px 16px;
align-items: center;
justify-content: flex-start;
z-index: 2;
box-sizing: border-box;
}
.thanks-mobile-header__back[data-v-e1302e87] {
display: flex;
align-items: center;
gap: 17px;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: #fff;
font-size: 21px;
font-weight: 500;
letter-spacing: -0.2px;
font-family: inherit;
}
.thanks-mobile-header__back-icon[data-v-e1302e87] {
width: 48px;
height: 48px;
display: block;
flex-shrink: 0;
}
.thanks-container[data-v-e1302e87] {
flex: 1;
width: 100%;
max-width: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
min-height: 0;
min-width: 0;
}
.thanks-card[data-v-e1302e87] {
flex: 1;
width: 100%;
min-width: 0;
border-radius: 24px 24px 0 0;
padding: 48px 24px 32px;
gap: 24px;
box-shadow: none;
align-items: stretch;
}
.progress-bar[data-v-e1302e87] {
max-width: none;
width: 100%;
min-width: 0;
}
.thanks-title[data-v-e1302e87] {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.44px;
line-height: 1.2;
max-width: 100%;
padding: 0 4px;
box-sizing: border-box;
}
.thanks-mascot-wrap[data-v-e1302e87] {
max-width: 100%;
min-width: 0;
flex-shrink: 1;
}
.thanks-mascot[data-v-e1302e87] {
max-width: min(100%, 320px);
width: 100%;
height: auto;
margin: 0 auto;
aspect-ratio: auto;
}
.thanks-cta-wrap[data-v-e1302e87] {
width: 100%;
max-width: none;
}
.thanks-cta-wrap[data-v-e1302e87] .ui-icon-block-btn {
min-height: 56px;
padding: 12px 10px;
font-weight: 700 !important;
}
.thanks-cta-wrap[data-v-e1302e87] .label {
letter-spacing: -0.03em;
}
}
/* Page shell */
.card-management[data-v-d0ea0ec7] {
background: linear-gradient(to bottom, #7fabce 0%, #fff 100%);
min-height: 100dvh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 48px 20px 40px;
}
.card-management-desktop-back[data-v-d0ea0ec7] {
position: absolute;
left: 36px;
top: 36px;
z-index: 2;
display: flex;
align-items: center;
gap: 17px;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: #fff;
font-size: 21px;
font-weight: 500;
letter-spacing: -0.2px;
font-family: inherit;
}
.card-management-desktop-back__icon[data-v-d0ea0ec7] {
width: 48px;
height: 48px;
display: block;
flex-shrink: 0;
}
.card-management-mobile-header[data-v-d0ea0ec7] {
display: none;
}
.card-management-container[data-v-d0ea0ec7] {
width: 100%;
max-width: 716px;
position: relative;
z-index: 1;
}
/* Cards layout */
.cards-layout[data-v-d0ea0ec7] {
display: flex;
align-items: flex-start;
justify-content: center;
width: 100%;
}
.cards-panel[data-v-d0ea0ec7] {
background: #fff;
border-radius: 32px;
padding: 32px;
width: 100%;
max-width: 597px;
display: flex;
flex-direction: column;
gap: 30px;
box-shadow:
0 20px 44px rgba(0, 0, 0, 0.04),
0 81px 81px rgba(0, 0, 0, 0.03),
0 183px 109px rgba(0, 0, 0, 0.02),
0 325px 130px rgba(0, 0, 0, 0.01);
}
.cards-panel__title[data-v-d0ea0ec7] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
margin: 0;
letter-spacing: -0.48px;
}
/* Cards list */
.cards-list[data-v-d0ea0ec7] {
display: flex;
flex-direction: column;
gap: 20px;
}
.cards-list__empty[data-v-d0ea0ec7] {
margin: 0;
padding: 20px 0;
text-align: center;
color: #9c9c9c;
font-size: 16px;
font-weight: 500;
}
.cards-list__loading[data-v-d0ea0ec7] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
gap: 16px;
color: #9c9c9c;
}
.cards-list__loading p[data-v-d0ea0ec7] {
margin: 0;
font-size: 16px;
font-weight: 500;
}
.loading-spinner[data-v-d0ea0ec7] {
width: 36px;
height: 36px;
border: 3px solid rgba(30, 30, 30, 0.1);
border-top-color: #1e1e1e;
border-radius: 50%;
animation: spin-d0ea0ec7 1s linear infinite;
}
@keyframes spin-d0ea0ec7 {
to {
transform: rotate(360deg);
}
}
.cards-list__error[data-v-d0ea0ec7] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
gap: 16px;
text-align: center;
}
.cards-list__error p[data-v-d0ea0ec7] {
margin: 0;
font-size: 16px;
color: #f43030;
}
.btn-retry[data-v-d0ea0ec7] {
padding: 10px 24px;
background: #f5f5f5;
border: 0;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease;
}
.btn-retry[data-v-d0ea0ec7]:hover {
background: #ebebeb;
}
.cards-panel__add-button[data-v-d0ea0ec7] {
margin-top: 4px;
display: flex;
align-items: center;
justify-content: center;
}
/* Button spinner */
.btn-spinner[data-v-d0ea0ec7] {
width: 24px;
height: 24px;
border-radius: 50%;
border: 3px solid rgba(30, 30, 30, 0.2);
border-top-color: #1e1e1e;
animation: btn-spin-d0ea0ec7 0.8s linear infinite;
display: block;
}
.btn-spinner--red[data-v-d0ea0ec7] {
width: 20px;
height: 20px;
border: 2px solid rgba(244, 48, 48, 0.25);
border-top-color: #f43030;
}
@keyframes btn-spin-d0ea0ec7 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.card-item[data-v-d0ea0ec7] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
border-radius: 8px;
background: transparent;
border: 0;
cursor: pointer;
width: 100%;
text-align: left;
transition: background-color 0.15s ease, transform 0.1s ease;
}
.card-item[data-v-d0ea0ec7]:hover {
background: rgba(235, 235, 235, 0.5);
}
.card-item[data-v-d0ea0ec7]:active {
transform: scale(0.99);
}
.card-item__left[data-v-d0ea0ec7] {
display: flex;
align-items: center;
gap: 20px;
}
.card-item__icon[data-v-d0ea0ec7] {
width: 83.2px;
height: 52px;
border-radius: 5px;
background: #ebebeb;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.card-item__icon-img[data-v-d0ea0ec7] {
width: 68px;
height: 43px;
object-fit: contain;
}
.card-item__info[data-v-d0ea0ec7] {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 4px;
padding: 2px 0;
}
.card-item__name[data-v-d0ea0ec7] {
display: flex;
align-items: center;
gap: 5px;
}
.card-item__type[data-v-d0ea0ec7] {
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 16px;
color: #1e1e1e;
}
.card-item__dot[data-v-d0ea0ec7] {
color: #8d8d8d;
font-size: 12px;
}
.card-item__default[data-v-d0ea0ec7] {
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 16px;
color: #8d8d8d;
}
.card-item__number[data-v-d0ea0ec7] {
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 16px;
color: #8d8d8d;
}
.card-item__arrow[data-v-d0ea0ec7] {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.card-item__arrow svg[data-v-d0ea0ec7] {
display: block;
}
/* Mobile responsive */
@media (max-width: 480px) {
.card-management-desktop-back[data-v-d0ea0ec7] {
display: none;
}
.card-management[data-v-d0ea0ec7] {
flex-direction: column;
align-items: stretch;
padding: 0;
}
.card-management-mobile-header[data-v-d0ea0ec7] {
display: flex;
flex-shrink: 0;
width: 100%;
padding: 24px 16px;
align-items: center;
justify-content: flex-start;
z-index: 2;
box-sizing: border-box;
}
.card-management-mobile-header__back[data-v-d0ea0ec7] {
display: flex;
align-items: center;
gap: 17px;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: #fff;
font-size: 21px;
font-weight: 500;
letter-spacing: -0.2px;
font-family: inherit;
}
.card-management-mobile-header__back-icon[data-v-d0ea0ec7] {
width: 48px;
height: 48px;
display: block;
flex-shrink: 0;
}
.card-management-container[data-v-d0ea0ec7] {
flex: 1;
width: 100%;
max-width: none;
display: flex;
flex-direction: column;
min-height: 0;
}
.cards-panel[data-v-d0ea0ec7] {
flex: 1;
width: 100%;
max-width: none;
padding: 48px 24px 32px;
border-radius: 24px 24px 0 0;
gap: 20px;
box-shadow: none;
}
.cards-panel__title[data-v-d0ea0ec7] {
font-size: 20px;
}
.cards-list[data-v-d0ea0ec7] {
gap: 12px;
}
.cards-panel__add-button[data-v-d0ea0ec7] {
height: 52px;
font-size: 18px;
}
.card-item[data-v-d0ea0ec7] {
padding: 8px 12px;
}
.card-item__left[data-v-d0ea0ec7] {
gap: 12px;
}
.card-item__icon[data-v-d0ea0ec7] {
width: 64px;
height: 40px;
}
.card-item__icon-img[data-v-d0ea0ec7] {
width: 52px;
height: 33px;
}
.card-item__type[data-v-d0ea0ec7],
.card-item__default[data-v-d0ea0ec7],
.card-item__number[data-v-d0ea0ec7] {
font-size: 14px;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
[data-v-d0ea0ec7] {
transition: none !important;
animation: none !important;
}
}
/* Modal Overlay */
.modal-overlay[data-v-d0ea0ec7] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
box-sizing: border-box;
overflow: auto;
}
.modal-dialog[data-v-d0ea0ec7] {
background: #fff;
border-radius: 28px;
padding: 28px;
width: 100%;
max-width: 456px;
max-height: calc(100vh - 32px);
display: flex;
flex-direction: column;
gap: 30px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
overflow: auto;
margin: auto;
position: relative;
}
.modal-header[data-v-d0ea0ec7] {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.modal-title[data-v-d0ea0ec7] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
margin: 0;
letter-spacing: -0.48px;
}
.modal-close[data-v-d0ea0ec7] {
width: 32px;
height: 32px;
border: 0;
padding: 0;
border-radius: 8px;
background: #f5f5f5;
display: grid;
place-items: center;
cursor: pointer;
flex-shrink: 0;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.modal-close[data-v-d0ea0ec7]:hover {
background: #ebebeb;
}
.modal-close[data-v-d0ea0ec7]:active {
transform: scale(0.95);
}
.modal-content[data-v-d0ea0ec7] {
display: flex;
flex-direction: column;
gap: 30px;
align-items: center;
position: relative;
z-index: 1;
}
/* Card Verification Modal */
.verification-modal-overlay[data-v-d0ea0ec7] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
box-sizing: border-box;
}
.verification-modal[data-v-d0ea0ec7] {
position: relative;
background: #fff;
border-radius: 24px;
width: 100%;
max-width: 460px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.verification-modal__content[data-v-d0ea0ec7] {
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 32px;
gap: 20px;
text-align: center;
}
.verification-modal__icon[data-v-d0ea0ec7] {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(195, 253, 86, 0.15);
display: flex;
align-items: center;
justify-content: center;
color: #1e1e1e;
}
.verification-modal__title[data-v-d0ea0ec7] {
margin: 0;
font-size: 22px;
font-weight: 600;
color: #1e1e1e;
}
.verification-modal__text[data-v-d0ea0ec7] {
margin: 0;
font-size: 15px;
line-height: 1.5;
color: #5c5c5c;
}
.verification-modal__actions[data-v-d0ea0ec7] {
display: flex;
gap: 12px;
width: 100%;
margin-top: 8px;
}
.verification-modal__btn[data-v-d0ea0ec7] {
flex: 1;
padding: 14px 24px;
border: 0;
border-radius: 14px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.verification-modal__btn[data-v-d0ea0ec7]:active {
transform: scale(0.98);
}
.verification-modal__btn--secondary[data-v-d0ea0ec7] {
background: #f5f5f5;
color: #1e1e1e;
}
.verification-modal__btn--secondary[data-v-d0ea0ec7]:hover {
background: #ebebeb;
}
.verification-modal__btn--primary[data-v-d0ea0ec7] {
background: #c3fd56;
color: #1e1e1e;
}
.verification-modal__btn--primary[data-v-d0ea0ec7]:hover {
background: #b5f342;
}
@media (max-aspect-ratio: 3/4) {
.verification-modal-overlay[data-v-d0ea0ec7] {
padding: 16px;
}
.verification-modal[data-v-d0ea0ec7] {
max-width: 100%;
border-radius: 20px;
}
.verification-modal__content[data-v-d0ea0ec7] {
padding: 32px 24px;
gap: 16px;
}
.verification-modal__icon[data-v-d0ea0ec7] {
width: 56px;
height: 56px;
}
.verification-modal__icon svg[data-v-d0ea0ec7] {
width: 28px;
height: 28px;
}
.verification-modal__title[data-v-d0ea0ec7] {
font-size: 20px;
}
.verification-modal__text[data-v-d0ea0ec7] {
font-size: 14px;
}
.verification-modal__actions[data-v-d0ea0ec7] {
flex-direction: column-reverse;
gap: 10px;
}
.verification-modal__btn[data-v-d0ea0ec7] {
padding: 12px 20px;
font-size: 15px;
border-radius: 12px;
}
}
/* Card Preview (stylized bank card) with 3D effect */
.card-preview[data-v-d0ea0ec7] {
width: 400px;
height: 252px;
background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
border-radius: 20px;
padding: 25px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
position: relative;
transform-style: preserve-3d;
transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
cursor: grab;
overflow: hidden;
}
/* Hover effect only for devices with mouse/pointer */
@media (hover: hover) {
.card-preview[data-v-d0ea0ec7]:hover {
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.25),
0 15px 30px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
}
/* Active state controlled by JS (works on both desktop and mobile) */
.card-preview--active[data-v-d0ea0ec7] {
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.25),
0 15px 30px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
/* Shine/gloss effect overlay */
.card-preview__shine[data-v-d0ea0ec7] {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 20px;
background: radial-gradient(
circle at var(--shine-x, 50%) var(--shine-y, 50%),
rgba(255, 255, 255, 0.35) 0%,
rgba(255, 255, 255, 0.1) 30%,
transparent 60%
);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 10;
}
/* Shine effect only for devices with mouse/pointer */
@media (hover: hover) {
.card-preview:hover .card-preview__shine[data-v-d0ea0ec7] {
opacity: 1;
}
}
/* Active state controlled by JS (works on both desktop and mobile) */
.card-preview--active .card-preview__shine[data-v-d0ea0ec7] {
opacity: 1;
}
/* Delete confirmation overlay */
.modal-confirm-overlay[data-v-d0ea0ec7] {
position: absolute;
inset: 0;
background: rgba(150, 150, 150, 0.7);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
border-radius: 28px;
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
z-index: 5;
}
.delete-confirm[data-v-d0ea0ec7] {
background: #fff;
border-radius: 20px;
padding: 24px;
width: 100%;
max-width: 320px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
.delete-confirm__icon[data-v-d0ea0ec7] {
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(244, 48, 48, 0.08);
display: flex;
align-items: center;
justify-content: center;
}
.delete-confirm__title[data-v-d0ea0ec7] {
font-size: 20px;
font-weight: 600;
margin: 0;
color: #1e1e1e;
}
.delete-confirm__card[data-v-d0ea0ec7] {
margin: 0;
padding: 10px 16px;
border-radius: 14px;
background: #f5f5f5;
font-size: 16px;
font-weight: 600;
color: #1e1e1e;
}
.delete-confirm__text[data-v-d0ea0ec7] {
margin: 0;
font-size: 16px;
color: #5c5c5c;
}
.delete-confirm__actions[data-v-d0ea0ec7] {
display: flex;
gap: 12px;
width: 100%;
}
.delete-confirm__btn[data-v-d0ea0ec7] {
flex: 1;
height: 48px;
border-radius: 14px;
border: 0;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: transform 0.1s ease, opacity 0.2s ease;
}
.delete-confirm__btn[data-v-d0ea0ec7]:active {
transform: scale(0.98);
}
.delete-confirm__btn--muted[data-v-d0ea0ec7] {
background: #f5f5f5;
color: #1e1e1e;
}
.delete-confirm__btn--muted[data-v-d0ea0ec7]:hover {
opacity: 0.85;
}
.delete-confirm__btn--danger[data-v-d0ea0ec7] {
background: #f43030;
color: #fff;
}
.delete-confirm__btn--danger[data-v-d0ea0ec7]:hover {
opacity: 0.85;
}
/* Last Card Warning Modal */
.last-card-warning-overlay[data-v-d0ea0ec7] {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 10000;
}
.last-card-warning[data-v-d0ea0ec7] {
background: #fff;
border-radius: 24px;
padding: 32px 28px 28px;
width: 100%;
max-width: 400px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
}
.last-card-warning__icon[data-v-d0ea0ec7] {
width: 64px;
height: 64px;
border-radius: 50%;
background: #fef3cd;
display: flex;
align-items: center;
justify-content: center;
color: #b8860b;
}
.last-card-warning__title[data-v-d0ea0ec7] {
font-size: 22px;
font-weight: 700;
margin: 0;
color: #1e1e1e;
}
.last-card-warning__text[data-v-d0ea0ec7] {
margin: 0;
font-size: 16px;
line-height: 1.5;
color: #1e1e1e;
}
.last-card-warning__text strong[data-v-d0ea0ec7] {
color: #d32f2f;
font-weight: 600;
}
.last-card-warning__text--muted[data-v-d0ea0ec7] {
font-size: 14px;
color: #666;
}
.last-card-warning__actions[data-v-d0ea0ec7] {
display: flex;
gap: 12px;
width: 100%;
margin-top: 8px;
}
.last-card-warning__btn[data-v-d0ea0ec7] {
flex: 1;
height: 52px;
border-radius: 14px;
border: 0;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: transform 0.1s ease, opacity 0.2s ease;
}
.last-card-warning__btn[data-v-d0ea0ec7]:active {
transform: scale(0.98);
}
.last-card-warning__btn--secondary[data-v-d0ea0ec7] {
background: #f5f5f5;
color: #1e1e1e;
}
.last-card-warning__btn--secondary[data-v-d0ea0ec7]:hover {
opacity: 0.85;
}
.last-card-warning__btn--danger[data-v-d0ea0ec7] {
background: #f43030;
color: #fff;
}
.last-card-warning__btn--danger[data-v-d0ea0ec7]:hover {
opacity: 0.85;
}
@media (max-width: 480px) {
.last-card-warning[data-v-d0ea0ec7] {
padding: 24px 20px 20px;
gap: 14px;
border-radius: 20px;
}
.last-card-warning__icon[data-v-d0ea0ec7] {
width: 56px;
height: 56px;
}
.last-card-warning__icon svg[data-v-d0ea0ec7] {
width: 28px;
height: 28px;
}
.last-card-warning__title[data-v-d0ea0ec7] {
font-size: 20px;
}
.last-card-warning__text[data-v-d0ea0ec7] {
font-size: 15px;
}
.last-card-warning__text--muted[data-v-d0ea0ec7] {
font-size: 13px;
}
.last-card-warning__actions[data-v-d0ea0ec7] {
flex-direction: column-reverse;
gap: 10px;
}
.last-card-warning__btn[data-v-d0ea0ec7] {
height: 48px;
font-size: 15px;
}
}
.card-preview__top[data-v-d0ea0ec7] {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.card-preview__logo[data-v-d0ea0ec7] {
width: 48px;
height: 30px;
object-fit: contain;
}
.card-preview__chip svg[data-v-d0ea0ec7] {
display: block;
}
.card-preview__number-section[data-v-d0ea0ec7] {
display: flex;
flex-direction: column;
gap: 12px;
}
.card-preview__label[data-v-d0ea0ec7] {
font-size: 12px;
font-weight: 500;
color: #1e1e1e;
letter-spacing: -0.24px;
}
.card-preview__number[data-v-d0ea0ec7] {
font-size: 18px;
font-weight: 500;
color: #1e1e1e;
letter-spacing: 4.86px;
}
.card-preview__bottom[data-v-d0ea0ec7] {
display: flex;
align-items: center;
justify-content: space-between;
}
.card-preview__holder[data-v-d0ea0ec7] {
font-size: 16px;
font-weight: 500;
color: #1e1e1e;
letter-spacing: -0.32px;
}
.card-preview__expiry[data-v-d0ea0ec7] {
font-size: 16px;
font-weight: 500;
color: #1e1e1e;
letter-spacing: 3.2px;
}
/* Buttons */
.btn-default[data-v-d0ea0ec7] {
width: 100%;
height: 58px;
background: #c3fd56;
border: 0;
border-radius: 16px;
padding: 0 28px;
font-size: 20px;
font-weight: 700;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
}
.btn-default[data-v-d0ea0ec7]:hover:not(:disabled) {
background: #b5f342;
}
.btn-default[data-v-d0ea0ec7]:active:not(:disabled) {
transform: scale(0.99);
}
.btn-default[data-v-d0ea0ec7]:disabled {
opacity: 0.6;
cursor: default;
}
.btn-delete[data-v-d0ea0ec7] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
background: transparent;
border: 0;
padding: 8px 16px;
cursor: pointer;
transition: opacity 0.2s ease, transform 0.1s ease;
}
.btn-delete span[data-v-d0ea0ec7] {
font-size: 20px;
font-weight: 500;
color: #f43030;
}
.btn-delete[data-v-d0ea0ec7]:hover {
opacity: 0.8;
}
.btn-delete[data-v-d0ea0ec7]:active {
transform: scale(0.98);
}
/* Transitions */
.fade-enter-active[data-v-d0ea0ec7],
.fade-leave-active[data-v-d0ea0ec7] {
transition: opacity 0.2s ease;
}
.fade-enter-from[data-v-d0ea0ec7],
.fade-leave-to[data-v-d0ea0ec7] {
opacity: 0;
}
.pop-enter-active[data-v-d0ea0ec7],
.pop-leave-active[data-v-d0ea0ec7] {
transition: opacity 0.25s ease, transform 0.25s ease;
}
.pop-enter-from[data-v-d0ea0ec7],
.pop-leave-to[data-v-d0ea0ec7] {
opacity: 0;
transform: translateY(8px) scale(0.98);
}
/* Mobile responsive for modal */
@media (max-aspect-ratio: 3/4) {
.modal-dialog[data-v-d0ea0ec7] {
padding: 20px;
border-radius: 20px;
gap: 24px;
}
.modal-title[data-v-d0ea0ec7] {
font-size: 20px;
}
.modal-content[data-v-d0ea0ec7] {
gap: 24px;
}
.card-preview[data-v-d0ea0ec7] {
width: 100%;
max-width: 320px;
height: 200px;
padding: 20px;
border-radius: 16px;
}
.card-preview__shine[data-v-d0ea0ec7] {
border-radius: 16px;
}
.modal-confirm-overlay[data-v-d0ea0ec7] {
border-radius: 20px;
padding: 20px;
}
.delete-confirm[data-v-d0ea0ec7] {
padding: 20px;
gap: 14px;
}
.card-preview__logo[data-v-d0ea0ec7] {
width: 40px;
height: 25px;
}
.card-preview__chip svg[data-v-d0ea0ec7] {
width: 38px;
height: 28px;
}
.card-preview__label[data-v-d0ea0ec7] {
font-size: 10px;
}
.card-preview__number[data-v-d0ea0ec7] {
font-size: 14px;
letter-spacing: 3px;
}
.card-preview__holder[data-v-d0ea0ec7],
.card-preview__expiry[data-v-d0ea0ec7] {
font-size: 14px;
}
.btn-default[data-v-d0ea0ec7] {
height: 50px;
font-size: 16px;
border-radius: 12px;
}
.btn-delete span[data-v-d0ea0ec7] {
font-size: 16px;
}
}
/* Page layout */
.tariff-change[data-v-56f783f5] {
background: linear-gradient(to bottom, #7fabce 0%, #fff 100%);
min-height: 100dvh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 48px 20px 40px;
}
.tariff-change-logo[data-v-56f783f5] {
position: absolute;
left: 36px;
top: 36px;
z-index: 2;
display: block;
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
.tariff-change-logo__img[data-v-56f783f5] {
height: 37px;
width: auto;
display: block;
}
.tariff-change-mobile-header[data-v-56f783f5] {
display: none;
}
.tariff-change-container[data-v-56f783f5] {
width: 100%;
max-width: 716px;
position: relative;
z-index: 1;
}
/* Main layout */
.tariff-layout[data-v-56f783f5] {
display: flex;
align-items: flex-start;
justify-content: center;
width: 100%;
}
.tariff-panel[data-v-56f783f5] {
background: #fff;
border-radius: 32px;
padding: 32px;
width: 100%;
max-width: 800px;
display: flex;
flex-direction: column;
gap: 28px;
box-shadow:
0 20px 44px rgba(0, 0, 0, 0.04),
0 81px 81px rgba(0, 0, 0, 0.03),
0 183px 109px rgba(0, 0, 0, 0.02),
0 325px 130px rgba(0, 0, 0, 0.01);
}
.tariff-panel__title[data-v-56f783f5] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
margin: 0;
letter-spacing: -0.48px;
}
/* Loading & Error states */
.tariff-panel__loading[data-v-56f783f5] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
gap: 16px;
color: #9c9c9c;
}
.tariff-panel__loading p[data-v-56f783f5] {
margin: 0;
font-size: 16px;
font-weight: 500;
}
.loading-spinner[data-v-56f783f5] {
width: 36px;
height: 36px;
border: 3px solid rgba(30, 30, 30, 0.1);
border-top-color: #1e1e1e;
border-radius: 50%;
animation: spin-56f783f5 1s linear infinite;
}
@keyframes spin-56f783f5 {
to { transform: rotate(360deg);
}
}
.tariff-panel__error[data-v-56f783f5] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
gap: 16px;
text-align: center;
}
.tariff-panel__error p[data-v-56f783f5] {
margin: 0;
font-size: 16px;
color: #f43030;
}
.btn-retry[data-v-56f783f5] {
padding: 10px 24px;
background: #f5f5f5;
border: 0;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease;
}
.btn-retry[data-v-56f783f5]:hover {
background: #ebebeb;
}
/* Tariff comparison */
.tariff-comparison[data-v-56f783f5] {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 20px;
align-items: stretch;
}
.tariff-card[data-v-56f783f5] {
display: flex;
flex-direction: column;
gap: 16px;
}
.tariff-card__label[data-v-56f783f5] {
font-size: 14px;
font-weight: 600;
color: #8d8d8d;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.tariff-card__label--highlight[data-v-56f783f5] {
color: #4a48e9;
}
/* Tariff header (colored block) */
.tariff-header[data-v-56f783f5] {
background: #4a48e9;
border-radius: 20px;
min-height: 140px;
padding: 20px;
color: #fff;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
.header-art[data-v-56f783f5] {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 1;
}
.flare[data-v-56f783f5] {
position: absolute;
right: -120px;
top: 50%;
transform: translateY(-50%);
opacity: 1;
height: 300px;
max-width: none;
}
.tariff__badge[data-v-56f783f5] {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
backdrop-filter: blur(10px);
font-weight: 500;
font-size: 12px;
margin: 0;
position: relative;
z-index: 1;
}
.tariff__name[data-v-56f783f5] {
margin: 0;
font-size: 28px;
line-height: 1;
font-weight: 600;
letter-spacing: -0.01em;
position: relative;
z-index: 1;
}
/* Header color variants (align with PricingSection.vue) */
.tariff-header.is-green[data-v-56f783f5] {
background: #c3fd56;
color: #1e1e1e;
}
.tariff-header.is-blue[data-v-56f783f5] {
background: #acc4ff;
color: #4a48e9;
}
.tariff-header.is-dark[data-v-56f783f5] {
background: #c3fd56;
color: #303030;
}
.tariff-header.is-black[data-v-56f783f5] {
background: #4a48e9;
color: #fff;
}
.tariff-header.is-green .tariff__badge[data-v-56f783f5],
.tariff-header.is-blue .tariff__badge[data-v-56f783f5],
.tariff-header.is-dark .tariff__badge[data-v-56f783f5] {
background-color: rgba(255, 255, 255, 0.57);
color: #1e1e1e;
}
.tariff-header.is-black .tariff__badge[data-v-56f783f5] {
background-color: rgba(255, 255, 255, 0.25);
color: #fff;
}
/* Tariff details */
.tariff-card__details[data-v-56f783f5] {
display: flex;
flex-direction: column;
gap: 12px;
}
.tariff-card__price[data-v-56f783f5] {
font-size: 22px;
font-weight: 700;
color: #1e1e1e;
}
.tariff-card__price--highlight[data-v-56f783f5] {
color: #4a48e9;
}
.tariff-card__limits[data-v-56f783f5] {
display: flex;
flex-direction: column;
gap: 6px;
}
.limit-item[data-v-56f783f5] {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: rgba(235, 235, 235, 0.5);
border-radius: 10px;
transition: background-color 0.2s ease;
}
.limit-item--improved[data-v-56f783f5] {
background: rgba(195, 253, 86, 0.3);
}
.limit-value[data-v-56f783f5] {
font-size: 16px;
font-weight: 600;
color: #1e1e1e;
}
.limit-unit[data-v-56f783f5] {
font-size: 14px;
color: #8d8d8d;
}
.limit-badge[data-v-56f783f5] {
margin-left: auto;
font-size: 14px;
font-weight: 700;
color: #22c55e;
}
.infinity-icon[data-v-56f783f5] {
width: 24px;
height: auto;
}
/* Arrow transition */
.tariff-arrow[data-v-56f783f5] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 20px 0;
}
.arrow-line[data-v-56f783f5] {
width: 2px;
flex: 1;
min-height: 20px;
background: linear-gradient(180deg, transparent 0%, #c3fd56 50%, transparent 100%);
}
.arrow-icon[data-v-56f783f5] {
width: 48px;
height: 48px;
border-radius: 50%;
background: #c3fd56;
display: flex;
align-items: center;
justify-content: center;
color: #1e1e1e;
box-shadow: 0 4px 16px rgba(195, 253, 86, 0.4);
}
/* New features */
.new-features[data-v-56f783f5] {
display: flex;
flex-direction: column;
gap: 12px;
}
.new-features__title[data-v-56f783f5] {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #1e1e1e;
}
.new-features__list[data-v-56f783f5] {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.new-features__item[data-v-56f783f5] {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 15px;
color: #1e1e1e;
}
.feature-check[data-v-56f783f5] {
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(34, 197, 94, 0.15);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Actions */
.tariff-actions[data-v-56f783f5] {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 8px;
}
.btn-default[data-v-56f783f5] {
width: 100%;
height: 58px;
background: #c3fd56;
border: 0;
border-radius: 16px;
padding: 0 28px;
font-size: 18px;
font-weight: 700;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
}
.btn-default[data-v-56f783f5]:hover:not(:disabled) {
background: #b5f342;
}
.btn-default[data-v-56f783f5]:active:not(:disabled) {
transform: scale(0.99);
}
.btn-default[data-v-56f783f5]:disabled {
opacity: 0.6;
cursor: default;
}
.btn-secondary[data-v-56f783f5] {
width: 100%;
height: 50px;
background: transparent;
border: 1px solid rgba(30, 30, 30, 0.2);
border-radius: 16px;
padding: 0 28px;
font-size: 16px;
font-weight: 600;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.btn-secondary[data-v-56f783f5]:hover:not(:disabled) {
background: rgba(235, 235, 235, 0.5);
}
.btn-secondary[data-v-56f783f5]:active:not(:disabled) {
transform: scale(0.99);
}
.btn-secondary[data-v-56f783f5]:disabled {
opacity: 0.5;
cursor: default;
}
/* Modal */
.modal-overlay[data-v-56f783f5] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
box-sizing: border-box;
overflow: auto;
}
.modal-dialog[data-v-56f783f5] {
background: #fff;
border-radius: 28px;
padding: 32px;
width: 100%;
max-width: 420px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
margin: auto;
}
.modal-content--success[data-v-56f783f5] {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
}
.success-icon[data-v-56f783f5] {
margin-bottom: 4px;
}
.modal-title[data-v-56f783f5] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
margin: 0;
}
.modal-text[data-v-56f783f5] {
font-size: 16px;
color: #5c5c5c;
margin: 0;
line-height: 1.5;
}
/* Transitions */
.fade-enter-active[data-v-56f783f5],
.fade-leave-active[data-v-56f783f5] {
transition: opacity 0.2s ease;
}
.fade-enter-from[data-v-56f783f5],
.fade-leave-to[data-v-56f783f5] {
opacity: 0;
}
.pop-enter-active[data-v-56f783f5],
.pop-leave-active[data-v-56f783f5] {
transition: opacity 0.25s ease, transform 0.25s ease;
}
.pop-enter-from[data-v-56f783f5],
.pop-leave-to[data-v-56f783f5] {
opacity: 0;
transform: translateY(8px) scale(0.98);
}
/* Mobile responsive */
@media (max-width: 480px) {
.tariff-change-logo[data-v-56f783f5] {
display: none;
}
.tariff-change[data-v-56f783f5] {
flex-direction: column;
align-items: stretch;
padding: 0;
}
.tariff-change-mobile-header[data-v-56f783f5] {
display: flex;
flex-shrink: 0;
width: 100%;
padding: 24px 16px;
align-items: center;
justify-content: flex-start;
z-index: 2;
box-sizing: border-box;
}
.tariff-change-mobile-header__back[data-v-56f783f5] {
display: flex;
align-items: center;
gap: 17px;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: #fff;
font-size: 21px;
font-weight: 500;
letter-spacing: -0.2px;
font-family: inherit;
}
.tariff-change-mobile-header__back-icon[data-v-56f783f5] {
width: 48px;
height: 48px;
display: block;
flex-shrink: 0;
}
.tariff-change-container[data-v-56f783f5] {
flex: 1;
width: 100%;
max-width: none;
display: flex;
flex-direction: column;
min-height: 0;
}
.tariff-panel[data-v-56f783f5] {
flex: 1;
width: 100%;
max-width: none;
padding: 48px 24px 32px;
border-radius: 24px 24px 0 0;
gap: 20px;
box-shadow: none;
}
.tariff-panel__title[data-v-56f783f5] {
font-size: 20px;
}
/* Stack tariffs vertically on mobile */
.tariff-comparison[data-v-56f783f5] {
grid-template-columns: 1fr;
gap: 0;
}
.tariff-arrow[data-v-56f783f5] {
flex-direction: row;
padding: 16px 0;
}
.arrow-line[data-v-56f783f5] {
height: 2px;
width: 100%;
min-height: auto;
min-width: 20px;
background: linear-gradient(90deg, transparent 0%, #c3fd56 50%, transparent 100%);
}
.arrow-icon[data-v-56f783f5] {
width: 40px;
height: 40px;
transform: rotate(90deg);
}
.tariff-header[data-v-56f783f5] {
min-height: 100px;
padding: 16px;
border-radius: 16px;
}
.tariff__name[data-v-56f783f5] {
font-size: 22px;
}
.flare[data-v-56f783f5] {
height: 200px;
right: -80px;
}
.tariff-card__price[data-v-56f783f5] {
font-size: 18px;
}
.price-difference[data-v-56f783f5] {
padding: 16px;
border-radius: 12px;
}
.price-difference__label[data-v-56f783f5] {
font-size: 14px;
}
.price-difference__value[data-v-56f783f5] {
font-size: 16px;
}
.price-difference__note[data-v-56f783f5] {
font-size: 12px;
}
.new-features__title[data-v-56f783f5] {
font-size: 16px;
}
.new-features__item[data-v-56f783f5] {
font-size: 14px;
}
.btn-default[data-v-56f783f5] {
height: 52px;
font-size: 16px;
border-radius: 12px;
}
.btn-secondary[data-v-56f783f5] {
height: 46px;
font-size: 14px;
border-radius: 12px;
}
.modal-dialog[data-v-56f783f5] {
padding: 24px;
border-radius: 20px;
}
.modal-title[data-v-56f783f5] {
font-size: 20px;
}
.modal-text[data-v-56f783f5] {
font-size: 14px;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
[data-v-56f783f5] {
transition: none !important;
animation: none !important;
}
}
/* Page layout */
.cancel-subscription[data-v-a2e6f060] {
--topbar-h: 72px;
--hero-h: 40px;
--pad-top: 24px;
--pad-bottom: 48px;
--hero-gap: 16px;
background: transparent;
position: relative;
padding: 0;
padding-top: 48px;
padding-bottom: 40px;
box-sizing: border-box;
display: grid;
gap: 28px;
}
/* Hero (back button) */
.cancel-subscription__hero[data-v-a2e6f060] {
display: flex;
align-items: center;
}
.hero__back[data-v-a2e6f060] {
display: inline-flex;
align-items: center;
gap: 15px;
height: 100%;
background: none;
border: 0;
padding: 0;
cursor: pointer;
transition: transform 0.1s ease, opacity 0.2s ease;
}
.hero__back:hover .hero__back-icon[data-v-a2e6f060] {
background: rgba(255, 255, 255, 0.25);
}
.hero__back[data-v-a2e6f060]:active {
transform: scale(0.98);
}
.hero__back-icon[data-v-a2e6f060] {
width: 40px;
height: 40px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
}
.hero__back-icon svg[data-v-a2e6f060] {
display: block;
width: 50%;
height: 50%;
}
.hero__back-text[data-v-a2e6f060] {
color: #fff;
font-size: 32px;
font-weight: 600;
}
/* Main layout */
.cancel-layout[data-v-a2e6f060] {
display: flex;
align-items: flex-start;
justify-content: center;
width: 100%;
}
.cancel-panel[data-v-a2e6f060] {
background: #fff;
border-radius: 28px;
padding: 28px;
width: 100%;
max-width: 560px;
display: flex;
flex-direction: column;
gap: 28px;
}
.cancel-panel__title[data-v-a2e6f060] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
margin: 0;
letter-spacing: -0.48px;
}
/* Loading & Error states */
.cancel-panel__loading[data-v-a2e6f060] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
gap: 16px;
color: #9c9c9c;
}
.cancel-panel__loading p[data-v-a2e6f060] {
margin: 0;
font-size: 16px;
font-weight: 500;
}
.loading-spinner[data-v-a2e6f060] {
width: 36px;
height: 36px;
border: 3px solid rgba(30, 30, 30, 0.1);
border-top-color: #1e1e1e;
border-radius: 50%;
animation: spin-a2e6f060 1s linear infinite;
}
@keyframes spin-a2e6f060 {
to { transform: rotate(360deg);
}
}
.cancel-panel__error[data-v-a2e6f060] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
gap: 16px;
text-align: center;
}
.cancel-panel__error p[data-v-a2e6f060] {
margin: 0;
font-size: 16px;
color: #f43030;
}
.btn-retry[data-v-a2e6f060] {
padding: 10px 24px;
background: #f5f5f5;
border: 0;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease;
}
.btn-retry[data-v-a2e6f060]:hover {
background: #ebebeb;
}
/* Subscription info */
.subscription-info[data-v-a2e6f060] {
display: flex;
flex-direction: column;
gap: 16px;
}
.subscription-card[data-v-a2e6f060] {
display: flex;
flex-direction: column;
gap: 16px;
}
.subscription-card__label[data-v-a2e6f060] {
font-size: 14px;
font-weight: 600;
color: #8d8d8d;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Subscription header (colored block) */
.subscription-header[data-v-a2e6f060] {
background: #4a48e9;
border-radius: 20px;
min-height: 140px;
padding: 20px;
color: #fff;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
.header-art[data-v-a2e6f060] {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 1;
}
.flare[data-v-a2e6f060] {
position: absolute;
right: -120px;
top: 50%;
transform: translateY(-50%);
opacity: 1;
height: 300px;
max-width: none;
}
.subscription__badge[data-v-a2e6f060] {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
backdrop-filter: blur(10px);
font-weight: 500;
font-size: 12px;
margin: 0;
position: relative;
z-index: 1;
}
.subscription__name[data-v-a2e6f060] {
margin: 0;
font-size: 28px;
line-height: 1;
font-weight: 600;
letter-spacing: -0.01em;
position: relative;
z-index: 1;
}
/* Header color variants */
.subscription-header.is-green[data-v-a2e6f060] {
background: #c3fd56;
color: #1e1e1e;
}
.subscription-header.is-blue[data-v-a2e6f060] {
background: #4a48e9;
color: #fff;
}
.subscription-header.is-dark[data-v-a2e6f060] {
background: rgba(235, 235, 235, 1);
color: #1e1e1e;
}
.subscription-header.is-black[data-v-a2e6f060] {
background: #1e1e1e;
color: #fff;
}
.subscription-header.is-green .subscription__badge[data-v-a2e6f060] {
background-color: rgba(255, 255, 255, 0.57);
color: #1e1e1e;
}
.subscription-header.is-blue .subscription__badge[data-v-a2e6f060],
.subscription-header.is-dark .subscription__badge[data-v-a2e6f060] {
background-color: rgba(30, 30, 30, 0.57);
color: #fff;
}
.subscription-header.is-black .subscription__badge[data-v-a2e6f060] {
background-color: rgba(255, 255, 255, 0.25);
color: #fff;
}
/* Subscription details */
.subscription-card__details[data-v-a2e6f060] {
display: flex;
flex-direction: column;
gap: 12px;
}
.subscription-card__price[data-v-a2e6f060] {
font-size: 22px;
font-weight: 700;
color: #1e1e1e;
}
.subscription-card__limits[data-v-a2e6f060] {
display: flex;
flex-direction: column;
gap: 6px;
}
.limit-item[data-v-a2e6f060] {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: rgba(235, 235, 235, 0.5);
border-radius: 10px;
}
.limit-value[data-v-a2e6f060] {
font-size: 16px;
font-weight: 600;
color: #1e1e1e;
}
.limit-unit[data-v-a2e6f060] {
font-size: 14px;
color: #8d8d8d;
}
.infinity-icon[data-v-a2e6f060] {
width: 24px;
height: auto;
}
/* Warning block */
.cancel-warning[data-v-a2e6f060] {
display: flex;
gap: 16px;
padding: 20px;
background: rgba(244, 48, 48, 0.08);
border: 1px solid rgba(244, 48, 48, 0.2);
border-radius: 16px;
}
.cancel-warning__icon[data-v-a2e6f060] {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(244, 48, 48, 0.15);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #f43030;
}
.cancel-warning__content[data-v-a2e6f060] {
display: flex;
flex-direction: column;
gap: 4px;
}
.cancel-warning__title[data-v-a2e6f060] {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #f43030;
}
.cancel-warning__text[data-v-a2e6f060] {
margin: 0;
font-size: 14px;
color: #5c5c5c;
line-height: 1.5;
}
/* Lose features */
.lose-features[data-v-a2e6f060] {
display: flex;
flex-direction: column;
gap: 12px;
}
.lose-features__title[data-v-a2e6f060] {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #1e1e1e;
}
.lose-features__list[data-v-a2e6f060] {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.lose-features__item[data-v-a2e6f060] {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 15px;
color: #1e1e1e;
}
.feature-cross[data-v-a2e6f060] {
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(244, 48, 48, 0.15);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Cancel reason */
.cancel-reason[data-v-a2e6f060] {
display: flex;
flex-direction: column;
gap: 8px;
}
.cancel-reason__label[data-v-a2e6f060] {
font-size: 14px;
font-weight: 500;
color: #5c5c5c;
}
.cancel-reason__select[data-v-a2e6f060] {
width: 100%;
height: 52px;
padding: 0 16px;
border: 1px solid rgba(30, 30, 30, 0.15);
border-radius: 12px;
font-size: 16px;
color: #1e1e1e;
background: #fff;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238d8d8d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
transition: border-color 0.2s ease;
}
.cancel-reason__select[data-v-a2e6f060]:focus {
outline: none;
border-color: #4a48e9;
}
/* Actions */
.cancel-actions[data-v-a2e6f060] {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 8px;
}
.btn-cancel[data-v-a2e6f060] {
width: 100%;
height: 58px;
background: #f43030;
border: 0;
border-radius: 16px;
padding: 0 28px;
font-size: 18px;
font-weight: 700;
color: #fff;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
}
.btn-cancel[data-v-a2e6f060]:hover:not(:disabled) {
background: #e02020;
}
.btn-cancel[data-v-a2e6f060]:active:not(:disabled) {
transform: scale(0.99);
}
.btn-cancel[data-v-a2e6f060]:disabled {
opacity: 0.6;
cursor: default;
}
.btn-keep[data-v-a2e6f060] {
width: 100%;
height: 58px;
background: #c3fd56;
border: 0;
border-radius: 16px;
padding: 0 28px;
font-size: 18px;
font-weight: 700;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.btn-keep[data-v-a2e6f060]:hover:not(:disabled) {
background: #b5f342;
}
.btn-keep[data-v-a2e6f060]:active:not(:disabled) {
transform: scale(0.99);
}
.btn-keep[data-v-a2e6f060]:disabled {
opacity: 0.5;
cursor: default;
}
.btn-default[data-v-a2e6f060] {
width: 100%;
height: 58px;
background: #c3fd56;
border: 0;
border-radius: 16px;
padding: 0 28px;
font-size: 18px;
font-weight: 700;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
}
.btn-default[data-v-a2e6f060]:hover:not(:disabled) {
background: #b5f342;
}
.btn-default[data-v-a2e6f060]:active:not(:disabled) {
transform: scale(0.99);
}
/* Modal */
.modal-overlay[data-v-a2e6f060] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
box-sizing: border-box;
overflow: auto;
}
.modal-dialog[data-v-a2e6f060] {
background: #fff;
border-radius: 28px;
padding: 32px;
width: 100%;
max-width: 420px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
margin: auto;
}
.modal-content--success[data-v-a2e6f060] {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
}
.success-icon[data-v-a2e6f060] {
margin-bottom: 4px;
}
.modal-title[data-v-a2e6f060] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
margin: 0;
}
.modal-text[data-v-a2e6f060] {
font-size: 16px;
color: #5c5c5c;
margin: 0;
line-height: 1.5;
}
/* Transitions */
.fade-enter-active[data-v-a2e6f060],
.fade-leave-active[data-v-a2e6f060] {
transition: opacity 0.2s ease;
}
.fade-enter-from[data-v-a2e6f060],
.fade-leave-to[data-v-a2e6f060] {
opacity: 0;
}
.pop-enter-active[data-v-a2e6f060],
.pop-leave-active[data-v-a2e6f060] {
transition: opacity 0.25s ease, transform 0.25s ease;
}
.pop-enter-from[data-v-a2e6f060],
.pop-leave-to[data-v-a2e6f060] {
opacity: 0;
transform: translateY(8px) scale(0.98);
}
/* Mobile responsive */
@media (max-aspect-ratio: 3/4) {
.cancel-subscription[data-v-a2e6f060] {
gap: 16px;
}
.hero__back[data-v-a2e6f060] {
gap: 8px;
}
.hero__back-icon[data-v-a2e6f060] {
width: 30px;
height: 30px;
}
.hero__back-text[data-v-a2e6f060] {
font-size: 24px;
font-weight: 500;
}
.cancel-panel[data-v-a2e6f060] {
padding: 16px;
border-radius: 16px;
gap: 20px;
}
.cancel-panel__title[data-v-a2e6f060] {
font-size: 20px;
}
.subscription-header[data-v-a2e6f060] {
min-height: 100px;
padding: 16px;
border-radius: 16px;
}
.subscription__name[data-v-a2e6f060] {
font-size: 22px;
}
.flare[data-v-a2e6f060] {
height: 200px;
right: -80px;
}
.subscription-card__price[data-v-a2e6f060] {
font-size: 18px;
}
.cancel-warning[data-v-a2e6f060] {
padding: 16px;
border-radius: 12px;
}
.cancel-warning__icon[data-v-a2e6f060] {
width: 32px;
height: 32px;
}
.cancel-warning__title[data-v-a2e6f060] {
font-size: 14px;
}
.cancel-warning__text[data-v-a2e6f060] {
font-size: 13px;
}
.lose-features__title[data-v-a2e6f060] {
font-size: 16px;
}
.lose-features__item[data-v-a2e6f060] {
font-size: 14px;
}
.cancel-reason__select[data-v-a2e6f060] {
height: 48px;
font-size: 14px;
border-radius: 10px;
}
.btn-cancel[data-v-a2e6f060],
.btn-keep[data-v-a2e6f060],
.btn-default[data-v-a2e6f060] {
height: 52px;
font-size: 16px;
border-radius: 12px;
}
.modal-dialog[data-v-a2e6f060] {
padding: 24px;
border-radius: 20px;
}
.modal-title[data-v-a2e6f060] {
font-size: 20px;
}
.modal-text[data-v-a2e6f060] {
font-size: 14px;
}
}
@media (max-aspect-ratio: 2/3) {
.hero__back-icon[data-v-a2e6f060] {
width: 20px;
height: 20px;
}
.hero__back-text[data-v-a2e6f060] {
font-size: 14px;
font-weight: 500;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
[data-v-a2e6f060] {
transition: none !important;
animation: none !important;
}
}
/* Page layout */
.confirmation[data-v-4e6253e3] {
background: linear-gradient(to bottom, #7fabce 0%, #fff 100%);
min-height: 100dvh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 48px 20px 40px;
}
.confirmation-logo[data-v-4e6253e3] {
position: absolute;
left: 36px;
top: 36px;
z-index: 2;
display: block;
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
.confirmation-logo__img[data-v-4e6253e3] {
height: 37px;
width: auto;
display: block;
}
.confirmation-mobile-header[data-v-4e6253e3] {
display: none;
}
.confirmation-container[data-v-4e6253e3] {
width: 100%;
max-width: 716px;
position: relative;
z-index: 1;
}
/* Main layout */
.confirmation-layout[data-v-4e6253e3] {
display: flex;
align-items: flex-start;
justify-content: center;
width: 100%;
}
.confirmation-panel[data-v-4e6253e3] {
background: #fff;
border-radius: 32px;
padding: 32px;
width: 100%;
max-width: 700px;
display: flex;
flex-direction: column;
gap: 28px;
box-shadow:
0 20px 44px rgba(0, 0, 0, 0.04),
0 81px 81px rgba(0, 0, 0, 0.03),
0 183px 109px rgba(0, 0, 0, 0.02),
0 325px 130px rgba(0, 0, 0, 0.01);
}
.confirmation-panel__title[data-v-4e6253e3] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
margin: 0;
letter-spacing: -0.48px;
}
/* Loading & Error states */
.confirmation-panel__loading[data-v-4e6253e3] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
gap: 16px;
color: #9c9c9c;
}
.confirmation-panel__loading p[data-v-4e6253e3] {
margin: 0;
font-size: 16px;
font-weight: 500;
}
.loading-spinner[data-v-4e6253e3] {
width: 36px;
height: 36px;
border: 3px solid rgba(30, 30, 30, 0.1);
border-top-color: #1e1e1e;
border-radius: 50%;
animation: spin-4e6253e3 1s linear infinite;
}
@keyframes spin-4e6253e3 {
to { transform: rotate(360deg);
}
}
.confirmation-panel__error[data-v-4e6253e3] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
gap: 16px;
text-align: center;
}
.confirmation-panel__error p[data-v-4e6253e3] {
margin: 0;
font-size: 16px;
color: #f43030;
}
.btn-retry[data-v-4e6253e3] {
padding: 10px 24px;
background: #f5f5f5;
border: 0;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease;
}
.btn-retry[data-v-4e6253e3]:hover {
background: #ebebeb;
}
/* Empty state */
.confirmation-panel__empty[data-v-4e6253e3] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
gap: 16px;
text-align: center;
}
.empty-icon[data-v-4e6253e3] {
margin-bottom: 8px;
}
.empty-title[data-v-4e6253e3] {
margin: 0;
font-size: 22px;
font-weight: 600;
color: #1e1e1e;
}
.empty-text[data-v-4e6253e3] {
margin: 0;
font-size: 16px;
color: #8d8d8d;
}
/* Subscriptions list */
.subscriptions-list[data-v-4e6253e3] {
display: flex;
flex-direction: column;
gap: 12px;
max-height: 400px;
overflow-y: auto;
padding-right: 4px;
margin-right: -4px;
}
.subscriptions-list[data-v-4e6253e3]::-webkit-scrollbar {
width: 4px;
}
.subscriptions-list[data-v-4e6253e3]::-webkit-scrollbar-track {
background: transparent;
}
.subscriptions-list[data-v-4e6253e3]::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15);
border-radius: 4px;
}
.subscriptions-list[data-v-4e6253e3]::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.25);
}
.subscription-card[data-v-4e6253e3] {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid rgba(235, 235, 235, 1);
border-radius: 14px;
overflow: hidden;
flex-shrink: 0;
}
.subscription-card__header[data-v-4e6253e3] {
background: #4a48e9;
min-height: 56px;
padding: 12px 16px;
color: #fff;
position: relative;
overflow: hidden;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.header-art[data-v-4e6253e3] {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.7;
}
.flare[data-v-4e6253e3] {
position: absolute;
right: -80px;
top: 50%;
transform: translateY(-50%);
opacity: 1;
height: 140px;
max-width: none;
}
.tariff__badge[data-v-4e6253e3] {
display: none;
}
.tariff__name[data-v-4e6253e3] {
margin: 0;
font-size: 16px;
line-height: 1;
font-weight: 600;
letter-spacing: -0.01em;
position: relative;
z-index: 1;
}
/* Header color variants */
.subscription-card__header.is-green[data-v-4e6253e3] {
background: #c3fd56;
color: #1e1e1e;
}
.subscription-card__header.is-blue[data-v-4e6253e3] {
background: #4a48e9;
color: #fff;
}
.subscription-card__header.is-dark[data-v-4e6253e3] {
background: rgba(235, 235, 235, 1);
color: #1e1e1e;
}
.subscription-card__header.is-black[data-v-4e6253e3] {
background: #1e1e1e;
color: #fff;
}
.subscription-card__header.is-green .tariff__badge[data-v-4e6253e3] {
background-color: rgba(255, 255, 255, 0.57);
color: #1e1e1e;
}
.subscription-card__header.is-blue .tariff__badge[data-v-4e6253e3],
.subscription-card__header.is-dark .tariff__badge[data-v-4e6253e3] {
background-color: rgba(30, 30, 30, 0.57);
color: #fff;
}
.subscription-card__header.is-black .tariff__badge[data-v-4e6253e3] {
background-color: rgba(255, 255, 255, 0.25);
color: #fff;
}
/* Subscription details */
.subscription-card__details[data-v-4e6253e3] {
display: flex;
flex-direction: column;
gap: 0;
padding: 10px 14px;
}
.detail-row[data-v-4e6253e3] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 6px 0;
border-bottom: 1px solid rgba(235, 235, 235, 0.5);
}
.detail-row[data-v-4e6253e3]:last-child {
border-bottom: none;
}
.detail-row--price[data-v-4e6253e3] {
padding-top: 8px;
border-top: 1px solid #ebebeb;
border-bottom: none;
margin-top: 2px;
}
.detail-label[data-v-4e6253e3] {
font-size: 13px;
color: #8d8d8d;
}
.detail-value[data-v-4e6253e3] {
font-size: 13px;
font-weight: 600;
color: #1e1e1e;
}
.detail-value--status[data-v-4e6253e3] {
padding: 3px 8px;
border-radius: 6px;
font-size: 11px;
}
.detail-value--status.status--active[data-v-4e6253e3] {
background: rgba(34, 197, 94, 0.15);
color: #22c55e;
}
.detail-value--status.status--overdue[data-v-4e6253e3] {
background: rgba(244, 48, 48, 0.15);
color: #f43030;
}
.detail-value--status.status--canceled[data-v-4e6253e3] {
background: rgba(141, 141, 141, 0.15);
color: #8d8d8d;
}
.detail-value--status.status--trial[data-v-4e6253e3] {
background: rgba(74, 72, 233, 0.15);
color: #4a48e9;
}
.detail-value--status.status--paused[data-v-4e6253e3] {
background: rgba(245, 158, 11, 0.15);
color: #f59e0b;
}
.detail-value--amount[data-v-4e6253e3] {
font-size: 15px;
font-weight: 700;
color: #1e1e1e;
}
/* Total section */
.total-section[data-v-4e6253e3] {
background: #f5f5f5;
border-radius: 16px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.total-row[data-v-4e6253e3] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.total-label[data-v-4e6253e3] {
font-size: 18px;
font-weight: 600;
color: #1e1e1e;
}
.total-value[data-v-4e6253e3] {
font-size: 24px;
font-weight: 700;
color: #4a48e9;
}
.total-note[data-v-4e6253e3] {
margin: 0;
font-size: 14px;
color: #8d8d8d;
}
/* Actions */
.confirmation-actions[data-v-4e6253e3] {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 8px;
}
.btn-default[data-v-4e6253e3] {
width: 100%;
height: 58px;
background: #c3fd56;
border: 0;
border-radius: 16px;
padding: 0 28px;
font-size: 18px;
font-weight: 700;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
}
.btn-default[data-v-4e6253e3]:hover:not(:disabled) {
background: #b5f342;
}
.btn-default[data-v-4e6253e3]:active:not(:disabled) {
transform: scale(0.99);
}
.btn-default[data-v-4e6253e3]:disabled {
opacity: 0.6;
cursor: default;
}
.btn-secondary[data-v-4e6253e3] {
width: 100%;
height: 50px;
background: transparent;
border: 1px solid rgba(30, 30, 30, 0.2);
border-radius: 16px;
padding: 0 28px;
font-size: 16px;
font-weight: 600;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.btn-secondary[data-v-4e6253e3]:hover:not(:disabled) {
background: rgba(235, 235, 235, 0.5);
}
.btn-secondary[data-v-4e6253e3]:active:not(:disabled) {
transform: scale(0.99);
}
.btn-secondary[data-v-4e6253e3]:disabled {
opacity: 0.5;
cursor: default;
}
/* Mobile responsive */
@media (max-width: 480px) {
.confirmation-logo[data-v-4e6253e3] {
display: none;
}
.confirmation[data-v-4e6253e3] {
flex-direction: column;
align-items: stretch;
padding: 0;
}
.confirmation-mobile-header[data-v-4e6253e3] {
display: flex;
flex-shrink: 0;
width: 100%;
padding: 24px 16px;
align-items: center;
justify-content: flex-start;
z-index: 2;
box-sizing: border-box;
}
.confirmation-mobile-header__back[data-v-4e6253e3] {
display: flex;
align-items: center;
gap: 17px;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: #fff;
font-size: 21px;
font-weight: 500;
letter-spacing: -0.2px;
font-family: inherit;
}
.confirmation-mobile-header__back-icon[data-v-4e6253e3] {
width: 48px;
height: 48px;
display: block;
flex-shrink: 0;
}
.confirmation-container[data-v-4e6253e3] {
flex: 1;
width: 100%;
max-width: none;
display: flex;
flex-direction: column;
min-height: 0;
}
.confirmation-panel[data-v-4e6253e3] {
flex: 1;
width: 100%;
max-width: none;
padding: 48px 24px 32px;
border-radius: 24px 24px 0 0;
gap: 20px;
box-shadow: none;
}
.confirmation-panel__title[data-v-4e6253e3] {
font-size: 20px;
}
.subscriptions-list[data-v-4e6253e3] {
max-height: 320px;
gap: 10px;
}
.subscription-card[data-v-4e6253e3] {
border-radius: 12px;
}
.subscription-card__header[data-v-4e6253e3] {
min-height: 48px;
padding: 10px 12px;
}
.tariff__name[data-v-4e6253e3] {
font-size: 14px;
}
.flare[data-v-4e6253e3] {
height: 100px;
right: -50px;
}
.subscription-card__details[data-v-4e6253e3] {
padding: 8px 12px;
gap: 0;
}
.detail-row[data-v-4e6253e3] {
padding: 5px 0;
}
.detail-label[data-v-4e6253e3],
.detail-value[data-v-4e6253e3] {
font-size: 12px;
}
.detail-value--amount[data-v-4e6253e3] {
font-size: 14px;
}
.detail-value--status[data-v-4e6253e3] {
padding: 2px 6px;
font-size: 10px;
}
.total-section[data-v-4e6253e3] {
padding: 16px;
border-radius: 12px;
}
.total-label[data-v-4e6253e3] {
font-size: 16px;
}
.total-value[data-v-4e6253e3] {
font-size: 20px;
}
.total-note[data-v-4e6253e3] {
font-size: 12px;
}
.btn-default[data-v-4e6253e3] {
height: 52px;
font-size: 16px;
border-radius: 12px;
}
.btn-secondary[data-v-4e6253e3] {
height: 46px;
font-size: 14px;
border-radius: 12px;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
[data-v-4e6253e3] {
transition: none !important;
animation: none !important;
}
}
.image-field[data-v-093a0dd8] {
gap: 12px;
}
.image-field__body[data-v-093a0dd8] {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: flex-start;
}
.image-field__inputs[data-v-093a0dd8] {
flex: 1 1 0;
min-width: 220px;
display: grid;
gap: 10px;
}
.image-field__inputs[data-v-093a0dd8] > * {
min-width: 0;
}
.image-preview[data-v-093a0dd8] {
--preview-height: 140px;
width: 160px;
border: 1px dashed #dfe4f5;
border-radius: 16px;
background: #f9fbff;
padding: 12px;
display: grid;
gap: 10px;
}
.image-preview__frame[data-v-093a0dd8] {
border-radius: 12px;
background: #fff;
padding: 6px;
height: var(--preview-height);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.image-preview__media[data-v-093a0dd8] {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.image-preview__media img[data-v-093a0dd8] {
max-height: 100%;
max-width: 100%;
object-fit: contain;
display: block;
border-radius: 10px;
}
.image-preview__state[data-v-093a0dd8] {
width: 100%;
height: 100%;
border-radius: 10px;
background: rgba(124, 133, 163, 0.08);
color: #7c85a3;
font-size: 13px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
}
.image-preview__meta[data-v-093a0dd8] {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
color: #4f5673;
flex-wrap: wrap;
}
.image-preview__url[data-v-093a0dd8] {
display: block;
min-width: 0;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace;
}
.image-preview__link[data-v-093a0dd8] {
font-weight: 600;
color: #3d5afe;
text-decoration: none;
}
.image-preview__link[data-v-093a0dd8]:hover {
text-decoration: underline;
}
.image-preview--empty[data-v-093a0dd8] {
border-style: solid;
background: #f5f7fb;
}
@media (max-width: 640px) {
.image-preview[data-v-093a0dd8] {
width: 100%;
}
}
.preview-wrapper[data-v-9ab532e3] {
margin-top: 12px;
padding-top: 16px;
border-top: 1px dashed #dfe4f5;
display: grid;
gap: 12px;
}
.preview-label[data-v-9ab532e3] {
margin: 0;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #8c95b1;
}
.preview-frame[data-v-9ab532e3] {
border: 1px solid #dfe4f5;
border-radius: 24px;
background: #f9fbff;
padding: 16px;
overflow: hidden;
}
.preview-scale-container[data-v-9ab532e3] {
position: relative;
width: 100%;
overflow: hidden;
}
.preview-scale-target section[data-v-9ab532e3] {
margin: 0;
}
.preview-scale-target[data-v-9ab532e3] .home-hero {
margin-top: 0;
}
.preview-scale-target[data-v-9ab532e3] {
transform-origin: top left;
}
.panel[data-v-20f82ea3] {
background: linear-gradient(180deg, #1e1e1e 0%, #4A48E9 100%);
border-radius: 24px;
padding: 28px;
color: #fff;
display: grid;
gap: 32px;
}
.title[data-v-20f82ea3] { margin: 0; font-weight: 600; font-size: 64px; line-height: 0.9; letter-spacing: -0.01em;
}
.cards[data-v-20f82ea3] { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; align-items: end;
}
.card[data-v-20f82ea3] {
border-radius: 24px;
padding: 20px;
display: grid;
gap: 24px;
position: relative;
isolation: isolate;
/* Антиалиасинг для трансформаций */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform-style: preserve-3d;
}
/* Фон с блюром в отдельном слое, чтобы не блюрился контент карточки */
.card[data-v-20f82ea3]::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: rgba(30,30,30,0.25);
backdrop-filter: blur(16.75px);
-webkit-backdrop-filter: blur(16.75px);
z-index: -1;
}
.cards .card[data-v-20f82ea3]:nth-child(odd) { transform: rotate(-3deg) translateZ(0);
}
.cards .card[data-v-20f82ea3]:nth-child(even) { transform: rotate(3deg) translateZ(0);
}
.head[data-v-20f82ea3] { display: grid; gap: 8px;
}
.card-title[data-v-20f82ea3] { margin: 0; font-weight: 600; font-size: 26px; line-height: 1.1; letter-spacing: -0.01em; color: #fff;
}
.card-sub[data-v-20f82ea3] { margin: 0; font-weight: 500; font-size: 20px; line-height: 1.2; color: rgba(255,255,255,0.9); letter-spacing: -0.01em;
}
.media[data-v-20f82ea3] { position: relative; border-radius: 12px; overflow: hidden; display: grid; grid-template-rows: 180px auto;
}
.preview[data-v-20f82ea3] { position: relative; height: 180px;
}
.img[data-v-20f82ea3] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.preview[data-v-20f82ea3]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; top: 50%; background: linear-gradient(to top, #1e1e1e 0%, rgba(30,30,30,0) 100%); pointer-events: none;
}
.body[data-v-20f82ea3] { background: #1e1e1e; padding: 16px; display: grid; gap: 20px;
}
.card-desc[data-v-20f82ea3] { margin: 0; font-weight: 500; font-size: 20px; line-height: 1.2; color: rgba(255,255,255,0.9); letter-spacing: -0.01em;
}
.body[data-v-20f82ea3] .ui-icon-block-btn { width: 100%; border-radius: 8px;
}
/* Gradient outline like ManageNewWay panels */
.card[data-v-20f82ea3]::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(80deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.9) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
z-index: 1;
}
@media (max-aspect-ratio: 1/1) {
.cards[data-v-20f82ea3] { grid-template-columns: repeat(2, 1fr);
}
.preview[data-v-20f82ea3] { height: 260px;
}
.media[data-v-20f82ea3] { grid-template-rows: 260px auto;
}
}
/* Medium (tablet portrait/square only) */
@media (max-aspect-ratio: 3/4) {
.title[data-v-20f82ea3] { font-size: 48px;
}
.card-sub[data-v-20f82ea3],
.card-desc[data-v-20f82ea3] { font-size: 18px;
}
.preview[data-v-20f82ea3] { height: 160px;
}
.media[data-v-20f82ea3] { grid-template-rows: 160px auto;
}
}
/* Mobile (portrait/square only) */
@media (max-aspect-ratio: 2/3) {
.title[data-v-20f82ea3] { font-size: 36px;
}
.panel[data-v-20f82ea3] { padding: 16px;
}
.cards[data-v-20f82ea3] { margin: 0; padding: 0; padding-bottom: 8px; display: grid; grid-template-columns: 1fr; gap: 24px; overflow: visible; align-items: stretch;
}
.card-sub[data-v-20f82ea3],
.card-desc[data-v-20f82ea3] { font-size: 14px; font-weight: 500;
}
.card[data-v-20f82ea3] { min-height: 350px;
}
.preview[data-v-20f82ea3] { height: 260px;
}
.media[data-v-20f82ea3] { grid-template-rows: 260px auto;
}
.body[data-v-20f82ea3] { padding: 12px; gap: 16px;
}
}
@media (max-aspect-ratio: 2/3) {
.preview[data-v-20f82ea3] { height: 200px;
}
.media[data-v-20f82ea3] { grid-template-rows: 200px auto;
}
}
.wrap[data-v-e8d4a8e3] { display: grid; gap: 40px;
}
.title[data-v-e8d4a8e3] {
margin: 0;
font-weight: 600;
font-size: 64px;
line-height: 0.9;
letter-spacing: -0.01em;
color: var(--color-primary);
}
.row[data-v-e8d4a8e3] { position: relative; display: grid; gap: 24px;
}
.scroller-wrapper[data-v-e8d4a8e3] {
position: relative;
margin: -40px 0 -60px;
min-width: 0;
}
.scroller-overlay[data-v-e8d4a8e3] {
position: absolute;
top: 0; bottom: 0;
width: 20px;
pointer-events: none;
z-index: 2;
}
.scroller-overlay.left[data-v-e8d4a8e3] {
left: -1px;
background: linear-gradient(to right, var(--color-bg) 0%, rgba(235, 235, 235, 0) 100%);
}
.scroller-overlay.right[data-v-e8d4a8e3] {
right: -1px;
background: linear-gradient(to left, var(--color-bg) 0%, rgba(235, 235, 235, 0) 100%);
}
.scroller[data-v-e8d4a8e3] {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.scroller[data-v-e8d4a8e3]::-webkit-scrollbar { display: none;
}
.cards[data-v-e8d4a8e3] {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 363px;
gap: 24px;
list-style: none;
padding: 40px 0 60px;
margin: 0;
user-select: none; /* Disable text selection */
overflow-x: visible;
}
.card[data-v-e8d4a8e3] {
position: relative;
height: 521px;
border-radius: 28px;
overflow: hidden;
padding: 20px;
color: #fff;
background: rgba(0,0,0,0.7);
display: flex;
flex-direction: column;
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
will-change: transform;
}
.card[data-v-e8d4a8e3]:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 20px 40px -10px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1) inset;
z-index: 1;
}
.card[data-v-e8d4a8e3]:first-child:hover {
transform: translateY(-12px) translateX(4px) scale(1.02);
box-shadow: 20px 20px 40px -10px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1) inset;
}
.card[data-v-e8d4a8e3]:last-child:hover {
transform: translateY(-12px) translateX(-4px) scale(1.02);
box-shadow: -20px 20px 40px -10px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1) inset;
}
.photo[data-v-e8d4a8e3] {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; display: block;
pointer-events: none; /* Disable image dragging */
}
.gradients[data-v-e8d4a8e3] {
position: absolute; inset: 0; pointer-events: none;
border-radius: 28px;
background:
/* Top shadow (dark at top) */
linear-gradient(0deg, rgba(0,0,0,0) 74.38%, #000000 110.65%),
/* Bottom shadow (dark at bottom) */
linear-gradient(180deg, rgba(0,0,0,0) 54.42%, #000000 107.97%);
}
.meta[data-v-e8d4a8e3] {
position: relative;
display: flex; align-items: center; justify-content: space-between;
}
.user[data-v-e8d4a8e3] { display: flex; align-items: center; gap: 10px;
}
.user-icon[data-v-e8d4a8e3] { width: 27px; height: 27px; display: block;
}
.user-name[data-v-e8d4a8e3] { margin: 0; font-weight: 600; font-size: 24px; letter-spacing: -0.03em;
}
.date[data-v-e8d4a8e3] { margin: 0; font-weight: 500; font-size: 20px;
}
.desc[data-v-e8d4a8e3] { position: relative; margin: 0; font-size: 20px; margin-top: auto;
}
.scrollbar[data-v-e8d4a8e3] {
position: relative;
height: 4px;
user-select: none;
}
.track[data-v-e8d4a8e3] {
position: absolute; inset: 0;
background: #d9d9d9;
border-radius: 100px;
}
.thumb[data-v-e8d4a8e3] {
position: absolute; top: 0;
height: 4px;
background: var(--color-primary);
border-radius: 100px;
cursor: grab;
z-index: 2;
}
.arrow[data-v-e8d4a8e3] {
position: absolute; top: 50%;
transform: translateY(-50%);
width: 40px; height: 40px;
border: none; background: transparent; padding: 0; cursor: pointer;
display: grid; place-items: center;
z-index: 3;
}
.arrow.right[data-v-e8d4a8e3] { right: 24px;
}
.arrow.left[data-v-e8d4a8e3] { left: 24px;
}
.fade-enter-active[data-v-e8d4a8e3],
.fade-leave-active[data-v-e8d4a8e3] {
transition: opacity 0.3s ease;
}
.fade-enter-from[data-v-e8d4a8e3],
.fade-leave-to[data-v-e8d4a8e3] {
opacity: 0;
}
@media (max-aspect-ratio: 1/1) {
.scrollbar[data-v-e8d4a8e3] {
display: none;
}
.title[data-v-e8d4a8e3] { font-size: 36px;
}
.cards[data-v-e8d4a8e3] {
grid-auto-columns: 286px;
gap: 12px;
padding: 20px 8px 30px;
width: max-content;
min-width: 100%;
}
.scroller-wrapper[data-v-e8d4a8e3] { margin: -20px -8px -30px;
}
.card[data-v-e8d4a8e3] { height: 390px; width: 286px; border-radius: 24px; padding: 16px;
}
.user-name[data-v-e8d4a8e3] { font-size: 18px;
}
.date[data-v-e8d4a8e3] { font-size: 14px;
}
.meta[data-v-e8d4a8e3] {
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.desc[data-v-e8d4a8e3] { font-size: 14px;
}
.arrow[data-v-e8d4a8e3], .scroller-overlay[data-v-e8d4a8e3] { display: none;
}
.card[data-v-e8d4a8e3]:hover, .card[data-v-e8d4a8e3]:first-child:hover, .card[data-v-e8d4a8e3]:last-child:hover {
transform: none;
box-shadow: none;
z-index: auto;
}
}
.good-deeds-shelter[data-v-0500757c] {
display: flex;
gap: 24px;
height: 575px;
}
.panel[data-v-0500757c] {
border-radius: 28px;
overflow: hidden;
position: relative;
}
/* Shelter Info */
.shelter-info[data-v-0500757c] {
background: #c3fd56;
padding: 28px;
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.shelter-info__content[data-v-0500757c] {
position: relative;
z-index: 0;
filter: blur(16px);
pointer-events: none;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.shelter-info__overlay[data-v-0500757c] {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
padding: 28px;
background: rgba(195, 253, 86, 0.5);
}
.shelter-info__overlay-text[data-v-0500757c] {
font-size: clamp(20px, 2.5vw, 28px);
font-weight: 600;
color: rgba(30, 30, 30, 0.85);
line-height: 1.5;
text-align: center;
margin: 0;
max-width: 380px;
}
.shelter-info__overlay-accent[data-v-0500757c] {
display: block;
font-weight: 400;
margin-top: 10px;
font-family: 'Comforter Brush', cursive;
color: rgba(30, 30, 30, 0.9);
font-size: 2em;
}
.shelter-info[data-v-0500757c]::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50%;
background: linear-gradient(180deg, rgba(195, 253, 86, 0.00) 0%, #C3FD56 100%);
pointer-events: none;
z-index: 1;
}
.header[data-v-0500757c] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
z-index: 2;
}
.title[data-v-0500757c] {
font-size: clamp(36px, 4vw, 64px);
font-weight: 600;
color: #1e1e1e;
line-height: 1;
margin: 0;
}
.badge[data-v-0500757c] {
background: rgba(255,255,255,0.01);
border: 1px solid rgba(0,0,0,0.25);
border-radius: 100px;
padding: 12px 25px;
font-size: 20px;
color: #1e1e1e;
white-space: nowrap;
backdrop-filter: blur(50px);
width: 100%;
max-width: 241px;
text-align: center;
}
.decor-bone[data-v-0500757c] {
position: absolute;
right: -130px;
bottom: -230px;
width: auto;
height: 700px;
pointer-events: none;
z-index: 0;
}
.description[data-v-0500757c] {
font-size: clamp(18px, 2vw, 26px);
font-weight: 600;
color: rgba(30,30,30,0.9);
line-height: 1.2;
z-index: 2;
max-width: min(700px, 80%);
}
.description p[data-v-0500757c] { margin: 0;
}
/* Help CTA */
.help-cta[data-v-0500757c] {
flex: 1;
position: relative;
padding: 28px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
}
.bg-image-wrapper[data-v-0500757c] {
position: absolute;
inset: 0;
z-index: 0;
}
.bg-img[data-v-0500757c] {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.bg-img-blurred[data-v-0500757c] {
display: none;
}
.bg-blur-overlay[data-v-0500757c] {
display: none;
}
.cta-box[data-v-0500757c] {
position: relative;
z-index: 1;
background: rgba(30,30,30,0.25);
border: 1px solid white;
backdrop-filter: blur(40px);
border-radius: 28px;
padding: 24px;
width: 360px;
max-width: 100%;
color: white;
display: flex;
flex-direction: column;
gap: 20px;
}
.cta-header[data-v-0500757c] { margin-bottom: 4px;
}
.cta-title[data-v-0500757c] {
font-size: 26px;
font-weight: 600;
margin: 0;
}
.cta-text[data-v-0500757c] {
font-size: 20px;
font-weight: 500;
line-height: 1.3;
color: rgba(255,255,255,0.9);
margin: 0;
}
.btn-text[data-v-0500757c] {
font-size: 20px;
line-height: 1.3;
}
.btn-arrow[data-v-0500757c] { font-size: 24px;
}
@media (max-aspect-ratio: 1/1) {
.good-deeds-shelter[data-v-0500757c] {
flex-direction: column;
height: auto;
gap: 8px; /* Figma implies close stacking or gap in parent? Let's use 8px or match stats gap */
}
.shelter-info[data-v-0500757c] {
width: 100%;
padding: 16px;
min-height: 400px;
border-radius: 20px;
}
.header[data-v-0500757c] {
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.title[data-v-0500757c] {
font-size: 36px;
min-width: 0;
letter-spacing: -0.72px;
line-height: 36px;
}
.badge[data-v-0500757c] {
width: auto;
padding: 4px 16px;
font-size: 14px;
height: 32px;
order: -1;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.01);
border: 1px solid rgba(0,0,0,0.25);
backdrop-filter: blur(10px);
}
.description[data-v-0500757c] {
font-size: 18px;
line-height: 24px;
max-width: 100%;
}
.help-cta[data-v-0500757c] {
width: 100%;
min-height: 491px;
padding: 16px;
justify-content: flex-end;
border-radius: 20px;
}
.bg-img[data-v-0500757c] {
height: 60%;
top: 0;
}
.bg-img-blurred[data-v-0500757c] {
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 40%;
object-fit: cover;
object-position: bottom;
}
.bg-blur-overlay[data-v-0500757c] {
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50%;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: rgba(0, 0, 0, 0.4);
/* 50% незаблюренное, 10% переход, 40% заблюренное */
/* В координатах оверлея: 0% = прозрачно, 20% = полный блюр + затемнение */
mask-image: linear-gradient(to bottom, transparent 0%, black 20%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%);
z-index: 1;
}
.cta-box[data-v-0500757c] {
width: 100%;
padding: 16px;
gap: 16px;
border-radius: 20px; /* Match nested radius */
}
.cta-title[data-v-0500757c] {
font-size: 18px;
line-height: 24px;
}
.cta-text[data-v-0500757c] {
font-size: 16px;
line-height: 20px;
}
.btn-text[data-v-0500757c] {
font-size: 20px;
}
.help-cta[data-v-0500757c] .ui-icon-block-btn {
height: 64px !important;
}
.decor-bone[data-v-0500757c] {
height: 500px;
right: -110px;
bottom: -140px;
min-width: 450px;
object-fit: contain;
}
}
.good-deeds-stats[data-v-f47ba1a8] {
background-color: #c3fd56;
background-image: none;
height: auto;
min-height: 848px;
padding: 28px;
overflow: hidden;
color: #1e1e1e;
border-radius: 28px;
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.good-deeds-stats .container[data-v-f47ba1a8] {
display: flex;
}
.left-col[data-v-f47ba1a8] {
width: 33%;
display: flex;
flex-direction: column;
position: relative;
}
.right-col-wrapper[data-v-f47ba1a8] {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
min-width: 0;
}
.right-col-clip[data-v-f47ba1a8] {
height: 848px;
width: 100%;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
box-sizing: border-box;
}
.right-col[data-v-f47ba1a8] {
height: 100%;
width: 100%;
overflow-y: auto;
padding-right: 20px; /* Scrollbar space */
cursor: grab;
box-sizing: border-box;
}
.stats-list[data-v-f47ba1a8] {
display: flex;
flex-direction: column;
gap: 20px;
}
/* ... existing styles ... */
.title[data-v-f47ba1a8] {
font-size: 64px;
line-height: 1;
color: #4a48e9;
font-weight: 600;
margin-bottom: 40px;
margin-top: 0;
}
.decor-wrapper[data-v-f47ba1a8] {
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.decor-img[data-v-f47ba1a8] {
position: absolute;
width: 837px;
height: 731px;
max-width: none;
right: -22px;
bottom: -27px;
object-fit: contain;
}
.stat-card[data-v-f47ba1a8] {
display: flex;
align-items: center;
height: 340px;
position: relative;
}
.card-image-wrapper[data-v-f47ba1a8] {
width: 588px;
height: 340px;
flex-shrink: 0;
border-radius: 20px;
z-index: 2;
position: relative;
overflow: hidden;
}
.card-bg[data-v-f47ba1a8] {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-content-wrapper[data-v-f47ba1a8] {
flex-grow: 1;
height: 100%;
margin-left: -40px; /* Overlap */
padding-top: 0; /* Visual alignment */
padding-bottom: 0;
position: relative;
z-index: 1;
display: flex;
}
.card-content[data-v-f47ba1a8] {
background: white;
border-radius: 28px;
width: 100%;
height: 100%;
padding: 28px 28px 28px 68px; /* Left padding covers overlap */
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid rgba(30,30,30,0.25);
}
.card-header[data-v-f47ba1a8] {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.stat-value[data-v-f47ba1a8] {
font-size: 48px;
font-weight: 600;
line-height: 1.1;
margin: 0;
}
.stat-icon[data-v-f47ba1a8] {
width: 45px;
height: 45px;
}
.stat-icon img[data-v-f47ba1a8] { width: 100%; height: 100%;
}
.stat-desc[data-v-f47ba1a8] {
font-size: 32px;
line-height: 1.2;
color: black;
}
.stat-desc[data-v-f47ba1a8] p { margin: 0;
}
.right-col[data-v-f47ba1a8]::-webkit-scrollbar {
width: 6px;
}
.right-col[data-v-f47ba1a8]::-webkit-scrollbar-track {
background: rgba(0,0,0,0.05);
border-radius: 3px;
}
.right-col[data-v-f47ba1a8]::-webkit-scrollbar-thumb {
background: #4a48e9;
border-radius: 3px;
}
/* Scrollbar hidden by default (desktop uses right-col scrollbar) */
.scrollbar[data-v-f47ba1a8] { display: none;
}
@media (max-aspect-ratio: 1/1) {
.good-deeds-stats[data-v-f47ba1a8] {
flex-direction: column;
padding: 0;
min-height: auto;
height: auto;
border-radius: 0;
gap: 20px;
background: transparent;
}
.container[data-v-f47ba1a8] {
display: flex;
flex-direction: column;
gap: 20px;
padding-inline: 0;
}
.left-col[data-v-f47ba1a8] {
width: 100%;
padding-bottom: 0;
padding-right: 0;
}
.title[data-v-f47ba1a8] {
font-size: 36px;
margin-bottom: 0;
letter-spacing: -0.72px;
}
.right-col-wrapper[data-v-f47ba1a8] {
display: flex;
flex-direction: column;
gap: 8px;
}
.right-col-clip[data-v-f47ba1a8] {
height: auto;
border-radius: 0;
overflow: visible;
}
.right-col[data-v-f47ba1a8] {
width: 100%;
height: auto;
overflow-x: auto;
overflow-y: hidden;
cursor: default;
scrollbar-width: none;
-ms-overflow-style: none;
}
.right-col[data-v-f47ba1a8]::-webkit-scrollbar {
display: none;
}
.stats-list[data-v-f47ba1a8] {
flex-direction: row;
gap: 8px;
padding-bottom: 0;
padding-right: 0;
}
.stat-card[data-v-f47ba1a8] {
flex-direction: column;
width: 286px;
height: 340px;
flex-shrink: 0;
align-items: stretch;
}
.card-image-wrapper[data-v-f47ba1a8] {
width: 100%;
height: calc(55% + 12px);
position: absolute;
inset: 0;
border-radius: 12px;
margin: 0;
}
.card-content-wrapper[data-v-f47ba1a8] {
margin-left: 0;
margin-top: auto;
height: 45%;
width: 100%;
padding: 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.card-content[data-v-f47ba1a8] {
padding: 16px;
border-radius: 0 0 12px 12px;
height: auto;
gap: 12px;
min-height: 120px;
border: none;
}
.card-header[data-v-f47ba1a8] {
align-items: flex-start;
margin-top: 12px;
}
.stat-value[data-v-f47ba1a8] {
font-size: 26px;
}
.stat-icon[data-v-f47ba1a8] {
width: 27px;
height: 27px;
}
.stat-desc[data-v-f47ba1a8] {
font-size: 16px;
}
.decor-img[data-v-f47ba1a8] { display: none;
}
/* Mobile Custom Scrollbar */
.scrollbar[data-v-f47ba1a8] {
display: block;
position: relative;
height: 4px;
margin-right: 0;
background: transparent;
}
.track[data-v-f47ba1a8] {
position: absolute;
inset: 0;
background: #d9d9d9;
border-radius: 100px;
}
.thumb[data-v-f47ba1a8] {
position: absolute;
top: 0;
height: 4px;
background: #4a48e9;
border-radius: 100px;
cursor: grab;
z-index: 2;
}
}
.good-deeds-stories[data-v-6b7cad46] {
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.section-title[data-v-6b7cad46] {
font-size: 64px;
font-weight: 600;
color: #4a48e9;
margin-bottom: 32px;
margin-top: 0;
}
.stories-row[data-v-6b7cad46] {
position: relative;
display: grid;
gap: 24px;
}
.stories-grid[data-v-6b7cad46] {
display: flex;
gap: 24px;
}
.scroller-wrapper[data-v-6b7cad46] {
position: relative;
margin: 0;
min-width: 0;
}
.scroller-overlay[data-v-6b7cad46] {
position: absolute;
top: 0;
bottom: 0;
width: 20px;
pointer-events: none;
z-index: 2;
}
.scroller-overlay.left[data-v-6b7cad46] {
left: -1px;
background: linear-gradient(to right, var(--color-bg) 0%, rgba(235, 235, 235, 0) 100%);
}
.scroller-overlay.right[data-v-6b7cad46] {
right: -1px;
background: linear-gradient(to left, var(--color-bg) 0%, rgba(235, 235, 235, 0) 100%);
}
.scroller[data-v-6b7cad46] {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.scroller[data-v-6b7cad46]::-webkit-scrollbar {
display: none;
}
.story-card[data-v-6b7cad46] {
width: 403px;
height: 521px;
flex-shrink: 0;
display: flex;
flex-direction: column;
border-radius: 28px;
overflow: hidden;
position: relative;
}
.image-wrapper[data-v-6b7cad46] {
flex: 1;
position: relative;
margin-bottom: -40px; /* Overlap */
z-index: 0;
border-radius: 28px;
overflow: hidden;
}
.story-bg[data-v-6b7cad46] {
width: 100%;
height: 100%;
object-fit: cover;
}
.gradient-overlay[data-v-6b7cad46] {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.8) 100%);
}
.story-content[data-v-6b7cad46] {
height: 149px;
background: #f5f5f5;
border: 1px solid rgba(30, 30, 30, 0.25);
border-radius: 28px;
padding: 20px;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.author[data-v-6b7cad46] {
display: flex;
align-items: center;
gap: 10px;
}
.avatar[data-v-6b7cad46] {
width: 27px;
height: 27px;
border-radius: 50%; /* Design seems to show small icons */
}
.name[data-v-6b7cad46] {
font-size: 26px;
font-weight: 600;
color: #1e1e1e;
}
.action[data-v-6b7cad46] {
font-size: 20px;
color: #1e1e1e;
margin: 0;
line-height: 1.3;
}
.scrollbar[data-v-6b7cad46] {
position: relative;
height: 4px;
user-select: none;
}
.track[data-v-6b7cad46] {
position: absolute;
inset: 0;
background: #d9d9d9;
border-radius: 100px;
}
.thumb[data-v-6b7cad46] {
position: absolute;
top: 0;
height: 4px;
background: var(--color-primary);
border-radius: 100px;
cursor: grab;
z-index: 2;
}
.arrow[data-v-6b7cad46] {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border: none;
background: transparent;
padding: 0;
cursor: pointer;
display: grid;
place-items: center;
z-index: 3;
}
.arrow.right[data-v-6b7cad46] {
right: 24px;
}
.arrow.left[data-v-6b7cad46] {
left: 24px;
}
.fade-enter-active[data-v-6b7cad46],
.fade-leave-active[data-v-6b7cad46] {
transition: opacity 0.3s ease;
}
.fade-enter-from[data-v-6b7cad46],
.fade-leave-to[data-v-6b7cad46] {
opacity: 0;
}
@media (max-aspect-ratio: 1/1) {
.arrow[data-v-6b7cad46],
.scroller-overlay[data-v-6b7cad46] {
display: none;
}
}
@media (max-aspect-ratio: 3/4) {
.section-title[data-v-6b7cad46] {
font-size: 36px;
margin-bottom: 24px;
letter-spacing: -0.72px;
line-height: 36px;
}
.stories-row[data-v-6b7cad46] {
gap: 8px; /* Wrapper gap */
}
.stories-grid[data-v-6b7cad46] {
gap: 8px; /* Gap between cards */
}
.scroller[data-v-6b7cad46] {
padding-right: 20px;
}
.story-card[data-v-6b7cad46] {
width: 286px;
height: 420px;
border-radius: 12px;
}
.image-wrapper[data-v-6b7cad46] {
border-radius: 12px;
margin-bottom: -40px;
}
.story-content[data-v-6b7cad46] {
height: 140px;
padding: 16px;
border-radius: 12px;
}
.name[data-v-6b7cad46] {
font-size: 20px;
line-height: 32px;
}
.action[data-v-6b7cad46] {
font-size: 18px;
line-height: 26px;
}
}
.good-deeds-total[data-v-f564671c] {
position: relative;
height: 400px;
border-radius: 28px;
overflow: hidden;
padding: 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
background: #000;
}
.bg-image[data-v-f564671c] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.bg-overlay[data-v-f564671c] {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(30,30,30,0.4) 0%, rgba(30,30,30,0) 100%);
z-index: 1;
pointer-events: none;
}
.bg-overlay-top[data-v-f564671c] {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 33%;
background: linear-gradient(180deg, rgba(30, 30, 30, 0.75) 0%, rgba(30, 30, 30, 0) 100%);
z-index: 1;
pointer-events: none;
}
.bg-overlay-bottom[data-v-f564671c] {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30%;
background: linear-gradient(0deg, rgba(30, 30, 30, 0.75) 0%, rgba(30, 30, 30, 0) 100%);
z-index: 1;
pointer-events: none;
}
.content[data-v-f564671c] {
position: relative;
z-index: 2;
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.title[data-v-f564671c] {
font-size: 64px;
font-weight: 600;
color: white;
line-height: 100px;
letter-spacing: -1.28px;
margin: 0;
align-self: flex-end;
}
.badge[data-v-f564671c] {
background: rgba(255,255,255,0.01);
border: 1px solid rgba(255,255,255,0.25);
backdrop-filter: blur(20px);
border-radius: 100px;
padding: 18px 25px;
font-size: 20px;
color: white;
white-space: nowrap;
align-self: flex-end;
margin-bottom: 10px;
cursor: pointer;
text-decoration: none;
user-select: none;
display: inline-flex;
align-items: center;
justify-content: center;
transition:
background 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.15s ease;
}
.badge[data-v-f564671c]:hover {
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.35);
box-shadow: 0 12px 30px rgba(0,0,0,0.35);
transform: translateY(-2px);
}
.badge[data-v-f564671c]:active {
transform: translateY(1px) scale(0.97);
box-shadow: 0 4px 14px rgba(0,0,0,0.4);
background: rgba(255,255,255,0.18);
}
/* Progress bar matching design */
.progress-bar-container[data-v-f564671c] {
position: absolute;
bottom: 28px; /* прогресс-бар у нижнего края панели */
left: 28px;
right: 28px;
height: 126px;
z-index: 3;
pointer-events: none;
}
.progress-bar-bg[data-v-f564671c] {
position: absolute;
inset: 0;
background: rgba(255,255,255,0.24);
border-radius: 100px;
box-shadow: inset 0 2px 0 rgba(255,255,255,0.25);
backdrop-filter: blur(10px);
}
.progress-bar-fill[data-v-f564671c] {
position: absolute;
/* те же отступы, что и у progress-bar-overlay */
left: 16.5px;
top: 14px;
height: calc(100% - 28px); /* 14px сверху и снизу */
/* динамическая ширина под прогресс в пределах тех же горизонтальных отступов */
width: calc(100px + (100% - 133px) * var(--progress, 0)); /* 16.5px слева и справа */
border-radius: 100px;
/* Градиент, который «достраивается» по мере прогресса:
при маленьком progress видна только самая левая часть (почти сплошной #4A48E9),
при progress = 1 — полностью весь градиент */
background: linear-gradient(
90deg,
#4A48E9 0%,
#4D64E0 30%,
#5BD6BD 65%,
#C3FD56 100%
);
background-repeat: no-repeat;
background-size: calc(100% / max(var(--progress, 0.0001), 0.0001)) 100%;
box-shadow:
inset -4px 5px 20px #ffffff,
inset 5px -9px 30px rgba(0,0,0,0.25);
display: flex;
align-items: center;
justify-content: flex-end; /* иконка всегда в правом конце заполненной части */
padding: 0; /* без внутренних отступов, прогресс определяется только шириной */
transform-origin: left center;
z-index: 3;
pointer-events: none;
}
.heart-icon[data-v-f564671c] {
display: block;
transform-origin: center bottom;
/* Чем больше прогресс, тем сильнее наклон (0–15deg) и сдвиг вверх */
transform: translateY(-100px) rotate(calc(15deg * var(--progress, 0)));
/* Размер от 14px до 70px в зависимости от --progress (0–1) */
width: calc(14px + 56px * var(--progress, 0));
height: calc(14px + 56px * var(--progress, 0));
/* Мягкое белое свечение вокруг иконки */
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
/* Вертикальный сдвиг управляется через :style="heartIconStyle" */
}
.progress-bar-overlay[data-v-f564671c] {
position: absolute;
left: 16.5px;
right: 16.5px;
top: 14px;
bottom: 14px;
border-radius: 100px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
pointer-events: none;
}
@media (max-aspect-ratio: 1/1) {
.good-deeds-total[data-v-f564671c] {
height: auto;
min-height: 300px; /* Match Figma height approximately or let content drive it with gap */
padding: 16px;
border-radius: 20px;
gap: 52px; /* From Figma */
justify-content: flex-start;
}
.bg-image[data-v-f564671c] {
width: 160%;
height: 160%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.bg-overlay-top[data-v-f564671c] {
height: 50%;
backdrop-filter: blur(7.5px);
-webkit-backdrop-filter: blur(7.5px);
mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,0.67) 50%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,0.67) 50%, transparent 100%);
}
.bg-overlay-bottom[data-v-f564671c] {
height: 70%;
backdrop-filter: blur(7.5px);
-webkit-backdrop-filter: blur(7.5px);
mask-image: linear-gradient(to top, black 0%, transparent 100%);
-webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
}
.content[data-v-f564671c] {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 24px;
height: auto;
}
.badge[data-v-f564671c] {
order: -1;
align-self: flex-start;
padding: 4px 16px;
font-size: 14px;
height: 32px;
margin-bottom: 0;
backdrop-filter: blur(10px);
background: rgba(255,255,255,0.01);
border: 1px solid rgba(255,255,255,0.25);
}
.title[data-v-f564671c] {
align-self: flex-start;
font-size: 36px;
line-height: 36px; /* Leading 36px from Figma */
letter-spacing: -0.72px; /* -0.72px from Figma */
margin-bottom: 0;
}
.progress-bar-container[data-v-f564671c] {
position: relative;
bottom: auto;
left: auto;
right: auto;
width: 100%;
height: 68px;
margin-top: auto;
}
.progress-bar-bg[data-v-f564671c] {
border-radius: 100px;
}
.progress-bar-fill[data-v-f564671c] {
top: 7px;
left: 7px;
height: calc(100% - 14px);
border-radius: 100px;
}
.progress-bar-overlay[data-v-f564671c] {
top: 7px;
bottom: 7px;
left: 7px;
right: 7px;
}
.heart-icon[data-v-f564671c] {
width: 55px;
height: 55px;
transform: translateY(-70px) rotate(calc(15deg * var(--progress, 0)));
}
}
.panel[data-v-d02c29ff] {
position: relative;
background: var(--color-primary);
border-radius: 20px;
padding: 28px;
min-height: 447px;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr; /* Split content and visual area roughly */
gap: 24px;
color: #fff;
}
.content[data-v-d02c29ff] {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 32px;
max-width: 100%;
}
.text-block[data-v-d02c29ff] { display: grid; gap: 32px;
}
.title[data-v-d02c29ff] {
margin: 0;
font-weight: 600;
font-size: 64px;
line-height: 0.9;
letter-spacing: -0.01em;
}
.lead-block[data-v-d02c29ff] { display: grid; gap: 0;
}
.lead[data-v-d02c29ff] {
margin: 0;
font-size: 24px;
line-height: 1.1;
color: rgba(255,255,255,0.9);
}
.action-block[data-v-d02c29ff] { display: grid; gap: 24px; justify-items: start;
}
.desc[data-v-d02c29ff] {
margin: 0;
font-weight: 600;
font-size: 20px;
line-height: 1.1;
color: rgba(255,255,255,0.9);
max-width: 550px;
}
/* Animations */
@keyframes float-d02c29ff {
0%, 100% { transform: translateY(0);
}
50% { transform: translateY(-20px);
}
}
@keyframes drift-s-d02c29ff {
from { transform: translateX(-25px);
}
to { transform: translateX(25px);
}
}
@keyframes drift-m-d02c29ff {
from { transform: translateX(-40px);
}
to { transform: translateX(40px);
}
}
@keyframes drift-l-d02c29ff {
from { transform: translateX(-60px);
}
to { transform: translateX(60px);
}
}
/* Visuals area */
.visuals[data-v-d02c29ff] {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
/* Clouds positioning based on Figma export approximation */
.cloud[data-v-d02c29ff] { position: absolute; display: flex; align-items: center; justify-content: center;
}
.cloud-img[data-v-d02c29ff] { display: block; width: 100%; height: 100%; object-fit: cover;
}
/* Cloud 2: center top small */
.c2[data-v-d02c29ff] { width: 765px; height: 765px; left: 45%; top: 45px; opacity: 0.95; animation: drift-s-d02c29ff 18s ease-in-out infinite alternate;
}
.c2 .cloud-img[data-v-d02c29ff] { transform: rotate(16deg);
}
/* Cloud 3: right top deep */
.c3[data-v-d02c29ff] { width: 1049px; height: 1049px; left: 60%; top: -270px; animation: drift-l-d02c29ff 25s ease-in-out infinite alternate-reverse;
}
.c3 .cloud-img[data-v-d02c29ff] { transform: rotate(335deg);
}
/* Cloud 4: left bottom deep */
.c4[data-v-d02c29ff] { width: 1049px; height: 1049px; left: 59%; top: -35px; animation: drift-m-d02c29ff 22s ease-in-out infinite alternate;
}
.c4 .cloud-img[data-v-d02c29ff] { transform: rotate(163deg);
}
/* Cloud 5: right middle small sharp */
.c5[data-v-d02c29ff] { width: 622px; height: 622px; left: 59%; top: 90px; opacity: 0.5; animation: drift-s-d02c29ff 15s ease-in-out infinite alternate-reverse;
}
.c5 .cloud-img[data-v-d02c29ff] { transform: rotate(163deg);
}
/* Cloud 6: right top very blurry */
.c6[data-v-d02c29ff] { width: 970px; height: 970px; left: 59%; top: -320px; opacity: 0.4; animation: drift-l-d02c29ff 28s ease-in-out infinite alternate;
}
.c6 .cloud-img[data-v-d02c29ff] { transform: rotate(163deg);
}
/* Cloud 7: right middle blur */
.c7[data-v-d02c29ff] { width: 622px; height: 622px; left: 62%; top: 70px; opacity: 0.6; animation: drift-m-d02c29ff 20s ease-in-out infinite alternate-reverse;
}
.c7 .cloud-img[data-v-d02c29ff] { transform: rotate(163deg);
}
/* Cloud 8: left middle blur */
.c8[data-v-d02c29ff] {
width: 1200px;
height: 1200px;
left: 24%;
top: -36px;
opacity: 0.9;
animation: drift-l-d02c29ff 30s ease-in-out infinite alternate;
}
.c8 .cloud-img[data-v-d02c29ff] { transform: rotate(377deg);
}
.c9[data-v-d02c29ff] { width: 622px; height: 622px; left: 20%; top: 212px; animation: drift-s-d02c29ff 16s ease-in-out infinite alternate-reverse;
}
.c9 .cloud-img[data-v-d02c29ff] { transform: rotate(365deg);
}
/* Main Image */
.main-img[data-v-d02c29ff] {
position: absolute;
width: 582px;
height: auto;
right: 10%; /* Adjusted relative to container width */
top: -70px;
z-index: 2;
animation: float-d02c29ff 6s ease-in-out infinite;
}
/* Stars */
.stars[data-v-d02c29ff] { position: absolute; inset: 0; z-index: 3;
}
.star[data-v-d02c29ff] { position: absolute; mix-blend-mode: overlay; width: 158px; height: 26px;
}
.s1[data-v-d02c29ff] { right: 20%; top: 321px; transform: translate(50%, 0);
}
.s2[data-v-d02c29ff] { right: 20%; top: 321px; transform: translate(50%, 0); opacity: 0.5;
} /* Stacked in design? */
.s3[data-v-d02c29ff] { right: 20%; top: 321px; transform: translate(50%, 0); opacity: 0.5;
}
.text-mobile[data-v-d02c29ff] { display: none;
}
@media (max-aspect-ratio: 1/1) {
.text-desktop[data-v-d02c29ff] { display: none;
}
.text-mobile[data-v-d02c29ff] { display: inline;
}
.panel[data-v-d02c29ff] {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 16px;
min-height: 516px;
gap: 0;
}
.content[data-v-d02c29ff] {
flex-grow: 1;
justify-content: space-between;
gap: 0;
}
.text-block[data-v-d02c29ff] { gap: 20px;
}
.title[data-v-d02c29ff] { font-size: 36px; letter-spacing: -0.02em;
}
.lead[data-v-d02c29ff] { font-size: 18px; font-weight: 500; line-height: 1.2;
}
.action-block[data-v-d02c29ff] { gap: 20px; justify-items: stretch;
}
.desc[data-v-d02c29ff] { font-size: 14px; font-weight: 500; line-height: 1.2; margin-bottom: 0;
}
.help-btn[data-v-d02c29ff] {
height: 64px;
font-size: 20px;
font-weight: 700;
padding: 0;
width: 100%;
}
/* Visuals & Gradients */
.visuals[data-v-d02c29ff] {
opacity: 1;
z-index: 1;
left: -150%;
width: 350%;
right: auto;
}
/* Top Gradient */
.visuals[data-v-d02c29ff]::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 250px;
background: linear-gradient(to bottom, #4a48e9 0%, rgba(74,72,233,0) 100%);
z-index: 10;
pointer-events: none;
}
/* Bottom Gradient */
.visuals[data-v-d02c29ff]::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 320px;
background: linear-gradient(to top, #4a48e9 0%, rgba(74,72,233,0) 100%);
z-index: 10;
pointer-events: none;
}
.main-img[data-v-d02c29ff] {
display: block;
width: 520px;
height: auto;
left: auto;
/*
Visuals width = 350% of Panel.
Visuals left = -150% of Panel.
Visuals right edge = -150 + 350 = 200% of Panel.
Panel right edge = 100% of Panel.
Gap = 100% (1 Panel Width).
100% Panel Width / 350% Panel Width = 1/3.5 ≈ 28.5%
We want image at Panel Right - 80px (shifted right by 80px? No, right: -80px means shifted out).
So right: calc(28.5% - 80px).
*/
right: calc(28.5% - 120px);
top: 50%;
transform: translateY(-50%);
opacity: 1;
animation: none;
}
/* Adjust clouds visibility/opacity if needed to match clean look,
but design has them. Gradients handle readability. */
.cloud[data-v-d02c29ff] { opacity: 1;
}
}
/* Modal Styles */
.modal-overlay[data-v-d02c29ff] {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(30, 30, 30, 0.4);
backdrop-filter: blur(10px);
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.modal-container[data-v-d02c29ff] {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border: 2px solid #FFFFFF;
border-radius: 28px;
padding: 28px;
width: 100%;
max-width: 640px;
max-height: 90vh;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 40px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}
.modal-header[data-v-d02c29ff] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 32px;
}
.modal-text[data-v-d02c29ff] {
display: flex;
flex-direction: column;
gap: 20px;
}
.modal-title[data-v-d02c29ff] {
margin: 0;
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 1;
color: #1E1E1E;
letter-spacing: -0.02em;
}
.modal-desc[data-v-d02c29ff] {
margin: 0;
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 1.1;
color: rgba(30, 30, 30, 0.9);
letter-spacing: -0.02em;
}
.services-modal-close[data-v-d02c29ff] {
width: 24px;
height: 24px;
padding: 7px;
border-radius: 8px;
background: #1e1e1e;
color: #fff;
border: none;
display: grid;
place-items: center;
cursor: pointer;
line-height: 1;
flex-shrink: 0;
}
.services-modal-close img[data-v-d02c29ff] { width: 100%; height: 100%; display: block;
}
.modal-form[data-v-d02c29ff] {
display: flex;
flex-direction: column;
gap: 28px;
}
.form-fields[data-v-d02c29ff] {
display: flex;
flex-direction: column;
gap: 12px;
}
.input-wrapper[data-v-d02c29ff] {
background: #FFFFFF;
border-radius: 16px;
padding: 28px;
display: flex;
align-items: center;
}
/* FIO wrapper with dropdown positioning */
.input-wrapper--fio[data-v-d02c29ff] {
position: relative;
flex-wrap: wrap;
}
/* FIO dropdown list */
.fio-dropdown[data-v-d02c29ff] {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 100;
margin: 0;
margin-top: 4px;
padding: 8px 0;
list-style: none;
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.fio-dropdown__item[data-v-d02c29ff] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
cursor: pointer;
transition: background-color 0.15s ease;
}
.fio-dropdown__item[data-v-d02c29ff]:hover,
.fio-dropdown__item.is-selected[data-v-d02c29ff] {
background: rgba(74, 72, 233, 0.08);
}
.fio-dropdown__value[data-v-d02c29ff] {
font-size: 16px;
color: #1e1e1e;
font-weight: 400;
}
.fio-dropdown__gender[data-v-d02c29ff] {
font-size: 14px;
color: rgba(30, 30, 30, 0.5);
margin-left: 8px;
}
/* Dropdown transition */
.dropdown-enter-active[data-v-d02c29ff],
.dropdown-leave-active[data-v-d02c29ff] {
transition: opacity 0.15s ease, transform 0.15s ease;
transform-origin: top;
}
.dropdown-enter-from[data-v-d02c29ff],
.dropdown-leave-to[data-v-d02c29ff] {
opacity: 0;
transform: translateY(-4px) scaleY(0.98);
}
.form-input[data-v-d02c29ff] {
width: 100%;
border: none;
outline: none;
background: transparent;
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 1.1;
color: #1E1E1E;
padding: 0;
resize: none;
}
.form-input[data-v-d02c29ff]::placeholder {
color: rgba(30, 30, 30, 0.4);
}
.form-actions[data-v-d02c29ff] {
display: flex;
flex-direction: column;
gap: 28px;
}
.form-error[data-v-d02c29ff] {
margin: 0;
padding: 12px 16px;
border-radius: 12px;
background: #fff0f0;
color: #c04741;
font-size: 14px;
line-height: 1.3;
}
.submit-btn[data-v-d02c29ff] {
width: 100%;
height: 64px;
background: #C3FD56;
border-radius: 12px;
border: none;
font-family: 'Onest', sans-serif;
font-weight: 700;
font-size: 24px;
color: #1E1E1E;
cursor: pointer;
box-shadow: 0px 4px 4px rgba(164, 213, 73, 0.3);
transition: all 0.2s;
}
.submit-btn[data-v-d02c29ff]:hover {
transform: translateY(-2px);
box-shadow: 0px 6px 8px rgba(164, 213, 73, 0.4);
}
.submit-btn[data-v-d02c29ff]:active {
transform: translateY(0);
}
.agree[data-v-d02c29ff] {
display: flex;
align-items: flex-start;
gap: 8px;
color: rgba(30, 30, 30, 0.6);
font-size: 14px;
margin: 0;
cursor: pointer;
}
.agreement-text[data-v-d02c29ff] {
margin: 0;
font-family: 'Onest', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.2;
color: rgba(30, 30, 30, 0.6);
}
.agreement-text a[data-v-d02c29ff] {
color: inherit;
text-decoration: underline;
}
.agree__checkbox[data-v-d02c29ff] {
min-width: 16px;
min-height: 16px;
border: 1px solid rgba(30, 30, 30, 0.25);
border-radius: 4px;
appearance: none;
background: #fff;
margin-top: 3px;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
transform 0.08s ease,
box-shadow 0.2s ease;
will-change: transform;
}
.agree__checkbox[data-v-d02c29ff]:hover {
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06);
}
.agree__checkbox[data-v-d02c29ff]:active {
transform: scale(0.92);
}
.agree__checkbox[data-v-d02c29ff]:checked {
background-color: #000;
border-color: #000;
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
background-image: url('data:image/svg+xml;utf8,');
animation: checkbox-pop-d02c29ff 0.18s ease;
}
.agree__checkbox[data-v-d02c29ff]:focus-visible {
outline: none;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
}
.agree__checkbox.is-error[data-v-d02c29ff] {
border-color: #ff3b30;
box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.15);
animation: error-pulse-d02c29ff 0.5s ease;
}
@keyframes error-pulse-d02c29ff {
0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
}
50% { box-shadow: 0 0 0 6px rgba(255, 59, 48, 0.18);
}
100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
}
}
@keyframes checkbox-pop-d02c29ff {
0% { transform: scale(0.9);
}
50% { transform: scale(1.05);
}
100% { transform: scale(1);
}
}
/* Transitions */
.fade-enter-active[data-v-d02c29ff],
.fade-leave-active[data-v-d02c29ff] {
transition: opacity 0.3s ease;
}
.fade-enter-from[data-v-d02c29ff],
.fade-leave-to[data-v-d02c29ff] {
opacity: 0;
}
@media (max-width: 768px) {
.modal-overlay[data-v-d02c29ff] {
padding: 0;
align-items: flex-end;
}
.modal-container[data-v-d02c29ff] {
max-width: 100%;
border-radius: 28px 28px 0 0;
max-height: 85vh;
padding: 20px;
gap: 24px;
border-bottom: none;
/* Animation for sliding up */
transform: translateY(0);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-enter-active .modal-container[data-v-d02c29ff] {
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-enter-from .modal-container[data-v-d02c29ff],
.fade-leave-to .modal-container[data-v-d02c29ff] {
transform: translateY(100%);
}
.modal-header[data-v-d02c29ff] {
gap: 16px;
}
.input-wrapper[data-v-d02c29ff] {
padding: 20px;
}
.form-input[data-v-d02c29ff] {
font-size: 16px;
}
/* Mobile FIO dropdown */
.fio-dropdown[data-v-d02c29ff] {
border-radius: 8px;
margin-top: 2px;
padding: 4px 0;
}
.fio-dropdown__item[data-v-d02c29ff] {
padding: 10px 14px;
}
.fio-dropdown__value[data-v-d02c29ff] {
font-size: 14px;
}
.fio-dropdown__gender[data-v-d02c29ff] {
font-size: 12px;
}
.submit-btn[data-v-d02c29ff] {
font-size: 20px;
height: 56px;
}
}
.home-hero[data-v-c1018880] { margin-top: 0;
}
.hero[data-v-c1018880] {
position: relative;
min-height: 690px;
border-radius: 28px;
overflow: hidden;
}
.carousel[data-v-c1018880] { position: absolute; inset: 0;
}
.slide[data-v-c1018880] { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 800ms ease-in-out; opacity: 0;
}
.slide-picture[data-v-c1018880], .slide-img[data-v-c1018880] { position: absolute; inset: 0; width: 100%; height: 100%;
}
.slide-img[data-v-c1018880] { object-fit: cover; display: block;
}
.overlay[data-v-c1018880] { position: absolute; inset: 0; padding: 28px; display: grid; grid-template-rows: auto 1fr auto; color: #fff;
}
.overlay[data-v-c1018880]::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 0% 0%, rgba(30,30,30,0.75) 0%, rgba(30,30,30,0) 60%);
pointer-events: none;
z-index: 0;
}
.overlay[data-v-c1018880]::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(30,30,30,1) 0%, rgba(30,30,30,0) 50%);
pointer-events: none;
z-index: 0;
}
.overlay[data-v-c1018880] > * { position: relative; z-index: 1;
}
.top[data-v-c1018880] { display: grid; grid-template-columns: 1fr 1fr; align-items: start;
}
.title[data-v-c1018880] {
margin: 0;
max-width: 100%;
font-weight: 600;
font-size: 100px;
line-height: 0.9;
letter-spacing: -0.01em;
}
.dots[data-v-c1018880] { justify-self: end; display: flex; align-items: center; gap: 10px; padding: 0; margin: 0; list-style: none;
}
.dot[data-v-c1018880] { width: 12px; height: 12px; border-radius: 50%; background: #fff; opacity: 0.25; position: relative; transition: opacity 200ms ease, background-color 200ms ease, border-radius 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.dot.active[data-v-c1018880] { opacity: 1;
}
.dots .dot[data-v-c1018880] { cursor: pointer;
}
.hero.paused .dot.active[data-v-c1018880] { background: transparent; box-shadow: inset 0 0 0 2px #fff; transform: scale(1.2);
}
.bottom[data-v-c1018880] { display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; align-items: start; gap: 16px; margin-top: auto;
}
.subtitle[data-v-c1018880] {
margin: 0;
max-width: 100%;
color: rgba(255,255,255,0.75);
font-weight: 600;
font-size: 24px;
line-height: 1.1;
letter-spacing: -0.01em;
}
.fade-text-enter-active[data-v-c1018880], .fade-text-leave-active[data-v-c1018880] { transition: opacity 600ms ease, transform 600ms ease;
}
.fade-text-enter-from[data-v-c1018880], .fade-text-leave-to[data-v-c1018880] { opacity: 0; transform: translateX(-20px);
}
.fade-button-enter-active[data-v-c1018880], .fade-button-leave-active[data-v-c1018880] { transition: opacity 600ms ease, transform 600ms ease;
}
.fade-button-enter-from[data-v-c1018880], .fade-button-leave-to[data-v-c1018880] { opacity: 0; transform: scale(0.95);
}
.cta-wrapper[data-v-c1018880] { justify-self: start; align-self: start;
}
.cta-wrapper[data-v-c1018880] .ui-icon-block-btn { min-width: 0;
}
@media (max-aspect-ratio: 3/4) {
.hero[data-v-c1018880] { min-height: 560px;
}
.overlay[data-v-c1018880] { padding: 24px;
}
.title[data-v-c1018880] { font-size: 48px; max-width: 50%;
}
.subtitle[data-v-c1018880] { font-size: 20px;
}
}
@media (max-aspect-ratio: 2/3) {
.home-hero[data-v-c1018880] { margin-top: 0;
}
.hero[data-v-c1018880] { min-height: 468px; border-radius: 20px;
}
.overlay[data-v-c1018880] { padding: 16px;
}
.top[data-v-c1018880] { grid-template-columns: 1fr auto;
}
.title[data-v-c1018880] { font-size: 36px; max-width: 100%;
}
.dots[data-v-c1018880] { gap: 8px;
}
.bottom[data-v-c1018880] { grid-template-columns: 1fr; gap: 16px;
}
.subtitle[data-v-c1018880] { font-size: 18px;
}
.cta-wrapper[data-v-c1018880] { justify-self: stretch;
}
.cta-wrapper[data-v-c1018880] .ui-icon-block-btn { width: 100%;
}
.cta-wrapper[data-v-c1018880] .ui-icon-block-btn .label { white-space: nowrap;
}
.cta-wrapper[data-v-c1018880] .ui-icon-block-btn.size-lg { padding-left: 0; padding-right: 0;
}
}
@media (max-aspect-ratio: 3/4) {
.hero[data-v-c1018880] { min-height: 520px;
}
.overlay[data-v-c1018880] { padding: 20px;
}
.title[data-v-c1018880] { font-size: 40px; max-width: 60%;
}
.subtitle[data-v-c1018880] { font-size: 18px;
}
}
.home-features[data-v-7d786669] { margin-top: 0;
}
.features-grid[data-v-7d786669] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.features-left[data-v-7d786669], .features-right[data-v-7d786669] {
position: relative;
min-height: 495px;
border-radius: 28px;
overflow: hidden;
}
.info-panel[data-v-7d786669] { position: absolute; inset: 0; padding: 28px; border-radius: 20px; background: linear-gradient(to top right, #4A48E9 40%, #C3FC56 100%); color: #fff; display: grid; grid-template-rows: auto 1fr auto; gap: 16px; overflow: hidden;
}
.blob[data-v-7d786669] { position: absolute; opacity: 0.35; filter: blur(2px);
}
.blob.a[data-v-7d786669] { width: 60%; left: -10%; top: -10%; transform: rotate(-18deg);
}
.blob.b[data-v-7d786669] { width: 55%; right: -10%; bottom: -10%; transform: rotate(12deg) scaleX(-1);
}
.info-panel > .panel-header[data-v-7d786669], .info-panel > .panel-foot[data-v-7d786669] { position: relative; z-index: 2;
}
.panel-header h3[data-v-7d786669] { margin: 0; color: #fff; font-weight: 600; font-size: 64px; line-height: 0.9; letter-spacing: -0.01em;
}
.muted[data-v-7d786669] { color: rgba(255,255,255,0.75); margin: 20px 0 0; font-weight: 600; font-size: 26px; line-height: 1.1; letter-spacing: -0.01em;
}
.decor-coins[data-v-7d786669] {
position: absolute;
right: -180px;
bottom: -72px;
width: 720px;
transform: rotate(-15deg);
z-index: 1;
pointer-events: none;
filter: blur(0px);
opacity: 1;
transition: filter 200ms linear, opacity 200ms linear;
}
@media (min-aspect-ratio: 2/3) and (max-aspect-ratio: 1/1) {
.decor-coins[data-v-7d786669] {
filter: blur(calc(8px * (1 - var(--coins-t, 1))));
opacity: calc(0.6 + 0.3 * var(--coins-t, 1));
}
}
.decor-coins .coins-img[data-v-7d786669] { display: block; width: 100%; height: auto;
}
.tiles-panel[data-v-7d786669] { position: absolute; inset: 0; padding: 0; background: transparent; border-radius: 28px; display: grid;
}
.tiles[data-v-7d786669] { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 16px; align-content: stretch; justify-content: stretch; align-items: stretch; justify-items: stretch; width: 100%; height: 100%; align-self: stretch; justify-self: stretch;
}
.tile[data-v-7d786669] { position: relative; display: grid; grid-template-rows: auto 1fr auto; background: #fff; color: #1e1e1e; border-radius: 20px; padding: 20px; width: 100%; height: 100%;
}
.tile .icon[data-v-7d786669] { position: absolute; top: 20px; right: 20px; width: 16px; height: 16px; opacity: 0.9; z-index: 2;
}
.tile h4[data-v-7d786669] { margin: 0 0 8px; font-weight: 600; font-size: 24px; line-height: 1; letter-spacing: -0.02em; align-self: start; justify-self: start;
}
.tile p[data-v-7d786669] { margin: 0; color: rgba(30,30,30,0.9); font-weight: 500; font-size: 18px; line-height: 1.1; letter-spacing: -0.01em; align-self: end; justify-self: start;
}
.panel-foot[data-v-7d786669] { align-self: end; margin: 0; color: rgba(255,255,255,0.75); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em;
}
.tile-good[data-v-7d786669] { background: #C3FD56; overflow: hidden;
}
.tile-good[data-v-7d786669]::before { content: ""; position: absolute; background-image: var(--v4aadc5cc); background-size: contain; background-repeat: no-repeat; transform: rotate(15deg); z-index: 0; pointer-events: none;
width: 260px;
height: 260px;
right: -35px;
bottom: -35px;
}
.tile-good[data-v-7d786669]::after { border-radius: 0px 0px 20px 20px; content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(180deg, rgba(195, 253, 86, 0.00) 0%, rgba(195, 253, 86, 0.75) 50%, rgba(195, 253, 86, 0.75) 100%);
backdrop-filter: blur(3.75px); -webkit-backdrop-filter: blur(3.75px); z-index: 1; pointer-events: none;
-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,.75) 50%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,.75) 50%, rgba(0,0,0,0) 100%);
}
.tile-good h4[data-v-7d786669], .tile-good p[data-v-7d786669] { position: relative; z-index: 2;
}
@media (max-aspect-ratio: 3/4) {
.tile-good[data-v-7d786669]::before {
width: 200px;
height: 200px;
}
.home-features[data-v-7d786669] { margin-top: 0;
}
.features-left[data-v-7d786669], .features-right[data-v-7d786669] { min-height: 400px;
}
.info-panel[data-v-7d786669], .tiles-panel[data-v-7d786669] { position: relative; inset: auto; min-height: 400px; border-radius: 20px;
}
.panel-header h3[data-v-7d786669] { font-size: 48px;
}
.muted[data-v-7d786669], .panel-foot[data-v-7d786669] { font-size: 24px;
}
.tiles[data-v-7d786669] { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr;
}
.tile[data-v-7d786669] { width: auto; height: auto; padding: 16px;
}
}
@media (max-aspect-ratio: 2/3) {
.tile-good[data-v-7d786669]::before {
width: 170px;
height: 170px;
}
.home-features[data-v-7d786669] { margin-top: 0;
}
.features-left[data-v-7d786669], .features-right[data-v-7d786669] { min-height: 468px; border-radius: 20px;
}
.info-panel[data-v-7d786669], .tiles-panel[data-v-7d786669] { padding: 16px; gap: 12px; min-height: 592px;
}
.tiles-panel--mobile[data-v-7d786669] { position: static; padding: 0; min-height: auto; border-radius: 0;
}
.panel-header h3[data-v-7d786669] { font-size: 36px;
}
.muted[data-v-7d786669] { font-size: 20px; font-weight: 400;
}
.decor-coins[data-v-7d786669] { width: 60%; right: -10px; bottom: -10px;
}
.tiles[data-v-7d786669] { grid-template-columns: 1fr 1fr; grid-auto-rows: 156px; gap: 4px;
}
.tile[data-v-7d786669] { padding: 12px; overflow: hidden;
}
.tile .icon[data-v-7d786669] { top: 12px; right: 12px; width: 12px; height: 12px;
}
.tile h4[data-v-7d786669] { font-size: 18px;
}
.tile p[data-v-7d786669] { font-size: 14px;
}
.panel-foot[data-v-7d786669] { font-size: 14px;
}
.decor-coins[data-v-7d786669] { display: none;
}
.info-panel[data-v-7d786669]::before {
content: "";
position: absolute;
top: -90px;
right: -200px;
width: 450px;
height: 450px;
background-image: var(--v2bc22d2f);
background-size: contain;
background-repeat: no-repeat;
transform: rotate(-55deg);
z-index: 1;
pointer-events: none;
}
}
@media (max-aspect-ratio: 3/4) {
.features-grid[data-v-7d786669] { grid-template-columns: 1fr;
}
.tiles[data-v-7d786669] { grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.tile[data-v-7d786669] { padding: 16px;
}
.tile h4[data-v-7d786669] { font-size: 20px;
}
.tile p[data-v-7d786669] { font-size: 14px;
}
}
.panel[data-v-5b345cd0] {
position: relative;
background: var(--color-primary);
border-radius: 20px;
padding: 28px;
min-height: 616px;
color: #fff;
overflow: hidden;
display: grid;
grid-template-rows: auto auto auto;
row-gap: 0;
align-content: space-between;
/* full-cover background */
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
/* remove old decorative pseudo elements */
.header[data-v-5b345cd0] { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 16px; position: relative; z-index: 3;
}
.title[data-v-5b345cd0] { margin: 0; font-weight: 600; font-size: 64px; line-height: 0.9; letter-spacing: -0.01em;
}
.bang[data-v-5b345cd0] { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #fff; color: #1e1e1e; font-weight: 700; font-size: 18px; cursor: pointer; user-select: none; -webkit-user-select: none; -ms-user-select: none;
}
.bang-wrapper[data-v-5b345cd0] { position: relative;
}
/* Bang modal */
.bang-modal[data-v-5b345cd0] { position: absolute; right: 0; top: 0; z-index: 9999; background: rgba(255,255,255,0.75); border: 2px solid #fff; border-radius: 16px; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); width: 370px; max-width: min(370px, 90vw);
}
.bang-modal-head[data-v-5b345cd0] { display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.bang-lead[data-v-5b345cd0] { display: flex; align-items: center; gap: 12px;
}
.bang-lead-icon[data-v-5b345cd0] { width: 48px; height: 48px; border-radius: 8px; display: block; object-fit: cover;
}
.bang-lead-title[data-v-5b345cd0] { margin: 0; font-weight: 600; font-size: 18px; line-height: 1.1; color: #1e1e1e; letter-spacing: -0.01em;
}
.bang-modal-close[data-v-5b345cd0] { width: 24px; height: 24px; padding: 7px; border-radius: 8px; background: #1e1e1e; color: #fff; border: none; display: grid; place-items: center; cursor: pointer; line-height: 1; position: absolute; top: 12px; right: 12px;
}
.bang-modal-close img[data-v-5b345cd0] { width: 100%; height: 100%; display: block;
}
.bang-modal-body[data-v-5b345cd0] { margin-top: 12px;
}
.bang-modal-body p[data-v-5b345cd0] { margin: 0; font-weight: 500; font-size: 16px; line-height: 1.2; color: rgba(30,30,30,0.9); letter-spacing: -0.01em;
}
.bang-pop-enter-active[data-v-5b345cd0],
.bang-pop-leave-active[data-v-5b345cd0] { transition: opacity 300ms cubic-bezier(0.2, 0.6, 0.2, 1)
}
.bang-pop-enter-from[data-v-5b345cd0],
.bang-pop-leave-to[data-v-5b345cd0] { opacity: 0;
}
.bang-pop-enter-to[data-v-5b345cd0],
.bang-pop-leave-from[data-v-5b345cd0] { opacity: 1;
}
.cards[data-v-5b345cd0] {
list-style: none;
padding: 0;
margin: 0;
margin-left: -512px;
padding-left: 512px;
margin-right: -512px;
padding-right: 512px;
padding-bottom: 32px;
padding-top: 32px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
gap: 24px; position:
relative; z-index: 2;
justify-content: stretch;
justify-items: stretch;
align-items: stretch;
}
.glass[data-v-5b345cd0] { background: rgba(30,30,30,0.4); color: #fff; border-radius: 24px; padding: 25px; min-height: 219px; backdrop-filter: blur(80px); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; text-align: left; gap: 50px; position: relative; height: 100%;
}
.glass h3[data-v-5b345cd0] { margin: 0 0 10px; font-weight: 600; font-size: 26px; line-height: 1; letter-spacing: -0.01em;
}
.glass p[data-v-5b345cd0] { margin: 0; color: rgba(255,255,255,1); font-weight: 300; font-size: 20px; line-height: 1.2; letter-spacing: -0.03em;
}
/* Alternate slight rotation for cards */
.cards .glass[data-v-5b345cd0]:nth-child(odd) { transform: rotate(-3deg);
}
.cards .glass[data-v-5b345cd0]:nth-child(even) { transform: rotate(3deg);
}
.glass[data-v-5b345cd0]::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
background: linear-gradient(45deg, rgba(255,255,255,0.5) 0%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.5) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude; pointer-events: none; z-index: 0;
}
.card-icon[data-v-5b345cd0] { position: absolute; top: 25px; right: 25px; width: 28px; height: 28px; display: block; z-index: 1;
}
.fade[data-v-5b345cd0] { position: absolute; left: 0; right: 0; bottom: 0; height: 202px; background: linear-gradient(to bottom, rgba(74,72,233,0) 0%, #4a48e9 100%); pointer-events: none; z-index: 1;
}
.cta-bar[data-v-5b345cd0] { position: relative; z-index: 2;
}
.cta-bar[data-v-5b345cd0] .ui-icon-block-btn { width: 100%; height: 100%; border-radius: 12px; box-shadow: 0 4px 4px rgba(164,213,73,0.3), inset 0 -3px 4px rgba(167,218,72,0.4), inset 0 0 7px #ade04e;
}
.cta-bar[data-v-5b345cd0] .ui-icon-block-btn.size-lg { padding-left: 0; padding-right: 0;
}
/* Tablet (portrait/square only) */
@media (max-aspect-ratio: 3/4) {
.panel[data-v-5b345cd0]::before,
.panel[data-v-5b345cd0]::after {
display: none;
}
.fade[data-v-5b345cd0] { display: none;
}
.panel[data-v-5b345cd0] { min-height: 560px;
}
.title[data-v-5b345cd0] { font-size: 48px;
}
.cards[data-v-5b345cd0] { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 24px; justify-content: stretch;
}
.glass[data-v-5b345cd0] { min-height: 200px;
}
}
/* Mobile (portrait/square only) */
@media (max-aspect-ratio: 2/3) {
.panel[data-v-5b345cd0]::before,
.panel[data-v-5b345cd0]::after {
display: none;
}
.fade[data-v-5b345cd0] { display: none;
}
.panel[data-v-5b345cd0] { padding: 16px; min-height: auto; background-image: none;
}
.header[data-v-5b345cd0] { gap: 12px;
}
.title[data-v-5b345cd0] { font-size: 36px;
}
.bang[data-v-5b345cd0] { width: 28px; height: 28px; font-size: 16px;
}
.cards[data-v-5b345cd0] { margin-left: -512px; padding-left: 512px; margin-right: -512px; padding-right: 512px; display: grid; grid-auto-flow: column; grid-template-columns: none; gap: 24px; overflow-x: auto; padding-bottom: 32px; padding-top: 32px; justify-content: start;
}
/* hide scrollbars while keeping horizontal scroll */
.cards[data-v-5b345cd0] { scrollbar-width: none; -ms-overflow-style: none;
}
.cards[data-v-5b345cd0]::-webkit-scrollbar { display: none; width: 0; height: 0;
}
.glass[data-v-5b345cd0] { width: 310px; min-height: 200px; height: auto; transform: none; scroll-snap-align: start; padding: 16px; border-radius: 16px;
}
.glass h3[data-v-5b345cd0] { font-size: 24px;
}
.glass p[data-v-5b345cd0] { font-size: 14px;
}
.card-icon[data-v-5b345cd0] { width: 24px; height: 24px; top: 16px; right: 16px;
}
.cta-bar[data-v-5b345cd0] { position: relative; padding: 0; margin: 0; height: auto;
}
}
/* Medium (≤900px) tuning (portrait/square only) */
@media (max-aspect-ratio: 3/4) {
.panel[data-v-5b345cd0] { min-height: 520px; padding: 24px;
}
.title[data-v-5b345cd0] { font-size: 40px;
}
.cards[data-v-5b345cd0] { grid-template-columns: repeat(2, 1fr); gap: 20px;
}
.glass[data-v-5b345cd0] { padding: 20px; min-height: 180px;
}
.glass h3[data-v-5b345cd0] { font-size: 24px;
}
.glass p[data-v-5b345cd0] { font-size: 16px;
}
.bang-modal[data-v-5b345cd0] { width: 320px; max-width: min(320px, 90vw);
}
}
/* ≥1920px: fixed card width (portrait/square only) */
@media (min-aspect-ratio: 1/1) {
.cards[data-v-5b345cd0] { grid-template-columns: repeat(4, 429px); justify-content: space-between; gap: 0;
}
.glass[data-v-5b345cd0] { width: 429px;
}
}
/* Mid portrait range: fixed width + horizontal scroll (portrait/square only) */
@media (min-aspect-ratio: 2/3) and (max-aspect-ratio: 1/1) {
.cards[data-v-5b345cd0] {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 429px;
grid-template-columns: none;
gap: 24px;
overflow-x: auto; /* only horizontal scrolling */
overflow-y: visible; /* avoid clipping rotated cards */
justify-content: start;
/* hide scrollbars cross-browser */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
.cards[data-v-5b345cd0]::-webkit-scrollbar { display: none; width: 0; height: 0;
} /* WebKit */
.glass[data-v-5b345cd0] { width: 429px;
}
}
section.stickers-intro[data-v-bb0a0edc] { display: grid; gap: 40px;
}
.heading[data-v-bb0a0edc] { margin: 0; font-weight: 600; font-size: 64px; line-height: 0.9; letter-spacing: -0.01em; color: var(--color-primary);
}
.cards[data-v-bb0a0edc] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.card[data-v-bb0a0edc] { background: #fff; border-radius: 24px; padding: 20px; display: grid; grid-template-rows: auto 1fr auto; min-height: 200px;
}
.card-head[data-v-bb0a0edc] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.card-head-text[data-v-bb0a0edc] { display: grid; gap: 20px;
}
.title[data-v-bb0a0edc] { margin: 0; font-weight: 600; font-size: 26px; line-height: 1.1; letter-spacing: -0.01em; color: #1e1e1e;
}
.accent[data-v-bb0a0edc] { color: #1e1e1e;
}
.accent.is-purple[data-v-bb0a0edc] { color: #4a48e9;
}
.accent.is-green[data-v-bb0a0edc] { color: #74b200;
}
.accent.is-orange[data-v-bb0a0edc] { color: #ff8800;
}
.card-foot[data-v-bb0a0edc] { align-self: end; padding-top: 24px;}
.desc[data-v-bb0a0edc] { margin: 0; font-weight: 500; font-size: 20px; line-height: 1.2; color: #8e8e8e; letter-spacing: -0.01em;
}
.foot[data-v-bb0a0edc] { margin: 0; font-weight: 500; font-size: 20px; line-height: 1.2; color: #1e1e1e; letter-spacing: -0.01em;
}
/* Thumbnail with color tint overlay */
.thumb[data-v-bb0a0edc] { position: relative; width: 120px; height: 120px; border-radius: 12px; overflow: hidden; flex: 0 0 auto;
}
.thumb-img[data-v-bb0a0edc] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
/* CTA bar using shared button */
.cta-bar[data-v-bb0a0edc] { position: relative;
}
.cta-bar[data-v-bb0a0edc] .ui-icon-block-btn { width: 100%; border-radius: 12px; box-shadow: 0 4px 4px rgba(164,213,73,0.3), inset 0 -3px 4px rgba(167,218,72,0.4), inset 0 0 7px #ade04e;
}
@media (max-aspect-ratio: 1/1) {
.cards[data-v-bb0a0edc] { grid-template-columns: 1fr;
}
.desc[data-v-bb0a0edc] { max-width: 600px;
}
}
/* Tablet (apply to all portrait <1) */
@media (max-aspect-ratio: 1/1) {
.heading[data-v-bb0a0edc] { font-size: 48px;
}
}
/* Medium (≤900px) */
@media (max-aspect-ratio: 1/1) {
.heading[data-v-bb0a0edc] { font-size: 40px;
}
.card[data-v-bb0a0edc] { padding: 18px; width: 100%;
}
.desc[data-v-bb0a0edc], .foot[data-v-bb0a0edc] { font-size: 18px;
}
.thumb[data-v-bb0a0edc] { width: 108px; height: 108px;
}
}
/* Mobile */
@media (max-aspect-ratio: 2/3) {
section.stickers-intro[data-v-bb0a0edc] { gap: 16px;
}
.heading[data-v-bb0a0edc] { font-size: 36px; letter-spacing: -0.02em;
}
.cards[data-v-bb0a0edc] { grid-template-columns: 1fr; gap: 12px;
}
.card[data-v-bb0a0edc] { padding: 16px; border-radius: 16px; gap: 16px;
}
.title[data-v-bb0a0edc] { font-size: 24px;
}
.desc[data-v-bb0a0edc], .foot[data-v-bb0a0edc] { font-size: 16px;
}
.thumb[data-v-bb0a0edc] { width: 96px; height: 96px; border-radius: 10px;
}
.cta-bar[data-v-bb0a0edc] { height: 56px;
}
.cta-bar strong[data-v-bb0a0edc] { font-size: 20px;
}
.card-head-text[data-v-bb0a0edc] { gap: 12px;
}
.card[data-v-bb0a0edc] { gap: 0;
}
}
.bonuses-hero[data-v-34810e1e] {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.hero-visual[data-v-34810e1e] {
position: relative;
height: 945px;
overflow: visible;
}
.hero-img[data-v-34810e1e] {
position: absolute;
left: 50%;
top: -73px;
width: 105%;
height: 110%;
object-fit: cover;
max-width: none;
transform: translateX(-50%);
background-color: lightgray;
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
mask-image: linear-gradient(180deg, black 50%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, black 50%, transparent 100%);
}
.badge-group[data-v-34810e1e] {
position: absolute;
left: 50%;
top: 590px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
z-index: 2;
}
.badge[data-v-34810e1e] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.4em 0.64em;
border-radius: 1.89em;
font-family: 'Onest', sans-serif;
font-weight: 900;
font-size: 100px;
line-height: 0.8;
letter-spacing: -0.05em;
text-transform: uppercase;
white-space: nowrap;
}
.badge-green[data-v-34810e1e] {
background: #C3FD56;
color: #1E1E1E;
transform: rotate(-15deg) translateX(-25%) translateY(-70%);
z-index: 3;
margin-bottom: -1em;
}
.badge-white[data-v-34810e1e] {
background: #fff;
color: #1E1E1E;
gap: 0.32em;
transform: translateX(25%);
}
.badge-icon[data-v-34810e1e] {
width: 0.37em;
height: 0.37em;
flex-shrink: 0;
object-fit: contain;
}
.badge-icon--hero[data-v-34810e1e] {
width: 0.8em;
height: 0.8em;
}
/* Step Cards */
.step-cards[data-v-34810e1e] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
position: relative;
z-index: 1;
width: 100%;
}
.step-card[data-v-34810e1e] {
background: #fff;
border-radius: 28px;
padding: 28px;
height: 198px;
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
}
.step-card-accent[data-v-34810e1e] {
background: #C3FD56;
box-shadow: 0 0 40px #C3FD56;
position: relative;
overflow: hidden;
}
.step-card-stickers[data-v-34810e1e] {
position: relative;
}
.step-card-stickers .step-header[data-v-34810e1e] {
position: relative;
overflow: visible;
}
.step-header[data-v-34810e1e] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 4px;
width: 100%;
position: relative;
z-index: 1;
}
.step-title[data-v-34810e1e] {
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 36px;
line-height: 1;
letter-spacing: -0.72px;
color: #1E1E1E;
margin: 0;
flex: 1;
}
.step-title-with-icon[data-v-34810e1e] {
display: inline-flex;
align-items: center;
gap: 8px;
}
.step-stickers-image[data-v-34810e1e] {
height: 40px;
width: auto;
transform: scale(1.4);
transform-origin: left center;
}
.step-icon[data-v-34810e1e] {
width: 37px;
height: 37px;
flex-shrink: 0;
object-fit: contain;
}
.step-footer[data-v-34810e1e] {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 12px;
width: 100%;
position: relative;
z-index: 1;
}
.step-desc[data-v-34810e1e] {
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 24px;
line-height: 1.33;
color: rgba(30, 30, 30, 0.9);
margin: 0;
flex: 1;
}
.step-arrow[data-v-34810e1e] {
width: 20px;
height: 20px;
flex-shrink: 0;
object-fit: contain;
transform: rotate(45deg);
}
.step-live-icon[data-v-34810e1e] {
position: absolute;
right: -81.937px;
bottom: -74.938px;
width: 235.045px;
height: 235.045px;
z-index: 0;
object-fit: contain;
transform: rotate(2.465deg);
}
/* Responsive */
@media (max-aspect-ratio: 1/1) {
.hero-visual[data-v-34810e1e] {
height: 700px;
}
.hero-img[data-v-34810e1e] {
left: 50%;
transform: translateX(-50%);
width: 1200px;
height: 800px;
top: -50px;
}
.badge-group[data-v-34810e1e] {
top: 500px;
}
.badge[data-v-34810e1e] {
font-size: 64px;
}
.step-cards[data-v-34810e1e] {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.step-card[data-v-34810e1e] {
height: 180px;
}
.step-title[data-v-34810e1e] {
font-size: 30px;
}
.step-desc[data-v-34810e1e] {
font-size: 20px;
}
}
@media (max-aspect-ratio: 3/4) {
.hero-visual[data-v-34810e1e] {
height: 500px;
}
.hero-img[data-v-34810e1e] {
left: 50%;
top: -40px;
width: 600px;
height: 600px;
transform: translateX(-50%);
}
.badge-group[data-v-34810e1e] {
top: 380px;
}
.badge[data-v-34810e1e] {
font-size: 48px;
}
.step-cards[data-v-34810e1e] {
grid-template-columns: 1fr;
gap: 12px;
}
.step-card[data-v-34810e1e] {
min-height: 150px;
padding: 20px;
border-radius: 16px;
}
.step-title[data-v-34810e1e] {
font-size: 28px;
line-height: 32px;
}
.step-desc[data-v-34810e1e] {
font-size: 18px;
line-height: 22px;
}
.step-icon[data-v-34810e1e] {
width: 32px;
height: 32px;
}
.step-live-icon[data-v-34810e1e] {
width: 160px;
height: 160px;
right: -30px;
bottom: -20px;
}
.step-arrow[data-v-34810e1e] {
transform: rotate(135deg);
}
}
@media (max-aspect-ratio: 2/3) {
.bonuses-hero[data-v-34810e1e] {
gap: 16px;
}
.hero-visual[data-v-34810e1e] {
height: 383px;
width: 100%;
}
.hero-img[data-v-34810e1e] {
left: 50%;
top: -51px;
width: 110%;
height: 486px;
transform: translateX(-50%);
background-size: cover;
background-position: center;
}
.badge-group[data-v-34810e1e] {
top: 280px;
}
.badge[data-v-34810e1e] {
font-size: 32px;
}
/* Step Cards Mobile */
.step-cards[data-v-34810e1e] {
grid-template-columns: 1fr;
gap: 16px;
width: 100%;
}
.step-card[data-v-34810e1e] {
height: 130px;
min-height: unset;
padding: 16px;
border-radius: 12px;
}
.step-card-stickers .step-stickers-image[data-v-34810e1e] {
transform: scale(1);
height: 30px;
}
.step-title[data-v-34810e1e] {
font-size: 26px;
line-height: 30px;
letter-spacing: -0.52px;
}
.step-desc[data-v-34810e1e] {
font-size: 16px;
line-height: 20px;
}
.step-icon[data-v-34810e1e] {
width: 27px;
height: 27px;
}
.step-arrow[data-v-34810e1e] {
width: 14px;
height: 14px;
transform: rotate(135deg);
}
.step-live-icon[data-v-34810e1e] {
width: 148px;
height: 148px;
right: -50px;
bottom: auto;
top: -30px;
}
.step-card-accent[data-v-34810e1e] {
overflow: hidden;
}
.step-card-accent .step-title[data-v-34810e1e] {
max-width: 284px;
}
}
.monthly-section[data-v-6479bbcc] {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 64px;
}
.section-title[data-v-6479bbcc] {
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 100px;
line-height: 1;
margin: 0;
color: #fff;
}
/* Main Prize */
.main-prize[data-v-6479bbcc] {
position: relative;
background: linear-gradient(90deg, #C3FD56 0%, #C3FD56 100%);
border-radius: 28px;
padding: 28px;
min-height: 690px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.main-prize-content[data-v-6479bbcc] {
display: flex;
flex-direction: column;
gap: 48px;
position: relative;
z-index: 1;
}
.main-prize-header[data-v-6479bbcc] {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.main-prize-title[data-v-6479bbcc] {
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 100px;
line-height: 1;
letter-spacing: -2px;
color: #1E1E1E;
margin: 0;
}
.prize-badge[data-v-6479bbcc] {
width: 37px;
height: 37px;
flex-shrink: 0;
object-fit: contain;
}
.main-prize-desc[data-v-6479bbcc] {
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 36px;
line-height: 1.2;
color: rgba(30, 30, 30, 0.9);
margin: 0;
max-width: 372px;
}
.main-prize-visual[data-v-6479bbcc] {
position: absolute;
right: -241px;
top: -10px;
width: 1821px;
height: 700px;
max-width: none;
overflow: hidden;
}
.main-prize-visual[data-v-6479bbcc]::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(270deg, rgba(195, 253, 86, 0) 87.01%, #C3FD56 99.73%);
pointer-events: none;
}
.main-prize-img[data-v-6479bbcc] {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
[data-v-6479bbcc] .main-prize-btn {
position: relative;
z-index: 1;
width: 425px;
height: 67px;
border-radius: 12px;
font-family: 'Onest', sans-serif;
font-weight: 700;
font-size: 26px;
line-height: 32px;
background: #1E1E1E;
color: #fff;
}
[data-v-6479bbcc] .main-prize-btn .label {
color: #fff;
font-size: 26px !important;
line-height: 32px;
}
/* Prize grid — Figma 148:2043 */
.prize-grid[data-v-6479bbcc] {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 24px;
}
.prize-card[data-v-6479bbcc] {
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
min-height: 501px;
padding: 24px;
border-radius: 24px;
overflow: hidden;
}
.prize-card--lead[data-v-6479bbcc] {
box-shadow:
0 163px 46px rgba(13, 11, 142, 0),
0 104px 42px rgba(13, 11, 142, 0.01),
0 59px 35px rgba(13, 11, 142, 0.05),
0 26px 26px rgba(13, 11, 142, 0.09),
0 7px 14px rgba(13, 11, 142, 0.1);
}
.prize-card-bg[data-v-6479bbcc] {
position: absolute;
inset: 0;
pointer-events: none;
}
.prize-card-bg-gradient[data-v-6479bbcc] {
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, #fff 0%, #e3ffae 100%);
}
.prize-card-img-wrap[data-v-6479bbcc] {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: inherit;
}
.prize-card-img[data-v-6479bbcc] {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%) translateY(0);
width: 95%;
max-width: none;
height: 72%;
object-fit: contain;
object-position: center bottom;
transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}
@media (hover: hover) and (pointer: fine) {
.prize-card:hover .prize-card-img[data-v-6479bbcc] {
transform: translateX(-50%) translateY(-12px);
}
}
@media (prefers-reduced-motion: reduce) {
.prize-card-img[data-v-6479bbcc] {
transition: none;
}
}
.prize-card-fade[data-v-6479bbcc] {
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
181.5deg,
rgba(195, 253, 86, 0) 72%,
#c3fd56 94.5%
);
pointer-events: none;
}
.prize-card-head[data-v-6479bbcc] {
position: relative;
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
width: 100%;
flex-shrink: 0;
}
.prize-name[data-v-6479bbcc] {
flex: 1;
min-width: 0;
max-width: calc(100% - 50px);
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 28px;
line-height: 1;
letter-spacing: -0.64px;
font-feature-settings: 'lnum' 1, 'pnum' 1;
color: #1e1e1e;
margin: 0;
text-align: left;
align-self: flex-start;
}
.prize-count[data-v-6479bbcc] {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 16px;
box-sizing: border-box;
background: #4846e7;
color: #fff;
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 1;
letter-spacing: -0.2px;
text-transform: uppercase;
border-radius: 52px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.prize-spec-bar[data-v-6479bbcc] {
position: relative;
z-index: 2;
width: 100%;
margin-top: auto;
padding: 12px 14px;
border-radius: 12px;
background: #4a48e9;
box-sizing: border-box;
flex-shrink: 0;
}
.prize-spec[data-v-6479bbcc] {
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 17px;
line-height: 1.25;
letter-spacing: -0.17px;
text-align: center;
text-transform: uppercase;
color: #fff;
margin: 0;
}
/* Responsive */
@media (max-aspect-ratio: 1/1) {
.main-prize-visual[data-v-6479bbcc] {
right: auto;
}
.section-title[data-v-6479bbcc] {
font-size: 72px;
}
.main-prize-title[data-v-6479bbcc] {
font-size: 72px;
}
.main-prize-desc[data-v-6479bbcc] {
font-size: 28px;
}
.prize-grid[data-v-6479bbcc] {
grid-template-columns: 1fr;
gap: 12px;
}
/* Figma 154:2205 — компактная строка, картинка справа, без синей плашки */
.prize-card[data-v-6479bbcc] {
min-height: 180px;
height: 180px;
padding: 16px 178px 16px 16px;
border-radius: 12px;
justify-content: space-between;
background: linear-gradient(269.88deg, #fff 0%, #c3fd56 99.98%);
box-shadow:
0 163px 46px rgba(13, 11, 142, 0),
0 104px 42px rgba(13, 11, 142, 0.01),
0 59px 35px rgba(13, 11, 142, 0.05),
0 26px 26px rgba(13, 11, 142, 0.09),
0 7px 14px rgba(13, 11, 142, 0.1);
}
.prize-card--lead[data-v-6479bbcc] {
box-shadow:
0 163px 46px rgba(13, 11, 142, 0),
0 104px 42px rgba(13, 11, 142, 0.01),
0 59px 35px rgba(13, 11, 142, 0.05),
0 26px 26px rgba(13, 11, 142, 0.09),
0 7px 14px rgba(13, 11, 142, 0.1);
}
.prize-card-bg-gradient[data-v-6479bbcc],
.prize-card-fade[data-v-6479bbcc] {
display: none;
}
.prize-card-img-wrap[data-v-6479bbcc] {
position: absolute;
right: 6px;
top: 12px;
left: auto;
bottom: auto;
width: 168px;
height: 168px;
overflow: hidden;
border-radius: 0;
}
.prize-card-img[data-v-6479bbcc] {
left: 50%;
top: 50%;
bottom: auto;
transform: translate(-50%, -50%);
width: 120%;
height: 120%;
max-width: none;
object-fit: contain;
object-position: center;
}
.prize-card-head[data-v-6479bbcc] {
position: static;
display: block;
width: 100%;
}
.prize-name[data-v-6479bbcc] {
font-size: 20px;
letter-spacing: -0.2px;
max-width: 100%;
padding-right: 44px;
}
.prize-count[data-v-6479bbcc] {
position: absolute;
top: 16px;
right: 16px;
z-index: 4;
min-width: 32px;
height: 32px;
font-size: 14px;
line-height: 1;
letter-spacing: -0.14px;
padding: 0 8px;
}
.prize-spec-bar[data-v-6479bbcc] {
margin-top: 0;
padding: 0;
width: 100%;
max-width: 100%;
align-self: flex-start;
background: transparent;
border-radius: 0;
}
.prize-spec[data-v-6479bbcc] {
font-size: 14px;
line-height: 1.2;
letter-spacing: -0.14px;
font-weight: 500;
text-align: left;
text-transform: none;
color: rgba(30, 30, 30, 0.9);
}
@media (hover: hover) and (pointer: fine) {
.prize-card:hover .prize-card-img[data-v-6479bbcc] {
transform: translate(-50%, -50%) translateY(-6px);
}
}
}
@media (max-aspect-ratio: 3/4) {
.monthly-section[data-v-6479bbcc] {
gap: 40px;
}
.section-title[data-v-6479bbcc] {
font-size: 48px;
}
.main-prize[data-v-6479bbcc] {
min-height: 480px;
padding: 24px;
border-radius: 20px;
}
.main-prize-title[data-v-6479bbcc] {
font-size: 56px;
}
.main-prize-desc[data-v-6479bbcc] {
font-size: 24px;
}
.main-prize-visual[data-v-6479bbcc] {
position: absolute;
right: -400px;
top: 50%;
transform: translateY(-50%);
width: 808px;
height: 311px;
}
.main-prize-img[data-v-6479bbcc] {
width: 100%;
height: 100%;
}
[data-v-6479bbcc] .main-prize-btn {
width: 100%;
height: 60px;
font-size: 22px;
}
[data-v-6479bbcc] .main-prize-btn .label {
font-size: 22px !important;
}
.prize-grid[data-v-6479bbcc] {
grid-template-columns: 1fr;
gap: 12px;
}
.prize-card[data-v-6479bbcc] {
min-height: 180px;
height: 180px;
padding: 16px 178px 16px 16px;
border-radius: 12px;
justify-content: space-between;
background: linear-gradient(269.88deg, #fff 0%, #c3fd56 99.98%);
box-shadow:
0 163px 46px rgba(13, 11, 142, 0),
0 104px 42px rgba(13, 11, 142, 0.01),
0 59px 35px rgba(13, 11, 142, 0.05),
0 26px 26px rgba(13, 11, 142, 0.09),
0 7px 14px rgba(13, 11, 142, 0.1);
}
.prize-card--lead[data-v-6479bbcc] {
box-shadow:
0 163px 46px rgba(13, 11, 142, 0),
0 104px 42px rgba(13, 11, 142, 0.01),
0 59px 35px rgba(13, 11, 142, 0.05),
0 26px 26px rgba(13, 11, 142, 0.09),
0 7px 14px rgba(13, 11, 142, 0.1);
}
.prize-card-bg-gradient[data-v-6479bbcc],
.prize-card-fade[data-v-6479bbcc] {
display: none;
}
.prize-card-img-wrap[data-v-6479bbcc] {
position: absolute;
right: 6px;
top: 12px;
left: auto;
bottom: auto;
width: 168px;
height: 168px;
overflow: hidden;
border-radius: 0;
}
.prize-card-img[data-v-6479bbcc] {
left: 50%;
top: 50%;
bottom: auto;
transform: translate(-50%, -50%);
width: 120%;
height: 120%;
max-width: none;
object-fit: contain;
object-position: center;
}
.prize-card-head[data-v-6479bbcc] {
position: static;
display: block;
width: 100%;
}
.prize-name[data-v-6479bbcc] {
font-size: 20px;
letter-spacing: -0.2px;
max-width: 100%;
padding-right: 44px;
}
.prize-count[data-v-6479bbcc] {
position: absolute;
top: 16px;
right: 16px;
z-index: 4;
min-width: 32px;
height: 32px;
font-size: 14px;
line-height: 1;
letter-spacing: -0.14px;
padding: 0 8px;
}
.prize-spec-bar[data-v-6479bbcc] {
margin-top: 0;
padding: 0;
width: 100%;
max-width: 100%;
align-self: flex-start;
background: transparent;
border-radius: 0;
}
.prize-spec[data-v-6479bbcc] {
font-size: 14px;
line-height: 1.2;
letter-spacing: -0.14px;
font-weight: 500;
text-align: left;
text-transform: none;
color: rgba(30, 30, 30, 0.9);
}
@media (hover: hover) and (pointer: fine) {
.prize-card:hover .prize-card-img[data-v-6479bbcc] {
transform: translate(-50%, -50%) translateY(-6px);
}
}
.prize-badge[data-v-6479bbcc] {
width: 36px;
height: 36px;
}
}
@media (max-aspect-ratio: 2/3) {
.monthly-section[data-v-6479bbcc] {
gap: 8px;
padding-top: 32px;
}
.section-title[data-v-6479bbcc] {
font-size: 36px;
line-height: 36px;
letter-spacing: -0.72px;
padding: 0 16px;
}
.main-prize[data-v-6479bbcc] {
min-height: 468px;
padding: 20px 16px;
border-radius: 20px;
margin-top: 24px;
}
.main-prize-content[data-v-6479bbcc] {
gap: 20px;
}
.main-prize-title[data-v-6479bbcc] {
font-size: 36px;
line-height: 36px;
letter-spacing: -0.72px;
}
.main-prize-desc[data-v-6479bbcc] {
font-size: 20px;
line-height: 1.1;
letter-spacing: -0.2px;
max-width: 194px;
}
.main-prize-visual[data-v-6479bbcc] {
position: absolute;
right: -400px;
top: 50%;
transform: translateY(-50%);
width: 808px;
height: 311px;
}
.main-prize-visual[data-v-6479bbcc]::after {
background: linear-gradient(270deg, rgba(195, 253, 86, 0) 87.01%, #C3FD56 99.73%), linear-gradient(359deg, rgba(195, 253, 86, 0.00) 84.48%, #C3FD56 99.68%), linear-gradient(179deg, rgba(195, 253, 86, 0.00) 88.87%, #C3FD56 97.8%);
}
[data-v-6479bbcc] .main-prize-btn {
width: 100%;
height: 64px;
font-size: 20px;
}
[data-v-6479bbcc] .main-prize-btn .label {
font-size: 20px !important;
}
.prize-grid[data-v-6479bbcc] {
grid-template-columns: 1fr;
gap: 8px;
}
.prize-card[data-v-6479bbcc] {
min-height: 180px;
height: 180px;
padding: 16px 178px 16px 16px;
border-radius: 12px;
justify-content: space-between;
background: linear-gradient(269.88deg, #fff 0%, #c3fd56 99.98%);
box-shadow:
0 163px 46px rgba(13, 11, 142, 0),
0 104px 42px rgba(13, 11, 142, 0.01),
0 59px 35px rgba(13, 11, 142, 0.05),
0 26px 26px rgba(13, 11, 142, 0.09),
0 7px 14px rgba(13, 11, 142, 0.1);
}
.prize-card--lead[data-v-6479bbcc] {
box-shadow:
0 163px 46px rgba(13, 11, 142, 0),
0 104px 42px rgba(13, 11, 142, 0.01),
0 59px 35px rgba(13, 11, 142, 0.05),
0 26px 26px rgba(13, 11, 142, 0.09),
0 7px 14px rgba(13, 11, 142, 0.1);
}
.prize-card-bg-gradient[data-v-6479bbcc],
.prize-card-fade[data-v-6479bbcc] {
display: none;
}
.prize-card-img-wrap[data-v-6479bbcc] {
position: absolute;
right: 6px;
top: 12px;
left: auto;
bottom: auto;
width: 168px;
height: 168px;
overflow: hidden;
border-radius: 0;
}
.prize-card-img[data-v-6479bbcc] {
left: 50%;
top: 50%;
bottom: auto;
transform: translate(-50%, -50%);
width: 120%;
height: 120%;
max-width: none;
object-fit: contain;
object-position: center;
}
.prize-card-head[data-v-6479bbcc] {
position: static;
display: block;
width: 100%;
}
.prize-name[data-v-6479bbcc] {
font-size: 20px;
line-height: 1;
letter-spacing: -0.2px;
max-width: 100%;
padding-right: 44px;
}
.prize-count[data-v-6479bbcc] {
position: absolute;
top: 16px;
right: 16px;
z-index: 4;
min-width: 32px;
height: 32px;
font-size: 14px;
line-height: 1;
letter-spacing: -0.14px;
padding: 0 8px;
}
.prize-spec-bar[data-v-6479bbcc] {
margin-top: 0;
padding: 0;
width: 100%;
max-width: 100%;
align-self: flex-start;
background: transparent;
border-radius: 0;
}
.prize-spec[data-v-6479bbcc] {
font-size: 14px;
line-height: 1.2;
letter-spacing: -0.14px;
font-weight: 500;
text-align: left;
text-transform: none;
color: rgba(30, 30, 30, 0.9);
}
@media (hover: hover) and (pointer: fine) {
.prize-card:hover .prize-card-img[data-v-6479bbcc] {
transform: translate(-50%, -50%) translateY(-6px);
}
}
}
.mega-section[data-v-1548dbdb] {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 64px;
}
.section-title[data-v-1548dbdb] {
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 100px;
line-height: 1;
margin: 0;
color: #fff;
}
.mega-grid[data-v-1548dbdb] {
display: flex;
flex-direction: column;
gap: 24px;
}
.mega-row[data-v-1548dbdb] {
display: grid;
gap: 24px;
}
.mega-row.large[data-v-1548dbdb] {
grid-template-columns: repeat(3, 1fr);
}
.mega-row.small[data-v-1548dbdb] {
grid-template-columns: repeat(3, 1fr);
}
/* Тень как в Figma — оболочка для .mega-card и .mega-card-small (у них overflow: hidden) */
.mega-card-shell[data-v-1548dbdb] {
border-radius: 28px;
box-shadow:
0 163px 46px rgba(13, 11, 142, 0),
0 104px 42px rgba(13, 11, 142, 0.01),
0 59px 35px rgba(13, 11, 142, 0.05),
0 26px 26px rgba(13, 11, 142, 0.09),
0 7px 14px rgba(13, 11, 142, 0.1);
}
.mega-card[data-v-1548dbdb] {
position: relative;
height: 414px;
border-radius: 28px;
padding: 28px;
overflow: hidden;
background: linear-gradient(180deg, #C3FD56 0%, #fff 100%);
}
.mega-card--accent[data-v-1548dbdb] {
background:
radial-gradient(130.55% 128.49% at 40.09% 79.69%, #4a48e9 0%, #ced2ff 100%),
#4a48e9;
}
.mega-card--accent[data-v-1548dbdb]::after {
display: none;
}
.mega-card--accent .mega-name[data-v-1548dbdb] {
color: #fff;
}
.mega-card[data-v-1548dbdb]::after,
.mega-card-small[data-v-1548dbdb]::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(181deg, rgba(255, 255, 255, 0) 58.34%, #FFF 98.95%);
pointer-events: none;
}
.mega-card-header[data-v-1548dbdb] {
display: flex;
justify-content: space-between;
align-items: flex-start;
position: relative;
z-index: 1;
}
.mega-name[data-v-1548dbdb] {
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 28px;
line-height: 1;
letter-spacing: -0.28px;
color: #1E1E1E;
margin: 0;
}
.prize-badge[data-v-1548dbdb] {
width: 37px;
height: 37px;
flex-shrink: 0;
object-fit: contain;
}
.prize-count[data-v-1548dbdb] {
background: #4846E7;
color: #fff;
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 1.3;
letter-spacing: -0.2px;
width: 37px;
height: 37px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
padding: 0;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.mega-card-img[data-v-1548dbdb] {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
}
.mega-card-small[data-v-1548dbdb] {
position: relative;
height: 260px;
border-radius: 28px;
padding: 28px;
overflow: hidden;
background: linear-gradient(180deg, #C3FD56 0%, #fff 100%);
}
.mega-card-small-img[data-v-1548dbdb] {
position: absolute;
right: 47px;
top: 0;
width: 260px;
height: 260px;
overflow: hidden;
}
.mega-card-small-img img[data-v-1548dbdb] {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
[data-v-1548dbdb] .full-width {
width: 100%;
height: 64px;
border-radius: 12px;
background: #C3FD56;
color: #1E1E1E;
box-shadow: 0 4px 4px rgba(164, 213, 73, 0.3), inset 0 -3px 4px rgba(167, 218, 72, 0.4), inset 0 0 7px #ADE04E;
}
/* Responsive */
@media (max-aspect-ratio: 1/1) {
.mega-card-img[data-v-1548dbdb] {
width: auto;
}
.mega-row.large[data-v-1548dbdb],
.mega-row.small[data-v-1548dbdb] {
grid-template-columns: 1fr;
}
.section-title[data-v-1548dbdb] {
font-size: 72px;
}
}
@media (max-aspect-ratio: 3/4) {
.mega-section[data-v-1548dbdb] {
gap: 40px;
}
.section-title[data-v-1548dbdb] {
font-size: 48px;
}
.mega-row.large[data-v-1548dbdb],
.mega-row.small[data-v-1548dbdb] {
grid-template-columns: 1fr;
}
.mega-card-shell[data-v-1548dbdb] {
border-radius: 16px;
}
.mega-card[data-v-1548dbdb] {
height: 220px;
border-radius: 16px;
padding: 20px;
}
.mega-card-small[data-v-1548dbdb] {
height: 200px;
border-radius: 16px;
padding: 20px;
}
.mega-card-small-img[data-v-1548dbdb] {
right: 40px;
width: 200px;
height: 200px;
}
.mega-name[data-v-1548dbdb] {
font-size: 22px;
}
.prize-badge[data-v-1548dbdb] {
width: 36px;
height: 36px;
}
}
@media (max-aspect-ratio: 2/3) {
.mega-section[data-v-1548dbdb] {
gap: 32px;
padding-top: 32px;
}
.section-title[data-v-1548dbdb] {
font-size: 36px;
line-height: 36px;
letter-spacing: -0.72px;
padding: 0 16px;
}
.mega-grid[data-v-1548dbdb] {
gap: 8px;
}
.mega-row[data-v-1548dbdb] {
gap: 8px;
}
.mega-row.large[data-v-1548dbdb],
.mega-row.small[data-v-1548dbdb] {
grid-template-columns: 1fr;
}
.mega-card-shell[data-v-1548dbdb] {
border-radius: 12px;
}
.mega-card[data-v-1548dbdb] {
height: 180px;
border-radius: 12px;
padding: 16px;
}
.mega-card-img[data-v-1548dbdb] {
width: 65%;
height: auto;
object-position: right bottom;
}
.mega-card-small[data-v-1548dbdb] {
height: 180px;
border-radius: 12px;
padding: 16px;
}
.mega-card-small-img[data-v-1548dbdb] {
right: 32px;
width: 180px;
height: 180px;
}
.mega-name[data-v-1548dbdb] {
font-size: 20px;
line-height: 1;
letter-spacing: -0.2px;
}
.prize-badge[data-v-1548dbdb] {
width: 32px;
height: 32px;
}
[data-v-1548dbdb] .full-width {
height: 64px;
border-radius: 12px;
}
}
.winners-section[data-v-1555cfa0] {
display: flex;
flex-direction: column;
gap: 32px;
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.section-title[data-v-1555cfa0] {
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 64px;
line-height: 0.9;
letter-spacing: -0.64px;
margin: 0;
color: #4A48E9;
}
.winners-row[data-v-1555cfa0] {
position: relative;
display: grid;
gap: 24px;
}
.winners-grid[data-v-1555cfa0] {
display: flex;
gap: 24px;
}
.scroller-wrapper[data-v-1555cfa0] {
position: relative;
margin: 0;
min-width: 0;
}
.scroller-overlay[data-v-1555cfa0] {
position: absolute;
top: 0;
bottom: 0;
width: 20px;
pointer-events: none;
z-index: 2;
}
.scroller-overlay.left[data-v-1555cfa0] {
left: -1px;
background: linear-gradient(to right, var(--color-bg) 0%, rgba(235, 235, 235, 0) 100%);
}
.scroller-overlay.right[data-v-1555cfa0] {
right: -1px;
background: linear-gradient(to left, var(--color-bg) 0%, rgba(235, 235, 235, 0) 100%);
}
.scroller[data-v-1555cfa0] {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
}
.scroller[data-v-1555cfa0]::-webkit-scrollbar {
display: none;
}
.winner-card[data-v-1555cfa0] {
width: 363px;
height: 519px;
flex-shrink: 0;
display: flex;
flex-direction: column;
border-radius: 28px;
overflow: hidden;
position: relative;
}
.winner-image-wrapper[data-v-1555cfa0] {
flex: 1;
position: relative;
margin-bottom: -30px;
z-index: 0;
border-radius: 28px;
overflow: hidden;
}
.winner-bg[data-v-1555cfa0] {
width: 100%;
height: 100%;
object-fit: cover;
}
.gradient-overlay[data-v-1555cfa0] {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 54%, rgba(0, 0, 0, 0.8) 107%);
}
.winner-content[data-v-1555cfa0] {
height: 126px;
background: #f5f5f5;
border-radius: 28px;
padding: 20px;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.winner-author[data-v-1555cfa0] {
display: flex;
align-items: center;
gap: 10px;
}
.winner-icon[data-v-1555cfa0] {
width: 27px;
height: 27px;
flex-shrink: 0;
object-fit: contain;
}
.winner-name[data-v-1555cfa0] {
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 20px;
line-height: 0.9;
letter-spacing: -0.6px;
color: #1E1E1E;
}
.winner-action[data-v-1555cfa0] {
font-family: 'Onest', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 1.1;
letter-spacing: -0.18px;
color: #1E1E1E;
margin: 0;
}
/* Scrollbar */
.scrollbar[data-v-1555cfa0] {
position: relative;
height: 4px;
user-select: none;
}
.track[data-v-1555cfa0] {
position: absolute;
inset: 0;
background: #d9d9d9;
border-radius: 100px;
}
.thumb[data-v-1555cfa0] {
position: absolute;
top: 0;
height: 4px;
background: var(--color-primary);
border-radius: 100px;
cursor: grab;
z-index: 2;
}
/* Arrow buttons */
.arrow[data-v-1555cfa0] {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border: none;
background: transparent;
padding: 0;
cursor: pointer;
display: grid;
place-items: center;
z-index: 3;
}
.arrow.right[data-v-1555cfa0] {
right: 24px;
}
.arrow.left[data-v-1555cfa0] {
left: 24px;
}
/* Transitions */
.fade-enter-active[data-v-1555cfa0],
.fade-leave-active[data-v-1555cfa0] {
transition: opacity 0.3s ease;
}
.fade-enter-from[data-v-1555cfa0],
.fade-leave-to[data-v-1555cfa0] {
opacity: 0;
}
/* Responsive */
@media (max-aspect-ratio: 1/1) {
.section-title[data-v-1555cfa0] {
font-size: 52px;
}
.arrow[data-v-1555cfa0],
.scroller-overlay[data-v-1555cfa0] {
display: none;
}
}
@media (max-aspect-ratio: 3/4) {
.winners-row[data-v-1555cfa0] {
gap: 8px;
}
.winners-section[data-v-1555cfa0] {
padding-top: 24px;
gap: 24px;
}
.section-title[data-v-1555cfa0] {
font-size: 40px;
}
.winner-card[data-v-1555cfa0] {
width: 300px;
height: 420px;
border-radius: 16px;
}
.winner-image-wrapper[data-v-1555cfa0] {
border-radius: 16px;
margin-bottom: -35px;
}
.winner-content[data-v-1555cfa0] {
height: 120px;
border-radius: 16px;
padding: 18px;
}
.winner-name[data-v-1555cfa0] {
font-size: 18px;
}
.winner-action[data-v-1555cfa0] {
font-size: 16px;
}
}
@media (max-aspect-ratio: 2/3) {
.winners-section[data-v-1555cfa0] {
padding-top: 24px;
gap: 24px;
}
.section-title[data-v-1555cfa0] {
font-size: 36px;
line-height: 36px;
letter-spacing: -0.72px;
padding: 0;
}
.winners-grid[data-v-1555cfa0] {
gap: 8px;
}
.winner-card[data-v-1555cfa0] {
width: 286px;
height: 390px;
border-radius: 12px;
}
.winner-image-wrapper[data-v-1555cfa0] {
border-radius: 12px;
margin-bottom: -40px;
}
.winner-content[data-v-1555cfa0] {
height: 120px;
border-radius: 12px;
padding: 16px;
border: 1px solid rgba(30, 30, 30, 0.25);
}
.winner-icon[data-v-1555cfa0] {
width: 27px;
height: 27px;
}
.winner-name[data-v-1555cfa0] {
font-size: 20px;
line-height: 20px;
}
.winner-action[data-v-1555cfa0] {
font-size: 18px;
line-height: 16px;
}
}
.pricing[data-v-8e8dc6ea] { display: grid; gap: 0;
}
.heading[data-v-8e8dc6ea] { margin: 0 0 32px; font-weight: 600; font-size: 64px; line-height: 0.9; color: var(--color-primary); letter-spacing: -0.01em;
}
.grid[data-v-8e8dc6ea] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.plan[data-v-8e8dc6ea] { background: rgba(255, 255, 255, 0.50); border-radius: 28px; box-shadow: inset 0 0 0 1px rgba(30,30,30,0.25); display: grid; grid-template-rows: auto 1fr; height: 740px; min-width: 0; overflow: hidden; padding: 20px;
}
.plan-header[data-v-8e8dc6ea] { padding: 20px; border-radius: 16px; margin: 0; color: #1e1e1e; position: relative; height: 174px; overflow: hidden;
}
.header-art[data-v-8e8dc6ea] { position: absolute; inset: 0; pointer-events: none;
}
.flare[data-v-8e8dc6ea] {
position: absolute;
right: -150px;
top: 75px;
transform: translateY(-50%);
opacity: 1;
height: 400px;
max-width: none;
}
.plan-header.is-green[data-v-8e8dc6ea] { background: #c3fd56;
}
.plan-header.is-blue[data-v-8e8dc6ea] { background: var(--color-primary); color: #fff;
}
.plan-header.is-dark[data-v-8e8dc6ea] { background: #FFFFFF; color: #1E1E1E;
}
.plan-header.is-black[data-v-8e8dc6ea] { background: #1e1e1e; color: #fff;
}
.badge[data-v-8e8dc6ea] { display: inline-block; background: rgba(255,255,255,0.6); color: #1e1e1e; border-radius: 52px; padding: 8px 12px; font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; margin: 0; position: relative;
}
/* Badge outline/background variants per plan */
.plan-header.is-green .badge[data-v-8e8dc6ea] { background-color: rgba(255,255,255,0.57); color: #1e1e1e;
}
.plan-header.is-green .badge[data-v-8e8dc6ea]::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
background: linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,1) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
}
.plan-header.is-blue .badge[data-v-8e8dc6ea],
.plan-header.is-dark .badge[data-v-8e8dc6ea] { background-color: rgba(30,30,30,0.57); color: #fff;
}
.plan-header.is-blue .badge[data-v-8e8dc6ea]::before,
.plan-header.is-dark .badge[data-v-8e8dc6ea]::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
background: linear-gradient(45deg, rgba(30,30,30,1) 0%, rgba(30,30,30,0.25) 50%, rgba(30,30,30,1) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
}
.plan-header.is-black .badge[data-v-8e8dc6ea] { background-color: rgba(255,255,255,0.25); color: #fff;
}
.plan-header.is-black .badge[data-v-8e8dc6ea]::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
background: linear-gradient(45deg, rgba(30,30,30,1) 0%, rgba(30,30,30,0.25) 50%, rgba(30,30,30,1) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
}
.title[data-v-8e8dc6ea] { margin: 0; position: absolute; left: 20px; bottom: 20px; font-size: 36px; line-height: 0.9; letter-spacing: -0.03em; font-weight: 700; white-space: pre-line;
}
.subcaption[data-v-8e8dc6ea] { display: none;
}
.category-row[data-v-8e8dc6ea] { display: flex; align-items: center; gap: 8px; margin: 0; padding-top: 20px; position: relative;
}
.category-row .label[data-v-8e8dc6ea] { margin: 0; font-weight: 500; font-size: 16px; line-height: 1.1; color: rgba(30,30,30,0.9); letter-spacing: -0.01em;
}
.category-badge[data-v-8e8dc6ea] { display: inline-flex; align-items: center; gap: 8px; border-radius: 6px; padding: 4px 8px; font-weight: 600; font-size: 16px; line-height: 1; color: #1e1e1e; position: relative;
}
.category-badge[data-v-8e8dc6ea]::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
background: linear-gradient(45deg, rgba(255,255,255,0.5) 0%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.5) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
}
.category-badge.is-blue[data-v-8e8dc6ea] { background: linear-gradient(58.4162deg, #ffccb2 4.5866%, #d9ad98 34.559%, #ffccb2 64.532%, #d9ad98 95.413%);
}
.category-badge.is-dark[data-v-8e8dc6ea] { background: linear-gradient(50.9915deg, #d9d9d9 4.6215%, #ffffff 35.813%, #d9d9d9 66.088%, #ffffff 96.362%);
}
.category-badge.is-black[data-v-8e8dc6ea] { background: linear-gradient(59deg,#ffd480 5%,#d9b56c 35%,#ffd480 65%,#d9b56c 96%);
}
.vip-row[data-v-8e8dc6ea] { padding-top: 20px; margin: 0; font-weight: 500; font-size: 16px; line-height: 1.1; color: rgba(30,30,30,0.9); letter-spacing: -0.01em;
}
.category-wrapper[data-v-8e8dc6ea] {
position: relative;
flex: 1;
display: flex;
justify-content: flex-end;
min-width: 0;
}
.category-badge[role="button"][data-v-8e8dc6ea] { cursor: pointer; user-select: none; transition: opacity 0.2s;
}
.category-badge[role="button"][data-v-8e8dc6ea]:hover { opacity: 0.8;
}
.category-modal[data-v-8e8dc6ea] {
text-align: left;
z-index: 25;
padding: 16px 44px 16px 16px;
left: 0;
right: 0;
transform: none;
max-width: none;
width: 100%;
}
.category-modal-content[data-v-8e8dc6ea] { display: flex; flex-direction: column; gap: 20px;
}
.category-modal-header[data-v-8e8dc6ea] { display: flex; align-items: flex-start; gap: 12px;
}
.category-subtitle[data-v-8e8dc6ea] { font-size: 18px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: #1e1e1e; padding-top: 4px;
}
.category-desc[data-v-8e8dc6ea] { font-size: 16px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: rgba(30,30,30,0.9); margin: 0;
}
.category-example[data-v-8e8dc6ea] { display: block; margin-top: 4px;
}
.category-modal-footer[data-v-8e8dc6ea] { display: flex; flex-direction: column; gap: 0; color: #8e8e8e; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em;
}
.category-modal-footer p[data-v-8e8dc6ea] { margin: 0;
}
.category-modal .category-badge[data-v-8e8dc6ea] { font-size: 18px; padding: 4px 8px; border-radius: 8px;
}
@media (max-width: 900px) {
.category-modal[data-v-8e8dc6ea] { width: 100%; padding: 14px 40px 14px 14px;
}
.category-subtitle[data-v-8e8dc6ea] { font-size: 16px;
}
.category-desc[data-v-8e8dc6ea] { font-size: 15px;
}
.category-modal-footer[data-v-8e8dc6ea] { font-size: 13px;
}
.category-modal .category-badge[data-v-8e8dc6ea] { font-size: 16px;
}
}
.content[data-v-8e8dc6ea] { display: flex; flex-direction: column; gap: 42px; min-height: 0;
}
.sections[data-v-8e8dc6ea] { padding: 0; display: flex; flex-direction: column; gap: 0; flex: 1 1 auto; min-height: 0;
}
.category-row + .block[data-v-8e8dc6ea] { padding-top: 20px;
}
.block + .block[data-v-8e8dc6ea] { padding-top: 20px;
}
.auto-spacer[data-v-8e8dc6ea] { flex: 1 1 auto;
}
.block[data-v-8e8dc6ea] { display: grid; gap: 12px; position: relative;
}
.services-row[data-v-8e8dc6ea] { display: flex; align-items: center; gap: 8px; cursor: pointer;
}
.services-icons[data-v-8e8dc6ea] { display: flex; align-items: center; gap: 5px; background: #ebebeb; padding: 8px; border-radius: 8px;
}
.svc[data-v-8e8dc6ea] { width: 24px; height: 24px; border-radius: 6px; background: #fff; display: grid; place-items: center; overflow: hidden;
}
.svc-img[data-v-8e8dc6ea] { width: 100%; height: 100%; display: block;
}
.services-more[data-v-8e8dc6ea] { width: 40px; height: 40px; border-radius: 8px; background: #1e1e1e; color: #fff; display: grid; place-items: center; font-weight: 700;
}
.block-title[data-v-8e8dc6ea] { margin: 0; font-weight: 500; color: rgba(30,30,30,0.9); line-height: 1.1;
}
.services[data-v-8e8dc6ea] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0;
}
.services li[data-v-8e8dc6ea] { width: 24px; height: 24px; border-radius: 6px; background: #ebebeb; position: relative; overflow: hidden;
}
.services li[data-v-8e8dc6ea]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,#fff, #ddd); opacity: 0.7;
}
.services .more[data-v-8e8dc6ea] { width: 40px; height: 40px; border-radius: 8px; background: #1e1e1e; color: #fff; display: grid; place-items: center; font-weight: 700;
}
.stats[data-v-8e8dc6ea] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.stat[data-v-8e8dc6ea] { background: #fff; border-radius: 16px; padding: 16px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04); display: flex; flex-direction: column; gap: 24px; position: relative;
}
.stat .row[data-v-8e8dc6ea] { display: flex; align-items: center; justify-content: space-between;
}
.stat strong[data-v-8e8dc6ea] { font-size: 24px; line-height: 0.9; color: #1e1e1e; font-weight: 600; letter-spacing: -0.03em;
}
.stat .icon[data-v-8e8dc6ea] { width: 12px; height: 12px; background-repeat: no-repeat; background-size: 12px 12px; background-position: center; position: absolute; top: 16px; right: 16px;
}
.icon-data[data-v-8e8dc6ea] { background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3e%3cmask%20id='mask0_27_380'%20style='mask-type:alpha'%20maskUnits='userSpaceOnUse'%20x='0'%20y='0'%20width='12'%20height='12'%3e%3crect%20width='12'%20height='12'%20fill='%23D9D9D9'/%3e%3c/mask%3e%3cg%20mask='url(%23mask0_27_380)'%3e%3cpath%20d='M0.75%2010.0002V6.00024H2.25V10.0002H0.75ZM3.75%2010.0002V4.75024H5.25V10.0002H3.75ZM6.75%2010.0002V3.50024H8.25V10.0002H6.75ZM9.75%2010.0002V2.00024H11.25V10.0002H9.75Z'%20fill='%231E1E1E'/%3e%3c/g%3e%3c/svg%3e");
}
.icon-minutes[data-v-8e8dc6ea] { background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3e%3cmask%20id='mask0_27_387'%20style='mask-type:alpha'%20maskUnits='userSpaceOnUse'%20x='0'%20y='0'%20width='12'%20height='12'%3e%3crect%20width='12'%20height='12'%20fill='%23D9D9D9'/%3e%3c/mask%3e%3cg%20mask='url(%23mask0_27_387)'%3e%3cpath%20d='M9.975%207.97466L9.2%207.19966C9.56667%206.85799%209.85417%206.45382%2010.0625%205.98716C10.2708%205.52049%2010.375%205.02466%2010.375%204.49966C10.375%203.97466%2010.2708%203.48299%2010.0625%203.02466C9.85417%202.56632%209.56667%202.16632%209.2%201.82466L9.975%201.02466C10.4417%201.46632%2010.8125%201.98716%2011.0875%202.58716C11.3625%203.18716%2011.5%203.82466%2011.5%204.49966C11.5%205.17466%2011.3625%205.81216%2011.0875%206.41216C10.8125%207.01216%2010.4417%207.53299%209.975%207.97466ZM8.375%206.37466L7.575%205.57466C7.725%205.43299%207.84583%205.27257%207.9375%205.09341C8.02917%204.91424%208.075%204.71633%208.075%204.49966C8.075%204.28299%208.02917%204.08508%207.9375%203.90591C7.84583%203.72674%207.725%203.56632%207.575%203.42466L8.375%202.62466C8.64167%202.86632%208.85%203.14758%209%203.46841C9.15%203.78924%209.225%204.13299%209.225%204.49966C9.225%204.86633%209.15%205.21007%209%205.53091C8.85%205.85174%208.64167%206.13299%208.375%206.37466ZM4.5%206.49966C3.95%206.49966%203.47917%206.30383%203.0875%205.91216C2.69583%205.52049%202.5%205.04966%202.5%204.49966C2.5%203.94966%202.69583%203.47882%203.0875%203.08716C3.47917%202.69549%203.95%202.49966%204.5%202.49966C5.05%202.49966%205.52083%202.69549%205.9125%203.08716C6.30417%203.47882%206.5%203.94966%206.5%204.49966C6.5%205.04966%206.30417%205.52049%205.9125%205.91216C5.52083%206.30383%205.05%206.49966%204.5%206.49966ZM0.5%2010.4997V9.09966C0.5%208.82466%200.570833%208.56633%200.7125%208.32466C0.854167%208.08299%201.05%207.89966%201.3%207.77466C1.725%207.55799%202.20417%207.37466%202.7375%207.22466C3.27083%207.07466%203.85833%206.99966%204.5%206.99966C5.14167%206.99966%205.72917%207.07466%206.2625%207.22466C6.79583%207.37466%207.275%207.55799%207.7%207.77466C7.95%207.89966%208.14583%208.08299%208.2875%208.32466C8.42917%208.56633%208.5%208.82466%208.5%209.09966V10.4997H0.5Z'%20fill='%231E1E1E'/%3e%3c/g%3e%3c/svg%3e");
}
.icon-sms[data-v-8e8dc6ea] { background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3e%3cmask%20id='mask0_27_394'%20style='mask-type:alpha'%20maskUnits='userSpaceOnUse'%20x='0'%20y='0'%20width='12'%20height='12'%3e%3crect%20width='12'%20height='12'%20fill='%23D9D9D9'/%3e%3c/mask%3e%3cg%20mask='url(%23mask0_27_394)'%3e%3cpath%20d='M1%2010.9998V1.99976C1%201.72476%201.09792%201.48934%201.29375%201.29351C1.48958%201.09767%201.725%200.999756%202%200.999756H10C10.275%200.999756%2010.5104%201.09767%2010.7063%201.29351C10.9021%201.48934%2011%201.72476%2011%201.99976V7.99976C11%208.27476%2010.9021%208.51017%2010.7063%208.70601C10.5104%208.90184%2010.275%208.99976%2010%208.99976H3L1%2010.9998ZM3%206.99976H7V5.99976H3V6.99976ZM3%205.49976H9V4.49976H3V5.49976ZM3%203.99976H9V2.99976H3V3.99976Z'%20fill='%231E1E1E'/%3e%3c/g%3e%3c/svg%3e");
}
.stat .label[data-v-8e8dc6ea] { font-size: 16px; color: rgba(30,30,30,0.9); line-height: 0.8; margin-top: auto; font-weight: 500;
}
.infinity-icon[data-v-8e8dc6ea] { width: 36px; display: block;
}
.plan-footer[data-v-8e8dc6ea] { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: #1e1e1e; border-radius: 12px;
}
.price[data-v-8e8dc6ea] { display: flex; align-items: flex-start; gap: 4px; color: #fff;
}
.price strong[data-v-8e8dc6ea] { font-size: 36px; color: #fff; letter-spacing: -0.04em; line-height: 0.9;
}
.price span[data-v-8e8dc6ea] { font-size: 18px; color: rgba(255,255,255,0.75); line-height: 1.1;
}
.stickers-head[data-v-8e8dc6ea] { height: 19px; display: flex; align-items: center; justify-content: space-between;
}
.more-icon[data-v-8e8dc6ea] { width: 24px; height: 24px; border-radius: 8px; background-color: #1E1E1E; background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='6'%20height='10'%20viewBox='0%200%206%2010'%20fill='none'%3e%3cpath%20d='M2.03896%206.67586C2.0303%206.62069%202.02165%206.56092%202.01299%206.49655C2.01299%206.43218%202.01299%206.36782%202.01299%206.30345C2.01299%206.01839%202.05628%205.76552%202.14286%205.54483C2.22944%205.32414%202.34199%205.12644%202.48052%204.95172C2.62771%204.76782%202.77922%204.5977%202.93507%204.44138C3.09957%204.28506%203.25974%204.13333%203.41558%203.98621C3.55411%203.85747%203.67532%203.72874%203.77922%203.6C3.89178%203.46207%203.98268%203.32414%204.05195%203.18621C4.12121%203.03908%204.15584%202.89195%204.15584%202.74483C4.15584%202.55172%204.10823%202.38621%204.01299%202.24828C3.92641%202.10115%203.80087%201.9908%203.63636%201.91724C3.48052%201.84368%203.28139%201.8069%203.03896%201.8069C2.80519%201.8069%202.5974%201.84828%202.41558%201.93103C2.23377%202.0046%202.09091%202.11494%201.98701%202.26207C1.88312%202.4092%201.81818%202.58851%201.79221%202.8H0C0.017316%202.27586%200.112554%201.83448%200.285714%201.47586C0.458874%201.11724%200.688312%200.832184%200.974026%200.62069C1.25974%200.4%201.58009%200.243678%201.93507%200.151724C2.2987%200.0505746%202.671%200%203.05195%200C3.55411%200%204.0303%200.0919539%204.48052%200.275862C4.93074%200.450574%205.29437%200.726436%205.57143%201.10345C5.85714%201.48046%206%201.98161%206%202.6069C6%202.93793%205.94805%203.23218%205.84416%203.48966C5.74026%203.74713%205.5974%203.9908%205.41558%204.22069C5.23377%204.45057%205.02597%204.68506%204.79221%204.92414C4.64502%205.08046%204.49784%205.23218%204.35065%205.37931C4.20346%205.52644%204.07792%205.68276%203.97403%205.84828C3.87013%206.01379%203.80519%206.22069%203.77922%206.46897C3.77922%206.49655%203.77489%206.52874%203.76623%206.56552C3.76623%206.6023%203.76623%206.63908%203.76623%206.67586H2.03896ZM2.90909%2010C2.61472%2010%202.35065%209.89885%202.11688%209.69655C1.89177%209.48506%201.77922%209.17701%201.77922%208.77241C1.77922%208.38621%201.89177%208.09655%202.11688%207.90345C2.35065%207.70115%202.61472%207.6%202.90909%207.6C3.21212%207.6%203.47619%207.70115%203.7013%207.90345C3.92641%208.09655%204.03896%208.38621%204.03896%208.77241C4.03896%209.17701%203.92641%209.48506%203.7013%209.69655C3.47619%209.89885%203.21212%2010%202.90909%2010Z'%20fill='white'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center; background-size: 6px 10px; cursor: pointer; user-select: none; -webkit-user-select: none; -ms-user-select: none;
}
.stickers[data-v-8e8dc6ea] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.sticker[data-v-8e8dc6ea] { background: #ebebeb; border-radius: 16px; padding: 16px; display: grid; gap: 24px; justify-items: start;
}
.sticker-row[data-v-8e8dc6ea] { display: flex; align-items: center;
}
.sticker-row[data-v-8e8dc6ea] > * { position: relative;
}
.sticker-bubble[data-v-8e8dc6ea] { background: #1e1e1e; color: #fff; width: 27px; height: 27px; border-radius: 23.047px; display: grid; place-items: center; font-weight: 700; font-size: 16px; line-height: 1.1; letter-spacing: -0.48px; text-align: center; border: 2px solid #EBEBEB; margin-right: -10.8px; z-index: 2;
}
.sticker-label[data-v-8e8dc6ea] { font-size: 14px; color: rgba(30,30,30,0.9); line-height: 0.7;
}
/* Services modal */
.services-wrapper[data-v-8e8dc6ea] { position: static; width: 100%;
}
.services-modal[data-v-8e8dc6ea] { position: absolute; left: 0; right: 0; top: -10px; z-index: 20; background: rgba(255,255,255,0.75); border: 2px solid #fff; border-radius: 16px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); backdrop-filter: blur(20px); width: 100%; max-width: none; transform-origin: top left; will-change: opacity, transform; padding-right: 44px;
}
.services-modal-head[data-v-8e8dc6ea] { display: flex; align-items: center; justify-content: space-between;
}
.services-modal-head p[data-v-8e8dc6ea] { margin: 0; font-weight: 500; font-size: inherit; line-height: 1.2; color: rgba(30,30,30,0.9); letter-spacing: -0.01em;
}
.services-modal-close[data-v-8e8dc6ea] { width: 24px; height: 24px; padding: 7px; border-radius: 8px; background: #1e1e1e; color: #fff; border: none; display: grid; place-items: center; cursor: pointer; line-height: 1; position: absolute; top: 12px; right: 12px;
}
.services-modal-close img[data-v-8e8dc6ea] { width: 100%; height: 100%; display: block;
}
.services-modal-body[data-v-8e8dc6ea] { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px;
}
.pill[data-v-8e8dc6ea] { background: #fff; display: flex; align-items: center; gap: 6px; padding: 8px; border-radius: 8px;
}
.svc-sm[data-v-8e8dc6ea] { width: 24px; height: 24px; border-radius: 4px;
}
/* Transition for services-modal */
.services-pop-enter-active[data-v-8e8dc6ea],
.services-pop-leave-active[data-v-8e8dc6ea] { transition: opacity 500ms cubic-bezier(0.2, 0.6, 0.2, 1)
}
.services-pop-enter-from[data-v-8e8dc6ea],
.services-pop-leave-to[data-v-8e8dc6ea] { opacity: 0;
}
.services-pop-enter-to[data-v-8e8dc6ea],
.services-pop-leave-from[data-v-8e8dc6ea] { opacity: 1;
}
/* Stickers modal overrides + transition */
.stickers-modal-head[data-v-8e8dc6ea] { display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.stickers-lead[data-v-8e8dc6ea] { display: flex; align-items: center; gap: 12px;
}
.stickers-lead-icon[data-v-8e8dc6ea] { width: 48px; height: 48px; display: block; border-radius: 8px;}
.stickers-lead-title[data-v-8e8dc6ea] { margin: 0; font-weight: 600; font-size: 18px; line-height: 1.1; color: #1e1e1e; letter-spacing: -0.01em;
}
.stickers-modal-body[data-v-8e8dc6ea] { margin-top: 12px;
}
.stickers-modal-body p[data-v-8e8dc6ea] { margin: 0; font-weight: 500; font-size: 16px; line-height: 1.2; color: rgba(30,30,30,0.9); letter-spacing: -0.01em;
}
.stickers-pop-enter-active[data-v-8e8dc6ea],
.stickers-pop-leave-active[data-v-8e8dc6ea] { transition: opacity 500ms cubic-bezier(0.2, 0.6, 0.2, 1)
}
.stickers-pop-enter-from[data-v-8e8dc6ea],
.stickers-pop-leave-to[data-v-8e8dc6ea] { opacity: 0;
}
.stickers-pop-enter-to[data-v-8e8dc6ea],
.stickers-pop-leave-from[data-v-8e8dc6ea] { opacity: 1;
}
/* Medium (portrait/square only) — apply to all portrait (<1) */
@media (max-aspect-ratio: 1/1) {
.heading[data-v-8e8dc6ea] { font-size: 48px; margin: 0 0 24px;
}
.grid[data-v-8e8dc6ea] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
}
.plan-header[data-v-8e8dc6ea] { height: 160px;
}
.title[data-v-8e8dc6ea] { font-size: 32px;
}
}
/* Tablet / large portrait (portrait/square only) */
@media (max-aspect-ratio: 1/1) {
.grid[data-v-8e8dc6ea] { grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flare[data-v-8e8dc6ea] {
right: -150px;
}
}
/* Medium refinement (≤900px, portrait/square only) — apply to all portrait (<1) */
@media (max-aspect-ratio: 1/1) {
.price strong[data-v-8e8dc6ea] { font-size: 32px;
}
.price span[data-v-8e8dc6ea] { font-size: 16px;
}
.stat[data-v-8e8dc6ea] { padding: 14px; gap: 16px;
}
.stat strong[data-v-8e8dc6ea] { font-size: 22px;
}
.plan[data-v-8e8dc6ea] { height: 720px;
}
}
/* Mobile (portrait/square only) */
@media (max-aspect-ratio: 2/3) {
.heading[data-v-8e8dc6ea] { font-size: 36px; margin: 0 0 16px; letter-spacing: -0.02em;
}
.grid[data-v-8e8dc6ea] { grid-template-columns: 1fr; gap: 60px;
}
.plan[data-v-8e8dc6ea] {
position: sticky;
top: calc(var(--app-header-offset-top) + var(--app-header-height) + var(--plan-sticky-offset-extra));
height: 650px;
padding: 16px;
backdrop-filter: blur(60px);
-webkit-backdrop-filter: blur(60px);
}
.plan-header[data-v-8e8dc6ea] { padding: 16px; height: 150px;
}
.badge[data-v-8e8dc6ea] { font-size: 12px; padding: 6px 10px;
}
.title[data-v-8e8dc6ea] { font-size: 28px;
}
.block[data-v-8e8dc6ea] { gap: 8px;
}
.stat[data-v-8e8dc6ea] { padding: 12px; gap: 16px; border-radius: 12px;
}
.stat strong[data-v-8e8dc6ea] { font-size: 24px;
}
.stat .label[data-v-8e8dc6ea] { font-size: 14px;
}
.plan-footer[data-v-8e8dc6ea] { padding: 12px;
}
.price strong[data-v-8e8dc6ea] { font-size: 28px;
}
.price span[data-v-8e8dc6ea] { font-size: 16px;
}
.stickers[data-v-8e8dc6ea] { grid-template-columns: repeat(3, 1fr);
}
.sticker[data-v-8e8dc6ea] { padding: 12px; gap: 16px;
}
}
.ambassadors[data-v-3e518a19] {
position: relative;
padding: 72px 0 42px;
overflow: hidden;
}
.wordmark[data-v-3e518a19] {
position: absolute;
left: 50%;
top: 14px;
transform: translateX(-50%);
font-family: 'Rosencrantz NBP', sans-serif;
font-size: 389px;
line-height: 0.9;
letter-spacing: -0.01em;
color: rgba(28, 28, 28, 0.04);
pointer-events: none;
white-space: nowrap;
text-transform: uppercase;
z-index: 0;
}
.section-head[data-v-3e518a19] {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
justify-content: center;
min-height: 156px;
margin-bottom: 34px;
}
.section-title[data-v-3e518a19] {
position: relative;
margin: 0;
padding-top: 10px;
top: 32px;
font-family: 'Rosencrantz NBP', sans-serif;
font-weight: 900;
font-size: 116px;
line-height: 0.75;
letter-spacing: -0.01em;
color: var(--color-primary);
text-align: center;
transform: rotate(-1.61deg);
text-transform: uppercase;
z-index: 1;
}
.section-arrow[data-v-3e518a19] {
position: absolute;
right: 500px;
top: 40px;
width: 126px;
transform: rotate(73.66deg);
z-index: 1;
}
.cards-scroll[data-v-3e518a19] {
position: relative;
z-index: 1;
overflow-x: auto;
overflow-y: visible;
padding: 10px 24px 36px;
scrollbar-width: none;
scroll-behavior: auto;
-webkit-overflow-scrolling: touch;
opacity: 0;
transition: opacity 0.3s ease;
}
.cards-scroll[data-v-3e518a19]::-webkit-scrollbar {
display: none;
}
.cards-scroll.is-ready[data-v-3e518a19] {
opacity: 1;
}
/* При наведении — можно перетаскивать, без наведения — автоскролл */
.cards-scroll.is-hovering[data-v-3e518a19] {
cursor: grab;
}
.cards-scroll.is-hovering[data-v-3e518a19]:active,
.cards-scroll.is-dragging[data-v-3e518a19] {
cursor: grabbing;
user-select: none;
}
.cards-track[data-v-3e518a19] {
display: flex;
gap: 14px;
width: max-content;
padding: 10px max(16px, calc((100vw - 2050px) / 2 + 8px));
}
.cards-group[data-v-3e518a19] {
display: flex;
flex: none;
gap: 14px;
}
.person-slot[data-v-3e518a19] {
display: flex;
align-items: center;
justify-content: center;
width: 442px;
min-width: 442px;
height: 612px;
scroll-snap-align: center;
}
.person-card[data-v-3e518a19] {
display: flex;
flex-direction: column;
width: 410px;
padding: 15px 15px 0;
border-radius: 40px;
background: #fff;
box-shadow: 0 23px 30.1px rgba(0, 0, 0, 0.05);
overflow: hidden;
position: relative;
height: 590px;
transform-origin: center center;
}
.tilt-left[data-v-3e518a19] {
transform: rotate(-3deg);
}
.tilt-right[data-v-3e518a19] {
transform: rotate(3deg);
}
.person-photo-wrap[data-v-3e518a19] {
position: relative;
overflow: hidden;
border-radius: 38.696px;
}
.person-photo[data-v-3e518a19] {
display: block;
width: 100%;
height: 478px;
object-fit: cover;
}
.person-info[data-v-3e518a19] {
display: grid;
place-items: center;
gap: 10px;
padding-top: 0;
position: relative;
z-index: 2;
margin-top: -34px;
}
.person-handle[data-v-3e518a19] {
display: inline-flex;
width: fit-content;
padding: 10px 17px;
border-radius: 22.693px;
background: #c3fd56;
color: #000;
font-weight: 600;
font-size: 22.693px;
line-height: 0.9;
letter-spacing: -0.04em;
box-shadow: 0 3.165px 0 #ade04e;
position: relative;
z-index: 3;
}
.person-name[data-v-3e518a19] {
color: #3b3b3b;
font-weight: 600;
font-size: 50px;
line-height: 0.9;
letter-spacing: -0.04em;
margin-top: -2px;
text-align: center;
white-space: nowrap;
}
@media (max-aspect-ratio: 1 / 1) {
.ambassadors[data-v-3e518a19] {
padding: 34px 0 34px;
}
.wordmark[data-v-3e518a19] {
top: 22px;
font-size: 128px;
}
.section-head[data-v-3e518a19] {
min-height: 96px;
margin-bottom: 20px;
}
.section-title[data-v-3e518a19] {
top: 18px;
font-size: 100px;
line-height: 0.9;
}
.section-arrow[data-v-3e518a19] {
top: 141px;
right: 6px;
width: 116px;
height: 102px;
}
.cards-scroll[data-v-3e518a19] {
padding: 10px 0 24px;
scroll-snap-type: x mandatory;
}
.cards-track[data-v-3e518a19] {
gap: 14px;
padding: 14px 20px 22px;
}
.person-slot[data-v-3e518a19] {
width: 296px;
min-width: 296px;
height: 404px;
}
.person-card[data-v-3e518a19] {
width: 272px;
max-width: 100%;
height: auto;
aspect-ratio: 410 / 590;
padding: 9px 9px 0;
border-radius: 31px;
}
.tilt-left[data-v-3e518a19] {
transform: rotate(-2.5deg);
}
.tilt-right[data-v-3e518a19] {
transform: rotate(2.5deg);
}
.person-photo-wrap[data-v-3e518a19] {
border-radius: 26px;
}
.person-photo[data-v-3e518a19] {
height: 318px;
}
.person-info[data-v-3e518a19] {
gap: 8px;
margin-top: -24px;
}
.person-handle[data-v-3e518a19] {
padding: 8px 12px;
font-size: 16px;
}
.person-name[data-v-3e518a19] {
font-size: 32px;
}
}
.faq-section[data-v-f6f36963] {
position: relative;
display: grid;
gap: 40px;
padding: 86px 24px 0;
overflow: hidden;
}
.faq-title-row[data-v-f6f36963] {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 112px;
margin-bottom: 50px;
}
.faq-star[data-v-f6f36963] {
position: absolute;
left: calc(50% - 660px);
top: -22px;
width: 310px;
height: 230px;
display: block;
object-fit: contain;
}
.faq-arrow[data-v-f6f36963] {
position: absolute;
right: calc(50% - 660px);
transform: rotate(90deg);
top: 20px;
width: 202.323px;
height: 200.076px;
display: block;
object-fit: contain;
}
.section-title[data-v-f6f36963] {
margin: 0;
font-family: 'Rosencrantz NBP', sans-serif;
font-weight: 900;
font-size: 116px;
line-height: 0.75;
letter-spacing: -0.01em;
color: var(--color-primary);
text-align: center;
transform: rotate(0.84deg);
text-transform: uppercase;
position: relative;
z-index: 1;
}
.faq-list[data-v-f6f36963] {
display: flex;
flex-direction: column;
gap: 15px;
max-width: 1012px;
margin: 0 auto;
width: 100%;
position: relative;
z-index: 1;
}
.faq-item[data-v-f6f36963] {
border-radius: 30px;
overflow: hidden;
background: #fff;
padding: 20px;
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.04);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.faq-item.open[data-v-f6f36963] {
box-shadow: 0 20px 38px rgba(0, 0, 0, 0.05);
}
.faq-item[data-v-f6f36963]:hover {
transform: translateY(-2px);
}
.faq-question[data-v-f6f36963] {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
padding: 0;
border: none;
background: none;
cursor: pointer;
font-family: var(--font-family-sans);
text-align: left;
}
.faq-q-text[data-v-f6f36963] {
flex: 1;
font-weight: 500;
font-size: 25px;
line-height: 1;
letter-spacing: -0.04em;
color: #000;
}
.faq-toggle-btn[data-v-f6f36963] {
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--color-accent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.faq-toggle-icon[data-v-f6f36963] {
position: relative;
display: block;
width: 18px;
height: 18px;
transition: transform 0.3s ease;
}
.faq-toggle-icon[data-v-f6f36963]::before,
.faq-toggle-icon[data-v-f6f36963]::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 18px;
height: 2.5px;
border-radius: 999px;
background: #000;
transform: translate(-50%, -50%);
}
.faq-toggle-icon[data-v-f6f36963]::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.faq-toggle-icon.rotated[data-v-f6f36963]::after {
transform: translate(-50%, -50%) rotate(0deg);
}
.faq-answer[data-v-f6f36963] {
padding-top: 12px;
}
.faq-answer-inner[data-v-f6f36963] {
background: #fafafa;
border-radius: 30px;
padding: 20px;
}
.faq-answer-inner p[data-v-f6f36963] {
margin: 0;
font-family: var(--font-family-sans);
font-weight: 500;
font-size: 20px;
line-height: 23px;
color: #000;
}
.faq-answer-inner[data-v-f6f36963] .faq-answer-blue {
color: #4a48e9;
}
.faq-answer-inner[data-v-f6f36963] .faq-answer-green {
color: #80b025;
}
.faq-answer-inner[data-v-f6f36963] .faq-answer-orange {
color: #ff8000;
}
.faq-answer-inner[data-v-f6f36963] .faq-answer-link {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.faq-expand-enter-active[data-v-f6f36963],
.faq-expand-leave-active[data-v-f6f36963] {
transition: all 0.28s ease;
max-height: 320px;
overflow: hidden;
}
.faq-expand-enter-from[data-v-f6f36963],
.faq-expand-leave-to[data-v-f6f36963] {
max-height: 0;
opacity: 0;
padding-top: 0;
}
.faq-mascot-wrapper[data-v-f6f36963] {
position: relative;
display: flex;
justify-content: center;
align-items: flex-end;
min-height: 700px;
margin-top: -24px;
}
.faq-bottom-art[data-v-f6f36963] {
display: block;
width: 100%;
max-width: 1024px;
height: auto;
}
@media (max-aspect-ratio: 1 / 1) {
.faq-section[data-v-f6f36963] {
gap: 18px;
padding: 34px 0 0;
overflow: visible;
}
.faq-title-row[data-v-f6f36963] {
margin-bottom: 16px;
}
.faq-star[data-v-f6f36963] {
left: 60px;
top: -100px;
width: 150px;
height: 150px;
transform: rotate(180deg) scaleX(-1);
}
.faq-arrow[data-v-f6f36963] {
display: none;
}
.section-title[data-v-f6f36963] {
max-width: var(--home-mobile-w-344);
font-size: 70px;
line-height: 0.9;
}
.faq-list[data-v-f6f36963] {
max-width: var(--home-mobile-w-344);
gap: 12px;
padding: 0 13px;
}
.faq-item[data-v-f6f36963] {
padding: 16px;
border-radius: 24px;
}
.faq-question[data-v-f6f36963] {
align-items: flex-start;
}
.faq-q-text[data-v-f6f36963] {
font-size: 18px;
line-height: 1.06;
}
.faq-toggle-btn[data-v-f6f36963] {
width: 40px;
height: 40px;
}
.faq-toggle-icon[data-v-f6f36963],
.faq-toggle-icon[data-v-f6f36963]::before,
.faq-toggle-icon[data-v-f6f36963]::after {
width: 16px;
}
.faq-answer-inner p[data-v-f6f36963] {
font-size: 15px;
line-height: 1.24;
}
.faq-answer-inner[data-v-f6f36963] {
border-radius: 20px;
padding: 16px;
}
.faq-mascot-wrapper[data-v-f6f36963] {
min-height: 700px;
align-items: anchor-center;
margin-top: 0;
overflow: hidden;
}
.faq-bottom-art[data-v-f6f36963] {
min-width: 100%;
transform: scale(3) translateX(15px);
}
}
.pricing-section[data-v-03d4249a] {
display: flex;
flex-direction: column;
align-items: center;
width: min(100%, 1400px);
margin: -151px auto 0;
padding: 80px;
background: #fff;
border-radius: 70px 70px 0px 0px;
position: relative;
z-index: 2;
box-sizing: border-box;
}
.section-header[data-v-03d4249a] {
width: 100%;
max-width: 544px;
margin: 0 auto 38px;
text-align: center;
color: #4a48e9;
flex-shrink: 0;
}
.section-header-inner[data-v-03d4249a] {
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
width: 100%;
}
.section-title[data-v-03d4249a] {
margin: 0;
width: 100%;
font-family: 'Rosencrantz NBP', sans-serif;
font-weight: 900;
font-size: 115.65px;
line-height: 0.75;
letter-spacing: 0;
text-transform: uppercase;
}
.section-subtitle[data-v-03d4249a] {
margin: 0;
width: 100%;
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 28px;
line-height: 0.9;
letter-spacing: -0.04em;
}
.cards-grid[data-v-03d4249a] {
display: flex;
gap: 32px;
width: 100%;
max-width: 1240px;
margin: 0 auto;
flex: 1 0 0;
min-width: 0;
}
.tariff-card[data-v-03d4249a] {
position: relative;
flex: 1 1 392px;
min-width: 0;
width: 392px;
background: #fff;
border-radius: 40px;
box-shadow: 0 32px 54px -9px rgba(0, 0, 0, 0.25);
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 532px;
}
.card-header[data-v-03d4249a] {
position: relative;
height: 200px;
overflow: hidden;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.tariff-card.start .card-header[data-v-03d4249a] {
background: #acc4ff;
}
.tariff-card.plus .card-header[data-v-03d4249a] {
background: #c3fd56;
}
.tariff-card.max .card-header[data-v-03d4249a] {
background: #4a48e9;
}
.glass-badge[data-v-03d4249a] {
display: inline-flex;
align-items: center;
justify-content: center;
height: 37px;
padding: 4px 16px;
border-radius: 52.177px;
background: rgba(255, 255, 255, 0.57);
backdrop-filter: blur(10px);
border: 1px solid #fff;
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 1.3;
letter-spacing: -0.01em;
color: #1e1e1e;
align-self: flex-start;
position: relative;
z-index: 2;
}
.card-sim[data-v-03d4249a] {
position: absolute;
right: -175px;
top: -30px;
width: 410px;
height: 398.97px;
object-fit: contain;
object-position: right top;
pointer-events: none;
user-select: none;
}
.tariff-name[data-v-03d4249a] {
margin: 0;
font-family: 'Onest', sans-serif;
font-weight: 700;
font-size: 49px;
line-height: 0.9;
letter-spacing: -0.06em;
position: relative;
z-index: 2;
}
.tariff-name span[data-v-03d4249a] {
display: block;
}
.tariff-card.start .tariff-name[data-v-03d4249a] {
color: #4a48e9;
}
.tariff-card.plus .tariff-name[data-v-03d4249a] {
color: #303030;
}
.tariff-card.max .tariff-name[data-v-03d4249a] {
color: #fff;
}
.stickers-badge-wrapper[data-v-03d4249a] {
position: absolute;
right: 11px;
top: 148px;
z-index: 3;
}
.tariff-card.plus .stickers-badge-wrapper[data-v-03d4249a],
.tariff-card.max .stickers-badge-wrapper[data-v-03d4249a] {
right: 8px;
top: 150px;
}
.stickers-badge[data-v-03d4249a] {
display: flex;
flex-direction: column;
gap: 3px;
padding: 12px 9px;
background: #fff;
border: 1px solid #ececec;
border-radius: 21.21px;
box-shadow: 0 17px 14px rgba(0, 0, 0, 0.05);
cursor: pointer;
user-select: none;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stickers-badge[data-v-03d4249a]:hover {
transform: translateY(-1px);
box-shadow: 0 20px 18px rgba(0, 0, 0, 0.08);
}
.stickers-badge[data-v-03d4249a]:active {
transform: translateY(0);
}
.stickers-head[data-v-03d4249a] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.stickers-label[data-v-03d4249a] {
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 10.464px;
line-height: 1.1;
letter-spacing: -0.03em;
color: #0b0b0b;
white-space: nowrap;
}
.stickers-more-icon[data-v-03d4249a] {
width: 16px;
height: 16px;
display: block;
flex-shrink: 0;
}
/* Stickers modal — внутри tariff-card, 100% ширины */
.stickers-modal[data-v-03d4249a] {
position: absolute;
left: 0;
right: 0;
top: 148px;
width: 100%;
z-index: 25;
background: rgba(255, 255, 255, 0.95);
border: 2px solid #fff;
border-radius: 16px;
padding: 16px;
padding-right: 44px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.tariff-card.plus .stickers-modal[data-v-03d4249a],
.tariff-card.max .stickers-modal[data-v-03d4249a] {
top: 150px;
}
.stickers-modal-head[data-v-03d4249a] {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.stickers-lead[data-v-03d4249a] {
display: flex;
align-items: center;
gap: 12px;
}
.stickers-lead-icon[data-v-03d4249a] {
width: 48px;
height: 48px;
display: block;
border-radius: 8px;
object-fit: cover;
}
.stickers-lead-title[data-v-03d4249a] {
margin: 0;
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 18px;
line-height: 1.2;
color: #1e1e1e;
letter-spacing: -0.01em;
}
.stickers-modal-close[data-v-03d4249a] {
width: 24px;
height: 24px;
padding: 7px;
border-radius: 8px;
background: #1e1e1e;
color: #fff;
border: none;
display: grid;
place-items: center;
cursor: pointer;
line-height: 1;
position: absolute;
top: 16px;
right: 16px;
}
.stickers-modal-close img[data-v-03d4249a] {
width: 100%;
height: 100%;
display: block;
}
.stickers-modal-body[data-v-03d4249a] {
margin-top: 12px;
}
.stickers-modal-body p[data-v-03d4249a] {
margin: 0;
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 1.3;
color: rgba(30, 30, 30, 0.9);
letter-spacing: -0.01em;
}
.stickers-pop-enter-active[data-v-03d4249a],
.stickers-pop-leave-active[data-v-03d4249a] {
transition: opacity 0.3s ease;
}
.stickers-pop-enter-from[data-v-03d4249a],
.stickers-pop-leave-to[data-v-03d4249a] {
opacity: 0;
}
.sticker-icons[data-v-03d4249a] {
display: flex;
align-items: center;
gap: 0;
}
.sticker-item[data-v-03d4249a] {
position: relative;
flex-shrink: 0;
}
.sticker[data-v-03d4249a] {
display: block;
width: 48px;
height: 48px;
object-fit: cover;
}
.sticker-item span[data-v-03d4249a] {
position: absolute;
right: 3px;
bottom: 4px;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 20px;
background: #c3fd56;
font-family: 'Onest', sans-serif;
font-weight: 800;
font-size: 12px;
line-height: 0.9;
letter-spacing: -0.03em;
color: #000;
}
.card-body[data-v-03d4249a] {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 48px;
padding: 10px 20px 20px;
min-height: 0;
align-items: flex-start;
}
.tariff-card.plus .card-body[data-v-03d4249a],
.tariff-card.max .card-body[data-v-03d4249a],
.tariff-card.start .card-body[data-v-03d4249a] {
gap: 30px;
align-items: flex-end;
}
.tariff-card.plus .card-body .features[data-v-03d4249a],
.tariff-card.plus .card-body .price-block[data-v-03d4249a],
.tariff-card.max .card-body .features[data-v-03d4249a],
.tariff-card.max .card-body .price-block[data-v-03d4249a],
.tariff-card.start .card-body .features[data-v-03d4249a],
.tariff-card.start .card-body .price-block[data-v-03d4249a] {
width: 100%;
}
.features[data-v-03d4249a] {
display: flex;
flex-direction: column;
gap: 14px;
}
.features-label[data-v-03d4249a] {
margin: 0;
font-family: 'Onest', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 0.9;
letter-spacing: -0.03em;
color: #000;
}
.feature[data-v-03d4249a] {
margin: 0;
display: flex;
align-items: center;
font-family: 'Onest', sans-serif;
font-weight: 800;
font-size: 24px;
line-height: 0.9;
letter-spacing: -0.03em;
color: #000;
}
.tariff-card.start .feature[data-v-03d4249a] {
gap: 5px;
}
.tariff-card.plus .feature[data-v-03d4249a] {
gap: 7px;
}
.tariff-card.max .feature[data-v-03d4249a] {
gap: 10px;
}
.tariff-card.max .feature[data-v-03d4249a] {
color: #4a48e9;
}
.inline-icon[data-v-03d4249a] {
width: 24px;
height: 24px;
object-fit: contain;
flex-shrink: 0;
}
.inline-icon.infinity[data-v-03d4249a] {
width: 41px;
height: 19px;
}
.inline-icon.infinity.infinity--black[data-v-03d4249a] {
filter: brightness(0);
}
.inline-icon.star[data-v-03d4249a] {
width: 24px;
height: 24px;
}
.star-clickable[data-v-03d4249a] {
cursor: pointer;
}
/* Minutes modal — внутри tariff-card, 100% ширины */
.minutes-modal[data-v-03d4249a] {
position: absolute;
left: 0;
right: 0;
top: 148px;
width: 100%;
z-index: 25;
background: rgba(255, 255, 255, 0.9);
border: 2px solid #fff;
border-radius: 16px;
padding: 16px;
padding-right: 44px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.tariff-card.plus .minutes-modal[data-v-03d4249a],
.tariff-card.max .minutes-modal[data-v-03d4249a] {
top: 150px;
}
.minutes-modal-head[data-v-03d4249a] {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.minutes-lead[data-v-03d4249a] {
display: flex;
align-items: center;
gap: 12px;
}
.minutes-lead-icon-wrap[data-v-03d4249a] {
width: 48px;
height: 48px;
border-radius: 10.667px;
background: #4a48e9;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.minutes-lead-icon[data-v-03d4249a] {
object-fit: contain;
}
.minutes-lead-title[data-v-03d4249a] {
margin: 0;
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 24px;
line-height: 1.1;
color: #1e1e1e;
letter-spacing: -0.01em;
}
.minutes-modal-body[data-v-03d4249a] {
margin-top: 32px;
}
.minutes-modal-body p[data-v-03d4249a] {
margin: 0 0 0.25em;
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 1.2;
color: rgba(30, 30, 30, 0.9);
letter-spacing: -0.01em;
}
.minutes-modal-body p[data-v-03d4249a]:last-child {
margin-bottom: 0;
}
.price-block[data-v-03d4249a] {
display: flex;
flex-direction: column;
gap: 24px;
}
.tariff-card.start .price-block[data-v-03d4249a] {
width: 173px;
}
.price-row[data-v-03d4249a] {
display: flex;
align-items: flex-end;
gap: 0;
}
.price[data-v-03d4249a] {
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 54px;
line-height: 0.9;
letter-spacing: -0.09em;
color: #000;
}
.price-period[data-v-03d4249a] {
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 0.9;
letter-spacing: -0.04em;
color: #000;
margin-left: 0;
}
.btn-connect[data-v-03d4249a] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 54.076px;
padding: 19.313px;
background: #c3fd56;
border: none;
border-radius: 14.485px;
cursor: pointer;
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 14.485px;
line-height: 0.9;
letter-spacing: -0.01em;
color: #000;
width: fit-content;
box-shadow: 0 8.691px 6.759px rgba(0, 0, 0, 0.15);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-connect[data-v-03d4249a]:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(115, 145, 24, 0.34);
}
.btn-connect[data-v-03d4249a]:active {
transform: translateY(1px);
box-shadow: 0 6px 12px rgba(115, 145, 24, 0.24);
}
.btn-icon[data-v-03d4249a] {
width: 14px;
height: 14px;
object-fit: contain;
}
@media (max-aspect-ratio: 1 / 1) {
.pricing-section[data-v-03d4249a] {
width: var(--home-mobile-w-350);
margin-top: -64px;
padding: 32px 15px 28px;
border-radius: 32px 32px 0 0;
}
.section-header[data-v-03d4249a] {
max-width: var(--home-mobile-w-320);
margin-bottom: 24px;
}
.section-header-inner[data-v-03d4249a] {
gap: 12px;
}
.section-title[data-v-03d4249a] {
font-size: 64px;
line-height: 0.82;
}
.section-subtitle[data-v-03d4249a] {
font-size: 18px;
line-height: 0.95;
}
.cards-grid[data-v-03d4249a] {
flex-direction: column;
gap: 14px;
max-width: none;
}
.tariff-card[data-v-03d4249a] {
width: 100%;
min-height: 440px;
border-radius: 30px;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}
.card-header[data-v-03d4249a] {
height: 155px;
padding: 18px 18px 16px;
justify-content: flex-start;
gap: 8px;
}
.glass-badge[data-v-03d4249a] {
display: none;
}
.card-sim[data-v-03d4249a] {
top: -28px;
right: -116px;
width: 270px;
height: auto;
}
.tariff-name[data-v-03d4249a] {
font-size: 31px;
line-height: 0.86;
letter-spacing: -0.05em;
}
.stickers-badge-wrapper[data-v-03d4249a] {
top: 108px;
right: 18px;
}
.tariff-card.plus .stickers-badge-wrapper[data-v-03d4249a],
.tariff-card.max .stickers-badge-wrapper[data-v-03d4249a] {
top: 108px;
right: 18px;
}
.stickers-badge[data-v-03d4249a] {
padding: 9px 7px;
transform: scale(0.88);
transform-origin: top right;
}
.stickers-badge[data-v-03d4249a]:hover {
transform: scale(0.88) translateY(-1px);
}
.stickers-badge[data-v-03d4249a]:active {
transform: scale(0.88) translateY(0);
}
.stickers-modal[data-v-03d4249a] {
top: 108px;
}
.tariff-card.plus .stickers-modal[data-v-03d4249a],
.tariff-card.max .stickers-modal[data-v-03d4249a] {
top: 108px;
}
.minutes-modal[data-v-03d4249a] {
top: 108px;
}
.tariff-card.plus .minutes-modal[data-v-03d4249a],
.tariff-card.max .minutes-modal[data-v-03d4249a] {
top: 108px;
}
.card-body[data-v-03d4249a],
.tariff-card.plus .card-body[data-v-03d4249a],
.tariff-card.max .card-body[data-v-03d4249a] {
align-items: flex-start;
gap: 28px;
padding: 20px 22px 30px;
}
.features[data-v-03d4249a] {
gap: 10px;
}
.features-label[data-v-03d4249a] {
font-size: 10px;
}
.feature[data-v-03d4249a] {
font-size: 18px;
}
.inline-icon[data-v-03d4249a] {
width: 18px;
height: 18px;
}
.inline-icon.infinity[data-v-03d4249a] {
width: 30px;
height: 14px;
}
.price-block[data-v-03d4249a],
.tariff-card.start .price-block[data-v-03d4249a] {
width: auto;
gap: 18px;
}
.price[data-v-03d4249a] {
font-size: 58px;
}
.price-period[data-v-03d4249a] {
font-size: 16px;
}
.btn-connect[data-v-03d4249a] {
height: 42px;
padding: 12px 18px;
border-radius: 12px;
font-size: 14px;
}
.btn-icon[data-v-03d4249a] {
width: 12px;
height: 12px;
}
}
body {
background: #f5f7fb;
color: #1d2433;
}
body.admin-overlay-open {
overflow: hidden;
}
.admin-view[data-v-7f16b328] {
display: flex;
flex-direction: column;
gap: 24px;
}
.admin-header[data-v-7f16b328] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
flex-wrap: wrap;
}
.header-actions[data-v-7f16b328] {
display: flex;
align-items: center;
gap: 16px;
}
.session-indicator[data-v-7f16b328] {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
color: #1e2e66;
}
.session-dot[data-v-7f16b328] {
width: 8px;
height: 8px;
border-radius: 50%;
background: #30b27a;
box-shadow: 0 0 0 6px rgba(48, 178, 122, 0.2);
}
.header-content h1[data-v-7f16b328] {
margin: 0;
font-size: 32px;
font-weight: 700;
}
.header-description[data-v-7f16b328] {
margin: 8px 0 0;
max-width: 560px;
color: #5f6b85;
font-size: 15px;
line-height: 1.5;
}
.status-stack[data-v-7f16b328] {
display: flex;
flex-direction: column;
gap: 10px;
}
.status[data-v-7f16b328] {
padding: 14px 18px;
border-radius: 18px;
border: 1px solid #e2e8f3;
background: #fff;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
color: #1f2433;
}
.status-error[data-v-7f16b328] {
border-color: #ffd9d5;
background: #fff4f2;
color: #c04741;
}
.status-success[data-v-7f16b328] {
border-color: #c8f0da;
background: #f2fff8;
color: #167d52;
}
.admin-layout[data-v-7f16b328] {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: 32px;
align-items: flex-start;
}
.admin-tabs[data-v-7f16b328] {
top: 24px;
align-self: flex-start;
background: #fff;
border: 1px solid #e2e8f3;
border-radius: 28px;
padding: 24px;
box-shadow: 0 24px 45px rgba(22, 34, 71, 0.08);
display: flex;
flex-direction: column;
gap: 16px;
}
.tabs-header[data-v-7f16b328] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.tabs-title[data-v-7f16b328] {
margin: 0;
font-size: 13px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #9aa4c0;
}
.view-toggle[data-v-7f16b328] {
display: flex;
gap: 4px;
background: #f0f2f8;
border-radius: 10px;
padding: 3px;
}
.view-toggle-btn[data-v-7f16b328] {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
border-radius: 7px;
background: transparent;
color: #7b86a5;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.view-toggle-btn[data-v-7f16b328]:hover {
color: #4f5871;
background: #e4e8f2;
}
.view-toggle-btn.active[data-v-7f16b328] {
background: #fff;
color: #1e2e66;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.page-group[data-v-7f16b328] {
display: flex;
flex-direction: column;
gap: 8px;
}
.page-group-title[data-v-7f16b328] {
margin: 0;
padding: 8px 0 4px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #7b86a5;
border-top: 1px solid #e8edf7;
}
.page-group:first-child .page-group-title[data-v-7f16b328] {
border-top: none;
padding-top: 0;
}
.tab-btn[data-v-7f16b328] {
width: 100%;
text-align: left;
border: 1px solid transparent;
border-radius: 18px;
padding: 14px 16px;
background: transparent;
display: flex;
flex-direction: column;
gap: 4px;
cursor: pointer;
color: #4f5871;
font-size: 15px;
font-weight: 600;
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.tab-btn[data-v-7f16b328]:hover {
border-color: #dbe4ff;
background: #f5f7ff;
color: #1f2a5c;
}
.tab-btn.active[data-v-7f16b328] {
border-color: #c7d5ff;
background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%);
color: #1e2e66;
box-shadow: 0 16px 35px rgba(52, 82, 255, 0.18);
}
.tab-label[data-v-7f16b328] {
font-size: 15px;
font-weight: 600;
}
.tab-label-row[data-v-7f16b328] {
display: flex;
align-items: center;
gap: 8px;
justify-content: space-between;
}
.tab-unsaved-badge[data-v-7f16b328] {
padding: 1px 6px;
border-radius: 999px;
background: #fff7e3;
color: #a14b00;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.9;
}
.tab-description[data-v-7f16b328] {
font-size: 13px;
color: #7b86a5;
font-weight: 500;
}
.admin-content[data-v-7f16b328] {
min-height: 100%;
}
.admin-overlay[data-v-7f16b328] {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 20;
padding: 24px;
}
.overlay-card[data-v-7f16b328] {
background: #fff;
border-radius: 28px;
padding: 32px;
box-shadow: 0 30px 70px rgba(22, 34, 71, 0.2);
text-align: center;
max-width: 420px;
border: 1px solid #dfe6fb;
}
.overlay-card.has-error[data-v-7f16b328] {
border-color: #ffd2d2;
background: #fff6f6;
}
.overlay-error[data-v-7f16b328] {
display: flex;
flex-direction: column;
gap: 8px;
}
.overlay-title[data-v-7f16b328] {
margin: 16px 0 6px;
font-size: 20px;
font-weight: 600;
color: #1e2b4d;
}
.overlay-subtitle[data-v-7f16b328] {
margin: 0;
font-size: 15px;
color: #5c6687;
}
.loader[data-v-7f16b328] {
width: 48px;
height: 48px;
border-radius: 50%;
border: 4px solid #dfe4ff;
border-top-color: #3d5afe;
margin: 0 auto;
animation: spin-7f16b328 0.9s linear infinite;
}
.fade-overlay-enter-active[data-v-7f16b328],
.fade-overlay-leave-active[data-v-7f16b328] {
transition: opacity 0.25s ease;
}
.fade-overlay-enter-from[data-v-7f16b328],
.fade-overlay-leave-to[data-v-7f16b328] {
opacity: 0;
}
.fade-slide-enter-active[data-v-7f16b328],
.fade-slide-leave-active[data-v-7f16b328] {
transition: opacity 0.25s ease, transform 0.25s ease;
}
.fade-slide-enter-from[data-v-7f16b328],
.fade-slide-leave-to[data-v-7f16b328] {
opacity: 0;
transform: translateY(12px);
}
.admin-card[data-v-7f16b328] {
background: #fff;
border: 1px solid #e2e8f3;
border-radius: 30px;
box-shadow: 0 30px 60px rgba(15, 23, 42, 0.08);
overflow: hidden;
}
[data-v-7f16b328] .card-header {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 26px 32px;
background: #f9fbff;
border-bottom: 1px solid #e8edf7;
align-items: center;
flex-wrap: wrap;
}
[data-v-7f16b328] .card-header h2 {
margin: 0;
font-size: 24px;
color: #1e2b4d;
}
[data-v-7f16b328] .toggle {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #5a6379;
margin-top: 6px;
}
[data-v-7f16b328] .card-actions {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.card-body[data-v-7f16b328] {
padding: 28px 32px 32px;
display: grid;
gap: 18px;
}
[data-v-7f16b328] .form-field {
display: grid;
gap: 8px;
font-size: 14px;
color: #4c5672;
}
[data-v-7f16b328] .form-field input,[data-v-7f16b328] .form-field textarea,[data-v-7f16b328] .form-field select {
width: 100%;
border-radius: 14px;
border: 1px solid #d7dfee;
background: #f8faff;
color: #1f2433;
padding: 10px 14px;
font-size: 14px;
resize: vertical;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
[data-v-7f16b328] .form-field input:focus,[data-v-7f16b328] .form-field textarea:focus,[data-v-7f16b328] .form-field select:focus {
border-color: #8aa2ff;
box-shadow: 0 0 0 2px rgba(138, 162, 255, 0.2);
outline: none;
background: #fff;
}
[data-v-7f16b328] .image-input {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
[data-v-7f16b328] .image-input input[type='file'] {
padding: 8px;
border-radius: 14px;
border: 1px dashed #cbd5f0;
background: #f8faff;
cursor: pointer;
}
[data-v-7f16b328] .btn {
border: 1px solid #d5ddf1;
border-radius: 14px;
padding: 10px 18px;
background: #fff;
color: #1d2433;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
[data-v-7f16b328] .btn:hover:not(:disabled) {
background: #f2f4ff;
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}
[data-v-7f16b328] .btn.ghost {
background: #f5f6ff;
border-color: #d9e0ff;
color: #1e2e66;
}
[data-v-7f16b328] .btn.primary {
background: #3d5afe;
border-color: #3d5afe;
color: #fff;
box-shadow: 0 15px 30px rgba(61, 90, 254, 0.35);
}
[data-v-7f16b328] .btn.primary:hover:not(:disabled) {
background: #3048d0;
border-color: #3048d0;
color: #fff;
box-shadow: 0 12px 24px rgba(48, 72, 208, 0.4);
}
[data-v-7f16b328] .btn:disabled {
opacity: 0.6;
cursor: not-allowed;
box-shadow: none;
}
[data-v-7f16b328] .link-btn {
background: none;
border: none;
color: #f25a67;
cursor: pointer;
font-size: 13px;
font-weight: 600;
text-decoration: underline;
padding: 0;
}
.list-header[data-v-7f16b328] {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
gap: 12px;
flex-wrap: wrap;
}
.list-header h3[data-v-7f16b328] {
margin: 0;
font-size: 18px;
color: #1f2b45;
}
.block[data-v-7f16b328] {
border: 1px solid #e3e9f7;
border-radius: 20px;
padding: 18px;
display: grid;
gap: 14px;
background: #f8faff;
}
.block-header[data-v-7f16b328] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.grid-2[data-v-7f16b328] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
}
.grid-2[data-v-7f16b328] > * {
align-self: start;
}
.stickers-grid[data-v-7f16b328] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.info-text[data-v-7f16b328] {
margin: 0;
padding: 14px 18px;
background: #f0f4ff;
border: 1px solid #d9e0ff;
border-radius: 14px;
color: #4c5672;
font-size: 14px;
line-height: 1.5;
}
.hint[data-v-7f16b328] {
font-size: 12px;
color: #7b86a5;
margin-top: 4px;
}
.checkbox-group[data-v-7f16b328] {
display: flex;
flex-wrap: wrap;
gap: 10px;
position: relative;
padding: 2px;
margin: -2px;
border-radius: 14px;
}
.checkbox-option[data-v-7f16b328] {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border: 1px solid #d7dfee;
border-radius: 12px;
background: #fff;
font-size: 14px;
color: #4c5672;
white-space: nowrap;
flex-shrink: 0;
}
.checkbox-option input[data-v-7f16b328] {
margin: 0;
}
.field-dirty[data-v-7f16b328] {
border-color: #ffce5c !important;
background: #fffaf0 !important;
box-shadow: 0 0 0 1px rgba(255, 206, 92, 0.7);
}
.field-dirty.checkbox-group[data-v-7f16b328] {
/* Safari fix: use outline instead of box-shadow on flex container */
box-shadow: none;
outline: 2px solid #ffce5c;
outline-offset: -1px;
background: transparent !important;
}
.field-dirty.checkbox-group .checkbox-option[data-v-7f16b328] {
border-color: #ffce5c;
background: #fffaf0;
}
.field-dirty[data-v-7f16b328] .image-input input[type='file'] {
border-color: #ffce5c;
background: #fffaf0;
}
@keyframes spin-7f16b328 {
to {
transform: rotate(360deg);
}
}
@media (max-width: 1024px) {
.admin-layout[data-v-7f16b328] {
grid-template-columns: 1fr;
}
.admin-tabs[data-v-7f16b328] {
position: static;
flex-direction: row;
flex-wrap: wrap;
}
.tab-btn[data-v-7f16b328] {
flex: 1 1 240px;
}
}
@media (max-width: 768px) {
.admin-view[data-v-7f16b328] {
padding: 24px 20px 40px;
}
.card-body[data-v-7f16b328] {
padding: 24px;
}
[data-v-7f16b328] .card-header {
padding: 22px 24px;
}
}
/* Bonuses preview wrapper */
[data-v-7f16b328] .bonuses-preview-wrapper {
position: relative;
background: #4A48E9;
border-radius: 28px;
padding: 28px;
overflow: hidden;
}
[data-v-7f16b328] .bonuses-preview-bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
[data-v-7f16b328] .bonuses-preview-pattern {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.2;
mix-blend-mode: luminosity;
}
/* Multi-page preview grid (for sections on multiple pages) */
[data-v-7f16b328] .multi-page-preview-grid,[data-v-7f16b328] .help-make-dream-preview-grid {
display: grid;
gap: 24px;
}
[data-v-7f16b328] .preview-variant-label,[data-v-7f16b328] .preview-label {
margin: 0 0 12px;
font-size: 14px;
font-weight: 600;
color: #5c6687;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.media-card[data-v-5fcbe6b5] {
background: #fff;
border-radius: 32px;
border: 1px solid #e2e8f3;
box-shadow: 0 35px 80px rgba(28, 44, 91, 0.1);
padding: 32px;
display: flex;
flex-direction: column;
gap: 24px;
}
.media-card__header[data-v-5fcbe6b5] {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: flex-start;
flex-wrap: wrap;
}
.media-card__actions[data-v-5fcbe6b5] {
display: flex;
gap: 12px;
}
.media-stats[data-v-5fcbe6b5] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
}
.media-stat[data-v-5fcbe6b5] {
padding: 16px;
border-radius: 20px;
border: 1px solid #edf1fb;
background: #f8fafc;
display: flex;
flex-direction: column;
gap: 6px;
}
.media-stat__label[data-v-5fcbe6b5] {
color: #6b778f;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.media-stat__value[data-v-5fcbe6b5] {
font-size: 20px;
}
.media-empty[data-v-5fcbe6b5] {
padding: 40px;
text-align: center;
border: 1px dashed #d5dcef;
border-radius: 24px;
color: #6b738c;
}
.media-grid[data-v-5fcbe6b5] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 18px;
list-style: none;
padding: 0;
margin: 0;
}
.media-grid-item[data-v-5fcbe6b5] {
border: 1px solid #e2e8f3;
border-radius: 24px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
background: #fdfdff;
}
.media-thumb[data-v-5fcbe6b5] {
width: 100%;
border-radius: 18px;
border: 1px solid #eceff8;
background: #f6f7fb;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.media-thumb--image img[data-v-5fcbe6b5] {
width: 100%;
height: 100%;
object-fit: cover;
}
.media-thumb__ext[data-v-5fcbe6b5] {
font-weight: 700;
color: #111c4e;
font-size: 28px;
}
.media-meta[data-v-5fcbe6b5] {
display: flex;
flex-direction: column;
gap: 4px;
}
.media-key[data-v-5fcbe6b5] {
font-weight: 600;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.media-info[data-v-5fcbe6b5] {
margin: 0;
color: #6b778f;
font-size: 14px;
}
.media-meta__badges[data-v-5fcbe6b5] {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.media-badge[data-v-5fcbe6b5] {
padding: 4px 10px;
border-radius: 999px;
background: #e8f2ff;
color: #1c3faa;
font-size: 12px;
font-weight: 600;
}
.media-badge--muted[data-v-5fcbe6b5] {
background: #f4f7fb;
color: #6b738c;
}
.media-actions[data-v-5fcbe6b5] {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.link-btn[data-v-5fcbe6b5] {
border: none;
background: none;
padding: 0;
color: #1c3faa;
font-weight: 600;
cursor: pointer;
}
.media-footer[data-v-5fcbe6b5] {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: flex-end;
}
@media (max-width: 768px) {
.media-page[data-v-5fcbe6b5] {
padding: 0;
}
.media-card[data-v-5fcbe6b5] {
border-radius: 0;
padding: 24px 16px;
}
.media-filter[data-v-5fcbe6b5] {
grid-template-columns: 1fr;
}
.media-grid[data-v-5fcbe6b5] {
grid-template-columns: 1fr;
}
}
.utm-page[data-v-a7b1fcdd] {
display: flex;
flex-direction: column;
gap: 24px;
}
.utm-tabs[data-v-a7b1fcdd] {
display: inline-flex;
gap: 4px;
padding: 4px;
background: #fff;
border-radius: 12px;
border: 1px solid #e2e8f3;
}
.utm-tab[data-v-a7b1fcdd] {
border: none;
border-radius: 8px;
padding: 8px 16px;
background: transparent;
font-weight: 600;
font-size: 14px;
color: #4f5871;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.utm-tab[data-v-a7b1fcdd]:hover {
background: #f5f7fb;
}
.utm-tab.active[data-v-a7b1fcdd] {
background: #111c4e;
color: #fff;
}
.utm-content[data-v-a7b1fcdd] {
display: flex;
flex-direction: column;
gap: 24px;
}
.card[data-v-a7b1fcdd] {
background: #fff;
border-radius: 20px;
padding: 24px;
border: 1px solid #e2e8f3;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}
.card-header[data-v-a7b1fcdd] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.card-title[data-v-a7b1fcdd] {
margin: 0 0 16px;
font-size: 18px;
font-weight: 700;
}
.card-header .card-title[data-v-a7b1fcdd] {
margin: 0;
}
.generator-form[data-v-a7b1fcdd] {
display: flex;
flex-direction: column;
gap: 16px;
}
.form-row[data-v-a7b1fcdd] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 640px) {
.form-row[data-v-a7b1fcdd] {
grid-template-columns: 1fr;
}
}
.required[data-v-a7b1fcdd] {
color: #f25a67;
}
.generated-url[data-v-a7b1fcdd] {
margin-top: 8px;
padding-top: 16px;
border-top: 1px solid #e2e8f3;
}
.url-output[data-v-a7b1fcdd] {
display: flex;
gap: 8px;
}
.url-output input[data-v-a7b1fcdd] {
flex: 1;
font-family: monospace;
font-size: 13px;
}
.save-campaign[data-v-a7b1fcdd] {
margin-top: 8px;
padding-top: 16px;
border-top: 1px solid #e2e8f3;
}
.save-row[data-v-a7b1fcdd] {
display: flex;
gap: 8px;
}
.save-row input[data-v-a7b1fcdd] {
flex: 1;
}
.campaigns-list[data-v-a7b1fcdd] {
display: flex;
flex-direction: column;
gap: 8px;
}
.campaign-item[data-v-a7b1fcdd] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 12px 16px;
background: #f8faff;
border-radius: 12px;
border: 1px solid #e2e8f3;
transition: background 0.15s ease, border-color 0.15s ease;
}
.campaign-item.clickable[data-v-a7b1fcdd] {
cursor: pointer;
}
.campaign-item.clickable[data-v-a7b1fcdd]:hover {
background: #eef1ff;
border-color: #c5d0ff;
}
.campaign-info[data-v-a7b1fcdd] {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.campaign-name[data-v-a7b1fcdd] {
font-weight: 600;
color: #1d2433;
}
.edit-input[data-v-a7b1fcdd] {
padding: 4px 8px;
border: 1px solid #3d5afe;
border-radius: 6px;
font-size: 14px;
}
.campaign-keys[data-v-a7b1fcdd] {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.key-badge[data-v-a7b1fcdd] {
display: inline-block;
padding: 2px 8px;
background: #e8ecff;
color: #3d5afe;
border-radius: 4px;
font-size: 12px;
font-family: monospace;
}
.campaign-url[data-v-a7b1fcdd] {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 8px 12px;
background: #f1f5f9;
border-radius: 8px;
max-width: 100%;
}
.url-text[data-v-a7b1fcdd] {
font-size: 12px;
color: #475569;
word-break: break-all;
flex: 1;
min-width: 0;
}
.copy-btn[data-v-a7b1fcdd] {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e2e8f3;
background: #fff;
border-radius: 8px;
color: #5f6b85;
cursor: pointer;
transition: all 0.2s ease;
}
.copy-btn[data-v-a7b1fcdd]:hover {
background: #eef1ff;
border-color: #3d5afe;
color: #3d5afe;
}
.copy-btn.copied[data-v-a7b1fcdd] {
background: #e8f5e9;
border-color: #4caf50;
color: #2e7d32;
}
.copy-btn svg[data-v-a7b1fcdd] {
display: block;
}
.campaign-actions[data-v-a7b1fcdd] {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.loading[data-v-a7b1fcdd], .empty[data-v-a7b1fcdd] {
padding: 32px;
text-align: center;
color: #5f6b85;
}
/* Month Picker */
.month-picker[data-v-a7b1fcdd] {
margin-bottom: 20px;
padding: 20px;
background: #f8faff;
border: 1px solid #e2e8f3;
border-radius: 16px;
}
.month-picker-header[data-v-a7b1fcdd] {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 16px;
}
.year-nav[data-v-a7b1fcdd] {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid #d5ddf1;
background: #fff;
border-radius: 10px;
color: #5f6b85;
cursor: pointer;
transition: all 0.15s ease;
}
.year-nav[data-v-a7b1fcdd]:hover {
background: #eef1ff;
border-color: #3d5afe;
color: #3d5afe;
}
.year-label[data-v-a7b1fcdd] {
font-size: 20px;
font-weight: 700;
color: #1d2433;
min-width: 60px;
text-align: center;
}
.month-grid[data-v-a7b1fcdd] {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
}
@media (max-width: 560px) {
.month-grid[data-v-a7b1fcdd] {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 380px) {
.month-grid[data-v-a7b1fcdd] {
grid-template-columns: repeat(3, 1fr);
}
}
.month-chip[data-v-a7b1fcdd] {
padding: 10px 4px;
border: 1px solid #d5ddf1;
background: #fff;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
color: #4f5871;
cursor: pointer;
transition: all 0.15s ease;
text-align: center;
}
.month-chip[data-v-a7b1fcdd]:hover {
background: #eef1ff;
border-color: #97a5ff;
color: #3d5afe;
}
.month-chip.selected[data-v-a7b1fcdd] {
background: #3d5afe;
border-color: #3d5afe;
color: #fff;
font-weight: 600;
box-shadow: 0 2px 8px rgba(61, 90, 254, 0.3);
}
.month-hint[data-v-a7b1fcdd] {
margin-top: 12px;
font-size: 12px;
color: #8992a8;
text-align: center;
}
.month-selection-info[data-v-a7b1fcdd] {
color: #3d5afe;
font-weight: 500;
}
/* Stats Filters */
.stats-filters[data-v-a7b1fcdd] {
display: flex;
flex-direction: column;
gap: 16px;
}
.checkbox-filters[data-v-a7b1fcdd] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
.filter-group[data-v-a7b1fcdd] {
background: #f8faff;
border: 1px solid #e2e8f3;
border-radius: 12px;
overflow: hidden;
}
.filter-group-header[data-v-a7b1fcdd] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
background: #fff;
border-bottom: 1px solid #e2e8f3;
}
.filter-group-title[data-v-a7b1fcdd] {
font-weight: 600;
font-size: 13px;
color: #1d2433;
font-family: monospace;
}
.selected-count[data-v-a7b1fcdd] {
color: #3d5afe;
font-weight: 700;
margin-left: 4px;
}
.filter-group-content[data-v-a7b1fcdd] {
padding: 10px;
}
.filter-group-actions[data-v-a7b1fcdd] {
display: flex;
gap: 6px;
}
.mini-btn[data-v-a7b1fcdd] {
padding: 3px 8px;
border: 1px solid #d5ddf1;
background: #f8faff;
border-radius: 5px;
font-size: 11px;
color: #5f6b85;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mini-btn[data-v-a7b1fcdd]:hover {
background: #eef1ff;
border-color: #3d5afe;
color: #3d5afe;
}
.checkbox-list[data-v-a7b1fcdd] {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 200px;
overflow-y: auto;
padding-right: 6px;
}
.checkbox-list[data-v-a7b1fcdd]::-webkit-scrollbar {
width: 5px;
}
.checkbox-list[data-v-a7b1fcdd]::-webkit-scrollbar-track {
background: #e8ecf3;
border-radius: 3px;
}
.checkbox-list[data-v-a7b1fcdd]::-webkit-scrollbar-thumb {
background: #c0c8d8;
border-radius: 3px;
}
.checkbox-list[data-v-a7b1fcdd]::-webkit-scrollbar-thumb:hover {
background: #9aa3b3;
}
.checkbox-item[data-v-a7b1fcdd] {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 8px;
background: #fff;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s ease;
}
.checkbox-item[data-v-a7b1fcdd]:hover {
background: #eef1ff;
}
.checkbox-item input[type="checkbox"][data-v-a7b1fcdd] {
width: 15px;
height: 15px;
accent-color: #3d5afe;
cursor: pointer;
flex-shrink: 0;
}
.checkbox-label[data-v-a7b1fcdd] {
font-size: 12px;
color: #1d2433;
word-break: break-word;
line-height: 1.3;
}
.no-filters-hint[data-v-a7b1fcdd] {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: #e8f4fd;
border-radius: 10px;
font-size: 13px;
color: #1565c0;
}
.filter-actions[data-v-a7b1fcdd] {
display: flex;
gap: 12px;
margin-top: 8px;
}
/* Stats Results */
.stats-card[data-v-a7b1fcdd] {
overflow: visible;
}
.stats-header[data-v-a7b1fcdd] {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.stats-period-badge[data-v-a7b1fcdd] {
padding: 5px 12px;
background: #eef1ff;
color: #3d5afe;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
}
.export-btn[data-v-a7b1fcdd] {
margin-left: auto;
display: flex;
align-items: center;
gap: 6px;
}
/* 3 Purchase Blocks */
.purchase-blocks[data-v-a7b1fcdd] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 28px;
}
@media (max-width: 720px) {
.purchase-blocks[data-v-a7b1fcdd] {
grid-template-columns: 1fr;
}
}
.purchase-block[data-v-a7b1fcdd] {
position: relative;
padding: 24px;
border-radius: 16px;
border: 1px solid;
overflow: hidden;
}
.purchase-block[data-v-a7b1fcdd]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
}
.purchase-new[data-v-a7b1fcdd] {
background: #f0faf0;
border-color: #c8e6c9;
}
.purchase-new[data-v-a7b1fcdd]::before {
background: #43a047;
}
.purchase-new .purchase-icon[data-v-a7b1fcdd] {
color: #43a047;
}
.purchase-new .purchase-count[data-v-a7b1fcdd] {
color: #2e7d32;
}
.purchase-additional[data-v-a7b1fcdd] {
background: #e8f0ff;
border-color: #bbcfff;
}
.purchase-additional[data-v-a7b1fcdd]::before {
background: #3d5afe;
}
.purchase-additional .purchase-icon[data-v-a7b1fcdd] {
color: #3d5afe;
}
.purchase-additional .purchase-count[data-v-a7b1fcdd] {
color: #283593;
}
.purchase-renewals[data-v-a7b1fcdd] {
background: #f3e8ff;
border-color: #d1b3ff;
}
.purchase-renewals[data-v-a7b1fcdd]::before {
background: #7c4dff;
}
.purchase-renewals .purchase-icon[data-v-a7b1fcdd] {
color: #7c4dff;
}
.purchase-renewals .purchase-count[data-v-a7b1fcdd] {
color: #4a148c;
}
.purchase-icon[data-v-a7b1fcdd] {
margin-bottom: 12px;
}
.purchase-label[data-v-a7b1fcdd] {
font-size: 14px;
font-weight: 600;
color: #4f5871;
margin-bottom: 8px;
}
.purchase-count[data-v-a7b1fcdd] {
font-size: 36px;
font-weight: 800;
line-height: 1;
margin-bottom: 8px;
}
.purchase-sum[data-v-a7b1fcdd] {
font-size: 16px;
font-weight: 600;
color: #5f6b85;
}
/* Compact Funnel */
.funnel-section[data-v-a7b1fcdd] {
padding-top: 24px;
border-top: 1px solid #e2e8f3;
}
.funnel-title[data-v-a7b1fcdd] {
margin: 0 0 16px;
font-size: 15px;
color: #1d2433;
font-weight: 600;
}
.funnel-compact[data-v-a7b1fcdd] {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.funnel-step[data-v-a7b1fcdd] {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 16px;
background: #f5f7fb;
border-radius: 10px;
min-width: 80px;
}
.funnel-step-value[data-v-a7b1fcdd] {
font-size: 20px;
font-weight: 700;
color: #1d2433;
}
.funnel-step-label[data-v-a7b1fcdd] {
font-size: 11px;
color: #5f6b85;
margin-top: 2px;
text-align: center;
}
.funnel-step-pct[data-v-a7b1fcdd] {
font-size: 11px;
color: #3d5afe;
font-weight: 600;
margin-top: 2px;
}
.funnel-arrow[data-v-a7b1fcdd] {
color: #c0c8d8;
display: flex;
align-items: center;
}
.total-conversion[data-v-a7b1fcdd] {
padding: 12px 16px;
background: #e8f5e9;
border-radius: 10px;
color: #2e7d32;
font-size: 14px;
}
/* Modal */
.modal-overlay[data-v-a7b1fcdd] {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-dialog[data-v-a7b1fcdd] {
background: #fff;
border-radius: 20px;
padding: 24px;
max-width: 400px;
width: 90%;
}
.modal-dialog h3[data-v-a7b1fcdd] {
margin: 0 0 12px;
}
.modal-dialog p[data-v-a7b1fcdd] {
margin: 0 0 20px;
color: #5f6b85;
}
.modal-actions[data-v-a7b1fcdd] {
display: flex;
gap: 12px;
}
/* Transitions */
.fade-enter-active[data-v-a7b1fcdd],
.fade-leave-active[data-v-a7b1fcdd] {
transition: opacity 0.2s ease;
}
.fade-enter-from[data-v-a7b1fcdd],
.fade-leave-to[data-v-a7b1fcdd] {
opacity: 0;
}
.refund-page[data-v-6663e181] {
display: flex;
flex-direction: column;
gap: 24px;
}
.card[data-v-6663e181] {
background: #fff;
border-radius: 20px;
padding: 24px;
border: 1px solid #e2e8f3;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}
.card-title[data-v-6663e181] {
margin: 0 0 16px;
font-size: 18px;
font-weight: 700;
}
.lookup-form[data-v-6663e181] {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 16px;
}
.lookup-form .form-field[data-v-6663e181] {
flex: 1;
min-width: 220px;
}
.reason-field[data-v-6663e181] {
margin-top: 20px;
}
.customer-summary[data-v-6663e181] {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 16px;
background: #f8faff;
border-radius: 14px;
border: 1px solid #e2e8f3;
}
.summary-row[data-v-6663e181] {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 16px;
font-size: 14px;
}
.summary-label[data-v-6663e181] {
color: #5f6b85;
font-weight: 600;
min-width: 100px;
}
.summary-value[data-v-6663e181] {
font-weight: 600;
color: #1d2433;
}
.summary-code[data-v-6663e181] {
font-size: 13px;
padding: 4px 8px;
background: #fff;
border-radius: 8px;
border: 1px solid #d7dfee;
word-break: break-all;
}
.invoice-list[data-v-6663e181] {
list-style: none;
margin: 20px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.invoice-item[data-v-6663e181] {
border: 1px solid #e2e8f3;
border-radius: 16px;
overflow: hidden;
background: #fafbfd;
}
.invoice-head[data-v-6663e181] {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border: none;
background: #fff;
cursor: pointer;
text-align: left;
font: inherit;
color: #1d2433;
transition: background 0.15s ease;
}
.invoice-head[data-v-6663e181]:hover {
background: #f5f7fb;
}
.chevron[data-v-6663e181] {
display: inline-block;
width: 8px;
height: 8px;
border-right: 2px solid #4f5871;
border-bottom: 2px solid #4f5871;
transform: rotate(-45deg);
transition: transform 0.2s ease;
flex-shrink: 0;
}
.chevron.open[data-v-6663e181] {
transform: rotate(45deg);
}
.head-main[data-v-6663e181] {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 16px;
flex: 1;
min-width: 0;
}
.head-date[data-v-6663e181] {
font-weight: 600;
}
.head-amount[data-v-6663e181] {
font-variant-numeric: tabular-nums;
color: #1e2e66;
}
.head-badges[data-v-6663e181] {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.badge[data-v-6663e181] {
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
border-radius: 999px;
text-transform: lowercase;
}
.badge-type[data-v-6663e181] {
background: #e8f0ff;
color: #3048d0;
}
.badge-inline[data-v-6663e181] {
vertical-align: baseline;
}
.badge-paid[data-v-6663e181] {
background: #e8fff0;
color: #167d52;
}
.badge-issued[data-v-6663e181] {
background: #fff8e6;
color: #b45309;
}
.badge-refunded[data-v-6663e181] {
background: #fff0f0;
color: #c04741;
}
.badge-neutral[data-v-6663e181] {
background: #eef1f7;
color: #4f5871;
}
.invoice-body[data-v-6663e181] {
padding: 16px;
border-top: 1px solid #e2e8f3;
background: #fff;
}
.detail-grid[data-v-6663e181] {
display: grid;
gap: 12px 24px;
margin: 0;
}
@media (min-width: 560px) {
.detail-grid[data-v-6663e181] {
grid-template-columns: 1fr 1fr;
}
}
.detail-pair dt[data-v-6663e181] {
margin: 0;
font-size: 12px;
font-weight: 600;
color: #5f6b85;
}
.detail-pair dd[data-v-6663e181] {
margin: 4px 0 0;
font-size: 14px;
color: #1d2433;
word-break: break-word;
}
.lines-title[data-v-6663e181] {
margin: 20px 0 10px;
font-size: 15px;
font-weight: 700;
}
.lines-table-wrap[data-v-6663e181] {
overflow-x: auto;
border-radius: 12px;
border: 1px solid #e2e8f3;
}
.lines-table[data-v-6663e181] {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.lines-table th[data-v-6663e181],
.lines-table td[data-v-6663e181] {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid #eef2f8;
}
.lines-table th[data-v-6663e181] {
background: #f8faff;
font-weight: 600;
color: #4c5672;
}
.lines-table tr:last-child td[data-v-6663e181] {
border-bottom: none;
}
.cell-mono[data-v-6663e181] {
font-size: 12px;
word-break: break-all;
}
.refund-row[data-v-6663e181] {
margin-top: 16px;
display: flex;
justify-content: flex-end;
}
.btn.primary.danger[data-v-6663e181] {
background: #c04741;
border-color: #c04741;
color: #fff;
box-shadow: 0 15px 30px rgba(192, 71, 65, 0.35);
}
.btn.primary.danger[data-v-6663e181]:hover:not(:disabled) {
background: #a03935;
border-color: #a03935;
color: #fff;
}
.refund-modal-overlay[data-v-6663e181] {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(15, 23, 42, 0.5);
}
.refund-modal[data-v-6663e181] {
width: 100%;
max-width: 480px;
padding: 32px;
border-radius: 24px;
background: #fff;
box-shadow: 0 35px 80px rgba(28, 44, 91, 0.25);
}
.refund-modal h3[data-v-6663e181] {
margin: 0 0 16px;
font-size: 22px;
font-weight: 700;
color: #1d2433;
}
.refund-modal-text[data-v-6663e181] {
margin: 0 0 12px;
font-size: 15px;
line-height: 1.5;
color: #5f6b85;
}
.refund-modal-text strong[data-v-6663e181] {
color: #1d2433;
}
.refund-modal-hint[data-v-6663e181] {
margin: 0 0 20px;
font-size: 13px;
color: #7a8499;
line-height: 1.45;
}
.refund-modal .status[data-v-6663e181] {
margin: 0 0 16px;
padding: 14px 18px;
border-radius: 18px;
border: 1px solid #e2e8f3;
font-size: 14px;
}
.refund-modal .status-error[data-v-6663e181] {
border-color: #ffd9d5;
background: #fff4f2;
color: #c04741;
}
.refund-modal-actions[data-v-6663e181] {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 12px;
margin-top: 8px;
}
.refund-modal .btn[data-v-6663e181] {
border: 1px solid #d5ddf1;
border-radius: 14px;
padding: 10px 18px;
background: #fff;
color: #1d2433;
font-weight: 600;
cursor: pointer;
font-size: 14px;
transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.refund-modal .btn[data-v-6663e181]:hover:not(:disabled) {
background: #f2f4ff;
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}
.refund-modal .btn.ghost[data-v-6663e181] {
background: #f5f6ff;
border-color: #d9e0ff;
color: #1e2e66;
}
.refund-modal .btn.primary.danger[data-v-6663e181] {
background: #c04741;
border-color: #c04741;
color: #fff;
box-shadow: 0 15px 30px rgba(192, 71, 65, 0.35);
}
.refund-modal .btn.primary.danger[data-v-6663e181]:hover:not(:disabled) {
background: #a03935;
border-color: #a03935;
color: #fff;
}
.refund-modal .btn[data-v-6663e181]:disabled {
opacity: 0.6;
cursor: not-allowed;
box-shadow: none;
}
.refund-modal-fade-enter-active[data-v-6663e181],
.refund-modal-fade-leave-active[data-v-6663e181] {
transition: opacity 0.2s ease;
}
.refund-modal-fade-enter-active .refund-modal[data-v-6663e181],
.refund-modal-fade-leave-active .refund-modal[data-v-6663e181] {
transition: transform 0.2s ease;
}
.refund-modal-fade-enter-from[data-v-6663e181],
.refund-modal-fade-leave-to[data-v-6663e181] {
opacity: 0;
}
.refund-modal-fade-enter-from .refund-modal[data-v-6663e181],
.refund-modal-fade-leave-to .refund-modal[data-v-6663e181] {
transform: scale(0.96);
}
.help-requests-page[data-v-7ba0e820] {
display: flex;
flex-direction: column;
gap: 16px;
}
.card[data-v-7ba0e820] {
background: #fff;
border-radius: 20px;
padding: 24px;
border: 1px solid #e2e8f3;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}
.card-header[data-v-7ba0e820] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.card-header-actions[data-v-7ba0e820] {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.card-title[data-v-7ba0e820] {
margin: 0;
font-size: 18px;
font-weight: 700;
}
.filter-tabs[data-v-7ba0e820] {
display: inline-flex;
gap: 4px;
padding: 4px;
background: #f5f7fb;
border-radius: 999px;
border: 1px solid #e2e8f3;
}
.filter-tab[data-v-7ba0e820] {
border: none;
border-radius: 999px;
padding: 6px 14px;
background: transparent;
font-size: 13px;
font-weight: 600;
color: #4f5871;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.filter-tab.active[data-v-7ba0e820] {
background: #111c4e;
color: #fff;
box-shadow: 0 4px 10px rgba(17, 28, 78, 0.25);
}
.filter-tab[data-v-7ba0e820]:not(.active):hover {
background: #e2e8f3;
}
.filter-count[data-v-7ba0e820] {
font-size: 11px;
font-weight: 700;
min-width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 0 5px;
background: rgba(0, 0, 0, 0.08);
}
.filter-tab.active .filter-count[data-v-7ba0e820] {
background: rgba(255, 255, 255, 0.2);
}
.empty-state[data-v-7ba0e820] {
text-align: center;
padding: 48px 24px;
color: #5f6b85;
font-size: 15px;
}
.requests-list[data-v-7ba0e820] {
display: flex;
flex-direction: column;
gap: 8px;
}
.request-card[data-v-7ba0e820] {
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px 20px;
background: #fff;
border: 1px solid #e2e8f3;
border-radius: 16px;
cursor: pointer;
text-align: left;
font: inherit;
color: #1d2433;
transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.request-card[data-v-7ba0e820]:hover {
background: #f5f7fb;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}
.request-card.is-active[data-v-7ba0e820] {
border-color: #3d5afe;
box-shadow: 0 0 0 2px rgba(61, 90, 254, 0.15);
}
.request-card-head[data-v-7ba0e820] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.request-card-main[data-v-7ba0e820] {
display: flex;
align-items: baseline;
gap: 12px;
min-width: 0;
}
.request-name[data-v-7ba0e820] {
font-weight: 600;
font-size: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.request-date[data-v-7ba0e820] {
font-size: 13px;
color: #5f6b85;
white-space: nowrap;
}
.request-card-preview[data-v-7ba0e820] {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
font-size: 13px;
color: #5f6b85;
}
.badge[data-v-7ba0e820] {
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
border-radius: 999px;
white-space: nowrap;
flex-shrink: 0;
}
.badge-new[data-v-7ba0e820] {
background: #e8f0ff;
color: #3048d0;
}
.badge-completed[data-v-7ba0e820] {
background: #e8fff0;
color: #167d52;
}
.badge-neutral[data-v-7ba0e820] {
background: #eef1f7;
color: #4f5871;
}
/* Detail overlay / modal */
.detail-overlay[data-v-7ba0e820] {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(15, 23, 42, 0.5);
}
.detail-modal[data-v-7ba0e820] {
width: 100%;
max-width: 560px;
max-height: 90vh;
overflow-y: auto;
padding: 32px;
border-radius: 24px;
background: #fff;
box-shadow: 0 35px 80px rgba(28, 44, 91, 0.25);
display: flex;
flex-direction: column;
gap: 24px;
}
.detail-header[data-v-7ba0e820] {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.detail-title[data-v-7ba0e820] {
margin: 0;
font-size: 20px;
font-weight: 700;
color: #1d2433;
}
.detail-close[data-v-7ba0e820] {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: 10px;
border: 1px solid #e2e8f3;
background: #f5f7fb;
color: #4f5871;
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s ease;
}
.detail-close[data-v-7ba0e820]:hover {
background: #e2e8f3;
}
.detail-grid[data-v-7ba0e820] {
display: grid;
gap: 16px 24px;
margin: 0;
}
@media (min-width: 480px) {
.detail-grid[data-v-7ba0e820] {
grid-template-columns: 1fr 1fr;
}
}
.detail-pair dt[data-v-7ba0e820] {
margin: 0;
font-size: 12px;
font-weight: 600;
color: #5f6b85;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.detail-pair dd[data-v-7ba0e820] {
margin: 4px 0 0;
font-size: 15px;
color: #1d2433;
word-break: break-word;
}
.detail-pair--full[data-v-7ba0e820] {
grid-column: 1 / -1;
}
.detail-comment[data-v-7ba0e820] {
white-space: pre-wrap;
background: #f8faff;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid #e2e8f3;
font-size: 14px;
line-height: 1.5;
}
.detail-actions[data-v-7ba0e820] {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: flex-end;
}
/* Transitions */
.detail-fade-enter-active[data-v-7ba0e820],
.detail-fade-leave-active[data-v-7ba0e820] {
transition: opacity 0.2s ease;
}
.detail-fade-enter-active .detail-modal[data-v-7ba0e820],
.detail-fade-leave-active .detail-modal[data-v-7ba0e820] {
transition: transform 0.2s ease;
}
.detail-fade-enter-from[data-v-7ba0e820],
.detail-fade-leave-to[data-v-7ba0e820] {
opacity: 0;
}
.detail-fade-enter-from .detail-modal[data-v-7ba0e820],
.detail-fade-leave-to .detail-modal[data-v-7ba0e820] {
transform: scale(0.96);
}
.users-page[data-v-3e6240bb] {
padding: 24px;
background: #fff;
border-radius: 24px;
border: 1px solid #e2e8f3;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}
.users-header[data-v-3e6240bb] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.users-header h2[data-v-3e6240bb] {
margin: 0;
font-size: 20px;
font-weight: 700;
}
.users-header .btn[data-v-3e6240bb] {
display: inline-flex;
align-items: center;
gap: 8px;
}
.users-table-wrapper[data-v-3e6240bb] {
overflow-x: auto;
}
.users-table[data-v-3e6240bb] {
width: 100%;
border-collapse: collapse;
}
.users-table th[data-v-3e6240bb],
.users-table td[data-v-3e6240bb] {
padding: 14px 16px;
text-align: left;
border-bottom: 1px solid #e8edf5;
}
.users-table th[data-v-3e6240bb] {
font-weight: 600;
font-size: 13px;
color: #5f6b85;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.users-table tbody tr[data-v-3e6240bb]:hover {
background: #f8faff;
}
.users-table tbody tr.current-user[data-v-3e6240bb] {
background: #f0f4ff;
}
.user-name[data-v-3e6240bb] {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
}
.you-badge[data-v-3e6240bb] {
display: inline-block;
padding: 2px 8px;
background: #e8f0ff;
color: #3d5afe;
font-size: 11px;
font-weight: 600;
border-radius: 999px;
}
.role-badge[data-v-3e6240bb] {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
}
.role-badge.admin[data-v-3e6240bb] {
background: #fff0f0;
color: #c04741;
}
.role-badge.manager[data-v-3e6240bb] {
background: #e8fff0;
color: #167d52;
}
.role-badge.utm_manager[data-v-3e6240bb] {
background: #e8f0ff;
color: #3d5afe;
}
.actions[data-v-3e6240bb] {
display: flex;
gap: 8px;
}
.no-actions[data-v-3e6240bb] {
color: #9ca3af;
}
.btn.small[data-v-3e6240bb] {
padding: 6px 12px;
font-size: 13px;
}
.btn.danger[data-v-3e6240bb] {
color: #c04741;
border-color: #ffd9d5;
}
.btn.danger[data-v-3e6240bb]:hover:not(:disabled) {
background: #fff4f2;
}
.btn.primary.danger[data-v-3e6240bb] {
background: #c04741;
border-color: #c04741;
color: #fff;
box-shadow: 0 15px 30px rgba(192, 71, 65, 0.35);
}
.btn.primary.danger[data-v-3e6240bb]:hover:not(:disabled) {
background: #a03935;
border-color: #a03935;
}
/* Modal Styles - using :global() since Teleport moves content to body */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 24px;
}
.modal {
background: #fff;
border-radius: 24px;
padding: 32px;
max-width: 480px;
width: 100%;
box-shadow: 0 35px 80px rgba(28, 44, 91, 0.25);
}
.modal h3 {
margin: 0 0 24px;
font-size: 22px;
font-weight: 700;
}
.modal form {
display: flex;
flex-direction: column;
gap: 18px;
}
.modal .form-field {
display: grid;
gap: 8px;
font-size: 14px;
color: #4c5672;
}
.modal .form-field input,.modal .form-field select {
width: 100%;
border-radius: 14px;
border: 1px solid #d7dfee;
background: #f8faff;
color: #1f2433;
padding: 10px 14px;
font-size: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.modal .form-field input:focus,.modal .form-field select:focus {
border-color: #8aa2ff;
box-shadow: 0 0 0 2px rgba(138, 162, 255, 0.2);
outline: none;
background: #fff;
}
.modal .role-description {
padding: 14px 18px;
background: #f8faff;
border-radius: 14px;
border: 1px solid #e8edf5;
}
.modal .role-description p {
margin: 0;
font-size: 13px;
color: #5f6b85;
line-height: 1.5;
}
.modal .modal-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 8px;
}
.modal .btn {
border: 1px solid #d5ddf1;
border-radius: 14px;
padding: 10px 18px;
background: #fff;
color: #1d2433;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.modal .btn:hover:not(:disabled) {
background: #f2f4ff;
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}
.modal .btn.ghost {
background: #f5f6ff;
border-color: #d9e0ff;
color: #1e2e66;
}
.modal .btn.primary {
background: #3d5afe;
border-color: #3d5afe;
color: #fff;
box-shadow: 0 15px 30px rgba(61, 90, 254, 0.35);
}
.modal .btn.primary:hover:not(:disabled) {
background: #3048d0;
border-color: #3048d0;
color: #fff;
box-shadow: 0 12px 24px rgba(48, 72, 208, 0.4);
}
.modal .btn:disabled {
opacity: 0.6;
cursor: not-allowed;
box-shadow: none;
}
.modal .btn.primary.danger {
background: #c04741;
border-color: #c04741;
color: #fff;
box-shadow: 0 15px 30px rgba(192, 71, 65, 0.35);
}
.modal .btn.primary.danger:hover:not(:disabled) {
background: #a03935;
border-color: #a03935;
}
.modal-confirm p {
margin: 0 0 12px;
color: #5f6b85;
line-height: 1.5;
}
.modal-confirm .warning {
color: #c04741;
font-size: 13px;
}
.modal .status-error {
padding: 14px 18px;
border-radius: 18px;
border: 1px solid #ffd9d5;
background: #fff4f2;
color: #c04741;
}
/* Fade transition */
.fade-enter-active,.fade-leave-active {
transition: opacity 0.2s ease;
}
.fade-enter-from,.fade-leave-to {
opacity: 0;
}
@media (max-width: 640px) {
.users-page[data-v-3e6240bb] {
padding: 16px;
}
.users-header[data-v-3e6240bb] {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.users-table th[data-v-3e6240bb],
.users-table td[data-v-3e6240bb] {
padding: 10px 12px;
}
.actions[data-v-3e6240bb] {
flex-direction: column;
}
}
[data-v-3c920e1d]::global(body) {
background: #f5f7fb;
color: #1d2433;
}
.admin-shell[data-v-3c920e1d] {
min-height: 100vh;
display: flex;
flex-direction: column;
padding: 32px 48px 48px;
}
.status-stack {
display: flex;
flex-direction: column;
gap: 10px;
}
.status {
padding: 14px 18px;
border-radius: 18px;
border: 1px solid #e2e8f3;
background: #fff;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
color: #1f2433;
}
.status-error {
border-color: #ffd9d5;
background: #fff4f2;
color: #c04741;
}
.status-success {
border-color: #c8f0da;
background: #f2fff8;
color: #167d52;
}
.admin-login-card[data-v-3c920e1d] {
max-width: 480px;
margin: 60px auto;
padding: 48px;
border-radius: 32px;
background: #fff;
border: 1px solid #e2e8f3;
box-shadow: 0 35px 80px rgba(28, 44, 91, 0.12);
display: flex;
flex-direction: column;
gap: 24px;
}
.login-intro h1[data-v-3c920e1d] {
margin: 0 0 12px;
font-size: 32px;
}
.login-intro p[data-v-3c920e1d] {
margin: 0;
color: #5f6b85;
line-height: 1.5;
}
.login-form[data-v-3c920e1d] {
display: flex;
flex-direction: column;
gap: 18px;
}
.login-error[data-v-3c920e1d] {
margin: 0;
}
.login-submit[data-v-3c920e1d] {
width: 100%;
margin-top: 8px;
}
.admin-shell-content[data-v-3c920e1d] {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 16px;
}
.admin-shell-header[data-v-3c920e1d] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
flex-wrap: wrap;
}
.header-content h1[data-v-3c920e1d] {
margin: 0;
font-size: 32px;
font-weight: 700;
}
.header-description[data-v-3c920e1d] {
margin: 8px 0 0;
max-width: 560px;
color: #5f6b85;
font-size: 15px;
line-height: 1.5;
}
.header-actions[data-v-3c920e1d] {
display: flex;
align-items: center;
gap: 16px;
}
.header-actions .btn[data-v-3c920e1d] {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.link-btn {
background: none;
border: none;
color: #f25a67;
cursor: pointer;
font-size: 13px;
font-weight: 600;
text-decoration: underline;
padding: 0;
}
.btn {
border: 1px solid #d5ddf1;
border-radius: 14px;
padding: 10px 18px;
background: #fff;
color: #1d2433;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.btn:hover:not(:disabled) {
background: #f2f4ff;
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}
.btn.ghost {
background: #f5f6ff;
border-color: #d9e0ff;
color: #1e2e66;
}
.btn.primary {
background: #3d5afe;
border-color: #3d5afe;
color: #fff;
box-shadow: 0 15px 30px rgba(61, 90, 254, 0.35);
}
.btn.primary:hover:not(:disabled) {
background: #3048d0;
border-color: #3048d0;
color: #fff;
box-shadow: 0 12px 24px rgba(48, 72, 208, 0.4);
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
box-shadow: none;
}
.admin-shell-tabs-row[data-v-3c920e1d] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.admin-shell-tabs[data-v-3c920e1d] {
display: inline-flex;
gap: 8px;
padding: 6px;
background: #fff;
border-radius: 999px;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
border: 1px solid #e2e8f3;
}
.shell-tab[data-v-3c920e1d] {
border: none;
border-radius: 999px;
padding: 10px 20px;
background: transparent;
font-weight: 600;
color: #4f5871;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.shell-tab.active[data-v-3c920e1d] {
background: #111c4e;
color: #fff;
box-shadow: 0 12px 24px rgba(17, 28, 78, 0.35);
}
.user-info[data-v-3c920e1d] {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
background: #fff;
border-radius: 999px;
border: 1px solid #e2e8f3;
font-size: 14px;
}
.user-role[data-v-3c920e1d] {
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
}
.user-role.admin[data-v-3c920e1d] {
background: #fff0f0;
color: #c04741;
}
.user-role.manager[data-v-3c920e1d] {
background: #e8fff0;
color: #167d52;
}
.user-role.utm_manager[data-v-3c920e1d] {
background: #e8f0ff;
color: #3d5afe;
}
.user-name[data-v-3c920e1d] {
font-weight: 600;
color: #1d2433;
}
.form-field {
display: grid;
gap: 8px;
font-size: 14px;
color: #4c5672;
}
.form-field input,.form-field textarea,.form-field select {
width: 100%;
border-radius: 14px;
border: 1px solid #d7dfee;
background: #f8faff;
color: #1f2433;
padding: 10px 14px;
font-size: 14px;
resize: vertical;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus {
border-color: #8aa2ff;
box-shadow: 0 0 0 2px rgba(138, 162, 255, 0.2);
outline: none;
background: #fff;
}
.admin-shell-body[data-v-3c920e1d] {
flex: 1;
min-height: 0;
}
@media (max-width: 768px) {
.admin-shell[data-v-3c920e1d] {
padding: 24px 20px 32px;
}
.admin-shell-tabs[data-v-3c920e1d] {
flex-wrap: wrap;
}
}
.login-view[data-v-528861fe] {
background: linear-gradient(to bottom, #7fabce 0%, #fff 100%);
min-height: 100dvh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.login-logo[data-v-528861fe] {
position: absolute;
left: 36px;
top: 36px;
z-index: 2;
display: block;
}
.login-logo__img[data-v-528861fe] {
height: 37px;
width: auto;
display: block;
}
.login-mobile-header[data-v-528861fe] {
display: none;
}
.login-container[data-v-528861fe] {
width: 100%;
max-width: 716px;
padding: 0 20px;
box-sizing: border-box;
position: relative;
z-index: 1;
}
.card[data-v-528861fe] {
background: #fff;
border-radius: 29px;
padding: 82px 32px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
box-sizing: border-box;
box-shadow:
0 20px 44px rgba(0, 0, 0, 0.04),
0 81px 81px rgba(0, 0, 0, 0.03),
0 183px 109px rgba(0, 0, 0, 0.02),
0 325px 130px rgba(0, 0, 0, 0.01);
}
.card--verification[data-v-528861fe] {
gap: 48px;
align-items: center;
}
.title[data-v-528861fe] {
margin: 0;
font-size: 32px;
font-weight: 600;
color: #1e1e1e;
letter-spacing: -0.64px;
text-align: center;
}
.form[data-v-528861fe] {
display: flex;
flex-direction: column;
gap: 32px;
width: 100%;
max-width: 408px;
align-self: stretch;
margin: 0 auto;
}
.field-group[data-v-528861fe] {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
width: 100%;
}
.verify-form[data-v-528861fe] {
display: flex;
flex-direction: column;
gap: 48px;
width: 100%;
max-width: 408px;
align-items: center;
}
.verify-code-group[data-v-528861fe] {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
width: 100%;
}
.code-inputs[data-v-528861fe] {
display: flex;
gap: 19px;
justify-content: center;
}
.code-input[data-v-528861fe] {
width: 64px;
height: 82px;
background: rgba(235, 235, 235, 0.5);
border: none;
border-radius: 17px;
font-size: 48px;
font-weight: 500;
color: #1e1e1e;
text-align: center;
outline: none;
box-sizing: border-box;
letter-spacing: -0.48px;
}
.code-input[data-v-528861fe]::placeholder {
color: rgba(30, 30, 30, 0.4);
}
.field[data-v-528861fe] {
display: block;
background: rgba(235, 235, 235, 0.5);
padding: 21px;
border-radius: 12px;
width: 100%;
box-sizing: border-box;
}
.input[data-v-528861fe] {
width: 100%;
padding: 0;
box-sizing: border-box;
border: 0;
background: transparent;
outline: none;
font-size: 16px;
font-weight: 500;
color: #1e1e1e;
letter-spacing: -0.16px;
}
.input[data-v-528861fe]::placeholder {
color: rgba(30, 30, 30, 0.4);
}
.btn-continue[data-v-528861fe] {
width: 100%;
padding: 21px;
border: none;
border-radius: 12px;
background: #c3fd56;
color: #1e1e1e;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: opacity 0.2s ease;
box-sizing: border-box;
}
.card--verification .btn-continue[data-v-528861fe] {
border-radius: 14px;
}
.btn-continue[data-v-528861fe]:hover:not(:disabled) {
opacity: 0.9;
}
.btn-continue[data-v-528861fe]:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.error-text[data-v-528861fe] {
color: #ff3b30;
font-size: 14px;
margin: 0;
text-align: center;
}
.error-text--field[data-v-528861fe] {
text-align: left;
font-size: 13px;
line-height: 1.35;
padding: 0 2px;
}
.error-text--below-inputs[data-v-528861fe] {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 0 8px;
}
.verify-title[data-v-528861fe] {
margin: 0;
font-size: 32px;
font-weight: 600;
color: #1e1e1e;
line-height: 1.2;
letter-spacing: -0.64px;
text-align: center;
max-width: 563px;
}
/* Mobile styles — по Figma 118-1935 */
@media (max-width: 480px) {
.login-logo[data-v-528861fe] {
display: none;
}
.login-view[data-v-528861fe] {
flex-direction: column;
align-items: stretch;
padding-top: 0;
min-height: 100dvh;
}
.login-mobile-header[data-v-528861fe] {
display: flex;
flex-shrink: 0;
width: 100%;
padding: 24px 16px;
align-items: center;
justify-content: space-between;
z-index: 2;
box-sizing: border-box;
}
.login-mobile-header__back[data-v-528861fe] {
display: flex;
align-items: center;
gap: 17px;
text-decoration: none;
color: #fff;
font-size: 21px;
font-weight: 500;
letter-spacing: -0.2px;
}
.login-mobile-header__back-icon[data-v-528861fe] {
width: 48px;
height: 48px;
display: block;
flex-shrink: 0;
}
.login-container[data-v-528861fe] {
flex: 1;
width: 100%;
max-width: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
min-height: 0;
}
.card[data-v-528861fe] {
flex: 1;
width: 100%;
border-radius: 24px 24px 0 0;
padding: 48px 24px 32px;
gap: 48px;
box-shadow: none;
}
.card--verification[data-v-528861fe] {
gap: 48px;
padding: 48px 24px 32px;
}
.title[data-v-528861fe] {
font-size: 40px;
text-align: center;
}
.form[data-v-528861fe] {
gap: 16px;
}
.verify-form[data-v-528861fe] {
gap: 48px;
}
.field[data-v-528861fe] {
padding: 21px;
border-radius: 12px;
min-height: 60px;
}
.btn-continue[data-v-528861fe] {
padding: 21px;
min-height: 60px;
border-radius: 12px;
}
.code-inputs[data-v-528861fe] {
gap: 12px;
}
.code-input[data-v-528861fe] {
width: 48px;
height: 60px;
font-size: 32px;
border-radius: 14px;
}
.verify-title[data-v-528861fe] {
font-size: 32px;
text-align: center;
}
}
.not-found[data-v-991740a1] {
background: transparent;
position: relative;
padding: 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
height: calc(100vh - var(--app-header-height, 72px));
height: calc(100dvh - var(--app-header-height, 72px));
overflow: hidden;
}
.not-found__content[data-v-991740a1] {
width: 100%;
max-width: 600px;
padding: 20px;
box-sizing: border-box;
position: relative;
z-index: 1;
}
/* Floating decorative elements */
.floater[data-v-991740a1] {
position: absolute;
border-radius: 50%;
pointer-events: none;
opacity: 0.15;
background: var(--color-accent);
filter: blur(60px);
}
.floater--1[data-v-991740a1] {
width: 300px;
height: 300px;
top: -100px;
left: -150px;
animation: float-1-991740a1 8s ease-in-out infinite;
}
.floater--2[data-v-991740a1] {
width: 200px;
height: 200px;
bottom: -50px;
right: -100px;
animation: float-2-991740a1 10s ease-in-out infinite;
}
.floater--3[data-v-991740a1] {
width: 150px;
height: 150px;
top: 50%;
right: -50px;
animation: float-3-991740a1 6s ease-in-out infinite;
}
@keyframes float-1-991740a1 {
0%, 100% { transform: translate(0, 0) scale(1);
}
50% { transform: translate(30px, 20px) scale(1.1);
}
}
@keyframes float-2-991740a1 {
0%, 100% { transform: translate(0, 0) scale(1);
}
50% { transform: translate(-20px, -30px) scale(1.05);
}
}
@keyframes float-3-991740a1 {
0%, 100% { transform: translate(0, 0);
}
50% { transform: translate(-15px, 15px);
}
}
/* Card */
.card[data-v-991740a1] {
background: #fff;
border-radius: 32px;
padding: 48px 40px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.1);
animation: card-appear-991740a1 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
transform: translateY(20px);
opacity: 0;
}
@keyframes card-appear-991740a1 {
to {
transform: translateY(0);
opacity: 1;
}
}
/* Error code 404 */
.error-code[data-v-991740a1] {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin-bottom: 16px;
}
.digit[data-v-991740a1] {
font-size: 96px;
font-weight: 800;
line-height: 1;
background: linear-gradient(135deg, var(--color-primary) 0%, #6366f1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.04em;
animation: digit-bounce-991740a1 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
transform: scale(0.5) translateY(20px);
opacity: 0;
}
.digit--first[data-v-991740a1] {
animation-delay: 0.2s;
}
.digit--zero[data-v-991740a1] {
background: linear-gradient(135deg, var(--color-accent) 0%, #a8e063 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation-delay: 0.35s;
}
.digit--last[data-v-991740a1] {
animation-delay: 0.5s;
}
@keyframes digit-bounce-991740a1 {
0% { transform: scale(0.5) translateY(20px); opacity: 0;
}
60% { transform: scale(1.08) translateY(-5px); opacity: 1;
}
100% { transform: scale(1) translateY(0); opacity: 1;
}
}
/* Mascot */
.mascot-wrapper[data-v-991740a1] {
width: 180px;
height: 150px;
margin-bottom: 8px;
animation: mascot-appear-991740a1 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
transform: scale(0.5) translateY(30px);
opacity: 0;
}
@keyframes mascot-appear-991740a1 {
0% { transform: scale(0.5) translateY(30px); opacity: 0;
}
60% { transform: scale(1.05) translateY(-5px); opacity: 1;
}
100% { transform: scale(1) translateY(0); opacity: 1;
}
}
.mascot-img[data-v-991740a1] {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Text */
.title[data-v-991740a1] {
margin: 0 0 12px;
font-size: 28px;
font-weight: 700;
color: #1e1e1e;
line-height: 1.2;
letter-spacing: -0.02em;
}
.subtitle[data-v-991740a1] {
margin: 0 0 32px;
font-size: 16px;
color: rgba(30, 30, 30, 0.6);
line-height: 1.5;
}
/* Button */
.home-btn[data-v-991740a1] {
min-width: 220px;
}
/* Mobile responsive */
@media (max-aspect-ratio: 3/4) {
.card[data-v-991740a1] {
border-radius: 24px;
padding: 32px 24px;
}
.digit[data-v-991740a1] {
font-size: 64px;
}
.mascot-wrapper[data-v-991740a1] {
width: 140px;
height: 120px;
}
.title[data-v-991740a1] {
font-size: 22px;
}
.subtitle[data-v-991740a1] {
font-size: 14px;
margin-bottom: 24px;
}
.floater--1[data-v-991740a1] { width: 200px; height: 200px;
}
.floater--2[data-v-991740a1] { width: 150px; height: 150px;
}
.floater--3[data-v-991740a1] { width: 100px; height: 100px;
}
}
@media (max-aspect-ratio: 2/3) {
.card[data-v-991740a1] {
padding: 24px 20px;
}
.digit[data-v-991740a1] {
font-size: 56px;
}
.mascot-wrapper[data-v-991740a1] {
width: 120px;
height: 100px;
}
.title[data-v-991740a1] {
font-size: 20px;
}
.subtitle[data-v-991740a1] {
font-size: 13px;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.card[data-v-991740a1],
.digit[data-v-991740a1],
.mascot-wrapper[data-v-991740a1],
.floater[data-v-991740a1] {
animation: none;
transform: none;
opacity: 1;
}
}
.pdf-viewer__embed[data-v-8b7bfb81] {
width: 100%;
min-height: 600px;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.08);
background: #fff;
}
.pdf-viewer__iframe[data-v-8b7bfb81] {
width: 100%;
height: 80vh;
min-height: 600px;
border: none;
}
.pdf-viewer__status[data-v-8b7bfb81] {
padding: 16px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.9);
}
.pdf-viewer__status--error[data-v-8b7bfb81] {
background: rgba(255, 240, 240, 0.8);
border-color: rgba(255, 180, 180, 0.9);
}
.pdf-viewer__status--loading[data-v-8b7bfb81] {
margin-bottom: 12px;
}
.pdf-viewer__error-title[data-v-8b7bfb81] {
font-weight: 600;
margin-bottom: 6px;
}
.pdf-viewer__error-text[data-v-8b7bfb81] {
opacity: 0.9;
margin-bottom: 12px;
}
.pdf-viewer__actions[data-v-8b7bfb81] {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.pdf-viewer__link[data-v-8b7bfb81] {
color: #4A48E9;
text-decoration: underline;
}
.docx-viewer[data-v-8b7bfb81] {
width: 100%;
min-width: 0; /* позволить контейнеру сжиматься во flex/grid */
}
.docx-viewer__hint[data-v-8b7bfb81] {
margin-bottom: 10px;
font-size: 13px;
opacity: 0.75;
}
.docx-viewer__content[data-v-8b7bfb81] {
background: #fff;
border-radius: 16px;
overflow-x: auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid rgba(0, 0, 0, 0.08);
padding: 12px;
max-width: 100%;
box-sizing: border-box;
}
/* Ограничить ширину контента на десктопе (формат «страницы»), на мобильных — на всю ширину */
@media (min-width: 769px) {
.docx-viewer__content[data-v-8b7bfb81] {
max-width: 210mm; /* A4 */
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 768px) {
.docx-viewer__content[data-v-8b7bfb81] {
padding: 8px;
border-radius: 12px;
}
}
/* docx-preview: сохраняем фон и центрирование; на мобильных масштаб через --doc-scale (задаётся в JS) */
.docx-viewer__content[data-v-8b7bfb81] .docx-wrapper {
background: transparent;
max-width: 100%;
min-width: 0;
zoom: var(--doc-scale, 1);
}
/* Убираем фиксированную width: 595.5pt у секций — иначе ломается вёрстка на мобильных */
.docx-viewer__content[data-v-8b7bfb81] .docx-wrapper section {
width: 100% !important;
max-width: 100%;
}
/* Адаптивность контента docx-preview: таблицы и блоки не вылезают за экран */
.docx-viewer__content[data-v-8b7bfb81] table,
.docx-viewer__content[data-v-8b7bfb81] img {
max-width: 100%;
height: auto;
}
/* Превью картинки — тот же вид что у docx */
.doc-viewer__img[data-v-8b7bfb81] {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.legal[data-v-7fcca51d] {
padding-top: 48px;
padding-bottom: 40px;
}
.legal__header[data-v-7fcca51d] {
margin-bottom: 20px;
}
.legal__header-row[data-v-7fcca51d] {
display: flex;
gap: 16px;
align-items: flex-start;
justify-content: space-between;
}
.legal__title[data-v-7fcca51d] {
margin: 0;
font-size: 32px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.1;
}
.legal__download[data-v-7fcca51d] {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 0 14px;
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.12);
background: rgba(255, 255, 255, 0.8);
color: #1e1e1e;
text-decoration: none;
font-weight: 600;
white-space: nowrap;
}
.legal__download[data-v-7fcca51d]:hover {
background: rgba(255, 255, 255, 0.95);
}
.legal__content[data-v-7fcca51d] {
background: rgba(255, 255, 255, 0.75);
border: 1px solid rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 20px;
padding: 24px;
color: #1e1e1e;
}
.legal__not-found[data-v-7fcca51d] {
background: rgba(255, 255, 255, 0.75);
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 20px;
padding: 24px;
}
.legal__not-found-title[data-v-7fcca51d] { margin: 0 0 6px; font-size: 20px;
}
.legal__not-found-text[data-v-7fcca51d] { margin: 0; opacity: 0.8;
}
@media (max-aspect-ratio: 2/3) {
.legal__header-row[data-v-7fcca51d] { align-items: stretch; flex-direction: column;
}
.legal__title[data-v-7fcca51d] { font-size: 22px;
}
.legal__content[data-v-7fcca51d] { padding: 16px;
}
}
/* Safari 26 Liquid Glass: fixed элемент должен иметь background-color: transparent,
чтобы status bar оставался прозрачным. Визуальный фон — в ::before (Safari его не учитывает). */
.header-fixed-wrap[data-v-8a8fb099] {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background-color: transparent;
}
.header-fixed-wrap[data-v-8a8fb099]::before {
content: '';
position: absolute;
inset: 0;
background-color: var(--color-bg, #ebebeb);
mask-image: linear-gradient(to bottom, black 0%, black 72%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 72%, transparent 100%);
z-index: -1;
}
.header-fixed-wrap.is-relative[data-v-8a8fb099] {
position: relative;
}
.header-fixed-wrap.is-relative[data-v-8a8fb099]::before {
display: none;
}
.header-fixed-wrap.is-landscape[data-v-8a8fb099] {
left: 50%;
right: auto;
width: var(--app-base-width, 100%);
transform: translateX(-50%) scale(calc(var(--app-scale, 1) * 1.001));
transform-origin: top center;
}
.app-header[data-v-8a8fb099] {
display: flex;
align-items: stretch;
box-sizing: border-box;
height: var(--app-header-height, 78px);
padding: 15px 18px;
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 20px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow: 0 12px 28px rgba(31, 31, 31, 0.06);
}
.header-inner[data-v-8a8fb099] {
flex: 1 1 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
align-content: center;
column-gap: 20px;
width: 100%;
min-width: 0;
min-height: 0;
}
.brand[data-v-8a8fb099] {
grid-column: 1;
justify-self: start;
align-self: center;
display: inline-flex;
align-items: center;
flex-shrink: 0;
cursor: pointer;
}
.logo[data-v-8a8fb099] {
height: 40px;
width: auto;
display: block;
}
.nav-shell[data-v-8a8fb099] {
grid-column: 2;
justify-self: center;
align-self: center;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px;
border-radius: 16px;
background: rgba(74, 72, 233, 0.08);
box-shadow: inset 0 0 0 1px rgba(74, 72, 233, 0.08);
}
.nav-pill[data-v-8a8fb099] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: 10px;
color: #1e1e1e;
font-weight: 500;
font-size: 16px;
line-height: 1.2;
letter-spacing: -0.02em;
text-decoration: none;
}
.nav-pill[data-v-8a8fb099]:hover {
color: var(--color-primary);
background: rgba(74, 72, 233, 0.08);
}
.nav-pill:hover .nav-icon[data-v-8a8fb099] {
filter: brightness(0) saturate(100%) invert(29%) sepia(83%) saturate(4258%) hue-rotate(231deg) brightness(93%) contrast(94%);
}
.nav-pill.router-link-active[data-v-8a8fb099] {
background: var(--color-primary);
color: #fff;
box-shadow: 0 10px 18px rgba(74, 72, 233, 0.24);
}
.nav-pill.router-link-active .nav-icon[data-v-8a8fb099] {
filter: brightness(0) saturate(100%) invert(100%);
}
/* Без transition на filter — Safari даёт розовый при интерполяции filter */
.nav-icon[data-v-8a8fb099] {
width: 15px;
height: 15px;
object-fit: contain;
flex: 0 0 auto;
filter: brightness(0) saturate(100%);
transition: none;
}
.nav-icon-profile[data-v-8a8fb099] {
width: 10px;
height: 13px;
}
.actions[data-v-8a8fb099] {
grid-column: 3;
justify-self: end;
align-self: center;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-shrink: 0;
min-width: 0;
}
.cabinet-pill[data-v-8a8fb099],
.mobile-cabinet-pill[data-v-8a8fb099] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 11px 14px;
border-radius: 15px;
background: var(--color-accent);
color: #45650a;
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-16);
line-height: 1.2;
letter-spacing: -0.02em;
text-decoration: none;
}
.cabinet-pill span[data-v-8a8fb099],
.mobile-cabinet-pill span[data-v-8a8fb099] {
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-16);
line-height: 1.2;
letter-spacing: -0.02em;
}
.cabinet-pill[data-v-8a8fb099]:hover,
.mobile-cabinet-pill[data-v-8a8fb099]:hover {
box-shadow: 0 12px 24px rgba(115, 145, 24, 0.3);
}
.mobile-menu-btn[data-v-8a8fb099] {
display: none;
width: 42px;
height: 42px;
border: none;
border-radius: 10px;
background: var(--color-primary);
padding: 0;
cursor: pointer;
}
.mobile-menu-btn span[data-v-8a8fb099] {
display: block;
width: 16px;
height: 2px;
margin: 0 auto 4px;
border-radius: 999px;
background: #fff;
}
.mobile-menu-btn span[data-v-8a8fb099]:last-child {
margin-bottom: 0;
}
.mobile-menu-backdrop[data-v-8a8fb099] {
position: fixed;
inset: 0;
z-index: 9998;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
}
.mobile-menu-panel[data-v-8a8fb099] {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 9999;
width: 320px;
max-width: 86vw;
padding: 18px;
background: #fff;
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
border-radius: 24px 0 0 24px;
display: flex;
flex-direction: column;
}
.mobile-menu-header[data-v-8a8fb099] {
display: flex;
justify-content: flex-end;
margin-bottom: 18px;
}
.mobile-menu-close[data-v-8a8fb099] {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 10px;
background: rgba(30, 30, 30, 0.08);
cursor: pointer;
}
.mobile-nav[data-v-8a8fb099] {
flex: 1;
}
.mobile-nav-list[data-v-8a8fb099] {
display: flex;
flex-direction: column;
gap: 10px;
padding: 0;
margin: 0;
list-style: none;
}
.mobile-nav-link[data-v-8a8fb099] {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-radius: 14px;
color: #1e1e1e;
font-weight: 500;
font-size: 18px;
line-height: 1.2;
text-decoration: none;
}
.mobile-nav-link:hover .mobile-nav-icon[data-v-8a8fb099],
.mobile-nav-link.router-link-active .mobile-nav-icon[data-v-8a8fb099] {
filter: brightness(0) saturate(100%) invert(29%) sepia(83%) saturate(4258%) hue-rotate(231deg) brightness(93%) contrast(94%);
}
.mobile-nav-link.router-link-active[data-v-8a8fb099] {
background: rgba(74, 72, 233, 0.12);
color: var(--color-primary);
}
.mobile-nav-icon[data-v-8a8fb099] {
width: 16px;
height: 16px;
flex: 0 0 auto;
filter: brightness(0) saturate(100%);
transition: none;
}
.mobile-menu-footer[data-v-8a8fb099] {
margin-top: 18px;
}
.mobile-menu-backdrop-enter-active[data-v-8a8fb099],
.mobile-menu-backdrop-leave-active[data-v-8a8fb099] {
transition: opacity 0.3s ease;
}
.mobile-menu-backdrop-enter-from[data-v-8a8fb099],
.mobile-menu-backdrop-leave-to[data-v-8a8fb099] {
opacity: 0;
}
.mobile-menu-panel-enter-active[data-v-8a8fb099] {
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-menu-panel-leave-active[data-v-8a8fb099] {
transition: transform 0.25s ease-in;
}
.mobile-menu-panel-enter-from[data-v-8a8fb099],
.mobile-menu-panel-leave-to[data-v-8a8fb099] {
transform: translateX(100%);
}
@media (max-aspect-ratio: 1/1) {
.nav-shell[data-v-8a8fb099],
.cabinet-pill[data-v-8a8fb099] {
display: none;
}
.mobile-menu-btn[data-v-8a8fb099] {
display: block;
}
}
@media (max-aspect-ratio: 3/4) {
.app-header[data-v-8a8fb099] {
padding: 12px 14px;
}
.logo[data-v-8a8fb099] {
height: 30px;
}
}
@media (max-aspect-ratio: 2/3) {
.app-header[data-v-8a8fb099] {
height: var(--app-header-height, 59px);
padding: 0 16px;
}
.logo[data-v-8a8fb099] {
height: 27px;
}
.mobile-menu-btn[data-v-8a8fb099] {
width: 32px;
height: 32px;
border-radius: 8px;
}
.mobile-menu-btn span[data-v-8a8fb099] {
width: 12px;
margin-bottom: 3px;
}
}
/* Колонка панели: gap 64px, соцсети 8px; сетка текста и ряд документов — на всю ширину, space-between + row-gap */
.footer-collage[data-v-fe0d39b9] {
--footer-text: #8e8e8e;
--footer-heading: #000000;
--footer-social-dark: #262626;
--footer-social-shadow:
0 4.96px 11.9px rgba(148, 148, 148, 0.05),
0 21.82px 21.82px rgba(148, 148, 148, 0.03),
0 48.59px 29.75px rgba(148, 148, 148, 0.02),
0 87.26px 34.71px rgba(148, 148, 148, 0.01);
position: relative;
width: 100%;
margin: 0;
padding: 46px 0 18px;
background: transparent;
box-sizing: border-box;
}
.footer-inner[data-v-fe0d39b9] {
width: min(1579px, calc(100% - 40px));
margin: 0 auto;
box-sizing: border-box;
}
.footer-panel[data-v-fe0d39b9] {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 64px;
width: 100%;
}
.brand-wrap[data-v-fe0d39b9] {
display: flex;
justify-content: center;
width: 100%;
margin: 0;
}
.brand-logo[data-v-fe0d39b9] {
width: 100%;
max-width: 100%;
height: auto;
display: block;
}
.footer-socials[data-v-fe0d39b9] {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
align-items: stretch;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
}
.footer-social-card[data-v-fe0d39b9] {
min-width: 0;
width: 100%;
border-radius: 16px;
background: #fff;
box-shadow: var(--footer-social-shadow);
transition:
background-color 0.3s ease,
box-shadow 0.3s ease;
}
.footer-social-link[data-v-fe0d39b9] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 39.154px;
min-height: 51.389px;
width: 100%;
height: 100%;
padding: 4.894px 4.894px 4.894px 14.683px;
border-radius: 12.847px;
text-decoration: none;
color: #000;
box-sizing: border-box;
}
.footer-social-card[data-v-fe0d39b9]:has(.footer-social-link:hover),
.footer-social-card[data-v-fe0d39b9]:has(.footer-social-link:focus-visible) {
background: var(--footer-social-dark);
box-shadow:
0 4.96px 11.9px rgba(148, 148, 148, 0.1),
0 21.82px 21.82px rgba(148, 148, 148, 0.09),
0 48.59px 29.75px rgba(148, 148, 148, 0.05),
0 87.26px 34.71px rgba(148, 148, 148, 0.01);
}
.footer-social-card--social-gap-tight .footer-social-link[data-v-fe0d39b9] {
gap: 30px;
}
.footer-social-label[data-v-fe0d39b9] {
font-family: Onest, system-ui, sans-serif;
font-size: clamp(12px, 2.8vw, 14.683px);
font-weight: 800;
line-height: 20.878px;
letter-spacing: 1.1746px;
text-transform: uppercase;
font-feature-settings: 'lnum', 'pnum';
flex: 1 1 auto;
min-width: 0;
color: #000;
transition: color 0.3s ease;
}
.footer-social-card:has(.footer-social-link:hover) .footer-social-label[data-v-fe0d39b9],
.footer-social-card:has(.footer-social-link:focus-visible) .footer-social-label[data-v-fe0d39b9] {
color: #fff;
}
.footer-social-icon-wrap[data-v-fe0d39b9] {
flex-shrink: 0;
width: 41.601px;
height: 41.601px;
display: grid;
place-items: center;
}
.footer-social-icon[data-v-fe0d39b9] {
display: block;
width: 41.601px;
height: 41.601px;
flex-shrink: 0;
}
.footer-social-icon-bg[data-v-fe0d39b9] {
fill: #f2f2f2;
}
.footer-social-icon-arrow[data-v-fe0d39b9] {
fill: #000;
}
.footer-info-grid[data-v-fe0d39b9] {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
row-gap: 20px;
column-gap: 0;
width: 100%;
box-sizing: border-box;
}
.footer-info-col[data-v-fe0d39b9] {
flex: 0 1 auto;
min-width: 0;
max-width: min(348px, 100%);
}
.footer-info-p[data-v-fe0d39b9] {
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
font-family: Onest, system-ui, sans-serif;
}
.footer-info-heading[data-v-fe0d39b9] {
display: block;
font-size: 14px;
font-weight: 600;
line-height: 16px;
color: var(--footer-heading);
margin: 0;
}
.footer-info-body[data-v-fe0d39b9] {
display: block;
font-size: 12px;
font-weight: 500;
line-height: 16px;
color: var(--footer-text);
margin: 0;
}
/* В макете между заголовком и текстом два переноса при leading 16px → 32px */
.footer-info-heading + .footer-info-body[data-v-fe0d39b9] {
margin-top: 32px;
}
.footer-info-body + .footer-info-body[data-v-fe0d39b9] {
margin-top: 32px;
}
@media (prefers-reduced-motion: reduce) {
.footer-social-card[data-v-fe0d39b9],
.footer-social-label[data-v-fe0d39b9] {
transition: none;
}
}
.footer-phone-link[data-v-fe0d39b9] {
color: inherit;
text-decoration: none;
font-weight: inherit;
}
.footer-phone-link[data-v-fe0d39b9]:hover {
color: var(--color-primary, #6366f1);
}
.footer-doc-nav[data-v-fe0d39b9] {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
row-gap: 20px;
column-gap: 0;
width: 100%;
box-sizing: border-box;
}
.footer-doc-link[data-v-fe0d39b9] {
display: block;
font-family: Onest, system-ui, sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1.2;
color: var(--footer-text);
text-decoration: underline;
text-decoration-skip-ink: none;
white-space: normal;
}
.footer-doc-link[data-v-fe0d39b9]:hover {
color: var(--color-primary, #6366f1);
}
.footer-info-body--meta-mobile[data-v-fe0d39b9],
.footer-doc-link-lines--mobile[data-v-fe0d39b9] {
display: none;
}
@media (max-aspect-ratio: 1 / 1) {
/* Figma mobile footer 141:1810 */
.footer-collage[data-v-fe0d39b9] {
width: 100%;
padding: 24px 0 64px;
background: #f5f5f5;
border-radius: 20px 20px 0 0;
box-sizing: border-box;
}
.footer-inner[data-v-fe0d39b9] {
width: var(--home-mobile-w-344, min(100%, calc(100vw - 32px)));
}
.footer-collage--with-padding .footer-inner[data-v-fe0d39b9] {
width: calc(100vw - 16px);
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.brand-wrap[data-v-fe0d39b9] {
order: 1;
margin-bottom: 32px;
}
.brand-logo[data-v-fe0d39b9] {
max-width: var(--home-mobile-w-312, 100%);
margin: 0 auto;
display: block;
}
.footer-panel[data-v-fe0d39b9] {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0 16px;
box-sizing: border-box;
}
.footer-socials[data-v-fe0d39b9] {
order: 2;
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 24px;
}
.footer-social-card[data-v-fe0d39b9] {
min-height: 54px;
box-shadow:
0 5.736px 13.765px rgba(148, 148, 148, 0.05),
0 25.237px 25.237px rgba(148, 148, 148, 0.03),
0 56.209px 34.414px rgba(148, 148, 148, 0.02),
0 100.947px 40.149px rgba(148, 148, 148, 0.01);
}
.footer-social-link[data-v-fe0d39b9] {
min-height: 54px;
height: auto;
padding: 4px 4px 4px 16px;
border-radius: 14.863px;
gap: 16px;
justify-content: space-between;
}
.footer-social-card--social-gap-tight .footer-social-link[data-v-fe0d39b9] {
gap: 16px;
}
.footer-social-label[data-v-fe0d39b9] {
font-size: 14px;
line-height: 24.153px;
letter-spacing: 1.12px;
flex: 0 1 auto;
width: auto;
max-width: 114px;
}
.footer-social-icon-wrap[data-v-fe0d39b9],
.footer-social-icon[data-v-fe0d39b9] {
width: 46px;
height: 46px;
}
.footer-info-grid[data-v-fe0d39b9] {
display: contents;
}
.footer-info-col--meta[data-v-fe0d39b9] {
order: 3;
margin-bottom: 48px;
text-align: center;
}
.footer-info-col--legal[data-v-fe0d39b9] {
order: 4;
margin-bottom: 24px;
text-align: center;
}
.footer-info-col--pd[data-v-fe0d39b9] {
order: 5;
margin-bottom: 48px;
text-align: center;
}
.footer-info-col--company[data-v-fe0d39b9] {
order: 7;
margin-bottom: 0;
text-align: center;
}
.footer-doc-nav[data-v-fe0d39b9] {
order: 6;
display: flex;
flex-direction: column;
align-items: center;
align-self: center;
justify-content: flex-start;
gap: 24px;
margin-bottom: 48px;
margin-left: auto;
margin-right: auto;
width: fit-content;
max-width: 100%;
box-sizing: border-box;
}
.footer-info-heading--meta-desktop[data-v-fe0d39b9],
.footer-info-body--meta-desktop[data-v-fe0d39b9] {
display: none;
}
.footer-info-body--meta-mobile[data-v-fe0d39b9] {
display: block;
margin-top: 0;
}
.footer-info-p--meta .footer-info-body--meta-mobile[data-v-fe0d39b9] {
margin-top: 0;
}
.footer-info-heading[data-v-fe0d39b9] {
font-size: 16px;
font-weight: 600;
line-height: 16px;
}
.footer-info-body[data-v-fe0d39b9] {
font-size: 12px;
line-height: 16px;
}
.footer-info-heading + .footer-info-body[data-v-fe0d39b9] {
margin-top: 16px;
}
.footer-info-body + .footer-info-body[data-v-fe0d39b9] {
margin-top: 16px;
}
.footer-info-col[data-v-fe0d39b9] {
max-width: none;
width: 100%;
}
.footer-doc-link[data-v-fe0d39b9] {
display: block;
width: fit-content;
max-width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.footer-doc-link-lines--mobile[data-v-fe0d39b9] {
display: block;
text-align: center;
}
.footer-doc-link-lines--desktop[data-v-fe0d39b9] {
display: none;
}
}
.chat-widget-container[data-v-36f2c56f] {
/* Контейнер для React-виджета, стили виджета управляются им самим */
}
.cookie-consent[data-v-6368fb6a] {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 9000;
display: flex;
align-items: center;
gap: 24px;
background: var(--color-surface);
padding: 20px 28px;
border-radius: var(--radius-lg);
box-shadow:
0 4px 24px rgba(0, 0, 0, 0.08),
0 8px 48px rgba(0, 0, 0, 0.04);
max-width: calc(100vw - 32px);
width: max-content;
}
.cookie-content[data-v-6368fb6a] {
display: flex;
flex-direction: column;
gap: 6px;
}
.cookie-title[data-v-6368fb6a] {
margin: 0;
font-size: var(--font-size-18);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
line-height: 1.3;
}
.cookie-text[data-v-6368fb6a] {
margin: 0;
font-size: var(--font-size-14);
font-weight: var(--font-weight-regular);
color: var(--color-text-secondary);
line-height: 1.5;
max-width: 520px;
}
.cookie-link[data-v-6368fb6a] {
color: var(--color-primary);
text-decoration: none;
transition: opacity 0.15s ease;
}
.cookie-link[data-v-6368fb6a]:hover {
opacity: 0.75;
}
.cookie-button[data-v-6368fb6a] {
flex-shrink: 0;
padding: 12px 28px;
background: var(--color-primary);
color: white;
border: none;
border-radius: var(--radius-md);
font-size: var(--font-size-16);
font-weight: var(--font-weight-medium);
cursor: pointer;
transition:
background-color 0.2s ease,
transform 0.15s ease,
box-shadow 0.2s ease;
}
.cookie-button[data-v-6368fb6a]:hover {
background: #3d3bc9;
box-shadow: 0 4px 16px rgba(74, 72, 233, 0.3);
}
.cookie-button[data-v-6368fb6a]:active {
transform: scale(0.97);
}
/* Transition */
.cookie-slide-enter-active[data-v-6368fb6a] {
transition:
opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cookie-slide-leave-active[data-v-6368fb6a] {
transition:
opacity 0.25s ease-out,
transform 0.25s ease-out;
}
.cookie-slide-enter-from[data-v-6368fb6a] {
opacity: 0;
transform: translateX(-50%) translateY(100%);
}
.cookie-slide-leave-to[data-v-6368fb6a] {
opacity: 0;
transform: translateX(-50%) translateY(20px);
}
/* Mobile */
@media (max-width: 640px) {
.cookie-consent[data-v-6368fb6a] {
flex-direction: column;
align-items: stretch;
gap: 16px;
bottom: 16px;
left: 16px;
right: 16px;
transform: none;
width: auto;
max-width: none;
padding: 20px;
}
.cookie-text[data-v-6368fb6a] {
max-width: none;
}
.cookie-button[data-v-6368fb6a] {
width: 100%;
padding: 14px 28px;
}
.cookie-slide-enter-from[data-v-6368fb6a] {
opacity: 0;
transform: translateY(100%);
}
.cookie-slide-leave-to[data-v-6368fb6a] {
opacity: 0;
transform: translateY(20px);
}
}
main.container[data-v-8bd61c2e] { position: relative;
}
main.container.with-fixed-header[data-v-8bd61c2e] { padding-top: calc(var(--app-header-offset-top) + var(--app-header-height));
}
/* Global scaling shell styles */
.app-scale-shell[data-v-8bd61c2e] { position: relative; width: 100%; display: flex; justify-content: center;
}
.app-scale-inner[data-v-8bd61c2e] {
transform-origin: top center;
width: 100%;
min-height: 100dvh;
position: relative;
}
.app-scale-inner.scaled[data-v-8bd61c2e] { position: absolute; top: 0; left: 50%; margin: 0;
}
/* Global loader overlay — Safari Liquid Glass: фон на absolute-ребёнке, чтобы не тинтить toolbar */
.app-loader[data-v-8bd61c2e] {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
}
.app-loader-bg[data-v-8bd61c2e] {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #4A48E9 0%, #6366f1 50%, #4A48E9 100%);
background-size: 200% 200%;
animation: gradient-shift-8bd61c2e 3s ease infinite;
}
@keyframes gradient-shift-8bd61c2e {
0%, 100% { background-position: 0% 50%;
}
50% { background-position: 100% 50%;
}
}
.loader-content[data-v-8bd61c2e] {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.loader-spinner[data-v-8bd61c2e] {
position: relative;
width: 64px;
height: 64px;
}
.spinner-ring[data-v-8bd61c2e] {
position: absolute;
inset: 0;
border: 3px solid transparent;
border-radius: 50%;
}
.spinner-ring[data-v-8bd61c2e]:nth-child(1) {
border-top-color: rgba(255, 255, 255, 0.9);
animation: spin-8bd61c2e 1s linear infinite;
}
.spinner-ring[data-v-8bd61c2e]:nth-child(2) {
inset: 6px;
border-right-color: rgba(255, 255, 255, 0.6);
animation: spin-8bd61c2e 1.5s linear infinite reverse;
}
.spinner-ring[data-v-8bd61c2e]:nth-child(3) {
inset: 12px;
border-bottom-color: rgba(255, 255, 255, 0.3);
animation: spin-8bd61c2e 2s linear infinite;
}
@keyframes spin-8bd61c2e {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}
.loader-text[data-v-8bd61c2e] {
margin: 0;
font-size: 16px;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
letter-spacing: 0.5px;
}
/* Loader fade transition */
.loader-fade-enter-active[data-v-8bd61c2e] {
transition: opacity 0.3s ease;
}
.loader-fade-leave-active[data-v-8bd61c2e] {
transition: opacity 0.5s ease;
pointer-events: none;
}
.loader-fade-enter-from[data-v-8bd61c2e],
.loader-fade-leave-to[data-v-8bd61c2e] {
opacity: 0;
pointer-events: none;
}
/* Телефон в ландшафте: полноэкранная подсказка повернуть устройство */
.phone-landscape-overlay[data-v-8bd61c2e] {
position: fixed;
inset: 0;
z-index: 10050;
display: flex;
align-items: center;
justify-content: center;
padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
box-sizing: border-box;
pointer-events: auto;
}
.phone-landscape-backdrop[data-v-8bd61c2e] {
position: absolute;
inset: 0;
background: linear-gradient(145deg, #3d3bc9 0%, #4a48e9 45%, #6366f1 100%);
}
.phone-landscape-panel[data-v-8bd61c2e] {
position: relative;
z-index: 1;
max-width: 320px;
text-align: center;
color: rgba(255, 255, 255, 0.96);
}
.phone-landscape-icons[data-v-8bd61c2e] {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 20px;
}
.phone-landscape-phone[data-v-8bd61c2e] {
opacity: 0.95;
transform-origin: center center;
animation: phone-landscape-to-portrait-8bd61c2e 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.phone-landscape-rotate[data-v-8bd61c2e] {
opacity: 0.88;
flex-shrink: 0;
}
@keyframes phone-landscape-to-portrait-8bd61c2e {
0%,
12% {
transform: rotate(90deg);
}
40%,
60% {
transform: rotate(0deg);
}
88%,
100% {
transform: rotate(90deg);
}
}
@media (prefers-reduced-motion: reduce) {
.phone-landscape-phone[data-v-8bd61c2e] {
animation: none;
transform: rotate(0deg);
}
}
.phone-landscape-title[data-v-8bd61c2e] {
margin: 0 0 12px;
font-family: Onest, system-ui, sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1.25;
letter-spacing: 0.02em;
}
.phone-landscape-text[data-v-8bd61c2e] {
margin: 0;
font-family: Onest, system-ui, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.45;
color: rgba(255, 255, 255, 0.88);
}
.rotate-prompt-fade-enter-active[data-v-8bd61c2e],
.rotate-prompt-fade-leave-active[data-v-8bd61c2e] {
transition: opacity 0.25s ease;
}
.rotate-prompt-fade-enter-from[data-v-8bd61c2e],
.rotate-prompt-fade-leave-to[data-v-8bd61c2e] {
opacity: 0;
}
/* Design tokens: colors, typography, radii, spacing, shadows */
:root {
/* Colors */
--color-bg: #EBEBEB; /* site background */
--color-surface: #FFFFFF; /* cards, header background */
--color-primary: #4A48E9; /* brand blue */
--color-accent: #C3FD56; /* lime frame */
--color-shadow-accent: rgba(164, 213, 73, 0.3); /* A4D549 @ 30% */
--color-text: #111111;
--color-text-secondary: #555555;
/* Typography */
--font-family-sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
"Segoe UI Emoji";
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-size-14: 14px;
--font-size-16: 16px;
--font-size-18: 18px;
--font-size-20: 20px;
--font-size-24: 24px; /* header nav */
/* Radii */
--radius-lg: 20px; /* header corner */
--radius-md: 12px;
--radius-sm: 8px; /* icon button */
/* Spacing scale */
--space-4: 4px;
--space-8: 8px;
--space-12: 12px;
--space-16: 16px;
--space-20: 20px;
--space-24: 24px;
--space-32: 32px;
--space-40: 40px;
/* Shadows */
--shadow-elev-1: 0 4px 4px var(--color-shadow-accent); /* drop shadow */
--shadow-inner-subtle: inset 0 0 7px rgba(0, 0, 0, 0.08); /* inner shadow */
}
@media (prefers-color-scheme: dark) {
/* Keep light design tokens; site is specified light. Reserved in case of dark theme later. */
}
/* Base/reset and app-wide styles */
@font-face {
font-family: 'Rosencrantz NBP';
src: url('/fonts/Rosencrantz/Rosencrantz.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
* { box-sizing: border-box; }
/*
* Фон страницы:
* - Desktop: фон на html (всегда виден, даже за scaled контентом)
* - Mobile: фон через body::after до safe-area для Safari Liquid Glass
*/
html {
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
min-height: 100dvh;
/* Desktop: фон на html — надёжно виден везде */
background-color: var(--page-bg-color, var(--color-bg, #ebebeb));
transition: background-color 0.3s ease;
/* Плавный скролл при переходах между страницами */
scroll-behavior: smooth;
}
body {
margin: 0;
min-height: 100dvh;
font-family: var(--font-family-sans);
font-weight: var(--font-weight-regular);
line-height: 1.4;
color: var(--color-text);
background-color: transparent;
position: relative;
}
/* Фоновое изображение через псевдоэлемент для анимации opacity */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: var(--page-bg-image);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: -1;
}
body.has-bg-image::before {
opacity: 1;
}
#app {
min-height: 100dvh;
display: flex;
flex-direction: column;
background-color: transparent;
}
/*
* iOS 26+ Safari Liquid Glass (только mobile, aspect < 1:1):
* - html прозрачный
* - Фон через body::after до safe-area
* - Панель Safari остаётся стеклянной
*/
@media (max-aspect-ratio: 1/1) {
html {
background-color: transparent;
}
body {
overscroll-behavior: none;
}
/* Фон через псевдоэлемент, не доходя до safe-area */
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: env(safe-area-inset-bottom, 0px);
background-color: var(--page-bg-color, var(--color-bg, #ebebeb));
transition: background-color 0.3s ease;
pointer-events: none;
z-index: -2;
}
/* Изображение тоже до safe-area */
body::before {
bottom: env(safe-area-inset-bottom, 0px);
}
}
a {
color: var(--color-primary);
text-decoration: none;
}
img, svg { display: block; max-width: 100%; }
/* Anti-drag / anti-longpress (best-effort, not a security boundary) */
img, svg, video, canvas {
-webkit-user-drag: none;
user-select: none;
-webkit-touch-callout: none;
}
/* Layout helpers */
main { flex: 1 1 auto; }
/*
* Prevent Safari zoom on input focus (iOS).
* Safari zooms when input font-size < 16px; 16px prevents auto-zoom.
*/
@media (max-width: 768px) {
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
font-size: 16px;
}
}
.br-mobile { display: none; }
.br-desktop { display: inline; }
@media (max-aspect-ratio: 2/3) {
.br-mobile { display: inline; }
.br-desktop { display: none; }
}
/* Utility classes: layout, spacing, alignment */
:root {
--app-header-height: 72px;
--app-header-offset-top: 40px;
--plan-sticky-offset-extra: 0px;
}
@media (max-aspect-ratio: 2/3) {
:root { --app-header-height: 59px; --app-header-offset-top: 8px; --plan-sticky-offset-extra: 8px; }
}
.container {
width: 100%;
margin-inline: auto;
padding-inline: 40px;
}
/* Responsive container paddings (portrait/square only, by aspect ratio)
For any portrait (<1), immediately use "3:4" behavior to avoid broken mid range */
@media (max-aspect-ratio: 1/1) {
.container { padding-inline: 24px; }
}
@media (max-aspect-ratio: 2/3) {
.container { padding-inline: 8px; }
}
.header-padding { padding-top: 40px; }
@media (max-aspect-ratio: 2/3) {
.header-padding { padding-top: 8px; }
}
.footer-padding { padding-bottom: 40px; }
.u-flex { display: flex; }
.u-inline-flex { display: inline-flex; }
.u-align-center { align-items: center; }
.u-justify-center { justify-content: center; }
.u-justify-between { justify-content: space-between; }
.u-gap-8 { gap: 8px; }
.u-gap-12 { gap: 12px; }
.u-gap-16 { gap: 16px; }
.u-gap-24 { gap: 24px; }
.u-p-8 { padding: 8px; }
.u-p-12 { padding: 12px; }
.u-p-16 { padding: 16px; }
.u-px-16 { padding-left: 16px; padding-right: 16px; }
.u-px-24 { padding-left: 24px; padding-right: 24px; }
.u-px-40 { padding-left: 40px; padding-right: 40px; }
.u-rounded-20 { border-radius: 20px; }
.u-rounded-8 { border-radius: 8px; }
.u-bg-surface { background: var(--color-surface); }
.u-text-primary { color: var(--color-primary); }
.u-text-24 { font-size: var(--font-size-24); }
.u-text-medium { font-weight: var(--font-weight-medium); }
.u-hide-scrollbar { scrollbar-width: none; }
.u-hide-scrollbar::-webkit-scrollbar { display: none; }
.u-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* ========== Page Transitions ========== */
/* Grid container для наложения страниц при переходе */
.page-transition-grid {
display: grid;
grid-template-columns: 1fr;
/* auto чтобы высота определялась содержимым, не схлопывалась */
grid-template-rows: auto;
}
.page-transition-grid > * {
grid-column: 1;
grid-row: 1;
/* Выравнивание по началу, чтобы элементы накладывались сверху */
align-self: start;
}
/* Main pages: только кроссфейд по прозрачности (без сдвига) */
.page-slide-enter-active {
transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.page-slide-leave-active {
z-index: 10;
transition: opacity 0.3s cubic-bezier(0.55, 0.06, 0.68, 0.19);
}
.page-slide-enter-from,
.page-slide-leave-to {
opacity: 0;
}
/* Fade transition - простое затухание */
.page-fade-enter-active {
transition: opacity 0.35s ease-out;
}
.page-fade-leave-active {
z-index: 10;
transition: opacity 0.25s ease-in;
}
.page-fade-enter-from,
.page-fade-leave-to {
opacity: 0;
}
.app-promo[data-v-7d5e6d46] {
position: relative;
overflow: hidden;
width: min(1579px, calc(100% - 40px));
margin: 0 auto;
min-height: 521px;
border-radius: 60px;
}
.app-bg[data-v-7d5e6d46],
.bg-img[data-v-7d5e6d46],
.bg-photo[data-v-7d5e6d46],
.tint-left[data-v-7d5e6d46],
.tint-bottom[data-v-7d5e6d46] {
position: absolute;
inset: 0;
}
.bg-img[data-v-7d5e6d46] {
overflow: hidden;
border-radius: 60px;
}
.bg-photo[data-v-7d5e6d46] {
left: -15.26%;
top: -51.56%;
width: 148.48%;
height: 252.51%;
max-width: none;
object-fit: cover;
}
.tint-left[data-v-7d5e6d46] {
background: linear-gradient(-70.6196deg, rgba(27, 26, 162, 0) 59.902%, rgb(27, 26, 162) 93.565%);
}
.tint-bottom[data-v-7d5e6d46] {
background: linear-gradient(180deg, rgba(27, 26, 162, 0) 46%, rgba(27, 26, 162, 0.18) 70%, rgba(27, 26, 162, 0.42) 100%);
}
.promo-inner[data-v-7d5e6d46] {
position: relative;
z-index: 1;
display: grid;
gap: 85px;
padding: 60px;
}
.promo-head[data-v-7d5e6d46] {
display: grid;
gap: 32px;
max-width: 621px;
}
.promo-title[data-v-7d5e6d46],
.promo-sub[data-v-7d5e6d46],
.store-cap[data-v-7d5e6d46],
.store-name[data-v-7d5e6d46] {
margin: 0;
}
.promo-title[data-v-7d5e6d46] {
color: #fff;
font-weight: 600;
font-size: 60px;
line-height: 1;
letter-spacing: -0.02em;
}
.promo-sub[data-v-7d5e6d46] {
max-width: 561px;
color: rgba(255, 255, 255, 0.75);
font-weight: 600;
font-size: 23.748px;
line-height: 1.1;
letter-spacing: -0.01em;
}
.store-columns[data-v-7d5e6d46] {
display: flex;
gap: 7px;
}
.store-column[data-v-7d5e6d46] {
display: grid;
gap: 7px;
}
.store-card[data-v-7d5e6d46] {
display: flex;
align-items: center;
gap: 10.961px;
width: 172px;
padding: 14.614px;
border-radius: 10.961px;
background: rgba(255, 255, 255, 0.3);
color: #fff;
text-decoration: none;
backdrop-filter: blur(4px);
transition: transform 0.15s ease, background-color 0.15s ease;
}
.store-card[data-v-7d5e6d46]:hover {
transform: translateY(-1px);
background: rgba(255, 255, 255, 0.34);
}
.store-icon[data-v-7d5e6d46] {
width: 32.882px;
height: 32.882px;
flex: 0 0 auto;
border-radius: 9.395px;
overflow: hidden;
}
.store-icon-img[data-v-7d5e6d46] {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.store-text[data-v-7d5e6d46] {
display: grid;
}
.store-cap[data-v-7d5e6d46] {
font-weight: 400;
font-size: 12.788px;
line-height: 1.1;
}
.store-name[data-v-7d5e6d46] {
font-weight: 700;
font-size: 16.441px;
line-height: 1.1;
}
@media (max-aspect-ratio: 1 / 1) {
.app-promo[data-v-7d5e6d46] {
width: var(--home-mobile-w-344);
min-height: 652px;
margin: -6px auto 8px;
border-radius: 40px;
}
.bg-img[data-v-7d5e6d46] {
border-radius: 40px;
}
.bg-photo[data-v-7d5e6d46] {
left: -30%;
top: -30%;
width: 150%;
height: 150%;
}
.promo-inner[data-v-7d5e6d46] {
gap: 24px;
padding: 400px 40px 40px;
}
.promo-head[data-v-7d5e6d46] {
gap: 14px;
max-width: none;
}
.promo-title[data-v-7d5e6d46] {
max-width: calc(var(--home-mobile-w-320) - 50px);
font-size: 31px;
line-height: 0.95;
}
.promo-sub[data-v-7d5e6d46] {
max-width: calc(var(--home-mobile-w-320) - 32px);
font-size: 18px;
line-height: 1.05;
}
.store-columns[data-v-7d5e6d46] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.store-column[data-v-7d5e6d46] {
display: contents;
}
.store-card[data-v-7d5e6d46] {
width: auto;
min-width: 0;
padding: 12px;
gap: 8px;
border-radius: 12px;
}
.store-icon[data-v-7d5e6d46] {
width: 28px;
height: 28px;
border-radius: 8px;
}
.store-cap[data-v-7d5e6d46] {
font-size: 10px;
}
.store-name[data-v-7d5e6d46] {
font-size: 16px;
}
.tint-bottom[data-v-7d5e6d46]{
background: linear-gradient(180deg, rgba(27, 26, 162, 0) 30%, rgba(27, 26, 162, 0.6) 60%, rgba(27, 26, 162, 0.9) 100%)
}
}
.hero-section[data-v-8385d781] {
padding-top: 0;
}
.hero[data-v-8385d781] {
position: relative;
height: 1200px;
min-height: 1200px;
padding: 25px 26px 56px;
border-radius: 0;
overflow: hidden;
}
.hero-bg[data-v-8385d781],
.hero-overlay[data-v-8385d781] {
position: absolute;
inset: 0;
}
.hero-bg[data-v-8385d781] {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.hero-overlay[data-v-8385d781] {
background:
linear-gradient(180deg, rgba(172, 196, 255, 0.22) 0%, rgba(172, 196, 255, 0) 18%),
linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, #dcdcdc 100%);
}
.hero-topbar[data-v-8385d781],
.hero-heading[data-v-8385d781],
.phone-mockup[data-v-8385d781],
.deeds-card[data-v-8385d781],
.prizes-card[data-v-8385d781],
.dreams-card[data-v-8385d781],
.hero-cta[data-v-8385d781] {
position: relative;
z-index: 1;
}
.hero-topbar[data-v-8385d781] {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
column-gap: 24px;
box-sizing: border-box;
width: calc(100% + 52px);
min-height: 99px;
margin: -7px -26px 0;
padding: 0 clamp(24px, 7.42vw, 142px);
}
.hero-brand[data-v-8385d781] {
justify-self: start;
display: inline-flex;
align-items: center;
line-height: 0;
text-decoration: none;
}
.hero-brand[data-v-8385d781]:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.85);
outline-offset: 4px;
border-radius: 4px;
}
.logo[data-v-8385d781] {
display: block;
height: auto;
max-height: 40px;
object-fit: contain;
}
.hero-nav[data-v-8385d781] {
position: relative;
justify-self: center;
align-self: center;
box-sizing: border-box;
display: inline-flex;
align-items: center;
flex-wrap: nowrap;
gap: 10px;
width: max-content;
max-width: min(440px, 100%);
height: 47px;
padding: 10px;
border-radius: 15px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(12px);
}
.hero-topbar-actions[data-v-8385d781] {
justify-self: end;
display: flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
}
.nav-pill[data-v-8385d781] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px;
border-radius: 6px;
font-weight: 500;
font-size: 16px;
line-height: 1.625;
letter-spacing: -0.03em;
text-decoration: none;
color: #fff;
}
.nav-pill[data-v-8385d781]:hover {
color: var(--color-primary);
}
.nav-pill.router-link-active[data-v-8385d781] {
color: #fff;
}
.nav-pill:not(.router-link-active):hover .nav-icon--base[data-v-8385d781] {
opacity: 0;
}
.nav-pill:not(.router-link-active):hover .nav-icon--accent[data-v-8385d781] {
opacity: 1;
}
.cabinet-pill[data-v-8385d781],
.mobile-cabinet-pill[data-v-8385d781] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 11px 14px;
border-radius: 15px;
background: var(--color-accent);
color: #45650a;
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-16);
line-height: 1.2;
letter-spacing: -0.02em;
text-decoration: none;
}
.cabinet-pill span[data-v-8385d781],
.mobile-cabinet-pill span[data-v-8385d781] {
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-16);
line-height: 1.2;
letter-spacing: -0.02em;
}
.cabinet-pill[data-v-8385d781]:hover,
.mobile-cabinet-pill[data-v-8385d781]:hover {
box-shadow: 0 12px 24px rgba(115, 145, 24, 0.3);
}
/* как в AppHeaderUnified; перебиваем .nav-icon из hero-nav (absolute / invert) */
.cabinet-pill .nav-icon[data-v-8385d781],
.mobile-cabinet-pill .nav-icon[data-v-8385d781] {
position: static;
inset: auto;
width: 10px;
height: 13px;
object-fit: contain;
flex: 0 0 auto;
filter: brightness(0) saturate(100%);
transition: none;
}
.nav-icon-stack[data-v-8385d781] {
position: relative;
width: 15px;
height: 15px;
flex: 0 0 auto;
}
.nav-icon[data-v-8385d781] {
position: absolute;
inset: 0;
width: 15px;
height: 15px;
object-fit: contain;
flex: 0 0 auto;
filter: brightness(0) saturate(100%) invert(100%);
transition: none;
}
.nav-icon--base[data-v-8385d781] {
opacity: 1;
}
.nav-icon--accent[data-v-8385d781] {
opacity: 0;
filter: brightness(0) saturate(100%) invert(29%) sepia(83%) saturate(4258%) hue-rotate(231deg) brightness(93%) contrast(94%);
}
.nav-icon-profile[data-v-8385d781] {
width: 10px;
height: 13px;
}
.hero-heading[data-v-8385d781] {
margin-top: 5px;
display: grid;
justify-items: center;
text-align: center;
}
.hero-title-line[data-v-8385d781] {
display: inline-flex;
align-items: center;
gap: 8px;
}
.hero-title[data-v-8385d781],
.hero-subtitle[data-v-8385d781] {
margin: 0;
color: #fff;
}
.hero-title[data-v-8385d781] {
font-weight: 600;
font-size: 57px;
line-height: 0.9;
letter-spacing: -0.04em;
}
.hero-subtitle[data-v-8385d781] {
font-weight: 400;
font-size: 57px;
line-height: 0.95;
letter-spacing: -0.04em;
}
.infinity-panel[data-v-8385d781] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 9px;
border-radius: 9999px;
transform: rotate(6deg);
background:
linear-gradient(140deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.04) 100%) padding-box,
linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 100%) border-box;
border: 1px solid transparent;
backdrop-filter: blur(3px);
flex-shrink: 0;
}
.infinity-mark[data-v-8385d781] {
display: block;
width: 48px;
height: 30px;
transform: rotate(-6deg);
}
.phone-mockup[data-v-8385d781] {
position: absolute;
left: 50%;
top: 287px;
width: 435.28px;
transform: translateX(-50%);
}
.phone-screen[data-v-8385d781],
.phone-frame[data-v-8385d781] {
display: block;
width: 100%;
height: auto;
}
.phone-screen[data-v-8385d781] {
position: absolute;
inset: 9px 8px 10px;
width: calc(100% - 16px);
height: calc(100% - 19px);
border-radius: 54px;
object-fit: cover;
object-position: center top;
}
.deeds-card[data-v-8385d781] {
position: absolute;
left: 227px;
top: 279px;
width: 410px;
height: 443px;
}
.deeds-title[data-v-8385d781] {
position: absolute;
left: 107.074px;
top: 0;
margin: 0;
width: 179px;
color: #fff;
font-weight: 500;
font-size: 30px;
line-height: 1;
letter-spacing: -0.04em;
}
.deeds-arrow[data-v-8385d781] {
position: absolute;
left: 0;
top: 54.96px;
width: 137.196px;
height: 142.811px;
transform: none;
rotate: -40deg;
}
.deeds-stack[data-v-8385d781] {
position: absolute;
left: 93.076px;
top: 76px;
width: 316.986px;
height: 367px;
}
.deed-story-card[data-v-8385d781] {
position: absolute;
inset: auto auto 0 0;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
padding: 14.088px;
color: #fff;
border-radius: 19.724px;
box-shadow: 27px 6px 14px -17px rgba(0, 0, 0, 0.45);
}
.deed-story-card.back-medium[data-v-8385d781],
.deed-story-card.back-small[data-v-8385d781] {
opacity: 0.9;
}
.deed-story-image[data-v-8385d781],
.deed-story-shade[data-v-8385d781],
.deed-story-bottom-blur[data-v-8385d781] {
position: absolute;
inset: 0;
}
.deed-story-image[data-v-8385d781] {
width: 100%;
height: 100%;
object-fit: cover;
}
.deed-story-shade[data-v-8385d781] {
background:
linear-gradient(180deg, rgba(0, 0, 0, 0) 54.415%, rgba(0, 0, 0, 1) 107.97%),
linear-gradient(0deg, rgba(0, 0, 0, 0) 74.376%, rgba(0, 0, 0, 1) 110.65%);
}
.deed-story-bottom-blur[data-v-8385d781] {
top: auto;
left: 50%;
bottom: -57px;
width: 493px;
height: 115px;
background: rgba(217, 217, 217, 0.01);
filter: blur(28px);
transform: translateX(-50%);
}
.deed-story-head[data-v-8385d781],
.deed-story-copy[data-v-8385d781] {
position: relative;
z-index: 1;
}
.deed-story-head[data-v-8385d781] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.deed-story-author[data-v-8385d781] {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
}
.deed-story-badge[data-v-8385d781] {
display: grid;
place-items: center;
width: 19px;
height: 19px;
flex: 0 0 auto;
border-radius: 999px;
}
.deed-story-badge img[data-v-8385d781] {
width: 10px;
height: 10px;
object-fit: contain;
}
.deed-story-badge-own[data-v-8385d781] {
width: 19px;
height: 19px;
flex: 0 0 auto;
display: block;
}
.deed-story-badge.violet[data-v-8385d781] {
background: #514ef0;
}
.deed-story-badge.lime[data-v-8385d781] {
background: #c3fd56;
}
.deed-story-name[data-v-8385d781] {
font-weight: 600;
font-size: 16.906px;
line-height: 0.9;
letter-spacing: -0.03em;
white-space: nowrap;
}
.deed-story-date[data-v-8385d781] {
font-weight: 500;
font-size: 14.088px;
line-height: 1.1;
letter-spacing: -0.01em;
white-space: nowrap;
}
.deed-story-copy[data-v-8385d781] {
margin: 0;
font-weight: 400;
font-size: 14.088px;
line-height: 1.1;
letter-spacing: -0.01em;
}
.deed-story-card.front-main[data-v-8385d781] {
left: 0;
bottom: 0;
z-index: 3;
width: 255.702px;
height: 367px;
}
.deed-story-card.back-medium[data-v-8385d781] {
left: 68.33px;
bottom: 27.61px;
z-index: 2;
width: 216.96px;
height: 311.394px;
padding: 11.954px;
border-radius: 16.735px;
box-shadow: 22px 4px 14.3px -12px rgba(0, 0, 0, 0.25);
}
.deed-story-card.back-medium .deed-story-badge[data-v-8385d781] {
width: 16px;
height: 16px;
}
.deed-story-card.back-medium .deed-story-name[data-v-8385d781] {
font-size: 14.344px;
}
.deed-story-card.back-medium .deed-story-date[data-v-8385d781],
.deed-story-card.back-medium .deed-story-copy[data-v-8385d781] {
font-size: 11.954px;
}
.deed-story-card.back-medium .deed-story-bottom-blur[data-v-8385d781] {
bottom: -49px;
width: 418px;
height: 97px;
filter: blur(24px);
}
.deed-story-card.back-small[data-v-8385d781] {
left: 136.66px;
bottom: 54.18px;
z-index: 1;
width: 180.33px;
height: 258.821px;
padding: 9.936px;
border-radius: 13.91px;
}
.deed-story-card.back-small .deed-story-badge[data-v-8385d781] {
width: 13px;
height: 13px;
}
.deed-story-card.back-small .deed-story-badge img[data-v-8385d781] {
width: 7px;
height: 7px;
}
.deed-story-card.back-small .deed-story-name[data-v-8385d781] {
font-size: 11.923px;
}
.deed-story-card.back-small .deed-story-date[data-v-8385d781],
.deed-story-card.back-small .deed-story-copy[data-v-8385d781] {
font-size: 9.936px;
}
.deed-story-card.back-small .deed-story-bottom-blur[data-v-8385d781] {
bottom: -40px;
width: 348px;
height: 81px;
filter: blur(20px);
}
.glass-card[data-v-8385d781] {
padding: 28px;
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 40px;
background: linear-gradient(25.2022deg, rgba(0, 0, 0, 0.4) 24.844%, rgba(0, 0, 0, 0.05) 89.006%);
backdrop-filter: blur(16px);
}
.glass-title[data-v-8385d781] {
margin: 0;
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 1;
letter-spacing: -0.04em;
color: #fff;
}
.prizes-card[data-v-8385d781] {
position: absolute;
left: 1250px;
top: 239px;
width: 370px;
padding: 38px 24px 35px 30px;
}
.prize-list[data-v-8385d781] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 23px;
align-items: stretch;
}
.prize-thumb[data-v-8385d781] {
display: grid;
grid-template-rows: 1fr auto;
gap: 0;
padding: 0;
border-radius: 12px;
background: linear-gradient(180deg, #fff 0%, #c3fd56 100%);
overflow: hidden;
}
/* BMW — image overflows the top of the card */
.prize-thumb--bmw[data-v-8385d781] {
overflow: visible;
}
.prize-thumb--bmw .prize-img-wrap[data-v-8385d781] {
border-radius: 12px 12px 0 0;
overflow: hidden;
}
.prize-img-wrap[data-v-8385d781] {
position: relative;
border-radius: 12px 12px 0 0;
overflow: hidden;
min-height: 144px;
}
.prize-thumb img[data-v-8385d781] {
display: block;
width: 100%;
height: 100%;
min-height: 144px;
object-fit: cover;
}
.prize-thumb--bmw img[data-v-8385d781] {
transform: scale(1.12);
transform-origin: bottom center;
}
/* PS5 — green gradient fade at the bottom of the image */
.prize-thumb--ps5 .prize-img-wrap[data-v-8385d781]::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 65%;
background: linear-gradient(to bottom, rgba(195, 253, 86, 0) 0%, #c3fd56 100%);
pointer-events: none;
}
.prize-thumb span[data-v-8385d781] {
display: block;
padding: 11.966px;
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 11.966px;
line-height: 1;
letter-spacing: -0.02em;
color: #1e1e1e;
}
.dreams-card[data-v-8385d781] {
position: absolute;
left: 1217px;
top: 639px;
width: 458px;
padding: 29px 30px 28px;
}
.dreams-title[data-v-8385d781] {
width: 310px;
margin-bottom: 12px;
}
.dreams-list[data-v-8385d781] {
display: grid;
grid-template-columns: repeat(5, 76.811px);
gap: 3.135px;
align-items: stretch;
}
.dream-story[data-v-8385d781] {
display: grid;
grid-template-rows: auto auto 1fr;
gap: 0;
padding: 5.34px 4.48px 7.58px;
border-radius: 14px;
background: #fff;
box-shadow: 0 2.411px 9.3px rgba(0, 0, 0, 0.25);
}
.dream-story img[data-v-8385d781] {
width: 100%;
height: 66.164px;
border-radius: 10px;
object-fit: cover;
}
.dream-name[data-v-8385d781] {
font-family: 'Rubik', sans-serif;
font-weight: 400;
font-size: 4px;
line-height: 1.1;
letter-spacing: -0.04em;
color: #4a48f0;
padding-top: 4px;
}
.dream-desc[data-v-8385d781] {
font-family: 'Rubik', sans-serif;
font-weight: 400;
font-size: 4.5px;
line-height: 1.2;
letter-spacing: -0.02em;
color: #1e1e1e;
}
.dream-counter[data-v-8385d781] {
display: grid;
place-items: center;
border-radius: 14px;
background: #c3fd56;
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 1;
letter-spacing: -0.04em;
color: #4a48e9;
}
.hero-cta[data-v-8385d781] {
position: absolute;
left: 50%;
bottom: 250px;
display: inline-flex;
align-items: center;
gap: 17px;
padding: 30px;
border: none;
border-radius: 30px;
background: #c3fd56;
box-shadow: 0 18px 14px rgba(0, 0, 0, 0.15);
transform: translateX(-50%);
font: inherit;
color: #000;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hero-cta[data-v-8385d781]:hover {
transform: translateX(-50%) translateY(-2px);
box-shadow: 0 22px 34px rgba(0, 0, 0, 0.18);
}
.hero-cta[data-v-8385d781]:active {
transform: translateX(-50%) translateY(1px);
box-shadow: 0 12px 18px rgba(0, 0, 0, 0.16);
}
.hero-cta-icon[data-v-8385d781] {
width: 32px;
height: 32px;
}
.hero-cta span[data-v-8385d781],
.hero-cta strong[data-v-8385d781] {
font-size: 30px;
line-height: 0.9;
letter-spacing: -0.01em;
}
.hero-cta span[data-v-8385d781] {
font-weight: 300;
}
.hero-cta strong[data-v-8385d781] {
font-weight: 700;
}
.mobile-menu-pill[data-v-8385d781] {
display: none;
}
.mobile-menu-backdrop[data-v-8385d781],
.mobile-menu-panel[data-v-8385d781] {
display: none;
}
@media (max-aspect-ratio: 1 / 1) {
.hero[data-v-8385d781] {
height: 940px;
min-height: 940px;
padding: 18px 20px 104px;
background: #9ec1df;
}
.hero-bg[data-v-8385d781],
.hero-overlay[data-v-8385d781] {
inset: auto 0 0 0;
height: 782px;
}
.hero-bg[data-v-8385d781] {
object-position: center bottom;
}
.hero-overlay[data-v-8385d781] {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 58%, rgba(220, 220, 220, 0.84) 100%);
}
.hero-topbar[data-v-8385d781] {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 35px;
height: auto;
margin: 0;
padding: 0;
column-gap: 0;
z-index: 6;
}
.hero-brand[data-v-8385d781] {
flex: 0 0 auto;
}
.logo[data-v-8385d781] {
width: 131px;
max-height: none;
}
.hero-nav[data-v-8385d781] {
display: none;
}
.nav-pill[data-v-8385d781] {
justify-content: flex-start;
padding: 9px 10px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.1);
font-size: 14px;
}
.hero-topbar-actions[data-v-8385d781] {
flex: 0 0 auto;
gap: 5px;
}
.cabinet-pill[data-v-8385d781] {
width: 35px;
min-height: 35px;
height: 35px;
padding: 0;
border-radius: 30%;
}
.cabinet-pill span[data-v-8385d781] {
display: none;
}
.mobile-menu-pill[data-v-8385d781] {
position: relative;
top: auto;
right: auto;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: 35px;
height: 35px;
padding: 0;
border: none;
border-radius: 30%;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(12px);
cursor: pointer;
z-index: 8;
}
.mobile-menu-backdrop[data-v-8385d781] {
display: block;
position: fixed;
inset: 0;
z-index: 9998;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
}
.mobile-menu-panel[data-v-8385d781] {
display: flex;
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 9999;
width: 320px;
max-width: 86vw;
padding: 18px;
background: #fff;
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
border-radius: 24px 0 0 24px;
flex-direction: column;
}
.mobile-menu-header[data-v-8385d781] {
display: flex;
justify-content: flex-end;
margin-bottom: 18px;
}
.mobile-menu-close[data-v-8385d781] {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 10px;
background: rgba(30, 30, 30, 0.08);
cursor: pointer;
}
.mobile-nav[data-v-8385d781] {
flex: 1;
}
.mobile-nav-list[data-v-8385d781] {
display: flex;
flex-direction: column;
gap: 10px;
padding: 0;
margin: 0;
list-style: none;
}
.mobile-nav-link[data-v-8385d781] {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-radius: 14px;
color: #1e1e1e;
font-weight: 500;
font-size: 18px;
line-height: 1.2;
text-decoration: none;
}
.mobile-nav-link:hover .mobile-nav-icon[data-v-8385d781],
.mobile-nav-link.router-link-active .mobile-nav-icon[data-v-8385d781] {
filter: brightness(0) saturate(100%) invert(29%) sepia(83%) saturate(4258%) hue-rotate(231deg) brightness(93%) contrast(94%);
}
.mobile-nav-link.router-link-active[data-v-8385d781] {
background: rgba(74, 72, 233, 0.12);
color: var(--color-primary);
}
.mobile-nav-icon[data-v-8385d781] {
width: 16px;
height: 16px;
flex: 0 0 auto;
filter: brightness(0) saturate(100%);
transition: none;
}
.mobile-menu-footer[data-v-8385d781] {
margin-top: 18px;
}
.mobile-menu-pill span[data-v-8385d781] {
display: block;
width: 14px;
height: 1.6px;
border-radius: 999px;
background: #fff;
}
.hero-heading[data-v-8385d781] {
margin-top: 42px;
gap: 4px;
}
.hero-title-line[data-v-8385d781] {
gap: 6px;
flex-wrap: nowrap;
}
.hero-title[data-v-8385d781],
.hero-subtitle[data-v-8385d781] {
font-size: 38px;
line-height: 0.9;
text-shadow: 0 4px 18px rgba(0, 0, 0, 0.24);
}
.hero-subtitle[data-v-8385d781] {
max-width: 320px;
font-size: 32px;
line-height: 0.94;
}
.infinity-panel[data-v-8385d781] {
padding: 4px 8px;
}
.infinity-mark[data-v-8385d781] {
width: 37px;
height: 23px;
}
.phone-mockup[data-v-8385d781] {
left: 50%;
top: auto;
bottom: 0;
width: 300px;
transform: translateX(-50%);
}
.deeds-card[data-v-8385d781] {
display: none;
}
.dreams-card[data-v-8385d781] {
left: 11px;
top: 200px;
width: 160px;
padding: 12px;
border-radius: 16px;
overflow: hidden;
transform: none;
}
.prizes-card[data-v-8385d781] {
left: auto;
right: 22px;
top: 530px;
width: 156px;
padding: 12px;
border-radius: 16px;
overflow: hidden;
transform: none;
}
.deeds-title[data-v-8385d781],
.glass-title[data-v-8385d781] {
font-size: 15px;
line-height: 0.95;
}
.prizes-card .glass-title[data-v-8385d781] {
font-size: 15px;
}
.prize-list[data-v-8385d781] {
display: flex;
gap: 6px;
margin-top: 10px;
width: max-content;
align-items: stretch;
}
.prize-thumb[data-v-8385d781] {
width: 76px;
flex: 0 0 auto;
display: grid;
grid-template-rows: 74px 1fr;
min-height: 118px;
border-radius: 10px;
}
.prize-img-wrap[data-v-8385d781] {
min-height: 74px;
border-radius: 10px 10px 0 0;
}
.prize-thumb img[data-v-8385d781] {
min-height: 74px;
}
.prize-thumb span[data-v-8385d781] {
display: flex;
align-items: flex-end;
padding: 6px;
min-height: 44px;
font-size: 8.5px;
line-height: 1.08;
}
.dreams-title[data-v-8385d781] {
width: auto;
margin-bottom: 8px;
}
.dreams-list[data-v-8385d781] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
align-items: start;
}
.dream-story[data-v-8385d781] {
min-width: 0;
width: 100%;
padding: 4px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
grid-template-rows: 1fr;
aspect-ratio: 1 / 1;
}
.dream-story[data-v-8385d781]:nth-child(4) {
display: none;
}
.dream-story img[data-v-8385d781] {
height: 100%;
min-height: 38px;
border-radius: 6px;
object-fit: cover;
}
.dream-name[data-v-8385d781],
.dream-desc[data-v-8385d781] {
display: none;
}
.dream-counter[data-v-8385d781] {
min-width: 0;
width: 100%;
aspect-ratio: 1 / 1;
display: grid;
place-items: center;
border-radius: 8px;
font-size: 20px;
}
.hero-cta[data-v-8385d781] {
bottom: 128px;
left: 20px;
right: 20px;
width: auto;
height: 64px;
justify-content: center;
gap: 10px;
padding: 0 28px;
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
z-index: 3;
transform: none;
}
.hero-cta[data-v-8385d781]:hover,
.hero-cta[data-v-8385d781]:active {
transform: none;
}
.hero-cta-icon[data-v-8385d781] {
width: 22px;
height: 22px;
}
.hero-cta span[data-v-8385d781],
.hero-cta strong[data-v-8385d781] {
font-size: 18px;
line-height: 1;
}
}
.mobile-menu-backdrop-enter-active[data-v-8385d781],
.mobile-menu-backdrop-leave-active[data-v-8385d781] {
transition: opacity 0.3s ease;
}
.mobile-menu-backdrop-enter-from[data-v-8385d781],
.mobile-menu-backdrop-leave-to[data-v-8385d781] {
opacity: 0;
}
.mobile-menu-panel-enter-active[data-v-8385d781] {
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-menu-panel-leave-active[data-v-8385d781] {
transition: transform 0.25s ease-in;
}
.mobile-menu-panel-enter-from[data-v-8385d781],
.mobile-menu-panel-leave-to[data-v-8385d781] {
transform: translateX(100%);
}
.five-minutes[data-v-50a12a37] {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
box-sizing: border-box;
width: 100%;
min-height: 1080px;
padding: 214px 100px 100px;
overflow: hidden;
}
.section-bg[data-v-50a12a37] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
user-select: none;
}
.content-group[data-v-50a12a37] {
position: relative;
z-index: 1;
display: flex;
gap: 42px;
align-items: flex-end;
justify-content: center;
width: 100%;
}
.left-block[data-v-50a12a37] {
position: relative;
width: 646px;
padding: 48px;
border-radius: 70px;
background: linear-gradient(97.8511deg, rgba(0, 0, 0, 0.36) 30.513%, rgba(0, 0, 0, 0.043) 85.257%);
backdrop-filter: blur(11.5px);
display: flex;
flex-direction: column;
gap: 49px;
}
.section-title[data-v-50a12a37] {
margin: 0;
color: #fff;
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 60px;
line-height: 0.9;
letter-spacing: -0.04em;
text-transform: uppercase;
}
.section-title .lowercase[data-v-50a12a37] {
text-transform: lowercase;
}
.steps[data-v-50a12a37] {
display: flex;
flex-direction: column;
gap: 10px;
}
.step-card[data-v-50a12a37] {
display: flex;
gap: 20px;
align-items: center;
height: 192px;
padding: 0 37px;
border-radius: 40px;
background: linear-gradient(25.2022deg, rgba(0, 0, 0, 0.4) 24.844%, rgba(0, 0, 0, 0.05) 89.006%);
overflow: hidden;
}
.step-photo[data-v-50a12a37] {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 127px;
height: 174.98px;
overflow: hidden;
}
.step-image[data-v-50a12a37] {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.step-text[data-v-50a12a37] {
display: flex;
flex: 1;
flex-direction: column;
gap: 17px;
min-width: 0;
color: #fff;
font-family: 'Onest', sans-serif;
font-weight: 500;
line-height: 1;
}
.step-title[data-v-50a12a37] {
margin: 0;
font-size: 30px;
letter-spacing: -0.04em;
}
.step-sub[data-v-50a12a37] {
margin: 0;
font-size: 20px;
letter-spacing: -0.04em;
}
.pvz-decoration[data-v-50a12a37] {
position: absolute;
left: 462.11px;
top: -135.89px;
width: 327.363px;
height: 327.363px;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-54.64deg);
}
.pvz-inner[data-v-50a12a37] {
position: relative;
width: 234.793px;
height: 234.793px;
overflow: hidden;
}
.pvz-badge-img[data-v-50a12a37] {
position: absolute;
left: -51.5%;
top: -51.5%;
width: 203%;
height: 203%;
max-width: none;
object-fit: contain;
}
.section-cta[data-v-50a12a37] {
display: inline-flex;
align-items: center;
gap: 17px;
padding: 40px;
border: none;
border-radius: 30px;
background: #c3fd56;
box-shadow: 0 8.691px 6.759px rgba(0, 0, 0, 0.15), 0 18px 14px rgba(0, 0, 0, 0.15);
font: inherit;
color: #000;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.section-cta[data-v-50a12a37]:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(115, 145, 24, 0.34), 0 20px 18px rgba(0, 0, 0, 0.16);
}
.section-cta[data-v-50a12a37]:active {
transform: translateY(1px);
box-shadow: 0 6px 12px rgba(115, 145, 24, 0.24), 0 12px 10px rgba(0, 0, 0, 0.14);
}
.cta-icon[data-v-50a12a37] {
width: 32px;
height: 32px;
object-fit: contain;
flex-shrink: 0;
}
.cta-labels[data-v-50a12a37] {
display: flex;
gap: 15px;
align-items: center;
line-height: 0.9;
}
.cta-desc[data-v-50a12a37] {
font-family: 'Onest', sans-serif;
font-weight: 300;
font-size: 30px;
letter-spacing: -0.01em;
}
.cta-price[data-v-50a12a37] {
font-family: 'Onest', sans-serif;
font-weight: 700;
font-size: 33px;
letter-spacing: -0.01em;
}
@media (max-aspect-ratio: 1 / 1) {
.five-minutes[data-v-50a12a37] {
display: block;
height: 740px;
min-height: 740px;
padding: 0 0 32px;
background: #fcfcfc;
}
.section-bg[data-v-50a12a37] {
top: 0;
bottom: auto;
height: 555px;
object-position: 85% top;
}
.content-group[data-v-50a12a37] {
position: relative;
z-index: 1;
display: block;
gap: 0;
align-items: stretch;
width: 100%;
padding: 300px 15px 0;
}
.left-block[data-v-50a12a37] {
width: 100%;
padding: 28px 26px 24px;
border-radius: 42px;
gap: 16px;
}
.section-title[data-v-50a12a37] {
font-size: 28px;
max-width: 220px;
}
.steps[data-v-50a12a37] {
gap: 6px;
}
.step-card[data-v-50a12a37] {
height: 104px;
padding: 0 15px;
gap: 13px;
border-radius: 24px;
}
.step-photo[data-v-50a12a37] {
width: 68px;
height: 140px;
overflow: visible;
}
.step-text[data-v-50a12a37] {
gap: 9px;
}
.step-title[data-v-50a12a37] {
font-size: 16px;
line-height: 1;
}
.step-sub[data-v-50a12a37] {
font-size: 11px;
line-height: 1.05;
}
.pvz-decoration[data-v-50a12a37] {
display: none;
}
.pvz-inner[data-v-50a12a37] {
width: 118px;
height: 118px;
}
.section-cta[data-v-50a12a37] {
display: none;
}
.cta-icon[data-v-50a12a37] {
width: 18px;
height: 18px;
}
.cta-labels[data-v-50a12a37] {
gap: 8px;
}
.cta-desc[data-v-50a12a37] {
font-size: 12px;
line-height: 1;
}
.cta-price[data-v-50a12a37] {
font-size: 14px;
line-height: 1;
}
}
.bonuses-section[data-v-e3b33630] {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 100%;
height: 1100px;
padding: 0 100px;
overflow: hidden;
}
.back-decoration[data-v-e3b33630] {
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 1203px;
height: 697.394px;
overflow: visible;
pointer-events: none;
}
.decor-rotated[data-v-e3b33630] {
position: absolute;
left: calc(50% - 278.93px);
top: 0;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 645.142px;
height: 697.394px;
}
.decor-inner[data-v-e3b33630] {
transform: rotate(-31.36deg);
}
.decor-img[data-v-e3b33630] {
width: 410.109px;
height: 566.766px;
object-fit: contain;
}
.watermark[data-v-e3b33630] {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -70%);
width: 110%;
height: auto;
object-fit: contain;
z-index: 0;
pointer-events: none;
}
.content[data-v-e3b33630] {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
display: flex;
flex-direction: column;
gap: 60px;
align-items: center;
justify-content: center;
width: 100%;
max-width: 1440px;
box-sizing: border-box;
}
.header[data-v-e3b33630] {
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
width: 100%;
flex-shrink: 0;
}
.header-image[data-v-e3b33630] {
width: 718.954px;
height: 113.46px;
overflow: hidden;
border-radius: 4px;
flex-shrink: 0;
}
.header-image img[data-v-e3b33630] {
width: 100%;
height: 100%;
object-fit: cover;
}
.header-subtitle[data-v-e3b33630] {
margin: 0;
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 1;
letter-spacing: -0.04em;
color: #4a48e9;
text-align: center;
}
.cards-row[data-v-e3b33630] {
display: flex;
gap: 38px;
align-items: stretch;
justify-content: center;
flex: 1;
min-height: 660px;
width: 100%;
}
.block-col[data-v-e3b33630] {
display: flex;
flex-direction: column;
align-items: center;
align-self: stretch;
flex-shrink: 0;
}
/* Block 1 — прижат к низу (отступ сверху) */
.block-col-1[data-v-e3b33630] {
justify-content: flex-end;
padding-top: 40px;
}
/* Block 2 — прижат к верху (отступ снизу) */
.block-col-2[data-v-e3b33630] {
justify-content: flex-start;
padding-bottom: 40px;
}
/* Block 3 — прижат к низу (отступ сверху) */
.block-col-3[data-v-e3b33630] {
justify-content: flex-end;
padding-top: 40px;
}
.block[data-v-e3b33630] {
position: relative;
}
.block-1[data-v-e3b33630] {
background: #fff;
width: 410px;
height: 580px;
border-radius: 40px;
padding: 40px 20px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 29px;
flex-shrink: 0;
}
.chip[data-v-e3b33630] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7.897px;
border-radius: 7.897px;
background: #fff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
font-family: 'Onest', sans-serif;
font-weight: 700;
font-size: 14.426px;
line-height: 11.056px;
letter-spacing: -0.01em;
color: #000;
}
.chip-top[data-v-e3b33630] {
position: absolute;
left: calc(50% - 0.85px);
top: -15.11px;
transform: translateX(-50%) rotate(0.96deg);
}
.sticker-overlay[data-v-e3b33630] {
position: absolute;
left: -83.3px;
top: -46.01px;
width: 180.387px;
height: 180.387px;
display: flex;
align-items: center;
justify-content: center;
}
.sticker-transform[data-v-e3b33630] {
transform: scaleY(-1) rotate(200deg);
}
.sticker-img[data-v-e3b33630] {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 4px;
}
.block-1-text[data-v-e3b33630] {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
text-align: center;
width: 100%;
}
.block-1-title[data-v-e3b33630] {
margin: 0;
font-family: 'Onest', sans-serif;
font-weight: 800;
font-size: 40px;
line-height: 0.9;
letter-spacing: -0.004em;
color: #000;
}
.block-1-title .lowercase[data-v-e3b33630] {
text-transform: lowercase;
}
.block-1-note[data-v-e3b33630] {
margin: 0;
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 1;
letter-spacing: -0.04em;
color: rgba(0, 0, 0, 0.5);
width: 322px;
}
.prizes-scroll[data-v-e3b33630] {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
width: 344px;
flex: 1;
min-height: 0;
overflow-y: auto;
padding-bottom: 20px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.prizes-scroll[data-v-e3b33630]::-webkit-scrollbar {
display: none;
}
.prize-item[data-v-e3b33630] {
position: relative;
flex-shrink: 0;
width: 344px;
height: 180px;
padding: 16px;
border-radius: 12px;
overflow: hidden;
}
.prize-main[data-v-e3b33630] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
background: #c3fd56;
}
.prize-main-bg[data-v-e3b33630] {
position: absolute;
inset: 0;
border-radius: 12px;
overflow: hidden;
}
.prize-main-img[data-v-e3b33630] {
width: 100%;
height: 100%;
object-fit: cover;
}
.prize-main .prize-label[data-v-e3b33630] {
position: relative;
z-index: 1;
}
.prize-label[data-v-e3b33630] {
margin: 0;
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 20px;
line-height: 1;
letter-spacing: -0.01em;
color: #1e1e1e;
position: relative;
z-index: 1;
}
.prize-item[data-v-e3b33630]:not(.prize-main) {
background: linear-gradient(269.881deg, #fff 0%, #c3fd56 99.977%), #c3fd56;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.prize-item-bg[data-v-e3b33630] {
position: absolute;
bottom: 0;
right: 6px;
width: 168px;
height: 168px;
overflow: hidden;
}
.prize-item-img[data-v-e3b33630] {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
max-width: none;
}
.prize-item-content[data-v-e3b33630] {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
min-height: 0;
}
.prize-item-row[data-v-e3b33630] {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
}
.prize-title[data-v-e3b33630] {
margin: 0;
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 20px;
line-height: 1;
letter-spacing: -0.01em;
color: #1e1e1e;
max-width: 176px;
}
.prize-qty[data-v-e3b33630] {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 4px 12px;
border-radius: 52.177px;
background: #4846e7;
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 1.3;
letter-spacing: -0.01em;
color: #fff;
flex-shrink: 0;
}
.prize-subtitle[data-v-e3b33630] {
margin: 0;
margin-top: auto;
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 1.2;
letter-spacing: -0.01em;
color: rgba(30, 30, 30, 0.9);
max-width: 164px;
}
/* Block 2: Raffle */
.block-2[data-v-e3b33630] {
background: #ff8000;
width: 512px;
height: 580px;
border-radius: 40px;
padding: 30px 12px 70px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.chip-raffle[data-v-e3b33630] {
position: absolute;
left: 50%;
top: -21.12px;
transform: translateX(-50%) rotate(4.27deg);
}
.raffle-title[data-v-e3b33630] {
margin: 0 0 -40px;
font-family: 'Onest', sans-serif;
font-weight: 800;
font-size: 40px;
line-height: 0.9;
letter-spacing: -0.004em;
color: #fff;
text-align: center;
}
.raffle-title .lowercase[data-v-e3b33630] {
text-transform: lowercase;
}
.raffle-photo[data-v-e3b33630] {
width: 512px;
height: 457px;
margin-bottom: -40px;
overflow: hidden;
}
.raffle-photo img[data-v-e3b33630] {
width: 100%;
height: 100%;
object-fit: cover;
}
.raffle-date[data-v-e3b33630] {
position: absolute;
left: 50%;
bottom: -31.23px;
transform: translateX(-50%) rotate(-2.71deg);
padding: 12.683px 20.293px;
border-radius: 59.928px;
background: #4a48e9;
font-family: 'Onest', sans-serif;
font-weight: 900;
font-size: 31.708px;
line-height: 0.8;
letter-spacing: -0.05em;
color: #fff;
text-transform: uppercase;
white-space: nowrap;
}
/* Block 3: Dreams */
.block-3[data-v-e3b33630] {
position: relative;
width: 410px;
height: 580px;
border-radius: 24px;
padding: 40px 0 0;
overflow: visible;
flex-shrink: 0;
}
.chip-dreams[data-v-e3b33630] {
position: absolute;
left: calc(50% - 0.5px);
top: -21.52px;
transform: translateX(-50%) rotate(4.27deg);
z-index: 2;
}
.dreams-bg-wrap[data-v-e3b33630] {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
border-radius: 24px;
}
.dreams-bg-img[data-v-e3b33630] {
position: absolute;
left: -103.66%;
top: -16.86%;
width: 298.65%;
height: 120.64%;
object-fit: cover;
max-width: none;
}
.dreams-headers[data-v-e3b33630] {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
text-align: center;
width: 100%;
}
.dreams-title[data-v-e3b33630] {
margin: 0;
font-family: 'Onest', sans-serif;
font-weight: 800;
font-size: 40px;
line-height: 0.9;
letter-spacing: -0.004em;
color: #fff;
}
.dreams-title .lowercase[data-v-e3b33630] {
text-transform: lowercase;
}
.dreams-sub[data-v-e3b33630] {
margin: 0;
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 1;
letter-spacing: -0.04em;
color: rgba(255, 255, 255, 0.7);
}
@media (max-aspect-ratio: 1 / 1) {
.bonuses-section[data-v-e3b33630] {
height: auto;
padding: 38px 0 32px;
}
.back-decoration[data-v-e3b33630] {
top: 120px;
width: 440px;
height: 360px;
}
.decor-rotated[data-v-e3b33630] {
left: calc(50% - 24px);
width: 260px;
height: 280px;
}
.decor-img[data-v-e3b33630] {
width: 190px;
height: auto;
}
.watermark[data-v-e3b33630] {
width: 210%;
transform: translate(-50%, -42%);
}
.content[data-v-e3b33630] {
position: relative;
top: auto;
left: auto;
transform: none;
width: var(--home-mobile-w-350);
gap: 22px;
}
.header[data-v-e3b33630] {
gap: 10px;
}
.header-image[data-v-e3b33630] {
width: 308px;
height: auto;
}
.header-image img[data-v-e3b33630] {
height: auto;
object-fit: contain;
}
.header-subtitle[data-v-e3b33630] {
max-width: var(--home-mobile-w-308);
font-size: 24px;
line-height: 0.95;
}
.cards-row[data-v-e3b33630] {
flex-direction: column;
gap: 28px;
min-height: 0;
align-items: center;
}
.block-col[data-v-e3b33630] {
width: 100%;
padding: 0 !important;
}
.block-col-2[data-v-e3b33630] {
order: 1;
}
.block-col-1[data-v-e3b33630] {
order: 2;
}
.block-col-3[data-v-e3b33630] {
order: 3;
}
.block-1[data-v-e3b33630],
.block-2[data-v-e3b33630],
.block-3[data-v-e3b33630] {
width: 302px;
border-radius: 28px;
}
.chip[data-v-e3b33630] {
padding: 6px 10px;
font-size: 10px;
line-height: 1;
}
.block-2[data-v-e3b33630] {
height: 383px;
padding: 16px 12px 20px;
overflow: visible;
}
.chip-raffle[data-v-e3b33630] {
top: -10px;
}
.raffle-title[data-v-e3b33630] {
margin: 0 0 -14px;
font-size: 25px;
}
.raffle-photo[data-v-e3b33630] {
width: 302px;
height: 248px;
margin-bottom: -10px;
}
.raffle-photo img[data-v-e3b33630] {
object-fit: contain;
object-position: center;
transform-origin: center center;
}
.raffle-date[data-v-e3b33630] {
display: none;
}
.block-1[data-v-e3b33630] {
height: auto;
padding: 28px 18px 18px;
gap: 18px;
}
.chip-top[data-v-e3b33630] {
top: -9px;
}
.sticker-overlay[data-v-e3b33630] {
left: -48px;
top: -34px;
transform: scale(0.68);
transform-origin: top left;
}
.block-1-title[data-v-e3b33630] {
font-size: 28px;
}
.block-1-note[data-v-e3b33630] {
width: auto;
font-size: 14px;
}
.prizes-scroll[data-v-e3b33630] {
width: 100%;
max-height: 300px;
padding-bottom: 0;
}
.prize-item[data-v-e3b33630] {
width: 100%;
height: 132px;
}
.prize-label[data-v-e3b33630],
.prize-title[data-v-e3b33630] {
font-size: 14px;
}
.prize-subtitle[data-v-e3b33630] {
max-width: 116px;
font-size: 10px;
}
.prize-item-bg[data-v-e3b33630] {
width: 124px;
height: 124px;
}
.prize-qty[data-v-e3b33630] {
width: 24px;
height: 24px;
font-size: 10px;
}
.block-3[data-v-e3b33630] {
height: 442px;
padding-top: 34px;
overflow: visible;
}
.chip-dreams[data-v-e3b33630] {
top: -10px;
}
.dreams-bg-wrap[data-v-e3b33630] {
border-radius: 28px;
}
.dreams-title[data-v-e3b33630] {
font-size: 25px;
}
.dreams-sub[data-v-e3b33630] {
font-size: 14px;
line-height: 1.08;
}
.dreams-bg-img[data-v-e3b33630] {
left: -78%;
top: -4%;
width: 258%;
height: 108%;
}
}
/* Section: 1920×1026 */
.ticker-section[data-v-4ee49590] {
position: relative;
width: 100%;
box-sizing: border-box;
padding: 0 181.5px;
min-height: 1100px;
}
/* Tapes — зелёный СВЕРХУ, синий СНИЗУ */
.tapes-wrapper[data-v-4ee49590] {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 280px;
z-index: 1;
}
.ticker-row[data-v-4ee49590] {
position: absolute;
left: 0;
right: 0;
white-space: nowrap;
overflow: hidden;
pointer-events: none;
padding: 12px 0;
display: flex;
align-items: center;
}
/* Зелёный СВЕРХУ, наклон ВЛЕВО */
.row-green[data-v-4ee49590] {
top: 100px;
bottom: auto !important;
transform: rotate(-5.78deg);
background: #c3fd56; /* accent — зелёный */
}
/* Синий СНИЗУ, наклон ВПРАВО */
.row-blue[data-v-4ee49590] {
bottom: 48px;
top: auto !important;
transform: rotate(4.02deg);
background: #4a48e9; /* primary — синий */
}
.ticker-track[data-v-4ee49590] {
display: inline-flex;
gap: 16px; /* отступ между картинками */
align-items: center;
min-width: max-content;
will-change: transform;
}
.ticker-strip[data-v-4ee49590] {
display: block;
width: auto;
height: 64px;
object-fit: contain;
flex-shrink: 0;
}
.move-right[data-v-4ee49590] {
animation: ticker-right-4ee49590 28s linear infinite;
}
.move-left[data-v-4ee49590] {
animation: ticker-left-4ee49590 40s linear infinite;
}
@keyframes ticker-left-4ee49590 {
0% { transform: translateX(0);
}
100% { transform: translateX(-50%);
}
}
@keyframes ticker-right-4ee49590 {
0% { transform: translateX(-50%);
}
100% { transform: translateX(0);
}
}
/* Content scaler: centers and scales */
.content-scaler[data-v-4ee49590] {
position: relative;
display: flex;
justify-content: center;
padding-top: 310px;
width: 100%;
z-index: 2;
}
/* Content group: fixed 1557×716 design */
.content-group[data-v-4ee49590] {
position: relative;
width: 1557px;
height: 716px;
flex-shrink: 0;
transform-origin: top center;
}
.blocks[data-v-4ee49590] {
position: absolute;
left: 0;
top: 0;
width: 621px;
height: 716px;
}
.block[data-v-4ee49590] {
position: absolute;
z-index: 1;
border-radius: 40px;
background: var(--color-primary);
color: #fff;
box-shadow: 0 20px 34px rgba(74, 72, 233, 0.18);
}
.block-header[data-v-4ee49590] {
position: relative;
}
.block-icon[data-v-4ee49590] {
width: 88px;
height: 88px;
object-fit: contain;
}
.block-check[data-v-4ee49590] {
position: absolute;
top: 0;
right: 0;
width: 31px;
height: 31px;
object-fit: contain;
}
.block-text[data-v-4ee49590] {
margin: 0;
font-family: var(--font-family-sans);
font-weight: 500;
font-size: 21px;
line-height: 1.22;
letter-spacing: -0.04em;
}
.block-1[data-v-4ee49590] {
left: 36px;
top: 22px;
width: 443px;
padding: 20px 20px 14px;
transform: rotate(-3.95deg);
}
.block-1 .block-header[data-v-4ee49590] {
margin-bottom: 12px;
}
.block-2[data-v-4ee49590] {
left: 139px;
top: 247px;
width: 446px;
padding: 20px 20px 14px;
transform: rotate(1.95deg);
}
.block-2 .block-header[data-v-4ee49590] {
margin-bottom: 12px;
}
.block2-header-img[data-v-4ee49590] {
display: block;
max-width: 160px;
height: auto;
object-fit: contain;
}
.block-3[data-v-4ee49590] {
left: 73px;
top: 452px;
width: 453px;
height: 212px;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
transform: rotate(-3.9deg);
}
.block3-img[data-v-4ee49590] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 40px;
}
.block3-text[data-v-4ee49590] {
position: relative;
z-index: 1;
margin: 0;
padding: 20px 20px;
font-family: var(--font-family-sans);
font-weight: 500;
font-size: 22px;
line-height: 1.2;
letter-spacing: -0.04em;
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.arrow[data-v-4ee49590] {
position: absolute;
z-index: 0;
pointer-events: none;
}
/* Arrow 1: Figma x=548 y=86 — от block-1 к block-2 */
.arrow-1[data-v-4ee49590] {
left: 420px;
top: 60px;
width: 139.76px;
height: 248.66px;
transform: rotate(58.48deg);
}
/* Arrow 2: Figma x=79 y=298 — от block-2 к block-3 */
.arrow-2[data-v-4ee49590] {
left: 5px;
top: 320px;
width: 151.19px;
height: 116.74px;
transform: rotate(121.52deg) scaleY(-1);
}
.photo-block[data-v-4ee49590] {
position: absolute;
left: 624px;
top: 0;
width: 933px;
height: 716px;
}
.photo-wrap[data-v-4ee49590] {
position: relative;
width: 933px;
height: 666px;
border-radius: 32px;
overflow: hidden;
box-shadow: 0 20px 36px rgba(0, 0, 0, 0.12);
}
.photo-img[data-v-4ee49590] {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ticker-cta[data-v-4ee49590] {
position: absolute;
left: 190px;
bottom: 20px;
width: 553px;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
gap: 17px;
padding: 0 40px;
white-space: nowrap;
background: var(--color-accent);
border: none;
border-radius: 24px;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
font: inherit;
color: #1e1e1e;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ticker-cta[data-v-4ee49590]:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(115, 145, 24, 0.34), 0 20px 36px rgba(0, 0, 0, 0.2);
}
.ticker-cta[data-v-4ee49590]:active {
transform: translateY(1px);
box-shadow: 0 6px 12px rgba(115, 145, 24, 0.24), 0 12px 20px rgba(0, 0, 0, 0.16);
}
.cta-icon[data-v-4ee49590] {
width: 32px;
height: 32px;
flex-shrink: 0;
}
.cta-text[data-v-4ee49590] {
font-family: var(--font-family-sans);
font-weight: 500;
font-size: 24px;
line-height: 0.95;
letter-spacing: -0.04em;
color: #1e1e1e;
}
.cta-price[data-v-4ee49590] {
font-family: var(--font-family-sans);
font-weight: 700;
font-size: 24px;
line-height: 0.95;
letter-spacing: -0.04em;
color: #1e1e1e;
}
@media (max-aspect-ratio: 1 / 1) {
.ticker-section[data-v-4ee49590] {
min-height: 0;
padding: 0 0 40px;
overflow: hidden;
}
.tapes-wrapper[data-v-4ee49590] {
height: 86px;
}
.row-green[data-v-4ee49590] {
top: 18px;
}
.row-blue[data-v-4ee49590] {
bottom: 8px;
}
.ticker-strip[data-v-4ee49590] {
height: 20px;
}
.content-scaler[data-v-4ee49590] {
padding-top: 106px;
}
.content-group[data-v-4ee49590] {
display: grid;
gap: 20px;
width: var(--home-mobile-w-341);
height: auto;
justify-items: center;
}
.blocks[data-v-4ee49590] {
position: relative;
width: 368px;
height: 462px;
}
.block[data-v-4ee49590] {
position: absolute;
border-radius: 26px;
}
.block-1[data-v-4ee49590],
.block-2[data-v-4ee49590] {
padding: 14px;
}
.block-1[data-v-4ee49590] {
left: 24px;
top: 2px;
width: 282px;
padding: 16px 20px 18px;
transform: rotate(-3deg);
}
.block-2[data-v-4ee49590] {
left: 49px;
top: 163px;
width: 295px;
padding: 14px 20px 16px;
transform: rotate(2.5deg);
}
.block-icon[data-v-4ee49590] {
width: 63px;
height: 63px;
}
.block-check[data-v-4ee49590] {
width: 20px;
height: 20px;
}
.block-text[data-v-4ee49590] {
font-size: 16px;
line-height: 1.1;
}
.block-2 .block2-header-img[data-v-4ee49590] {
max-width: 98px;
}
.block-3[data-v-4ee49590] {
left: 49px;
top: 294px;
width: 279px;
height: 152px;
transform: rotate(-2.5deg);
}
.block3-img[data-v-4ee49590] {
border-radius: 24px;
}
.block3-text[data-v-4ee49590] {
padding: 18px 20px;
font-size: 20px;
line-height: 1.05;
}
.arrow[data-v-4ee49590] {
position: absolute;
display: block;
width: auto;
height: auto;
opacity: 1;
z-index: 0;
}
.arrow-1[data-v-4ee49590] {
left: 271px;
top: 58px;
width: 81px;
transform: rotate(59deg);
}
.arrow-2[data-v-4ee49590] {
left: -9px;
top: 222px;
width: 84px;
transform: scaleY(-1) rotate(-111deg);
}
.photo-block[data-v-4ee49590] {
position: static;
display: grid;
gap: 0;
width: 100%;
height: auto;
justify-items: center;
}
.photo-wrap[data-v-4ee49590] {
width: var(--home-mobile-w-341);
height: 402px;
border-radius: 32px;
}
.ticker-cta[data-v-4ee49590] {
position: relative;
left: auto;
bottom: auto;
margin-top: -32px;
justify-self: center;
width: var(--home-mobile-w-320);
height: 65px;
justify-content: center;
gap: 10px;
padding: 0 22px;
border-radius: 23px;
z-index: 1;
white-space: nowrap;
font-size: clamp(14px, 4.5vw, 23px);
}
.cta-icon[data-v-4ee49590] {
width: 18px;
height: 18px;
}
.cta-text[data-v-4ee49590],
.cta-price[data-v-4ee49590] {
font-size: inherit;
line-height: 1;
}
}
.good-deeds[data-v-caa79165] {
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
width: 100%;
min-height: 1272px;
background: linear-gradient(180deg, #4a48e9 26.823%, #fff 100%);
}
.good-deeds-scene[data-v-caa79165] {
position: relative;
width: 1920px;
height: 1272px;
flex-shrink: 0;
transform-origin: top center;
}
.decor-bg[data-v-caa79165] {
position: absolute;
left: -321.903px;
top: 417.5px;
width: 1858.324px;
height: 1068.536px;
pointer-events: none;
}
.decor-img[data-v-caa79165] {
width: 100%;
height: 100%;
object-fit: cover;
}
.left-side[data-v-caa79165] {
position: absolute;
inset: 0 auto 0 0;
display: flex;
width: 960px;
height: 1272px;
flex-direction: column;
align-items: flex-end;
justify-content: flex-start;
padding: 50px 20px;
box-sizing: border-box;
}
.title-cluster[data-v-caa79165] {
position: relative;
width: 693.282px;
height: 243.547px;
flex-shrink: 0;
}
.title-tag-wrap[data-v-caa79165] {
position: absolute;
top: 0;
left: 376px;
width: 144px;
height: 144px;
transform: rotate(180deg) scaleY(-1);
z-index: 3;
}
.title-tag[data-v-caa79165] {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.title-pill-wrap[data-v-caa79165] {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.title-pill-wrap--lime[data-v-caa79165] {
top: 45px;
left: 0;
width: 424.202px;
height: 126.62px;
z-index: 1;
}
.title-pill-wrap--white[data-v-caa79165] {
top: 134px;
left: 147px;
width: 546.281px;
height: 109.547px;
}
.title-pill-rotate[data-v-caa79165] {
flex: none;
}
.title-pill-rotate--lime[data-v-caa79165] {
transform: rotate(-6.49deg);
}
.title-pill-rotate--white[data-v-caa79165] {
transform: rotate(3.14deg);
}
.title-pill[data-v-caa79165] {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 19.953px 31.924px;
border-radius: 94.276px;
font-family: var(--font-family-sans);
font-weight: 900;
font-size: 49.881px;
line-height: 0.8;
letter-spacing: -2.494px;
text-transform: uppercase;
white-space: nowrap;
}
.title-pill--lime[data-v-caa79165] {
background: #c3fd56;
color: #1e1e1e;
}
.title-pill--white[data-v-caa79165] {
background: #fff;
color: #000;
}
.title-heart[data-v-caa79165] {
width: 39.905px;
height: 39.905px;
flex-shrink: 0;
}
.right-side[data-v-caa79165] {
position: absolute;
inset: 0 0 0 auto;
display: flex;
width: 960px;
height: 1272px;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 20px 20px 50px;
box-sizing: border-box;
overflow: hidden;
}
.right-column[data-v-caa79165] {
display: flex;
width: 549px;
height: 1202px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30px;
flex-shrink: 0;
}
.cards-list[data-v-caa79165] {
display: flex;
width: 470px;
height: 1061px;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
flex-shrink: 0;
overflow: hidden;
}
.deed-card[data-v-caa79165] {
position: relative;
width: 470px;
height: 260.636px;
border-radius: 54.838px;
overflow: hidden;
flex-shrink: 0;
}
.card-img[data-v-caa79165] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.section-cta[data-v-caa79165] {
display: flex;
align-items: center;
gap: 17px;
width: 549px;
height: 111px;
padding: 40px;
border: none;
border-radius: 30px;
background: var(--color-accent);
font-family: var(--font-family-sans);
cursor: pointer;
box-sizing: border-box;
flex-shrink: 0;
box-shadow: 0 18px 14px rgba(0, 0, 0, 0.15);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.section-cta-mobile-end[data-v-caa79165] {
display: none;
}
.section-cta[data-v-caa79165]:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(115, 145, 24, 0.34), 0 20px 18px rgba(0, 0, 0, 0.16);
}
.section-cta[data-v-caa79165]:active {
transform: translateY(1px);
box-shadow: 0 6px 12px rgba(115, 145, 24, 0.24), 0 12px 10px rgba(0, 0, 0, 0.14);
}
.cta-icon[data-v-caa79165] {
width: 28px;
height: 31px;
flex-shrink: 0;
}
.cta-copy[data-v-caa79165] {
display: flex;
align-items: center;
gap: 15px;
color: #000;
line-height: 0.9;
white-space: nowrap;
}
.cta-text[data-v-caa79165] {
font-size: 30px;
font-weight: 500;
letter-spacing: -0.3px;
}
.cta-price[data-v-caa79165] {
font-size: 33px;
font-weight: 700;
letter-spacing: -0.33px;
}
@media (max-aspect-ratio: 1 / 1) {
.good-deeds[data-v-caa79165] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 0;
padding: 0;
}
.good-deeds-scene[data-v-caa79165] {
display: grid;
grid-template-areas:
'left'
'right'
'decor';
gap: 22px;
width: 100%;
height: auto;
padding-top: 34px;
justify-items: center;
overflow: hidden;
}
.left-side[data-v-caa79165],
.right-side[data-v-caa79165] {
position: static;
width: 100%;
height: auto;
padding: 0;
justify-content: flex-start;
align-items: center;
z-index: 1;
}
.left-side[data-v-caa79165] {
grid-area: left;
}
.right-side[data-v-caa79165] {
grid-area: right;
}
.section-cta-mobile-end[data-v-caa79165] {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: var(--home-mobile-w-320);
height: 65px;
margin: 0 auto 0;
padding: 0 22px;
box-sizing: border-box;
border: none;
border-radius: 23px;
background: var(--color-accent);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
font: inherit;
color: #000;
cursor: pointer;
position: relative;
z-index: 1;
transform: translateY(-30px);
}
.title-cluster[data-v-caa79165] {
width: var(--home-mobile-w-292);
height: 150px;
}
.title-tag-wrap[data-v-caa79165] {
left: calc(50% + 100px);
right: 0;
top: 25px;
width: 90px;
height: 90px;
transform: rotate(0deg);
}
.title-pill-wrap--lime[data-v-caa79165] {
top: 18px;
left: 50%;
width: 256px;
height: 76px;
transform: translateX(-50%);
}
.title-pill-wrap--white[data-v-caa79165] {
top: 84px;
left: 50%;
width: 276px;
height: 58px;
transform: translateX(-50%);
}
.title-pill[data-v-caa79165] {
gap: 10px;
padding: 14px 22px;
border-radius: 60px;
font-size: 35px;
letter-spacing: -1.1px;
}
.title-heart[data-v-caa79165] {
width: 25px;
height: 25px;
}
.right-column[data-v-caa79165] {
position: relative;
z-index: 1;
width: var(--home-mobile-w-320);
height: auto;
gap: 16px;
}
.cards-list[data-v-caa79165] {
position: relative;
z-index: 1;
width: var(--home-mobile-w-308);
height: auto;
gap: 12px;
overflow: visible;
}
.deed-card[data-v-caa79165] {
width: var(--home-mobile-w-308);
height: 231px;
border-radius: 30px;
}
.deed-card--img-right .card-img[data-v-caa79165] {
object-position: -20px center;
}
.decor-bg[data-v-caa79165] {
position: static;
width: 100%;
height: 400px;
padding: 0;
align-items: center;
z-index: 1;
}
.section-cta[data-v-caa79165] {
display: none;
}
.cta-icon[data-v-caa79165] {
width: 18px;
height: 18px;
}
.cta-copy[data-v-caa79165] {
gap: 8px;
}
.cta-text[data-v-caa79165],
.cta-price[data-v-caa79165] {
font-size: 23px;
line-height: 1;
}
.decor-img[data-v-caa79165] {
object-fit: contain;
transform: scale(2.5) translateX(15px) translateY(40px);
}
}
.new-home[data-v-17cc8398] {
display: grid;
gap: 0;
width: 100%;
background: linear-gradient(to bottom, #9EC1DF 5%, #FCFCFC 5%);
--home-mobile-w-350: calc(100vw - 10px);
--home-mobile-w-344: calc(100vw - 16px);
--home-mobile-w-341: calc(100vw - 19px);
--home-mobile-w-337: calc(100vw - 23px);
--home-mobile-w-334: calc(100vw - 26px);
--home-mobile-w-320: calc(100vw - 40px);
--home-mobile-w-312: calc(100vw - 48px);
--home-mobile-w-308: calc(100vw - 52px);
--home-mobile-w-302: calc(100vw - 58px);
--home-mobile-w-292: calc(100vw - 68px);
--home-mobile-w-286: calc(100vw - 74px);
}
.new-home[data-v-17cc8398] > * { min-width: 0;
}
.section[data-v-17cc8398] { display: block;
}
.panel[data-v-f306229a] { display: grid; gap: 40px;
}
.title[data-v-f306229a] {
margin: 0;
font-weight: 600;
font-size: 64px;
line-height: 0.9;
letter-spacing: -0.01em;
color: var(--color-primary);
}
.steps[data-v-f306229a] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
list-style: none;
padding: 0;
margin: 0;
}
.step[data-v-f306229a] {
position: relative;
border-radius: 24px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 48px;
min-height: 196px;
overflow: hidden;
}
.step.light[data-v-f306229a] { background: #fff;
}
.step.dark[data-v-f306229a] { background: var(--color-primary); color: #fff;
}
.badge[data-v-f306229a] {
width: 64px; height: 64px;
border-radius: 8px;
display: grid; place-items: center;
}
.badge.lime[data-v-f306229a] { background: var(--color-accent);
}
.badge.white[data-v-f306229a] { background: #fff;
}
.num[data-v-f306229a] {
font-weight: 600;
font-size: 48px;
line-height: 0.9;
letter-spacing: -0.01em;
color: var(--color-primary);
}
.step-title[data-v-f306229a] {
margin: 0;
font-weight: 600;
font-size: 26px;
line-height: 1.1;
letter-spacing: -0.02em;
color: #1e1e1e;
}
.step-title.white[data-v-f306229a] { color: #fff;
}
.decor[data-v-f306229a] {
position: absolute;
right: -80px;
bottom: -140px;
width: 360px;
height: auto;
pointer-events: none;
transform: scaleX(-1) rotate(-15deg);
}
@media (max-aspect-ratio: 1/1) {
.title[data-v-f306229a] { font-size: 48px;
}
.steps[data-v-f306229a] { grid-template-columns: 1fr;
}
}
@media (max-aspect-ratio: 2/3) {
.title[data-v-f306229a] { font-size: 36px;
}
.step[data-v-f306229a] { gap: 24px; min-height: 160px; padding: 16px;
}
.badge[data-v-f306229a] { width: 40px; height: 40px;
}
.num[data-v-f306229a] { font-size: 24px;
}
.step-title[data-v-f306229a] { font-size: 18px;
}
.decor[data-v-f306229a] { width: 260px; right: -55px; bottom: -100px;
}
}
.dreams-view[data-v-486d94b3] { display: grid; gap: 64px; width: 100%;
}
.dreams-view[data-v-486d94b3] > * { min-width: 0;
}
.section[data-v-486d94b3] { display: block;
}
.hero-wrap[data-v-486d94b3] { display: grid; gap: 32px; padding-top: 32px;
}
@media (max-aspect-ratio: 3/4) {
.dreams-view[data-v-486d94b3] { gap: 40px;
}
}
@media (max-aspect-ratio: 2/3) {
.dreams-view[data-v-486d94b3] { gap: 32px;
}
}
.good-deeds-view[data-v-3e9ef420] {
display: grid; gap: 64px; width: 100%;
/* Background is handled by global CSS or meta if needed, but here we can set it for the content wrapper */
}
.sections[data-v-3e9ef420] {
display: flex;
flex-direction: column;
gap: 32px;
max-width: 1920px;
margin: 0 auto;
}
.hero-wrap[data-v-3e9ef420] {
border-radius: 28px;
overflow: hidden;
padding-top: 32px;
}
@media (max-width: 1024px) {
.sections[data-v-3e9ef420] {
padding: 20px;
gap: 20px;
}
}
@media (max-aspect-ratio: 3/4) {
.good-deeds-view[data-v-3e9ef420] {
gap: 20px;
}
.hero-wrap[data-v-3e9ef420] {
padding-top: 20px;
border-radius: 20px;
}
}
.bonuses-view[data-v-f7c0e26d] {
display: grid;
gap: 64px;
width: 100%;
padding-top: 32px;
max-width: 1920px;
margin: 0 auto;
}
/* Hero Section */
.hero-section[data-v-f7c0e26d] {
position: relative;
background: #4A48E9;
border-radius: 28px;
padding: 28px;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 64px;
}
.hero-bg[data-v-f7c0e26d] {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.hero-bg-color[data-v-f7c0e26d] {
position: absolute;
inset: 0;
background: #4A48E9;
}
.section[data-v-f7c0e26d] {
display: block;
}
/* Responsive */
@media (max-aspect-ratio: 1/1) {
.bonuses-view[data-v-f7c0e26d] {
gap: 40px;
}
.hero-section[data-v-f7c0e26d] {
padding: 20px;
gap: 48px;
}
}
@media (max-aspect-ratio: 3/4) {
.bonuses-view[data-v-f7c0e26d] {
gap: 24px;
padding-top: 16px;
}
.hero-section[data-v-f7c0e26d] {
border-radius: 20px;
padding: 16px;
gap: 40px;
}
}
@media (max-aspect-ratio: 2/3) {
.bonuses-view[data-v-f7c0e26d] {
gap: 8px;
padding-top: 8px;
}
.hero-section[data-v-f7c0e26d] {
border-radius: 20px;
padding: 8px 8px 20px;
gap: 32px;
}
}
.clear-data-view[data-v-71a0a17a] {
background: linear-gradient(to bottom, #7fabce 0%, #fff 100%);
min-height: 100dvh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.clear-data-logo[data-v-71a0a17a] {
position: absolute;
left: 36px;
top: 36px;
z-index: 2;
display: block;
}
.clear-data-logo__img[data-v-71a0a17a] {
height: 37px;
width: auto;
display: block;
}
.clear-data-mobile-header[data-v-71a0a17a] {
display: none;
}
.clear-data-container[data-v-71a0a17a] {
width: 100%;
max-width: 716px;
padding: 0 20px;
box-sizing: border-box;
position: relative;
z-index: 1;
}
.card[data-v-71a0a17a] {
background: #fff;
border-radius: 29px;
padding: 82px 32px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
box-sizing: border-box;
box-shadow:
0 20px 44px rgba(0, 0, 0, 0.04),
0 81px 81px rgba(0, 0, 0, 0.03),
0 183px 109px rgba(0, 0, 0, 0.02),
0 325px 130px rgba(0, 0, 0, 0.01);
}
.title[data-v-71a0a17a] {
margin: 0;
font-size: 32px;
font-weight: 600;
color: #1e1e1e;
letter-spacing: -0.64px;
text-align: center;
}
.subtitle[data-v-71a0a17a] {
margin: 0;
font-size: 16px;
font-weight: 500;
color: #6c6c6c;
line-height: 1.1;
letter-spacing: -0.32px;
text-align: center;
max-width: 408px;
}
.form[data-v-71a0a17a] {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
max-width: 408px;
align-self: stretch;
margin: 0 auto;
}
.field[data-v-71a0a17a] {
display: block;
background: rgba(235, 235, 235, 0.5);
padding: 21px;
border-radius: 12px;
width: 100%;
box-sizing: border-box;
}
.input[data-v-71a0a17a] {
width: 100%;
padding: 0;
box-sizing: border-box;
border: 0;
background: transparent;
outline: none;
font-size: 16px;
font-weight: 500;
color: #1e1e1e;
letter-spacing: -0.16px;
}
.input[data-v-71a0a17a]::placeholder {
color: rgba(30, 30, 30, 0.4);
}
.agree[data-v-71a0a17a] {
display: flex;
align-items: flex-start;
gap: 8px;
color: rgba(30, 30, 30, 0.6);
font-size: 14px;
margin: 0;
}
.agree a[data-v-71a0a17a] {
color: inherit;
text-decoration: underline;
}
.agree__checkbox[data-v-71a0a17a] {
min-width: 16px;
min-height: 16px;
border: 1px solid rgba(30, 30, 30, 0.25);
border-radius: 4px;
appearance: none;
background: #fff;
margin-top: 3px;
flex-shrink: 0;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.agree__checkbox[data-v-71a0a17a]:checked {
background-color: #000;
border-color: #000;
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
background-image: url('data:image/svg+xml;utf8,');
}
.agree__checkbox.is-error[data-v-71a0a17a] {
border-color: #ff3b30;
box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.15);
}
.error-text[data-v-71a0a17a] {
color: #ff3b30;
font-size: 14px;
margin: 0;
text-align: center;
}
.error-text--field[data-v-71a0a17a] {
text-align: left;
font-size: 13px;
line-height: 1.35;
padding: 0 2px;
}
.btn-submit[data-v-71a0a17a] {
width: 100%;
padding: 21px;
border: none;
border-radius: 12px;
background: #c3fd56;
color: #1e1e1e;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: opacity 0.2s ease;
box-sizing: border-box;
}
.btn-submit[data-v-71a0a17a]:hover:not(:disabled) {
opacity: 0.9;
}
.btn-submit[data-v-71a0a17a]:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Success overlay */
.success-overlay[data-v-71a0a17a] {
position: fixed;
inset: 0;
z-index: 300;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
display: grid;
place-items: center;
padding: 16px;
}
.success-dialog[data-v-71a0a17a] {
background: #fff;
border-radius: 20px;
width: 100%;
max-width: 460px;
display: flex;
flex-direction: column;
gap: 16px;
padding: 24px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.success-title[data-v-71a0a17a] {
font-size: 20px;
font-weight: 700;
color: #1e1e1e;
}
.success-body[data-v-71a0a17a] {
font-size: 14px;
color: rgba(30, 30, 30, 0.8);
}
.fade-enter-active[data-v-71a0a17a],
.fade-leave-active[data-v-71a0a17a] {
transition: opacity 0.2s ease;
}
.fade-enter-from[data-v-71a0a17a],
.fade-leave-to[data-v-71a0a17a] {
opacity: 0;
}
.pop-enter-active[data-v-71a0a17a],
.pop-leave-active[data-v-71a0a17a] {
transition: opacity 0.25s ease, transform 0.25s ease;
}
.pop-enter-from[data-v-71a0a17a],
.pop-leave-to[data-v-71a0a17a] {
opacity: 0;
transform: translateY(8px) scale(0.98);
}
/* Mobile styles */
@media (max-width: 480px) {
.clear-data-logo[data-v-71a0a17a] {
display: none;
}
.clear-data-view[data-v-71a0a17a] {
flex-direction: column;
align-items: stretch;
padding-top: 0;
min-height: 100dvh;
}
.clear-data-mobile-header[data-v-71a0a17a] {
display: flex;
flex-shrink: 0;
width: 100%;
padding: 24px 16px;
align-items: center;
justify-content: flex-start;
z-index: 2;
box-sizing: border-box;
}
.clear-data-mobile-header__back[data-v-71a0a17a] {
display: flex;
align-items: center;
gap: 17px;
text-decoration: none;
color: #fff;
font-size: 21px;
font-weight: 500;
letter-spacing: -0.2px;
}
.clear-data-mobile-header__back-icon[data-v-71a0a17a] {
width: 48px;
height: 48px;
display: block;
flex-shrink: 0;
}
.clear-data-container[data-v-71a0a17a] {
flex: 1;
width: 100%;
max-width: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
min-height: 0;
}
.card[data-v-71a0a17a] {
flex: 1;
width: 100%;
border-radius: 24px 24px 0 0;
padding: 48px 24px 32px;
gap: 32px;
box-shadow: none;
}
.title[data-v-71a0a17a] {
font-size: 40px;
text-align: center;
}
.subtitle[data-v-71a0a17a] {
font-size: 16px;
}
.form[data-v-71a0a17a] {
gap: 12px;
}
.field[data-v-71a0a17a] {
padding: 21px;
min-height: 60px;
}
.btn-submit[data-v-71a0a17a] {
padding: 21px;
min-height: 60px;
}
.success-dialog[data-v-71a0a17a] {
border-radius: 16px;
max-width: 360px;
padding: 16px;
gap: 12px;
}
.success-title[data-v-71a0a17a] {
font-size: 18px;
}
.success-body[data-v-71a0a17a] {
font-size: 12px;
}
}