/* Start:/loyalty/assets/css/loyalty.css?178905356514215*/ .loyalty-lp {--lp-bg: #f7f5f5;--lp-card: #efeceb;--lp-bulk: #e0dfdf;--lp-text: #3e4856;--lp-muted: #2d2d2d;--lp-accent: #87b337;--lp-border: #d5dbde;--lp-border-strong: #5c5c5c;--lp-white: #ffffff;--lp-radius: 8px;--lp-max: 1170px;background: var(--lp-bg);color: var(--lp-text);overflow: hidden;} /* Bitrix title над блоком дублирует hero h1 — прячем */ .container-wrap:has(.loyalty-lp) .breadcrumbs__title {display: none;} .container-wrap:has(.loyalty-lp) .breadcrumbs {padding-bottom: 0;} .loyalty-lp__container {width: 100%;max-width: calc(var(--lp-max) + 30px);margin: 0 auto;padding: 0 15px;box-sizing: border-box;} .loyalty-lp__heading {margin: 0 0 24px;font-size: 24px;line-height: 1.3;letter-spacing: 0.4px;text-align: center;text-transform: uppercase;color: var(--lp-muted);} .loyalty-lp__section {padding: 40px 0 0;} .loyalty-lp__btn {display: inline-flex;align-items: center;justify-content: center;min-height: 44px;min-width: 160px;padding: 10px 20px;border: 1px solid transparent;border-radius: var(--lp-radius);box-sizing: border-box;font-size: 13px;line-height: 1.2;letter-spacing: 0.3px;text-align: center;text-transform: uppercase;text-decoration: none;transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;cursor: pointer;} .loyalty-lp__btn--dark {background: #2d2d2d;border-color: #2d2d2d;color: #f5f5f5;} .loyalty-lp__btn--dark:hover {background: #1e1e1e;border-color: #1e1e1e;color: #fff;} .loyalty-lp__btn--outline {background: rgba(255, 255, 255, .7);border-color: #2d2d2d;color: #2d2d2d;} .loyalty-lp__btn--outline:hover {background: #fff;color: #1e1e1e;} .loyalty-lp__btn--ghost {background: transparent;border-color: var(--lp-white);color: var(--lp-white);} .loyalty-lp__btn--ghost:hover {background: rgba(255, 255, 255, .12);color: var(--lp-white);} .loyalty-lp__btn--outline-dark {background: #f3f1f1;border-color: #2d2d2d;color: var(--lp-muted);} .loyalty-lp__btn--outline-dark:hover {background: #e8e6e6;color: var(--lp-text);} .loyalty-lp__level--advanced .loyalty-lp__btn--outline-dark {background: rgba(255, 255, 255, .35);} .loyalty-lp__level--trainer .loyalty-lp__btn--ghost {width: 100%;max-width: 220px;} /* Hero */ .loyalty-lp__hero {position: relative;min-height: 320px;display: flex;align-items: center;color: var(--lp-muted);} .loyalty-lp__hero-media {position: absolute;inset: 0;display: block;width: 100%;height: 100%;} .loyalty-lp__hero-img {width: 100%;height: 100%;object-fit: cover;object-position: center right;display: block;} .loyalty-lp__hero::after {content: "";position: absolute;inset: 0;background: linear-gradient(90deg, rgba(247, 245, 245, .82) 0%, rgba(247, 245, 245, .45) 42%, rgba(247, 245, 245, 0) 70%);pointer-events: none;} .loyalty-lp__hero-content {position: relative;z-index: 1;padding-top: 36px;padding-bottom: 36px;max-width: 520px;margin-left: max(15px, calc((100% - var(--lp-max)) / 2));margin-right: auto;} .loyalty-lp__hero-title {margin: 0 0 10px;text-transform: uppercase;letter-spacing: 0.4px;padding-bottom: 0;} .loyalty-lp__hero-title-line {display: block;font-size: 24px;line-height: 1.25;color: var(--lp-muted);} .loyalty-lp__hero-title-brand {display: block;font-size: 36px;line-height: 1.15;color: var(--lp-muted);} .loyalty-lp__hero-text {margin: 0 0 16px;max-width: 440px;font-size: 15px;line-height: 1.45;letter-spacing: 0;color: var(--lp-text);} .loyalty-lp__hero-actions {display: flex;flex-wrap: wrap;gap: 10px;} .loyalty-lp__hero .loyalty-lp__btn {min-width: 200px;} .loyalty-lp__hero .loyalty-lp__btn--outline {background: rgba(255, 255, 255, .55);backdrop-filter: blur(2px);} /* Privileges */ .loyalty-lp__privilege-list {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 16px;margin: 0;padding: 0;list-style: none;} .loyalty-lp__privilege-card {display: flex;align-items: flex-start;gap: 12px;min-height: 0;padding: 18px 14px;background: var(--lp-card);border: 1px solid var(--lp-border-strong);border-radius: 12px;box-sizing: border-box;} .loyalty-lp__privilege-icon {flex: none;display: flex;align-items: center;justify-content: center;width: 48px;height: 48px;border-radius: 50%;background: rgba(255, 255, 255, .7);border: 1px solid rgba(92, 92, 92, .25);} .loyalty-lp__privilege-icon img {max-width: 28px;max-height: 26px;width: auto;height: auto;object-fit: contain;} .loyalty-lp__privilege-body {display: flex;flex-direction: column;gap: 2px;min-width: 0;} .loyalty-lp__privilege-value {font-size: 36px;line-height: 1.1;text-transform: uppercase;color: var(--lp-muted);} .loyalty-lp__privilege-text {font-size: 14px;line-height: 1.35;letter-spacing: 0;color: var(--lp-text);} /* How it works */ .loyalty-lp__steps {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 16px;margin: 0;padding: 0;list-style: none;} .loyalty-lp__step {position: relative;display: flex;flex-direction: column;align-items: center;text-align: left;} .loyalty-lp__step:not(:last-child)::after {content: "";position: absolute;top: 48px;left: calc(50% + 56px);width: calc(100% - 70px);height: 1px;background: var(--lp-border-strong);pointer-events: none;} .loyalty-lp__step:not(:last-child)::before {content: "";position: absolute;top: 44px;right: -8px;width: 0;height: 0;border-style: solid;border-width: 5px 0 5px 8px;border-color: transparent transparent transparent var(--lp-border-strong);z-index: 1;} .loyalty-lp__step-icon {display: flex;align-items: center;justify-content: center;width: 96px;height: 96px;margin-bottom: 14px;border-radius: 50%;background: rgba(201, 201, 201, .18);border: 1px solid rgba(92, 92, 92, .35);} .loyalty-lp__step-icon img {max-width: 48px;max-height: 48px;width: auto;height: auto;object-fit: contain;} .loyalty-lp__step-body {display: flex;align-items: flex-start;gap: 8px;width: 100%;max-width: 240px;} .loyalty-lp__step-num {flex: none;font-size: 32px;line-height: 1;color: var(--lp-accent);} .loyalty-lp__step-text {display: flex;flex-direction: column;gap: 4px;padding-top: 2px;} .loyalty-lp__step-text strong {font-size: 15px;line-height: 1.25;color: var(--lp-muted);} .loyalty-lp__step-text span {font-size: 13px;line-height: 1.35;color: var(--lp-text);} /* Levels */ .loyalty-lp__levels-row {display: flex;align-items: stretch;justify-content: center;gap: 12px;} .loyalty-lp__level-arrow {flex: none;align-self: center;width: 40px;height: auto;} .loyalty-lp__level {display: flex;flex-direction: column;width: 100%;max-width: 360px;min-height: 0;padding: 20px;border: 1px solid var(--lp-border-strong);border-radius: 12px;box-sizing: border-box;} .loyalty-lp__level--novice {background: rgba(201, 201, 201, .12);} .loyalty-lp__level--advanced {background: var(--lp-accent);color: #1a1a1a;} .loyalty-lp__level--trainer {background: #2d2d2d;color: #fff;} .loyalty-lp__level--trainer .loyalty-lp__level-label, .loyalty-lp__level--trainer .loyalty-lp__level-title, .loyalty-lp__level--trainer .loyalty-lp__level-list {color: #fff;} .loyalty-lp__level-top {display: flex;justify-content: space-between;gap: 10px;margin-bottom: 4px;} .loyalty-lp__level-label {margin: 0 0 2px;font-size: 13px;line-height: 1.3;} .loyalty-lp__level-title {margin: 0 0 6px;font-size: 16px;line-height: 1.25;} .loyalty-lp__level-discount-label {margin: 0;font-size: 11px;line-height: 1.4;text-transform: uppercase;} .loyalty-lp__level-discount {margin: 0;font-size: 40px;line-height: 1.1;} .loyalty-lp__level-badge {flex: none;display: flex;align-items: center;justify-content: center;width: 48px;height: 48px;border-radius: 50%;background: rgba(255, 255, 255, .55);border: 1px solid rgba(92, 92, 92, .25);} .loyalty-lp__level-badge--dark {background: rgba(255, 255, 255, .12);border-color: rgba(255, 255, 255, .35);} .loyalty-lp__level-badge img {max-width: 28px;max-height: 28px;width: auto;height: auto;object-fit: contain;} .loyalty-lp__level-list {margin: 10px 0 16px;padding: 0;list-style: none;flex: 1;} .loyalty-lp__level-list li {display: flex;align-items: flex-start;gap: 8px;margin-bottom: 6px;font-size: 13px;line-height: 1.35;} .loyalty-lp__level-list img {flex: none;width: 12px;height: 10px;margin-top: 4px;object-fit: contain;} .loyalty-lp__level .loyalty-lp__btn {width: 100%;max-width: 220px;} /* Bulk discount */ .loyalty-lp__bulk-row {display: flex;justify-content: center;gap: 16px;flex-wrap: wrap;} .loyalty-lp__bulk-card {display: flex;align-items: center;justify-content: space-between;gap: 16px;width: 100%;max-width: 360px;min-height: 0;padding: 16px 20px;background: var(--lp-bulk);border: 1px solid var(--lp-border-strong);border-radius: 12px;box-sizing: border-box;} .loyalty-lp__bulk-text {display: flex;flex-direction: column;gap: 2px;font-size: 14px;line-height: 1.3;} .loyalty-lp__bulk-text strong {} .loyalty-lp__bulk-value {font-size: 36px;line-height: 1.1;text-transform: uppercase;color: var(--lp-muted);} /* Benefits */ .loyalty-lp__benefits-bar {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 12px 16px;margin: 0;padding: 16px 18px;list-style: none;background: var(--lp-card);border: 1px solid var(--lp-border-strong);border-radius: 12px;} .loyalty-lp__benefit {display: flex;align-items: center;gap: 10px;min-width: 0;} .loyalty-lp__benefit img {flex: none;width: auto;max-width: 48px;height: 32px;object-fit: contain;} .loyalty-lp__benefit strong, .loyalty-lp__benefit span {display: block;font-size: 13px;line-height: 1.35;} .loyalty-lp__benefit strong {color: var(--lp-muted);} .loyalty-lp__benefit span {color: var(--lp-text);} /* Bottom CTA */ .loyalty-lp__cta {position: relative;margin-top: 48px;min-height: 320px;display: flex;align-items: center;background: #f3f1f1;} .loyalty-lp__cta-media {position: absolute;inset: 0;display: block;width: 100%;height: 100%;overflow: hidden;} .loyalty-lp__cta-img {width: 100%;height: 100%;object-fit: cover;object-position: center right;display: block;} .loyalty-lp__cta::after {content: "";position: absolute;inset: 0;background: linear-gradient(90deg, rgba(243, 241, 241, .9) 0%, rgba(243, 241, 241, .55) 48%, rgba(243, 241, 241, 0) 72%);pointer-events: none;} .loyalty-lp__cta-content {position: relative;z-index: 1;padding-top: 48px;padding-bottom: 48px;max-width: 520px;margin-left: max(15px, calc((100% - var(--lp-max)) / 2));margin-right: auto;} .loyalty-lp__cta-title {margin: 0 0 12px;max-width: 520px;font-size: 24px;line-height: 1.3;letter-spacing: 0.4px;text-transform: uppercase;color: var(--lp-muted);} .loyalty-lp__cta-text {margin: 0 0 20px;max-width: 480px;font-size: 16px;line-height: 1.45;color: var(--lp-text);} .loyalty-lp__cta .loyalty-lp__btn {min-width: 200px;} /* Tablet */ @media (max-width: 1200px) { .loyalty-lp__hero-title-line {font-size: 24px;} .loyalty-lp__hero-title-brand {font-size: 34px;} .loyalty-lp__privilege-list, .loyalty-lp__steps {grid-template-columns: repeat(2, minmax(0, 1fr));} .loyalty-lp__step:not(:last-child)::before, .loyalty-lp__step:not(:last-child)::after {display: none;} .loyalty-lp__levels-row {flex-wrap: wrap;} .loyalty-lp__level-arrow {display: none;} .loyalty-lp__level {max-width: calc(50% - 8px);} .loyalty-lp__benefits-bar {grid-template-columns: repeat(2, minmax(0, 1fr));} } @media (max-width: 1024px) { .loyalty-lp__hero {min-height: 340px;} .loyalty-lp__hero-content, .loyalty-lp__cta-content {margin-left: auto;max-width: 100%;} .loyalty-lp__hero::after {background: linear-gradient(180deg, rgba(247, 245, 245, .45) 0%, rgba(247, 245, 245, .88) 100%);} .loyalty-lp__level {max-width: 100%;} } /* Mobile */ @media (max-width: 767px) { .loyalty-lp__heading {margin-bottom: 16px;font-size: 20px;} .loyalty-lp__section {padding-top: 28px;} .loyalty-lp__btn {width: 100%;min-width: 0;min-height: 44px;font-size: 12px;} .loyalty-lp__hero {min-height: 360px;align-items: flex-end;} .loyalty-lp__hero-img {object-position: 70% center;} .loyalty-lp__hero-content {padding-top: 28px;padding-bottom: 28px;} .loyalty-lp__hero-title {margin-bottom: 10px;} .loyalty-lp__hero-title-line {font-size: 22px;} .loyalty-lp__hero-title-brand {font-size: 30px;} .loyalty-lp__hero-text {margin-bottom: 16px;font-size: 14px;} .loyalty-lp__hero-actions {flex-direction: column;width: 100%;} .loyalty-lp__hero .loyalty-lp__btn, .loyalty-lp__cta .loyalty-lp__btn {min-width: 0;width: 100%;} .loyalty-lp__privilege-list {grid-template-columns: repeat(2, minmax(0, 1fr));gap: 10px;} .loyalty-lp__privilege-card {flex-direction: column;padding: 14px;gap: 10px;} .loyalty-lp__privilege-icon {width: 40px;height: 40px;} .loyalty-lp__privilege-value {font-size: 28px;} .loyalty-lp__privilege-text {font-size: 12px;} .loyalty-lp__steps {grid-template-columns: repeat(2, minmax(0, 1fr));gap: 20px 12px;} .loyalty-lp__step-icon {width: 72px;height: 72px;margin-bottom: 10px;} .loyalty-lp__step-icon img {max-width: 36px;max-height: 36px;} .loyalty-lp__step-body {max-width: none;gap: 6px;} .loyalty-lp__step-num {font-size: 26px;} .loyalty-lp__step-text strong {font-size: 14px;} .loyalty-lp__step-text span {font-size: 12px;} .loyalty-lp__levels-row {flex-direction: column;gap: 12px;} .loyalty-lp__level {padding: 16px;} .loyalty-lp__level-discount {font-size: 32px;} .loyalty-lp__level .loyalty-lp__btn {max-width: none;} .loyalty-lp__bulk-row {flex-direction: column;gap: 10px;} .loyalty-lp__bulk-card {max-width: none;padding: 14px 16px;} .loyalty-lp__bulk-value {font-size: 28px;} .loyalty-lp__bulk-text {font-size: 13px;} .loyalty-lp__benefits-bar {grid-template-columns: 1fr;padding: 14px;gap: 12px;} .loyalty-lp__benefit img {height: 28px;max-width: 40px;} .loyalty-lp__cta {margin-top: 32px;min-height: 300px;align-items: flex-end;} .loyalty-lp__cta::after {background: linear-gradient(180deg, rgba(243, 241, 241, .3) 0%, rgba(243, 241, 241, .9) 55%, rgba(243, 241, 241, .96) 100%);} .loyalty-lp__cta-content {padding-top: 28px;padding-bottom: 28px;margin-left: auto;max-width: 100%;} .loyalty-lp__cta-title {font-size: 20px;} .loyalty-lp__cta-text {font-size: 14px;margin-bottom: 16px;} } @media (max-width: 420px) { .loyalty-lp__privilege-list {grid-template-columns: 1fr;} .loyalty-lp__btn {width: 100%!important;} } /* End */ /* Start:/loyalty/assets/css/loyalty-figma.css?178911222222275*/ /* Корректировки страницы по макетам Figma 1854 и 1024 px. */ @font-face { font-family: 'CeraPro'; src: url(/local/templates/main/assets/fonts/CeraPro-Light.woff2) format("woff2"); font-display: swap; font-weight: 300; font-style: normal; } @font-face { font-family: 'CeraPro'; src: url(/local/templates/main/assets/fonts/CeraPro-Regular.woff2) format("woff2"); font-display: swap; font-weight: 400; font-style: normal; } @font-face { font-family: 'CeraPro'; src: url(/local/templates/main/assets/fonts/CeraPro-Medium.woff2) format("woff2"); font-display: swap; font-weight: 500; font-style: normal; } @font-face { font-family: 'CeraPro'; src: url(/local/templates/main/assets/fonts/CeraPro-Bold.woff2) format("woff2"); font-display: swap; font-weight: 700; font-style: normal; } @font-face { font-family: 'CeraPro'; src: url(/local/templates/main/assets/fonts/CeraPro-Black.woff2) format("woff2"); font-display: swap; font-weight: 900; font-style: normal; } /* Макет: Cera Pro Light 300 / Regular 400 / Bold 700. LatoBold/LatoRegular — отдельные семейства и игнорируют font-weight, поэтому после смены на CeraPro вес нужно задавать явно. */ .loyalty-lp {--lp-text: #1e1e1e;--lp-border: #5c5c5c;--lp-radius: 20px;--lp-max: 1457px;--lp-heading-gap: 48px;--lp-section-gap: 80px;font-family: CeraPro, Arial, sans-serif;font-weight: 300;font-synthesis: none;} .loyalty-lp__heading, .loyalty-lp__btn, .loyalty-lp__hero-title-line, .loyalty-lp__hero-title-brand, .loyalty-lp__privilege-value, .loyalty-lp__step-text strong, .loyalty-lp__level-title, .loyalty-lp__level-discount-label, .loyalty-lp__level-discount, .loyalty-lp__bulk-text strong, .loyalty-lp__bulk-value, .loyalty-lp__benefit strong, .loyalty-lp__cta-title {font-family: CeraPro, Arial, sans-serif;font-weight: 700;} .loyalty-lp__hero-text, .loyalty-lp__privilege-text, .loyalty-lp__step-text span, .loyalty-lp__level-label, .loyalty-lp__bulk-text, .loyalty-lp__bulk-text span, .loyalty-lp__benefit span, .loyalty-lp__cta-text {font-family: CeraPro, Arial, sans-serif;font-weight: 300;} .loyalty-lp__step-num, .loyalty-lp__level-list, .loyalty-lp__level-list li, .loyalty-lp__level-list span {font-family: CeraPro, Arial, sans-serif;font-weight: 400;} body:has(.loyalty-lp) {background: #f7f5f5;} .loyalty-lp__container {width: calc(100% - 84px);max-width: var(--lp-max);padding: 0;} .loyalty-lp__heading {padding-bottom: 0 !important;margin: 0 0 var(--lp-heading-gap);font-size: 34px;line-height: 1.53;letter-spacing: .68px;} .loyalty-lp__btn {width: 327px;min-width: 0;min-height: 77px;padding: 16px 20px;border-width: 2px;border-radius: 0;font-size: 14px;line-height: 1.21;letter-spacing: .7px;} .loyalty-lp__btn--outline {background: transparent;border-color: #fff;color: #fff;} .loyalty-lp__level--advanced .loyalty-lp__btn--outline-dark {background: transparent;} /* Первый экран */ .loyalty-lp__hero {min-height: 980px;} .loyalty-lp__hero-img, .loyalty-lp__cta-img {object-position: center;} .loyalty-lp__hero-img {object-position: center 75%;} .loyalty-lp__hero::after {background: linear-gradient(90deg, rgba(247, 245, 245, .28), rgba(247, 245, 245, 0) 58%);} .loyalty-lp__hero-content, .loyalty-lp__cta-content {width: calc(100% - 84px);max-width: var(--lp-max);margin-right: auto;margin-left: auto;padding: 0;} .loyalty-lp__hero-title {width: 815px;margin: 0 0 34px;letter-spacing: 1.2px;} .loyalty-lp__hero-title-line {font-size: 45px;line-height: 1.69;} .loyalty-lp__hero-title-brand {font-size: 84px;line-height: 1.02;} .loyalty-lp__hero-text {width: 653px;max-width: none;margin: 0 0 48px;font-size: 32px;line-height: 1.5;letter-spacing: .32px;} .loyalty-lp__hero-actions {gap: 16px;} .loyalty-lp__hero .loyalty-lp__btn, .loyalty-lp__cta .loyalty-lp__btn {width: 327px;min-width: 0;} /* Привилегии */ .loyalty-lp__privileges {padding-top: 48px;} .loyalty-lp__privilege-list {grid-template-columns: repeat(4, 344px);gap: 27px;} .loyalty-lp__privilege-card {display: grid;grid-template-columns: 75px minmax(0, 1fr);align-items: center;gap: 23px;width: 344px;height: 188px;padding: 20px;border-color: var(--lp-border);border-radius: 20px;} .loyalty-lp__privilege-icon, .loyalty-lp__level-badge {width: 75px;height: 75px;} .loyalty-lp__privilege-icon img {max-width: 46px;max-height: 39px;} .loyalty-lp__privilege-value {font-size: 64px;line-height: 1.06;} .loyalty-lp__privilege-text {font-size: 20px;line-height: 1.2;letter-spacing: .68px;color: #000;} /* Как это работает */ .loyalty-lp__how {padding-top: var(--lp-section-gap);} .loyalty-lp__steps {grid-template-columns: repeat(4, minmax(0, 1fr));gap: 27px;} /* Стрелка занимает весь промежуток между кружками: линия от края текущего кружка до наконечника, наконечник — вплотную к следующему. Раньше линия имела фиксированные 160px и заезжала под следующий кружок, а наконечник стоял у края текста, то есть в середине линии. */ .loyalty-lp__step:not(:last-child)::after {top: 85px;left: calc(50% + 97px);right: -80px;width: auto;} .loyalty-lp__step:not(:last-child)::before {top: 80px;right: -92px;border-width: 6px 0 6px 10px;} .loyalty-lp__step-icon {width: 170px;height: 170px;margin-bottom: 22px;} .loyalty-lp__step-icon img {max-width: 86px;max-height: 85px;} .loyalty-lp__step-body {display: grid;grid-template-columns: 47px minmax(0, 1fr);max-width: none;} .loyalty-lp__step-num {font-size: 64px;line-height: 1.31;} .loyalty-lp__step-text {gap: 0;padding-top: 15px;} .loyalty-lp__step-text strong {font-size: 24px;line-height: 1;} .loyalty-lp__step-text span {margin-top: 10px;font-size: 20px;line-height: 1.2;letter-spacing: .68px;color: #000;} /* Уровни */ .loyalty-lp__levels {padding-top: var(--lp-section-gap);} .loyalty-lp__levels-row {display: grid;grid-template-columns: 406px 66px 406px 66px 406px;gap: 27px;} .loyalty-lp__level-arrow {display: block;width: 66px;} /* Высота по самой высокой карточке, а не жёсткие 406px: у «Продвинутого мастера» условий на строку больше и кнопка вываливалась за карточку. */ .loyalty-lp__level {width: 406px;max-width: none;height: auto;min-height: 406px;padding: 30px;border-color: var(--lp-border);border-radius: 20px;} .loyalty-lp__level-label {font-size: 16px;line-height: 1.5;} .loyalty-lp__level-title {margin-bottom: 0;font-size: 20px;line-height: 1.2;} .loyalty-lp__level-discount-label {margin-top: 7px;font-size: 12px;line-height: 3.33;text-transform: none;} .loyalty-lp__level-discount {font-size: 64px;line-height: 1;} .loyalty-lp__level-badge img {max-width: 48px;max-height: 46px;} .loyalty-lp__level-list {margin: 22px 0 18px;} .loyalty-lp__level-list li {gap: 10px;margin-bottom: 4px;font-size: 16px;line-height: 1.5;} .loyalty-lp__level-list img {margin-top: 6px;} .loyalty-lp__level .loyalty-lp__btn {width: 100%;max-width: none;min-height: 77px;margin-top: auto;border-width: 1px;border-radius: 20px;} /* Скидки за количество */ .loyalty-lp__bulk {padding-top: var(--lp-section-gap);} .loyalty-lp__bulk-row {gap: 72px;} .loyalty-lp__bulk-card {width: 409px;max-width: none;height: 132px;padding: 18px 42px;border-color: var(--lp-border);border-radius: 20px;} .loyalty-lp__bulk-text {font-size: 20px;line-height: 1.2;letter-spacing: .68px;} .loyalty-lp__bulk-value {font-size: 64px;line-height: 1.31;} /* Дополнительные преимущества */ .loyalty-lp__benefits {padding-top: var(--lp-section-gap);} .loyalty-lp__benefits-bar {grid-template-columns: repeat(4, minmax(0, 1fr));align-items: center;gap: 0;height: 128px;padding: 0 28px;border-color: var(--lp-border);border-radius: 20px;} .loyalty-lp__benefit {gap: 16px;} .loyalty-lp__benefit img {height: 50px;max-width: 86px;} .loyalty-lp__benefit strong, .loyalty-lp__benefit span {font-size: 16px;line-height: 1.38;} /* Финальный баннер */ .loyalty-lp__cta {min-height: 701px;margin-top: 100px;background: #fff;} .loyalty-lp__cta::after {display: none;} .loyalty-lp__cta-title {width: 815px;max-width: none;margin: 0 0 31px;font-size: 40px;line-height: 1.35;letter-spacing: 1.2px;padding-bottom: 0 !important;} .loyalty-lp__cta-text {width: 653px;max-width: none;margin: 0 0 40px;font-size: 32px;line-height: 1.31;letter-spacing: .32px;} @media (min-width: 1201px) { .loyalty-lp__container, .loyalty-lp__hero-content, .loyalty-lp__cta-content {position: relative;left: 14px;} .loyalty-lp__hero-content {transform: translateY(-55px);} } @media (min-width: 1201px) and (max-width: 1580px) { .loyalty-lp__privilege-list {grid-template-columns: repeat(4, minmax(0, 1fr));gap: 18px;} .loyalty-lp__privilege-card {grid-template-columns: 64px minmax(0, 1fr);gap: 14px;width: auto;padding: 16px;} .loyalty-lp__privilege-icon {width: 64px;height: 64px;} .loyalty-lp__privilege-value {font-size: 52px;line-height: 1.12;} .loyalty-lp__privilege-text {font-size: 17px;} .loyalty-lp__levels-row {grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr) 42px minmax(0, 1fr);gap: 16px;} .loyalty-lp__level, .loyalty-lp__level-arrow {width: 100%;} } /* Макет 1024 px */ @media (max-width: 1200px) { .loyalty-lp__hero {min-height: 646px;color: #fff;} .loyalty-lp__hero-img {width: 100%;max-width: 100%;object-position: center;} .loyalty-lp__hero::after {background: rgba(45, 45, 45, .6);} .loyalty-lp__hero-title {width: 572px;margin-bottom: 20px;color: #fff;} .loyalty-lp__hero-title-line, .loyalty-lp__hero-title-brand {color: #fff;} .loyalty-lp__hero-title-line {font-size: 34px;line-height: 2.47;} .loyalty-lp__hero-title-brand {font-size: 64px;line-height: 1;} .loyalty-lp__hero-text {width: 478px;margin-bottom: 35px;font-size: 22px;line-height: 1.5;color: #fff;} .loyalty-lp__hero .loyalty-lp__btn, .loyalty-lp__cta .loyalty-lp__btn {font-size: 14px;} .loyalty-lp {--lp-heading-gap: 36px;--lp-section-gap: 64px;} .loyalty-lp__privileges {padding-top: 40px;} .loyalty-lp__privilege-list {grid-template-columns: repeat(2, 344px);justify-content: center;gap: 36px 27px;} .loyalty-lp__how {padding-top: var(--lp-section-gap);} .loyalty-lp__steps {grid-template-columns: repeat(2, 344px);justify-content: center;gap: 50px 27px;} .loyalty-lp__step:nth-child(2n)::before, .loyalty-lp__step:nth-child(2n)::after {display: none;} .loyalty-lp__levels {padding-top: var(--lp-section-gap);} .loyalty-lp__levels-row {grid-template-columns: repeat(3, 300px);justify-content: center;gap: 19px;} .loyalty-lp__level-arrow {display: none;} .loyalty-lp__level {width: 300px;height: auto;min-height: 406px;padding: 30px 25px;} .loyalty-lp__level-badge {width: 60px;height: 60px;} .loyalty-lp__level-badge img {max-width: 39px;max-height: 38px;} .loyalty-lp__level .loyalty-lp__btn {width: 100%;min-height: 63px;padding: 12px 10px;font-size: 16px;} .loyalty-lp__bulk {padding-top: var(--lp-section-gap);} .loyalty-lp__bulk-row {gap: 25px;} .loyalty-lp__benefits {padding-top: var(--lp-section-gap);} .loyalty-lp__cta {min-height: 459px;margin-top: 91px;} .loyalty-lp__cta-img {width: 100%;max-width: 100%;} .loyalty-lp__cta-title {width: 564px;margin-bottom: 20px;font-size: 30px;line-height: 1.5;} .loyalty-lp__cta-text {width: 478px;margin-bottom: 27px;font-size: 22px;line-height: 1.5;} } /* Узкие телефоны */ @media (max-width: 900px) { .loyalty-lp {--lp-heading-gap: 16px;--lp-section-gap: 32px;} .loyalty-lp__container, .loyalty-lp__hero-content, .loyalty-lp__cta-content {width: calc(100% - 30px);} .loyalty-lp__heading {font-size: 20px;line-height: 1.4;letter-spacing: .4px;} .doc-ready .page-header.page-header--main .page-header__logo {display: none;} .loyalty-lp__hero {min-height: 460px;align-items: center;} .loyalty-lp__hero-img {width: 145%;object-position: 58% center;} .loyalty-lp__hero-title, .loyalty-lp__hero-text {width: 58%;} .loyalty-lp__hero-title {margin-bottom: 12px;} .loyalty-lp__hero-title-line {font-size: 20px;line-height: 1.5;} .loyalty-lp__hero-title-brand {font-size: 34px;line-height: 1.18;} .loyalty-lp__hero-text {margin-bottom: 20px;font-size: 14px;line-height: 1.43;} .loyalty-lp__hero-actions {flex-direction: column;align-items: stretch;width: 100%;gap: 8px;} .loyalty-lp__btn, .loyalty-lp__cta .loyalty-lp__btn {width: auto;min-height: 46px;flex: 1;padding: 10px 6px;font-size: 9px;} .loyalty-lp__hero .loyalty-lp__btn {width: 100%;min-height: 46px;flex: none;padding: 12px 16px;font-size: 12px;letter-spacing: .4px;} .loyalty-lp__privileges {padding-top: 24px;} .loyalty-lp__privilege-list {grid-template-columns: repeat(2, minmax(0, 1fr));gap: 12px;} .loyalty-lp__privilege-card {grid-template-columns: 40px minmax(0, 1fr);gap: 8px;width: auto;height: 108px;padding: 10px;border-radius: 12px;} .loyalty-lp__privilege-icon {width: 40px;height: 40px;} .loyalty-lp__privilege-icon img {max-width: 25px;max-height: 23px;} .loyalty-lp__privilege-value {font-size: 30px;line-height: 1.13;} .loyalty-lp__privilege-text {font-size: 11px;line-height: 1.27;letter-spacing: 0;} .loyalty-lp__how {padding-top: var(--lp-section-gap);} .loyalty-lp__steps {grid-template-columns: repeat(2, minmax(0, 1fr));gap: 30px 12px;} .loyalty-lp__step-icon {width: 82px;height: 82px;margin-bottom: 12px;} .loyalty-lp__step-icon img {max-width: 42px;max-height: 42px;} .loyalty-lp__step:not(:last-child)::after {top: 41px;left: calc(50% + 47px);width: calc(100% - 76px);} .loyalty-lp__step:not(:last-child)::before {top: 37px;right: -5px;border-width: 5px 0 5px 8px;} .loyalty-lp__step-body {grid-template-columns: 24px minmax(0, 1fr);} .loyalty-lp__step-num {font-size: 28px;line-height: 1.21;} .loyalty-lp__step-text {padding-top: 3px;} .loyalty-lp__step-text strong {font-size: 12px;line-height: 1.25;} .loyalty-lp__step-text span {margin-top: 5px;font-size: 10px;line-height: 1.3;letter-spacing: 0;} .loyalty-lp__levels {padding-top: var(--lp-section-gap);} .loyalty-lp__levels-row {grid-template-columns: repeat(3, minmax(0, 1fr));gap: 6px;} .loyalty-lp__level {width: auto;height: auto;min-height: 300px;padding: 12px 8px;border-radius: 12px;} .loyalty-lp__level-top {gap: 4px;} /* Карточка уровня узкая: без этого текстовая часть не сжимается и значок уровня вылезает за пределы карточки. */ .loyalty-lp__level-intro {min-width: 0;} .loyalty-lp__level-label {font-size: 9px;line-height: 1.44;} .loyalty-lp__level-title {min-height: 30px;font-size: 11px;line-height: 1.27;} .loyalty-lp__level-discount-label {margin-top: 4px;font-size: 8px;line-height: 2;} .loyalty-lp__level-discount {font-size: 32px;line-height: 1.13;} .loyalty-lp__level-badge {width: 34px;height: 34px;} .loyalty-lp__level-badge img {max-width: 23px;max-height: 23px;} .loyalty-lp__level-list {margin: 10px 0 8px;} .loyalty-lp__level-list li {gap: 4px;margin-bottom: 3px;font-size: 9px;line-height: 1.33;} .loyalty-lp__level-list img {width: 7px;height: 6px;margin-top: 3px;} .loyalty-lp__level .loyalty-lp__btn {width: 100%;min-height: 38px;padding: 6px 3px;border-radius: 10px;font-size: 8px;} .loyalty-lp__bulk {padding-top: var(--lp-section-gap);} .loyalty-lp__bulk-row {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 10px;} .loyalty-lp__bulk-card {width: auto;height: 82px;padding: 10px 12px;border-radius: 12px;} .loyalty-lp__bulk-text {font-size: 11px;line-height: 1.27;letter-spacing: 0;} .loyalty-lp__bulk-value {font-size: 30px;line-height: 1.2;} .loyalty-lp__benefits {padding-top: var(--lp-section-gap);} .loyalty-lp__benefits-bar {grid-template-columns: repeat(4, minmax(0, 1fr));gap: 8px;height: 92px;padding: 0 10px;border-radius: 12px;} .loyalty-lp__benefit {flex-direction: column;align-items: flex-start;gap: 4px;} .loyalty-lp__benefit img {height: 25px;max-width: 40px;} .loyalty-lp__benefit strong, .loyalty-lp__benefit span {font-size: 8px;line-height: 1.25;} .loyalty-lp__cta {min-height: 200px;margin-top: 32px;align-items: flex-start;} .loyalty-lp__cta-img {width: 100%;max-width: none;height: 100%;object-fit: cover;object-position: 80% 60%;} .loyalty-lp__cta-content {padding-top: 20px;padding-bottom: 16px;} .loyalty-lp__cta-title, .loyalty-lp__cta-text {width: 100%;max-width: 100%;} .color-white--mob {color: #ffffff;} .loyalty-lp__cta-title {margin-bottom: 8px;font-size: 16px;line-height: 1.25;letter-spacing: .3px;} .loyalty-lp__cta-text {margin-bottom: 12px;font-size: 12px;line-height: 1.4;max-width: 300px;} .loyalty-lp__cta .loyalty-lp__btn {flex: none;width: auto;min-width: 0;padding: 12px 16px;font-size: 12px;} } /* Телефон: три колонки уровней не помещаются — названия обрезаются, кнопки упираются в края. Раскладываем карточки в одну колонку. */ @media (max-width: 560px) { .loyalty-lp__levels-row {grid-template-columns: minmax(0, 1fr);gap: 12px;} .loyalty-lp__level {height: auto;min-height: 0;padding: 16px;} .loyalty-lp__level-title {min-height: 0;font-size: 15px;line-height: 1.27;} .loyalty-lp__level-label {font-size: 11px;line-height: 1.36;} .loyalty-lp__level-discount-label {font-size: 11px;} .loyalty-lp__level-discount {font-size: 38px;line-height: 1.11;} .loyalty-lp__level-badge {width: 44px;height: 44px;} .loyalty-lp__level-badge img {max-width: 28px;max-height: 28px;} .loyalty-lp__level-list li {margin-bottom: 5px;font-size: 12px;line-height: 1.33;} .loyalty-lp__level-list img {width: 10px;height: 8px;margin-top: 4px;} .loyalty-lp__level .loyalty-lp__btn {min-height: 44px;padding: 10px 12px;font-size: 11px;} } /* Кнопки — это ссылки, а шаблон сайта задаёт `a, a:link, a:visited {color:#000}` и подключается после стилей страницы. Поднимаем специфичность, иначе на тёмной кнопке текст становится чёрным по тёмному. */ .loyalty-lp a.loyalty-lp__btn--dark, .loyalty-lp a.loyalty-lp__btn--dark:link, .loyalty-lp a.loyalty-lp__btn--dark:visited {color: #f5f5f5;} .loyalty-lp a.loyalty-lp__btn--dark:hover {color: #fff;} .loyalty-lp a.loyalty-lp__btn--ghost, .loyalty-lp a.loyalty-lp__btn--ghost:link, .loyalty-lp a.loyalty-lp__btn--ghost:visited {color: var(--lp-white);} @media only screen and (min-width: 991px) { .substrate--off-pc:before {display: none;} } /* Мягкая смена оттенка кнопок: hover / focus-visible / active */ .loyalty-lp a.loyalty-lp__btn {transition: background-color .32s ease, border-color .32s ease, color .32s ease, box-shadow .32s ease;} .loyalty-lp a.loyalty-lp__btn:focus {outline: none;} .loyalty-lp a.loyalty-lp__btn:focus-visible {box-shadow: 0 0 0 3px rgba(30, 30, 30, .18);} .loyalty-lp a.loyalty-lp__btn--dark, .loyalty-lp a.loyalty-lp__btn--dark:link, .loyalty-lp a.loyalty-lp__btn--dark:visited {background: #2d2d2d;border-color: #2d2d2d;color: #f5f5f5;} .loyalty-lp a.loyalty-lp__btn--dark:hover, .loyalty-lp a.loyalty-lp__btn--dark:focus-visible {background: #3f3f3f;border-color: #3f3f3f;color: #fff;} .loyalty-lp a.loyalty-lp__btn--dark:active {background: #242424;border-color: #242424;color: #fff;} .loyalty-lp a.loyalty-lp__btn--dark:focus-visible {box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);} .loyalty-lp a.loyalty-lp__btn--outline, .loyalty-lp a.loyalty-lp__btn--outline:link, .loyalty-lp a.loyalty-lp__btn--outline:visited {background: transparent;border-color: #fff;color: #fff;} .loyalty-lp a.loyalty-lp__btn--outline:hover, .loyalty-lp a.loyalty-lp__btn--outline:focus-visible {background: rgba(255, 255, 255, .16);border-color: #fff;color: #fff;} .loyalty-lp a.loyalty-lp__btn--outline:active {background: rgba(255, 255, 255, .28);border-color: #fff;color: #fff;} .loyalty-lp a.loyalty-lp__btn--outline:focus-visible {box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);} .loyalty-lp a.loyalty-lp__btn--outline-dark, .loyalty-lp a.loyalty-lp__btn--outline-dark:link, .loyalty-lp a.loyalty-lp__btn--outline-dark:visited {background: #f3f1f1;border-color: #1e1e1e;color: #2d2d2d;} .loyalty-lp a.loyalty-lp__btn--outline-dark:hover, .loyalty-lp a.loyalty-lp__btn--outline-dark:focus-visible {background: #e4e1e0;border-color: #1e1e1e;color: #1e1e1e;} .loyalty-lp a.loyalty-lp__btn--outline-dark:active {background: #d8d4d3;border-color: #1e1e1e;color: #1e1e1e;} .loyalty-lp .loyalty-lp__level--advanced a.loyalty-lp__btn--outline-dark, .loyalty-lp .loyalty-lp__level--advanced a.loyalty-lp__btn--outline-dark:link, .loyalty-lp .loyalty-lp__level--advanced a.loyalty-lp__btn--outline-dark:visited {background: transparent;border-color: #1e1e1e;color: #2d2d2d;} .loyalty-lp .loyalty-lp__level--advanced a.loyalty-lp__btn--outline-dark:hover, .loyalty-lp .loyalty-lp__level--advanced a.loyalty-lp__btn--outline-dark:focus-visible {background: rgba(255, 255, 255, .22);border-color: #1e1e1e;color: #1e1e1e;} .loyalty-lp .loyalty-lp__level--advanced a.loyalty-lp__btn--outline-dark:active {background: rgba(0, 0, 0, .1);border-color: #1e1e1e;color: #1e1e1e;} .loyalty-lp a.loyalty-lp__btn--ghost, .loyalty-lp a.loyalty-lp__btn--ghost:link, .loyalty-lp a.loyalty-lp__btn--ghost:visited {background: transparent;border-color: #fff;color: #fff;} .loyalty-lp a.loyalty-lp__btn--ghost:hover, .loyalty-lp a.loyalty-lp__btn--ghost:focus-visible {background: rgba(255, 255, 255, .14);border-color: #fff;color: #fff;} .loyalty-lp a.loyalty-lp__btn--ghost:active {background: rgba(255, 255, 255, .26);border-color: #fff;color: #fff;} .loyalty-lp a.loyalty-lp__btn--ghost:focus-visible {box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);} @media (prefers-reduced-motion: reduce) { .loyalty-lp a.loyalty-lp__btn {transition: none;} } .substrate--dark:before {opacity: 0.6 !important;} /* End */ /* /loyalty/assets/css/loyalty.css?178905356514215 */ /* /loyalty/assets/css/loyalty-figma.css?178911222222275 */