tent-lib 1.6.25 → 1.6.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -13,11 +13,11 @@ export class TentLoyaltyComponent {
|
|
|
13
13
|
this.collapsed = !this.collapsed;
|
|
14
14
|
}
|
|
15
15
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TentLoyaltyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TentLoyaltyComponent, isStandalone: true, selector: "lib-tent-loyalty", inputs: { id: "id", title: "title", subtitle: "subtitle", percentage: "percentage", percentagetext1: "percentagetext1", percentagetext2: "percentagetext2", loyalties: "loyalties" }, ngImport: i0, template: "<section\n class=\"tent-loyalty wrapper-big\"\n [ngClass]=\"{ 'module-spacer--bottom': id == 3 }\"\n>\n <div class=\"tent-loyalty--content\">\n @switch (id) {\n @case (0) {\n <div class=\"tent-loyalty--head\">\n @if (title) {\n <h2\n class=\"tent-loyalty--head--tit title--42 color--brown\"\n >\n {{ title }}\n </h2>\n }\n @if (subtitle) {\n <p class=\"tent-loyalty--head--text text\">\n {{ subtitle }}\n </p>\n }\n @if (percentage || percentagetext1 || percentagetext2) {\n <div class=\"discount-loyalty\">\n <div class=\"texts-container\">\n @if (percentagetext1) {\n <p\n class=\"text color--brown\"\n [innerHTML]=\"percentagetext1\"\n ></p>\n }\n @if (percentage) {\n <h2\n class=\"title--42 color--brown\"\n [innerHTML]=\"percentage\"\n ></h2>\n }\n @if (percentagetext2) {\n <p\n class=\"text color--brown\"\n [innerHTML]=\"percentagetext2\"\n ></p>\n }\n </div>\n <div class=\"img-container\">\n <img\n src=\"/assets/tent/img/loyalty-discount-bg.svg\"\n alt=\"left\"\n loading=\"lazy\"\n class=\"location-how--iconactive\"\n />\n </div>\n </div>\n }\n </div>\n }\n @case (1) {\n <div\n class=\"tent-loyalty--box bg-yellow\"\n [ngClass]=\"collapsed ? 'close' : 'open'\"\n (click)=\"toggleCollapse($event)\"\n >\n <div class=\"tent-loyalty--box--inner\">\n <h3\n class=\"tent-loyalty--box--title title--42 color--brown\"\n >\n @if (loyalties?.icon) {\n <span\n class=\"loyalty-icon color--brown\"\n [ngClass]=\"'icon-' + loyalties?.icon\"\n ></span>\n }\n @if (loyalties?.levelName) {\n <div class=\"tent-loyalty--box--title--level\">\n <span class=\"text color--brown\">\n {{ loyalties?.levelName }}\n </span>\n @if (loyalties?.levelSubtitle) {\n <p\n class=\"tent-loyalty--info--text text color--brown\"\n [ngClass]=\"\n !collapsed\n ? 'visible'\n : 'hidden'\n \"\n >\n {{ loyalties?.levelSubtitle }}\n </p>\n }\n </div>\n }\n </h3>\n <div\n class=\"tent-loyalty--box--info\"\n [ngClass]=\"collapsed ? 'visible' : 'hidden'\"\n >\n @if (loyalties?.discount) {\n <span\n class=\"tent-loyalty--box--info--num title--42 color--brown\"\n >{{ loyalties?.discount }}</span\n >\n }\n @if (loyalties?.advantages) {\n <p\n class=\"tent-loyalty--info--text text color--brown\"\n >\n {{ loyalties?.advantages }}\n </p>\n }\n </div>\n @if (collapsed) {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seemore ?? '+'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow reverse without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n } @else {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seeless ?? '-'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n }\n </div>\n <ul class=\"tent-loyalty--box--list\">\n @if (loyalties?.items?.length) {\n @for (item of loyalties?.items; track $index) {\n <li\n [ngClass]=\"\n loyalties?.items?.length == 3 &&\n $index == 0\n ? 'first-item-big'\n : ''\n \"\n >\n <p\n class=\"tent-loyalty--box--item color--brown\"\n >\n @if (item.icon) {\n <span\n class=\"tent-loyalty--box--item--icon\"\n [class]=\"'icon-' + item.icon\"\n ></span>\n }\n @if (item.title) {\n <span class=\"text color--brown\">{{\n item.title\n }}</span>\n }\n @if (item.text) {\n <span\n class=\"text--small color--brown\"\n [innerHTML]=\"item.text\"\n ></span>\n }\n </p>\n </li>\n }\n }\n </ul>\n </div>\n }\n @case (2) {\n <div\n class=\"tent-loyalty--box bg-orange\"\n [ngClass]=\"collapsed ? 'close' : 'open'\"\n (click)=\"toggleCollapse($event)\"\n >\n <div class=\"tent-loyalty--box--inner\">\n <h3\n class=\"tent-loyalty--box--title title--42 color--white\"\n >\n @if (loyalties?.icon) {\n <span\n class=\"loyalty-icon\"\n [ngClass]=\"'icon-' + loyalties?.icon\"\n ></span>\n }\n @if (loyalties?.levelName) {\n <div class=\"tent-loyalty--box--title--level\">\n <span class=\"text color--white\">\n {{ loyalties?.levelName }}\n </span>\n @if (loyalties?.levelSubtitle) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n [ngClass]=\"\n !collapsed\n ? 'visible'\n : 'hidden'\n \"\n >\n {{ loyalties?.levelSubtitle }}\n </p>\n }\n </div>\n }\n </h3>\n <div\n class=\"tent-loyalty--box--info\"\n [ngClass]=\"collapsed ? 'visible' : 'hidden'\"\n >\n @if (loyalties?.discount) {\n <span\n class=\"tent-loyalty--box--info--num title--42 color--white\"\n >{{ loyalties?.discount }}</span\n >\n }\n @if (loyalties?.advantages) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n >\n {{ loyalties?.advantages }}\n </p>\n }\n </div>\n @if (collapsed) {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seemore ?? '+'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow reverse without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n } @else {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seeless ?? '-'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n }\n </div>\n <ul class=\"tent-loyalty--box--list\">\n @if (loyalties?.items?.length) {\n @for (item of loyalties?.items; track $index) {\n <li>\n <p\n class=\"tent-loyalty--box--item color--brown\"\n >\n @if (item.icon) {\n <span\n class=\"tent-loyalty--box--item--icon\"\n [class]=\"'icon-' + item.icon\"\n ></span>\n }\n @if (item.title) {\n <span class=\"text color--brown\">{{\n item.title\n }}</span>\n }\n @if (item.text) {\n <span\n class=\"text--small color--brown\"\n [innerHTML]=\"item.text\"\n ></span>\n }\n </p>\n </li>\n }\n }\n </ul>\n </div>\n }\n @case (3) {\n <div\n class=\"tent-loyalty--box bg-brown\"\n [ngClass]=\"collapsed ? 'close' : 'open'\"\n (click)=\"toggleCollapse($event)\"\n >\n <div class=\"tent-loyalty--box--inner\">\n <h3\n class=\"tent-loyalty--box--title title--42 color--white\"\n >\n @if (loyalties?.icon) {\n <span\n class=\"loyalty-icon\"\n [ngClass]=\"'icon-' + loyalties?.icon\"\n ></span>\n }\n @if (loyalties?.levelName) {\n <div class=\"tent-loyalty--box--title--level\">\n <span class=\"text color--white\">\n {{ loyalties?.levelName }}\n </span>\n @if (loyalties?.levelSubtitle) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n [ngClass]=\"\n !collapsed\n ? 'visible'\n : 'hidden'\n \"\n >\n {{ loyalties?.levelSubtitle }}\n </p>\n }\n </div>\n }\n </h3>\n <div\n class=\"tent-loyalty--box--info\"\n [ngClass]=\"collapsed ? 'visible' : 'hidden'\"\n >\n @if (loyalties?.discount) {\n <span\n class=\"tent-loyalty--box--info--num title--42 color--white\"\n >{{ loyalties?.discount }}</span\n >\n }\n @if (loyalties?.advantages) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n >\n {{ loyalties?.advantages }}\n </p>\n }\n </div>\n @if (collapsed) {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seemore ?? '+'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow reverse without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n } @else {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seeless ?? '-'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n }\n </div>\n <ul class=\"tent-loyalty--box--list\">\n @if (loyalties?.items?.length) {\n @for (item of loyalties?.items; track $index) {\n <li>\n <p\n class=\"tent-loyalty--box--item color--brown\"\n >\n @if (item.icon) {\n <span\n class=\"tent-loyalty--box--item--icon\"\n [class]=\"'icon-' + item.icon\"\n ></span>\n }\n @if (item.title) {\n <span class=\"text color--brown\">{{\n item.title\n }}</span>\n }\n @if (item.text) {\n <span\n class=\"text--small color--brown\"\n [innerHTML]=\"item.text\"\n >{{ item.text }}</span\n >\n }\n </p>\n </li>\n }\n }\n </ul>\n </div>\n }\n }\n </div>\n</section>\n", styles: [":root{--tent-font: \"DM Sans\", sans-serif;--color-background: #fff;--color-background-2: #fbf5f0;--color-background-3: #f6ece2;--color-background-4: #eaaa00;--color-background-5: #dc572a;--color-background-6: #7c4d3b;--color-background-6-90: rgb(124 77 59 / 90%);--color-background-7: #005f87;--color-background-8: #dab38c;--color-background-9: #c7946a;--color-title: #dab38d;--color-title-1: #693d2d;--color-title-2: rgb(105 61 45 / 90%);--color-title-4: rgb(105 61 45 / 70%);--color-title-3: #0cc2ce;--color-title-light: #fff;--color-subtitle: #c1885b;--color-subtitle-light: #fff;--color-description: #5d5d5d;--color-description-light: #fff;--color-description-brown-light: rgb(105 61 45 / 80%);--color-description-brown: rgb(105 61 45 / 100%);--color-badge: #dc572a;--color-badge-2: #fdd8b4;--color-badge-3: #dab38d;--color-badge-4: #f3e2d5;--color-badge-5: #fff;--color-badge-box: #e37955;--color-badge-box-hover: #d9603e;--color-dark-btn: rgb(124 77 58 / 70%);--color-dark-btn-hover: #7c4d3a;--color-line-dark-btn: rgb(124 77 58 / 70%);--color-line-dark-btn-hover: #dab38d;--color-dark-btn-filled: #693d2d;--color-dark-btn-filled-hover: #fff;--color-line-dark-btn-filled: #dab38d;--color-line-dark-btn-filled-hover: #dc572a;--color-light-btn: #fff;--color-light-btn-hover: #693d2d;--color-line-light-btn-hover: #dab38d;--size-icon-links: 12px;--size-btn-box: 308px;--size-btn-box-mobile: 250px;--color-link-brown-light: rgb(105 61 45 / 70%);--color-link-brown-light2: rgb(105 61 45 / 80%);--color-link-brown-dark: #693d2d;--color-social-media: #693d3d;--color-instagram: #dab38d;--color-tiktok: #ed4a73;--color-facebook: #2764c1;--color-youtube: #d9464b;--color-linkedin: #2376c9;--color-background-footer1: rgb(135 136 138 / 75%);--color-background-footer2: rgb(221 187 156 / 80%);--color-check-in: #e78a6a;--color-check-in-hover: #d9603e;--color-border-header: #e1d8d5;--color-linea-brown-light: rgb(124 77 58 / 50%);--color-linea-brown-light2: rgb(124 77 58 / 20%);--color-icon: #693e2e;--color-icon-light: : rgb(105 61 45 / 70%);--Ltransition: all cubic-bezier(.785, .135, .15, .86) 1s;--Mtransition: all cubic-bezier(.785, .135, .15, .86) .85s;--stransition-basic: all cubic-bezier(.785, .135, .15, .86) .7s;--SStransition: all cubic-bezier(.785, .135, .15, .86) .3s;--XStransition: all cubic-bezier(.785, .135, .15, .86) 0s}.link{font-family:var(--tent-font);text-decoration:none;font-size:16px;font-weight:400;color:var(--color-description);letter-spacing:0;line-height:146.1538461538%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);position:relative;cursor:pointer}.link:after{content:\"\";width:0%;height:1px;position:absolute;bottom:-2px;left:0;background-color:var(--color-description);-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.link:hover{color:var(--color-description)}.link:hover:after{width:100%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.link--brown{color:var(--color-link-brown-light2)}.link--brown:after{background-color:var(--color-link-brown-light2)}.link--brown:hover{color:var(--color-link-brown-dark)}.link--brown:hover:after{background-color:var(--color-link-brown-dark)}.link-opacity{font-family:var(--tent-font);text-decoration:none;font-size:16px;font-weight:400;color:var(--color-description);letter-spacing:0;line-height:146.1538461538%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);position:relative;opacity:.7;cursor:pointer}.link-opacity:hover{opacity:1}.link-regular{font-family:var(--tent-font);text-decoration:none;font-size:18px;font-weight:400;color:var(--color-description);line-height:146.1538461538%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);position:relative;cursor:pointer}.link-regular:hover{text-decoration:underline}@media (min-width: 540px){.link-regular{font-size:20px;line-height:34px}}.text{font-family:var(--tent-font);font-size:18px;line-height:24px;color:var(--color-description);text-align:left;font-weight:400}@media (min-width: 540px){.text{font-size:20px;line-height:34px}}.text--light{color:var(--color-description-light)}.text--small,.text--18{font-size:16px}.text strong{font-weight:700}.title--18{font-weight:700;font-size:14px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--18{font-size:16px}}@media (min-width: 768px){.title--18{font-size:16px}}@media (min-width: 1024px){.title--18{font-size:18px}}@media (min-width: 1680px){.title--18{font-size:18px}}.title--24{font-weight:700;font-size:24px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--24{font-size:24px}}@media (min-width: 768px){.title--24{font-size:24px}}@media (min-width: 1024px){.title--24{font-size:24px}}@media (min-width: 1280px){.title--24{font-size:24px}}@media (min-width: 1366px){.title--24{font-size:24px}}@media (min-width: 1680px){.title--24{font-size:24px}}@media (min-width: 1800px){.title--24{font-size:24px}}.title--30{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:0}@media (max-width: 374px){.title--30{font-size:24px}}.title--34{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--34{font-size:32px}}@media (min-width: 768px){.title--34{font-size:32px}}@media (min-width: 1680px){.title--34{font-size:34px}}.title--38{font-weight:700;font-size:26px;line-height:1.5;letter-spacing:0}@media (min-width: 540px){.title--38{font-size:28px}}@media (min-width: 768px){.title--38{font-size:36px}}@media (min-width: 1680px){.title--38{font-size:38px}}.title--42{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--42{font-size:32px}}@media (min-width: 768px){.title--42{font-size:42px}}@media (min-width: 1680px){.title--42{font-size:42px}}.title--54{font-weight:700;font-size:32px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--54{font-size:44px}}@media (min-width: 1680px){.title--54{font-size:54px}}.title--60{font-weight:700;font-size:32px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--60{font-size:44px;line-height:1}}@media (min-width: 768px){.title--60{font-size:50px}}@media (min-width: 1680px){.title--60{font-size:60px}}.title--80{font-weight:700;font-size:40px;line-height:1;letter-spacing:0}@media (min-width: 540px){.title--80{font-size:50px}}@media (min-width: 768px){.title--80{font-size:60px}}@media (min-width: 1024px){.title--80{font-size:60px}}@media (min-width: 1280px){.title--80{font-size:70px}}@media (min-width: 1366px){.title--80{font-size:70px}}@media (min-width: 1680px){.title--80{font-size:80px}}.title--100{font-weight:700;font-size:40px;line-height:1;letter-spacing:0}@media (min-width: 540px){.title--100{font-size:55px}}@media (min-width: 768px){.title--100{font-size:80px}}@media (min-width: 1024px){.title--100{font-size:80px}}@media (min-width: 1280px){.title--100{font-size:90px}}@media (min-width: 1366px){.title--100{font-size:90px}}@media (min-width: 1680px){.title--100{font-size:110px}}.subtitle{font-family:var(--tent-font);font-weight:700;font-size:24px;line-height:44px;letter-spacing:0;text-align:left;color:var(--color-subtitle)}.subtitle.light{color:var(--color-subtitle-light)}.subtitle--medium{font-weight:500;font-size:18px;line-height:1.2;color:var(--color-subtitle-light)}@media (min-width: 768px){.subtitle--medium{font-size:20px}}.bg-yellow{background-color:var(--color-background-4)}.bg-orange{background-color:var(--color-background-5)}.bg-brown{background-color:var(--color-background-6)}.bg-brown-90{background-color:var(--color-background-6-90)}.bg-blue{background-color:var(--color-background-7)}.bg-camel{background-color:var(--color-background-8)}.bg-beige{background-color:var(--color-background-3)}.bg-beige{background-color:var(--color-background-2)}.bg-white{background-color:#fff}.color--brown-dark{color:var(--color-title-1)}.color--brown{color:var(--color-title-2)}.color--brown-70{color:var(--color-title-4)}.color--camel{color:var(--color-title)}.color--white{color:#fff}.color--blue{color:var(--color-title-3)}.color--gray{color:var(--color-description)}.flex-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}.flex-row--reverse{flex-direction:row-reverse}.flex-row--center{align-items:center;justify-content:center}.flex-row--between{align-items:center;justify-content:space-between}.flex-row--left{align-items:center;justify-content:flex-start}@media (max-width: 1023px){.flex-row--left{justify-content:center}}.flex-col{display:flex;flex-direction:column;flex-wrap:wrap;gap:10px}.flex-col--reverse{flex-direction:row-reverse}.flex-col--center{align-items:center;justify-content:center}.mt--0{margin-top:0}.mb--0{margin-bottom:0}.pt--0{padding-top:0}.pb--0{padding-bottom:0}.mt--10{margin-top:10px}.mb--10{margin-bottom:10px}.pt--10{padding-top:10px}.pb--10{padding-bottom:10px}.mt--20{margin-top:20px}.mb--20{margin-bottom:20px}.pt--20{padding-top:20px}.pb--20{padding-bottom:20px}.mt--25{margin-top:25px}.mb--25{margin-bottom:25px}.pt--25{padding-top:25px}.pb--25{padding-bottom:25px}.mt--30{margin-top:30px}.mb--30{margin-bottom:30px}.pt--30{padding-top:30px}.pb--30{padding-bottom:30px}.mt--40{margin-top:40px}.mb--40{margin-bottom:40px}.pt--40{padding-top:40px}.pb--40{padding-bottom:40px}.mt--50{margin-top:50px}.mb--50{margin-bottom:50px}.pt--50{padding-top:50px}.pb--50{padding-bottom:50px}.mt--60{margin-top:60px}.mb--60{margin-bottom:60px}.pt--60{padding-top:60px}.pb--60{padding-bottom:60px}.mt--70{margin-top:70px}.mb--70{margin-bottom:70px}.pt--70{padding-top:70px}.pb--70{padding-bottom:70px}.mt--80{margin-top:80px}.mb--80{margin-bottom:80px}.pt--80{padding-top:80px}.pb--80{padding-bottom:80px}.mt--90{margin-top:90px}.mb--90{margin-bottom:90px}.pt--90{padding-top:90px}.pb--90{padding-bottom:90px}.mt--100{margin-top:100px}.mb--100{margin-bottom:100px}.pt--100{padding-top:100px}.pb--100{padding-bottom:100px}.wrapper-big{max-width:100%;padding:0}@media (min-width: 540px){.wrapper-big{padding:0}}@media (min-width: 768px){.wrapper-big{padding:0}}@media (min-width: 1024px){.wrapper-big{padding:0 40px}}@media (min-width: 1280px){.wrapper-big{padding:0 20px}}@media (min-width: 1366px){.wrapper-big{padding:0 13px}}@media (min-width: 1680px){.wrapper-big{padding:0 40px}}@media (min-width: 1800px){.wrapper-big{padding:0 60px}}.wrapper-medium{max-width:100%;padding:0;min-width:-webkit-fill-available}@media (min-width: 540px){.wrapper-medium{padding:0 28px}}@media (min-width: 768px){.wrapper-medium{padding:0 45px}}@media (min-width: 1024px){.wrapper-medium{padding:0 55px}}@media (min-width: 1280px){.wrapper-medium{padding:0 59px}}@media (min-width: 1366px){.wrapper-medium{padding:0 65px}}@media (min-width: 1680px){.wrapper-medium{padding:0}}@media (min-width: 1800px){.wrapper-medium{padding:0}}.module-spacer--bottom{padding-bottom:35px}@media (min-width: 540px){.module-spacer--bottom{padding-bottom:40px}}@media (min-width: 768px){.module-spacer--bottom{padding-bottom:80px}}@media (min-width: 1680px){.module-spacer--bottom{padding-bottom:90px}}.module-spacer-small--bottom{padding-bottom:30px}@media (min-width: 540px){.module-spacer-small--bottom{padding-bottom:40px}}@media (min-width: 768px){.module-spacer-small--bottom{padding-bottom:50px}}@media (min-width: 1680px){.module-spacer-small--bottom{padding-bottom:50px}}@media (min-width: 1280px){.figure-sticky{position:sticky!important;top:8rem}}.figure-content{width:100%;aspect-ratio:1;display:flex;cursor:default;align-items:center;justify-content:center;position:relative;border-radius:.6rem;overflow:hidden}.figure-full{position:absolute;top:0;left:0;width:100%;height:100%;background-position:50% 50%;background-size:cover;background-repeat:no-repeat;margin:0;z-index:-1}.figure-zoom figure{-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.figure-zoom:hover figure{-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);transform:scale(1.1)}.slider-arrows--center .owl-nav{position:absolute;top:50%;width:106%;display:flex;justify-content:space-between;margin:0;left:50%;transform:translate(-50%) translateY(-50%);z-index:-1}.slider-arrows--center .owl-nav [class*=owl-]{background-color:transparent;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.slider-arrows--center .owl-nav [class*=owl-]:hover{background-color:transparent;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);transform:scale(1.5)}.slider-circle--center .owl-nav{position:absolute;top:50%;width:calc(100% - 240px);display:flex;justify-content:space-between;margin:0;left:120px;transform:translateY(-50%)}.slider-circle--center .owl-nav [class*=owl-]{background-color:#fff;border-radius:100%;padding:4px}.slider-circle--center .owl-nav [class*=owl-]:hover{background-color:#fff}@media (max-width: 767px){.slider-circle--center .owl-nav .btn__circle{width:38px;height:38px}}.slider-circle--center--centerFull .owl-nav{width:110%;left:-5%}.btn{cursor:pointer;font-family:var(--corp-font);-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.btn__light{border:2px solid var(--color-light-btn);color:var(--color-light-btn);background-color:transparent}.btn__light:hover{border:2px solid var(--color-line-light-btn-hover);background-color:var(--color-line-light-btn-hover);color:var(--color-light-btn-hover)}.btn__dark{border:2px solid var(--color-line-dark-btn);color:var(--color-dark-btn);background-color:var(--color-background)}.btn__dark:hover{border:2px solid var(--color-line-dark-btn-hover);background-color:var(--color-line-dark-btn-hover);color:var(--color-dark-btn-hover)}.btn__dark-white{border:2px solid var(--color-line-dark-btn);color:var(--color-dark-btn);background-color:transparent}.btn__dark-white:hover{border:2px solid white;background-color:#fff;color:var(--color-dark-btn-hover)}.btn__dark-filled{border:2px solid var(--color-line-dark-btn-filled);color:var(--color-dark-btn-filled);background-color:var(--color-line-dark-btn-filled)}.btn__dark-filled:hover{border:2px solid var(--color-line-dark-btn-filled-hover);background-color:var(--color-line-dark-btn-filled-hover);color:var(--color-dark-btn-filled-hover)}.btn__white{border:2px solid white;color:var(--color-dark-btn);background-color:var(--color-background)}.btn__white:hover{border:2px solid white;background-color:#fff;color:var(--color-dark-btn-hover)}.btn__laundry{border:2px solid #005f87;color:#005f87;background-color:var(--color-background);opacity:.5}.btn__laundry:hover{background-color:#005f87;color:#fff;opacity:1}.btn__circle-container{border-radius:50%;padding:6px}.btn__circle{width:40px;height:40px;border-radius:50%;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;text-align:center}.btn__circle--social-media{width:60px;height:60px;color:var(--color-social-media)}.btn__circle:hover--instagram{background-color:var(--color-instagram);color:var(--color-social-media)}.btn__circle:hover--tiktok,.btn__circle:hover--facebook,.btn__circle:hover--youtube,.btn__circle:hover--linkedin{color:var(--color-background)}.btn__circle:hover--tiktok{background-color:var(--color-tiktok)}.btn__circle:hover--facebook{background-color:var(--color-facebook)}.btn__circle:hover--youtube{background-color:var(--color-youtube)}.btn__circle:hover--linkedin{background-color:var(--color-linkedin)}.btn__circle-icon{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;font-size:22px}.btn__circle-icon.icon--size12{font-size:12px}.btn__box{width:var(--size-btn-box);height:50px;border-radius:6px;font-weight:700;font-size:19px;line-height:24.74px;text-align:center}.btn__box.btn-small{width:var(--size-btn-box-mobile)}@media (min-width: 540px){.btn__box.btn-small{width:var(--size-btn-box)}}.btn__box-container mat-icon{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap}.form-error{font-family:var(--tent-font);color:#df6a6a;font-size:13px}.invalid{margin-bottom:10px}@media (min-width: 768px){.tent-loyalty--content{padding-inline:70px}}.tent-loyalty--head{display:flex;align-items:center;justify-content:center;gap:10px;flex-direction:column;margin-bottom:30px;margin-top:30px}.tent-loyalty--head--tit{font-weight:700;text-align:center}.tent-loyalty--head--text{font-weight:400;text-align:center}.tent-loyalty--head .discount-loyalty{position:relative;display:flex;width:100%;justify-content:center;align-items:center;padding:20px 0}.tent-loyalty--head .discount-loyalty .texts-container{display:flex;align-items:end;justify-content:center;gap:10px;z-index:1;margin-bottom:10px}@media (max-width: 539px){.tent-loyalty--head .discount-loyalty .texts-container{align-items:center;flex-direction:column}}.tent-loyalty--head .discount-loyalty .img-container{position:absolute}@media (max-width: 539px){.tent-loyalty--head .discount-loyalty .img-container img{width:90vw}}.tent-loyalty--box{display:flex;align-items:center;flex-direction:column;border-radius:16px;margin-bottom:20px;transition:opacity .9s ease;cursor:pointer}.tent-loyalty--box--inner{display:flex;width:100%;justify-content:flex-start;align-items:flex-start;padding-block:20px;position:relative;flex-direction:column}.tent-loyalty--box--inner span{width:100%;font-size:48px}.tent-loyalty--box--inner span.loyalty-icon{height:70px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--color-background-3)}.tent-loyalty--box--inner span.loyalty-icon.color--brown{background-color:var(--color-background-10)}@media (max-width: 1365px){.tent-loyalty--box--inner span,.tent-loyalty--box--inner p{width:90%}.tent-loyalty--box--inner span.loyalty-icon,.tent-loyalty--box--inner p.loyalty-icon{width:80px}}@media (max-width: 1279px){.tent-loyalty--box--inner span,.tent-loyalty--box--inner p{width:90%}.tent-loyalty--box--inner span.loyalty-icon,.tent-loyalty--box--inner p.loyalty-icon{width:80px}}.tent-loyalty--box--title{display:flex;align-items:center;padding-inline:20px;width:calc(100% - 40px);gap:10px;position:relative;padding-bottom:10px;margin-bottom:10px}.tent-loyalty--box--title--level span{font-weight:700}.tent-loyalty--box--title:before{content:\"\";width:calc(100% - 40px);height:1px;display:block;position:absolute;left:20px;bottom:0;background-color:#ffffff80}.tent-loyalty--box--title.color--brown:before{background-color:#8a583677}.tent-loyalty--box--info{padding-left:110px;display:flex;flex-direction:column;align-items:flex-start}.tent-loyalty--box--info.hidden{display:none}@media (max-width: 1279px){.tent-loyalty--box--info span{width:100%}}@media (max-width: 767px){.tent-loyalty--box--info{flex-direction:column;align-items:center;gap:15px;width:100%;padding:0%}.tent-loyalty--box--info span,.tent-loyalty--box--info p{width:100%;text-align:center}}@media (max-width: 539px){.tent-loyalty--box--info{padding-left:0;display:flex;align-items:center;justify-content:center;width:100%}}.tent-loyalty--box .tent-loyalty--btn-arrow{margin-right:0;position:absolute;right:10px}.tent-loyalty--box .tent-loyalty--btn-arrow.reverse{transform:rotate(180deg)}.tent-loyalty--box .tent-loyalty--btn-arrow ::ng-deep button{background-color:#fff;border-color:#fff}.tent-loyalty--box .tent-loyalty--btn-arrow ::ng-deep:hover button{background-color:var(--color-title-2)}.tent-loyalty--box--list{display:flex;flex-wrap:wrap;padding-bottom:20px;max-width:max-content;width:90%;align-items:center;justify-content:center;gap:20px;display:none}.tent-loyalty--box--list li{background-color:#fff;border-radius:16px;padding:20px;width:100%;flex-direction:column;align-items:center}.tent-loyalty--box--item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:20px;text-align:center}.tent-loyalty--box--item--icon{font-size:60px;width:60px;height:60px;background-color:var(--color-background-6);-webkit-mask-size:contain;mask-size:contain}.tent-loyalty--box--item .text{text-align:center}.tent-loyalty--box.open .tent-loyalty--box--list{display:flex}.tent-loyalty--box.open .tent-loyalty--box--title:before{display:none!important}@media (min-width: 768px){.tent-loyalty--box--list{align-items:stretch;justify-content:space-between;padding-bottom:30px;min-width:90%}.tent-loyalty--box--list li{width:calc(50% - 50px)}.tent-loyalty--box--list li.first-item-big{width:100%}}@media (min-width: 1280px){.tent-loyalty--box--inner{flex-direction:row;align-items:center;padding-block:30px}.tent-loyalty--box--title{width:auto;gap:40px;padding-right:40px;padding-bottom:0;margin-bottom:0;padding-inline:30px}.tent-loyalty--box--title:before{height:100%;width:1px;right:0;top:0;left:auto}.tent-loyalty--box--title span{width:120px}.tent-loyalty--box--info{padding-left:40px}.tent-loyalty--box .tent-loyalty--btn-arrow{right:40px}.tent-loyalty--box--item--icon{font-size:80px;width:100px;height:100px;background-color:var(--color-background-6);-webkit-mask-size:contain;mask-size:contain}.tent-loyalty--box--list{width:calc(100% - 140px);min-width:calc(100% - 140px)}.tent-loyalty--box--list li{width:calc(33% - 60px);min-height:190px;align-items:center;justify-content:center;display:flex}.tent-loyalty--box--list li.first-item-big{width:calc(33% - 60px)}}@media (min-width: 540px){.tent-loyalty .tent-loyalty--info--text.text{line-height:24px;bottom:5px;position:relative}}@media (max-width: 374px){.tent-loyalty .tent-loyalty--info--text.text{width:40%}}@media (min-width: 1024px){.tent-loyalty .without-label{display:none}}@media (max-width: 1023px){.tent-loyalty .without-label{display:block}}@media (min-width: 1024px){.tent-loyalty .with-label{display:block}}@media (max-width: 1023px){.tent-loyalty .with-label{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "tent-button", inputs: ["type", "label", "url", "linkType", "icon", "socialMedia", "iconPosition", "boxWidth", "innerContent", "linkSizeIcon", "closeButton", "disabled", "name"], outputs: ["btnClick"] }] }); }
|
|
16
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TentLoyaltyComponent, isStandalone: true, selector: "lib-tent-loyalty", inputs: { id: "id", title: "title", subtitle: "subtitle", percentage: "percentage", percentagetext1: "percentagetext1", percentagetext2: "percentagetext2", loyalties: "loyalties" }, ngImport: i0, template: "<section\n class=\"tent-loyalty wrapper-big\"\n [ngClass]=\"{ 'module-spacer--bottom': id == 3 }\"\n>\n <div class=\"tent-loyalty--content\">\n @switch (id) {\n @case (0) {\n <div class=\"tent-loyalty--head\">\n @if (title) {\n <h2\n class=\"tent-loyalty--head--tit title--42 color--brown\"\n >\n {{ title }}\n </h2>\n }\n @if (subtitle) {\n <p class=\"tent-loyalty--head--text text\">\n {{ subtitle }}\n </p>\n }\n @if (percentage || percentagetext1 || percentagetext2) {\n <div class=\"discount-loyalty\">\n <div class=\"texts-container\">\n @if (percentagetext1) {\n <p\n class=\"text color--brown\"\n [innerHTML]=\"percentagetext1\"\n ></p>\n }\n @if (percentage) {\n <h2\n class=\"title--42 color--brown\"\n [innerHTML]=\"percentage\"\n ></h2>\n }\n @if (percentagetext2) {\n <p\n class=\"text color--brown\"\n [innerHTML]=\"percentagetext2\"\n ></p>\n }\n </div>\n <div class=\"img-container\">\n <img\n src=\"/assets/tent/img/loyalty-discount-bg.svg\"\n alt=\"left\"\n loading=\"lazy\"\n class=\"location-how--iconactive\"\n />\n </div>\n </div>\n }\n </div>\n }\n @case (1) {\n <div\n class=\"tent-loyalty--box bg-yellow\"\n [ngClass]=\"collapsed ? 'close' : 'open'\"\n (click)=\"toggleCollapse($event)\"\n >\n <div class=\"tent-loyalty--box--inner\">\n <h3\n class=\"tent-loyalty--box--title title--42 color--brown\"\n >\n @if (loyalties?.icon) {\n <span\n class=\"loyalty-icon color--brown\"\n [ngClass]=\"'icon-' + loyalties?.icon\"\n ></span>\n }\n @if (loyalties?.levelName) {\n <div class=\"tent-loyalty--box--title--level\">\n <span class=\"text color--brown\">\n {{ loyalties?.levelName }}\n </span>\n @if (loyalties?.levelSubtitle) {\n <p\n class=\"tent-loyalty--info--text text color--brown\"\n [ngClass]=\"\n !collapsed\n ? 'visible'\n : 'hidden'\n \"\n >\n {{ loyalties?.levelSubtitle }}\n </p>\n }\n </div>\n }\n </h3>\n <div\n class=\"tent-loyalty--box--info\"\n [ngClass]=\"collapsed ? 'visible' : 'hidden'\"\n >\n @if (loyalties?.discount) {\n <span\n class=\"tent-loyalty--box--info--num title--42 color--brown\"\n >{{ loyalties?.discount }}</span\n >\n }\n @if (loyalties?.advantages) {\n <p\n class=\"tent-loyalty--info--text text color--brown\"\n >\n {{ loyalties?.advantages }}\n </p>\n }\n </div>\n @if (collapsed) {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seemore ?? '+'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow reverse without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n } @else {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seeless ?? '-'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n }\n </div>\n <ul class=\"tent-loyalty--box--list\">\n @if (loyalties?.items?.length) {\n @for (item of loyalties?.items; track $index) {\n <li\n [ngClass]=\"\n loyalties?.items?.length == 3 &&\n $index == 0\n ? 'first-item-big'\n : ''\n \"\n >\n <p\n class=\"tent-loyalty--box--item color--brown\"\n >\n @if (item.icon) {\n <span\n class=\"tent-loyalty--box--item--icon\"\n [class]=\"'icon-' + item.icon\"\n ></span>\n }\n @if (item.title) {\n <span class=\"text color--brown\">{{\n item.title\n }}</span>\n }\n @if (item.text) {\n <span\n class=\"text--small color--brown\"\n [innerHTML]=\"item.text\"\n ></span>\n }\n </p>\n </li>\n }\n }\n </ul>\n </div>\n }\n @case (2) {\n <div\n class=\"tent-loyalty--box bg-orange\"\n [ngClass]=\"collapsed ? 'close' : 'open'\"\n (click)=\"toggleCollapse($event)\"\n >\n <div class=\"tent-loyalty--box--inner\">\n <h3\n class=\"tent-loyalty--box--title title--42 color--white\"\n >\n @if (loyalties?.icon) {\n <span\n class=\"loyalty-icon\"\n [ngClass]=\"'icon-' + loyalties?.icon\"\n ></span>\n }\n @if (loyalties?.levelName) {\n <div class=\"tent-loyalty--box--title--level\">\n <span class=\"text color--white\">\n {{ loyalties?.levelName }}\n </span>\n @if (loyalties?.levelSubtitle) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n [ngClass]=\"\n !collapsed\n ? 'visible'\n : 'hidden'\n \"\n >\n {{ loyalties?.levelSubtitle }}\n </p>\n }\n </div>\n }\n </h3>\n <div\n class=\"tent-loyalty--box--info\"\n [ngClass]=\"collapsed ? 'visible' : 'hidden'\"\n >\n @if (loyalties?.discount) {\n <span\n class=\"tent-loyalty--box--info--num title--42 color--white\"\n >{{ loyalties?.discount }}</span\n >\n }\n @if (loyalties?.advantages) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n >\n {{ loyalties?.advantages }}\n </p>\n }\n </div>\n @if (collapsed) {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seemore ?? '+'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow reverse without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n } @else {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seeless ?? '-'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n }\n </div>\n <ul class=\"tent-loyalty--box--list\">\n @if (loyalties?.items?.length) {\n @for (item of loyalties?.items; track $index) {\n <li>\n <p\n class=\"tent-loyalty--box--item color--brown\"\n >\n @if (item.icon) {\n <span\n class=\"tent-loyalty--box--item--icon\"\n [class]=\"'icon-' + item.icon\"\n ></span>\n }\n @if (item.title) {\n <span class=\"text color--brown\">{{\n item.title\n }}</span>\n }\n @if (item.text) {\n <span\n class=\"text--small color--brown\"\n [innerHTML]=\"item.text\"\n ></span>\n }\n </p>\n </li>\n }\n }\n </ul>\n </div>\n }\n @case (3) {\n <div\n class=\"tent-loyalty--box bg-brown\"\n [ngClass]=\"collapsed ? 'close' : 'open'\"\n (click)=\"toggleCollapse($event)\"\n >\n <div class=\"tent-loyalty--box--inner\">\n <h3\n class=\"tent-loyalty--box--title title--42 color--white\"\n >\n @if (loyalties?.icon) {\n <span\n class=\"loyalty-icon\"\n [ngClass]=\"'icon-' + loyalties?.icon\"\n ></span>\n }\n @if (loyalties?.levelName) {\n <div class=\"tent-loyalty--box--title--level\">\n <span class=\"text color--white\">\n {{ loyalties?.levelName }}\n </span>\n @if (loyalties?.levelSubtitle) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n [ngClass]=\"\n !collapsed\n ? 'visible'\n : 'hidden'\n \"\n >\n {{ loyalties?.levelSubtitle }}\n </p>\n }\n </div>\n }\n </h3>\n <div\n class=\"tent-loyalty--box--info\"\n [ngClass]=\"collapsed ? 'visible' : 'hidden'\"\n >\n @if (loyalties?.discount) {\n <span\n class=\"tent-loyalty--box--info--num title--42 color--white\"\n >{{ loyalties?.discount }}</span\n >\n }\n @if (loyalties?.advantages) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n >\n {{ loyalties?.advantages }}\n </p>\n }\n </div>\n @if (collapsed) {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seemore ?? '+'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow reverse without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n } @else {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seeless ?? '-'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n }\n </div>\n <ul class=\"tent-loyalty--box--list\">\n @if (loyalties?.items?.length) {\n @for (item of loyalties?.items; track $index) {\n <li>\n <p\n class=\"tent-loyalty--box--item color--brown\"\n >\n @if (item.icon) {\n <span\n class=\"tent-loyalty--box--item--icon\"\n [class]=\"'icon-' + item.icon\"\n ></span>\n }\n @if (item.title) {\n <span class=\"text color--brown\">{{\n item.title\n }}</span>\n }\n @if (item.text) {\n <span\n class=\"text--small color--brown\"\n [innerHTML]=\"item.text\"\n >{{ item.text }}</span\n >\n }\n </p>\n </li>\n }\n }\n </ul>\n </div>\n }\n }\n </div>\n</section>\n", styles: [":root{--tent-font: \"DM Sans\", sans-serif;--color-background: #fff;--color-background-2: #fbf5f0;--color-background-3: #f6ece2;--color-background-4: #eaaa00;--color-background-5: #dc572a;--color-background-6: #7c4d3b;--color-background-6-90: rgb(124 77 59 / 90%);--color-background-7: #005f87;--color-background-8: #dab38c;--color-background-9: #c7946a;--color-title: #dab38d;--color-title-1: #693d2d;--color-title-2: rgb(105 61 45 / 90%);--color-title-4: rgb(105 61 45 / 70%);--color-title-3: #0cc2ce;--color-title-light: #fff;--color-subtitle: #c1885b;--color-subtitle-light: #fff;--color-description: #5d5d5d;--color-description-light: #fff;--color-description-brown-light: rgb(105 61 45 / 80%);--color-description-brown: rgb(105 61 45 / 100%);--color-badge: #dc572a;--color-badge-2: #fdd8b4;--color-badge-3: #dab38d;--color-badge-4: #f3e2d5;--color-badge-5: #fff;--color-badge-box: #e37955;--color-badge-box-hover: #d9603e;--color-dark-btn: rgb(124 77 58 / 70%);--color-dark-btn-hover: #7c4d3a;--color-line-dark-btn: rgb(124 77 58 / 70%);--color-line-dark-btn-hover: #dab38d;--color-dark-btn-filled: #693d2d;--color-dark-btn-filled-hover: #fff;--color-line-dark-btn-filled: #dab38d;--color-line-dark-btn-filled-hover: #dc572a;--color-light-btn: #fff;--color-light-btn-hover: #693d2d;--color-line-light-btn-hover: #dab38d;--size-icon-links: 12px;--size-btn-box: 308px;--size-btn-box-mobile: 250px;--color-link-brown-light: rgb(105 61 45 / 70%);--color-link-brown-light2: rgb(105 61 45 / 80%);--color-link-brown-dark: #693d2d;--color-social-media: #693d3d;--color-instagram: #dab38d;--color-tiktok: #ed4a73;--color-facebook: #2764c1;--color-youtube: #d9464b;--color-linkedin: #2376c9;--color-background-footer1: rgb(135 136 138 / 75%);--color-background-footer2: rgb(221 187 156 / 80%);--color-check-in: #e78a6a;--color-check-in-hover: #d9603e;--color-border-header: #e1d8d5;--color-linea-brown-light: rgb(124 77 58 / 50%);--color-linea-brown-light2: rgb(124 77 58 / 20%);--color-icon: #693e2e;--color-icon-light: : rgb(105 61 45 / 70%);--Ltransition: all cubic-bezier(.785, .135, .15, .86) 1s;--Mtransition: all cubic-bezier(.785, .135, .15, .86) .85s;--stransition-basic: all cubic-bezier(.785, .135, .15, .86) .7s;--SStransition: all cubic-bezier(.785, .135, .15, .86) .3s;--XStransition: all cubic-bezier(.785, .135, .15, .86) 0s}.link{font-family:var(--tent-font);text-decoration:none;font-size:16px;font-weight:400;color:var(--color-description);letter-spacing:0;line-height:146.1538461538%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);position:relative;cursor:pointer}.link:after{content:\"\";width:0%;height:1px;position:absolute;bottom:-2px;left:0;background-color:var(--color-description);-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.link:hover{color:var(--color-description)}.link:hover:after{width:100%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.link--brown{color:var(--color-link-brown-light2)}.link--brown:after{background-color:var(--color-link-brown-light2)}.link--brown:hover{color:var(--color-link-brown-dark)}.link--brown:hover:after{background-color:var(--color-link-brown-dark)}.link-opacity{font-family:var(--tent-font);text-decoration:none;font-size:16px;font-weight:400;color:var(--color-description);letter-spacing:0;line-height:146.1538461538%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);position:relative;opacity:.7;cursor:pointer}.link-opacity:hover{opacity:1}.link-regular{font-family:var(--tent-font);text-decoration:none;font-size:18px;font-weight:400;color:var(--color-description);line-height:146.1538461538%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);position:relative;cursor:pointer}.link-regular:hover{text-decoration:underline}@media (min-width: 540px){.link-regular{font-size:20px;line-height:34px}}.text{font-family:var(--tent-font);font-size:18px;line-height:24px;color:var(--color-description);text-align:left;font-weight:400}@media (min-width: 540px){.text{font-size:20px;line-height:34px}}.text--light{color:var(--color-description-light)}.text--small,.text--18{font-size:16px}.text strong{font-weight:700}.title--18{font-weight:700;font-size:14px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--18{font-size:16px}}@media (min-width: 768px){.title--18{font-size:16px}}@media (min-width: 1024px){.title--18{font-size:18px}}@media (min-width: 1680px){.title--18{font-size:18px}}.title--24{font-weight:700;font-size:24px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--24{font-size:24px}}@media (min-width: 768px){.title--24{font-size:24px}}@media (min-width: 1024px){.title--24{font-size:24px}}@media (min-width: 1280px){.title--24{font-size:24px}}@media (min-width: 1366px){.title--24{font-size:24px}}@media (min-width: 1680px){.title--24{font-size:24px}}@media (min-width: 1800px){.title--24{font-size:24px}}.title--30{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:0}@media (max-width: 374px){.title--30{font-size:24px}}.title--34{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--34{font-size:32px}}@media (min-width: 768px){.title--34{font-size:32px}}@media (min-width: 1680px){.title--34{font-size:34px}}.title--38{font-weight:700;font-size:26px;line-height:1.5;letter-spacing:0}@media (min-width: 540px){.title--38{font-size:28px}}@media (min-width: 768px){.title--38{font-size:36px}}@media (min-width: 1680px){.title--38{font-size:38px}}.title--42{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--42{font-size:32px}}@media (min-width: 768px){.title--42{font-size:42px}}@media (min-width: 1680px){.title--42{font-size:42px}}.title--54{font-weight:700;font-size:32px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--54{font-size:44px}}@media (min-width: 1680px){.title--54{font-size:54px}}.title--60{font-weight:700;font-size:32px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--60{font-size:44px;line-height:1}}@media (min-width: 768px){.title--60{font-size:50px}}@media (min-width: 1680px){.title--60{font-size:60px}}.title--80{font-weight:700;font-size:40px;line-height:1;letter-spacing:0}@media (min-width: 540px){.title--80{font-size:50px}}@media (min-width: 768px){.title--80{font-size:60px}}@media (min-width: 1024px){.title--80{font-size:60px}}@media (min-width: 1280px){.title--80{font-size:70px}}@media (min-width: 1366px){.title--80{font-size:70px}}@media (min-width: 1680px){.title--80{font-size:80px}}.title--100{font-weight:700;font-size:40px;line-height:1;letter-spacing:0}@media (min-width: 540px){.title--100{font-size:55px}}@media (min-width: 768px){.title--100{font-size:80px}}@media (min-width: 1024px){.title--100{font-size:80px}}@media (min-width: 1280px){.title--100{font-size:90px}}@media (min-width: 1366px){.title--100{font-size:90px}}@media (min-width: 1680px){.title--100{font-size:110px}}.subtitle{font-family:var(--tent-font);font-weight:700;font-size:24px;line-height:44px;letter-spacing:0;text-align:left;color:var(--color-subtitle)}.subtitle.light{color:var(--color-subtitle-light)}.subtitle--medium{font-weight:500;font-size:18px;line-height:1.2;color:var(--color-subtitle-light)}@media (min-width: 768px){.subtitle--medium{font-size:20px}}.bg-yellow{background-color:var(--color-background-4)}.bg-orange{background-color:var(--color-background-5)}.bg-brown{background-color:var(--color-background-6)}.bg-brown-90{background-color:var(--color-background-6-90)}.bg-blue{background-color:var(--color-background-7)}.bg-camel{background-color:var(--color-background-8)}.bg-beige{background-color:var(--color-background-3)}.bg-beige{background-color:var(--color-background-2)}.bg-white{background-color:#fff}.color--brown-dark{color:var(--color-title-1)}.color--brown{color:var(--color-title-2)}.color--brown-70{color:var(--color-title-4)}.color--camel{color:var(--color-title)}.color--white{color:#fff}.color--blue{color:var(--color-title-3)}.color--gray{color:var(--color-description)}.flex-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}.flex-row--reverse{flex-direction:row-reverse}.flex-row--center{align-items:center;justify-content:center}.flex-row--between{align-items:center;justify-content:space-between}.flex-row--left{align-items:center;justify-content:flex-start}@media (max-width: 1023px){.flex-row--left{justify-content:center}}.flex-col{display:flex;flex-direction:column;flex-wrap:wrap;gap:10px}.flex-col--reverse{flex-direction:row-reverse}.flex-col--center{align-items:center;justify-content:center}.mt--0{margin-top:0}.mb--0{margin-bottom:0}.pt--0{padding-top:0}.pb--0{padding-bottom:0}.mt--10{margin-top:10px}.mb--10{margin-bottom:10px}.pt--10{padding-top:10px}.pb--10{padding-bottom:10px}.mt--20{margin-top:20px}.mb--20{margin-bottom:20px}.pt--20{padding-top:20px}.pb--20{padding-bottom:20px}.mt--25{margin-top:25px}.mb--25{margin-bottom:25px}.pt--25{padding-top:25px}.pb--25{padding-bottom:25px}.mt--30{margin-top:30px}.mb--30{margin-bottom:30px}.pt--30{padding-top:30px}.pb--30{padding-bottom:30px}.mt--40{margin-top:40px}.mb--40{margin-bottom:40px}.pt--40{padding-top:40px}.pb--40{padding-bottom:40px}.mt--50{margin-top:50px}.mb--50{margin-bottom:50px}.pt--50{padding-top:50px}.pb--50{padding-bottom:50px}.mt--60{margin-top:60px}.mb--60{margin-bottom:60px}.pt--60{padding-top:60px}.pb--60{padding-bottom:60px}.mt--70{margin-top:70px}.mb--70{margin-bottom:70px}.pt--70{padding-top:70px}.pb--70{padding-bottom:70px}.mt--80{margin-top:80px}.mb--80{margin-bottom:80px}.pt--80{padding-top:80px}.pb--80{padding-bottom:80px}.mt--90{margin-top:90px}.mb--90{margin-bottom:90px}.pt--90{padding-top:90px}.pb--90{padding-bottom:90px}.mt--100{margin-top:100px}.mb--100{margin-bottom:100px}.pt--100{padding-top:100px}.pb--100{padding-bottom:100px}.wrapper-big{max-width:100%;padding:0}@media (min-width: 540px){.wrapper-big{padding:0}}@media (min-width: 768px){.wrapper-big{padding:0}}@media (min-width: 1024px){.wrapper-big{padding:0 40px}}@media (min-width: 1280px){.wrapper-big{padding:0 20px}}@media (min-width: 1366px){.wrapper-big{padding:0 13px}}@media (min-width: 1680px){.wrapper-big{padding:0 40px}}@media (min-width: 1800px){.wrapper-big{padding:0 60px}}.wrapper-medium{max-width:100%;padding:0;min-width:-webkit-fill-available}@media (min-width: 540px){.wrapper-medium{padding:0 28px}}@media (min-width: 768px){.wrapper-medium{padding:0 45px}}@media (min-width: 1024px){.wrapper-medium{padding:0 55px}}@media (min-width: 1280px){.wrapper-medium{padding:0 59px}}@media (min-width: 1366px){.wrapper-medium{padding:0 65px}}@media (min-width: 1680px){.wrapper-medium{padding:0}}@media (min-width: 1800px){.wrapper-medium{padding:0}}.module-spacer--bottom{padding-bottom:35px}@media (min-width: 540px){.module-spacer--bottom{padding-bottom:40px}}@media (min-width: 768px){.module-spacer--bottom{padding-bottom:80px}}@media (min-width: 1680px){.module-spacer--bottom{padding-bottom:90px}}.module-spacer-small--bottom{padding-bottom:30px}@media (min-width: 540px){.module-spacer-small--bottom{padding-bottom:40px}}@media (min-width: 768px){.module-spacer-small--bottom{padding-bottom:50px}}@media (min-width: 1680px){.module-spacer-small--bottom{padding-bottom:50px}}@media (min-width: 1280px){.figure-sticky{position:sticky!important;top:8rem}}.figure-content{width:100%;aspect-ratio:1;display:flex;cursor:default;align-items:center;justify-content:center;position:relative;border-radius:.6rem;overflow:hidden}.figure-full{position:absolute;top:0;left:0;width:100%;height:100%;background-position:50% 50%;background-size:cover;background-repeat:no-repeat;margin:0;z-index:-1}.figure-zoom figure{-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.figure-zoom:hover figure{-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);transform:scale(1.1)}.slider-arrows--center .owl-nav{position:absolute;top:50%;width:106%;display:flex;justify-content:space-between;margin:0;left:50%;transform:translate(-50%) translateY(-50%);z-index:-1}.slider-arrows--center .owl-nav [class*=owl-]{background-color:transparent;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.slider-arrows--center .owl-nav [class*=owl-]:hover{background-color:transparent;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);transform:scale(1.5)}.slider-circle--center .owl-nav{position:absolute;top:50%;width:calc(100% - 240px);display:flex;justify-content:space-between;margin:0;left:120px;transform:translateY(-50%)}.slider-circle--center .owl-nav [class*=owl-]{background-color:#fff;border-radius:100%;padding:4px}.slider-circle--center .owl-nav [class*=owl-]:hover{background-color:#fff}@media (max-width: 767px){.slider-circle--center .owl-nav .btn__circle{width:38px;height:38px}}.slider-circle--center--centerFull .owl-nav{width:110%;left:-5%}.btn{cursor:pointer;font-family:var(--corp-font);-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.btn__light{border:2px solid var(--color-light-btn);color:var(--color-light-btn);background-color:transparent}.btn__light:hover{border:2px solid var(--color-line-light-btn-hover);background-color:var(--color-line-light-btn-hover);color:var(--color-light-btn-hover)}.btn__dark{border:2px solid var(--color-line-dark-btn);color:var(--color-dark-btn);background-color:var(--color-background)}.btn__dark:hover{border:2px solid var(--color-line-dark-btn-hover);background-color:var(--color-line-dark-btn-hover);color:var(--color-dark-btn-hover)}.btn__dark-white{border:2px solid var(--color-line-dark-btn);color:var(--color-dark-btn);background-color:transparent}.btn__dark-white:hover{border:2px solid white;background-color:#fff;color:var(--color-dark-btn-hover)}.btn__dark-filled{border:2px solid var(--color-line-dark-btn-filled);color:var(--color-dark-btn-filled);background-color:var(--color-line-dark-btn-filled)}.btn__dark-filled:hover{border:2px solid var(--color-line-dark-btn-filled-hover);background-color:var(--color-line-dark-btn-filled-hover);color:var(--color-dark-btn-filled-hover)}.btn__white{border:2px solid white;color:var(--color-dark-btn);background-color:var(--color-background)}.btn__white:hover{border:2px solid white;background-color:#fff;color:var(--color-dark-btn-hover)}.btn__laundry{border:2px solid #005f87;color:#005f87;background-color:var(--color-background);opacity:.5}.btn__laundry:hover{background-color:#005f87;color:#fff;opacity:1}.btn__circle-container{border-radius:50%;padding:6px}.btn__circle{width:40px;height:40px;border-radius:50%;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;text-align:center}.btn__circle--social-media{width:60px;height:60px;color:var(--color-social-media)}.btn__circle:hover--instagram{background-color:var(--color-instagram);color:var(--color-social-media)}.btn__circle:hover--tiktok,.btn__circle:hover--facebook,.btn__circle:hover--youtube,.btn__circle:hover--linkedin{color:var(--color-background)}.btn__circle:hover--tiktok{background-color:var(--color-tiktok)}.btn__circle:hover--facebook{background-color:var(--color-facebook)}.btn__circle:hover--youtube{background-color:var(--color-youtube)}.btn__circle:hover--linkedin{background-color:var(--color-linkedin)}.btn__circle-icon{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;font-size:22px}.btn__circle-icon.icon--size12{font-size:12px}.btn__box{width:var(--size-btn-box);height:50px;border-radius:6px;font-weight:700;font-size:19px;line-height:24.74px;text-align:center}.btn__box.btn-small{width:var(--size-btn-box-mobile)}@media (min-width: 540px){.btn__box.btn-small{width:var(--size-btn-box)}}.btn__box-container mat-icon{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap}.form-error{font-family:var(--tent-font);color:#df6a6a;font-size:13px}.invalid{margin-bottom:10px}@media (min-width: 768px){.tent-loyalty--content{padding-inline:70px}}.tent-loyalty--head{display:flex;align-items:center;justify-content:center;gap:10px;flex-direction:column;margin-bottom:30px;margin-top:30px}.tent-loyalty--head--tit{font-weight:700;text-align:center}.tent-loyalty--head--text{font-weight:400;text-align:center}.tent-loyalty--head .discount-loyalty{position:relative;display:flex;width:100%;justify-content:center;align-items:center;padding:20px 0}.tent-loyalty--head .discount-loyalty .texts-container{display:flex;align-items:end;justify-content:center;gap:10px;z-index:1;margin-bottom:10px}@media (max-width: 539px){.tent-loyalty--head .discount-loyalty .texts-container{align-items:center;flex-direction:column}}.tent-loyalty--head .discount-loyalty .img-container{position:absolute}@media (max-width: 539px){.tent-loyalty--head .discount-loyalty .img-container img{width:90vw}}.tent-loyalty--box{display:flex;align-items:center;flex-direction:column;border-radius:16px;margin-bottom:20px;transition:opacity .9s ease;cursor:pointer}.tent-loyalty--box--inner{display:flex;width:100%;justify-content:flex-start;align-items:flex-start;padding-block:20px;position:relative;flex-direction:column}.tent-loyalty--box--inner span{width:100%;font-size:48px}.tent-loyalty--box--inner span.loyalty-icon{height:70px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--color-background-3)}.tent-loyalty--box--inner span.loyalty-icon.color--brown{background-color:var(--color-background-10)}@media (max-width: 1365px){.tent-loyalty--box--inner span,.tent-loyalty--box--inner p{width:90%}.tent-loyalty--box--inner span.loyalty-icon,.tent-loyalty--box--inner p.loyalty-icon{width:80px}}@media (max-width: 1279px){.tent-loyalty--box--inner span,.tent-loyalty--box--inner p{width:90%}.tent-loyalty--box--inner span.loyalty-icon,.tent-loyalty--box--inner p.loyalty-icon{width:80px}}.tent-loyalty--box--title{display:flex;align-items:center;padding-inline:20px;width:calc(100% - 40px);gap:10px;position:relative;padding-bottom:10px;margin-bottom:10px}.tent-loyalty--box--title--level span{font-weight:700}.tent-loyalty--box--title:before{content:\"\";width:calc(100% - 40px);height:1px;display:block;position:absolute;left:20px;bottom:0;background-color:#ffffff80}.tent-loyalty--box--title.color--brown:before{background-color:#8a583677}.tent-loyalty--box--info{padding-left:110px;display:flex;flex-direction:column;align-items:flex-start}.tent-loyalty--box--info.hidden{display:none}@media (max-width: 1279px){.tent-loyalty--box--info span{width:100%}}@media (max-width: 767px){.tent-loyalty--box--info{flex-direction:column;align-items:center;gap:15px;width:100%;padding:0%}.tent-loyalty--box--info span,.tent-loyalty--box--info p{width:100%;text-align:center}}@media (max-width: 539px){.tent-loyalty--box--info{padding-left:0;display:flex;align-items:center;justify-content:center;width:100%}}.tent-loyalty--box .tent-loyalty--btn-arrow{margin-right:0;position:absolute;right:10px}.tent-loyalty--box .tent-loyalty--btn-arrow.reverse{transform:rotate(180deg)}.tent-loyalty--box .tent-loyalty--btn-arrow ::ng-deep button{background-color:#fff;border-color:#fff}.tent-loyalty--box .tent-loyalty--btn-arrow ::ng-deep:hover button{background-color:var(--color-title-2)}.tent-loyalty--box--list{display:flex;flex-wrap:wrap;padding-bottom:20px;max-width:max-content;width:90%;align-items:center;justify-content:center;gap:20px;display:none}.tent-loyalty--box--list li{background-color:#fff;border-radius:16px;padding:20px;width:100%;flex-direction:column;align-items:center}.tent-loyalty--box--item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:20px;text-align:center}.tent-loyalty--box--item--icon{font-size:60px;width:60px;height:60px;background-color:var(--color-background-6);-webkit-mask-size:contain;mask-size:contain}.tent-loyalty--box--item .text{text-align:center}.tent-loyalty--box.open .tent-loyalty--box--list{display:flex}.tent-loyalty--box.open .tent-loyalty--box--title:before{display:none!important}@media (min-width: 768px){.tent-loyalty--box--list{align-items:stretch;justify-content:space-between;padding-bottom:30px;min-width:90%}.tent-loyalty--box--list li{width:calc(50% - 50px)}.tent-loyalty--box--list li.first-item-big{width:100%}}@media (min-width: 1280px){.tent-loyalty--box--inner{flex-direction:row;align-items:center;padding-block:30px}.tent-loyalty--box--title{width:auto;gap:40px;padding-right:40px;padding-bottom:0;margin-bottom:0;padding-inline:30px}.tent-loyalty--box--title:before{height:100%;width:1px;right:0;top:0;left:auto}.tent-loyalty--box--title span{width:120px}.tent-loyalty--box--info{padding-left:40px}.tent-loyalty--box .tent-loyalty--btn-arrow{right:40px}.tent-loyalty--box--item--icon{font-size:80px;width:100px;height:100px;background-color:var(--color-background-6);-webkit-mask-size:contain;mask-size:contain}.tent-loyalty--box--list{width:calc(100% - 140px);min-width:calc(100% - 140px)}.tent-loyalty--box--list li{width:calc(33% - 60px);min-height:190px;align-items:center;justify-content:center;display:flex}.tent-loyalty--box--list li.first-item-big{width:calc(33% - 60px)}}@media (min-width: 540px){.tent-loyalty .tent-loyalty--info--text.text{line-height:40px;bottom:5px;position:relative}}@media (max-width: 374px){.tent-loyalty .tent-loyalty--info--text.text{width:40%}}@media (min-width: 1024px){.tent-loyalty .without-label{display:none}}@media (max-width: 1023px){.tent-loyalty .without-label{display:block}}@media (min-width: 1024px){.tent-loyalty .with-label{display:block}}@media (max-width: 1023px){.tent-loyalty .with-label{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "tent-button", inputs: ["type", "label", "url", "linkType", "icon", "socialMedia", "iconPosition", "boxWidth", "innerContent", "linkSizeIcon", "closeButton", "disabled", "name"], outputs: ["btnClick"] }] }); }
|
|
17
17
|
}
|
|
18
18
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TentLoyaltyComponent, decorators: [{
|
|
19
19
|
type: Component,
|
|
20
|
-
args: [{ selector: 'lib-tent-loyalty', standalone: true, imports: [CommonModule, ButtonComponent], template: "<section\n class=\"tent-loyalty wrapper-big\"\n [ngClass]=\"{ 'module-spacer--bottom': id == 3 }\"\n>\n <div class=\"tent-loyalty--content\">\n @switch (id) {\n @case (0) {\n <div class=\"tent-loyalty--head\">\n @if (title) {\n <h2\n class=\"tent-loyalty--head--tit title--42 color--brown\"\n >\n {{ title }}\n </h2>\n }\n @if (subtitle) {\n <p class=\"tent-loyalty--head--text text\">\n {{ subtitle }}\n </p>\n }\n @if (percentage || percentagetext1 || percentagetext2) {\n <div class=\"discount-loyalty\">\n <div class=\"texts-container\">\n @if (percentagetext1) {\n <p\n class=\"text color--brown\"\n [innerHTML]=\"percentagetext1\"\n ></p>\n }\n @if (percentage) {\n <h2\n class=\"title--42 color--brown\"\n [innerHTML]=\"percentage\"\n ></h2>\n }\n @if (percentagetext2) {\n <p\n class=\"text color--brown\"\n [innerHTML]=\"percentagetext2\"\n ></p>\n }\n </div>\n <div class=\"img-container\">\n <img\n src=\"/assets/tent/img/loyalty-discount-bg.svg\"\n alt=\"left\"\n loading=\"lazy\"\n class=\"location-how--iconactive\"\n />\n </div>\n </div>\n }\n </div>\n }\n @case (1) {\n <div\n class=\"tent-loyalty--box bg-yellow\"\n [ngClass]=\"collapsed ? 'close' : 'open'\"\n (click)=\"toggleCollapse($event)\"\n >\n <div class=\"tent-loyalty--box--inner\">\n <h3\n class=\"tent-loyalty--box--title title--42 color--brown\"\n >\n @if (loyalties?.icon) {\n <span\n class=\"loyalty-icon color--brown\"\n [ngClass]=\"'icon-' + loyalties?.icon\"\n ></span>\n }\n @if (loyalties?.levelName) {\n <div class=\"tent-loyalty--box--title--level\">\n <span class=\"text color--brown\">\n {{ loyalties?.levelName }}\n </span>\n @if (loyalties?.levelSubtitle) {\n <p\n class=\"tent-loyalty--info--text text color--brown\"\n [ngClass]=\"\n !collapsed\n ? 'visible'\n : 'hidden'\n \"\n >\n {{ loyalties?.levelSubtitle }}\n </p>\n }\n </div>\n }\n </h3>\n <div\n class=\"tent-loyalty--box--info\"\n [ngClass]=\"collapsed ? 'visible' : 'hidden'\"\n >\n @if (loyalties?.discount) {\n <span\n class=\"tent-loyalty--box--info--num title--42 color--brown\"\n >{{ loyalties?.discount }}</span\n >\n }\n @if (loyalties?.advantages) {\n <p\n class=\"tent-loyalty--info--text text color--brown\"\n >\n {{ loyalties?.advantages }}\n </p>\n }\n </div>\n @if (collapsed) {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seemore ?? '+'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow reverse without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n } @else {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seeless ?? '-'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n }\n </div>\n <ul class=\"tent-loyalty--box--list\">\n @if (loyalties?.items?.length) {\n @for (item of loyalties?.items; track $index) {\n <li\n [ngClass]=\"\n loyalties?.items?.length == 3 &&\n $index == 0\n ? 'first-item-big'\n : ''\n \"\n >\n <p\n class=\"tent-loyalty--box--item color--brown\"\n >\n @if (item.icon) {\n <span\n class=\"tent-loyalty--box--item--icon\"\n [class]=\"'icon-' + item.icon\"\n ></span>\n }\n @if (item.title) {\n <span class=\"text color--brown\">{{\n item.title\n }}</span>\n }\n @if (item.text) {\n <span\n class=\"text--small color--brown\"\n [innerHTML]=\"item.text\"\n ></span>\n }\n </p>\n </li>\n }\n }\n </ul>\n </div>\n }\n @case (2) {\n <div\n class=\"tent-loyalty--box bg-orange\"\n [ngClass]=\"collapsed ? 'close' : 'open'\"\n (click)=\"toggleCollapse($event)\"\n >\n <div class=\"tent-loyalty--box--inner\">\n <h3\n class=\"tent-loyalty--box--title title--42 color--white\"\n >\n @if (loyalties?.icon) {\n <span\n class=\"loyalty-icon\"\n [ngClass]=\"'icon-' + loyalties?.icon\"\n ></span>\n }\n @if (loyalties?.levelName) {\n <div class=\"tent-loyalty--box--title--level\">\n <span class=\"text color--white\">\n {{ loyalties?.levelName }}\n </span>\n @if (loyalties?.levelSubtitle) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n [ngClass]=\"\n !collapsed\n ? 'visible'\n : 'hidden'\n \"\n >\n {{ loyalties?.levelSubtitle }}\n </p>\n }\n </div>\n }\n </h3>\n <div\n class=\"tent-loyalty--box--info\"\n [ngClass]=\"collapsed ? 'visible' : 'hidden'\"\n >\n @if (loyalties?.discount) {\n <span\n class=\"tent-loyalty--box--info--num title--42 color--white\"\n >{{ loyalties?.discount }}</span\n >\n }\n @if (loyalties?.advantages) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n >\n {{ loyalties?.advantages }}\n </p>\n }\n </div>\n @if (collapsed) {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seemore ?? '+'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow reverse without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n } @else {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seeless ?? '-'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n }\n </div>\n <ul class=\"tent-loyalty--box--list\">\n @if (loyalties?.items?.length) {\n @for (item of loyalties?.items; track $index) {\n <li>\n <p\n class=\"tent-loyalty--box--item color--brown\"\n >\n @if (item.icon) {\n <span\n class=\"tent-loyalty--box--item--icon\"\n [class]=\"'icon-' + item.icon\"\n ></span>\n }\n @if (item.title) {\n <span class=\"text color--brown\">{{\n item.title\n }}</span>\n }\n @if (item.text) {\n <span\n class=\"text--small color--brown\"\n [innerHTML]=\"item.text\"\n ></span>\n }\n </p>\n </li>\n }\n }\n </ul>\n </div>\n }\n @case (3) {\n <div\n class=\"tent-loyalty--box bg-brown\"\n [ngClass]=\"collapsed ? 'close' : 'open'\"\n (click)=\"toggleCollapse($event)\"\n >\n <div class=\"tent-loyalty--box--inner\">\n <h3\n class=\"tent-loyalty--box--title title--42 color--white\"\n >\n @if (loyalties?.icon) {\n <span\n class=\"loyalty-icon\"\n [ngClass]=\"'icon-' + loyalties?.icon\"\n ></span>\n }\n @if (loyalties?.levelName) {\n <div class=\"tent-loyalty--box--title--level\">\n <span class=\"text color--white\">\n {{ loyalties?.levelName }}\n </span>\n @if (loyalties?.levelSubtitle) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n [ngClass]=\"\n !collapsed\n ? 'visible'\n : 'hidden'\n \"\n >\n {{ loyalties?.levelSubtitle }}\n </p>\n }\n </div>\n }\n </h3>\n <div\n class=\"tent-loyalty--box--info\"\n [ngClass]=\"collapsed ? 'visible' : 'hidden'\"\n >\n @if (loyalties?.discount) {\n <span\n class=\"tent-loyalty--box--info--num title--42 color--white\"\n >{{ loyalties?.discount }}</span\n >\n }\n @if (loyalties?.advantages) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n >\n {{ loyalties?.advantages }}\n </p>\n }\n </div>\n @if (collapsed) {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seemore ?? '+'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow reverse without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n } @else {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seeless ?? '-'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n }\n </div>\n <ul class=\"tent-loyalty--box--list\">\n @if (loyalties?.items?.length) {\n @for (item of loyalties?.items; track $index) {\n <li>\n <p\n class=\"tent-loyalty--box--item color--brown\"\n >\n @if (item.icon) {\n <span\n class=\"tent-loyalty--box--item--icon\"\n [class]=\"'icon-' + item.icon\"\n ></span>\n }\n @if (item.title) {\n <span class=\"text color--brown\">{{\n item.title\n }}</span>\n }\n @if (item.text) {\n <span\n class=\"text--small color--brown\"\n [innerHTML]=\"item.text\"\n >{{ item.text }}</span\n >\n }\n </p>\n </li>\n }\n }\n </ul>\n </div>\n }\n }\n </div>\n</section>\n", styles: [":root{--tent-font: \"DM Sans\", sans-serif;--color-background: #fff;--color-background-2: #fbf5f0;--color-background-3: #f6ece2;--color-background-4: #eaaa00;--color-background-5: #dc572a;--color-background-6: #7c4d3b;--color-background-6-90: rgb(124 77 59 / 90%);--color-background-7: #005f87;--color-background-8: #dab38c;--color-background-9: #c7946a;--color-title: #dab38d;--color-title-1: #693d2d;--color-title-2: rgb(105 61 45 / 90%);--color-title-4: rgb(105 61 45 / 70%);--color-title-3: #0cc2ce;--color-title-light: #fff;--color-subtitle: #c1885b;--color-subtitle-light: #fff;--color-description: #5d5d5d;--color-description-light: #fff;--color-description-brown-light: rgb(105 61 45 / 80%);--color-description-brown: rgb(105 61 45 / 100%);--color-badge: #dc572a;--color-badge-2: #fdd8b4;--color-badge-3: #dab38d;--color-badge-4: #f3e2d5;--color-badge-5: #fff;--color-badge-box: #e37955;--color-badge-box-hover: #d9603e;--color-dark-btn: rgb(124 77 58 / 70%);--color-dark-btn-hover: #7c4d3a;--color-line-dark-btn: rgb(124 77 58 / 70%);--color-line-dark-btn-hover: #dab38d;--color-dark-btn-filled: #693d2d;--color-dark-btn-filled-hover: #fff;--color-line-dark-btn-filled: #dab38d;--color-line-dark-btn-filled-hover: #dc572a;--color-light-btn: #fff;--color-light-btn-hover: #693d2d;--color-line-light-btn-hover: #dab38d;--size-icon-links: 12px;--size-btn-box: 308px;--size-btn-box-mobile: 250px;--color-link-brown-light: rgb(105 61 45 / 70%);--color-link-brown-light2: rgb(105 61 45 / 80%);--color-link-brown-dark: #693d2d;--color-social-media: #693d3d;--color-instagram: #dab38d;--color-tiktok: #ed4a73;--color-facebook: #2764c1;--color-youtube: #d9464b;--color-linkedin: #2376c9;--color-background-footer1: rgb(135 136 138 / 75%);--color-background-footer2: rgb(221 187 156 / 80%);--color-check-in: #e78a6a;--color-check-in-hover: #d9603e;--color-border-header: #e1d8d5;--color-linea-brown-light: rgb(124 77 58 / 50%);--color-linea-brown-light2: rgb(124 77 58 / 20%);--color-icon: #693e2e;--color-icon-light: : rgb(105 61 45 / 70%);--Ltransition: all cubic-bezier(.785, .135, .15, .86) 1s;--Mtransition: all cubic-bezier(.785, .135, .15, .86) .85s;--stransition-basic: all cubic-bezier(.785, .135, .15, .86) .7s;--SStransition: all cubic-bezier(.785, .135, .15, .86) .3s;--XStransition: all cubic-bezier(.785, .135, .15, .86) 0s}.link{font-family:var(--tent-font);text-decoration:none;font-size:16px;font-weight:400;color:var(--color-description);letter-spacing:0;line-height:146.1538461538%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);position:relative;cursor:pointer}.link:after{content:\"\";width:0%;height:1px;position:absolute;bottom:-2px;left:0;background-color:var(--color-description);-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.link:hover{color:var(--color-description)}.link:hover:after{width:100%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.link--brown{color:var(--color-link-brown-light2)}.link--brown:after{background-color:var(--color-link-brown-light2)}.link--brown:hover{color:var(--color-link-brown-dark)}.link--brown:hover:after{background-color:var(--color-link-brown-dark)}.link-opacity{font-family:var(--tent-font);text-decoration:none;font-size:16px;font-weight:400;color:var(--color-description);letter-spacing:0;line-height:146.1538461538%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);position:relative;opacity:.7;cursor:pointer}.link-opacity:hover{opacity:1}.link-regular{font-family:var(--tent-font);text-decoration:none;font-size:18px;font-weight:400;color:var(--color-description);line-height:146.1538461538%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);position:relative;cursor:pointer}.link-regular:hover{text-decoration:underline}@media (min-width: 540px){.link-regular{font-size:20px;line-height:34px}}.text{font-family:var(--tent-font);font-size:18px;line-height:24px;color:var(--color-description);text-align:left;font-weight:400}@media (min-width: 540px){.text{font-size:20px;line-height:34px}}.text--light{color:var(--color-description-light)}.text--small,.text--18{font-size:16px}.text strong{font-weight:700}.title--18{font-weight:700;font-size:14px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--18{font-size:16px}}@media (min-width: 768px){.title--18{font-size:16px}}@media (min-width: 1024px){.title--18{font-size:18px}}@media (min-width: 1680px){.title--18{font-size:18px}}.title--24{font-weight:700;font-size:24px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--24{font-size:24px}}@media (min-width: 768px){.title--24{font-size:24px}}@media (min-width: 1024px){.title--24{font-size:24px}}@media (min-width: 1280px){.title--24{font-size:24px}}@media (min-width: 1366px){.title--24{font-size:24px}}@media (min-width: 1680px){.title--24{font-size:24px}}@media (min-width: 1800px){.title--24{font-size:24px}}.title--30{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:0}@media (max-width: 374px){.title--30{font-size:24px}}.title--34{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--34{font-size:32px}}@media (min-width: 768px){.title--34{font-size:32px}}@media (min-width: 1680px){.title--34{font-size:34px}}.title--38{font-weight:700;font-size:26px;line-height:1.5;letter-spacing:0}@media (min-width: 540px){.title--38{font-size:28px}}@media (min-width: 768px){.title--38{font-size:36px}}@media (min-width: 1680px){.title--38{font-size:38px}}.title--42{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--42{font-size:32px}}@media (min-width: 768px){.title--42{font-size:42px}}@media (min-width: 1680px){.title--42{font-size:42px}}.title--54{font-weight:700;font-size:32px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--54{font-size:44px}}@media (min-width: 1680px){.title--54{font-size:54px}}.title--60{font-weight:700;font-size:32px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--60{font-size:44px;line-height:1}}@media (min-width: 768px){.title--60{font-size:50px}}@media (min-width: 1680px){.title--60{font-size:60px}}.title--80{font-weight:700;font-size:40px;line-height:1;letter-spacing:0}@media (min-width: 540px){.title--80{font-size:50px}}@media (min-width: 768px){.title--80{font-size:60px}}@media (min-width: 1024px){.title--80{font-size:60px}}@media (min-width: 1280px){.title--80{font-size:70px}}@media (min-width: 1366px){.title--80{font-size:70px}}@media (min-width: 1680px){.title--80{font-size:80px}}.title--100{font-weight:700;font-size:40px;line-height:1;letter-spacing:0}@media (min-width: 540px){.title--100{font-size:55px}}@media (min-width: 768px){.title--100{font-size:80px}}@media (min-width: 1024px){.title--100{font-size:80px}}@media (min-width: 1280px){.title--100{font-size:90px}}@media (min-width: 1366px){.title--100{font-size:90px}}@media (min-width: 1680px){.title--100{font-size:110px}}.subtitle{font-family:var(--tent-font);font-weight:700;font-size:24px;line-height:44px;letter-spacing:0;text-align:left;color:var(--color-subtitle)}.subtitle.light{color:var(--color-subtitle-light)}.subtitle--medium{font-weight:500;font-size:18px;line-height:1.2;color:var(--color-subtitle-light)}@media (min-width: 768px){.subtitle--medium{font-size:20px}}.bg-yellow{background-color:var(--color-background-4)}.bg-orange{background-color:var(--color-background-5)}.bg-brown{background-color:var(--color-background-6)}.bg-brown-90{background-color:var(--color-background-6-90)}.bg-blue{background-color:var(--color-background-7)}.bg-camel{background-color:var(--color-background-8)}.bg-beige{background-color:var(--color-background-3)}.bg-beige{background-color:var(--color-background-2)}.bg-white{background-color:#fff}.color--brown-dark{color:var(--color-title-1)}.color--brown{color:var(--color-title-2)}.color--brown-70{color:var(--color-title-4)}.color--camel{color:var(--color-title)}.color--white{color:#fff}.color--blue{color:var(--color-title-3)}.color--gray{color:var(--color-description)}.flex-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}.flex-row--reverse{flex-direction:row-reverse}.flex-row--center{align-items:center;justify-content:center}.flex-row--between{align-items:center;justify-content:space-between}.flex-row--left{align-items:center;justify-content:flex-start}@media (max-width: 1023px){.flex-row--left{justify-content:center}}.flex-col{display:flex;flex-direction:column;flex-wrap:wrap;gap:10px}.flex-col--reverse{flex-direction:row-reverse}.flex-col--center{align-items:center;justify-content:center}.mt--0{margin-top:0}.mb--0{margin-bottom:0}.pt--0{padding-top:0}.pb--0{padding-bottom:0}.mt--10{margin-top:10px}.mb--10{margin-bottom:10px}.pt--10{padding-top:10px}.pb--10{padding-bottom:10px}.mt--20{margin-top:20px}.mb--20{margin-bottom:20px}.pt--20{padding-top:20px}.pb--20{padding-bottom:20px}.mt--25{margin-top:25px}.mb--25{margin-bottom:25px}.pt--25{padding-top:25px}.pb--25{padding-bottom:25px}.mt--30{margin-top:30px}.mb--30{margin-bottom:30px}.pt--30{padding-top:30px}.pb--30{padding-bottom:30px}.mt--40{margin-top:40px}.mb--40{margin-bottom:40px}.pt--40{padding-top:40px}.pb--40{padding-bottom:40px}.mt--50{margin-top:50px}.mb--50{margin-bottom:50px}.pt--50{padding-top:50px}.pb--50{padding-bottom:50px}.mt--60{margin-top:60px}.mb--60{margin-bottom:60px}.pt--60{padding-top:60px}.pb--60{padding-bottom:60px}.mt--70{margin-top:70px}.mb--70{margin-bottom:70px}.pt--70{padding-top:70px}.pb--70{padding-bottom:70px}.mt--80{margin-top:80px}.mb--80{margin-bottom:80px}.pt--80{padding-top:80px}.pb--80{padding-bottom:80px}.mt--90{margin-top:90px}.mb--90{margin-bottom:90px}.pt--90{padding-top:90px}.pb--90{padding-bottom:90px}.mt--100{margin-top:100px}.mb--100{margin-bottom:100px}.pt--100{padding-top:100px}.pb--100{padding-bottom:100px}.wrapper-big{max-width:100%;padding:0}@media (min-width: 540px){.wrapper-big{padding:0}}@media (min-width: 768px){.wrapper-big{padding:0}}@media (min-width: 1024px){.wrapper-big{padding:0 40px}}@media (min-width: 1280px){.wrapper-big{padding:0 20px}}@media (min-width: 1366px){.wrapper-big{padding:0 13px}}@media (min-width: 1680px){.wrapper-big{padding:0 40px}}@media (min-width: 1800px){.wrapper-big{padding:0 60px}}.wrapper-medium{max-width:100%;padding:0;min-width:-webkit-fill-available}@media (min-width: 540px){.wrapper-medium{padding:0 28px}}@media (min-width: 768px){.wrapper-medium{padding:0 45px}}@media (min-width: 1024px){.wrapper-medium{padding:0 55px}}@media (min-width: 1280px){.wrapper-medium{padding:0 59px}}@media (min-width: 1366px){.wrapper-medium{padding:0 65px}}@media (min-width: 1680px){.wrapper-medium{padding:0}}@media (min-width: 1800px){.wrapper-medium{padding:0}}.module-spacer--bottom{padding-bottom:35px}@media (min-width: 540px){.module-spacer--bottom{padding-bottom:40px}}@media (min-width: 768px){.module-spacer--bottom{padding-bottom:80px}}@media (min-width: 1680px){.module-spacer--bottom{padding-bottom:90px}}.module-spacer-small--bottom{padding-bottom:30px}@media (min-width: 540px){.module-spacer-small--bottom{padding-bottom:40px}}@media (min-width: 768px){.module-spacer-small--bottom{padding-bottom:50px}}@media (min-width: 1680px){.module-spacer-small--bottom{padding-bottom:50px}}@media (min-width: 1280px){.figure-sticky{position:sticky!important;top:8rem}}.figure-content{width:100%;aspect-ratio:1;display:flex;cursor:default;align-items:center;justify-content:center;position:relative;border-radius:.6rem;overflow:hidden}.figure-full{position:absolute;top:0;left:0;width:100%;height:100%;background-position:50% 50%;background-size:cover;background-repeat:no-repeat;margin:0;z-index:-1}.figure-zoom figure{-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.figure-zoom:hover figure{-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);transform:scale(1.1)}.slider-arrows--center .owl-nav{position:absolute;top:50%;width:106%;display:flex;justify-content:space-between;margin:0;left:50%;transform:translate(-50%) translateY(-50%);z-index:-1}.slider-arrows--center .owl-nav [class*=owl-]{background-color:transparent;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.slider-arrows--center .owl-nav [class*=owl-]:hover{background-color:transparent;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);transform:scale(1.5)}.slider-circle--center .owl-nav{position:absolute;top:50%;width:calc(100% - 240px);display:flex;justify-content:space-between;margin:0;left:120px;transform:translateY(-50%)}.slider-circle--center .owl-nav [class*=owl-]{background-color:#fff;border-radius:100%;padding:4px}.slider-circle--center .owl-nav [class*=owl-]:hover{background-color:#fff}@media (max-width: 767px){.slider-circle--center .owl-nav .btn__circle{width:38px;height:38px}}.slider-circle--center--centerFull .owl-nav{width:110%;left:-5%}.btn{cursor:pointer;font-family:var(--corp-font);-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.btn__light{border:2px solid var(--color-light-btn);color:var(--color-light-btn);background-color:transparent}.btn__light:hover{border:2px solid var(--color-line-light-btn-hover);background-color:var(--color-line-light-btn-hover);color:var(--color-light-btn-hover)}.btn__dark{border:2px solid var(--color-line-dark-btn);color:var(--color-dark-btn);background-color:var(--color-background)}.btn__dark:hover{border:2px solid var(--color-line-dark-btn-hover);background-color:var(--color-line-dark-btn-hover);color:var(--color-dark-btn-hover)}.btn__dark-white{border:2px solid var(--color-line-dark-btn);color:var(--color-dark-btn);background-color:transparent}.btn__dark-white:hover{border:2px solid white;background-color:#fff;color:var(--color-dark-btn-hover)}.btn__dark-filled{border:2px solid var(--color-line-dark-btn-filled);color:var(--color-dark-btn-filled);background-color:var(--color-line-dark-btn-filled)}.btn__dark-filled:hover{border:2px solid var(--color-line-dark-btn-filled-hover);background-color:var(--color-line-dark-btn-filled-hover);color:var(--color-dark-btn-filled-hover)}.btn__white{border:2px solid white;color:var(--color-dark-btn);background-color:var(--color-background)}.btn__white:hover{border:2px solid white;background-color:#fff;color:var(--color-dark-btn-hover)}.btn__laundry{border:2px solid #005f87;color:#005f87;background-color:var(--color-background);opacity:.5}.btn__laundry:hover{background-color:#005f87;color:#fff;opacity:1}.btn__circle-container{border-radius:50%;padding:6px}.btn__circle{width:40px;height:40px;border-radius:50%;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;text-align:center}.btn__circle--social-media{width:60px;height:60px;color:var(--color-social-media)}.btn__circle:hover--instagram{background-color:var(--color-instagram);color:var(--color-social-media)}.btn__circle:hover--tiktok,.btn__circle:hover--facebook,.btn__circle:hover--youtube,.btn__circle:hover--linkedin{color:var(--color-background)}.btn__circle:hover--tiktok{background-color:var(--color-tiktok)}.btn__circle:hover--facebook{background-color:var(--color-facebook)}.btn__circle:hover--youtube{background-color:var(--color-youtube)}.btn__circle:hover--linkedin{background-color:var(--color-linkedin)}.btn__circle-icon{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;font-size:22px}.btn__circle-icon.icon--size12{font-size:12px}.btn__box{width:var(--size-btn-box);height:50px;border-radius:6px;font-weight:700;font-size:19px;line-height:24.74px;text-align:center}.btn__box.btn-small{width:var(--size-btn-box-mobile)}@media (min-width: 540px){.btn__box.btn-small{width:var(--size-btn-box)}}.btn__box-container mat-icon{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap}.form-error{font-family:var(--tent-font);color:#df6a6a;font-size:13px}.invalid{margin-bottom:10px}@media (min-width: 768px){.tent-loyalty--content{padding-inline:70px}}.tent-loyalty--head{display:flex;align-items:center;justify-content:center;gap:10px;flex-direction:column;margin-bottom:30px;margin-top:30px}.tent-loyalty--head--tit{font-weight:700;text-align:center}.tent-loyalty--head--text{font-weight:400;text-align:center}.tent-loyalty--head .discount-loyalty{position:relative;display:flex;width:100%;justify-content:center;align-items:center;padding:20px 0}.tent-loyalty--head .discount-loyalty .texts-container{display:flex;align-items:end;justify-content:center;gap:10px;z-index:1;margin-bottom:10px}@media (max-width: 539px){.tent-loyalty--head .discount-loyalty .texts-container{align-items:center;flex-direction:column}}.tent-loyalty--head .discount-loyalty .img-container{position:absolute}@media (max-width: 539px){.tent-loyalty--head .discount-loyalty .img-container img{width:90vw}}.tent-loyalty--box{display:flex;align-items:center;flex-direction:column;border-radius:16px;margin-bottom:20px;transition:opacity .9s ease;cursor:pointer}.tent-loyalty--box--inner{display:flex;width:100%;justify-content:flex-start;align-items:flex-start;padding-block:20px;position:relative;flex-direction:column}.tent-loyalty--box--inner span{width:100%;font-size:48px}.tent-loyalty--box--inner span.loyalty-icon{height:70px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--color-background-3)}.tent-loyalty--box--inner span.loyalty-icon.color--brown{background-color:var(--color-background-10)}@media (max-width: 1365px){.tent-loyalty--box--inner span,.tent-loyalty--box--inner p{width:90%}.tent-loyalty--box--inner span.loyalty-icon,.tent-loyalty--box--inner p.loyalty-icon{width:80px}}@media (max-width: 1279px){.tent-loyalty--box--inner span,.tent-loyalty--box--inner p{width:90%}.tent-loyalty--box--inner span.loyalty-icon,.tent-loyalty--box--inner p.loyalty-icon{width:80px}}.tent-loyalty--box--title{display:flex;align-items:center;padding-inline:20px;width:calc(100% - 40px);gap:10px;position:relative;padding-bottom:10px;margin-bottom:10px}.tent-loyalty--box--title--level span{font-weight:700}.tent-loyalty--box--title:before{content:\"\";width:calc(100% - 40px);height:1px;display:block;position:absolute;left:20px;bottom:0;background-color:#ffffff80}.tent-loyalty--box--title.color--brown:before{background-color:#8a583677}.tent-loyalty--box--info{padding-left:110px;display:flex;flex-direction:column;align-items:flex-start}.tent-loyalty--box--info.hidden{display:none}@media (max-width: 1279px){.tent-loyalty--box--info span{width:100%}}@media (max-width: 767px){.tent-loyalty--box--info{flex-direction:column;align-items:center;gap:15px;width:100%;padding:0%}.tent-loyalty--box--info span,.tent-loyalty--box--info p{width:100%;text-align:center}}@media (max-width: 539px){.tent-loyalty--box--info{padding-left:0;display:flex;align-items:center;justify-content:center;width:100%}}.tent-loyalty--box .tent-loyalty--btn-arrow{margin-right:0;position:absolute;right:10px}.tent-loyalty--box .tent-loyalty--btn-arrow.reverse{transform:rotate(180deg)}.tent-loyalty--box .tent-loyalty--btn-arrow ::ng-deep button{background-color:#fff;border-color:#fff}.tent-loyalty--box .tent-loyalty--btn-arrow ::ng-deep:hover button{background-color:var(--color-title-2)}.tent-loyalty--box--list{display:flex;flex-wrap:wrap;padding-bottom:20px;max-width:max-content;width:90%;align-items:center;justify-content:center;gap:20px;display:none}.tent-loyalty--box--list li{background-color:#fff;border-radius:16px;padding:20px;width:100%;flex-direction:column;align-items:center}.tent-loyalty--box--item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:20px;text-align:center}.tent-loyalty--box--item--icon{font-size:60px;width:60px;height:60px;background-color:var(--color-background-6);-webkit-mask-size:contain;mask-size:contain}.tent-loyalty--box--item .text{text-align:center}.tent-loyalty--box.open .tent-loyalty--box--list{display:flex}.tent-loyalty--box.open .tent-loyalty--box--title:before{display:none!important}@media (min-width: 768px){.tent-loyalty--box--list{align-items:stretch;justify-content:space-between;padding-bottom:30px;min-width:90%}.tent-loyalty--box--list li{width:calc(50% - 50px)}.tent-loyalty--box--list li.first-item-big{width:100%}}@media (min-width: 1280px){.tent-loyalty--box--inner{flex-direction:row;align-items:center;padding-block:30px}.tent-loyalty--box--title{width:auto;gap:40px;padding-right:40px;padding-bottom:0;margin-bottom:0;padding-inline:30px}.tent-loyalty--box--title:before{height:100%;width:1px;right:0;top:0;left:auto}.tent-loyalty--box--title span{width:120px}.tent-loyalty--box--info{padding-left:40px}.tent-loyalty--box .tent-loyalty--btn-arrow{right:40px}.tent-loyalty--box--item--icon{font-size:80px;width:100px;height:100px;background-color:var(--color-background-6);-webkit-mask-size:contain;mask-size:contain}.tent-loyalty--box--list{width:calc(100% - 140px);min-width:calc(100% - 140px)}.tent-loyalty--box--list li{width:calc(33% - 60px);min-height:190px;align-items:center;justify-content:center;display:flex}.tent-loyalty--box--list li.first-item-big{width:calc(33% - 60px)}}@media (min-width: 540px){.tent-loyalty .tent-loyalty--info--text.text{line-height:24px;bottom:5px;position:relative}}@media (max-width: 374px){.tent-loyalty .tent-loyalty--info--text.text{width:40%}}@media (min-width: 1024px){.tent-loyalty .without-label{display:none}}@media (max-width: 1023px){.tent-loyalty .without-label{display:block}}@media (min-width: 1024px){.tent-loyalty .with-label{display:block}}@media (max-width: 1023px){.tent-loyalty .with-label{display:none}}\n"] }]
|
|
20
|
+
args: [{ selector: 'lib-tent-loyalty', standalone: true, imports: [CommonModule, ButtonComponent], template: "<section\n class=\"tent-loyalty wrapper-big\"\n [ngClass]=\"{ 'module-spacer--bottom': id == 3 }\"\n>\n <div class=\"tent-loyalty--content\">\n @switch (id) {\n @case (0) {\n <div class=\"tent-loyalty--head\">\n @if (title) {\n <h2\n class=\"tent-loyalty--head--tit title--42 color--brown\"\n >\n {{ title }}\n </h2>\n }\n @if (subtitle) {\n <p class=\"tent-loyalty--head--text text\">\n {{ subtitle }}\n </p>\n }\n @if (percentage || percentagetext1 || percentagetext2) {\n <div class=\"discount-loyalty\">\n <div class=\"texts-container\">\n @if (percentagetext1) {\n <p\n class=\"text color--brown\"\n [innerHTML]=\"percentagetext1\"\n ></p>\n }\n @if (percentage) {\n <h2\n class=\"title--42 color--brown\"\n [innerHTML]=\"percentage\"\n ></h2>\n }\n @if (percentagetext2) {\n <p\n class=\"text color--brown\"\n [innerHTML]=\"percentagetext2\"\n ></p>\n }\n </div>\n <div class=\"img-container\">\n <img\n src=\"/assets/tent/img/loyalty-discount-bg.svg\"\n alt=\"left\"\n loading=\"lazy\"\n class=\"location-how--iconactive\"\n />\n </div>\n </div>\n }\n </div>\n }\n @case (1) {\n <div\n class=\"tent-loyalty--box bg-yellow\"\n [ngClass]=\"collapsed ? 'close' : 'open'\"\n (click)=\"toggleCollapse($event)\"\n >\n <div class=\"tent-loyalty--box--inner\">\n <h3\n class=\"tent-loyalty--box--title title--42 color--brown\"\n >\n @if (loyalties?.icon) {\n <span\n class=\"loyalty-icon color--brown\"\n [ngClass]=\"'icon-' + loyalties?.icon\"\n ></span>\n }\n @if (loyalties?.levelName) {\n <div class=\"tent-loyalty--box--title--level\">\n <span class=\"text color--brown\">\n {{ loyalties?.levelName }}\n </span>\n @if (loyalties?.levelSubtitle) {\n <p\n class=\"tent-loyalty--info--text text color--brown\"\n [ngClass]=\"\n !collapsed\n ? 'visible'\n : 'hidden'\n \"\n >\n {{ loyalties?.levelSubtitle }}\n </p>\n }\n </div>\n }\n </h3>\n <div\n class=\"tent-loyalty--box--info\"\n [ngClass]=\"collapsed ? 'visible' : 'hidden'\"\n >\n @if (loyalties?.discount) {\n <span\n class=\"tent-loyalty--box--info--num title--42 color--brown\"\n >{{ loyalties?.discount }}</span\n >\n }\n @if (loyalties?.advantages) {\n <p\n class=\"tent-loyalty--info--text text color--brown\"\n >\n {{ loyalties?.advantages }}\n </p>\n }\n </div>\n @if (collapsed) {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seemore ?? '+'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow reverse without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n } @else {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seeless ?? '-'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n }\n </div>\n <ul class=\"tent-loyalty--box--list\">\n @if (loyalties?.items?.length) {\n @for (item of loyalties?.items; track $index) {\n <li\n [ngClass]=\"\n loyalties?.items?.length == 3 &&\n $index == 0\n ? 'first-item-big'\n : ''\n \"\n >\n <p\n class=\"tent-loyalty--box--item color--brown\"\n >\n @if (item.icon) {\n <span\n class=\"tent-loyalty--box--item--icon\"\n [class]=\"'icon-' + item.icon\"\n ></span>\n }\n @if (item.title) {\n <span class=\"text color--brown\">{{\n item.title\n }}</span>\n }\n @if (item.text) {\n <span\n class=\"text--small color--brown\"\n [innerHTML]=\"item.text\"\n ></span>\n }\n </p>\n </li>\n }\n }\n </ul>\n </div>\n }\n @case (2) {\n <div\n class=\"tent-loyalty--box bg-orange\"\n [ngClass]=\"collapsed ? 'close' : 'open'\"\n (click)=\"toggleCollapse($event)\"\n >\n <div class=\"tent-loyalty--box--inner\">\n <h3\n class=\"tent-loyalty--box--title title--42 color--white\"\n >\n @if (loyalties?.icon) {\n <span\n class=\"loyalty-icon\"\n [ngClass]=\"'icon-' + loyalties?.icon\"\n ></span>\n }\n @if (loyalties?.levelName) {\n <div class=\"tent-loyalty--box--title--level\">\n <span class=\"text color--white\">\n {{ loyalties?.levelName }}\n </span>\n @if (loyalties?.levelSubtitle) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n [ngClass]=\"\n !collapsed\n ? 'visible'\n : 'hidden'\n \"\n >\n {{ loyalties?.levelSubtitle }}\n </p>\n }\n </div>\n }\n </h3>\n <div\n class=\"tent-loyalty--box--info\"\n [ngClass]=\"collapsed ? 'visible' : 'hidden'\"\n >\n @if (loyalties?.discount) {\n <span\n class=\"tent-loyalty--box--info--num title--42 color--white\"\n >{{ loyalties?.discount }}</span\n >\n }\n @if (loyalties?.advantages) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n >\n {{ loyalties?.advantages }}\n </p>\n }\n </div>\n @if (collapsed) {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seemore ?? '+'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow reverse without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n } @else {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seeless ?? '-'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n }\n </div>\n <ul class=\"tent-loyalty--box--list\">\n @if (loyalties?.items?.length) {\n @for (item of loyalties?.items; track $index) {\n <li>\n <p\n class=\"tent-loyalty--box--item color--brown\"\n >\n @if (item.icon) {\n <span\n class=\"tent-loyalty--box--item--icon\"\n [class]=\"'icon-' + item.icon\"\n ></span>\n }\n @if (item.title) {\n <span class=\"text color--brown\">{{\n item.title\n }}</span>\n }\n @if (item.text) {\n <span\n class=\"text--small color--brown\"\n [innerHTML]=\"item.text\"\n ></span>\n }\n </p>\n </li>\n }\n }\n </ul>\n </div>\n }\n @case (3) {\n <div\n class=\"tent-loyalty--box bg-brown\"\n [ngClass]=\"collapsed ? 'close' : 'open'\"\n (click)=\"toggleCollapse($event)\"\n >\n <div class=\"tent-loyalty--box--inner\">\n <h3\n class=\"tent-loyalty--box--title title--42 color--white\"\n >\n @if (loyalties?.icon) {\n <span\n class=\"loyalty-icon\"\n [ngClass]=\"'icon-' + loyalties?.icon\"\n ></span>\n }\n @if (loyalties?.levelName) {\n <div class=\"tent-loyalty--box--title--level\">\n <span class=\"text color--white\">\n {{ loyalties?.levelName }}\n </span>\n @if (loyalties?.levelSubtitle) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n [ngClass]=\"\n !collapsed\n ? 'visible'\n : 'hidden'\n \"\n >\n {{ loyalties?.levelSubtitle }}\n </p>\n }\n </div>\n }\n </h3>\n <div\n class=\"tent-loyalty--box--info\"\n [ngClass]=\"collapsed ? 'visible' : 'hidden'\"\n >\n @if (loyalties?.discount) {\n <span\n class=\"tent-loyalty--box--info--num title--42 color--white\"\n >{{ loyalties?.discount }}</span\n >\n }\n @if (loyalties?.advantages) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n >\n {{ loyalties?.advantages }}\n </p>\n }\n </div>\n @if (collapsed) {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seemore ?? '+'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow reverse without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n } @else {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seeless ?? '-'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n }\n </div>\n <ul class=\"tent-loyalty--box--list\">\n @if (loyalties?.items?.length) {\n @for (item of loyalties?.items; track $index) {\n <li>\n <p\n class=\"tent-loyalty--box--item color--brown\"\n >\n @if (item.icon) {\n <span\n class=\"tent-loyalty--box--item--icon\"\n [class]=\"'icon-' + item.icon\"\n ></span>\n }\n @if (item.title) {\n <span class=\"text color--brown\">{{\n item.title\n }}</span>\n }\n @if (item.text) {\n <span\n class=\"text--small color--brown\"\n [innerHTML]=\"item.text\"\n >{{ item.text }}</span\n >\n }\n </p>\n </li>\n }\n }\n </ul>\n </div>\n }\n }\n </div>\n</section>\n", styles: [":root{--tent-font: \"DM Sans\", sans-serif;--color-background: #fff;--color-background-2: #fbf5f0;--color-background-3: #f6ece2;--color-background-4: #eaaa00;--color-background-5: #dc572a;--color-background-6: #7c4d3b;--color-background-6-90: rgb(124 77 59 / 90%);--color-background-7: #005f87;--color-background-8: #dab38c;--color-background-9: #c7946a;--color-title: #dab38d;--color-title-1: #693d2d;--color-title-2: rgb(105 61 45 / 90%);--color-title-4: rgb(105 61 45 / 70%);--color-title-3: #0cc2ce;--color-title-light: #fff;--color-subtitle: #c1885b;--color-subtitle-light: #fff;--color-description: #5d5d5d;--color-description-light: #fff;--color-description-brown-light: rgb(105 61 45 / 80%);--color-description-brown: rgb(105 61 45 / 100%);--color-badge: #dc572a;--color-badge-2: #fdd8b4;--color-badge-3: #dab38d;--color-badge-4: #f3e2d5;--color-badge-5: #fff;--color-badge-box: #e37955;--color-badge-box-hover: #d9603e;--color-dark-btn: rgb(124 77 58 / 70%);--color-dark-btn-hover: #7c4d3a;--color-line-dark-btn: rgb(124 77 58 / 70%);--color-line-dark-btn-hover: #dab38d;--color-dark-btn-filled: #693d2d;--color-dark-btn-filled-hover: #fff;--color-line-dark-btn-filled: #dab38d;--color-line-dark-btn-filled-hover: #dc572a;--color-light-btn: #fff;--color-light-btn-hover: #693d2d;--color-line-light-btn-hover: #dab38d;--size-icon-links: 12px;--size-btn-box: 308px;--size-btn-box-mobile: 250px;--color-link-brown-light: rgb(105 61 45 / 70%);--color-link-brown-light2: rgb(105 61 45 / 80%);--color-link-brown-dark: #693d2d;--color-social-media: #693d3d;--color-instagram: #dab38d;--color-tiktok: #ed4a73;--color-facebook: #2764c1;--color-youtube: #d9464b;--color-linkedin: #2376c9;--color-background-footer1: rgb(135 136 138 / 75%);--color-background-footer2: rgb(221 187 156 / 80%);--color-check-in: #e78a6a;--color-check-in-hover: #d9603e;--color-border-header: #e1d8d5;--color-linea-brown-light: rgb(124 77 58 / 50%);--color-linea-brown-light2: rgb(124 77 58 / 20%);--color-icon: #693e2e;--color-icon-light: : rgb(105 61 45 / 70%);--Ltransition: all cubic-bezier(.785, .135, .15, .86) 1s;--Mtransition: all cubic-bezier(.785, .135, .15, .86) .85s;--stransition-basic: all cubic-bezier(.785, .135, .15, .86) .7s;--SStransition: all cubic-bezier(.785, .135, .15, .86) .3s;--XStransition: all cubic-bezier(.785, .135, .15, .86) 0s}.link{font-family:var(--tent-font);text-decoration:none;font-size:16px;font-weight:400;color:var(--color-description);letter-spacing:0;line-height:146.1538461538%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);position:relative;cursor:pointer}.link:after{content:\"\";width:0%;height:1px;position:absolute;bottom:-2px;left:0;background-color:var(--color-description);-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.link:hover{color:var(--color-description)}.link:hover:after{width:100%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.link--brown{color:var(--color-link-brown-light2)}.link--brown:after{background-color:var(--color-link-brown-light2)}.link--brown:hover{color:var(--color-link-brown-dark)}.link--brown:hover:after{background-color:var(--color-link-brown-dark)}.link-opacity{font-family:var(--tent-font);text-decoration:none;font-size:16px;font-weight:400;color:var(--color-description);letter-spacing:0;line-height:146.1538461538%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);position:relative;opacity:.7;cursor:pointer}.link-opacity:hover{opacity:1}.link-regular{font-family:var(--tent-font);text-decoration:none;font-size:18px;font-weight:400;color:var(--color-description);line-height:146.1538461538%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);position:relative;cursor:pointer}.link-regular:hover{text-decoration:underline}@media (min-width: 540px){.link-regular{font-size:20px;line-height:34px}}.text{font-family:var(--tent-font);font-size:18px;line-height:24px;color:var(--color-description);text-align:left;font-weight:400}@media (min-width: 540px){.text{font-size:20px;line-height:34px}}.text--light{color:var(--color-description-light)}.text--small,.text--18{font-size:16px}.text strong{font-weight:700}.title--18{font-weight:700;font-size:14px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--18{font-size:16px}}@media (min-width: 768px){.title--18{font-size:16px}}@media (min-width: 1024px){.title--18{font-size:18px}}@media (min-width: 1680px){.title--18{font-size:18px}}.title--24{font-weight:700;font-size:24px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--24{font-size:24px}}@media (min-width: 768px){.title--24{font-size:24px}}@media (min-width: 1024px){.title--24{font-size:24px}}@media (min-width: 1280px){.title--24{font-size:24px}}@media (min-width: 1366px){.title--24{font-size:24px}}@media (min-width: 1680px){.title--24{font-size:24px}}@media (min-width: 1800px){.title--24{font-size:24px}}.title--30{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:0}@media (max-width: 374px){.title--30{font-size:24px}}.title--34{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--34{font-size:32px}}@media (min-width: 768px){.title--34{font-size:32px}}@media (min-width: 1680px){.title--34{font-size:34px}}.title--38{font-weight:700;font-size:26px;line-height:1.5;letter-spacing:0}@media (min-width: 540px){.title--38{font-size:28px}}@media (min-width: 768px){.title--38{font-size:36px}}@media (min-width: 1680px){.title--38{font-size:38px}}.title--42{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--42{font-size:32px}}@media (min-width: 768px){.title--42{font-size:42px}}@media (min-width: 1680px){.title--42{font-size:42px}}.title--54{font-weight:700;font-size:32px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--54{font-size:44px}}@media (min-width: 1680px){.title--54{font-size:54px}}.title--60{font-weight:700;font-size:32px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--60{font-size:44px;line-height:1}}@media (min-width: 768px){.title--60{font-size:50px}}@media (min-width: 1680px){.title--60{font-size:60px}}.title--80{font-weight:700;font-size:40px;line-height:1;letter-spacing:0}@media (min-width: 540px){.title--80{font-size:50px}}@media (min-width: 768px){.title--80{font-size:60px}}@media (min-width: 1024px){.title--80{font-size:60px}}@media (min-width: 1280px){.title--80{font-size:70px}}@media (min-width: 1366px){.title--80{font-size:70px}}@media (min-width: 1680px){.title--80{font-size:80px}}.title--100{font-weight:700;font-size:40px;line-height:1;letter-spacing:0}@media (min-width: 540px){.title--100{font-size:55px}}@media (min-width: 768px){.title--100{font-size:80px}}@media (min-width: 1024px){.title--100{font-size:80px}}@media (min-width: 1280px){.title--100{font-size:90px}}@media (min-width: 1366px){.title--100{font-size:90px}}@media (min-width: 1680px){.title--100{font-size:110px}}.subtitle{font-family:var(--tent-font);font-weight:700;font-size:24px;line-height:44px;letter-spacing:0;text-align:left;color:var(--color-subtitle)}.subtitle.light{color:var(--color-subtitle-light)}.subtitle--medium{font-weight:500;font-size:18px;line-height:1.2;color:var(--color-subtitle-light)}@media (min-width: 768px){.subtitle--medium{font-size:20px}}.bg-yellow{background-color:var(--color-background-4)}.bg-orange{background-color:var(--color-background-5)}.bg-brown{background-color:var(--color-background-6)}.bg-brown-90{background-color:var(--color-background-6-90)}.bg-blue{background-color:var(--color-background-7)}.bg-camel{background-color:var(--color-background-8)}.bg-beige{background-color:var(--color-background-3)}.bg-beige{background-color:var(--color-background-2)}.bg-white{background-color:#fff}.color--brown-dark{color:var(--color-title-1)}.color--brown{color:var(--color-title-2)}.color--brown-70{color:var(--color-title-4)}.color--camel{color:var(--color-title)}.color--white{color:#fff}.color--blue{color:var(--color-title-3)}.color--gray{color:var(--color-description)}.flex-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}.flex-row--reverse{flex-direction:row-reverse}.flex-row--center{align-items:center;justify-content:center}.flex-row--between{align-items:center;justify-content:space-between}.flex-row--left{align-items:center;justify-content:flex-start}@media (max-width: 1023px){.flex-row--left{justify-content:center}}.flex-col{display:flex;flex-direction:column;flex-wrap:wrap;gap:10px}.flex-col--reverse{flex-direction:row-reverse}.flex-col--center{align-items:center;justify-content:center}.mt--0{margin-top:0}.mb--0{margin-bottom:0}.pt--0{padding-top:0}.pb--0{padding-bottom:0}.mt--10{margin-top:10px}.mb--10{margin-bottom:10px}.pt--10{padding-top:10px}.pb--10{padding-bottom:10px}.mt--20{margin-top:20px}.mb--20{margin-bottom:20px}.pt--20{padding-top:20px}.pb--20{padding-bottom:20px}.mt--25{margin-top:25px}.mb--25{margin-bottom:25px}.pt--25{padding-top:25px}.pb--25{padding-bottom:25px}.mt--30{margin-top:30px}.mb--30{margin-bottom:30px}.pt--30{padding-top:30px}.pb--30{padding-bottom:30px}.mt--40{margin-top:40px}.mb--40{margin-bottom:40px}.pt--40{padding-top:40px}.pb--40{padding-bottom:40px}.mt--50{margin-top:50px}.mb--50{margin-bottom:50px}.pt--50{padding-top:50px}.pb--50{padding-bottom:50px}.mt--60{margin-top:60px}.mb--60{margin-bottom:60px}.pt--60{padding-top:60px}.pb--60{padding-bottom:60px}.mt--70{margin-top:70px}.mb--70{margin-bottom:70px}.pt--70{padding-top:70px}.pb--70{padding-bottom:70px}.mt--80{margin-top:80px}.mb--80{margin-bottom:80px}.pt--80{padding-top:80px}.pb--80{padding-bottom:80px}.mt--90{margin-top:90px}.mb--90{margin-bottom:90px}.pt--90{padding-top:90px}.pb--90{padding-bottom:90px}.mt--100{margin-top:100px}.mb--100{margin-bottom:100px}.pt--100{padding-top:100px}.pb--100{padding-bottom:100px}.wrapper-big{max-width:100%;padding:0}@media (min-width: 540px){.wrapper-big{padding:0}}@media (min-width: 768px){.wrapper-big{padding:0}}@media (min-width: 1024px){.wrapper-big{padding:0 40px}}@media (min-width: 1280px){.wrapper-big{padding:0 20px}}@media (min-width: 1366px){.wrapper-big{padding:0 13px}}@media (min-width: 1680px){.wrapper-big{padding:0 40px}}@media (min-width: 1800px){.wrapper-big{padding:0 60px}}.wrapper-medium{max-width:100%;padding:0;min-width:-webkit-fill-available}@media (min-width: 540px){.wrapper-medium{padding:0 28px}}@media (min-width: 768px){.wrapper-medium{padding:0 45px}}@media (min-width: 1024px){.wrapper-medium{padding:0 55px}}@media (min-width: 1280px){.wrapper-medium{padding:0 59px}}@media (min-width: 1366px){.wrapper-medium{padding:0 65px}}@media (min-width: 1680px){.wrapper-medium{padding:0}}@media (min-width: 1800px){.wrapper-medium{padding:0}}.module-spacer--bottom{padding-bottom:35px}@media (min-width: 540px){.module-spacer--bottom{padding-bottom:40px}}@media (min-width: 768px){.module-spacer--bottom{padding-bottom:80px}}@media (min-width: 1680px){.module-spacer--bottom{padding-bottom:90px}}.module-spacer-small--bottom{padding-bottom:30px}@media (min-width: 540px){.module-spacer-small--bottom{padding-bottom:40px}}@media (min-width: 768px){.module-spacer-small--bottom{padding-bottom:50px}}@media (min-width: 1680px){.module-spacer-small--bottom{padding-bottom:50px}}@media (min-width: 1280px){.figure-sticky{position:sticky!important;top:8rem}}.figure-content{width:100%;aspect-ratio:1;display:flex;cursor:default;align-items:center;justify-content:center;position:relative;border-radius:.6rem;overflow:hidden}.figure-full{position:absolute;top:0;left:0;width:100%;height:100%;background-position:50% 50%;background-size:cover;background-repeat:no-repeat;margin:0;z-index:-1}.figure-zoom figure{-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.figure-zoom:hover figure{-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);transform:scale(1.1)}.slider-arrows--center .owl-nav{position:absolute;top:50%;width:106%;display:flex;justify-content:space-between;margin:0;left:50%;transform:translate(-50%) translateY(-50%);z-index:-1}.slider-arrows--center .owl-nav [class*=owl-]{background-color:transparent;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.slider-arrows--center .owl-nav [class*=owl-]:hover{background-color:transparent;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);transform:scale(1.5)}.slider-circle--center .owl-nav{position:absolute;top:50%;width:calc(100% - 240px);display:flex;justify-content:space-between;margin:0;left:120px;transform:translateY(-50%)}.slider-circle--center .owl-nav [class*=owl-]{background-color:#fff;border-radius:100%;padding:4px}.slider-circle--center .owl-nav [class*=owl-]:hover{background-color:#fff}@media (max-width: 767px){.slider-circle--center .owl-nav .btn__circle{width:38px;height:38px}}.slider-circle--center--centerFull .owl-nav{width:110%;left:-5%}.btn{cursor:pointer;font-family:var(--corp-font);-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.btn__light{border:2px solid var(--color-light-btn);color:var(--color-light-btn);background-color:transparent}.btn__light:hover{border:2px solid var(--color-line-light-btn-hover);background-color:var(--color-line-light-btn-hover);color:var(--color-light-btn-hover)}.btn__dark{border:2px solid var(--color-line-dark-btn);color:var(--color-dark-btn);background-color:var(--color-background)}.btn__dark:hover{border:2px solid var(--color-line-dark-btn-hover);background-color:var(--color-line-dark-btn-hover);color:var(--color-dark-btn-hover)}.btn__dark-white{border:2px solid var(--color-line-dark-btn);color:var(--color-dark-btn);background-color:transparent}.btn__dark-white:hover{border:2px solid white;background-color:#fff;color:var(--color-dark-btn-hover)}.btn__dark-filled{border:2px solid var(--color-line-dark-btn-filled);color:var(--color-dark-btn-filled);background-color:var(--color-line-dark-btn-filled)}.btn__dark-filled:hover{border:2px solid var(--color-line-dark-btn-filled-hover);background-color:var(--color-line-dark-btn-filled-hover);color:var(--color-dark-btn-filled-hover)}.btn__white{border:2px solid white;color:var(--color-dark-btn);background-color:var(--color-background)}.btn__white:hover{border:2px solid white;background-color:#fff;color:var(--color-dark-btn-hover)}.btn__laundry{border:2px solid #005f87;color:#005f87;background-color:var(--color-background);opacity:.5}.btn__laundry:hover{background-color:#005f87;color:#fff;opacity:1}.btn__circle-container{border-radius:50%;padding:6px}.btn__circle{width:40px;height:40px;border-radius:50%;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;text-align:center}.btn__circle--social-media{width:60px;height:60px;color:var(--color-social-media)}.btn__circle:hover--instagram{background-color:var(--color-instagram);color:var(--color-social-media)}.btn__circle:hover--tiktok,.btn__circle:hover--facebook,.btn__circle:hover--youtube,.btn__circle:hover--linkedin{color:var(--color-background)}.btn__circle:hover--tiktok{background-color:var(--color-tiktok)}.btn__circle:hover--facebook{background-color:var(--color-facebook)}.btn__circle:hover--youtube{background-color:var(--color-youtube)}.btn__circle:hover--linkedin{background-color:var(--color-linkedin)}.btn__circle-icon{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;font-size:22px}.btn__circle-icon.icon--size12{font-size:12px}.btn__box{width:var(--size-btn-box);height:50px;border-radius:6px;font-weight:700;font-size:19px;line-height:24.74px;text-align:center}.btn__box.btn-small{width:var(--size-btn-box-mobile)}@media (min-width: 540px){.btn__box.btn-small{width:var(--size-btn-box)}}.btn__box-container mat-icon{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap}.form-error{font-family:var(--tent-font);color:#df6a6a;font-size:13px}.invalid{margin-bottom:10px}@media (min-width: 768px){.tent-loyalty--content{padding-inline:70px}}.tent-loyalty--head{display:flex;align-items:center;justify-content:center;gap:10px;flex-direction:column;margin-bottom:30px;margin-top:30px}.tent-loyalty--head--tit{font-weight:700;text-align:center}.tent-loyalty--head--text{font-weight:400;text-align:center}.tent-loyalty--head .discount-loyalty{position:relative;display:flex;width:100%;justify-content:center;align-items:center;padding:20px 0}.tent-loyalty--head .discount-loyalty .texts-container{display:flex;align-items:end;justify-content:center;gap:10px;z-index:1;margin-bottom:10px}@media (max-width: 539px){.tent-loyalty--head .discount-loyalty .texts-container{align-items:center;flex-direction:column}}.tent-loyalty--head .discount-loyalty .img-container{position:absolute}@media (max-width: 539px){.tent-loyalty--head .discount-loyalty .img-container img{width:90vw}}.tent-loyalty--box{display:flex;align-items:center;flex-direction:column;border-radius:16px;margin-bottom:20px;transition:opacity .9s ease;cursor:pointer}.tent-loyalty--box--inner{display:flex;width:100%;justify-content:flex-start;align-items:flex-start;padding-block:20px;position:relative;flex-direction:column}.tent-loyalty--box--inner span{width:100%;font-size:48px}.tent-loyalty--box--inner span.loyalty-icon{height:70px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--color-background-3)}.tent-loyalty--box--inner span.loyalty-icon.color--brown{background-color:var(--color-background-10)}@media (max-width: 1365px){.tent-loyalty--box--inner span,.tent-loyalty--box--inner p{width:90%}.tent-loyalty--box--inner span.loyalty-icon,.tent-loyalty--box--inner p.loyalty-icon{width:80px}}@media (max-width: 1279px){.tent-loyalty--box--inner span,.tent-loyalty--box--inner p{width:90%}.tent-loyalty--box--inner span.loyalty-icon,.tent-loyalty--box--inner p.loyalty-icon{width:80px}}.tent-loyalty--box--title{display:flex;align-items:center;padding-inline:20px;width:calc(100% - 40px);gap:10px;position:relative;padding-bottom:10px;margin-bottom:10px}.tent-loyalty--box--title--level span{font-weight:700}.tent-loyalty--box--title:before{content:\"\";width:calc(100% - 40px);height:1px;display:block;position:absolute;left:20px;bottom:0;background-color:#ffffff80}.tent-loyalty--box--title.color--brown:before{background-color:#8a583677}.tent-loyalty--box--info{padding-left:110px;display:flex;flex-direction:column;align-items:flex-start}.tent-loyalty--box--info.hidden{display:none}@media (max-width: 1279px){.tent-loyalty--box--info span{width:100%}}@media (max-width: 767px){.tent-loyalty--box--info{flex-direction:column;align-items:center;gap:15px;width:100%;padding:0%}.tent-loyalty--box--info span,.tent-loyalty--box--info p{width:100%;text-align:center}}@media (max-width: 539px){.tent-loyalty--box--info{padding-left:0;display:flex;align-items:center;justify-content:center;width:100%}}.tent-loyalty--box .tent-loyalty--btn-arrow{margin-right:0;position:absolute;right:10px}.tent-loyalty--box .tent-loyalty--btn-arrow.reverse{transform:rotate(180deg)}.tent-loyalty--box .tent-loyalty--btn-arrow ::ng-deep button{background-color:#fff;border-color:#fff}.tent-loyalty--box .tent-loyalty--btn-arrow ::ng-deep:hover button{background-color:var(--color-title-2)}.tent-loyalty--box--list{display:flex;flex-wrap:wrap;padding-bottom:20px;max-width:max-content;width:90%;align-items:center;justify-content:center;gap:20px;display:none}.tent-loyalty--box--list li{background-color:#fff;border-radius:16px;padding:20px;width:100%;flex-direction:column;align-items:center}.tent-loyalty--box--item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:20px;text-align:center}.tent-loyalty--box--item--icon{font-size:60px;width:60px;height:60px;background-color:var(--color-background-6);-webkit-mask-size:contain;mask-size:contain}.tent-loyalty--box--item .text{text-align:center}.tent-loyalty--box.open .tent-loyalty--box--list{display:flex}.tent-loyalty--box.open .tent-loyalty--box--title:before{display:none!important}@media (min-width: 768px){.tent-loyalty--box--list{align-items:stretch;justify-content:space-between;padding-bottom:30px;min-width:90%}.tent-loyalty--box--list li{width:calc(50% - 50px)}.tent-loyalty--box--list li.first-item-big{width:100%}}@media (min-width: 1280px){.tent-loyalty--box--inner{flex-direction:row;align-items:center;padding-block:30px}.tent-loyalty--box--title{width:auto;gap:40px;padding-right:40px;padding-bottom:0;margin-bottom:0;padding-inline:30px}.tent-loyalty--box--title:before{height:100%;width:1px;right:0;top:0;left:auto}.tent-loyalty--box--title span{width:120px}.tent-loyalty--box--info{padding-left:40px}.tent-loyalty--box .tent-loyalty--btn-arrow{right:40px}.tent-loyalty--box--item--icon{font-size:80px;width:100px;height:100px;background-color:var(--color-background-6);-webkit-mask-size:contain;mask-size:contain}.tent-loyalty--box--list{width:calc(100% - 140px);min-width:calc(100% - 140px)}.tent-loyalty--box--list li{width:calc(33% - 60px);min-height:190px;align-items:center;justify-content:center;display:flex}.tent-loyalty--box--list li.first-item-big{width:calc(33% - 60px)}}@media (min-width: 540px){.tent-loyalty .tent-loyalty--info--text.text{line-height:40px;bottom:5px;position:relative}}@media (max-width: 374px){.tent-loyalty .tent-loyalty--info--text.text{width:40%}}@media (min-width: 1024px){.tent-loyalty .without-label{display:none}}@media (max-width: 1023px){.tent-loyalty .without-label{display:block}}@media (min-width: 1024px){.tent-loyalty .with-label{display:block}}@media (max-width: 1023px){.tent-loyalty .with-label{display:none}}\n"] }]
|
|
21
21
|
}], propDecorators: { id: [{
|
|
22
22
|
type: Input
|
|
23
23
|
}], title: [{
|
package/fesm2022/tent-lib.mjs
CHANGED
|
@@ -3874,11 +3874,11 @@ class TentLoyaltyComponent {
|
|
|
3874
3874
|
this.collapsed = !this.collapsed;
|
|
3875
3875
|
}
|
|
3876
3876
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TentLoyaltyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3877
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TentLoyaltyComponent, isStandalone: true, selector: "lib-tent-loyalty", inputs: { id: "id", title: "title", subtitle: "subtitle", percentage: "percentage", percentagetext1: "percentagetext1", percentagetext2: "percentagetext2", loyalties: "loyalties" }, ngImport: i0, template: "<section\n class=\"tent-loyalty wrapper-big\"\n [ngClass]=\"{ 'module-spacer--bottom': id == 3 }\"\n>\n <div class=\"tent-loyalty--content\">\n @switch (id) {\n @case (0) {\n <div class=\"tent-loyalty--head\">\n @if (title) {\n <h2\n class=\"tent-loyalty--head--tit title--42 color--brown\"\n >\n {{ title }}\n </h2>\n }\n @if (subtitle) {\n <p class=\"tent-loyalty--head--text text\">\n {{ subtitle }}\n </p>\n }\n @if (percentage || percentagetext1 || percentagetext2) {\n <div class=\"discount-loyalty\">\n <div class=\"texts-container\">\n @if (percentagetext1) {\n <p\n class=\"text color--brown\"\n [innerHTML]=\"percentagetext1\"\n ></p>\n }\n @if (percentage) {\n <h2\n class=\"title--42 color--brown\"\n [innerHTML]=\"percentage\"\n ></h2>\n }\n @if (percentagetext2) {\n <p\n class=\"text color--brown\"\n [innerHTML]=\"percentagetext2\"\n ></p>\n }\n </div>\n <div class=\"img-container\">\n <img\n src=\"/assets/tent/img/loyalty-discount-bg.svg\"\n alt=\"left\"\n loading=\"lazy\"\n class=\"location-how--iconactive\"\n />\n </div>\n </div>\n }\n </div>\n }\n @case (1) {\n <div\n class=\"tent-loyalty--box bg-yellow\"\n [ngClass]=\"collapsed ? 'close' : 'open'\"\n (click)=\"toggleCollapse($event)\"\n >\n <div class=\"tent-loyalty--box--inner\">\n <h3\n class=\"tent-loyalty--box--title title--42 color--brown\"\n >\n @if (loyalties?.icon) {\n <span\n class=\"loyalty-icon color--brown\"\n [ngClass]=\"'icon-' + loyalties?.icon\"\n ></span>\n }\n @if (loyalties?.levelName) {\n <div class=\"tent-loyalty--box--title--level\">\n <span class=\"text color--brown\">\n {{ loyalties?.levelName }}\n </span>\n @if (loyalties?.levelSubtitle) {\n <p\n class=\"tent-loyalty--info--text text color--brown\"\n [ngClass]=\"\n !collapsed\n ? 'visible'\n : 'hidden'\n \"\n >\n {{ loyalties?.levelSubtitle }}\n </p>\n }\n </div>\n }\n </h3>\n <div\n class=\"tent-loyalty--box--info\"\n [ngClass]=\"collapsed ? 'visible' : 'hidden'\"\n >\n @if (loyalties?.discount) {\n <span\n class=\"tent-loyalty--box--info--num title--42 color--brown\"\n >{{ loyalties?.discount }}</span\n >\n }\n @if (loyalties?.advantages) {\n <p\n class=\"tent-loyalty--info--text text color--brown\"\n >\n {{ loyalties?.advantages }}\n </p>\n }\n </div>\n @if (collapsed) {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seemore ?? '+'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow reverse without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n } @else {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seeless ?? '-'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n }\n </div>\n <ul class=\"tent-loyalty--box--list\">\n @if (loyalties?.items?.length) {\n @for (item of loyalties?.items; track $index) {\n <li\n [ngClass]=\"\n loyalties?.items?.length == 3 &&\n $index == 0\n ? 'first-item-big'\n : ''\n \"\n >\n <p\n class=\"tent-loyalty--box--item color--brown\"\n >\n @if (item.icon) {\n <span\n class=\"tent-loyalty--box--item--icon\"\n [class]=\"'icon-' + item.icon\"\n ></span>\n }\n @if (item.title) {\n <span class=\"text color--brown\">{{\n item.title\n }}</span>\n }\n @if (item.text) {\n <span\n class=\"text--small color--brown\"\n [innerHTML]=\"item.text\"\n ></span>\n }\n </p>\n </li>\n }\n }\n </ul>\n </div>\n }\n @case (2) {\n <div\n class=\"tent-loyalty--box bg-orange\"\n [ngClass]=\"collapsed ? 'close' : 'open'\"\n (click)=\"toggleCollapse($event)\"\n >\n <div class=\"tent-loyalty--box--inner\">\n <h3\n class=\"tent-loyalty--box--title title--42 color--white\"\n >\n @if (loyalties?.icon) {\n <span\n class=\"loyalty-icon\"\n [ngClass]=\"'icon-' + loyalties?.icon\"\n ></span>\n }\n @if (loyalties?.levelName) {\n <div class=\"tent-loyalty--box--title--level\">\n <span class=\"text color--white\">\n {{ loyalties?.levelName }}\n </span>\n @if (loyalties?.levelSubtitle) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n [ngClass]=\"\n !collapsed\n ? 'visible'\n : 'hidden'\n \"\n >\n {{ loyalties?.levelSubtitle }}\n </p>\n }\n </div>\n }\n </h3>\n <div\n class=\"tent-loyalty--box--info\"\n [ngClass]=\"collapsed ? 'visible' : 'hidden'\"\n >\n @if (loyalties?.discount) {\n <span\n class=\"tent-loyalty--box--info--num title--42 color--white\"\n >{{ loyalties?.discount }}</span\n >\n }\n @if (loyalties?.advantages) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n >\n {{ loyalties?.advantages }}\n </p>\n }\n </div>\n @if (collapsed) {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seemore ?? '+'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow reverse without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n } @else {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seeless ?? '-'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n }\n </div>\n <ul class=\"tent-loyalty--box--list\">\n @if (loyalties?.items?.length) {\n @for (item of loyalties?.items; track $index) {\n <li>\n <p\n class=\"tent-loyalty--box--item color--brown\"\n >\n @if (item.icon) {\n <span\n class=\"tent-loyalty--box--item--icon\"\n [class]=\"'icon-' + item.icon\"\n ></span>\n }\n @if (item.title) {\n <span class=\"text color--brown\">{{\n item.title\n }}</span>\n }\n @if (item.text) {\n <span\n class=\"text--small color--brown\"\n [innerHTML]=\"item.text\"\n ></span>\n }\n </p>\n </li>\n }\n }\n </ul>\n </div>\n }\n @case (3) {\n <div\n class=\"tent-loyalty--box bg-brown\"\n [ngClass]=\"collapsed ? 'close' : 'open'\"\n (click)=\"toggleCollapse($event)\"\n >\n <div class=\"tent-loyalty--box--inner\">\n <h3\n class=\"tent-loyalty--box--title title--42 color--white\"\n >\n @if (loyalties?.icon) {\n <span\n class=\"loyalty-icon\"\n [ngClass]=\"'icon-' + loyalties?.icon\"\n ></span>\n }\n @if (loyalties?.levelName) {\n <div class=\"tent-loyalty--box--title--level\">\n <span class=\"text color--white\">\n {{ loyalties?.levelName }}\n </span>\n @if (loyalties?.levelSubtitle) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n [ngClass]=\"\n !collapsed\n ? 'visible'\n : 'hidden'\n \"\n >\n {{ loyalties?.levelSubtitle }}\n </p>\n }\n </div>\n }\n </h3>\n <div\n class=\"tent-loyalty--box--info\"\n [ngClass]=\"collapsed ? 'visible' : 'hidden'\"\n >\n @if (loyalties?.discount) {\n <span\n class=\"tent-loyalty--box--info--num title--42 color--white\"\n >{{ loyalties?.discount }}</span\n >\n }\n @if (loyalties?.advantages) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n >\n {{ loyalties?.advantages }}\n </p>\n }\n </div>\n @if (collapsed) {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seemore ?? '+'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow reverse without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n } @else {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seeless ?? '-'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n }\n </div>\n <ul class=\"tent-loyalty--box--list\">\n @if (loyalties?.items?.length) {\n @for (item of loyalties?.items; track $index) {\n <li>\n <p\n class=\"tent-loyalty--box--item color--brown\"\n >\n @if (item.icon) {\n <span\n class=\"tent-loyalty--box--item--icon\"\n [class]=\"'icon-' + item.icon\"\n ></span>\n }\n @if (item.title) {\n <span class=\"text color--brown\">{{\n item.title\n }}</span>\n }\n @if (item.text) {\n <span\n class=\"text--small color--brown\"\n [innerHTML]=\"item.text\"\n >{{ item.text }}</span\n >\n }\n </p>\n </li>\n }\n }\n </ul>\n </div>\n }\n }\n </div>\n</section>\n", styles: [":root{--tent-font: \"DM Sans\", sans-serif;--color-background: #fff;--color-background-2: #fbf5f0;--color-background-3: #f6ece2;--color-background-4: #eaaa00;--color-background-5: #dc572a;--color-background-6: #7c4d3b;--color-background-6-90: rgb(124 77 59 / 90%);--color-background-7: #005f87;--color-background-8: #dab38c;--color-background-9: #c7946a;--color-title: #dab38d;--color-title-1: #693d2d;--color-title-2: rgb(105 61 45 / 90%);--color-title-4: rgb(105 61 45 / 70%);--color-title-3: #0cc2ce;--color-title-light: #fff;--color-subtitle: #c1885b;--color-subtitle-light: #fff;--color-description: #5d5d5d;--color-description-light: #fff;--color-description-brown-light: rgb(105 61 45 / 80%);--color-description-brown: rgb(105 61 45 / 100%);--color-badge: #dc572a;--color-badge-2: #fdd8b4;--color-badge-3: #dab38d;--color-badge-4: #f3e2d5;--color-badge-5: #fff;--color-badge-box: #e37955;--color-badge-box-hover: #d9603e;--color-dark-btn: rgb(124 77 58 / 70%);--color-dark-btn-hover: #7c4d3a;--color-line-dark-btn: rgb(124 77 58 / 70%);--color-line-dark-btn-hover: #dab38d;--color-dark-btn-filled: #693d2d;--color-dark-btn-filled-hover: #fff;--color-line-dark-btn-filled: #dab38d;--color-line-dark-btn-filled-hover: #dc572a;--color-light-btn: #fff;--color-light-btn-hover: #693d2d;--color-line-light-btn-hover: #dab38d;--size-icon-links: 12px;--size-btn-box: 308px;--size-btn-box-mobile: 250px;--color-link-brown-light: rgb(105 61 45 / 70%);--color-link-brown-light2: rgb(105 61 45 / 80%);--color-link-brown-dark: #693d2d;--color-social-media: #693d3d;--color-instagram: #dab38d;--color-tiktok: #ed4a73;--color-facebook: #2764c1;--color-youtube: #d9464b;--color-linkedin: #2376c9;--color-background-footer1: rgb(135 136 138 / 75%);--color-background-footer2: rgb(221 187 156 / 80%);--color-check-in: #e78a6a;--color-check-in-hover: #d9603e;--color-border-header: #e1d8d5;--color-linea-brown-light: rgb(124 77 58 / 50%);--color-linea-brown-light2: rgb(124 77 58 / 20%);--color-icon: #693e2e;--color-icon-light: : rgb(105 61 45 / 70%);--Ltransition: all cubic-bezier(.785, .135, .15, .86) 1s;--Mtransition: all cubic-bezier(.785, .135, .15, .86) .85s;--stransition-basic: all cubic-bezier(.785, .135, .15, .86) .7s;--SStransition: all cubic-bezier(.785, .135, .15, .86) .3s;--XStransition: all cubic-bezier(.785, .135, .15, .86) 0s}.link{font-family:var(--tent-font);text-decoration:none;font-size:16px;font-weight:400;color:var(--color-description);letter-spacing:0;line-height:146.1538461538%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);position:relative;cursor:pointer}.link:after{content:\"\";width:0%;height:1px;position:absolute;bottom:-2px;left:0;background-color:var(--color-description);-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.link:hover{color:var(--color-description)}.link:hover:after{width:100%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.link--brown{color:var(--color-link-brown-light2)}.link--brown:after{background-color:var(--color-link-brown-light2)}.link--brown:hover{color:var(--color-link-brown-dark)}.link--brown:hover:after{background-color:var(--color-link-brown-dark)}.link-opacity{font-family:var(--tent-font);text-decoration:none;font-size:16px;font-weight:400;color:var(--color-description);letter-spacing:0;line-height:146.1538461538%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);position:relative;opacity:.7;cursor:pointer}.link-opacity:hover{opacity:1}.link-regular{font-family:var(--tent-font);text-decoration:none;font-size:18px;font-weight:400;color:var(--color-description);line-height:146.1538461538%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);position:relative;cursor:pointer}.link-regular:hover{text-decoration:underline}@media (min-width: 540px){.link-regular{font-size:20px;line-height:34px}}.text{font-family:var(--tent-font);font-size:18px;line-height:24px;color:var(--color-description);text-align:left;font-weight:400}@media (min-width: 540px){.text{font-size:20px;line-height:34px}}.text--light{color:var(--color-description-light)}.text--small,.text--18{font-size:16px}.text strong{font-weight:700}.title--18{font-weight:700;font-size:14px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--18{font-size:16px}}@media (min-width: 768px){.title--18{font-size:16px}}@media (min-width: 1024px){.title--18{font-size:18px}}@media (min-width: 1680px){.title--18{font-size:18px}}.title--24{font-weight:700;font-size:24px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--24{font-size:24px}}@media (min-width: 768px){.title--24{font-size:24px}}@media (min-width: 1024px){.title--24{font-size:24px}}@media (min-width: 1280px){.title--24{font-size:24px}}@media (min-width: 1366px){.title--24{font-size:24px}}@media (min-width: 1680px){.title--24{font-size:24px}}@media (min-width: 1800px){.title--24{font-size:24px}}.title--30{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:0}@media (max-width: 374px){.title--30{font-size:24px}}.title--34{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--34{font-size:32px}}@media (min-width: 768px){.title--34{font-size:32px}}@media (min-width: 1680px){.title--34{font-size:34px}}.title--38{font-weight:700;font-size:26px;line-height:1.5;letter-spacing:0}@media (min-width: 540px){.title--38{font-size:28px}}@media (min-width: 768px){.title--38{font-size:36px}}@media (min-width: 1680px){.title--38{font-size:38px}}.title--42{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--42{font-size:32px}}@media (min-width: 768px){.title--42{font-size:42px}}@media (min-width: 1680px){.title--42{font-size:42px}}.title--54{font-weight:700;font-size:32px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--54{font-size:44px}}@media (min-width: 1680px){.title--54{font-size:54px}}.title--60{font-weight:700;font-size:32px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--60{font-size:44px;line-height:1}}@media (min-width: 768px){.title--60{font-size:50px}}@media (min-width: 1680px){.title--60{font-size:60px}}.title--80{font-weight:700;font-size:40px;line-height:1;letter-spacing:0}@media (min-width: 540px){.title--80{font-size:50px}}@media (min-width: 768px){.title--80{font-size:60px}}@media (min-width: 1024px){.title--80{font-size:60px}}@media (min-width: 1280px){.title--80{font-size:70px}}@media (min-width: 1366px){.title--80{font-size:70px}}@media (min-width: 1680px){.title--80{font-size:80px}}.title--100{font-weight:700;font-size:40px;line-height:1;letter-spacing:0}@media (min-width: 540px){.title--100{font-size:55px}}@media (min-width: 768px){.title--100{font-size:80px}}@media (min-width: 1024px){.title--100{font-size:80px}}@media (min-width: 1280px){.title--100{font-size:90px}}@media (min-width: 1366px){.title--100{font-size:90px}}@media (min-width: 1680px){.title--100{font-size:110px}}.subtitle{font-family:var(--tent-font);font-weight:700;font-size:24px;line-height:44px;letter-spacing:0;text-align:left;color:var(--color-subtitle)}.subtitle.light{color:var(--color-subtitle-light)}.subtitle--medium{font-weight:500;font-size:18px;line-height:1.2;color:var(--color-subtitle-light)}@media (min-width: 768px){.subtitle--medium{font-size:20px}}.bg-yellow{background-color:var(--color-background-4)}.bg-orange{background-color:var(--color-background-5)}.bg-brown{background-color:var(--color-background-6)}.bg-brown-90{background-color:var(--color-background-6-90)}.bg-blue{background-color:var(--color-background-7)}.bg-camel{background-color:var(--color-background-8)}.bg-beige{background-color:var(--color-background-3)}.bg-beige{background-color:var(--color-background-2)}.bg-white{background-color:#fff}.color--brown-dark{color:var(--color-title-1)}.color--brown{color:var(--color-title-2)}.color--brown-70{color:var(--color-title-4)}.color--camel{color:var(--color-title)}.color--white{color:#fff}.color--blue{color:var(--color-title-3)}.color--gray{color:var(--color-description)}.flex-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}.flex-row--reverse{flex-direction:row-reverse}.flex-row--center{align-items:center;justify-content:center}.flex-row--between{align-items:center;justify-content:space-between}.flex-row--left{align-items:center;justify-content:flex-start}@media (max-width: 1023px){.flex-row--left{justify-content:center}}.flex-col{display:flex;flex-direction:column;flex-wrap:wrap;gap:10px}.flex-col--reverse{flex-direction:row-reverse}.flex-col--center{align-items:center;justify-content:center}.mt--0{margin-top:0}.mb--0{margin-bottom:0}.pt--0{padding-top:0}.pb--0{padding-bottom:0}.mt--10{margin-top:10px}.mb--10{margin-bottom:10px}.pt--10{padding-top:10px}.pb--10{padding-bottom:10px}.mt--20{margin-top:20px}.mb--20{margin-bottom:20px}.pt--20{padding-top:20px}.pb--20{padding-bottom:20px}.mt--25{margin-top:25px}.mb--25{margin-bottom:25px}.pt--25{padding-top:25px}.pb--25{padding-bottom:25px}.mt--30{margin-top:30px}.mb--30{margin-bottom:30px}.pt--30{padding-top:30px}.pb--30{padding-bottom:30px}.mt--40{margin-top:40px}.mb--40{margin-bottom:40px}.pt--40{padding-top:40px}.pb--40{padding-bottom:40px}.mt--50{margin-top:50px}.mb--50{margin-bottom:50px}.pt--50{padding-top:50px}.pb--50{padding-bottom:50px}.mt--60{margin-top:60px}.mb--60{margin-bottom:60px}.pt--60{padding-top:60px}.pb--60{padding-bottom:60px}.mt--70{margin-top:70px}.mb--70{margin-bottom:70px}.pt--70{padding-top:70px}.pb--70{padding-bottom:70px}.mt--80{margin-top:80px}.mb--80{margin-bottom:80px}.pt--80{padding-top:80px}.pb--80{padding-bottom:80px}.mt--90{margin-top:90px}.mb--90{margin-bottom:90px}.pt--90{padding-top:90px}.pb--90{padding-bottom:90px}.mt--100{margin-top:100px}.mb--100{margin-bottom:100px}.pt--100{padding-top:100px}.pb--100{padding-bottom:100px}.wrapper-big{max-width:100%;padding:0}@media (min-width: 540px){.wrapper-big{padding:0}}@media (min-width: 768px){.wrapper-big{padding:0}}@media (min-width: 1024px){.wrapper-big{padding:0 40px}}@media (min-width: 1280px){.wrapper-big{padding:0 20px}}@media (min-width: 1366px){.wrapper-big{padding:0 13px}}@media (min-width: 1680px){.wrapper-big{padding:0 40px}}@media (min-width: 1800px){.wrapper-big{padding:0 60px}}.wrapper-medium{max-width:100%;padding:0;min-width:-webkit-fill-available}@media (min-width: 540px){.wrapper-medium{padding:0 28px}}@media (min-width: 768px){.wrapper-medium{padding:0 45px}}@media (min-width: 1024px){.wrapper-medium{padding:0 55px}}@media (min-width: 1280px){.wrapper-medium{padding:0 59px}}@media (min-width: 1366px){.wrapper-medium{padding:0 65px}}@media (min-width: 1680px){.wrapper-medium{padding:0}}@media (min-width: 1800px){.wrapper-medium{padding:0}}.module-spacer--bottom{padding-bottom:35px}@media (min-width: 540px){.module-spacer--bottom{padding-bottom:40px}}@media (min-width: 768px){.module-spacer--bottom{padding-bottom:80px}}@media (min-width: 1680px){.module-spacer--bottom{padding-bottom:90px}}.module-spacer-small--bottom{padding-bottom:30px}@media (min-width: 540px){.module-spacer-small--bottom{padding-bottom:40px}}@media (min-width: 768px){.module-spacer-small--bottom{padding-bottom:50px}}@media (min-width: 1680px){.module-spacer-small--bottom{padding-bottom:50px}}@media (min-width: 1280px){.figure-sticky{position:sticky!important;top:8rem}}.figure-content{width:100%;aspect-ratio:1;display:flex;cursor:default;align-items:center;justify-content:center;position:relative;border-radius:.6rem;overflow:hidden}.figure-full{position:absolute;top:0;left:0;width:100%;height:100%;background-position:50% 50%;background-size:cover;background-repeat:no-repeat;margin:0;z-index:-1}.figure-zoom figure{-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.figure-zoom:hover figure{-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);transform:scale(1.1)}.slider-arrows--center .owl-nav{position:absolute;top:50%;width:106%;display:flex;justify-content:space-between;margin:0;left:50%;transform:translate(-50%) translateY(-50%);z-index:-1}.slider-arrows--center .owl-nav [class*=owl-]{background-color:transparent;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.slider-arrows--center .owl-nav [class*=owl-]:hover{background-color:transparent;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);transform:scale(1.5)}.slider-circle--center .owl-nav{position:absolute;top:50%;width:calc(100% - 240px);display:flex;justify-content:space-between;margin:0;left:120px;transform:translateY(-50%)}.slider-circle--center .owl-nav [class*=owl-]{background-color:#fff;border-radius:100%;padding:4px}.slider-circle--center .owl-nav [class*=owl-]:hover{background-color:#fff}@media (max-width: 767px){.slider-circle--center .owl-nav .btn__circle{width:38px;height:38px}}.slider-circle--center--centerFull .owl-nav{width:110%;left:-5%}.btn{cursor:pointer;font-family:var(--corp-font);-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.btn__light{border:2px solid var(--color-light-btn);color:var(--color-light-btn);background-color:transparent}.btn__light:hover{border:2px solid var(--color-line-light-btn-hover);background-color:var(--color-line-light-btn-hover);color:var(--color-light-btn-hover)}.btn__dark{border:2px solid var(--color-line-dark-btn);color:var(--color-dark-btn);background-color:var(--color-background)}.btn__dark:hover{border:2px solid var(--color-line-dark-btn-hover);background-color:var(--color-line-dark-btn-hover);color:var(--color-dark-btn-hover)}.btn__dark-white{border:2px solid var(--color-line-dark-btn);color:var(--color-dark-btn);background-color:transparent}.btn__dark-white:hover{border:2px solid white;background-color:#fff;color:var(--color-dark-btn-hover)}.btn__dark-filled{border:2px solid var(--color-line-dark-btn-filled);color:var(--color-dark-btn-filled);background-color:var(--color-line-dark-btn-filled)}.btn__dark-filled:hover{border:2px solid var(--color-line-dark-btn-filled-hover);background-color:var(--color-line-dark-btn-filled-hover);color:var(--color-dark-btn-filled-hover)}.btn__white{border:2px solid white;color:var(--color-dark-btn);background-color:var(--color-background)}.btn__white:hover{border:2px solid white;background-color:#fff;color:var(--color-dark-btn-hover)}.btn__laundry{border:2px solid #005f87;color:#005f87;background-color:var(--color-background);opacity:.5}.btn__laundry:hover{background-color:#005f87;color:#fff;opacity:1}.btn__circle-container{border-radius:50%;padding:6px}.btn__circle{width:40px;height:40px;border-radius:50%;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;text-align:center}.btn__circle--social-media{width:60px;height:60px;color:var(--color-social-media)}.btn__circle:hover--instagram{background-color:var(--color-instagram);color:var(--color-social-media)}.btn__circle:hover--tiktok,.btn__circle:hover--facebook,.btn__circle:hover--youtube,.btn__circle:hover--linkedin{color:var(--color-background)}.btn__circle:hover--tiktok{background-color:var(--color-tiktok)}.btn__circle:hover--facebook{background-color:var(--color-facebook)}.btn__circle:hover--youtube{background-color:var(--color-youtube)}.btn__circle:hover--linkedin{background-color:var(--color-linkedin)}.btn__circle-icon{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;font-size:22px}.btn__circle-icon.icon--size12{font-size:12px}.btn__box{width:var(--size-btn-box);height:50px;border-radius:6px;font-weight:700;font-size:19px;line-height:24.74px;text-align:center}.btn__box.btn-small{width:var(--size-btn-box-mobile)}@media (min-width: 540px){.btn__box.btn-small{width:var(--size-btn-box)}}.btn__box-container mat-icon{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap}.form-error{font-family:var(--tent-font);color:#df6a6a;font-size:13px}.invalid{margin-bottom:10px}@media (min-width: 768px){.tent-loyalty--content{padding-inline:70px}}.tent-loyalty--head{display:flex;align-items:center;justify-content:center;gap:10px;flex-direction:column;margin-bottom:30px;margin-top:30px}.tent-loyalty--head--tit{font-weight:700;text-align:center}.tent-loyalty--head--text{font-weight:400;text-align:center}.tent-loyalty--head .discount-loyalty{position:relative;display:flex;width:100%;justify-content:center;align-items:center;padding:20px 0}.tent-loyalty--head .discount-loyalty .texts-container{display:flex;align-items:end;justify-content:center;gap:10px;z-index:1;margin-bottom:10px}@media (max-width: 539px){.tent-loyalty--head .discount-loyalty .texts-container{align-items:center;flex-direction:column}}.tent-loyalty--head .discount-loyalty .img-container{position:absolute}@media (max-width: 539px){.tent-loyalty--head .discount-loyalty .img-container img{width:90vw}}.tent-loyalty--box{display:flex;align-items:center;flex-direction:column;border-radius:16px;margin-bottom:20px;transition:opacity .9s ease;cursor:pointer}.tent-loyalty--box--inner{display:flex;width:100%;justify-content:flex-start;align-items:flex-start;padding-block:20px;position:relative;flex-direction:column}.tent-loyalty--box--inner span{width:100%;font-size:48px}.tent-loyalty--box--inner span.loyalty-icon{height:70px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--color-background-3)}.tent-loyalty--box--inner span.loyalty-icon.color--brown{background-color:var(--color-background-10)}@media (max-width: 1365px){.tent-loyalty--box--inner span,.tent-loyalty--box--inner p{width:90%}.tent-loyalty--box--inner span.loyalty-icon,.tent-loyalty--box--inner p.loyalty-icon{width:80px}}@media (max-width: 1279px){.tent-loyalty--box--inner span,.tent-loyalty--box--inner p{width:90%}.tent-loyalty--box--inner span.loyalty-icon,.tent-loyalty--box--inner p.loyalty-icon{width:80px}}.tent-loyalty--box--title{display:flex;align-items:center;padding-inline:20px;width:calc(100% - 40px);gap:10px;position:relative;padding-bottom:10px;margin-bottom:10px}.tent-loyalty--box--title--level span{font-weight:700}.tent-loyalty--box--title:before{content:\"\";width:calc(100% - 40px);height:1px;display:block;position:absolute;left:20px;bottom:0;background-color:#ffffff80}.tent-loyalty--box--title.color--brown:before{background-color:#8a583677}.tent-loyalty--box--info{padding-left:110px;display:flex;flex-direction:column;align-items:flex-start}.tent-loyalty--box--info.hidden{display:none}@media (max-width: 1279px){.tent-loyalty--box--info span{width:100%}}@media (max-width: 767px){.tent-loyalty--box--info{flex-direction:column;align-items:center;gap:15px;width:100%;padding:0%}.tent-loyalty--box--info span,.tent-loyalty--box--info p{width:100%;text-align:center}}@media (max-width: 539px){.tent-loyalty--box--info{padding-left:0;display:flex;align-items:center;justify-content:center;width:100%}}.tent-loyalty--box .tent-loyalty--btn-arrow{margin-right:0;position:absolute;right:10px}.tent-loyalty--box .tent-loyalty--btn-arrow.reverse{transform:rotate(180deg)}.tent-loyalty--box .tent-loyalty--btn-arrow ::ng-deep button{background-color:#fff;border-color:#fff}.tent-loyalty--box .tent-loyalty--btn-arrow ::ng-deep:hover button{background-color:var(--color-title-2)}.tent-loyalty--box--list{display:flex;flex-wrap:wrap;padding-bottom:20px;max-width:max-content;width:90%;align-items:center;justify-content:center;gap:20px;display:none}.tent-loyalty--box--list li{background-color:#fff;border-radius:16px;padding:20px;width:100%;flex-direction:column;align-items:center}.tent-loyalty--box--item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:20px;text-align:center}.tent-loyalty--box--item--icon{font-size:60px;width:60px;height:60px;background-color:var(--color-background-6);-webkit-mask-size:contain;mask-size:contain}.tent-loyalty--box--item .text{text-align:center}.tent-loyalty--box.open .tent-loyalty--box--list{display:flex}.tent-loyalty--box.open .tent-loyalty--box--title:before{display:none!important}@media (min-width: 768px){.tent-loyalty--box--list{align-items:stretch;justify-content:space-between;padding-bottom:30px;min-width:90%}.tent-loyalty--box--list li{width:calc(50% - 50px)}.tent-loyalty--box--list li.first-item-big{width:100%}}@media (min-width: 1280px){.tent-loyalty--box--inner{flex-direction:row;align-items:center;padding-block:30px}.tent-loyalty--box--title{width:auto;gap:40px;padding-right:40px;padding-bottom:0;margin-bottom:0;padding-inline:30px}.tent-loyalty--box--title:before{height:100%;width:1px;right:0;top:0;left:auto}.tent-loyalty--box--title span{width:120px}.tent-loyalty--box--info{padding-left:40px}.tent-loyalty--box .tent-loyalty--btn-arrow{right:40px}.tent-loyalty--box--item--icon{font-size:80px;width:100px;height:100px;background-color:var(--color-background-6);-webkit-mask-size:contain;mask-size:contain}.tent-loyalty--box--list{width:calc(100% - 140px);min-width:calc(100% - 140px)}.tent-loyalty--box--list li{width:calc(33% - 60px);min-height:190px;align-items:center;justify-content:center;display:flex}.tent-loyalty--box--list li.first-item-big{width:calc(33% - 60px)}}@media (min-width: 540px){.tent-loyalty .tent-loyalty--info--text.text{line-height:24px;bottom:5px;position:relative}}@media (max-width: 374px){.tent-loyalty .tent-loyalty--info--text.text{width:40%}}@media (min-width: 1024px){.tent-loyalty .without-label{display:none}}@media (max-width: 1023px){.tent-loyalty .without-label{display:block}}@media (min-width: 1024px){.tent-loyalty .with-label{display:block}}@media (max-width: 1023px){.tent-loyalty .with-label{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "tent-button", inputs: ["type", "label", "url", "linkType", "icon", "socialMedia", "iconPosition", "boxWidth", "innerContent", "linkSizeIcon", "closeButton", "disabled", "name"], outputs: ["btnClick"] }] }); }
|
|
3877
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TentLoyaltyComponent, isStandalone: true, selector: "lib-tent-loyalty", inputs: { id: "id", title: "title", subtitle: "subtitle", percentage: "percentage", percentagetext1: "percentagetext1", percentagetext2: "percentagetext2", loyalties: "loyalties" }, ngImport: i0, template: "<section\n class=\"tent-loyalty wrapper-big\"\n [ngClass]=\"{ 'module-spacer--bottom': id == 3 }\"\n>\n <div class=\"tent-loyalty--content\">\n @switch (id) {\n @case (0) {\n <div class=\"tent-loyalty--head\">\n @if (title) {\n <h2\n class=\"tent-loyalty--head--tit title--42 color--brown\"\n >\n {{ title }}\n </h2>\n }\n @if (subtitle) {\n <p class=\"tent-loyalty--head--text text\">\n {{ subtitle }}\n </p>\n }\n @if (percentage || percentagetext1 || percentagetext2) {\n <div class=\"discount-loyalty\">\n <div class=\"texts-container\">\n @if (percentagetext1) {\n <p\n class=\"text color--brown\"\n [innerHTML]=\"percentagetext1\"\n ></p>\n }\n @if (percentage) {\n <h2\n class=\"title--42 color--brown\"\n [innerHTML]=\"percentage\"\n ></h2>\n }\n @if (percentagetext2) {\n <p\n class=\"text color--brown\"\n [innerHTML]=\"percentagetext2\"\n ></p>\n }\n </div>\n <div class=\"img-container\">\n <img\n src=\"/assets/tent/img/loyalty-discount-bg.svg\"\n alt=\"left\"\n loading=\"lazy\"\n class=\"location-how--iconactive\"\n />\n </div>\n </div>\n }\n </div>\n }\n @case (1) {\n <div\n class=\"tent-loyalty--box bg-yellow\"\n [ngClass]=\"collapsed ? 'close' : 'open'\"\n (click)=\"toggleCollapse($event)\"\n >\n <div class=\"tent-loyalty--box--inner\">\n <h3\n class=\"tent-loyalty--box--title title--42 color--brown\"\n >\n @if (loyalties?.icon) {\n <span\n class=\"loyalty-icon color--brown\"\n [ngClass]=\"'icon-' + loyalties?.icon\"\n ></span>\n }\n @if (loyalties?.levelName) {\n <div class=\"tent-loyalty--box--title--level\">\n <span class=\"text color--brown\">\n {{ loyalties?.levelName }}\n </span>\n @if (loyalties?.levelSubtitle) {\n <p\n class=\"tent-loyalty--info--text text color--brown\"\n [ngClass]=\"\n !collapsed\n ? 'visible'\n : 'hidden'\n \"\n >\n {{ loyalties?.levelSubtitle }}\n </p>\n }\n </div>\n }\n </h3>\n <div\n class=\"tent-loyalty--box--info\"\n [ngClass]=\"collapsed ? 'visible' : 'hidden'\"\n >\n @if (loyalties?.discount) {\n <span\n class=\"tent-loyalty--box--info--num title--42 color--brown\"\n >{{ loyalties?.discount }}</span\n >\n }\n @if (loyalties?.advantages) {\n <p\n class=\"tent-loyalty--info--text text color--brown\"\n >\n {{ loyalties?.advantages }}\n </p>\n }\n </div>\n @if (collapsed) {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seemore ?? '+'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow reverse without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n } @else {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seeless ?? '-'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n }\n </div>\n <ul class=\"tent-loyalty--box--list\">\n @if (loyalties?.items?.length) {\n @for (item of loyalties?.items; track $index) {\n <li\n [ngClass]=\"\n loyalties?.items?.length == 3 &&\n $index == 0\n ? 'first-item-big'\n : ''\n \"\n >\n <p\n class=\"tent-loyalty--box--item color--brown\"\n >\n @if (item.icon) {\n <span\n class=\"tent-loyalty--box--item--icon\"\n [class]=\"'icon-' + item.icon\"\n ></span>\n }\n @if (item.title) {\n <span class=\"text color--brown\">{{\n item.title\n }}</span>\n }\n @if (item.text) {\n <span\n class=\"text--small color--brown\"\n [innerHTML]=\"item.text\"\n ></span>\n }\n </p>\n </li>\n }\n }\n </ul>\n </div>\n }\n @case (2) {\n <div\n class=\"tent-loyalty--box bg-orange\"\n [ngClass]=\"collapsed ? 'close' : 'open'\"\n (click)=\"toggleCollapse($event)\"\n >\n <div class=\"tent-loyalty--box--inner\">\n <h3\n class=\"tent-loyalty--box--title title--42 color--white\"\n >\n @if (loyalties?.icon) {\n <span\n class=\"loyalty-icon\"\n [ngClass]=\"'icon-' + loyalties?.icon\"\n ></span>\n }\n @if (loyalties?.levelName) {\n <div class=\"tent-loyalty--box--title--level\">\n <span class=\"text color--white\">\n {{ loyalties?.levelName }}\n </span>\n @if (loyalties?.levelSubtitle) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n [ngClass]=\"\n !collapsed\n ? 'visible'\n : 'hidden'\n \"\n >\n {{ loyalties?.levelSubtitle }}\n </p>\n }\n </div>\n }\n </h3>\n <div\n class=\"tent-loyalty--box--info\"\n [ngClass]=\"collapsed ? 'visible' : 'hidden'\"\n >\n @if (loyalties?.discount) {\n <span\n class=\"tent-loyalty--box--info--num title--42 color--white\"\n >{{ loyalties?.discount }}</span\n >\n }\n @if (loyalties?.advantages) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n >\n {{ loyalties?.advantages }}\n </p>\n }\n </div>\n @if (collapsed) {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seemore ?? '+'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow reverse without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n } @else {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seeless ?? '-'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n }\n </div>\n <ul class=\"tent-loyalty--box--list\">\n @if (loyalties?.items?.length) {\n @for (item of loyalties?.items; track $index) {\n <li>\n <p\n class=\"tent-loyalty--box--item color--brown\"\n >\n @if (item.icon) {\n <span\n class=\"tent-loyalty--box--item--icon\"\n [class]=\"'icon-' + item.icon\"\n ></span>\n }\n @if (item.title) {\n <span class=\"text color--brown\">{{\n item.title\n }}</span>\n }\n @if (item.text) {\n <span\n class=\"text--small color--brown\"\n [innerHTML]=\"item.text\"\n ></span>\n }\n </p>\n </li>\n }\n }\n </ul>\n </div>\n }\n @case (3) {\n <div\n class=\"tent-loyalty--box bg-brown\"\n [ngClass]=\"collapsed ? 'close' : 'open'\"\n (click)=\"toggleCollapse($event)\"\n >\n <div class=\"tent-loyalty--box--inner\">\n <h3\n class=\"tent-loyalty--box--title title--42 color--white\"\n >\n @if (loyalties?.icon) {\n <span\n class=\"loyalty-icon\"\n [ngClass]=\"'icon-' + loyalties?.icon\"\n ></span>\n }\n @if (loyalties?.levelName) {\n <div class=\"tent-loyalty--box--title--level\">\n <span class=\"text color--white\">\n {{ loyalties?.levelName }}\n </span>\n @if (loyalties?.levelSubtitle) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n [ngClass]=\"\n !collapsed\n ? 'visible'\n : 'hidden'\n \"\n >\n {{ loyalties?.levelSubtitle }}\n </p>\n }\n </div>\n }\n </h3>\n <div\n class=\"tent-loyalty--box--info\"\n [ngClass]=\"collapsed ? 'visible' : 'hidden'\"\n >\n @if (loyalties?.discount) {\n <span\n class=\"tent-loyalty--box--info--num title--42 color--white\"\n >{{ loyalties?.discount }}</span\n >\n }\n @if (loyalties?.advantages) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n >\n {{ loyalties?.advantages }}\n </p>\n }\n </div>\n @if (collapsed) {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seemore ?? '+'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow reverse without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n } @else {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seeless ?? '-'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n }\n </div>\n <ul class=\"tent-loyalty--box--list\">\n @if (loyalties?.items?.length) {\n @for (item of loyalties?.items; track $index) {\n <li>\n <p\n class=\"tent-loyalty--box--item color--brown\"\n >\n @if (item.icon) {\n <span\n class=\"tent-loyalty--box--item--icon\"\n [class]=\"'icon-' + item.icon\"\n ></span>\n }\n @if (item.title) {\n <span class=\"text color--brown\">{{\n item.title\n }}</span>\n }\n @if (item.text) {\n <span\n class=\"text--small color--brown\"\n [innerHTML]=\"item.text\"\n >{{ item.text }}</span\n >\n }\n </p>\n </li>\n }\n }\n </ul>\n </div>\n }\n }\n </div>\n</section>\n", styles: [":root{--tent-font: \"DM Sans\", sans-serif;--color-background: #fff;--color-background-2: #fbf5f0;--color-background-3: #f6ece2;--color-background-4: #eaaa00;--color-background-5: #dc572a;--color-background-6: #7c4d3b;--color-background-6-90: rgb(124 77 59 / 90%);--color-background-7: #005f87;--color-background-8: #dab38c;--color-background-9: #c7946a;--color-title: #dab38d;--color-title-1: #693d2d;--color-title-2: rgb(105 61 45 / 90%);--color-title-4: rgb(105 61 45 / 70%);--color-title-3: #0cc2ce;--color-title-light: #fff;--color-subtitle: #c1885b;--color-subtitle-light: #fff;--color-description: #5d5d5d;--color-description-light: #fff;--color-description-brown-light: rgb(105 61 45 / 80%);--color-description-brown: rgb(105 61 45 / 100%);--color-badge: #dc572a;--color-badge-2: #fdd8b4;--color-badge-3: #dab38d;--color-badge-4: #f3e2d5;--color-badge-5: #fff;--color-badge-box: #e37955;--color-badge-box-hover: #d9603e;--color-dark-btn: rgb(124 77 58 / 70%);--color-dark-btn-hover: #7c4d3a;--color-line-dark-btn: rgb(124 77 58 / 70%);--color-line-dark-btn-hover: #dab38d;--color-dark-btn-filled: #693d2d;--color-dark-btn-filled-hover: #fff;--color-line-dark-btn-filled: #dab38d;--color-line-dark-btn-filled-hover: #dc572a;--color-light-btn: #fff;--color-light-btn-hover: #693d2d;--color-line-light-btn-hover: #dab38d;--size-icon-links: 12px;--size-btn-box: 308px;--size-btn-box-mobile: 250px;--color-link-brown-light: rgb(105 61 45 / 70%);--color-link-brown-light2: rgb(105 61 45 / 80%);--color-link-brown-dark: #693d2d;--color-social-media: #693d3d;--color-instagram: #dab38d;--color-tiktok: #ed4a73;--color-facebook: #2764c1;--color-youtube: #d9464b;--color-linkedin: #2376c9;--color-background-footer1: rgb(135 136 138 / 75%);--color-background-footer2: rgb(221 187 156 / 80%);--color-check-in: #e78a6a;--color-check-in-hover: #d9603e;--color-border-header: #e1d8d5;--color-linea-brown-light: rgb(124 77 58 / 50%);--color-linea-brown-light2: rgb(124 77 58 / 20%);--color-icon: #693e2e;--color-icon-light: : rgb(105 61 45 / 70%);--Ltransition: all cubic-bezier(.785, .135, .15, .86) 1s;--Mtransition: all cubic-bezier(.785, .135, .15, .86) .85s;--stransition-basic: all cubic-bezier(.785, .135, .15, .86) .7s;--SStransition: all cubic-bezier(.785, .135, .15, .86) .3s;--XStransition: all cubic-bezier(.785, .135, .15, .86) 0s}.link{font-family:var(--tent-font);text-decoration:none;font-size:16px;font-weight:400;color:var(--color-description);letter-spacing:0;line-height:146.1538461538%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);position:relative;cursor:pointer}.link:after{content:\"\";width:0%;height:1px;position:absolute;bottom:-2px;left:0;background-color:var(--color-description);-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.link:hover{color:var(--color-description)}.link:hover:after{width:100%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.link--brown{color:var(--color-link-brown-light2)}.link--brown:after{background-color:var(--color-link-brown-light2)}.link--brown:hover{color:var(--color-link-brown-dark)}.link--brown:hover:after{background-color:var(--color-link-brown-dark)}.link-opacity{font-family:var(--tent-font);text-decoration:none;font-size:16px;font-weight:400;color:var(--color-description);letter-spacing:0;line-height:146.1538461538%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);position:relative;opacity:.7;cursor:pointer}.link-opacity:hover{opacity:1}.link-regular{font-family:var(--tent-font);text-decoration:none;font-size:18px;font-weight:400;color:var(--color-description);line-height:146.1538461538%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);position:relative;cursor:pointer}.link-regular:hover{text-decoration:underline}@media (min-width: 540px){.link-regular{font-size:20px;line-height:34px}}.text{font-family:var(--tent-font);font-size:18px;line-height:24px;color:var(--color-description);text-align:left;font-weight:400}@media (min-width: 540px){.text{font-size:20px;line-height:34px}}.text--light{color:var(--color-description-light)}.text--small,.text--18{font-size:16px}.text strong{font-weight:700}.title--18{font-weight:700;font-size:14px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--18{font-size:16px}}@media (min-width: 768px){.title--18{font-size:16px}}@media (min-width: 1024px){.title--18{font-size:18px}}@media (min-width: 1680px){.title--18{font-size:18px}}.title--24{font-weight:700;font-size:24px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--24{font-size:24px}}@media (min-width: 768px){.title--24{font-size:24px}}@media (min-width: 1024px){.title--24{font-size:24px}}@media (min-width: 1280px){.title--24{font-size:24px}}@media (min-width: 1366px){.title--24{font-size:24px}}@media (min-width: 1680px){.title--24{font-size:24px}}@media (min-width: 1800px){.title--24{font-size:24px}}.title--30{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:0}@media (max-width: 374px){.title--30{font-size:24px}}.title--34{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--34{font-size:32px}}@media (min-width: 768px){.title--34{font-size:32px}}@media (min-width: 1680px){.title--34{font-size:34px}}.title--38{font-weight:700;font-size:26px;line-height:1.5;letter-spacing:0}@media (min-width: 540px){.title--38{font-size:28px}}@media (min-width: 768px){.title--38{font-size:36px}}@media (min-width: 1680px){.title--38{font-size:38px}}.title--42{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--42{font-size:32px}}@media (min-width: 768px){.title--42{font-size:42px}}@media (min-width: 1680px){.title--42{font-size:42px}}.title--54{font-weight:700;font-size:32px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--54{font-size:44px}}@media (min-width: 1680px){.title--54{font-size:54px}}.title--60{font-weight:700;font-size:32px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--60{font-size:44px;line-height:1}}@media (min-width: 768px){.title--60{font-size:50px}}@media (min-width: 1680px){.title--60{font-size:60px}}.title--80{font-weight:700;font-size:40px;line-height:1;letter-spacing:0}@media (min-width: 540px){.title--80{font-size:50px}}@media (min-width: 768px){.title--80{font-size:60px}}@media (min-width: 1024px){.title--80{font-size:60px}}@media (min-width: 1280px){.title--80{font-size:70px}}@media (min-width: 1366px){.title--80{font-size:70px}}@media (min-width: 1680px){.title--80{font-size:80px}}.title--100{font-weight:700;font-size:40px;line-height:1;letter-spacing:0}@media (min-width: 540px){.title--100{font-size:55px}}@media (min-width: 768px){.title--100{font-size:80px}}@media (min-width: 1024px){.title--100{font-size:80px}}@media (min-width: 1280px){.title--100{font-size:90px}}@media (min-width: 1366px){.title--100{font-size:90px}}@media (min-width: 1680px){.title--100{font-size:110px}}.subtitle{font-family:var(--tent-font);font-weight:700;font-size:24px;line-height:44px;letter-spacing:0;text-align:left;color:var(--color-subtitle)}.subtitle.light{color:var(--color-subtitle-light)}.subtitle--medium{font-weight:500;font-size:18px;line-height:1.2;color:var(--color-subtitle-light)}@media (min-width: 768px){.subtitle--medium{font-size:20px}}.bg-yellow{background-color:var(--color-background-4)}.bg-orange{background-color:var(--color-background-5)}.bg-brown{background-color:var(--color-background-6)}.bg-brown-90{background-color:var(--color-background-6-90)}.bg-blue{background-color:var(--color-background-7)}.bg-camel{background-color:var(--color-background-8)}.bg-beige{background-color:var(--color-background-3)}.bg-beige{background-color:var(--color-background-2)}.bg-white{background-color:#fff}.color--brown-dark{color:var(--color-title-1)}.color--brown{color:var(--color-title-2)}.color--brown-70{color:var(--color-title-4)}.color--camel{color:var(--color-title)}.color--white{color:#fff}.color--blue{color:var(--color-title-3)}.color--gray{color:var(--color-description)}.flex-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}.flex-row--reverse{flex-direction:row-reverse}.flex-row--center{align-items:center;justify-content:center}.flex-row--between{align-items:center;justify-content:space-between}.flex-row--left{align-items:center;justify-content:flex-start}@media (max-width: 1023px){.flex-row--left{justify-content:center}}.flex-col{display:flex;flex-direction:column;flex-wrap:wrap;gap:10px}.flex-col--reverse{flex-direction:row-reverse}.flex-col--center{align-items:center;justify-content:center}.mt--0{margin-top:0}.mb--0{margin-bottom:0}.pt--0{padding-top:0}.pb--0{padding-bottom:0}.mt--10{margin-top:10px}.mb--10{margin-bottom:10px}.pt--10{padding-top:10px}.pb--10{padding-bottom:10px}.mt--20{margin-top:20px}.mb--20{margin-bottom:20px}.pt--20{padding-top:20px}.pb--20{padding-bottom:20px}.mt--25{margin-top:25px}.mb--25{margin-bottom:25px}.pt--25{padding-top:25px}.pb--25{padding-bottom:25px}.mt--30{margin-top:30px}.mb--30{margin-bottom:30px}.pt--30{padding-top:30px}.pb--30{padding-bottom:30px}.mt--40{margin-top:40px}.mb--40{margin-bottom:40px}.pt--40{padding-top:40px}.pb--40{padding-bottom:40px}.mt--50{margin-top:50px}.mb--50{margin-bottom:50px}.pt--50{padding-top:50px}.pb--50{padding-bottom:50px}.mt--60{margin-top:60px}.mb--60{margin-bottom:60px}.pt--60{padding-top:60px}.pb--60{padding-bottom:60px}.mt--70{margin-top:70px}.mb--70{margin-bottom:70px}.pt--70{padding-top:70px}.pb--70{padding-bottom:70px}.mt--80{margin-top:80px}.mb--80{margin-bottom:80px}.pt--80{padding-top:80px}.pb--80{padding-bottom:80px}.mt--90{margin-top:90px}.mb--90{margin-bottom:90px}.pt--90{padding-top:90px}.pb--90{padding-bottom:90px}.mt--100{margin-top:100px}.mb--100{margin-bottom:100px}.pt--100{padding-top:100px}.pb--100{padding-bottom:100px}.wrapper-big{max-width:100%;padding:0}@media (min-width: 540px){.wrapper-big{padding:0}}@media (min-width: 768px){.wrapper-big{padding:0}}@media (min-width: 1024px){.wrapper-big{padding:0 40px}}@media (min-width: 1280px){.wrapper-big{padding:0 20px}}@media (min-width: 1366px){.wrapper-big{padding:0 13px}}@media (min-width: 1680px){.wrapper-big{padding:0 40px}}@media (min-width: 1800px){.wrapper-big{padding:0 60px}}.wrapper-medium{max-width:100%;padding:0;min-width:-webkit-fill-available}@media (min-width: 540px){.wrapper-medium{padding:0 28px}}@media (min-width: 768px){.wrapper-medium{padding:0 45px}}@media (min-width: 1024px){.wrapper-medium{padding:0 55px}}@media (min-width: 1280px){.wrapper-medium{padding:0 59px}}@media (min-width: 1366px){.wrapper-medium{padding:0 65px}}@media (min-width: 1680px){.wrapper-medium{padding:0}}@media (min-width: 1800px){.wrapper-medium{padding:0}}.module-spacer--bottom{padding-bottom:35px}@media (min-width: 540px){.module-spacer--bottom{padding-bottom:40px}}@media (min-width: 768px){.module-spacer--bottom{padding-bottom:80px}}@media (min-width: 1680px){.module-spacer--bottom{padding-bottom:90px}}.module-spacer-small--bottom{padding-bottom:30px}@media (min-width: 540px){.module-spacer-small--bottom{padding-bottom:40px}}@media (min-width: 768px){.module-spacer-small--bottom{padding-bottom:50px}}@media (min-width: 1680px){.module-spacer-small--bottom{padding-bottom:50px}}@media (min-width: 1280px){.figure-sticky{position:sticky!important;top:8rem}}.figure-content{width:100%;aspect-ratio:1;display:flex;cursor:default;align-items:center;justify-content:center;position:relative;border-radius:.6rem;overflow:hidden}.figure-full{position:absolute;top:0;left:0;width:100%;height:100%;background-position:50% 50%;background-size:cover;background-repeat:no-repeat;margin:0;z-index:-1}.figure-zoom figure{-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.figure-zoom:hover figure{-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);transform:scale(1.1)}.slider-arrows--center .owl-nav{position:absolute;top:50%;width:106%;display:flex;justify-content:space-between;margin:0;left:50%;transform:translate(-50%) translateY(-50%);z-index:-1}.slider-arrows--center .owl-nav [class*=owl-]{background-color:transparent;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.slider-arrows--center .owl-nav [class*=owl-]:hover{background-color:transparent;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);transform:scale(1.5)}.slider-circle--center .owl-nav{position:absolute;top:50%;width:calc(100% - 240px);display:flex;justify-content:space-between;margin:0;left:120px;transform:translateY(-50%)}.slider-circle--center .owl-nav [class*=owl-]{background-color:#fff;border-radius:100%;padding:4px}.slider-circle--center .owl-nav [class*=owl-]:hover{background-color:#fff}@media (max-width: 767px){.slider-circle--center .owl-nav .btn__circle{width:38px;height:38px}}.slider-circle--center--centerFull .owl-nav{width:110%;left:-5%}.btn{cursor:pointer;font-family:var(--corp-font);-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.btn__light{border:2px solid var(--color-light-btn);color:var(--color-light-btn);background-color:transparent}.btn__light:hover{border:2px solid var(--color-line-light-btn-hover);background-color:var(--color-line-light-btn-hover);color:var(--color-light-btn-hover)}.btn__dark{border:2px solid var(--color-line-dark-btn);color:var(--color-dark-btn);background-color:var(--color-background)}.btn__dark:hover{border:2px solid var(--color-line-dark-btn-hover);background-color:var(--color-line-dark-btn-hover);color:var(--color-dark-btn-hover)}.btn__dark-white{border:2px solid var(--color-line-dark-btn);color:var(--color-dark-btn);background-color:transparent}.btn__dark-white:hover{border:2px solid white;background-color:#fff;color:var(--color-dark-btn-hover)}.btn__dark-filled{border:2px solid var(--color-line-dark-btn-filled);color:var(--color-dark-btn-filled);background-color:var(--color-line-dark-btn-filled)}.btn__dark-filled:hover{border:2px solid var(--color-line-dark-btn-filled-hover);background-color:var(--color-line-dark-btn-filled-hover);color:var(--color-dark-btn-filled-hover)}.btn__white{border:2px solid white;color:var(--color-dark-btn);background-color:var(--color-background)}.btn__white:hover{border:2px solid white;background-color:#fff;color:var(--color-dark-btn-hover)}.btn__laundry{border:2px solid #005f87;color:#005f87;background-color:var(--color-background);opacity:.5}.btn__laundry:hover{background-color:#005f87;color:#fff;opacity:1}.btn__circle-container{border-radius:50%;padding:6px}.btn__circle{width:40px;height:40px;border-radius:50%;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;text-align:center}.btn__circle--social-media{width:60px;height:60px;color:var(--color-social-media)}.btn__circle:hover--instagram{background-color:var(--color-instagram);color:var(--color-social-media)}.btn__circle:hover--tiktok,.btn__circle:hover--facebook,.btn__circle:hover--youtube,.btn__circle:hover--linkedin{color:var(--color-background)}.btn__circle:hover--tiktok{background-color:var(--color-tiktok)}.btn__circle:hover--facebook{background-color:var(--color-facebook)}.btn__circle:hover--youtube{background-color:var(--color-youtube)}.btn__circle:hover--linkedin{background-color:var(--color-linkedin)}.btn__circle-icon{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;font-size:22px}.btn__circle-icon.icon--size12{font-size:12px}.btn__box{width:var(--size-btn-box);height:50px;border-radius:6px;font-weight:700;font-size:19px;line-height:24.74px;text-align:center}.btn__box.btn-small{width:var(--size-btn-box-mobile)}@media (min-width: 540px){.btn__box.btn-small{width:var(--size-btn-box)}}.btn__box-container mat-icon{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap}.form-error{font-family:var(--tent-font);color:#df6a6a;font-size:13px}.invalid{margin-bottom:10px}@media (min-width: 768px){.tent-loyalty--content{padding-inline:70px}}.tent-loyalty--head{display:flex;align-items:center;justify-content:center;gap:10px;flex-direction:column;margin-bottom:30px;margin-top:30px}.tent-loyalty--head--tit{font-weight:700;text-align:center}.tent-loyalty--head--text{font-weight:400;text-align:center}.tent-loyalty--head .discount-loyalty{position:relative;display:flex;width:100%;justify-content:center;align-items:center;padding:20px 0}.tent-loyalty--head .discount-loyalty .texts-container{display:flex;align-items:end;justify-content:center;gap:10px;z-index:1;margin-bottom:10px}@media (max-width: 539px){.tent-loyalty--head .discount-loyalty .texts-container{align-items:center;flex-direction:column}}.tent-loyalty--head .discount-loyalty .img-container{position:absolute}@media (max-width: 539px){.tent-loyalty--head .discount-loyalty .img-container img{width:90vw}}.tent-loyalty--box{display:flex;align-items:center;flex-direction:column;border-radius:16px;margin-bottom:20px;transition:opacity .9s ease;cursor:pointer}.tent-loyalty--box--inner{display:flex;width:100%;justify-content:flex-start;align-items:flex-start;padding-block:20px;position:relative;flex-direction:column}.tent-loyalty--box--inner span{width:100%;font-size:48px}.tent-loyalty--box--inner span.loyalty-icon{height:70px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--color-background-3)}.tent-loyalty--box--inner span.loyalty-icon.color--brown{background-color:var(--color-background-10)}@media (max-width: 1365px){.tent-loyalty--box--inner span,.tent-loyalty--box--inner p{width:90%}.tent-loyalty--box--inner span.loyalty-icon,.tent-loyalty--box--inner p.loyalty-icon{width:80px}}@media (max-width: 1279px){.tent-loyalty--box--inner span,.tent-loyalty--box--inner p{width:90%}.tent-loyalty--box--inner span.loyalty-icon,.tent-loyalty--box--inner p.loyalty-icon{width:80px}}.tent-loyalty--box--title{display:flex;align-items:center;padding-inline:20px;width:calc(100% - 40px);gap:10px;position:relative;padding-bottom:10px;margin-bottom:10px}.tent-loyalty--box--title--level span{font-weight:700}.tent-loyalty--box--title:before{content:\"\";width:calc(100% - 40px);height:1px;display:block;position:absolute;left:20px;bottom:0;background-color:#ffffff80}.tent-loyalty--box--title.color--brown:before{background-color:#8a583677}.tent-loyalty--box--info{padding-left:110px;display:flex;flex-direction:column;align-items:flex-start}.tent-loyalty--box--info.hidden{display:none}@media (max-width: 1279px){.tent-loyalty--box--info span{width:100%}}@media (max-width: 767px){.tent-loyalty--box--info{flex-direction:column;align-items:center;gap:15px;width:100%;padding:0%}.tent-loyalty--box--info span,.tent-loyalty--box--info p{width:100%;text-align:center}}@media (max-width: 539px){.tent-loyalty--box--info{padding-left:0;display:flex;align-items:center;justify-content:center;width:100%}}.tent-loyalty--box .tent-loyalty--btn-arrow{margin-right:0;position:absolute;right:10px}.tent-loyalty--box .tent-loyalty--btn-arrow.reverse{transform:rotate(180deg)}.tent-loyalty--box .tent-loyalty--btn-arrow ::ng-deep button{background-color:#fff;border-color:#fff}.tent-loyalty--box .tent-loyalty--btn-arrow ::ng-deep:hover button{background-color:var(--color-title-2)}.tent-loyalty--box--list{display:flex;flex-wrap:wrap;padding-bottom:20px;max-width:max-content;width:90%;align-items:center;justify-content:center;gap:20px;display:none}.tent-loyalty--box--list li{background-color:#fff;border-radius:16px;padding:20px;width:100%;flex-direction:column;align-items:center}.tent-loyalty--box--item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:20px;text-align:center}.tent-loyalty--box--item--icon{font-size:60px;width:60px;height:60px;background-color:var(--color-background-6);-webkit-mask-size:contain;mask-size:contain}.tent-loyalty--box--item .text{text-align:center}.tent-loyalty--box.open .tent-loyalty--box--list{display:flex}.tent-loyalty--box.open .tent-loyalty--box--title:before{display:none!important}@media (min-width: 768px){.tent-loyalty--box--list{align-items:stretch;justify-content:space-between;padding-bottom:30px;min-width:90%}.tent-loyalty--box--list li{width:calc(50% - 50px)}.tent-loyalty--box--list li.first-item-big{width:100%}}@media (min-width: 1280px){.tent-loyalty--box--inner{flex-direction:row;align-items:center;padding-block:30px}.tent-loyalty--box--title{width:auto;gap:40px;padding-right:40px;padding-bottom:0;margin-bottom:0;padding-inline:30px}.tent-loyalty--box--title:before{height:100%;width:1px;right:0;top:0;left:auto}.tent-loyalty--box--title span{width:120px}.tent-loyalty--box--info{padding-left:40px}.tent-loyalty--box .tent-loyalty--btn-arrow{right:40px}.tent-loyalty--box--item--icon{font-size:80px;width:100px;height:100px;background-color:var(--color-background-6);-webkit-mask-size:contain;mask-size:contain}.tent-loyalty--box--list{width:calc(100% - 140px);min-width:calc(100% - 140px)}.tent-loyalty--box--list li{width:calc(33% - 60px);min-height:190px;align-items:center;justify-content:center;display:flex}.tent-loyalty--box--list li.first-item-big{width:calc(33% - 60px)}}@media (min-width: 540px){.tent-loyalty .tent-loyalty--info--text.text{line-height:40px;bottom:5px;position:relative}}@media (max-width: 374px){.tent-loyalty .tent-loyalty--info--text.text{width:40%}}@media (min-width: 1024px){.tent-loyalty .without-label{display:none}}@media (max-width: 1023px){.tent-loyalty .without-label{display:block}}@media (min-width: 1024px){.tent-loyalty .with-label{display:block}}@media (max-width: 1023px){.tent-loyalty .with-label{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "tent-button", inputs: ["type", "label", "url", "linkType", "icon", "socialMedia", "iconPosition", "boxWidth", "innerContent", "linkSizeIcon", "closeButton", "disabled", "name"], outputs: ["btnClick"] }] }); }
|
|
3878
3878
|
}
|
|
3879
3879
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TentLoyaltyComponent, decorators: [{
|
|
3880
3880
|
type: Component,
|
|
3881
|
-
args: [{ selector: 'lib-tent-loyalty', standalone: true, imports: [CommonModule, ButtonComponent], template: "<section\n class=\"tent-loyalty wrapper-big\"\n [ngClass]=\"{ 'module-spacer--bottom': id == 3 }\"\n>\n <div class=\"tent-loyalty--content\">\n @switch (id) {\n @case (0) {\n <div class=\"tent-loyalty--head\">\n @if (title) {\n <h2\n class=\"tent-loyalty--head--tit title--42 color--brown\"\n >\n {{ title }}\n </h2>\n }\n @if (subtitle) {\n <p class=\"tent-loyalty--head--text text\">\n {{ subtitle }}\n </p>\n }\n @if (percentage || percentagetext1 || percentagetext2) {\n <div class=\"discount-loyalty\">\n <div class=\"texts-container\">\n @if (percentagetext1) {\n <p\n class=\"text color--brown\"\n [innerHTML]=\"percentagetext1\"\n ></p>\n }\n @if (percentage) {\n <h2\n class=\"title--42 color--brown\"\n [innerHTML]=\"percentage\"\n ></h2>\n }\n @if (percentagetext2) {\n <p\n class=\"text color--brown\"\n [innerHTML]=\"percentagetext2\"\n ></p>\n }\n </div>\n <div class=\"img-container\">\n <img\n src=\"/assets/tent/img/loyalty-discount-bg.svg\"\n alt=\"left\"\n loading=\"lazy\"\n class=\"location-how--iconactive\"\n />\n </div>\n </div>\n }\n </div>\n }\n @case (1) {\n <div\n class=\"tent-loyalty--box bg-yellow\"\n [ngClass]=\"collapsed ? 'close' : 'open'\"\n (click)=\"toggleCollapse($event)\"\n >\n <div class=\"tent-loyalty--box--inner\">\n <h3\n class=\"tent-loyalty--box--title title--42 color--brown\"\n >\n @if (loyalties?.icon) {\n <span\n class=\"loyalty-icon color--brown\"\n [ngClass]=\"'icon-' + loyalties?.icon\"\n ></span>\n }\n @if (loyalties?.levelName) {\n <div class=\"tent-loyalty--box--title--level\">\n <span class=\"text color--brown\">\n {{ loyalties?.levelName }}\n </span>\n @if (loyalties?.levelSubtitle) {\n <p\n class=\"tent-loyalty--info--text text color--brown\"\n [ngClass]=\"\n !collapsed\n ? 'visible'\n : 'hidden'\n \"\n >\n {{ loyalties?.levelSubtitle }}\n </p>\n }\n </div>\n }\n </h3>\n <div\n class=\"tent-loyalty--box--info\"\n [ngClass]=\"collapsed ? 'visible' : 'hidden'\"\n >\n @if (loyalties?.discount) {\n <span\n class=\"tent-loyalty--box--info--num title--42 color--brown\"\n >{{ loyalties?.discount }}</span\n >\n }\n @if (loyalties?.advantages) {\n <p\n class=\"tent-loyalty--info--text text color--brown\"\n >\n {{ loyalties?.advantages }}\n </p>\n }\n </div>\n @if (collapsed) {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seemore ?? '+'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow reverse without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n } @else {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seeless ?? '-'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n }\n </div>\n <ul class=\"tent-loyalty--box--list\">\n @if (loyalties?.items?.length) {\n @for (item of loyalties?.items; track $index) {\n <li\n [ngClass]=\"\n loyalties?.items?.length == 3 &&\n $index == 0\n ? 'first-item-big'\n : ''\n \"\n >\n <p\n class=\"tent-loyalty--box--item color--brown\"\n >\n @if (item.icon) {\n <span\n class=\"tent-loyalty--box--item--icon\"\n [class]=\"'icon-' + item.icon\"\n ></span>\n }\n @if (item.title) {\n <span class=\"text color--brown\">{{\n item.title\n }}</span>\n }\n @if (item.text) {\n <span\n class=\"text--small color--brown\"\n [innerHTML]=\"item.text\"\n ></span>\n }\n </p>\n </li>\n }\n }\n </ul>\n </div>\n }\n @case (2) {\n <div\n class=\"tent-loyalty--box bg-orange\"\n [ngClass]=\"collapsed ? 'close' : 'open'\"\n (click)=\"toggleCollapse($event)\"\n >\n <div class=\"tent-loyalty--box--inner\">\n <h3\n class=\"tent-loyalty--box--title title--42 color--white\"\n >\n @if (loyalties?.icon) {\n <span\n class=\"loyalty-icon\"\n [ngClass]=\"'icon-' + loyalties?.icon\"\n ></span>\n }\n @if (loyalties?.levelName) {\n <div class=\"tent-loyalty--box--title--level\">\n <span class=\"text color--white\">\n {{ loyalties?.levelName }}\n </span>\n @if (loyalties?.levelSubtitle) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n [ngClass]=\"\n !collapsed\n ? 'visible'\n : 'hidden'\n \"\n >\n {{ loyalties?.levelSubtitle }}\n </p>\n }\n </div>\n }\n </h3>\n <div\n class=\"tent-loyalty--box--info\"\n [ngClass]=\"collapsed ? 'visible' : 'hidden'\"\n >\n @if (loyalties?.discount) {\n <span\n class=\"tent-loyalty--box--info--num title--42 color--white\"\n >{{ loyalties?.discount }}</span\n >\n }\n @if (loyalties?.advantages) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n >\n {{ loyalties?.advantages }}\n </p>\n }\n </div>\n @if (collapsed) {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seemore ?? '+'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow reverse without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n } @else {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seeless ?? '-'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n }\n </div>\n <ul class=\"tent-loyalty--box--list\">\n @if (loyalties?.items?.length) {\n @for (item of loyalties?.items; track $index) {\n <li>\n <p\n class=\"tent-loyalty--box--item color--brown\"\n >\n @if (item.icon) {\n <span\n class=\"tent-loyalty--box--item--icon\"\n [class]=\"'icon-' + item.icon\"\n ></span>\n }\n @if (item.title) {\n <span class=\"text color--brown\">{{\n item.title\n }}</span>\n }\n @if (item.text) {\n <span\n class=\"text--small color--brown\"\n [innerHTML]=\"item.text\"\n ></span>\n }\n </p>\n </li>\n }\n }\n </ul>\n </div>\n }\n @case (3) {\n <div\n class=\"tent-loyalty--box bg-brown\"\n [ngClass]=\"collapsed ? 'close' : 'open'\"\n (click)=\"toggleCollapse($event)\"\n >\n <div class=\"tent-loyalty--box--inner\">\n <h3\n class=\"tent-loyalty--box--title title--42 color--white\"\n >\n @if (loyalties?.icon) {\n <span\n class=\"loyalty-icon\"\n [ngClass]=\"'icon-' + loyalties?.icon\"\n ></span>\n }\n @if (loyalties?.levelName) {\n <div class=\"tent-loyalty--box--title--level\">\n <span class=\"text color--white\">\n {{ loyalties?.levelName }}\n </span>\n @if (loyalties?.levelSubtitle) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n [ngClass]=\"\n !collapsed\n ? 'visible'\n : 'hidden'\n \"\n >\n {{ loyalties?.levelSubtitle }}\n </p>\n }\n </div>\n }\n </h3>\n <div\n class=\"tent-loyalty--box--info\"\n [ngClass]=\"collapsed ? 'visible' : 'hidden'\"\n >\n @if (loyalties?.discount) {\n <span\n class=\"tent-loyalty--box--info--num title--42 color--white\"\n >{{ loyalties?.discount }}</span\n >\n }\n @if (loyalties?.advantages) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n >\n {{ loyalties?.advantages }}\n </p>\n }\n </div>\n @if (collapsed) {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seemore ?? '+'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow reverse without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n } @else {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seeless ?? '-'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n }\n </div>\n <ul class=\"tent-loyalty--box--list\">\n @if (loyalties?.items?.length) {\n @for (item of loyalties?.items; track $index) {\n <li>\n <p\n class=\"tent-loyalty--box--item color--brown\"\n >\n @if (item.icon) {\n <span\n class=\"tent-loyalty--box--item--icon\"\n [class]=\"'icon-' + item.icon\"\n ></span>\n }\n @if (item.title) {\n <span class=\"text color--brown\">{{\n item.title\n }}</span>\n }\n @if (item.text) {\n <span\n class=\"text--small color--brown\"\n [innerHTML]=\"item.text\"\n >{{ item.text }}</span\n >\n }\n </p>\n </li>\n }\n }\n </ul>\n </div>\n }\n }\n </div>\n</section>\n", styles: [":root{--tent-font: \"DM Sans\", sans-serif;--color-background: #fff;--color-background-2: #fbf5f0;--color-background-3: #f6ece2;--color-background-4: #eaaa00;--color-background-5: #dc572a;--color-background-6: #7c4d3b;--color-background-6-90: rgb(124 77 59 / 90%);--color-background-7: #005f87;--color-background-8: #dab38c;--color-background-9: #c7946a;--color-title: #dab38d;--color-title-1: #693d2d;--color-title-2: rgb(105 61 45 / 90%);--color-title-4: rgb(105 61 45 / 70%);--color-title-3: #0cc2ce;--color-title-light: #fff;--color-subtitle: #c1885b;--color-subtitle-light: #fff;--color-description: #5d5d5d;--color-description-light: #fff;--color-description-brown-light: rgb(105 61 45 / 80%);--color-description-brown: rgb(105 61 45 / 100%);--color-badge: #dc572a;--color-badge-2: #fdd8b4;--color-badge-3: #dab38d;--color-badge-4: #f3e2d5;--color-badge-5: #fff;--color-badge-box: #e37955;--color-badge-box-hover: #d9603e;--color-dark-btn: rgb(124 77 58 / 70%);--color-dark-btn-hover: #7c4d3a;--color-line-dark-btn: rgb(124 77 58 / 70%);--color-line-dark-btn-hover: #dab38d;--color-dark-btn-filled: #693d2d;--color-dark-btn-filled-hover: #fff;--color-line-dark-btn-filled: #dab38d;--color-line-dark-btn-filled-hover: #dc572a;--color-light-btn: #fff;--color-light-btn-hover: #693d2d;--color-line-light-btn-hover: #dab38d;--size-icon-links: 12px;--size-btn-box: 308px;--size-btn-box-mobile: 250px;--color-link-brown-light: rgb(105 61 45 / 70%);--color-link-brown-light2: rgb(105 61 45 / 80%);--color-link-brown-dark: #693d2d;--color-social-media: #693d3d;--color-instagram: #dab38d;--color-tiktok: #ed4a73;--color-facebook: #2764c1;--color-youtube: #d9464b;--color-linkedin: #2376c9;--color-background-footer1: rgb(135 136 138 / 75%);--color-background-footer2: rgb(221 187 156 / 80%);--color-check-in: #e78a6a;--color-check-in-hover: #d9603e;--color-border-header: #e1d8d5;--color-linea-brown-light: rgb(124 77 58 / 50%);--color-linea-brown-light2: rgb(124 77 58 / 20%);--color-icon: #693e2e;--color-icon-light: : rgb(105 61 45 / 70%);--Ltransition: all cubic-bezier(.785, .135, .15, .86) 1s;--Mtransition: all cubic-bezier(.785, .135, .15, .86) .85s;--stransition-basic: all cubic-bezier(.785, .135, .15, .86) .7s;--SStransition: all cubic-bezier(.785, .135, .15, .86) .3s;--XStransition: all cubic-bezier(.785, .135, .15, .86) 0s}.link{font-family:var(--tent-font);text-decoration:none;font-size:16px;font-weight:400;color:var(--color-description);letter-spacing:0;line-height:146.1538461538%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);position:relative;cursor:pointer}.link:after{content:\"\";width:0%;height:1px;position:absolute;bottom:-2px;left:0;background-color:var(--color-description);-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.link:hover{color:var(--color-description)}.link:hover:after{width:100%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.link--brown{color:var(--color-link-brown-light2)}.link--brown:after{background-color:var(--color-link-brown-light2)}.link--brown:hover{color:var(--color-link-brown-dark)}.link--brown:hover:after{background-color:var(--color-link-brown-dark)}.link-opacity{font-family:var(--tent-font);text-decoration:none;font-size:16px;font-weight:400;color:var(--color-description);letter-spacing:0;line-height:146.1538461538%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);position:relative;opacity:.7;cursor:pointer}.link-opacity:hover{opacity:1}.link-regular{font-family:var(--tent-font);text-decoration:none;font-size:18px;font-weight:400;color:var(--color-description);line-height:146.1538461538%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);position:relative;cursor:pointer}.link-regular:hover{text-decoration:underline}@media (min-width: 540px){.link-regular{font-size:20px;line-height:34px}}.text{font-family:var(--tent-font);font-size:18px;line-height:24px;color:var(--color-description);text-align:left;font-weight:400}@media (min-width: 540px){.text{font-size:20px;line-height:34px}}.text--light{color:var(--color-description-light)}.text--small,.text--18{font-size:16px}.text strong{font-weight:700}.title--18{font-weight:700;font-size:14px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--18{font-size:16px}}@media (min-width: 768px){.title--18{font-size:16px}}@media (min-width: 1024px){.title--18{font-size:18px}}@media (min-width: 1680px){.title--18{font-size:18px}}.title--24{font-weight:700;font-size:24px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--24{font-size:24px}}@media (min-width: 768px){.title--24{font-size:24px}}@media (min-width: 1024px){.title--24{font-size:24px}}@media (min-width: 1280px){.title--24{font-size:24px}}@media (min-width: 1366px){.title--24{font-size:24px}}@media (min-width: 1680px){.title--24{font-size:24px}}@media (min-width: 1800px){.title--24{font-size:24px}}.title--30{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:0}@media (max-width: 374px){.title--30{font-size:24px}}.title--34{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--34{font-size:32px}}@media (min-width: 768px){.title--34{font-size:32px}}@media (min-width: 1680px){.title--34{font-size:34px}}.title--38{font-weight:700;font-size:26px;line-height:1.5;letter-spacing:0}@media (min-width: 540px){.title--38{font-size:28px}}@media (min-width: 768px){.title--38{font-size:36px}}@media (min-width: 1680px){.title--38{font-size:38px}}.title--42{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--42{font-size:32px}}@media (min-width: 768px){.title--42{font-size:42px}}@media (min-width: 1680px){.title--42{font-size:42px}}.title--54{font-weight:700;font-size:32px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--54{font-size:44px}}@media (min-width: 1680px){.title--54{font-size:54px}}.title--60{font-weight:700;font-size:32px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--60{font-size:44px;line-height:1}}@media (min-width: 768px){.title--60{font-size:50px}}@media (min-width: 1680px){.title--60{font-size:60px}}.title--80{font-weight:700;font-size:40px;line-height:1;letter-spacing:0}@media (min-width: 540px){.title--80{font-size:50px}}@media (min-width: 768px){.title--80{font-size:60px}}@media (min-width: 1024px){.title--80{font-size:60px}}@media (min-width: 1280px){.title--80{font-size:70px}}@media (min-width: 1366px){.title--80{font-size:70px}}@media (min-width: 1680px){.title--80{font-size:80px}}.title--100{font-weight:700;font-size:40px;line-height:1;letter-spacing:0}@media (min-width: 540px){.title--100{font-size:55px}}@media (min-width: 768px){.title--100{font-size:80px}}@media (min-width: 1024px){.title--100{font-size:80px}}@media (min-width: 1280px){.title--100{font-size:90px}}@media (min-width: 1366px){.title--100{font-size:90px}}@media (min-width: 1680px){.title--100{font-size:110px}}.subtitle{font-family:var(--tent-font);font-weight:700;font-size:24px;line-height:44px;letter-spacing:0;text-align:left;color:var(--color-subtitle)}.subtitle.light{color:var(--color-subtitle-light)}.subtitle--medium{font-weight:500;font-size:18px;line-height:1.2;color:var(--color-subtitle-light)}@media (min-width: 768px){.subtitle--medium{font-size:20px}}.bg-yellow{background-color:var(--color-background-4)}.bg-orange{background-color:var(--color-background-5)}.bg-brown{background-color:var(--color-background-6)}.bg-brown-90{background-color:var(--color-background-6-90)}.bg-blue{background-color:var(--color-background-7)}.bg-camel{background-color:var(--color-background-8)}.bg-beige{background-color:var(--color-background-3)}.bg-beige{background-color:var(--color-background-2)}.bg-white{background-color:#fff}.color--brown-dark{color:var(--color-title-1)}.color--brown{color:var(--color-title-2)}.color--brown-70{color:var(--color-title-4)}.color--camel{color:var(--color-title)}.color--white{color:#fff}.color--blue{color:var(--color-title-3)}.color--gray{color:var(--color-description)}.flex-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}.flex-row--reverse{flex-direction:row-reverse}.flex-row--center{align-items:center;justify-content:center}.flex-row--between{align-items:center;justify-content:space-between}.flex-row--left{align-items:center;justify-content:flex-start}@media (max-width: 1023px){.flex-row--left{justify-content:center}}.flex-col{display:flex;flex-direction:column;flex-wrap:wrap;gap:10px}.flex-col--reverse{flex-direction:row-reverse}.flex-col--center{align-items:center;justify-content:center}.mt--0{margin-top:0}.mb--0{margin-bottom:0}.pt--0{padding-top:0}.pb--0{padding-bottom:0}.mt--10{margin-top:10px}.mb--10{margin-bottom:10px}.pt--10{padding-top:10px}.pb--10{padding-bottom:10px}.mt--20{margin-top:20px}.mb--20{margin-bottom:20px}.pt--20{padding-top:20px}.pb--20{padding-bottom:20px}.mt--25{margin-top:25px}.mb--25{margin-bottom:25px}.pt--25{padding-top:25px}.pb--25{padding-bottom:25px}.mt--30{margin-top:30px}.mb--30{margin-bottom:30px}.pt--30{padding-top:30px}.pb--30{padding-bottom:30px}.mt--40{margin-top:40px}.mb--40{margin-bottom:40px}.pt--40{padding-top:40px}.pb--40{padding-bottom:40px}.mt--50{margin-top:50px}.mb--50{margin-bottom:50px}.pt--50{padding-top:50px}.pb--50{padding-bottom:50px}.mt--60{margin-top:60px}.mb--60{margin-bottom:60px}.pt--60{padding-top:60px}.pb--60{padding-bottom:60px}.mt--70{margin-top:70px}.mb--70{margin-bottom:70px}.pt--70{padding-top:70px}.pb--70{padding-bottom:70px}.mt--80{margin-top:80px}.mb--80{margin-bottom:80px}.pt--80{padding-top:80px}.pb--80{padding-bottom:80px}.mt--90{margin-top:90px}.mb--90{margin-bottom:90px}.pt--90{padding-top:90px}.pb--90{padding-bottom:90px}.mt--100{margin-top:100px}.mb--100{margin-bottom:100px}.pt--100{padding-top:100px}.pb--100{padding-bottom:100px}.wrapper-big{max-width:100%;padding:0}@media (min-width: 540px){.wrapper-big{padding:0}}@media (min-width: 768px){.wrapper-big{padding:0}}@media (min-width: 1024px){.wrapper-big{padding:0 40px}}@media (min-width: 1280px){.wrapper-big{padding:0 20px}}@media (min-width: 1366px){.wrapper-big{padding:0 13px}}@media (min-width: 1680px){.wrapper-big{padding:0 40px}}@media (min-width: 1800px){.wrapper-big{padding:0 60px}}.wrapper-medium{max-width:100%;padding:0;min-width:-webkit-fill-available}@media (min-width: 540px){.wrapper-medium{padding:0 28px}}@media (min-width: 768px){.wrapper-medium{padding:0 45px}}@media (min-width: 1024px){.wrapper-medium{padding:0 55px}}@media (min-width: 1280px){.wrapper-medium{padding:0 59px}}@media (min-width: 1366px){.wrapper-medium{padding:0 65px}}@media (min-width: 1680px){.wrapper-medium{padding:0}}@media (min-width: 1800px){.wrapper-medium{padding:0}}.module-spacer--bottom{padding-bottom:35px}@media (min-width: 540px){.module-spacer--bottom{padding-bottom:40px}}@media (min-width: 768px){.module-spacer--bottom{padding-bottom:80px}}@media (min-width: 1680px){.module-spacer--bottom{padding-bottom:90px}}.module-spacer-small--bottom{padding-bottom:30px}@media (min-width: 540px){.module-spacer-small--bottom{padding-bottom:40px}}@media (min-width: 768px){.module-spacer-small--bottom{padding-bottom:50px}}@media (min-width: 1680px){.module-spacer-small--bottom{padding-bottom:50px}}@media (min-width: 1280px){.figure-sticky{position:sticky!important;top:8rem}}.figure-content{width:100%;aspect-ratio:1;display:flex;cursor:default;align-items:center;justify-content:center;position:relative;border-radius:.6rem;overflow:hidden}.figure-full{position:absolute;top:0;left:0;width:100%;height:100%;background-position:50% 50%;background-size:cover;background-repeat:no-repeat;margin:0;z-index:-1}.figure-zoom figure{-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.figure-zoom:hover figure{-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);transform:scale(1.1)}.slider-arrows--center .owl-nav{position:absolute;top:50%;width:106%;display:flex;justify-content:space-between;margin:0;left:50%;transform:translate(-50%) translateY(-50%);z-index:-1}.slider-arrows--center .owl-nav [class*=owl-]{background-color:transparent;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.slider-arrows--center .owl-nav [class*=owl-]:hover{background-color:transparent;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);transform:scale(1.5)}.slider-circle--center .owl-nav{position:absolute;top:50%;width:calc(100% - 240px);display:flex;justify-content:space-between;margin:0;left:120px;transform:translateY(-50%)}.slider-circle--center .owl-nav [class*=owl-]{background-color:#fff;border-radius:100%;padding:4px}.slider-circle--center .owl-nav [class*=owl-]:hover{background-color:#fff}@media (max-width: 767px){.slider-circle--center .owl-nav .btn__circle{width:38px;height:38px}}.slider-circle--center--centerFull .owl-nav{width:110%;left:-5%}.btn{cursor:pointer;font-family:var(--corp-font);-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.btn__light{border:2px solid var(--color-light-btn);color:var(--color-light-btn);background-color:transparent}.btn__light:hover{border:2px solid var(--color-line-light-btn-hover);background-color:var(--color-line-light-btn-hover);color:var(--color-light-btn-hover)}.btn__dark{border:2px solid var(--color-line-dark-btn);color:var(--color-dark-btn);background-color:var(--color-background)}.btn__dark:hover{border:2px solid var(--color-line-dark-btn-hover);background-color:var(--color-line-dark-btn-hover);color:var(--color-dark-btn-hover)}.btn__dark-white{border:2px solid var(--color-line-dark-btn);color:var(--color-dark-btn);background-color:transparent}.btn__dark-white:hover{border:2px solid white;background-color:#fff;color:var(--color-dark-btn-hover)}.btn__dark-filled{border:2px solid var(--color-line-dark-btn-filled);color:var(--color-dark-btn-filled);background-color:var(--color-line-dark-btn-filled)}.btn__dark-filled:hover{border:2px solid var(--color-line-dark-btn-filled-hover);background-color:var(--color-line-dark-btn-filled-hover);color:var(--color-dark-btn-filled-hover)}.btn__white{border:2px solid white;color:var(--color-dark-btn);background-color:var(--color-background)}.btn__white:hover{border:2px solid white;background-color:#fff;color:var(--color-dark-btn-hover)}.btn__laundry{border:2px solid #005f87;color:#005f87;background-color:var(--color-background);opacity:.5}.btn__laundry:hover{background-color:#005f87;color:#fff;opacity:1}.btn__circle-container{border-radius:50%;padding:6px}.btn__circle{width:40px;height:40px;border-radius:50%;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;text-align:center}.btn__circle--social-media{width:60px;height:60px;color:var(--color-social-media)}.btn__circle:hover--instagram{background-color:var(--color-instagram);color:var(--color-social-media)}.btn__circle:hover--tiktok,.btn__circle:hover--facebook,.btn__circle:hover--youtube,.btn__circle:hover--linkedin{color:var(--color-background)}.btn__circle:hover--tiktok{background-color:var(--color-tiktok)}.btn__circle:hover--facebook{background-color:var(--color-facebook)}.btn__circle:hover--youtube{background-color:var(--color-youtube)}.btn__circle:hover--linkedin{background-color:var(--color-linkedin)}.btn__circle-icon{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;font-size:22px}.btn__circle-icon.icon--size12{font-size:12px}.btn__box{width:var(--size-btn-box);height:50px;border-radius:6px;font-weight:700;font-size:19px;line-height:24.74px;text-align:center}.btn__box.btn-small{width:var(--size-btn-box-mobile)}@media (min-width: 540px){.btn__box.btn-small{width:var(--size-btn-box)}}.btn__box-container mat-icon{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap}.form-error{font-family:var(--tent-font);color:#df6a6a;font-size:13px}.invalid{margin-bottom:10px}@media (min-width: 768px){.tent-loyalty--content{padding-inline:70px}}.tent-loyalty--head{display:flex;align-items:center;justify-content:center;gap:10px;flex-direction:column;margin-bottom:30px;margin-top:30px}.tent-loyalty--head--tit{font-weight:700;text-align:center}.tent-loyalty--head--text{font-weight:400;text-align:center}.tent-loyalty--head .discount-loyalty{position:relative;display:flex;width:100%;justify-content:center;align-items:center;padding:20px 0}.tent-loyalty--head .discount-loyalty .texts-container{display:flex;align-items:end;justify-content:center;gap:10px;z-index:1;margin-bottom:10px}@media (max-width: 539px){.tent-loyalty--head .discount-loyalty .texts-container{align-items:center;flex-direction:column}}.tent-loyalty--head .discount-loyalty .img-container{position:absolute}@media (max-width: 539px){.tent-loyalty--head .discount-loyalty .img-container img{width:90vw}}.tent-loyalty--box{display:flex;align-items:center;flex-direction:column;border-radius:16px;margin-bottom:20px;transition:opacity .9s ease;cursor:pointer}.tent-loyalty--box--inner{display:flex;width:100%;justify-content:flex-start;align-items:flex-start;padding-block:20px;position:relative;flex-direction:column}.tent-loyalty--box--inner span{width:100%;font-size:48px}.tent-loyalty--box--inner span.loyalty-icon{height:70px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--color-background-3)}.tent-loyalty--box--inner span.loyalty-icon.color--brown{background-color:var(--color-background-10)}@media (max-width: 1365px){.tent-loyalty--box--inner span,.tent-loyalty--box--inner p{width:90%}.tent-loyalty--box--inner span.loyalty-icon,.tent-loyalty--box--inner p.loyalty-icon{width:80px}}@media (max-width: 1279px){.tent-loyalty--box--inner span,.tent-loyalty--box--inner p{width:90%}.tent-loyalty--box--inner span.loyalty-icon,.tent-loyalty--box--inner p.loyalty-icon{width:80px}}.tent-loyalty--box--title{display:flex;align-items:center;padding-inline:20px;width:calc(100% - 40px);gap:10px;position:relative;padding-bottom:10px;margin-bottom:10px}.tent-loyalty--box--title--level span{font-weight:700}.tent-loyalty--box--title:before{content:\"\";width:calc(100% - 40px);height:1px;display:block;position:absolute;left:20px;bottom:0;background-color:#ffffff80}.tent-loyalty--box--title.color--brown:before{background-color:#8a583677}.tent-loyalty--box--info{padding-left:110px;display:flex;flex-direction:column;align-items:flex-start}.tent-loyalty--box--info.hidden{display:none}@media (max-width: 1279px){.tent-loyalty--box--info span{width:100%}}@media (max-width: 767px){.tent-loyalty--box--info{flex-direction:column;align-items:center;gap:15px;width:100%;padding:0%}.tent-loyalty--box--info span,.tent-loyalty--box--info p{width:100%;text-align:center}}@media (max-width: 539px){.tent-loyalty--box--info{padding-left:0;display:flex;align-items:center;justify-content:center;width:100%}}.tent-loyalty--box .tent-loyalty--btn-arrow{margin-right:0;position:absolute;right:10px}.tent-loyalty--box .tent-loyalty--btn-arrow.reverse{transform:rotate(180deg)}.tent-loyalty--box .tent-loyalty--btn-arrow ::ng-deep button{background-color:#fff;border-color:#fff}.tent-loyalty--box .tent-loyalty--btn-arrow ::ng-deep:hover button{background-color:var(--color-title-2)}.tent-loyalty--box--list{display:flex;flex-wrap:wrap;padding-bottom:20px;max-width:max-content;width:90%;align-items:center;justify-content:center;gap:20px;display:none}.tent-loyalty--box--list li{background-color:#fff;border-radius:16px;padding:20px;width:100%;flex-direction:column;align-items:center}.tent-loyalty--box--item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:20px;text-align:center}.tent-loyalty--box--item--icon{font-size:60px;width:60px;height:60px;background-color:var(--color-background-6);-webkit-mask-size:contain;mask-size:contain}.tent-loyalty--box--item .text{text-align:center}.tent-loyalty--box.open .tent-loyalty--box--list{display:flex}.tent-loyalty--box.open .tent-loyalty--box--title:before{display:none!important}@media (min-width: 768px){.tent-loyalty--box--list{align-items:stretch;justify-content:space-between;padding-bottom:30px;min-width:90%}.tent-loyalty--box--list li{width:calc(50% - 50px)}.tent-loyalty--box--list li.first-item-big{width:100%}}@media (min-width: 1280px){.tent-loyalty--box--inner{flex-direction:row;align-items:center;padding-block:30px}.tent-loyalty--box--title{width:auto;gap:40px;padding-right:40px;padding-bottom:0;margin-bottom:0;padding-inline:30px}.tent-loyalty--box--title:before{height:100%;width:1px;right:0;top:0;left:auto}.tent-loyalty--box--title span{width:120px}.tent-loyalty--box--info{padding-left:40px}.tent-loyalty--box .tent-loyalty--btn-arrow{right:40px}.tent-loyalty--box--item--icon{font-size:80px;width:100px;height:100px;background-color:var(--color-background-6);-webkit-mask-size:contain;mask-size:contain}.tent-loyalty--box--list{width:calc(100% - 140px);min-width:calc(100% - 140px)}.tent-loyalty--box--list li{width:calc(33% - 60px);min-height:190px;align-items:center;justify-content:center;display:flex}.tent-loyalty--box--list li.first-item-big{width:calc(33% - 60px)}}@media (min-width: 540px){.tent-loyalty .tent-loyalty--info--text.text{line-height:24px;bottom:5px;position:relative}}@media (max-width: 374px){.tent-loyalty .tent-loyalty--info--text.text{width:40%}}@media (min-width: 1024px){.tent-loyalty .without-label{display:none}}@media (max-width: 1023px){.tent-loyalty .without-label{display:block}}@media (min-width: 1024px){.tent-loyalty .with-label{display:block}}@media (max-width: 1023px){.tent-loyalty .with-label{display:none}}\n"] }]
|
|
3881
|
+
args: [{ selector: 'lib-tent-loyalty', standalone: true, imports: [CommonModule, ButtonComponent], template: "<section\n class=\"tent-loyalty wrapper-big\"\n [ngClass]=\"{ 'module-spacer--bottom': id == 3 }\"\n>\n <div class=\"tent-loyalty--content\">\n @switch (id) {\n @case (0) {\n <div class=\"tent-loyalty--head\">\n @if (title) {\n <h2\n class=\"tent-loyalty--head--tit title--42 color--brown\"\n >\n {{ title }}\n </h2>\n }\n @if (subtitle) {\n <p class=\"tent-loyalty--head--text text\">\n {{ subtitle }}\n </p>\n }\n @if (percentage || percentagetext1 || percentagetext2) {\n <div class=\"discount-loyalty\">\n <div class=\"texts-container\">\n @if (percentagetext1) {\n <p\n class=\"text color--brown\"\n [innerHTML]=\"percentagetext1\"\n ></p>\n }\n @if (percentage) {\n <h2\n class=\"title--42 color--brown\"\n [innerHTML]=\"percentage\"\n ></h2>\n }\n @if (percentagetext2) {\n <p\n class=\"text color--brown\"\n [innerHTML]=\"percentagetext2\"\n ></p>\n }\n </div>\n <div class=\"img-container\">\n <img\n src=\"/assets/tent/img/loyalty-discount-bg.svg\"\n alt=\"left\"\n loading=\"lazy\"\n class=\"location-how--iconactive\"\n />\n </div>\n </div>\n }\n </div>\n }\n @case (1) {\n <div\n class=\"tent-loyalty--box bg-yellow\"\n [ngClass]=\"collapsed ? 'close' : 'open'\"\n (click)=\"toggleCollapse($event)\"\n >\n <div class=\"tent-loyalty--box--inner\">\n <h3\n class=\"tent-loyalty--box--title title--42 color--brown\"\n >\n @if (loyalties?.icon) {\n <span\n class=\"loyalty-icon color--brown\"\n [ngClass]=\"'icon-' + loyalties?.icon\"\n ></span>\n }\n @if (loyalties?.levelName) {\n <div class=\"tent-loyalty--box--title--level\">\n <span class=\"text color--brown\">\n {{ loyalties?.levelName }}\n </span>\n @if (loyalties?.levelSubtitle) {\n <p\n class=\"tent-loyalty--info--text text color--brown\"\n [ngClass]=\"\n !collapsed\n ? 'visible'\n : 'hidden'\n \"\n >\n {{ loyalties?.levelSubtitle }}\n </p>\n }\n </div>\n }\n </h3>\n <div\n class=\"tent-loyalty--box--info\"\n [ngClass]=\"collapsed ? 'visible' : 'hidden'\"\n >\n @if (loyalties?.discount) {\n <span\n class=\"tent-loyalty--box--info--num title--42 color--brown\"\n >{{ loyalties?.discount }}</span\n >\n }\n @if (loyalties?.advantages) {\n <p\n class=\"tent-loyalty--info--text text color--brown\"\n >\n {{ loyalties?.advantages }}\n </p>\n }\n </div>\n @if (collapsed) {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seemore ?? '+'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow reverse without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n } @else {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seeless ?? '-'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n }\n </div>\n <ul class=\"tent-loyalty--box--list\">\n @if (loyalties?.items?.length) {\n @for (item of loyalties?.items; track $index) {\n <li\n [ngClass]=\"\n loyalties?.items?.length == 3 &&\n $index == 0\n ? 'first-item-big'\n : ''\n \"\n >\n <p\n class=\"tent-loyalty--box--item color--brown\"\n >\n @if (item.icon) {\n <span\n class=\"tent-loyalty--box--item--icon\"\n [class]=\"'icon-' + item.icon\"\n ></span>\n }\n @if (item.title) {\n <span class=\"text color--brown\">{{\n item.title\n }}</span>\n }\n @if (item.text) {\n <span\n class=\"text--small color--brown\"\n [innerHTML]=\"item.text\"\n ></span>\n }\n </p>\n </li>\n }\n }\n </ul>\n </div>\n }\n @case (2) {\n <div\n class=\"tent-loyalty--box bg-orange\"\n [ngClass]=\"collapsed ? 'close' : 'open'\"\n (click)=\"toggleCollapse($event)\"\n >\n <div class=\"tent-loyalty--box--inner\">\n <h3\n class=\"tent-loyalty--box--title title--42 color--white\"\n >\n @if (loyalties?.icon) {\n <span\n class=\"loyalty-icon\"\n [ngClass]=\"'icon-' + loyalties?.icon\"\n ></span>\n }\n @if (loyalties?.levelName) {\n <div class=\"tent-loyalty--box--title--level\">\n <span class=\"text color--white\">\n {{ loyalties?.levelName }}\n </span>\n @if (loyalties?.levelSubtitle) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n [ngClass]=\"\n !collapsed\n ? 'visible'\n : 'hidden'\n \"\n >\n {{ loyalties?.levelSubtitle }}\n </p>\n }\n </div>\n }\n </h3>\n <div\n class=\"tent-loyalty--box--info\"\n [ngClass]=\"collapsed ? 'visible' : 'hidden'\"\n >\n @if (loyalties?.discount) {\n <span\n class=\"tent-loyalty--box--info--num title--42 color--white\"\n >{{ loyalties?.discount }}</span\n >\n }\n @if (loyalties?.advantages) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n >\n {{ loyalties?.advantages }}\n </p>\n }\n </div>\n @if (collapsed) {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seemore ?? '+'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow reverse without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n } @else {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seeless ?? '-'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n }\n </div>\n <ul class=\"tent-loyalty--box--list\">\n @if (loyalties?.items?.length) {\n @for (item of loyalties?.items; track $index) {\n <li>\n <p\n class=\"tent-loyalty--box--item color--brown\"\n >\n @if (item.icon) {\n <span\n class=\"tent-loyalty--box--item--icon\"\n [class]=\"'icon-' + item.icon\"\n ></span>\n }\n @if (item.title) {\n <span class=\"text color--brown\">{{\n item.title\n }}</span>\n }\n @if (item.text) {\n <span\n class=\"text--small color--brown\"\n [innerHTML]=\"item.text\"\n ></span>\n }\n </p>\n </li>\n }\n }\n </ul>\n </div>\n }\n @case (3) {\n <div\n class=\"tent-loyalty--box bg-brown\"\n [ngClass]=\"collapsed ? 'close' : 'open'\"\n (click)=\"toggleCollapse($event)\"\n >\n <div class=\"tent-loyalty--box--inner\">\n <h3\n class=\"tent-loyalty--box--title title--42 color--white\"\n >\n @if (loyalties?.icon) {\n <span\n class=\"loyalty-icon\"\n [ngClass]=\"'icon-' + loyalties?.icon\"\n ></span>\n }\n @if (loyalties?.levelName) {\n <div class=\"tent-loyalty--box--title--level\">\n <span class=\"text color--white\">\n {{ loyalties?.levelName }}\n </span>\n @if (loyalties?.levelSubtitle) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n [ngClass]=\"\n !collapsed\n ? 'visible'\n : 'hidden'\n \"\n >\n {{ loyalties?.levelSubtitle }}\n </p>\n }\n </div>\n }\n </h3>\n <div\n class=\"tent-loyalty--box--info\"\n [ngClass]=\"collapsed ? 'visible' : 'hidden'\"\n >\n @if (loyalties?.discount) {\n <span\n class=\"tent-loyalty--box--info--num title--42 color--white\"\n >{{ loyalties?.discount }}</span\n >\n }\n @if (loyalties?.advantages) {\n <p\n class=\"tent-loyalty--info--text text color--white\"\n >\n {{ loyalties?.advantages }}\n </p>\n }\n </div>\n @if (collapsed) {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seemore ?? '+'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow reverse without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n } @else {\n <tent-button\n class=\"tent-loyalty--btn-arrow with-label\"\n type=\"dark-box\"\n [label]=\"loyalties?.seeless ?? '-'\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n <tent-button\n class=\"tent-loyalty--btn-arrow without-label\"\n type=\"dark-circle-filled\"\n icon=\"icon-signal-up\"\n (click)=\"toggleCollapse($event)\"\n ></tent-button>\n }\n </div>\n <ul class=\"tent-loyalty--box--list\">\n @if (loyalties?.items?.length) {\n @for (item of loyalties?.items; track $index) {\n <li>\n <p\n class=\"tent-loyalty--box--item color--brown\"\n >\n @if (item.icon) {\n <span\n class=\"tent-loyalty--box--item--icon\"\n [class]=\"'icon-' + item.icon\"\n ></span>\n }\n @if (item.title) {\n <span class=\"text color--brown\">{{\n item.title\n }}</span>\n }\n @if (item.text) {\n <span\n class=\"text--small color--brown\"\n [innerHTML]=\"item.text\"\n >{{ item.text }}</span\n >\n }\n </p>\n </li>\n }\n }\n </ul>\n </div>\n }\n }\n </div>\n</section>\n", styles: [":root{--tent-font: \"DM Sans\", sans-serif;--color-background: #fff;--color-background-2: #fbf5f0;--color-background-3: #f6ece2;--color-background-4: #eaaa00;--color-background-5: #dc572a;--color-background-6: #7c4d3b;--color-background-6-90: rgb(124 77 59 / 90%);--color-background-7: #005f87;--color-background-8: #dab38c;--color-background-9: #c7946a;--color-title: #dab38d;--color-title-1: #693d2d;--color-title-2: rgb(105 61 45 / 90%);--color-title-4: rgb(105 61 45 / 70%);--color-title-3: #0cc2ce;--color-title-light: #fff;--color-subtitle: #c1885b;--color-subtitle-light: #fff;--color-description: #5d5d5d;--color-description-light: #fff;--color-description-brown-light: rgb(105 61 45 / 80%);--color-description-brown: rgb(105 61 45 / 100%);--color-badge: #dc572a;--color-badge-2: #fdd8b4;--color-badge-3: #dab38d;--color-badge-4: #f3e2d5;--color-badge-5: #fff;--color-badge-box: #e37955;--color-badge-box-hover: #d9603e;--color-dark-btn: rgb(124 77 58 / 70%);--color-dark-btn-hover: #7c4d3a;--color-line-dark-btn: rgb(124 77 58 / 70%);--color-line-dark-btn-hover: #dab38d;--color-dark-btn-filled: #693d2d;--color-dark-btn-filled-hover: #fff;--color-line-dark-btn-filled: #dab38d;--color-line-dark-btn-filled-hover: #dc572a;--color-light-btn: #fff;--color-light-btn-hover: #693d2d;--color-line-light-btn-hover: #dab38d;--size-icon-links: 12px;--size-btn-box: 308px;--size-btn-box-mobile: 250px;--color-link-brown-light: rgb(105 61 45 / 70%);--color-link-brown-light2: rgb(105 61 45 / 80%);--color-link-brown-dark: #693d2d;--color-social-media: #693d3d;--color-instagram: #dab38d;--color-tiktok: #ed4a73;--color-facebook: #2764c1;--color-youtube: #d9464b;--color-linkedin: #2376c9;--color-background-footer1: rgb(135 136 138 / 75%);--color-background-footer2: rgb(221 187 156 / 80%);--color-check-in: #e78a6a;--color-check-in-hover: #d9603e;--color-border-header: #e1d8d5;--color-linea-brown-light: rgb(124 77 58 / 50%);--color-linea-brown-light2: rgb(124 77 58 / 20%);--color-icon: #693e2e;--color-icon-light: : rgb(105 61 45 / 70%);--Ltransition: all cubic-bezier(.785, .135, .15, .86) 1s;--Mtransition: all cubic-bezier(.785, .135, .15, .86) .85s;--stransition-basic: all cubic-bezier(.785, .135, .15, .86) .7s;--SStransition: all cubic-bezier(.785, .135, .15, .86) .3s;--XStransition: all cubic-bezier(.785, .135, .15, .86) 0s}.link{font-family:var(--tent-font);text-decoration:none;font-size:16px;font-weight:400;color:var(--color-description);letter-spacing:0;line-height:146.1538461538%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);position:relative;cursor:pointer}.link:after{content:\"\";width:0%;height:1px;position:absolute;bottom:-2px;left:0;background-color:var(--color-description);-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.link:hover{color:var(--color-description)}.link:hover:after{width:100%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.link--brown{color:var(--color-link-brown-light2)}.link--brown:after{background-color:var(--color-link-brown-light2)}.link--brown:hover{color:var(--color-link-brown-dark)}.link--brown:hover:after{background-color:var(--color-link-brown-dark)}.link-opacity{font-family:var(--tent-font);text-decoration:none;font-size:16px;font-weight:400;color:var(--color-description);letter-spacing:0;line-height:146.1538461538%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);position:relative;opacity:.7;cursor:pointer}.link-opacity:hover{opacity:1}.link-regular{font-family:var(--tent-font);text-decoration:none;font-size:18px;font-weight:400;color:var(--color-description);line-height:146.1538461538%;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);position:relative;cursor:pointer}.link-regular:hover{text-decoration:underline}@media (min-width: 540px){.link-regular{font-size:20px;line-height:34px}}.text{font-family:var(--tent-font);font-size:18px;line-height:24px;color:var(--color-description);text-align:left;font-weight:400}@media (min-width: 540px){.text{font-size:20px;line-height:34px}}.text--light{color:var(--color-description-light)}.text--small,.text--18{font-size:16px}.text strong{font-weight:700}.title--18{font-weight:700;font-size:14px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--18{font-size:16px}}@media (min-width: 768px){.title--18{font-size:16px}}@media (min-width: 1024px){.title--18{font-size:18px}}@media (min-width: 1680px){.title--18{font-size:18px}}.title--24{font-weight:700;font-size:24px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--24{font-size:24px}}@media (min-width: 768px){.title--24{font-size:24px}}@media (min-width: 1024px){.title--24{font-size:24px}}@media (min-width: 1280px){.title--24{font-size:24px}}@media (min-width: 1366px){.title--24{font-size:24px}}@media (min-width: 1680px){.title--24{font-size:24px}}@media (min-width: 1800px){.title--24{font-size:24px}}.title--30{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:0}@media (max-width: 374px){.title--30{font-size:24px}}.title--34{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--34{font-size:32px}}@media (min-width: 768px){.title--34{font-size:32px}}@media (min-width: 1680px){.title--34{font-size:34px}}.title--38{font-weight:700;font-size:26px;line-height:1.5;letter-spacing:0}@media (min-width: 540px){.title--38{font-size:28px}}@media (min-width: 768px){.title--38{font-size:36px}}@media (min-width: 1680px){.title--38{font-size:38px}}.title--42{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--42{font-size:32px}}@media (min-width: 768px){.title--42{font-size:42px}}@media (min-width: 1680px){.title--42{font-size:42px}}.title--54{font-weight:700;font-size:32px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--54{font-size:44px}}@media (min-width: 1680px){.title--54{font-size:54px}}.title--60{font-weight:700;font-size:32px;line-height:1.2;letter-spacing:0}@media (min-width: 540px){.title--60{font-size:44px;line-height:1}}@media (min-width: 768px){.title--60{font-size:50px}}@media (min-width: 1680px){.title--60{font-size:60px}}.title--80{font-weight:700;font-size:40px;line-height:1;letter-spacing:0}@media (min-width: 540px){.title--80{font-size:50px}}@media (min-width: 768px){.title--80{font-size:60px}}@media (min-width: 1024px){.title--80{font-size:60px}}@media (min-width: 1280px){.title--80{font-size:70px}}@media (min-width: 1366px){.title--80{font-size:70px}}@media (min-width: 1680px){.title--80{font-size:80px}}.title--100{font-weight:700;font-size:40px;line-height:1;letter-spacing:0}@media (min-width: 540px){.title--100{font-size:55px}}@media (min-width: 768px){.title--100{font-size:80px}}@media (min-width: 1024px){.title--100{font-size:80px}}@media (min-width: 1280px){.title--100{font-size:90px}}@media (min-width: 1366px){.title--100{font-size:90px}}@media (min-width: 1680px){.title--100{font-size:110px}}.subtitle{font-family:var(--tent-font);font-weight:700;font-size:24px;line-height:44px;letter-spacing:0;text-align:left;color:var(--color-subtitle)}.subtitle.light{color:var(--color-subtitle-light)}.subtitle--medium{font-weight:500;font-size:18px;line-height:1.2;color:var(--color-subtitle-light)}@media (min-width: 768px){.subtitle--medium{font-size:20px}}.bg-yellow{background-color:var(--color-background-4)}.bg-orange{background-color:var(--color-background-5)}.bg-brown{background-color:var(--color-background-6)}.bg-brown-90{background-color:var(--color-background-6-90)}.bg-blue{background-color:var(--color-background-7)}.bg-camel{background-color:var(--color-background-8)}.bg-beige{background-color:var(--color-background-3)}.bg-beige{background-color:var(--color-background-2)}.bg-white{background-color:#fff}.color--brown-dark{color:var(--color-title-1)}.color--brown{color:var(--color-title-2)}.color--brown-70{color:var(--color-title-4)}.color--camel{color:var(--color-title)}.color--white{color:#fff}.color--blue{color:var(--color-title-3)}.color--gray{color:var(--color-description)}.flex-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}.flex-row--reverse{flex-direction:row-reverse}.flex-row--center{align-items:center;justify-content:center}.flex-row--between{align-items:center;justify-content:space-between}.flex-row--left{align-items:center;justify-content:flex-start}@media (max-width: 1023px){.flex-row--left{justify-content:center}}.flex-col{display:flex;flex-direction:column;flex-wrap:wrap;gap:10px}.flex-col--reverse{flex-direction:row-reverse}.flex-col--center{align-items:center;justify-content:center}.mt--0{margin-top:0}.mb--0{margin-bottom:0}.pt--0{padding-top:0}.pb--0{padding-bottom:0}.mt--10{margin-top:10px}.mb--10{margin-bottom:10px}.pt--10{padding-top:10px}.pb--10{padding-bottom:10px}.mt--20{margin-top:20px}.mb--20{margin-bottom:20px}.pt--20{padding-top:20px}.pb--20{padding-bottom:20px}.mt--25{margin-top:25px}.mb--25{margin-bottom:25px}.pt--25{padding-top:25px}.pb--25{padding-bottom:25px}.mt--30{margin-top:30px}.mb--30{margin-bottom:30px}.pt--30{padding-top:30px}.pb--30{padding-bottom:30px}.mt--40{margin-top:40px}.mb--40{margin-bottom:40px}.pt--40{padding-top:40px}.pb--40{padding-bottom:40px}.mt--50{margin-top:50px}.mb--50{margin-bottom:50px}.pt--50{padding-top:50px}.pb--50{padding-bottom:50px}.mt--60{margin-top:60px}.mb--60{margin-bottom:60px}.pt--60{padding-top:60px}.pb--60{padding-bottom:60px}.mt--70{margin-top:70px}.mb--70{margin-bottom:70px}.pt--70{padding-top:70px}.pb--70{padding-bottom:70px}.mt--80{margin-top:80px}.mb--80{margin-bottom:80px}.pt--80{padding-top:80px}.pb--80{padding-bottom:80px}.mt--90{margin-top:90px}.mb--90{margin-bottom:90px}.pt--90{padding-top:90px}.pb--90{padding-bottom:90px}.mt--100{margin-top:100px}.mb--100{margin-bottom:100px}.pt--100{padding-top:100px}.pb--100{padding-bottom:100px}.wrapper-big{max-width:100%;padding:0}@media (min-width: 540px){.wrapper-big{padding:0}}@media (min-width: 768px){.wrapper-big{padding:0}}@media (min-width: 1024px){.wrapper-big{padding:0 40px}}@media (min-width: 1280px){.wrapper-big{padding:0 20px}}@media (min-width: 1366px){.wrapper-big{padding:0 13px}}@media (min-width: 1680px){.wrapper-big{padding:0 40px}}@media (min-width: 1800px){.wrapper-big{padding:0 60px}}.wrapper-medium{max-width:100%;padding:0;min-width:-webkit-fill-available}@media (min-width: 540px){.wrapper-medium{padding:0 28px}}@media (min-width: 768px){.wrapper-medium{padding:0 45px}}@media (min-width: 1024px){.wrapper-medium{padding:0 55px}}@media (min-width: 1280px){.wrapper-medium{padding:0 59px}}@media (min-width: 1366px){.wrapper-medium{padding:0 65px}}@media (min-width: 1680px){.wrapper-medium{padding:0}}@media (min-width: 1800px){.wrapper-medium{padding:0}}.module-spacer--bottom{padding-bottom:35px}@media (min-width: 540px){.module-spacer--bottom{padding-bottom:40px}}@media (min-width: 768px){.module-spacer--bottom{padding-bottom:80px}}@media (min-width: 1680px){.module-spacer--bottom{padding-bottom:90px}}.module-spacer-small--bottom{padding-bottom:30px}@media (min-width: 540px){.module-spacer-small--bottom{padding-bottom:40px}}@media (min-width: 768px){.module-spacer-small--bottom{padding-bottom:50px}}@media (min-width: 1680px){.module-spacer-small--bottom{padding-bottom:50px}}@media (min-width: 1280px){.figure-sticky{position:sticky!important;top:8rem}}.figure-content{width:100%;aspect-ratio:1;display:flex;cursor:default;align-items:center;justify-content:center;position:relative;border-radius:.6rem;overflow:hidden}.figure-full{position:absolute;top:0;left:0;width:100%;height:100%;background-position:50% 50%;background-size:cover;background-repeat:no-repeat;margin:0;z-index:-1}.figure-zoom figure{-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.figure-zoom:hover figure{-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);transform:scale(1.1)}.slider-arrows--center .owl-nav{position:absolute;top:50%;width:106%;display:flex;justify-content:space-between;margin:0;left:50%;transform:translate(-50%) translateY(-50%);z-index:-1}.slider-arrows--center .owl-nav [class*=owl-]{background-color:transparent;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.slider-arrows--center .owl-nav [class*=owl-]:hover{background-color:transparent;-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic);transform:scale(1.5)}.slider-circle--center .owl-nav{position:absolute;top:50%;width:calc(100% - 240px);display:flex;justify-content:space-between;margin:0;left:120px;transform:translateY(-50%)}.slider-circle--center .owl-nav [class*=owl-]{background-color:#fff;border-radius:100%;padding:4px}.slider-circle--center .owl-nav [class*=owl-]:hover{background-color:#fff}@media (max-width: 767px){.slider-circle--center .owl-nav .btn__circle{width:38px;height:38px}}.slider-circle--center--centerFull .owl-nav{width:110%;left:-5%}.btn{cursor:pointer;font-family:var(--corp-font);-webkit-transition:var(--stransition-basic);-moz-transition:var(--stransition-basic);-ms-transition:var(--stransition-basic);-o-transition:var(--stransition-basic);transition:var(--stransition-basic)}.btn__light{border:2px solid var(--color-light-btn);color:var(--color-light-btn);background-color:transparent}.btn__light:hover{border:2px solid var(--color-line-light-btn-hover);background-color:var(--color-line-light-btn-hover);color:var(--color-light-btn-hover)}.btn__dark{border:2px solid var(--color-line-dark-btn);color:var(--color-dark-btn);background-color:var(--color-background)}.btn__dark:hover{border:2px solid var(--color-line-dark-btn-hover);background-color:var(--color-line-dark-btn-hover);color:var(--color-dark-btn-hover)}.btn__dark-white{border:2px solid var(--color-line-dark-btn);color:var(--color-dark-btn);background-color:transparent}.btn__dark-white:hover{border:2px solid white;background-color:#fff;color:var(--color-dark-btn-hover)}.btn__dark-filled{border:2px solid var(--color-line-dark-btn-filled);color:var(--color-dark-btn-filled);background-color:var(--color-line-dark-btn-filled)}.btn__dark-filled:hover{border:2px solid var(--color-line-dark-btn-filled-hover);background-color:var(--color-line-dark-btn-filled-hover);color:var(--color-dark-btn-filled-hover)}.btn__white{border:2px solid white;color:var(--color-dark-btn);background-color:var(--color-background)}.btn__white:hover{border:2px solid white;background-color:#fff;color:var(--color-dark-btn-hover)}.btn__laundry{border:2px solid #005f87;color:#005f87;background-color:var(--color-background);opacity:.5}.btn__laundry:hover{background-color:#005f87;color:#fff;opacity:1}.btn__circle-container{border-radius:50%;padding:6px}.btn__circle{width:40px;height:40px;border-radius:50%;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;text-align:center}.btn__circle--social-media{width:60px;height:60px;color:var(--color-social-media)}.btn__circle:hover--instagram{background-color:var(--color-instagram);color:var(--color-social-media)}.btn__circle:hover--tiktok,.btn__circle:hover--facebook,.btn__circle:hover--youtube,.btn__circle:hover--linkedin{color:var(--color-background)}.btn__circle:hover--tiktok{background-color:var(--color-tiktok)}.btn__circle:hover--facebook{background-color:var(--color-facebook)}.btn__circle:hover--youtube{background-color:var(--color-youtube)}.btn__circle:hover--linkedin{background-color:var(--color-linkedin)}.btn__circle-icon{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;font-size:22px}.btn__circle-icon.icon--size12{font-size:12px}.btn__box{width:var(--size-btn-box);height:50px;border-radius:6px;font-weight:700;font-size:19px;line-height:24.74px;text-align:center}.btn__box.btn-small{width:var(--size-btn-box-mobile)}@media (min-width: 540px){.btn__box.btn-small{width:var(--size-btn-box)}}.btn__box-container mat-icon{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap}.form-error{font-family:var(--tent-font);color:#df6a6a;font-size:13px}.invalid{margin-bottom:10px}@media (min-width: 768px){.tent-loyalty--content{padding-inline:70px}}.tent-loyalty--head{display:flex;align-items:center;justify-content:center;gap:10px;flex-direction:column;margin-bottom:30px;margin-top:30px}.tent-loyalty--head--tit{font-weight:700;text-align:center}.tent-loyalty--head--text{font-weight:400;text-align:center}.tent-loyalty--head .discount-loyalty{position:relative;display:flex;width:100%;justify-content:center;align-items:center;padding:20px 0}.tent-loyalty--head .discount-loyalty .texts-container{display:flex;align-items:end;justify-content:center;gap:10px;z-index:1;margin-bottom:10px}@media (max-width: 539px){.tent-loyalty--head .discount-loyalty .texts-container{align-items:center;flex-direction:column}}.tent-loyalty--head .discount-loyalty .img-container{position:absolute}@media (max-width: 539px){.tent-loyalty--head .discount-loyalty .img-container img{width:90vw}}.tent-loyalty--box{display:flex;align-items:center;flex-direction:column;border-radius:16px;margin-bottom:20px;transition:opacity .9s ease;cursor:pointer}.tent-loyalty--box--inner{display:flex;width:100%;justify-content:flex-start;align-items:flex-start;padding-block:20px;position:relative;flex-direction:column}.tent-loyalty--box--inner span{width:100%;font-size:48px}.tent-loyalty--box--inner span.loyalty-icon{height:70px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--color-background-3)}.tent-loyalty--box--inner span.loyalty-icon.color--brown{background-color:var(--color-background-10)}@media (max-width: 1365px){.tent-loyalty--box--inner span,.tent-loyalty--box--inner p{width:90%}.tent-loyalty--box--inner span.loyalty-icon,.tent-loyalty--box--inner p.loyalty-icon{width:80px}}@media (max-width: 1279px){.tent-loyalty--box--inner span,.tent-loyalty--box--inner p{width:90%}.tent-loyalty--box--inner span.loyalty-icon,.tent-loyalty--box--inner p.loyalty-icon{width:80px}}.tent-loyalty--box--title{display:flex;align-items:center;padding-inline:20px;width:calc(100% - 40px);gap:10px;position:relative;padding-bottom:10px;margin-bottom:10px}.tent-loyalty--box--title--level span{font-weight:700}.tent-loyalty--box--title:before{content:\"\";width:calc(100% - 40px);height:1px;display:block;position:absolute;left:20px;bottom:0;background-color:#ffffff80}.tent-loyalty--box--title.color--brown:before{background-color:#8a583677}.tent-loyalty--box--info{padding-left:110px;display:flex;flex-direction:column;align-items:flex-start}.tent-loyalty--box--info.hidden{display:none}@media (max-width: 1279px){.tent-loyalty--box--info span{width:100%}}@media (max-width: 767px){.tent-loyalty--box--info{flex-direction:column;align-items:center;gap:15px;width:100%;padding:0%}.tent-loyalty--box--info span,.tent-loyalty--box--info p{width:100%;text-align:center}}@media (max-width: 539px){.tent-loyalty--box--info{padding-left:0;display:flex;align-items:center;justify-content:center;width:100%}}.tent-loyalty--box .tent-loyalty--btn-arrow{margin-right:0;position:absolute;right:10px}.tent-loyalty--box .tent-loyalty--btn-arrow.reverse{transform:rotate(180deg)}.tent-loyalty--box .tent-loyalty--btn-arrow ::ng-deep button{background-color:#fff;border-color:#fff}.tent-loyalty--box .tent-loyalty--btn-arrow ::ng-deep:hover button{background-color:var(--color-title-2)}.tent-loyalty--box--list{display:flex;flex-wrap:wrap;padding-bottom:20px;max-width:max-content;width:90%;align-items:center;justify-content:center;gap:20px;display:none}.tent-loyalty--box--list li{background-color:#fff;border-radius:16px;padding:20px;width:100%;flex-direction:column;align-items:center}.tent-loyalty--box--item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:20px;text-align:center}.tent-loyalty--box--item--icon{font-size:60px;width:60px;height:60px;background-color:var(--color-background-6);-webkit-mask-size:contain;mask-size:contain}.tent-loyalty--box--item .text{text-align:center}.tent-loyalty--box.open .tent-loyalty--box--list{display:flex}.tent-loyalty--box.open .tent-loyalty--box--title:before{display:none!important}@media (min-width: 768px){.tent-loyalty--box--list{align-items:stretch;justify-content:space-between;padding-bottom:30px;min-width:90%}.tent-loyalty--box--list li{width:calc(50% - 50px)}.tent-loyalty--box--list li.first-item-big{width:100%}}@media (min-width: 1280px){.tent-loyalty--box--inner{flex-direction:row;align-items:center;padding-block:30px}.tent-loyalty--box--title{width:auto;gap:40px;padding-right:40px;padding-bottom:0;margin-bottom:0;padding-inline:30px}.tent-loyalty--box--title:before{height:100%;width:1px;right:0;top:0;left:auto}.tent-loyalty--box--title span{width:120px}.tent-loyalty--box--info{padding-left:40px}.tent-loyalty--box .tent-loyalty--btn-arrow{right:40px}.tent-loyalty--box--item--icon{font-size:80px;width:100px;height:100px;background-color:var(--color-background-6);-webkit-mask-size:contain;mask-size:contain}.tent-loyalty--box--list{width:calc(100% - 140px);min-width:calc(100% - 140px)}.tent-loyalty--box--list li{width:calc(33% - 60px);min-height:190px;align-items:center;justify-content:center;display:flex}.tent-loyalty--box--list li.first-item-big{width:calc(33% - 60px)}}@media (min-width: 540px){.tent-loyalty .tent-loyalty--info--text.text{line-height:40px;bottom:5px;position:relative}}@media (max-width: 374px){.tent-loyalty .tent-loyalty--info--text.text{width:40%}}@media (min-width: 1024px){.tent-loyalty .without-label{display:none}}@media (max-width: 1023px){.tent-loyalty .without-label{display:block}}@media (min-width: 1024px){.tent-loyalty .with-label{display:block}}@media (max-width: 1023px){.tent-loyalty .with-label{display:none}}\n"] }]
|
|
3882
3882
|
}], propDecorators: { id: [{
|
|
3883
3883
|
type: Input
|
|
3884
3884
|
}], title: [{
|