.page-home { background-color: #000; } .page-home .sec-main { --sec-main-ink: #f8f8f8; --hero-video-anchor-shift: 0px; z-index: 1; max-width: none; color: var(--sec-main-ink); background-color: #000; flex-direction: column; align-items: center; display: flex; min-height: 105vh; min-height: 105dvh; overflow: visible; } .page-home .container-margin { position: relative; z-index: 2; flex-flow: column; width: 100%; margin-left: max(1rem, 1.2em); margin-right: max(1rem, 1.2em); display: block; } .page-home .head-txt-wrapper { width: 100%; justify-content: center; align-items: center; padding-top: clamp(1.5rem, 5.5vw, 3.5rem); padding-bottom: clamp(0.5rem, 2vw, 1.5rem); display: flex; position: relative; z-index: 2; } .page-home .heading { color: #fff; text-align: center; letter-spacing: -0.06em; text-transform: none; margin: 0; font-family: Antonio, sans-serif; font-size: var(--text-tpl-heading-display); font-weight: 700; line-height: 0.94; } .page-home .heading .color { color: var(--brand-red); } .page-home .background-video.ng-background-video { position: relative; z-index: 1; overflow: hidden; width: 100%; flex: 1 1 auto; min-height: clamp(36rem, 68vmin, 54rem); height: min(92vh, 96rem); margin-top: calc(clamp(-6rem, -9.5vw, -3rem) + var(--hero-video-anchor-shift)); display: flex; color: #fff; } .page-home .hero-video-collage { position: absolute; inset: 0; } .page-home .hero-video-collage.hero-video-collage--strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 0.8vw, 14px); align-items: stretch; padding: clamp(8px, 0.9vw, 14px); } .page-home .hero-video-card { position: relative; overflow: hidden; border-radius: 0; box-shadow: 0 22px 50px rgba(0, 0, 0, 0.46), 0 4px 14px rgba(0, 0, 0, 0.3); background: #050505; aspect-ratio: 9 / 16; } .page-home .hero-video-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.34) 100% ); } .page-home .background-video.ng-background-video::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.38) 45%, rgba(0, 0, 0, 0.5) 100% ); } .page-home .background-video.ng-background-video .hero-video-card > video { width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; object-position: center center; z-index: 0; position: absolute; inset: -1px; transform: none; filter: contrast(1.28); } .page-home .background-video.ng-background-video video::-webkit-media-controls-start-playback-button { -webkit-appearance: none; display: none !important; } @media (max-width: 991px) { .page-home .head-txt-wrapper { padding-top: clamp(2.25rem, 8vw, 4rem); } .page-home .background-video.ng-background-video { min-height: clamp(36rem, 68vmin, 54rem); height: min(92vh, 96rem); margin-top: calc(clamp(-5rem, -8vw, -2rem) + var(--hero-video-anchor-shift)); } .page-home .hero-video-collage.hero-video-collage--strip { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); } .page-home .hero-video-card { aspect-ratio: auto; width: 100%; height: 100%; min-width: 0; } } @media (max-width: 479px) { .page-home .head-txt-wrapper { padding-top: clamp(2.75rem, 10vw, 5rem); } .page-home .heading { text-align: center; font-size: var(--text-tpl-heading-mobile); line-height: 1; } .page-home .background-video.ng-background-video { min-height: clamp(30rem, 58vmin, 44rem); height: min(84vh, 76rem); margin-top: calc(clamp(-4.75rem, -7.5vw, -1.75rem) + var(--hero-video-anchor-shift)); } .page-home .hero-video-collage.hero-video-collage--strip { gap: 8px; padding: 8px 0; } .page-home .hero-video-card { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.44); } .page-home .container-margin { margin-left: max(1rem, 5vw); margin-right: max(1rem, 5vw); } } .page-home .sec-classes { position: relative; background: #0d0d10 url("/media/images/classes/neo-gym-sec-classes-bg.webp") center top / cover no-repeat; padding-bottom: clamp(8rem, 16vw, 14rem); } .page-home .container-wrapper-classes { z-index: 1; width: auto; color: #f8f8f8; padding-left: max(1rem, 1.2em); padding-right: max(1rem, 1.2em); } .page-home .container-wrapper-classes .container { width: 100%; max-width: none; } .page-home .head-classes-wrapper { justify-content: space-between; display: flex; } .page-home .head-txt-wrapper-classes { width: 40%; justify-content: flex-start; align-items: center; display: flex; } .page-home .sec-classes .heading.left { color: #fff; text-align: left; letter-spacing: -0.06em; text-transform: uppercase; margin: 0; font-family: Antonio, sans-serif; font-size: var(--text-tpl-heading-display); font-weight: 700; line-height: 100%; } .page-home .content-txt-wrapper-classes { width: 19.47em; flex-direction: row; justify-content: space-between; align-items: flex-start; margin-top: 11.1em; display: flex; gap: clamp(0.5rem, 2vw, 1.5rem); } .page-home .content-txt-wrapper-classes .txt-30.decor { flex: 0 0 auto; font-family: Antonio, sans-serif; font-size: clamp(1.40625rem, 1.56em, 2.75rem); font-weight: 100; color: #fff; line-height: 1.1; letter-spacing: -0.01em; text-transform: uppercase; display: flex; align-items: flex-start; text-align: left; } .page-home .txt-classes { font-family: Inter, sans-serif; font-size: var(--text-em-full); font-weight: 400; line-height: 140%; } .page-home .txt-classes.caps { color: #fff; text-transform: uppercase; font-weight: 500; line-height: 120%; } .page-home .txt-classes.caps.opacity { color: rgba(255, 255, 255, 0.5); } .page-home .txt-classes.caps.small { font-size: var(--text-em-085); } .page-home .txt-classes-wrapper { width: 13em; text-align: left; flex-direction: column; align-items: flex-end; display: flex; } .page-home .txt-class-wrapper { padding-right: 0.8em; } .page-home .line-big-classes { width: 100%; height: 2px; background-color: #fff; margin-top: 5.7em; } .page-home .classes-content-wrapper { width: 100%; justify-content: flex-start; display: flex; position: relative; } .page-home .classes-content-dropdown { display: none; } .page-home .classes-left-column { width: 38.94em; flex: 0 0 38.94em; position: relative; } .page-home .img-class-wrapper { width: 27em; height: 35em; position: absolute; top: 3em; left: 5em; overflow: hidden; opacity: 0; transform: translate3d(0, 1em, 0) scale(0.985); transition: opacity 0.36s cubic-bezier(0.22, 1, 0.36, 1), transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); } .page-home .img-class-wrapper._2 { top: 6em; } .page-home .img-class-wrapper._3 { top: 9em; } .page-home .img-class-wrapper._4 { top: 12em; } .page-home .img-class-wrapper._5 { top: 30em; } .page-home .img-class-wrapper._6 { top: 38em; } .page-home .img-class-wrapper._7 { top: 42em; } .page-home .img-class-wrapper._8 { top: 47em; } .page-home .img-class-wrapper.is-active { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } .page-home .img-class { width: 100%; height: 102%; object-fit: cover; } .page-home .classes-right-column { width: auto; flex: 1 1 auto; min-width: 0; } .page-home .classes-title-wrapper { padding-top: 2.9em; padding-bottom: 1em; } .page-home .classes-title-wrapper .txt-classes.caps, .page-home .classes-dropdown-group-title .txt-classes.caps { font-size: var(--text-tpl-classes-group-title); } .page-home .goal-wrapper .txt-classes.caps.opacity, .page-home .drop-content-item .txt-classes.caps.opacity { font-size: var(--text-tpl-classes-group-title); } .page-home .goal-wrapper .txt-classes.caps.small, .page-home .drop-content-item .txt-classes.caps.small { font-size: var(--text-tpl-classes-column-value); } .page-home .classes-raw-wrapper { width: 100%; grid-template-columns: 1fr 0.6fr 0.6fr 0.4fr; align-items: stretch; padding-top: 1.5em; padding-bottom: 2.3em; padding-inline: 0; margin: 0; border: none; background: transparent; font: inherit; text-align: inherit; appearance: none; cursor: pointer; text-decoration: none; display: grid; position: relative; color: #fff; isolation: isolate; } .page-home .class-name-txt { letter-spacing: -0.03em; text-transform: uppercase; font-family: Antonio, sans-serif; font-size: var(--text-tpl-class-row); font-weight: 600; line-height: 80%; } .page-home .goal-wrapper { grid-column-gap: 0.7em; grid-row-gap: 0.7em; flex-direction: column; display: flex; position: relative; opacity: 0; transform: translate3d(0, 0.35rem, 0); transition: opacity 0.26s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .page-home .class-bg { z-index: 0; width: 100%; height: 0%; background-color: var(--brand-red); position: absolute; top: 0; left: 0; transition: height 0.35s ease; } .page-home .lina-small-classes { z-index: 1; width: 100%; height: 2px; background-color: #fff; position: absolute; bottom: 0; left: 0; opacity: 1; transition: opacity 0.22s ease; } .page-home .classes-raw-wrapper > :not(.class-bg):not(.lina-small-classes) { position: relative; z-index: 2; } .page-home .classes-raw-wrapper:hover .class-bg { height: 103%; } .page-home .classes-raw-wrapper:hover .goal-wrapper { opacity: 1; transform: translate3d(0, 0, 0); } .page-home .classes-raw-wrapper:hover .lina-small-classes { opacity: 0; } .page-home .classes-raw-wrapper.is-hover-active .lina-small-classes, .page-home .classes-raw-wrapper.is-hover-neighbor .lina-small-classes { opacity: 0; } .page-home .classes-raw-wrapper:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } @media (min-width: 480px) { .page-home .container-wrapper-classes { box-sizing: border-box; width: 100%; max-width: 100%; font-size: inherit; } body:not(.neogym-route-home) .page-home .container-wrapper-classes { font-size: var(--text-home-classes-zone-scale); } .page-home .classes-content-wrapper { max-width: 100%; } .page-home .head-classes-wrapper { gap: clamp(1rem, 2.5vw, 3rem); } } .page-home .sec-numbers { z-index: 1; width: 100%; max-width: none; color: #f8f8f8; padding: 8em 0 12.5em; position: relative; overflow: hidden; background: #000; } .page-home .sec-numbers .heading.num { white-space: nowrap; font-size: var(--text-tpl-marquee-heading); line-height: 1; margin: 0; display: block; unicode-bidi: isolate; } .page-home .sec-numbers .marquee-track .heading.num, .page-home .sec-numbers .marquee-track2 .heading.num { font-size: var(--text-tpl-marquee-heading); line-height: 0.96; } .page-home .sec-numbers .marquee-track .heading.num .color, .page-home .sec-numbers .marquee-track2 .heading.num .color { font-size: var(--text-em-full); line-height: inherit; } .page-home .marquee-track-wrapper { width: 100%; display: flex; flex-direction: column; gap: 0.6em; direction: ltr; } .page-home .numbers-line { position: relative; display: flex; align-items: center; min-height: clamp(6rem, 12vw, 10rem); } .page-home .marquee-track, .page-home .marquee-track2 { display: flex; align-items: center; position: relative; z-index: 2; min-height: clamp(5rem, 10vw, 8.5rem); width: max-content; animation: numbers-marquee-left 30s linear infinite; } .page-home .marquee-track2 { animation-name: numbers-marquee-right; } .page-home .marquee-list { display: flex; align-items: center; } .page-home .marquee-item { display: flex; align-items: center; min-height: clamp(4rem, 10vw, 8.5rem); } .page-home .marquee-heading { padding-left: 40px; padding-right: 40px; display: flex; align-items: center; } .page-home .margin-30 { height: 1.4em; } .page-home .img-number1-wrapper { z-index: 1; width: clamp(9.375rem, 36em, 100rem); height: clamp(7.9375rem, 20.5em, 100rem); position: absolute; top: 50%; left: 2%; display: flex; align-items: center; justify-content: center; transform: translateY(-43%); pointer-events: none; overflow: hidden; } .page-home .img-number1 { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; filter: grayscale(1); } .page-home .img-number2-wrapper { z-index: 1; width: clamp(9.375rem, 26em, 100rem); height: clamp(7.9375rem, 21em, 100rem); position: absolute; top: 50%; right: 14%; display: flex; align-items: center; justify-content: center; transform: translateY(-43%); pointer-events: none; overflow: hidden; } .page-home .numbers-line--first .marquee-track { z-index: 4; } .page-home .numbers-line--first .img-number2-wrapper { z-index: 3; } .page-home .numbers-line--second .marquee-track2 { z-index: 2; } .page-home .img-number2 { width: 100%; height: 100%; min-width: 0; object-fit: cover; object-position: center center; display: block; filter: grayscale(1); } @keyframes numbers-marquee-left { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } } @keyframes numbers-marquee-right { 0% { transform: translate3d(-50%, 0, 0); } 100% { transform: translate3d(0, 0, 0); } } @media (max-width: 479px) { .page-home .sec-classes { padding-bottom: 8em; } .page-home .head-classes-wrapper { flex-direction: column; gap: 1rem; } .page-home .head-txt-wrapper-classes, .page-home .content-txt-wrapper-classes { width: 100%; } .page-home .sec-classes .heading.left { text-align: start; font-size: var(--text-tpl-heading-mobile); line-height: 1; } .page-home .content-txt-wrapper-classes { margin-top: 0; max-width: 60%; margin-left: auto; margin-right: auto; justify-content: space-between; gap: clamp(0.75rem, 5vw, 2.25rem); box-sizing: border-box; } .page-home .txt-classes-wrapper { width: auto; flex: 1 1 auto; min-width: 0; max-width: 100%; align-items: flex-start; } .page-home .content-txt-wrapper-classes .txt-30.decor { text-align: start; } .page-home .content-txt-wrapper-classes .txt-classes { font-size: var(--text-tpl-classes-rail-mobile); line-height: 1.45; } .page-home .content-txt-wrapper-classes .txt-classes.caps, .page-home .content-txt-wrapper-classes .txt-classes.caps.small { font-size: var(--text-tpl-classes-rail-caps-mobile); } .page-home .classes-content-wrapper { display: none; } .page-home .classes-left-column { display: none; } .page-home .classes-right-column { width: 100%; display: none; } .page-home .classes-raw-wrapper { grid-template-columns: 1fr; gap: 0.75rem; padding-top: 1rem; padding-bottom: 1.4rem; } .page-home .class-name-txt { font-size: var(--text-tpl-class-name-mobile); } .page-home .classes-content-dropdown { padding-top: 0; display: block; } .page-home .dropdown { width: 100%; height: auto; background: transparent; transition: background-color 0.2s ease; } .page-home .class-dropdown-split { display: flex; flex-direction: row; align-items: stretch; gap: clamp(0.5rem, 3vw, 1rem); width: 100%; box-sizing: border-box; transform: translateX(0); transition: transform 0.3s ease; } .page-home .drop-text-stack, .page-home .drop-media-stack { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; } .page-home .drop-media-stack { min-height: 0; } .page-home .classes-dropdown-group { border-bottom: 1px solid #fff; } .page-home .classes-dropdown-group-title { display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem; padding: 2.5rem 0 1.25rem; } .page-home .dropdown-toggle { width: 100%; display: flex; align-items: flex-start; padding: 0.55rem 0 0.9rem; cursor: pointer; } .page-home .dropdown-toggle .class-name-txt { text-align: start; width: 100%; box-sizing: border-box; } .page-home .classes-dropdown-group-title .txt-classes { text-align: start; display: block; } .page-home .drop-wrapper { display: flex; flex-direction: column; position: relative; row-gap: 0.3125rem; padding-bottom: 0.625rem; } .page-home .dropdown-list { display: block; height: 0; overflow: hidden; position: relative; z-index: 3; background: transparent; transition: height 0.3s ease; } .page-home .drop-content { display: flex; flex-direction: column; gap: 1.875rem; padding: 0.3125rem 0 1.5625rem; text-align: start; } .page-home .drop-thumb-wrap { flex: 1 1 auto; align-self: stretch; width: 100%; min-height: 0; display: flex; flex-direction: column; box-sizing: border-box; padding-block: clamp(0.35rem, 2.2vw, 0.65rem); padding-inline: clamp(0.35rem, 2.2vw, 0.65rem); overflow: hidden; } .page-home .class-entry:not(.is-open) .drop-thumb-wrap { flex: 0 0 auto; padding-block: 0; } .page-home .class-entry.is-open .drop-thumb-wrap { flex: 1 1 auto; min-height: calc(var(--text-tpl-classes-drop-thumb-h-mobile) + clamp(0.7rem, 4.4vw, 1.3rem)); } .page-home .img-drop { flex: 1 1 auto; width: 100%; min-height: 0; object-fit: cover; object-position: center center; opacity: 0; transition: opacity 0.2s ease; margin: 0; } .page-home .class-entry:not(.is-open) .img-drop { flex: 0 0 auto; height: 0; max-height: 0; min-height: 0; overflow: hidden; } .page-home .class-entry.is-open .img-drop { flex: 1 1 auto; height: auto; max-height: none; } .page-home .img-drop.is-active { opacity: 1; } .page-home .drop-content-item { display: flex; flex-direction: column; gap: 0.375rem; padding-inline-start: 0; padding-inline-end: 0; text-align: start; position: relative; } .page-home .drop-content-item .txt-classes { color: #fff; } .page-home .class-entry .class-name-txt { font-size: var(--text-tpl-class-name-mobile); line-height: 0.9; } .page-home .class-entry.is-open .class-dropdown-split { transform: translateX(0.9375rem); } html[dir="rtl"] .page-home .class-entry.is-open .class-dropdown-split { transform: translateX(-0.9375rem); } .page-home .class-entry.is-open { background: var(--brand-red); } .page-home .line-class { width: 100%; height: 1px; margin: 0; background: #fff; } .page-home .sec-numbers { padding-top: 0; padding-bottom: 6em; overflow: hidden; } .page-home .sec-numbers .heading.num, .page-home .sec-numbers .marquee-track .heading.num, .page-home .sec-numbers .marquee-track2 .heading.num { font-size: var(--text-tpl-marquee-heading-mobile); line-height: 1; } .page-home .marquee-heading { padding-left: 20px; padding-right: 20px; } .page-home .margin-30 { height: 2em; } .page-home .img-number1-wrapper { bottom: 0%; left: 5%; top: auto; transform: none; } .page-home .img-number2-wrapper { top: 8%; right: 7%; transform: none; } } .page-home .sec-bonuses { z-index: 1; max-width: none; color: #f8f8f8; padding: 0 0 10.67em; position: relative; overflow: visible; background: #000; } .page-home .bonus-head-wrapper { position: relative; overflow: hidden; min-height: clamp(40rem, 88vw, 68rem); } .page-home .bonuses-img-wrapper { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; } .page-home .bonus-img { position: absolute; top: -12%; left: 0; width: 100%; height: 124%; object-fit: cover; object-position: center center; display: block; filter: grayscale(1); } .page-home .title-bonuses-wrapper { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; pointer-events: none; z-index: 2; padding-bottom: 0; } .page-home .title-bonuses-wrapper .heading { font-size: var(--text-tpl-heading-display); line-height: 0.95; } .page-home .title-bonuses-line { text-align: center; } .page-home .title-bonuses-wrapper .img-star._2 { width: clamp(4.5rem, 14vw, 13rem); height: auto; margin-top: -0.18em; margin-bottom: -0.12em; } .page-home .title-bonuses-wrapper .bonuses-star { position: relative; z-index: 6; } .page-home .bonuses-cards-grid { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 6; } .page-home .sec-bonuses .class-wrapper { background-color: #fff; color: #000; width: clamp(15rem, 20vw, 22rem); max-width: min(22rem, calc(100vw - 2rem)); min-height: clamp(20rem, 24vw, 25.8em); height: auto; min-width: 0; display: flex; flex-direction: column; position: absolute; overflow-wrap: break-word; word-wrap: break-word; top: 50%; left: 50%; opacity: 1; --bonus-x: 0px; --bonus-y: 0px; --bonus-rot: 0deg; --bonus-scale: 0.84; transform: translate(calc(-50% + var(--bonus-x)), calc(-50% + var(--bonus-y))) scale(var(--bonus-scale)) rotate(var(--bonus-rot)); transform-origin: 50% 50%; transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); } .page-home .sec-bonuses .class-wrapper._1 { --bonus-rot: -8deg; } .page-home .sec-bonuses .class-wrapper._2 { --bonus-rot: 6deg; } .page-home .sec-bonuses .class-wrapper._3 { --bonus-rot: -4deg; } .page-home .sec-bonuses .class-wrapper._4 { --bonus-rot: 9deg; } .page-home .sec-bonuses.is-bonuses-active .class-wrapper._1 { --bonus-x: var(--bonus-active-x, clamp(7.5rem, 16vw, 13.5rem)); --bonus-y: var(--bonus-active-y, clamp(-7.5rem, -9vw, -5.5rem)); --bonus-rot: 6deg; --bonus-scale: 1; transition-delay: 0.05s; } .page-home .sec-bonuses.is-bonuses-active .class-wrapper._2 { --bonus-x: var(--bonus-active-x, clamp(-13rem, -15vw, -7rem)); --bonus-y: var(--bonus-active-y, clamp(-6.5rem, -7vw, -3.8rem)); --bonus-rot: -5deg; --bonus-scale: 1; transition-delay: 0.14s; } .page-home .sec-bonuses.is-bonuses-active .class-wrapper._3 { --bonus-x: var(--bonus-active-x, clamp(8rem, 15.5vw, 13rem)); --bonus-y: var(--bonus-active-y, clamp(4.5rem, 8.5vw, 9rem)); --bonus-rot: -4deg; --bonus-scale: 1; transition-delay: 0.23s; } .page-home .sec-bonuses.is-bonuses-active .class-wrapper._4 { --bonus-x: var(--bonus-active-x, clamp(-12.5rem, -14.5vw, -6.5rem)); --bonus-y: var(--bonus-active-y, clamp(4rem, 7.5vw, 8rem)); --bonus-rot: 7deg; --bonus-scale: 1; transition-delay: 0.32s; } .page-home .sec-bonuses .class-head-wrapper { padding: 1em 1em 2em; flex: 0 0 auto; min-width: 0; width: 100%; } .page-home .sec-bonuses .class-img-wrapper { width: 100%; height: clamp(12.075rem, 13.2em, 20rem); flex: 0 0 auto; position: relative; overflow: hidden; } .page-home .sec-bonuses .img-bonus { z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; position: relative; } .page-home .sec-bonuses .img-bg-bonus { z-index: 2; width: 100%; height: 100%; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); object-fit: cover; object-position: center center; pointer-events: none; } .page-home .sec-bonuses .class-bottom-wrapper { justify-content: space-between; align-items: center; padding: 1em; display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; margin-top: auto; min-width: 0; width: 100%; box-sizing: border-box; } .page-home .sec-bonuses .txt-50 { z-index: 2; color: #000; letter-spacing: -0.04em; text-transform: uppercase; font-family: Antonio, sans-serif; font-size: var(--text-tpl-card-title); font-weight: 700; line-height: 1.12; min-width: 0; max-width: 100%; overflow-wrap: break-word; word-wrap: break-word; } .page-home .sec-bonuses .txt-30.class { color: #000; text-align: left; font-size: var(--text-tpl-caption-em); padding: 0; flex: 0 0 auto; } .page-home .sec-bonuses .btt-second { color: var(--brand-red); letter-spacing: -0.01em; text-transform: uppercase; background: transparent; padding: 0; font-family: Antonio, sans-serif; font-size: var(--text-tpl-bonus-link); font-weight: 700; line-height: 1.1; text-decoration: none; flex: 1 1 auto; min-width: 0; text-align: end; overflow-wrap: break-word; word-wrap: break-word; } .page-home .sec-bonuses .btt-second:hover { color: #fff; } @media (max-width: 479px) { .page-home .bonus-head-wrapper { min-height: 0; overflow: visible; display: block; } .page-home .bonuses-img-wrapper { position: relative; inset: auto; width: 100%; height: auto; overflow: hidden; } .page-home .bonus-img { position: relative; width: 100%; height: auto; display: block; } .page-home .title-bonuses-wrapper { position: absolute; inset: 0; justify-content: center; z-index: 2; pointer-events: none; } .page-home .bonuses-cards-grid { margin-top: 0; height: auto; position: static; display: flex; gap: 0.8rem; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0 1rem 6em; scrollbar-width: none; } .page-home .bonuses-cards-grid::-webkit-scrollbar { display: none; } .page-home .sec-bonuses .class-wrapper { width: min(86vw, 22rem); min-width: min(86vw, 22rem); max-width: min(86vw, 22rem); height: auto; position: relative; top: auto; left: auto; opacity: 1; transform: none; transition: none; flex: 0 0 auto; scroll-snap-align: start; overflow-wrap: break-word; word-wrap: break-word; } .page-home .sec-bonuses { padding-top: 0; padding-bottom: 0; } .page-home .title-bonuses-wrapper { gap: 0.2rem; } .page-home .title-bonuses-wrapper .heading { font-size: var(--text-tpl-heading-mobile); line-height: 1; } .page-home .sec-bonuses .txt-50 { font-size: var(--text-tpl-card-title-mobile); line-height: 1.1; } .page-home .sec-bonuses .btt-second { font-size: var(--text-tpl-bonus-link-mobile); line-height: 1.1; } .page-home .sec-bonuses .txt-30.class { font-size: var(--text-tpl-membership-copy-mobile); } } .page-home .sec-membership { z-index: 1; max-width: none; color: #f8f8f8; padding: 0 0 13.5em; position: relative; overflow: visible; background: #000; font-size: var(--text-tpl-root-vw); line-height: 1.3; } .page-home .container-wrapper-price { padding-left: max(1rem, 5vw); padding-right: max(1rem, 5vw); } .page-home .container-wrapper-prices { display: flex; flex-direction: column; gap: clamp(2rem, 5vw, 4.5rem); } .page-home .sec-membership .heading { margin: 0; font-size: var(--text-tpl-heading-display); line-height: 0.94; } .page-home .prices-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: clamp(1rem, 2.1vw, 2.6em); align-items: stretch; } .page-home .price-wrapper { width: 100%; aspect-ratio: 2 / 3; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; position: relative; } .page-home .sec-membership .price-wrapper { font-size: calc(1em / var(--ng-type-scale, 1)); } .page-home .sec-membership .price-wrapper[data-reveal].is-visible:hover { transform: translateY(-6px) scale(1); z-index: 2; } .page-home .sec-membership .price-wrapper[data-reveal].is-visible .price-head .txt-30.price { animation: memCardTitle 0.68s cubic-bezier(0.19, 1, 0.22, 1) 0.06s both; } .page-home .sec-membership .price-wrapper[data-reveal].is-visible .price-head-wrapper > .price-line-head { transform-origin: left center; animation: memCardTitleLine 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0.32s both; } @keyframes memCardTitle { from { opacity: 0; transform: translate3d(0, 0.45em, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes memCardTitleLine { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .page-home .sec-membership .price-wrapper[data-reveal].is-visible .price-head .txt-30.price, .page-home .sec-membership .price-wrapper[data-reveal].is-visible .price-head-wrapper > .price-line-head { animation: none; opacity: 1; transform: none; } .page-home .sec-membership .price-wrapper[data-reveal].is-visible .price-head-wrapper > .price-line-head { transform: scaleX(1); } } .page-home .price-img { z-index: -1; width: 100%; height: 100%; object-fit: fill; position: absolute; inset: 0; } .page-home .price-head-wrapper { display: flex; flex-direction: column; align-items: flex-start; position: relative; } .page-home .price-line-head { width: 100%; height: 1px; background-color: #424242; position: absolute; left: 0; right: 0; bottom: 0; } .page-home .price-line-head.bottom { top: 0; bottom: auto; } .page-home .price-line-head.bottom.gray { background-color: rgba(133, 133, 133, 0.4); } .page-home .price-head { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1.1em; padding: 1.8em; } .page-home .txt-30.price { color: #fff; letter-spacing: -0.04em; text-transform: uppercase; font-family: Antonio, sans-serif; font-size: var(--text-tpl-price-card-title); font-weight: 700; line-height: 1; } .page-home .txt-30.price.black { color: #000; } .page-home .sec-membership .txt-50 { font-size: var(--text-tpl-price-body); line-height: 0.95; } .page-home .sec-membership .txt-50.white { color: #fff; } .page-home .sec-membership .txt-50.black, .page-home .sec-membership .txt-50.white.black { color: #000; } .page-home .price-txt-wrapper { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; } .page-home .price-txt { width: 100%; display: flex; flex-direction: column; gap: 0.65em; padding: 1.8em; padding-top: 1.6em; } .page-home .sec-membership .txt-classes { color: #fff; letter-spacing: -0.02em; text-transform: uppercase; font-family: Antonio, sans-serif; font-size: var(--text-tpl-membership-copy); font-weight: 500; line-height: 1.1; } .page-home .sec-membership .txt-classes.black { color: #000; } .page-home .price-bottom-wrapper { min-height: 5.8em; height: auto; display: flex; align-items: flex-start; position: relative; } .page-home .price-cost-wrapper, .page-home .price-btn-wrapper { width: 50%; height: 100%; display: flex; justify-content: center; align-items: center; } .page-home .price-cost-wrapper { padding-top: 0; position: relative; } .page-home .text-span-7 { letter-spacing: 0; text-transform: none; font-family: Inter, sans-serif; font-size: var(--text-tpl-micro-currency); font-weight: 400; } .page-home .btn-price { width: 100%; height: 100%; background-color: var(--brand-red); color: #fff; text-align: center; letter-spacing: -0.04em; text-transform: uppercase; display: flex; justify-content: center; align-items: center; font-family: Antonio, sans-serif; font-size: var(--text-tpl-price-btn); font-weight: 700; line-height: 1; text-decoration: none; transition: all 0.3s; } .page-home .btn-price:hover { color: var(--brand-red); background-color: #fff; } .page-home .btn-price.black { background-color: #1b1b1b; color: #fff; } .page-home .btn-price.black:hover { background-color: #1b1b1b; color: var(--brand-red); } .page-home .text-span-8 { font-weight: 100; } @media (max-width: 479px) { .page-home .sec-membership { padding-bottom: 5.5rem; } .page-home .sec-membership .heading { font-size: var(--text-tpl-heading-mobile); line-height: 0.95; } .page-home .container-wrapper-price { padding-left: 1rem; padding-right: 1rem; } .page-home .prices-wrapper { grid-template-columns: 1fr; gap: 1rem; } .page-home .price-wrapper { min-height: 0; } .page-home .price-head { padding: 1.3rem; gap: 0.8rem; } .page-home .price-txt { padding: 1.3rem; padding-top: 1rem; gap: 0.45rem; } .page-home .price-bottom-wrapper { min-height: 4.6rem; } .page-home .txt-30.price { font-size: var(--text-tpl-price-card-title-mobile); } .page-home .sec-membership .txt-50 { font-size: var(--text-tpl-price-body-mobile); } .page-home .sec-membership .txt-classes { font-size: var(--text-tpl-membership-copy-mobile); line-height: 1.18; } .page-home .btn-price { font-size: var(--text-tpl-price-btn-mobile); } .page-home .text-span-7 { font-size: var(--text-tpl-micro-currency-mobile); } } .page-home .sec-map { z-index: 1; max-width: none; color: #f8f8f8; padding: 0 0 12em; position: relative; overflow: visible; background: #000; } .page-home .container-wrapper-map { padding-left: max(1rem, 1.2em); padding-right: max(1rem, 1.2em); } .page-home .content-map-wrapper { width: 100%; min-height: 48em; display: grid; grid-template-columns: minmax(0, 1fr) minmax(max(20rem, 20em), 47.55em); grid-template-areas: "head map" "card map"; align-items: start; column-gap: clamp(1rem, 2.6vw, 2.2rem); position: relative; } .page-home .head-map-wrapper { z-index: 2; width: 18em; grid-area: head; position: relative; top: auto; left: auto; } .page-home .head-map-wrapper--map-head { width: auto; min-width: 18em; max-width: min(100%, max(32rem, 32em)); } .page-home .txt-90 { color: #fff; letter-spacing: -0.03em; text-transform: uppercase; font-family: Antonio, sans-serif; font-size: var(--text-tpl-map-headline); font-weight: 700; line-height: 1; } .page-home .txt-90--map-head { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 100%; } .page-home .map-head__line { display: block; max-width: 100%; white-space: nowrap; } .page-home .map-head__line + .map-head__line { margin-top: 0.04em; } .page-home .sec-map .tabs-menu.is-map { z-index: 1; width: 100%; height: 100%; margin: 0; position: absolute; inset: 0; } .page-home .img-map { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; } .page-home .map-chrono { --chrono-tick-inner: 68%; --chrono-major-outer: 99%; --chrono-minor-outer: 74%; --chrono-major-step: 30deg; --chrono-minor-step: 3deg; --chrono-major-width: 0.62deg; --chrono-minor-width: 0.08deg; position: absolute; inset: 0; width: 100%; height: 100%; margin: auto; border-radius: 50%; } .page-home .map-chrono-ring { position: absolute; inset: -1.35rem; border-radius: 50%; z-index: 3; pointer-events: none; } .page-home .map-chrono-ring--major { background: repeating-conic-gradient( from -90deg, rgba(102, 102, 102, 0.95) 0deg var(--chrono-major-width), rgba(102, 102, 102, 0) var(--chrono-major-width) var(--chrono-major-step) ); -webkit-mask: radial-gradient(circle, transparent var(--chrono-tick-inner), #000 var(--chrono-tick-inner) var(--chrono-major-outer), transparent var(--chrono-major-outer)); mask: radial-gradient(circle, transparent var(--chrono-tick-inner), #000 var(--chrono-tick-inner) var(--chrono-major-outer), transparent var(--chrono-major-outer)); } .page-home .map-chrono-ring--minor { background: repeating-conic-gradient( from -88.5deg, rgba(86, 86, 86, 0.92) 0deg var(--chrono-minor-width), rgba(86, 86, 86, 0) var(--chrono-minor-width) var(--chrono-minor-step) ); -webkit-mask: radial-gradient(circle, transparent var(--chrono-tick-inner), #000 var(--chrono-tick-inner) var(--chrono-minor-outer), transparent var(--chrono-minor-outer)); mask: radial-gradient(circle, transparent var(--chrono-tick-inner), #000 var(--chrono-tick-inner) var(--chrono-minor-outer), transparent var(--chrono-minor-outer)); } .page-home .img-map-new { z-index: 1; width: 100%; height: 100%; margin: 0; border-radius: 50%; object-fit: cover; filter: grayscale(1) invert(1) contrast(1.05); } .page-home .tabs-map { z-index: 1; grid-area: map; width: 100%; aspect-ratio: 1 / 1; position: relative; justify-self: end; } .page-home .sec-map .tabs-menu.ng-tab-menu { z-index: 3; width: 100%; height: 100%; margin: 0; position: absolute; inset: 0; } .page-home .tab-link-map { --map-pin-x: 50%; --map-pin-y: 50%; width: 4.74em; height: 4.74em; background: transparent; border: 0; padding: 0; position: absolute; left: var(--map-pin-x); top: var(--map-pin-y); transform: translate(-50%, -50%); cursor: pointer; } .page-home .tab-link-border { width: 4.74em; height: 4.74em; border: 1px solid #454545; border-radius: 1000px; display: flex; justify-content: center; align-items: center; } .page-home .tab-dot-big-active { width: 0.8em; height: 0.8em; border-radius: 999px; display: flex; justify-content: center; align-items: center; position: relative; background-color: rgba(255, 17, 17, 0.2); } .page-home .txt-50.pin-map { color: var(--brand-red); font-weight: 100; line-height: 1.6; position: absolute; padding-bottom: 0.125em; } .page-home .tab-dot { width: 0.8em; height: 0.8em; border-radius: 999px; background-color: var(--brand-red); display: none; } .page-home .tab-link-map.is-active .tab-dot-big-active { width: 1.8em; height: 1.8em; } .page-home .tab-link-map.is-active .tab-dot { display: block; } .page-home .tab-link-map.is-active .txt-50.pin-map { display: none; } .page-home .tabs-content { z-index: 2; width: 100%; height: auto; grid-area: card; position: relative; justify-self: end; margin-right: clamp(max(-8rem, -8em), -9vw, max(-2.5rem, -2.5em)); z-index: 4; } .page-home .tab-content { width: 100%; height: 100%; display: none; } .page-home .tab-content.is-active { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.65rem; } .page-home .tab-wrapper-content { width: 100%; height: auto; display: flex; align-items: flex-end; position: relative; } .page-home .tab-content-wrapper { z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: clamp(0.85rem, 1.6vw, 2em); margin-left: 0; margin-right: 0; width: 100%; max-width: min(100%, max(34rem, 34em)); box-sizing: border-box; padding: 1rem; border: 1px solid #454545; border-radius: 5px; background-color: #0e0e0e; position: relative; } .page-home .tab-content-left { min-width: 0; display: flex; flex-direction: column; gap: 1rem; grid-column: 1; align-self: start; } .page-home .tab-content-head { margin: 0; padding: 0; } .page-home .tab-content-txt .txt-classes, .page-home .txt-50.map { white-space: normal; } .page-home .tab-content-txt .txt-classes { font-size: var(--text-tpl-location-detail); } .page-home .txt-50.map { color: var(--brand-red); letter-spacing: -0.04em; text-transform: uppercase; font-family: Antonio, sans-serif; font-weight: 700; line-height: 0.95; font-size: var(--text-tpl-map-card-title); } .page-home .tab-content-right { width: 100%; max-width: 100%; min-width: 0; height: auto; aspect-ratio: 4 / 3; align-self: end; grid-column: 2; } @media (max-width: 991px) { .page-home .tab-content-wrapper { grid-template-columns: 1fr; grid-template-rows: auto auto; align-items: stretch; } .page-home .tab-content-left { grid-column: 1; grid-row: 1; } .page-home .tab-content-right { width: 100%; max-width: 100%; min-width: 0; aspect-ratio: 16 / 9; grid-column: 1; grid-row: 2; align-self: stretch; } } .page-home .tab-content-img { width: 100%; height: 100%; object-fit: cover; } .page-home .txt-classes.caps.black.mrg-25 { color: #454545; margin-bottom: 1em; } .page-home .txt-classes.mrg-15 { margin-bottom: 0.25em; } .page-home .content-map-grid { width: min(100%, 1040px); display: grid; grid-template-columns: repeat(2, 1fr); position: relative; margin: 1rem auto 0; padding-left: max(1rem, 1.2em); padding-right: max(1rem, 1.2em); } .page-home .txt-classes-map { font-family: Inter, sans-serif; font-size: var(--text-tpl-location-detail); font-weight: 400; line-height: 1.4; } .page-home .txt-classes-map.is-black { color: #454545; } .page-home .content-map-grid .txt-classes-map:last-child { position: static; left: auto; } .page-home .line-map { width: var(--line-length, 0px); height: 0; display: flex; position: absolute; left: var(--line-start-x, 0px); top: var(--line-start-y, 0px); transform: translateY(-50%) rotate(var(--line-angle, 0deg)); transform-origin: 0 50%; } .page-home .line { width: 100%; height: 1px; background-color: var(--brand-red); transform-origin: 100% 50%; transform: scaleX(0); transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } .page-home .tab-content.is-line-active .line { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .page-home .line { transform: scaleX(1); transition: none; } } .page-home .tab-content-txt a { color: inherit; text-transform: uppercase; text-decoration: none; } .page-home .tab-content-txt a:hover { color: var(--brand-red); } @media (max-width: 991px) { .page-home .content-map-wrapper { min-height: 0; display: grid; grid-template-columns: 1fr; grid-template-areas: "head" "map" "card"; row-gap: clamp(1rem, 2.5vw, 1.75rem); } .page-home .head-map-wrapper { width: auto; max-width: 100%; } .page-home .tabs-map { width: min(100%, max(32rem, 32em)); justify-self: center; } .page-home .tabs-content { justify-self: stretch; margin-right: 0; width: 100%; } } @media (max-width: 479px) { .page-home .sec-map { padding-bottom: 5.5rem; } .page-home .content-map-wrapper { min-height: 0; height: auto; display: grid; grid-template-columns: 1fr; grid-template-areas: "head" "map" "card"; row-gap: 1rem; } .page-home .head-map-wrapper { width: auto; position: static; margin-bottom: 1.4rem; } .page-home .txt-90 { font-size: var(--text-tpl-map-headline-mobile); } .page-home .txt-50.map { font-size: var(--text-tpl-map-card-title-mobile); } .page-home .txt-classes-map { font-size: var(--text-tpl-map-tab-mobile); } .page-home .tabs-map { width: min(80vw, max(32rem, 32em)); height: auto; aspect-ratio: 1 / 1; margin: 0 auto; position: relative; justify-self: center; } .page-home .tabs-content { justify-self: stretch; margin-right: 0; } .page-home .sec-map .tabs-menu.is-map, .page-home .sec-map .tabs-menu.ng-tab-menu { width: 100%; height: auto; aspect-ratio: 1 / 1; margin: 0; inset: 0; top: auto; } .page-home .content-map-grid { grid-template-columns: 1fr; row-gap: 0.6rem; position: static; margin-top: 0.9rem; } .page-home .tab-content-wrapper { margin-left: 0; margin-right: 0; margin-top: 0; width: 100%; grid-template-columns: 1fr; grid-template-rows: auto auto; align-items: stretch; gap: 0.75rem; padding: 0.85rem; } .page-home .tab-content-left { gap: 0.95rem; } .page-home .tab-content-right { width: 100%; max-width: 100%; min-width: 0; height: auto; aspect-ratio: 16 / 9; grid-column: 1; grid-row: 2; align-self: stretch; } .page-home .tab-content-img { height: 100%; } } .page-home .sec-cta { --cta-heading-size: var(--text-tpl-heading-display); --cta-row-center-w: clamp(max(16.25rem, 16.25em), 44vw, max(38rem, 38em)); --cta-img-frame-h: calc(var(--cta-heading-size) * 0.84 + 1.95em); --cta-mask-crop-top: 0.9em; --cta-img-offset-y: -2.5em; --cta-img-zoom: 1.18; z-index: 1; width: auto; max-width: none; color: #f8f8f8; background-color: transparent; padding: var(--section-y) 0 13.5em; position: relative; overflow: hidden; } .page-home .sec-cta::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); z-index: 0; pointer-events: none; } .page-home .sec-cta::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: min(42vh, 20rem); z-index: 0; pointer-events: none; background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%); } .page-home .cta-bg-img { z-index: -1; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center center; filter: grayscale(1); } .page-home .cta-content-wrapper { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding-left: max(1rem, 1.2em); padding-right: max(1rem, 1.2em); } .page-home .sec-cta .head-txt-wrapper-cta { width: 100%; max-width: 100%; display: flex; justify-content: space-between; align-items: center; line-height: 1; } .page-home .head-txt-wrapper-cta1 { z-index: 1; background-color: transparent; position: relative; min-width: 0; } .page-home .sec-cta .heading { margin: 0; color: #fff; text-transform: uppercase; white-space: nowrap; letter-spacing: -0.06em; font-family: Antonio, sans-serif; font-size: var(--cta-heading-size); font-weight: 700; line-height: 0.94; } .page-home .sec-cta .head-txt-wrapper-cta:not(.head-txt-wrapper-cta--offer-row) .heading > span { color: var(--brand-red); } .page-home .img-cta-frame { box-sizing: border-box; flex: 0 0 var(--cta-row-center-w); width: var(--cta-row-center-w); max-width: 100%; height: var(--cta-img-frame-h); overflow: hidden; position: relative; flex-shrink: 0; top: 0.56em; -webkit-clip-path: inset(var(--cta-mask-crop-top) 0 0 0); clip-path: inset(var(--cta-mask-crop-top) 0 0 0); } .page-home .img-cta { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; position: absolute; left: 0; right: 0; top: var(--cta-img-offset-y); transform: scale(var(--cta-img-zoom)); transform-origin: 50% 0; } .page-home .head-txt-wrapper-cta--offer-row { margin-top: clamp(0.1rem, 0.9vw, 0.5rem); } .page-home .head-txt-wrapper-cta .cta-offer { box-sizing: border-box; flex: 0 0 var(--cta-row-center-w); width: var(--cta-row-center-w); max-width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; align-self: center; } .page-home .form-cta-wrapper { margin-top: clamp(1.2rem, 3.2vw, 1.8em); display: flex; flex-direction: column; align-items: center; gap: clamp(0.9rem, 2vw, 1.4em); width: 100%; font-size: calc(1em / var(--ng-type-scale, 1)); } .page-home .form-cta { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: min(var(--cta-row-center-w), 19.5em); margin: 0; box-sizing: border-box; position: relative; z-index: 1; } .page-home .form-cta [data-ng-circle-btn].ng-circle-btn { align-self: center; margin-top: 0.35em; } .page-home .form-cta .ng-field { margin: 0 0 1.8em; width: 100%; } .page-home .form-cta .ng-field:last-of-type { margin-bottom: 1.2em; } .page-home .form-cta .text-field-cta, .page-home .form-cta .text-field-cta--message { -webkit-appearance: none; appearance: none; display: block; width: 100%; box-sizing: border-box; color: #f8f8f8; background-color: transparent; border: 0; border-bottom: 1px solid #fff; margin: 0; padding: 0 0 1em; font-family: Sora, sans-serif; font-size: var(--text-em-full); font-weight: 400; line-height: 1.3; border-radius: 0; outline: none; resize: none; transition: border-color 0.2s ease, color 0.2s ease; } .page-home .form-cta .ng-field.ng-has-error .text-field-cta, .page-home .form-cta .ng-field.ng-has-error .text-field-cta--message { border-bottom-color: var(--brand-red); } .page-home .form-cta .text-field-cta--message { min-height: 2.4em; } .page-home .form-cta .ng-field-error { color: var(--brand-red); text-transform: uppercase; font-size: 0.68em; letter-spacing: 0.06em; margin-top: -0.35em; } .page-home .form-cta .text-field-cta::placeholder, .page-home .form-cta .text-field-cta--message::placeholder { color: #6c6c6c; } .page-home .form-cta .text-field-cta:focus, .page-home .form-cta .text-field-cta--message:focus { border-bottom-color: var(--brand-red); } .page-home .cta-offer-txt { z-index: 2; margin: 0; padding: 0; width: 100%; min-width: 0; text-align: center; color: var(--brand-red); letter-spacing: -0.04em; text-transform: uppercase; font-family: Antonio, sans-serif; font-size: var(--text-tpl-cta-offer); font-weight: 700; line-height: 0.95; display: flex; flex-direction: column; align-items: center; justify-content: center; } .page-home .cta-offer__line { display: block; width: 100%; max-width: 100%; white-space: nowrap; } .page-home .cta-offer__line + .cta-offer__line { margin-top: 0.02em; } @media (max-width: 479px) { .page-home .sec-cta { padding-bottom: 5.5rem; --cta-heading-size: var(--text-tpl-heading-mobile); } .page-home .form-cta { max-width: 80%; } .page-home .form-cta .text-field-cta, .page-home .form-cta .text-field-cta--message { font-size: var(--text-tpl-form-field-mobile); } .page-home .sec-cta .head-txt-wrapper-cta { display: flex; flex-direction: column; align-items: flex-start; } .page-home .sec-cta .head-txt-wrapper-cta:not(.head-txt-wrapper-cta--offer-row) { display: grid; grid-template-columns: auto auto auto; grid-template-areas: "put image your"; align-items: end; column-gap: 0.5rem; row-gap: 0.1rem; position: relative; padding-bottom: 1.1em; } .page-home .sec-cta .head-txt-wrapper-cta:not(.head-txt-wrapper-cta--offer-row) .head-txt-wrapper-cta1:first-child { grid-area: put; position: relative; z-index: 2; } .page-home .sec-cta .head-txt-wrapper-cta:not(.head-txt-wrapper-cta--offer-row) .img-cta-frame { grid-area: image; z-index: 1; } .page-home .sec-cta .head-txt-wrapper-cta:not(.head-txt-wrapper-cta--offer-row) .head-txt-wrapper-cta1:last-child { display: contents; } .page-home .sec-cta .head-txt-wrapper-cta:not(.head-txt-wrapper-cta--offer-row) .head-txt-wrapper-cta1:last-child .heading { display: contents; } .page-home .sec-cta .head-txt-wrapper-cta:not(.head-txt-wrapper-cta--offer-row) .head-txt-wrapper-cta1:last-child .heading > span:first-child { grid-area: your; white-space: nowrap; position: relative; z-index: 2; } .page-home .cta-heading-break-mobile { grid-area: auto; display: block; white-space: nowrap; position: absolute; left: 0; top: 100%; z-index: 4; transform: translateY(0.02em); } .page-home .head-txt-wrapper-cta .cta-offer { flex: 0 0 auto; width: 100%; max-width: min(100%, 24rem); } .page-home .sec-cta .head-txt-wrapper-cta--offer-row { display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: auto auto; align-items: baseline; column-gap: 0.45rem; row-gap: clamp(1.35rem, 6.5vw, 2.2rem); width: 100%; max-width: 100%; margin-top: 0; position: relative; z-index: 5; } .page-home .head-txt-wrapper-cta--offer-row .head-txt-wrapper-cta1:first-child, .page-home .head-txt-wrapper-cta--offer-row .head-txt-wrapper-cta1:last-child { margin-top: calc(var(--cta-heading-size) * 0.94 + 0.22em); } .page-home .head-txt-wrapper-cta--offer-row .head-txt-wrapper-cta1:first-child { grid-column: 2; grid-row: 1; justify-self: end; position: relative; z-index: 6; } .page-home .head-txt-wrapper-cta--offer-row .head-txt-wrapper-cta1:last-child { grid-column: 3; grid-row: 1; justify-self: start; position: relative; z-index: 6; } .page-home .head-txt-wrapper-cta--offer-row .cta-offer { grid-column: 1 / -1; grid-row: 2; justify-self: center; width: 100%; max-width: min(100%, 24rem); position: relative; z-index: 6; margin-top: clamp(0.75rem, 3.5vw, 1.15rem); } .page-home .sec-cta .cta-offer__line + .cta-offer__line { margin-top: clamp(0.2em, 2vw, 0.4em); } .page-home .img-cta-frame { width: clamp(8rem, 36vw, 11rem); max-width: none; flex: 0 0 auto; height: calc(var(--cta-img-frame-h) * 2.5); margin-bottom: calc(var(--cta-img-frame-h) * -1.5); } } .page-home .sec-about { --about-ink: #f8f8f8; --about-black-2: #1b1b1b; --about-heading-size: var(--text-tpl-heading-display); --about-heading-line: 0.94; --about-heading-visible-height: calc(var(--about-heading-size) * var(--about-heading-line)); z-index: 1; width: auto; max-width: none; color: var(--about-ink); background-color: #000; padding-left: max(1rem, 1.2em); padding-right: max(1rem, 1.2em); line-height: 1.2; overflow: hidden; } .page-home .sec-about .container { flex-flow: column; width: 100%; max-width: none; margin-left: auto; margin-right: auto; display: block; } .page-home .sec-about .head-wrapper { width: 100%; display: flex; flex-direction: column; } .page-home .sec-about .head-txt-wrapper-first { width: 100%; justify-content: flex-start; align-items: center; padding-top: clamp(3rem, 10vw, 10em); display: flex; position: relative; } .page-home .sec-about .head-txt-wrapper-second { width: 100%; justify-content: flex-end; align-items: center; margin-top: clamp(0.9rem, 2vw, 2.2rem); padding-top: 0; display: flex; flex-wrap: nowrap; gap: clamp(0.35rem, 1.2vw, 1.2rem); position: static; } .page-home .sec-about .head-txt-wrapper-star { z-index: 1; background-color: transparent; position: static; } .page-home .sec-about .head-txt-wrapper-move { background-color: transparent; position: static; } .page-home .sec-about .heading { color: #fff; text-align: center; letter-spacing: -0.06em; text-transform: uppercase; margin: 0; font-family: Antonio, sans-serif; font-size: var(--about-heading-size); font-weight: 700; line-height: var(--about-heading-line); } .page-home .sec-about .heading .color { color: var(--brand-red); } .page-home .sec-about .img-star { width: calc(var(--about-heading-visible-height) * 2); height: calc(var(--about-heading-visible-height) * 2); position: relative; top: clamp(0.35rem, 0.9vw, 0.9rem); right: 0; margin-left: clamp(0.35rem, 1.2vw, 1.2rem); margin-right: clamp(0.35rem, 1.2vw, 1.2rem); flex-shrink: 0; transform-origin: 50% 50%; opacity: 0; transform: translate3d(0, 0.75rem, 0) rotate(-24deg) scale(0.86); transition: transform 1.05s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.65s ease; } .page-home .sec-about .grid-wrapper { grid-column-gap: 0; grid-row-gap: 0; aspect-ratio: 1 / 1; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); grid-auto-columns: 1fr; margin-top: clamp(3rem, 10vw, 8em); margin-left: auto; margin-right: auto; display: grid; width: 100%; max-width: 100%; min-height: 0; box-sizing: border-box; } .page-home .sec-about .img-content { width: 100%; height: 100%; object-fit: cover; display: block; } .page-home .sec-about .img-content._2 { height: 100%; object-fit: cover; } .page-home .sec-about .about-grid__photo-a, .page-home .sec-about .about-grid__photo-b { min-height: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; align-self: stretch; justify-self: stretch; } .page-home .sec-about .circle-content-wrapper { background-color: var(--about-black-2); justify-content: center; align-items: center; display: flex; position: relative; overflow: hidden; isolation: isolate; min-height: 0; } .page-home .sec-about .txt-30 { z-index: 2; color: #fff; text-align: center; letter-spacing: -0.01em; text-transform: uppercase; padding-left: clamp(1rem, 2vw, 2em); padding-right: clamp(1rem, 2vw, 2em); font-family: Antonio, sans-serif; font-size: var(--text-tpl-about-circle); font-weight: 700; line-height: 1.1; white-space: normal; word-break: normal; overflow-wrap: normal; hyphens: none; position: relative; opacity: 0; transform: translate3d(0, 0.35rem, 0); transition: opacity 0.45s ease, transform 0.52s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: 0s; } .page-home .sec-about .circle-scale { z-index: 0; top: 50%; left: 50%; width: 106%; height: 106%; background-color: #000; border: 1px solid #000; border-radius: 1000px; position: absolute; opacity: 1; transform: translate(-50%, -50%) scale(0.16); transition: transform 0.68s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: center; } .page-home .sec-about .background-video-2.ng-background-video { height: 100%; min-height: 0; color: #fff; position: relative; overflow: hidden; } .page-home .sec-about .about-showcase-dual { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; height: 100%; min-height: 0; } .page-home .sec-about .about-showcase-dual__cell { position: relative; overflow: hidden; min-height: 0; background: #050505; } @media (max-width: 479px) { .page-home .sec-about .about-showcase-dual.is-sequenced { display: block; position: relative; width: 100%; height: 100%; min-height: 100%; } .page-home .sec-about .about-showcase-dual.is-sequenced .about-showcase-dual__cell { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.45s ease; } .page-home .sec-about .about-showcase-dual.is-sequenced .about-showcase-dual__cell.is-active { opacity: 1; pointer-events: auto; } .page-home .sec-about .about-showcase-dual, .page-home .sec-about .about-showcase-dual__cell { height: 100%; min-height: 100%; } .page-home .sec-about .about-showcase-dual__cell video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } } .page-home .sec-about .about-showcase-dual__cell video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; z-index: 0; } .page-home .sec-about .about-showcase-dual__cell video::-webkit-media-controls-start-playback-button { -webkit-appearance: none; display: none !important; } .page-home .sec-about .head-txt-wrapper-move .heading { opacity: 0; transform: translate3d(-1.1rem, 0, 0); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.55s ease; transition-delay: 0.18s; } .page-home .sec-about.is-anim-active .img-star { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } .page-home .sec-about.is-anim-active .head-txt-wrapper-move .heading { opacity: 1; transform: translate3d(0, 0, 0); } .page-home .sec-about .circle-content-wrapper.is-anim-active .circle-scale { transform: translate(-50%, -50%) scale(1); } .page-home .sec-about .circle-content-wrapper.is-anim-active .txt-30 { opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 0.68s; } @media (prefers-reduced-motion: reduce) { .page-home .sec-about .img-star, .page-home .sec-about .head-txt-wrapper-move .heading, .page-home .sec-about .circle-content-wrapper .txt-30 { opacity: 1; transform: none; transition: none; } .page-home .sec-about .circle-content-wrapper .circle-scale { transform: translate(-50%, -50%) scale(1); transition: none; } } .page-home .sec-about .about-grid__photo-a { grid-area: 1 / 1 / 2 / 2; } .page-home .sec-about .about-grid__ring-train { grid-area: 1 / 2 / 2 / 3; } .page-home .sec-about .about-grid__photo-b { grid-area: 1 / 4 / 2 / 6; } .page-home .sec-about .about-grid__ring-group { grid-area: 2 / 4 / 3 / 5; } .page-home .sec-about .about-grid__ring-studios { grid-area: 3 / 1 / 4 / 2; } .page-home .sec-about .about-grid__showcase-stack { grid-area: 3 / 2 / 6 / 6; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) max-content; align-content: stretch; min-height: 0; } .page-home .sec-about .about-grid__showcase-stack .about-grid__videos { grid-column: 1 / -1; grid-row: 1 / 3; min-height: 0; } .page-home .sec-about .about-grid__cta-slot { grid-column: 4; grid-row: 3; display: flex; justify-content: center; align-items: flex-start; align-self: start; justify-self: center; position: relative; z-index: 2; } .page-home .sec-about .about-grid__cta-pin { display: inline-flex; transform: translateY(-25%); } @media (max-width: 479px) { .page-home .sec-about { z-index: 1000; padding-left: 1.36em; padding-right: 1.36em; overflow: hidden; } .page-home .sec-about .heading { text-align: right; letter-spacing: -0.05em; flex-direction: column; align-items: center; font-size: var(--text-tpl-heading-mobile); line-height: 100%; display: flex; } .page-home .sec-about .head-txt-wrapper-first { padding-top: 16em; } .page-home .sec-about .head-txt-wrapper-second { justify-content: flex-end; align-items: flex-start; flex-wrap: nowrap; gap: 0; margin-top: 0; padding-top: 0; } .page-home .sec-about .head-txt-wrapper-star { background-color: transparent; position: relative; left: 16.5em; } .page-home .sec-about .head-txt-wrapper-move { background-color: transparent; position: static; } .page-home .sec-about .img-star { position: relative; width: 30em; height: 30em; top: -5.1em; right: -18.7em; margin: 0; } .page-home .sec-about .grid-wrapper { grid-column-gap: 0; grid-row-gap: 0; flex-direction: column; aspect-ratio: unset; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto auto auto auto auto; grid-auto-columns: 1fr; margin-top: clamp(3rem, 14vw, 13em); justify-items: center; display: grid; } .page-home .sec-about .about-grid__showcase-stack { grid-area: 6 / 1 / 8 / 2; display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; } .page-home .sec-about .about-grid__cta-slot { grid-column: unset; grid-row: unset; justify-self: unset; align-self: center; justify-content: center; } .page-home .sec-about .circle-content-wrapper { width: 100%; height: 100%; } .page-home .sec-about .about-grid__ring-train { aspect-ratio: 1 / 1; height: auto; } .page-home .sec-about .about-grid__ring-group, .page-home .sec-about .about-grid__ring-studios { aspect-ratio: 1 / 1; height: auto; } .page-home .sec-about .txt-30 { font-size: var(--text-tpl-about-circle-mobile); } .page-home .sec-about .background-video-2.ng-background-video { width: 100%; } .page-home .sec-about .about-grid__ring-train { grid-area: 1 / 1 / 2 / 2; } .page-home .sec-about .about-grid__photo-a { grid-area: 2 / 1 / 3 / 2; } .page-home .sec-about .about-grid__ring-group { grid-area: 3 / 1 / 4 / 2; } .page-home .sec-about .about-grid__photo-b { grid-area: 4 / 1 / 5 / 2; } .page-home .sec-about .about-grid__ring-studios { grid-area: 5 / 1 / 6 / 2; } .page-home .sec-about .about-grid__showcase-stack .about-grid__videos { grid-column: unset; grid-row: unset; width: 100%; min-height: clamp(28rem, 112vw, 54rem); aspect-ratio: 2 / 3; position: relative; overflow: hidden; } }