/* ============================================ REFORMER CLUB – V1 Schwarz-Weiß Ästhetik ============================================ */ /* ---------- SELF-HOSTED FONTS (Montserrat OFL) ---------- */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/montserrat-v31-latin_latin-ext-300.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 300; font-display: swap; src: url('../fonts/montserrat-v31-latin_latin-ext-300italic.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/montserrat-v31-latin_latin-ext-regular.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/montserrat-v31-latin_latin-ext-italic.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/montserrat-v31-latin_latin-ext-500.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/montserrat-v31-latin_latin-ext-600.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/montserrat-v31-latin_latin-ext-700.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 700; font-display: swap; src: url('../fonts/montserrat-v31-latin_latin-ext-700italic.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/montserrat-v31-latin_latin-ext-800.woff2') format('woff2'); } /* ---------- RESET ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-primary); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--color-text); background-color: var(--color-bg); overflow-x: hidden; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } img, video { display: block; max-width: 100%; height: auto; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input { font: inherit; color: inherit; background: none; border: none; outline: none; } /* ---------- VARIABLES ---------- */ :root { /* Colors */ --color-bg: #000000; --color-text: #ffffff; --color-text-muted: rgba(255, 255, 255, 0.5); --color-surface: rgba(255, 255, 255, 0.04); --color-border: rgba(255, 255, 255, 0.1); --color-hover: rgba(255, 255, 255, 0.08); --color-class-tile: rgba(255, 255, 255, 0.09); --color-class-tile-hover: rgba(255, 255, 255, 0.12); /* Typography */ --font-primary: 'Montserrat', sans-serif; /* Layout */ --page-width: 1400px; --page-gutter: clamp(20px, 5vw, 80px); --header-height: 72px; --section-gap: clamp(48px, 6vw, 80px); --radius: 20px; --radius-sm: 12px; /* Transitions */ --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition: 0.35s var(--ease); --transition-slow: 0.6s var(--ease); } /* ---------- UTILITIES ---------- */ /* Fallback: if JS hasn't loaded, show everything */ .reveal { opacity: 1; transform: none; } /* JS adds 'js' class to , then we hide for animation */ html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); } html.js .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } } /* ---------- BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 36px; font-family: var(--font-primary); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 100px; transition: all var(--transition); white-space: nowrap; cursor: pointer; } .btn--primary { background: var(--color-text); color: var(--color-bg); border: 1.5px solid var(--color-text); } .btn--primary:hover { background: transparent; color: var(--color-text); } .btn--outline { background: transparent; color: var(--color-text); border: 1.5px solid var(--color-border); } .btn--outline:hover { border-color: var(--color-text); background: var(--color-hover); } .btn--small { padding: 10px 28px; font-size: 12px; background: transparent; color: var(--color-text); border: 1px solid var(--color-border); border-radius: 100px; } .btn--small:hover { border-color: var(--color-text); background: var(--color-hover); } /* =========================================== HEADER =========================================== */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--header-height); background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); transition: background var(--transition), backdrop-filter var(--transition), transform var(--transition); overflow: visible; } .header.is-scrolled { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); } .header.is-hidden { transform: translateY(-100%); } .header__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); height: 100%; display: flex; align-items: center; justify-content: space-between; overflow: visible; } /* Home: Nav zentriert, rechts Book (prominent) + Sprache */ .header__inner.header__inner--split { justify-content: flex-start; gap: clamp(16px, 3vw, 36px); /* rechter Innenrand kleiner → Block sitzt weiter rechts */ padding: 0 clamp(8px, 1.5vw, 20px) 0 var(--page-gutter); } .header__inner--split .header__nav { flex: 1; justify-content: center; min-width: 0; overflow: visible; } .header__actions { display: flex; align-items: center; gap: clamp(24px, 4vw, 44px); margin-left: auto; flex-shrink: 0; } .header__book { display: inline-flex; align-items: center; justify-content: center; font-size: clamp(11px, 1.1vw, 13px); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 11px 22px; border-radius: 100px; background: #fff; color: #000; transition: opacity var(--transition), transform 0.2s ease; white-space: nowrap; } .header__book:hover { opacity: 0.9; } /* Logo */ .header__logo { display: flex; align-items: center; transition: opacity var(--transition); } .header__logo:hover { opacity: 0.7; } .header__logo-img { height: 28px; width: auto; } /* Nav */ .header__nav { display: flex; align-items: center; gap: 36px; overflow: visible; } .header__nav-link { font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--color-text-muted); transition: color var(--transition); position: relative; } .header__nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--color-text); transition: width var(--transition); } .header__nav-link:hover { color: var(--color-text); } .header__nav-link:not(.header__nav-link--has-dd):hover::after { width: 100%; } .header__nav-link--cta { color: var(--color-text); padding: 8px 24px; border: 1px solid var(--color-border); border-radius: 100px; } .header__nav-link--cta::after { display: none; } .header__nav-link--cta:hover { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); } /* Dropdown wrapper */ .header__dropdown { position: relative; overflow: visible; } /* Caret arrow – on wrapper so backdrop-filter on panel does not clip it */ .header__dropdown::before { content: ''; position: absolute; top: calc(100% + 9px); left: 50%; width: 10px; height: 10px; background: rgba(10, 10, 10, 0.94); border-left: 1px solid rgba(255, 255, 255, 0.14); border-top: 1px solid rgba(255, 255, 255, 0.14); transform: translateX(-50%) rotate(45deg); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.28s var(--ease), visibility 0.28s var(--ease); z-index: 1002; } .header__dropdown:hover::before, .header__dropdown.is-open::before { opacity: 1; visibility: visible; } /* Invisible bridge from trigger down to the panel so hover stays active */ .header__dropdown::after { content: ""; position: absolute; left: -16px; right: -16px; top: 100%; height: 18px; pointer-events: none; } .header__dropdown:hover::after { pointer-events: auto; } .header__nav-link--has-dd { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-family: inherit; white-space: nowrap; transition: color var(--transition); overflow: visible; line-height: 1; padding: 4px 0; } .header__nav-link--has-dd::after { content: ''; display: block; position: static; bottom: auto; left: auto; flex-shrink: 0; width: 10px; height: 6px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1.25 5 4.75 9 1.25' stroke='rgba(255,255,255,0.45)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); border: none; transform: rotate(0deg); transform-origin: center center; opacity: 1; transition: transform var(--transition), background-image var(--transition); } .header__dropdown:hover .header__nav-link--has-dd, .header__dropdown.is-open .header__nav-link--has-dd { color: var(--color-text); } .header__dropdown:hover .header__nav-link--has-dd::after, .header__dropdown.is-open .header__nav-link--has-dd::after { transform: rotate(180deg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1.25 5 4.75 9 1.25' stroke='rgba(255,255,255,1)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .header__dd-panel { position: absolute; top: calc(100% + 14px); left: 50%; right: auto; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; min-width: 268px; padding: 8px; background: rgba(10, 10, 10, 0.94); backdrop-filter: blur(28px) saturate(1.2); -webkit-backdrop-filter: blur(28px) saturate(1.2); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-sm); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.07); opacity: 0; visibility: hidden; pointer-events: none; overflow: visible; transform: translateX(-50%) translateY(8px) scale(0.98); transform-origin: top center; transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s; z-index: 1001; } .header__dropdown:hover .header__dd-panel, .header__dropdown.is-open .header__dd-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); } .header__dd-link { position: relative; display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); transition: color var(--transition), background var(--transition), padding-left var(--transition); white-space: nowrap; padding: 13px 16px 13px 22px; border-radius: 8px; opacity: 0; transform: translateY(4px); } .header__dropdown:hover .header__dd-link, .header__dropdown.is-open .header__dd-link { opacity: 1; transform: translateY(0); transition: color var(--transition), background var(--transition), padding-left var(--transition), opacity 0.3s var(--ease), transform 0.3s var(--ease); } .header__dropdown:hover .header__dd-link:nth-child(1), .header__dropdown.is-open .header__dd-link:nth-child(1) { transition-delay: 0.03s; } .header__dropdown:hover .header__dd-link:nth-child(2), .header__dropdown.is-open .header__dd-link:nth-child(2) { transition-delay: 0.06s; } .header__dropdown:hover .header__dd-link:nth-child(3), .header__dropdown.is-open .header__dd-link:nth-child(3) { transition-delay: 0.09s; } .header__dropdown:hover .header__dd-link:nth-child(4), .header__dropdown.is-open .header__dd-link:nth-child(4) { transition-delay: 0.12s; } .header__dd-link::before { content: ''; position: absolute; left: 10px; top: 50%; width: 2px; height: 0; background: #fff; border-radius: 1px; transform: translateY(-50%); transition: height var(--transition); } .header__dd-link::after { display: none; } .header__dd-link:hover { color: var(--color-text); background: rgba(255, 255, 255, 0.08); padding-left: 28px; } .header__dd-link:hover::before { height: 14px; } .header__dd-link:first-child { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.75); } .header__dd-link:first-child:hover { background: rgba(255, 255, 255, 0.1); color: var(--color-text); } @media (prefers-reduced-motion: reduce) { .header__dd-panel, .header__dd-link, .header__dropdown::before, .header__nav-link--has-dd::after { transition: none; } .header__dd-link { opacity: 1; transform: none; } } /* Mobile menu: sub-groups */ .mobile-menu__group { border-bottom: 1px solid var(--color-border); } .mobile-menu__link--toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; font-family: inherit; color: inherit; cursor: pointer; text-align: left; } .mobile-menu__link--toggle::after { content: '+'; font-size: 20px; font-weight: 300; color: var(--color-text-muted); transition: transform 0.3s ease; } .mobile-menu__link--toggle[aria-expanded="true"]::after { content: '−'; } .mobile-menu__sub { display: none; padding: 0 0 12px 0; } .mobile-menu__group.is-open .mobile-menu__sub { display: block; } .mobile-menu__sub-link { display: block; padding: 10px 0 10px 16px; font-size: clamp(15px, 2.8vw, 18px); font-weight: 300; color: var(--color-text-muted); transition: color var(--transition), padding-left var(--transition); } .mobile-menu__sub-link:hover { color: var(--color-text); padding-left: 28px; } /* Language: DE | EN – aktive Sprache sichtbar (vermeidet Verwechslung mit Einzel-„EN“-Button) */ .header__lang-switch { display: inline-flex; align-items: stretch; flex-shrink: 0; margin-left: 12px; padding: 2px; border-radius: 100px; border: 1px solid var(--color-border); background: rgba(0, 0, 0, 0.25); gap: 0; } .header__lang-btn { appearance: none; border: none; background: transparent; font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; padding: 6px 12px; border-radius: 100px; color: var(--color-text-muted); cursor: pointer; transition: color var(--transition), background var(--transition); } .header__lang-btn:hover { color: var(--color-text); } .header__lang-btn.is-active { background: rgba(255, 255, 255, 0.12); color: #fff; } .header__actions .header__lang-switch { margin-left: 0; } .header__login { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--color-text-muted); margin-left: 8px; padding: 6px 16px; border: 1px solid var(--color-border); border-radius: 100px; transition: all var(--transition); } .header__login:hover { color: var(--color-text); border-color: var(--color-text); } /* Hamburger */ .header__menu-toggle { display: none; width: 32px; height: 32px; align-items: center; justify-content: center; } .header__menu-icon { display: flex; flex-direction: column; gap: 6px; width: 22px; } .header__menu-icon span { display: block; height: 1.5px; background: var(--color-text); border-radius: 2px; transition: all var(--transition); } /* =========================================== MOBILE MENU =========================================== */ .mobile-menu { position: fixed; top: 0; left: 0; width: min(380px, 85vw); height: 100dvh; background: var(--color-bg); border-left: 1px solid var(--color-border); z-index: 2000; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.4s var(--ease); overflow: hidden; } .mobile-menu.is-open { transform: translateX(0); } .mobile-menu__header { display: flex; align-items: center; justify-content: space-between; padding: 20px var(--page-gutter); height: var(--header-height); border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .mobile-menu__title { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } .mobile-menu__close { color: var(--color-text-muted); transition: color var(--transition); } .mobile-menu__close:hover { color: var(--color-text); } .mobile-menu__nav { display: flex; flex-direction: column; padding: 32px var(--page-gutter); flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .mobile-menu__link { font-size: clamp(22px, 4vw, 28px); font-weight: 300; letter-spacing: 0.02em; padding: 16px 0; border-bottom: 1px solid var(--color-border); transition: color var(--transition), padding-left var(--transition); } .mobile-menu__link:hover { color: var(--color-text); padding-left: 12px; } .mobile-menu__footer { padding: 24px var(--page-gutter); border-top: 1px solid var(--color-border); flex-shrink: 0; } .mobile-menu__utilities { padding: 20px var(--page-gutter); border-top: 1px solid var(--color-border); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; flex-shrink: 0; } .mobile-menu__utility-link { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text); transition: opacity var(--transition); } .mobile-menu__utility-link:hover { opacity: 0.7; } .mobile-menu__lang.header__lang-switch { margin: 0; } .mobile-menu__social { display: flex; gap: 24px; } .mobile-menu__social a { font-size: 13px; font-weight: 500; letter-spacing: 0.06em; color: var(--color-text-muted); transition: color var(--transition); } .mobile-menu__social a:hover { color: var(--color-text); } /* Overlay */ .mobile-menu__overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 1999; opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease); } .mobile-menu__overlay.is-open { opacity: 1; pointer-events: auto; } /* Lock body */ body.menu-open, body.panel-open { overflow: hidden; } /* =========================================== HERO =========================================== */ .hero { position: relative; height: 75svh; min-height: 440px; overflow: hidden; } /* Slide container */ .hero__slides { position: absolute; inset: 0; } .hero__slide { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8vh; opacity: 0; transition: opacity 1s ease; pointer-events: none; } .hero__slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__img { width: 100%; height: 100%; object-fit: cover; } .hero__video { width: 100%; height: 100%; object-fit: cover; } .hero__overlay { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.45); } /* Split hero: left fade for text contrast – never solid black */ .hero__slide--split .hero__overlay { background: none !important; } /* Fade on the slide itself so it always sits above the image */ .hero__slide--split::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient( to right, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.38) 40%, rgba(0, 0, 0, 0.14) 72%, rgba(0, 0, 0, 0) 100% ); } .hero__content { position: relative; z-index: 3; text-align: center; padding: 0 var(--page-gutter); width: 100%; max-width: var(--page-width); } .hero__slide .hero__content { text-align: center; width: fit-content; margin: 0 auto; } .hero__slide--split .hero__content { text-align: left; width: 100%; margin: 0; padding-left: clamp(24px, 4vw, 60px); } .hero__sub { font-size: clamp(10px, 1vw, 12px); font-weight: 300; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin-bottom: 16px; } .hero__title { font-size: clamp(22px, 3.2vw, 48px); font-weight: 800; line-height: 1.08; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 16px; } .hero__title-line { display: block; white-space: nowrap; } .hero__title-line--accent { font-style: italic; font-weight: 700; letter-spacing: 0.06em; color: #334d48; } .hero__desc { font-size: clamp(12px, 1.15vw, 15px); font-weight: 600; line-height: 1.7; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.55); max-width: none; margin: 0 0 6px; white-space: nowrap; } .hero__desc--inline { margin-bottom: 28px; } .hero__inline-link { color: #fff; font-weight: 600; text-decoration: none; transition: opacity var(--transition); } .hero__inline-link:hover { opacity: 0.7; } .hero__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 20px; } .hero__actions .btn { border-radius: 100px; } .hero__slide--split .hero__actions { justify-content: center; padding-left: 0; } /* Slide dots */ .hero__dots { position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 10px; } .hero__dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); background: transparent; cursor: pointer; transition: background 0.3s ease, border-color 0.3s ease; padding: 0; } .hero__dot.is-active { background: #fff; border-color: #fff; } .hero__dot:hover { border-color: #fff; } /* Scroll indicator */ .hero__scroll { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 10; } .hero__scroll span { display: block; width: 1px; height: 48px; background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent); animation: scrollPulse 2s ease-in-out infinite; } @keyframes scrollPulse { 0%, 100% { opacity: 0.3; transform: scaleY(0.6); } 50% { opacity: 1; transform: scaleY(1); } } /* =========================================== STUDIO FULLWIDTH IMAGE =========================================== */ .studio-fullwidth { position: relative; line-height: 0; } .studio-fullwidth__img { width: 100%; height: clamp(240px, 32vw, 480px); object-fit: cover; object-position: center center; display: block; } .studio-fullwidth__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.15) 100%); } .studio-fullwidth__text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(20px, 3vw, 40px) var(--page-gutter); text-align: center; } .studio-fullwidth .manifesto__quote { display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.5vw, 16px); width: 100%; margin: 0; } .studio-fullwidth .manifesto__line { text-align: center; width: 100%; } .studio-fullwidth .manifesto__subline { margin-top: clamp(28px, 4vw, 48px); text-align: center; } .studio-fullwidth .manifesto__desc { max-width: 640px; margin: clamp(16px, 2.5vw, 28px) auto 0; font-size: clamp(14px, 1.2vw, 18px); font-weight: 400; line-height: 1.6; letter-spacing: 0; color: rgba(255,255,255,0.78); text-align: center; } .studio-fullwidth .manifesto__cta { margin-top: clamp(24px, 3vw, 36px); padding: 24px 72px; font-size: 16px; font-weight: 700; letter-spacing: 0.14em; } @media (max-width: 768px) { .studio-fullwidth { margin: 0; line-height: 0; } .studio-fullwidth__img { height: clamp(340px, 72vw, 440px); } .studio-fullwidth__overlay { display: block; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.68) 100% ); } .studio-fullwidth__text { position: absolute; inset: 0; justify-content: flex-start; align-items: center; padding: 56px 24px 40px; } .studio-fullwidth .manifesto__quote { gap: 0; width: 100%; } .studio-fullwidth .manifesto__line { font-size: clamp(18px, 5.2vw, 26px); line-height: 1.2; letter-spacing: 0.03em; white-space: normal; max-width: 18ch; margin: 0 auto; } .studio-fullwidth .manifesto__desc { display: none; } .studio-fullwidth .manifesto__subline { margin-top: 52px; font-size: 11px; letter-spacing: 0.22em; } .studio-fullwidth .manifesto__cta { margin-top: 56px; padding: 18px 40px; font-size: 13px; letter-spacing: 0.12em; } } /* =========================================== TWO-UP CARDS =========================================== */ .twoup { background: #000; padding: 40px 0; } .twoup__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .twoup__card { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; text-decoration: none; border-radius: 0; } .twoup__bg { position: absolute; inset: 0; } .twoup__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .twoup__card:hover .twoup__img { transform: scale(1.04); } .twoup__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 60%, transparent 100%); } .twoup__content { position: relative; z-index: 1; padding: 28px 32px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; } .twoup__title { font-size: clamp(18px, 2.2vw, 28px); font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; color: #fff; margin-bottom: 8px; line-height: 1.1; } .twoup__text { font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.8); line-height: 1.5; margin-bottom: 0; } .twoup__sub { font-size: 12px; font-style: italic; color: rgba(255,255,255,0.45); margin-bottom: 18px; } .twoup__btn { display: inline-block; margin-top: 22px; padding: 10px 20px; border: 1.5px solid rgba(255,255,255,0.7); border-radius: 100px; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: transparent; transition: background 0.2s, border-color 0.2s; align-self: flex-start; } .twoup__card:hover .twoup__btn { background: rgba(255,255,255,0.15); border-color: #fff; } @media (max-width: 640px) { .twoup { padding: 24px var(--page-gutter) 32px; } .twoup__grid { grid-template-columns: 1fr; gap: 16px; } .twoup__card { aspect-ratio: 4 / 3; } } /* =========================================== HIGHLIGHT STRIP =========================================== */ .highlight-strip { background: #000; padding: 40px var(--page-gutter); } .highlight-strip__grid { display: grid; grid-template-columns: 1fr; gap: 4px; max-width: var(--page-width); margin: 0 auto; } /* ===== MEMBERSHIP PERKS ===== */ .mp { background: #000; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: clamp(48px, 6vw, 80px) 0; position: relative; } .mp__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; } .mp__section-label { position: absolute; top: 20px; right: var(--page-gutter); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.06); padding: 4px 12px; border-radius: 100px; } .mp__badge { display: inline-block; background: #22c55e; color: #000; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 12px; border-radius: 100px; margin-bottom: 16px; } .mp__eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.4); margin-bottom: 10px; } .mp__title { font-size: clamp(28px, 3vw, 40px); font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; color: #fff; margin: 0 0 12px; } .mp__subline { font-size: clamp(15px, 1.1vw, 18px); font-weight: 500; color: rgba(255,255,255,0.85); margin: 0 0 12px; line-height: 1.45; } .mp__intro { font-size: clamp(13px, 0.95vw, 15px); color: rgba(255,255,255,0.55); margin: 0 0 24px; line-height: 1.55; max-width: 42ch; } .mp__list { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 13px; } .mp__list li { display: flex; align-items: center; gap: 12px; font-size: clamp(13px, 0.95vw, 15px); color: rgba(255,255,255,0.75); line-height: 1.4; } .mp__list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.32); flex-shrink: 0; } .mp__photo-placeholder { width: 100%; aspect-ratio: 4 / 3; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; display: flex; align-items: center; justify-content: center; } .mp__photo-placeholder span { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.18); } .mp__img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center center; border-radius: 14px; display: block; } @media (max-width: 768px) { .mp__inner { grid-template-columns: 1fr; gap: 36px; } .mp__section-label { display: none; } .mp__photo-placeholder { aspect-ratio: 16 / 9; } .mp__img { aspect-ratio: 16 / 9; } } /* ===== TAGLINE BANNER ===== */ .tagline-banner { background: var(--color-bg); color: var(--color-text); padding: 80px 24px; text-align: center; } .tagline-banner__inner { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; } .tagline-banner__title { font-family: var(--font-primary); font-size: clamp(1.1rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; white-space: nowrap; } .tagline-banner__sub { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.45; margin-bottom: 8px; } .tagline-banner__btn { border-color: rgba(255, 255, 255, 0.45); color: var(--color-text); border-radius: 100px; } .tagline-banner__btn:hover { border-color: var(--color-text); background: transparent; } .highlight-card { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 320px; color: #fff; border-radius: 0; } .highlight-card--img { cursor: pointer; } .highlight-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .highlight-card--img:hover .highlight-card__bg { transform: scale(1.04); } .highlight-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 60%, transparent 100%); } .highlight-card--accent { background: #d4856a; align-items: center; justify-content: center; text-align: center; } .highlight-card__body { position: relative; z-index: 1; padding: 32px 28px; } .highlight-card--accent .highlight-card__body { padding: 40px 28px; } .highlight-card__title { font-size: clamp(18px, 1.6vw, 24px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.15; margin-bottom: 10px; } .highlight-card__text { font-size: clamp(13px, 1vw, 15px); font-weight: 400; line-height: 1.5; opacity: 0.9; margin-bottom: 6px; } .highlight-card--accent .highlight-card__text { font-size: clamp(15px, 1.2vw, 18px); font-weight: 500; color: #000; opacity: 1; line-height: 1.55; margin-bottom: 20px; } .highlight-card__sub { font-size: clamp(12px, 0.9vw, 14px); font-weight: 300; font-style: italic; opacity: 0.7; margin-bottom: 16px; } .highlight-card__tagline { font-size: clamp(11px, 0.8vw, 13px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: #000; opacity: 0.7; } .highlight-card__btn { display: inline-block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 22px; border: 1.5px solid #fff; border-radius: 100px; background: transparent; transition: background 0.3s ease, color 0.3s ease; } .highlight-card--img:hover .highlight-card__btn { background: #fff; color: #000; } @media (max-width: 768px) { .highlight-strip { padding: 4px 0; } .highlight-strip__grid { grid-template-columns: 1fr; gap: 4px; } .highlight-card { min-height: 220px; border-radius: 0; } .highlight-card__body { padding: 24px 20px; } .highlight-card__title { font-size: 20px; } .highlight-card__text { font-size: 14px; } .highlight-card__btn { font-size: 12px; padding: 10px 20px; width: auto; max-width: none; } } /* =========================================== HIGHLIGHT CARDS — INFO VARIANTS =========================================== */ /* ── Wrapper overrides (double-class beats base .highlight-card) ─────────── */ .highlight-card.hc-split, .highlight-card.hc-stats { border-radius: 0; align-items: stretch; min-height: 360px; } /* ── Card 1: Split image | text ──────────────────────────────────────────── */ .highlight-card.hc-split { flex-direction: row; background: #000; overflow: hidden; } .hc-split__img { width: 36%; flex-shrink: 0; position: relative; } .hc-split__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .highlight-card.hc-split:hover .hc-split__img img { transform: scale(1.04); } .hc-split__body { flex: 1; padding: 40px 36px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; } .hc-split__foot { display: flex; flex-direction: column; gap: 8px; } .hc-split__tagline { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.28); } /* ── Card 2: Stats grid ──────────────────────────────────────────────────── */ .highlight-card.hc-stats { background: #000; padding: 36px 36px 32px; } .hc-stats__main { flex: 1; display: flex; flex-direction: column; } .hc-stats__top { display: flex; align-items: flex-start; gap: 24px; flex: 1; } .hc-stats__content { flex: 1; min-width: 0; } .hc-stats__thumb { width: 480px; height: 320px; flex-shrink: 0; overflow: hidden; background: #000; border-radius: var(--radius-sm); } .hc-stats__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .highlight-card.hc-stats:hover .hc-stats__thumb img { transform: scale(1.04); } .hc-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 18px; margin: 20px 0 18px; } .hc-stats__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 0 16px; border-right: 1px solid rgba(255,255,255,0.1); } .hc-stats__item:first-child { padding-left: 0; } .hc-stats__item:last-child { border-right: none; padding-right: 0; } .hc-stats__val { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -0.02em; } .hc-stats__label { font-size: 14px; color: rgba(255,255,255,0.42); } /* ── Shared text tokens ──────────────────────────────────────────────────── */ .hc__eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.42); margin-bottom: 12px; } .hc__title { font-size: clamp(26px, 2.4vw, 38px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: #fff; margin-bottom: 12px; } .hc__text { font-size: clamp(14px, 1vw, 17px); line-height: 1.7; color: rgba(255,255,255,0.58); } .hc__cta { font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.35); transition: color 0.2s ease; display: block; text-align: center; text-decoration: underline; text-underline-offset: 4px; margin-top: 24px; } .highlight-card:hover .hc__cta, .highlight-card:hover a.hc__cta { color: #fff; } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 960px) { .hc-split__img { width: 40%; } .hc-split__body { padding: 28px 24px; } .highlight-card.hc-stats { padding: 28px 24px 24px; } .hc-stats__thumb { width: 90px; height: 70px; } .hc-stats__grid { grid-template-columns: 1fr 1fr; gap: 12px 0; } .hc-stats__item:nth-child(2) { border-right: none; padding-right: 0; } .hc-stats__item:nth-child(3) { border-right: 1px solid rgba(255,255,255,0.1); padding-left: 0; } .hc-stats__item:nth-child(4) { border-right: none; padding-right: 0; } } @media (max-width: 768px) { .hc-stats__thumb { display: none; } .hc-stats__top { flex-direction: column; } .hc-stats__grid { grid-template-columns: 1fr 1fr; gap: 20px 24px; } .hc-stats__item { border-right: none; align-items: flex-start; text-align: left; } } @media (max-width: 600px) { .highlight-strip__grid { grid-template-columns: 1fr; } .highlight-card.hc-split { flex-direction: column; min-height: auto; } .hc-split__img { width: 100%; height: 200px; position: relative; } .highlight-card.hc-stats { min-height: auto; } } /* =========================================== STATS BAR =========================================== */ .stats { border-bottom: 1px solid var(--color-border); padding: var(--section-gap) 0; } .stats__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 clamp(20px, 4vw, 56px); align-items: center; } .stats__item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; } /* Divider-Elemente nur für ältere Markup-Struktur; unsichtbar */ .stats__divider { display: none; } .stats__number { font-size: clamp(28px, 3vw, 36px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; } .stats__label { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); } /* =========================================== MANIFESTO =========================================== */ .manifesto { position: relative; padding: clamp(56px, 8vw, 120px) 0; border-top: 1px solid var(--color-border); overflow: hidden; } /* Sehr dezentes Hintergrundbild – Dateiname: 54 - _AmelieBreher_ReformerClub_56.jpg */ .manifesto::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("../images/54%20-%20_AmelieBreher_ReformerClub_56.jpg") center / cover no-repeat; opacity: 0.45; pointer-events: none; } .manifesto__inner { position: relative; z-index: 1; max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); text-align: center; } .manifesto__quote { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0; } .manifesto__line { display: block; font-size: clamp(22px, 3.2vw, 48px); font-weight: 800; line-height: 1.12; letter-spacing: 0.02em; text-transform: uppercase; } .manifesto__line--italic { font-style: italic; font-weight: 300; color: var(--color-text-muted); } html.js .manifesto__line.reveal { transform: translateY(40px); transition-duration: 1s; } html.js .manifesto__line.reveal:nth-child(2) { transition-delay: 0.15s; } html.js .manifesto__line.reveal:nth-child(3) { transition-delay: 0.3s; } .manifesto__subline { margin: clamp(20px, 3vw, 36px) 0 0; font-size: clamp(11px, 0.9vw, 14px); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.4); } html.js .manifesto__subline.reveal { transform: translateY(20px); transition-duration: 0.8s; transition-delay: 0.45s; } /* =========================================== GET STARTED (accordion) =========================================== */ .get-started { padding: clamp(48px, 6vw, 80px) 0; border-top: 1px solid var(--color-border); } .get-started__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } .get-started__header { text-align: left; margin-bottom: clamp(36px, 4vw, 56px); } .get-started__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); margin: 0 0 16px; } .get-started__heading { margin: 0; font-size: clamp(28px, 3.5vw, 44px); font-weight: 700; letter-spacing: -0.01em; text-transform: none; color: #fff; } .get-started__steps { max-width: 960px; margin: 0 auto; } .get-started__item { border-top: 1px solid var(--color-border); padding: clamp(28px, 3vw, 40px) 0; } .get-started__item:last-child { border-bottom: 1px solid var(--color-border); } .get-started__item-hd { display: flex; align-items: center; gap: clamp(16px, 2vw, 24px); margin-bottom: clamp(20px, 2.5vw, 32px); } .get-started__num { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.45); letter-spacing: 0.06em; } .get-started__item-hd-text { display: flex; flex-direction: column; gap: 6px; } .get-started__label { font-size: clamp(18px, 1.8vw, 24px); font-weight: 600; letter-spacing: 0.02em; color: #fff; } .get-started__sublabel { font-size: clamp(13px, 1vw, 15px); font-weight: 400; line-height: 1.6; color: rgba(255,255,255,0.45); margin: 0; max-width: 620px; } .get-started__item-bd { padding-left: calc(28px + clamp(16px, 2vw, 24px)); } .get-started__cta-center { text-align: center; } .get-started__item-bd--wide { padding-left: 0; } .get-started__item-bd > p { font-size: clamp(14px, 1.1vw, 16px); font-weight: 400; line-height: 1.65; color: rgba(255,255,255,0.6); margin: 0 0 24px; } /* Plan cards */ .plan-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; } .plan-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 20px 24px; border: 1px solid var(--color-border); background: #0a0a0a; border-radius: 12px; } .plan-card--featured { border-color: rgba(255,255,255,0.3); background: #111; } .plan-card__badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: #fff; color: #000; padding: 7px 18px; border-radius: 100px; white-space: nowrap; } .plan-card__icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); margin-bottom: 16px; } .plan-card__type { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 0 0 8px; } .plan-card__price { font-size: clamp(36px, 4vw, 52px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: #fff; margin: 0 0 6px; } .plan-card__currency { font-size: 0.55em; font-weight: 400; vertical-align: super; } .plan-card__per { font-size: 0.35em; font-weight: 400; letter-spacing: 0; color: rgba(255,255,255,0.5); } .plan-card__qty { font-size: 13px; color: rgba(255,255,255,0.5); margin: 0 0 16px; } .plan-card__divider { width: 100%; height: 1px; background: var(--color-border); margin-bottom: 16px; } .plan-card__ppc { font-size: 13px; color: rgba(255,255,255,0.6); margin: 0 0 4px; } .plan-card__ppc--highlight { font-weight: 700; color: #fff; } .plan-card__tag { font-size: 12px; color: rgba(255,255,255,0.35); margin: 0; } /* Step 03 studio grid */ .step-studios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } .step-studio { position: relative; display: block; aspect-ratio: 3 / 2.5; border-radius: 10px; overflow: hidden; background: #111; color: #fff; text-decoration: none; } .step-studio__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85); transition: transform 0.5s ease, filter 0.5s ease; } .step-studio:hover .step-studio__img { transform: scale(1.05); filter: brightness(0.5); } .step-studio__hover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(0,0,0,0.55); opacity: 0; transition: opacity 0.35s ease; text-align: center; padding: 20px; } .step-studio:hover .step-studio__hover { opacity: 1; } .step-studio__address { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.8); } .step-studio__route { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 2px; transition: border-color 0.2s ease; } .step-studio__route:hover { border-color: #fff; } .step-studio__info { position: absolute; bottom: 0; left: 0; right: 0; padding: 120px 16px 18px; background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 35%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.1) 85%, transparent 100%); display: flex; align-items: baseline; gap: 8px; } .step-studio__name { font-size: 15px; font-weight: 700; } .step-studio__city { font-size: 13px; color: rgba(255,255,255,0.5); } .step-studios__bottom { margin-top: 32px; } .btn--large { padding: 18px 48px; font-size: 14px; } .step-studios__tagline { margin: 14px 0 0; font-size: 12px; color: rgba(255,255,255,0.35); letter-spacing: 0.04em; } @media (max-width: 768px) { .step-studios { grid-template-columns: repeat(2, 1fr); gap: 12px; } } /* Level image cards */ .level-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; margin-bottom: 28px; } .level-card { display: flex; flex-direction: column; color: #fff; text-decoration: none; } .level-card__img-wrap { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; margin-bottom: 14px; } .level-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; filter: brightness(0.85); } .level-card:hover .level-card__img { transform: scale(1.06); filter: brightness(1); } .level-card__badge { position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 5px 10px; border-radius: 4px; color: rgba(255,255,255,0.85); } .level-card__name { font-size: clamp(15px, 1.3vw, 18px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 6px; } .level-card__desc { font-size: clamp(12px, 0.9vw, 14px); font-weight: 400; line-height: 1.55; color: rgba(255,255,255,0.5); margin: 0 0 10px; flex: 1; } .level-card__cta { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.45); transition: color 0.3s ease; margin-top: auto; } .level-card:hover .level-card__cta { color: #fff; } .get-started__link { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; opacity: 0.7; transition: opacity 0.3s ease; } .get-started__link:hover { opacity: 1; } @media (max-width: 768px) { .level-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; } .level-card__img-wrap { aspect-ratio: 4 / 5; border-radius: 8px; margin-bottom: 10px; } .level-card__name { font-size: 14px; } .level-card__desc { font-size: 12px; line-height: 1.5; } .level-card__cta { font-size: 11px; } } @media (max-width: 420px) { .level-cards { grid-template-columns: 1fr 1fr; gap: 10px; } .level-card__img-wrap { aspect-ratio: 1 / 1; } .level-card__desc { font-size: 11px; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } } /* legacy alias */ .levels { padding: clamp(48px, 6vw, 80px) 0; border-top: 1px solid var(--color-border); } .levels__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } .levels__header { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); } .levels__heading { margin: 0; font-size: clamp(28px, 3.5vw, 44px); font-weight: 700; letter-spacing: 0.06em; line-height: 1.15; text-transform: uppercase; color: #fff; } .levels__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .levels__item { padding: 0 clamp(16px, 2.5vw, 32px); border-left: 1px solid var(--color-border); display: flex; flex-direction: column; } .levels__item:first-child { border-left: none; padding-left: 0; } .levels__item:last-child { padding-right: 0; } .levels__tag { display: block; font-size: clamp(48px, 6vw, 72px); font-weight: 800; letter-spacing: 0.05em; line-height: 1; color: rgba(255, 255, 255, 0.25); margin-bottom: clamp(16px, 2vw, 24px); } .levels__name { font-size: clamp(17px, 1.6vw, 22px); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 10px; color: #fff; } .levels__desc { font-size: clamp(13px, 1.2vw, 16px); font-weight: 400; line-height: 1.65; color: rgba(255, 255, 255, 0.6); } .levels__item-cta { margin-top: auto; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; transition: opacity var(--transition); } .levels__item-cta:hover { opacity: 0.6; } .levels__cta { text-align: center; margin-top: clamp(32px, 4vw, 48px); } /* =========================================== STUDIOS HOME (horizontal scroll) =========================================== */ .studios-home { padding: var(--section-gap) 0; } .studios-home__header { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); text-align: center; margin-bottom: clamp(32px, 4vw, 48px); } .studios-home__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 12px; } .studios-home__heading { font-size: clamp(24px, 3.5vw, 40px); font-weight: 600; line-height: 1.1; letter-spacing: 0.02em; } .studios-home__heading em { font-style: italic; font-weight: 300; } .studios-home__scroll { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding: 0 var(--page-gutter); scrollbar-width: none; } .studios-home__scroll::-webkit-scrollbar { display: none; } .studio-slide { position: relative; flex: 0 0 clamp(200px, 22vw, 260px); aspect-ratio: 3 / 3.8; border-radius: var(--radius-sm); overflow: hidden; scroll-snap-align: start; display: flex; align-items: flex-end; color: inherit; text-decoration: none; } .studio-slide__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .studio-slide:hover .studio-slide__img { transform: scale(1.05); } .studio-slide__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%); } .studio-slide__content { position: relative; z-index: 1; padding: 18px; } .studio-slide__city { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); display: block; margin-bottom: 4px; } .studio-slide__name { font-size: clamp(16px, 1.8vw, 22px); font-weight: 600; letter-spacing: 0.02em; } .studio-slide--soon { background: var(--color-surface); border: 1px solid var(--color-border); align-items: center; justify-content: center; cursor: default; } .studio-slide--soon .studio-slide__content { text-align: center; } /* Hover info overlay */ .studio-slide__hover { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%); opacity: 0; transition: opacity 0.35s ease; } .studio-slide:hover .studio-slide__hover { opacity: 1; } .studio-slide:not(.studio-slide--new):hover .studio-slide__content { opacity: 0; } .studio-slide__content { transition: opacity 0.35s ease; } .studio-slide__address { font-size: 12px; font-weight: 400; line-height: 1.5; color: rgba(255,255,255,0.7); margin-bottom: 12px; } .studio-slide__route { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; margin-bottom: 6px; cursor: pointer; transition: opacity var(--transition); } .studio-slide__route:hover { opacity: 0.7; } .studio-slide__detail { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); } /* New studio – highlight card */ .studio-slide--new { background: var(--color-surface); border: 1px solid rgba(255,255,255,0.15); display: flex; flex-direction: column; align-items: stretch; justify-content: center; cursor: default; position: relative; overflow: hidden; } .studio-slide--new .studio-slide__content { text-align: center; z-index: 1; padding: 18px; display: flex; flex-direction: column; align-items: center; } .studio-slide__badge { display: inline-block; margin-top: 8px; padding: 4px 14px; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--color-border); border-radius: 100px; color: var(--color-text-muted); } .studio-slide__badge--new { border-color: #fff; color: #fff; background: rgba(255,255,255,0.1); margin-bottom: 12px; } /* Waitlist form */ .studio-slide__waitlist { position: relative; z-index: 1; padding: 0 14px 18px; } .studio-slide__waitlist-text { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 8px; text-align: center; } .studio-slide__waitlist-input { display: flex; gap: 0; border: 1px solid var(--color-border); border-radius: 100px; overflow: hidden; } .studio-slide__email { flex: 1; background: transparent; border: none; color: #fff; font-size: 11px; padding: 8px 14px; outline: none; font-family: inherit; min-width: 0; } .studio-slide__email::placeholder { color: var(--color-text-muted); } .studio-slide__waitlist-btn { background: #fff; color: #000; border: none; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 14px; cursor: pointer; white-space: nowrap; font-family: inherit; transition: opacity var(--transition); } .studio-slide__waitlist-btn:hover { opacity: 0.85; } /* CTA under studios */ .studios-home__cta { max-width: var(--page-width); margin: 0 auto; padding: clamp(32px, 4vw, 48px) var(--page-gutter) 0; text-align: center; } /* =========================================== STEPS (minimal, inline) =========================================== */ .steps { padding: var(--section-gap) 0; border-top: 1px solid var(--color-border); } .steps__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } .steps__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .steps__item { padding: 0 clamp(16px, 2.5vw, 36px); border-left: 1px solid var(--color-border); display: flex; gap: clamp(18px, 2.5vw, 24px); align-items: flex-start; } .steps__item:first-child { border-left: none; padding-left: 0; } .steps__item:last-child { padding-right: 0; } /* Größe wie .levels__tag */ .steps__num { font-size: clamp(48px, 6.5vw, 80px); font-weight: 800; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.14); line-height: 1; flex-shrink: 0; min-width: 0.85em; } .steps__body { padding-top: clamp(4px, 0.8vw, 8px); } /* Wie .levels__name */ .steps__title { font-size: clamp(17px, 1.6vw, 22px); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 12px; color: rgba(255, 255, 255, 0.95); } /* Wie .levels__desc */ .steps__text { font-size: clamp(14px, 1.25vw, 17px); font-weight: 300; line-height: 1.7; color: var(--color-text-muted); } .steps__cta { text-align: center; margin-top: clamp(40px, 5vw, 56px); } /* =========================================== ABOUT =========================================== */ .about { padding: var(--section-gap) 0; } .about__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } .about__heading { font-size: clamp(28px, 4.5vw, 52px); font-weight: 600; line-height: 1.1; letter-spacing: 0.02em; text-align: center; margin-bottom: clamp(48px, 6vw, 80px); } .about__heading em { font-style: italic; font-weight: 300; } .about__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .about__item { padding: 40px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); transition: background var(--transition), border-color var(--transition); } .about__item:hover { background: var(--color-hover); border-color: rgba(255, 255, 255, 0.2); } .about__item-title { font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; } .about__item-text { font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--color-text-muted); } .about__item--clickable { cursor: pointer; position: relative; padding-bottom: 52px; } .about__item--clickable.is-active { background: var(--color-hover); border-color: rgba(255, 255, 255, 0.3); } .about__item-chevron { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: var(--color-text-muted); opacity: 0.4; transition: opacity var(--transition), transform 0.4s var(--ease); } .about__item--clickable:hover .about__item-chevron { opacity: 0.7; } .about__item--clickable.is-active .about__item-chevron { opacity: 0.8; transform: translateX(-50%) rotate(180deg); } /* Reveal panels below grid */ .about__reveal { max-height: 0; overflow: hidden; transition: max-height 0.65s cubic-bezier(0.22, 1, 0.36, 1); } .about__reveal.is-open { overflow: visible; } .about__reveal-inner { padding-top: clamp(28px, 3vw, 40px); } .about__reveal-cta { text-align: center; margin-top: 28px; } /* Horizontal card grid inside reveal */ .about__reveal .studio-gallery__scroll { grid-template-columns: repeat(2, 1fr); gap: 12px; } .about__reveal .studio-gallery__card { position: relative; display: block; padding-left: 35%; } .about__reveal .studio-gallery__img-wrap { position: absolute; top: 0; left: 0; bottom: 0; width: 35%; aspect-ratio: auto; } .about__reveal .studio-gallery__content { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 16px 20px; } .about__reveal .studio-gallery__name { font-size: clamp(16px, 1.8vw, 20px); margin-bottom: 4px; } .about__reveal .studio-gallery__detail { margin-bottom: 10px; } .about__reveal .studio-gallery__cta { font-size: 12px; } @media (max-width: 768px) { .about__reveal .studio-gallery__scroll { grid-template-columns: 1fr; } } @media (max-width: 480px) { .about__reveal .studio-gallery__card { flex-direction: column; } .about__reveal .studio-gallery__img-wrap { flex: none; max-height: none; aspect-ratio: 16 / 9; } .about__reveal .studio-gallery__content { padding: 20px; } } /* =========================================== OFFERINGS =========================================== */ .offerings { padding: var(--section-gap) 0; } .offerings__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } .offerings__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-muted); text-align: center; margin-bottom: 12px; } .offerings__heading { font-size: clamp(28px, 4vw, 48px); font-weight: 600; letter-spacing: 0.02em; text-align: center; margin-bottom: clamp(40px, 5vw, 72px); } .offerings__heading em { font-style: italic; font-weight: 300; } .offerings__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } /* Offer Card */ .offer-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; transition: border-color var(--transition), transform var(--transition); } .offer-card:hover { border-color: rgba(255, 255, 255, 0.2); transform: translateY(-4px); } .offer-card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; } .offer-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .offer-card:hover .offer-card__img { transform: scale(1.05); } .offer-card__body { padding: 32px; } .offer-card__title { font-size: 18px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 12px; } .offer-card__text { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--color-text-muted); margin-bottom: 24px; } .offer-card__link { display: inline-block; font-size: 13px; font-weight: 500; color: var(--color-text); transition: transform var(--transition); } .offer-card:hover .offer-card__link { transform: translateX(4px); } /* =========================================== EVENTS (Homepage) =========================================== */ .events { padding: var(--section-gap) 0; } .events-page .events__inner { padding-top: 0; } .events__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } .events__block { margin-bottom: clamp(60px, 6vw, 100px); } .events__block:last-child { margin-bottom: 0; } .events__block--past { padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--color-border); } .events__block--past .events__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .events__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text-muted); text-align: center; margin-bottom: 12px; } .events__eyebrow--muted { opacity: 0.7; } .events__cta { text-align: center; margin-top: 40px; } .events__heading { font-size: clamp(24px, 3.5vw, 40px); font-weight: 600; letter-spacing: 0.02em; text-align: center; margin-bottom: clamp(40px, 5vw, 64px); } .events__heading--past { color: var(--color-text-muted); } .events__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .events__grid--upcoming { grid-template-columns: repeat(2, 1fr); gap: 28px; } /* Featured spans full width, same height as others */ .event-card--featured { grid-column: 1 / -1; } /* Hide scrollbar but keep scroll functionality */ .events__grid::-webkit-scrollbar { height: 0; display: none; } .events__grid { scrollbar-width: none; } /* Event card */ .event-card { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: var(--color-surface); text-decoration: none; color: inherit; cursor: pointer; padding: 0; font-family: inherit; font-size: inherit; text-align: left; width: 100%; transition: border-color var(--transition), transform var(--transition); } .event-card:hover { border-color: rgba(255, 255, 255, 0.2); transform: translateY(-4px); } .event-card--past { opacity: 0.75; } .event-card--past .event-card__img { filter: grayscale(20%); } .event-card--past:hover { opacity: 1; } .event-card--past:hover .event-card__img { filter: grayscale(0%); } /* Featured event card – same layout/size as regular cards (first in grid) */ .event-card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; } .event-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .event-card:hover .event-card__img { transform: scale(1.05); } .event-card__date { position: absolute; top: 16px; left: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 56px; height: 56px; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 12px; line-height: 1; } .event-card__day { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .event-card__month { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 2px; } .event-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; } .event-card__tag { display: inline-block; align-self: flex-start; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: 100px; padding: 3px 12px; margin-bottom: 14px; } .event-card__title { font-size: 17px; font-weight: 500; letter-spacing: 0.02em; margin-bottom: 8px; } .event-card__meta { font-size: 13px; font-weight: 400; color: var(--color-text-muted); margin-bottom: 12px; } .event-card__text { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--color-text-muted); flex: 1; } .event-card__link { display: inline-block; font-size: 13px; font-weight: 500; color: var(--color-text); margin-top: 16px; transition: transform var(--transition); } .event-card:hover .event-card__link { transform: translateX(4px); } /* =========================================== FAQ PAGE =========================================== */ /* FAQ Hero */ .faq-hero { padding: calc(var(--header-height) + 100px) 0 60px; text-align: center; } .faq-hero__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } .faq-hero__title { font-size: clamp(48px, 8vw, 100px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-bottom: 20px; } .faq-hero__sub { font-size: clamp(16px, 2vw, 20px); font-weight: 300; line-height: 1.6; color: var(--color-text-muted); } /* FAQ Section */ .faq { padding: 40px 0 var(--section-gap); } .faq__inner { max-width: 780px; margin: 0 auto; padding: 0 var(--page-gutter); } /* FAQ Group */ .faq__group { margin-bottom: 56px; } .faq__group:last-child { margin-bottom: 0; } .faq__group-title { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); padding-bottom: 20px; border-bottom: 1px solid var(--color-border); margin-bottom: 0; } /* FAQ Item (Accordion) */ .faq__item { border-bottom: 1px solid var(--color-border); } .faq__question { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 22px 0; background: none; border: none; color: var(--color-text); font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1.4; text-align: left; cursor: pointer; transition: color var(--transition); } .faq__question:hover { color: var(--color-text-muted); } .faq__icon { flex-shrink: 0; transition: transform 0.3s ease; } .faq__item.is-open .faq__icon { transform: rotate(180deg); } .faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; } .faq__item.is-open .faq__answer { max-height: 600px; } .faq__answer p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--color-text-muted); padding-bottom: 22px; } .faq__answer a { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; transition: color var(--transition); } .faq__answer a:hover { color: var(--color-text-muted); } /* =========================================== LEGAL PAGES (AGB, Impressum, Datenschutz) =========================================== */ .legal { padding: calc(var(--header-height) + 80px) 0 var(--section-gap); } .legal__inner { max-width: 780px; margin: 0 auto; padding: 0 var(--page-gutter); } .legal__title { font-size: clamp(48px, 8vw, 100px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-bottom: 48px; } .legal__content { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--color-text-muted); overflow-wrap: anywhere; word-break: break-word; } .legal__content h2 { font-size: 18px; font-weight: 600; color: var(--color-text); margin-top: 40px; margin-bottom: 16px; } .legal__content h2:first-child { margin-top: 0; } .legal__content h3 { font-size: 16px; font-weight: 500; color: var(--color-text); margin-top: 24px; margin-bottom: 12px; } .legal__content p { margin-bottom: 16px; } .legal__content p:last-child { margin-bottom: 0; } .legal__content ul { list-style: disc; margin-left: 1.5em; margin-bottom: 16px; } .legal__content li { margin-bottom: 8px; } .legal__content a { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; transition: color var(--transition); } .legal__content a:hover { color: var(--color-text-muted); } /* =========================================== ACADEMY PAGE =========================================== */ /* Academy Hero */ .acad-hero { position: relative; height: 80svh; min-height: 480px; max-height: 800px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; } .acad-hero__media { position: absolute; inset: 0; } .acad-hero__img { width: 100%; height: 100%; object-fit: cover; } .acad-hero__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); } .acad-hero__content { position: relative; z-index: 1; max-width: 720px; padding: 0 var(--page-gutter); } .acad-hero__badge { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); border: 1px solid rgba(255, 255, 255, 0.3); padding: 6px 18px; border-radius: 100px; margin-bottom: 24px; } .acad-hero__title { font-size: clamp(32px, 5vw, 56px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 16px; } .acad-hero__sub { font-size: clamp(16px, 2vw, 20px); font-weight: 300; color: var(--color-text-muted); margin-bottom: 32px; } .acad-hero__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; } .acad-hero__note { font-size: 13px; font-weight: 400; color: var(--color-text-muted); opacity: 0.7; max-width: 480px; margin: 0 auto; line-height: 1.5; } /* Academy Intro */ .acad-intro { padding: var(--section-gap) 0; } .acad-intro__inner { max-width: 780px; margin: 0 auto; padding: 0 var(--page-gutter); } .acad-intro__heading { font-size: clamp(28px, 4vw, 42px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 28px; } .acad-intro__text p { font-size: 16px; font-weight: 300; line-height: 1.8; color: var(--color-text-muted); margin-bottom: 16px; } /* Curriculum Grid */ .acad-curriculum { padding: 0 0 var(--section-gap); } .acad-curriculum__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } .acad-curriculum__heading { font-size: clamp(28px, 4vw, 48px); font-weight: 700; letter-spacing: -0.02em; text-align: center; margin-bottom: clamp(40px, 5vw, 72px); } .acad-curriculum__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .acad-curriculum__item { padding: 32px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); transition: background var(--transition), border-color var(--transition); } .acad-curriculum__item:hover { background: var(--color-hover); border-color: rgba(255, 255, 255, 0.2); } .acad-curriculum__num { display: block; font-size: 36px; font-weight: 800; letter-spacing: -0.03em; color: var(--color-text); margin-bottom: 16px; } .acad-curriculum__item h3 { font-size: 15px; font-weight: 600; line-height: 1.4; } /* Pricing & Dates */ .acad-pricing { padding: 0 0 var(--section-gap); } .acad-pricing__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } .acad-pricing__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; } .acad-pricing__card { position: relative; padding: 48px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius); background: radial-gradient(120% 80% at 50% -20%, rgba(255, 255, 255, 0.08) 0%, transparent 55%), var(--color-hover); text-align: center; display: flex; flex-direction: column; align-items: center; overflow: hidden; } .acad-pricing__card::after { content: ""; position: absolute; inset: auto 12% -40% 12%; height: 55%; background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.04) 0%, transparent 70%); pointer-events: none; } .acad-pricing__label { position: relative; z-index: 1; display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-bg); background: var(--color-text); padding: 4px 16px; border-radius: 100px; margin-bottom: 24px; } .acad-pricing__card > .acad-pricing__amount { position: relative; z-index: 1; font-size: clamp(40px, 5vw, 64px); font-weight: 700; letter-spacing: -0.03em; margin-bottom: 8px; } .acad-pricing__note { position: relative; z-index: 1; font-size: 14px; font-weight: 300; color: var(--color-text-muted); margin-bottom: 20px; } .acad-pricing__extra { position: relative; z-index: 1; max-width: 340px; margin: 0 0 28px; display: flex; flex-direction: column; gap: 14px; text-align: left; } .acad-pricing__extra p { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.55; color: rgba(255, 255, 255, 0.58); } .acad-pricing__extra strong { font-weight: 600; color: rgba(255, 255, 255, 0.82); } .acad-pricing__btn { position: relative; z-index: 1; width: 100%; max-width: 240px; } .acad-pricing__dates { position: relative; padding: 48px; border: 1px solid var(--color-border); border-radius: var(--radius); background: radial-gradient(100% 60% at 100% 0%, rgba(255, 255, 255, 0.06) 0%, transparent 50%), var(--color-surface); overflow: hidden; } .acad-pricing__dates::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); opacity: 0.8; } .acad-pricing__dates-title { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 28px; } .acad-pricing__dates--schedule .acad-pricing__dates-title { margin-bottom: 10px; } .acad-pricing__dates-sub { position: relative; z-index: 1; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text); margin: 0 0 8px; } .acad-pricing__schedule-kicker { position: relative; z-index: 1; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); margin: 0 0 18px; } .acad-pricing__schedule { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; } .acad-pricing__schedule::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 28px; width: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.08) 100%); } .acad-pricing__schedule-item { position: relative; padding-left: 36px; padding-bottom: 28px; } .acad-pricing__schedule-item:last-child { padding-bottom: 0; } .acad-pricing__schedule-dot { position: absolute; left: 0; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--color-text); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1); box-sizing: border-box; } .acad-pricing__schedule-dot--end { background: var(--color-bg); border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08); } .acad-pricing__schedule-label { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; } .acad-pricing__schedule-body > .acad-pricing__schedule-label:only-child { margin-bottom: 0; font-size: clamp(16px, 2.2vw, 18px); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.92); } .acad-pricing__schedule-text { font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--color-text-muted); margin: 0; } .acad-pricing__date-block { position: relative; z-index: 1; } .acad-pricing__date-block h4 { font-size: 18px; font-weight: 600; margin-bottom: 12px; } .acad-pricing__date-block p { font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--color-text-muted); margin-bottom: 4px; } .acad-pricing__status { position: relative; z-index: 1; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--color-border); font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--color-text-muted); } .acad-section-eyebrow { text-align: center; margin-bottom: 16px; } .acad-stats { padding: 0 0 var(--section-gap); } .acad-stats__inner { max-width: 780px; margin: 0 auto; padding: 0 var(--page-gutter); text-align: center; } .acad-stats__line { font-size: clamp(20px, 3vw, 28px); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; color: var(--color-text-muted); } .acad-stats__line strong { font-weight: 700; color: var(--color-text); } .acad-process__step-body p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--color-text-muted); margin: 0; } /* Why Section */ .acad-why { padding: 0 0 var(--section-gap); } .acad-why__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } .acad-why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .acad-why__media { overflow: hidden; border-radius: var(--radius); } .acad-why__img { width: 100%; height: 100%; object-fit: cover; display: block; max-height: 600px; } .acad-why__heading { font-size: clamp(24px, 3.5vw, 36px); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 24px; } .acad-why__content p { font-size: 16px; font-weight: 300; line-height: 1.8; color: var(--color-text-muted); margin-bottom: 16px; } .acad-why__content .btn { margin-top: 16px; } /* What's Included */ .acad-included { padding: 0 0 var(--section-gap); position: relative; } .acad-included--has-bg { padding: var(--section-gap) 0; } .acad-included__bg { position: absolute; inset: 0; z-index: 0; } .acad-included__bg-img { width: 100%; height: 100%; object-fit: cover; } .acad-included__bg-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.8); } .acad-included--has-bg .acad-included__inner { position: relative; z-index: 1; } .acad-included--has-bg .acad-included__item { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); } .acad-included__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } .acad-included__heading { font-size: clamp(28px, 4vw, 48px); font-weight: 700; letter-spacing: -0.02em; text-align: center; margin-bottom: clamp(40px, 5vw, 64px); } .acad-included__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } /* 4 + 3 items: bottom row fills full width like top row (12-col split: 3+3+3+3 / 4+4+4) */ .acad-included__grid--balanced { grid-template-columns: repeat(12, 1fr); } .acad-included__grid--balanced .acad-included__item:nth-child(-n + 4) { grid-column: span 3; } .acad-included__grid--balanced .acad-included__item:nth-child(n + 5) { grid-column: span 4; } .acad-included__item { display: flex; align-items: flex-start; gap: 14px; padding: 20px 24px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); } .acad-included__item svg { flex-shrink: 0; color: var(--color-text-muted); margin-top: 2px; } .acad-included__item span { font-size: 15px; font-weight: 400; line-height: 1.5; } /* Is This Right for You */ .acad-fit { padding: 0 0 var(--section-gap); } .acad-fit__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } .acad-fit__layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .acad-fit__text { text-align: left; } .acad-fit__heading { font-size: clamp(28px, 4vw, 48px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: clamp(32px, 4vw, 48px); } .acad-fit__grid { display: grid; grid-template-columns: 1fr; gap: 16px; text-align: left; margin-bottom: 32px; } .acad-fit__item { padding: 20px 24px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); } .acad-fit__item p { font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--color-text-muted); } .acad-fit__cta { font-size: 16px; font-weight: 500; color: var(--color-text); margin-bottom: 24px; } .acad-fit__media { overflow: hidden; border-radius: var(--radius); } .acad-fit__img { width: 100%; height: 100%; object-fit: cover; display: block; max-height: 650px; } /* How It Works – Timeline */ .acad-process { padding: 0 0 var(--section-gap); } .acad-process__inner { max-width: 780px; margin: 0 auto; padding: 0 var(--page-gutter); } .acad-process__heading { font-size: clamp(28px, 4vw, 48px); font-weight: 700; letter-spacing: -0.02em; text-align: center; margin-bottom: 12px; } .acad-process__sub { font-size: 16px; font-weight: 300; color: var(--color-text-muted); text-align: center; margin-bottom: clamp(48px, 5vw, 72px); } .acad-process__step { display: flex; gap: 28px; padding: 32px 0; border-bottom: 1px solid var(--color-border); } .acad-process__step:first-child { padding-top: 0; } .acad-process__step:last-child { border-bottom: none; } .acad-process__step-num { flex-shrink: 0; font-size: 36px; font-weight: 800; letter-spacing: -0.03em; color: #334d48; line-height: 1; width: 48px; } .acad-process__step-body h3 { font-size: 17px; font-weight: 600; margin-bottom: 12px; } .acad-process__step-body ul { list-style: none; } .acad-process__step-body li { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--color-text-muted); padding: 4px 0; padding-left: 16px; position: relative; } .acad-process__apply { margin-top: 20px; } .acad-process__step-body li::before { content: ''; position: absolute; left: 0; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-text-muted); } /* Academy: staggered steps (left / right), not one full-width column */ .acad-process--stagger .acad-process__inner { max-width: min(1040px, 100%); } .acad-process--stagger .acad-process__timeline { display: flex; flex-direction: column; align-items: stretch; gap: clamp(16px, 3vw, 24px); } .acad-process--stagger .acad-process__step { width: min(100%, 480px); max-width: 480px; padding: 0 0 clamp(22px, 3vw, 30px); margin: 0; border: none; background: none; border-radius: 0; border-bottom: 1px solid var(--color-border); box-sizing: border-box; } .acad-process--stagger .acad-process__step:nth-child(odd) { align-self: flex-start; margin-right: auto; } .acad-process--stagger .acad-process__step:nth-child(even) { align-self: flex-end; margin-left: auto; } .acad-process--stagger .acad-process__step:last-child { border-bottom: none; padding-bottom: 0; } /* Meet Your Coach */ .acad-coach { padding: 0 0 var(--section-gap); } .acad-coach__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } .acad-coach__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .acad-coach__media { overflow: hidden; border-radius: var(--radius); } .acad-coach__img { width: 100%; height: 100%; object-fit: cover; display: block; max-height: 500px; } .acad-coach__heading { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 20px; } .acad-coach__name { font-size: clamp(28px, 4vw, 42px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 24px; } .acad-coach__creds { list-style: none; } .acad-coach__creds li { font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--color-text-muted); padding: 8px 0; border-bottom: 1px solid var(--color-border); } .acad-coach__creds li:last-child { border-bottom: none; } .acad-coach__social { margin-top: 24px; font-size: 15px; } .acad-coach__social-link { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; } .acad-coach__social-link:hover { opacity: 0.8; } .acad-coach__social-sep { margin: 0 8px; color: var(--color-text-muted); } /* Group Photo */ .acad-group-photo { max-width: var(--page-width); margin: 0 auto var(--section-gap); padding: 0 var(--page-gutter); } .acad-group-photo__img { width: 100%; display: block; border-radius: var(--radius); object-fit: cover; max-height: 560px; } /* Testimonials */ .acad-testimonials { padding: 0 0 var(--section-gap); } .acad-testimonials__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } .acad-testimonials__heading { font-size: clamp(28px, 4vw, 48px); font-weight: 700; letter-spacing: -0.02em; text-align: center; margin-bottom: clamp(40px, 5vw, 64px); } /* Mobile / tablet: horizontal strip — not a long vertical stack */ .acad-testimonials__grid { display: flex; flex-direction: row; gap: 20px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--page-gutter); padding: 4px 0 16px; margin: 0 calc(-1 * var(--page-gutter)); padding-inline: var(--page-gutter); -webkit-overflow-scrolling: touch; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; } .acad-quote { flex: 0 0 min(340px, 88vw); max-width: 400px; scroll-snap-align: start; padding: 28px 32px; border: none; border-left: 3px solid rgba(255, 255, 255, 0.22); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: rgba(255, 255, 255, 0.04); box-sizing: border-box; } @media (min-width: 900px) { .acad-testimonials__grid { display: block; overflow: visible; margin: 0; padding: 0; column-count: 2; column-gap: 28px; column-fill: balance; } .acad-quote { flex: none; max-width: none; width: 100%; margin-bottom: 28px; break-inside: avoid; scroll-snap-align: unset; } .acad-quote:last-child { margin-bottom: 0; } } @media (min-width: 1200px) { .acad-testimonials__grid { column-count: 3; column-gap: 28px; } } .acad-quote__stars { font-size: 16px; letter-spacing: 2px; color: #fff; margin-bottom: 16px; } .acad-quote p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--color-text-muted); font-style: italic; margin-bottom: 20px; } .acad-quote cite { font-size: 14px; font-weight: 600; font-style: normal; letter-spacing: 0.02em; } /* Academy FAQ override */ .acad-faq { padding: 0 0 var(--section-gap); } .acad-faq__heading { font-size: clamp(28px, 4vw, 48px); font-weight: 700; letter-spacing: -0.02em; text-align: center; margin-bottom: clamp(40px, 5vw, 64px); } /* =========================================== CONTACT PAGE =========================================== */ /* Contact Hero */ .contact-hero { padding: calc(var(--header-height) + 100px) 0 60px; text-align: center; } .contact-hero__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } .contact-hero__title { font-size: clamp(48px, 8vw, 100px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-bottom: 20px; } .contact-hero__sub { font-size: clamp(16px, 2vw, 20px); font-weight: 300; line-height: 1.6; color: var(--color-text-muted); max-width: 520px; margin: 0 auto; } /* Contact Section */ .contact { padding: 40px 0 var(--section-gap); } .contact__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } .contact__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; align-items: start; } /* Contact Form */ .contact-form__group { margin-bottom: 24px; } .contact-form__label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 8px; } .contact-form__input { display: block; width: 100%; padding: 14px 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-text); font-family: inherit; font-size: 15px; font-weight: 400; transition: border-color var(--transition), background var(--transition); } .contact-form__input::placeholder { color: rgba(255, 255, 255, 0.25); } .contact-form__input:focus { outline: none; border-color: rgba(255, 255, 255, 0.35); background: var(--color-hover); } .contact-form__select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; cursor: pointer; } .contact-form__textarea { resize: vertical; min-height: 140px; } .contact-form__submit { width: 100%; margin-top: 8px; } /* Contact Info Sidebar */ .contact__info-block { margin-bottom: 36px; padding-bottom: 36px; border-bottom: 1px solid var(--color-border); } .contact__info-block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .contact__info-label { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 10px; } .contact__info-value { display: block; font-size: 16px; font-weight: 400; line-height: 1.5; } .contact__info-link { display: inline-block; font-size: 15px; font-weight: 400; color: var(--color-text); text-decoration: none; transition: color var(--transition); } .contact__info-link:hover { color: var(--color-text-muted); } .contact__info-social { display: flex; gap: 20px; } .contact__info-studios { list-style: none; } .contact__info-studios li { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--color-text-muted); padding: 10px 0; border-bottom: 1px solid var(--color-border); } .contact__info-studios li:last-child { border-bottom: none; } .contact__info-studios strong { font-weight: 500; color: var(--color-text); } .contact__info-text { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--color-text-muted); margin-bottom: 8px; } /* =========================================== EVENT DETAIL PANEL (slide-in drawer) =========================================== */ .event-panel { position: fixed; inset: 0; z-index: 2000; pointer-events: none; visibility: hidden; } .event-panel.is-open { pointer-events: auto; visibility: visible; } .event-panel__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background 0.4s ease; } .event-panel.is-open .event-panel__overlay { background: rgba(0, 0, 0, 0.6); } .event-panel__drawer { position: absolute; top: 0; right: 0; width: 520px; max-width: 100%; height: 100%; background: var(--color-bg); border-left: 1px solid var(--color-border); transform: translateX(100%); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); display: flex; flex-direction: column; } .event-panel.is-open .event-panel__drawer { transform: translateX(0); } .event-panel__close { position: absolute; top: 16px; right: 16px; z-index: 10; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; color: var(--color-text); cursor: pointer; transition: background var(--transition); } .event-panel__close:hover { background: rgba(0, 0, 0, 0.8); } .event-panel__scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Panel hero image */ .event-panel__hero { position: relative; aspect-ratio: 21 / 9; max-height: 200px; overflow: hidden; } .event-panel__img { width: 100%; height: 100%; object-fit: cover; } .event-panel__hero-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.7) 100% ); } .event-panel__hero-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 32px; } .event-panel__tag { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 100px; padding: 4px 14px; margin-bottom: 12px; } .event-panel__title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } /* Panel body */ .event-panel__body { padding: 32px; } .event-panel__meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-bottom: 28px; border-bottom: 1px solid var(--color-border); margin-bottom: 28px; } .event-panel__meta-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 6px; } .event-panel__meta-value { display: block; font-size: 15px; font-weight: 400; line-height: 1.5; } .event-panel__desc { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--color-text-muted); margin-bottom: 28px; } .event-panel__details { padding: 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: 32px; } .event-panel__details h3 { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 14px; } .event-panel__details ul { list-style: none; padding: 0; } .event-panel__details li { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--color-text-muted); padding: 6px 0; padding-left: 16px; position: relative; } .event-panel__details li::before { content: ''; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--color-text-muted); transform: translateY(-50%); } .event-panel__actions { display: flex; gap: 12px; } .event-panel__actions .btn { flex: 1; text-align: center; } /* =========================================== STUDIOS =========================================== */ .studios { padding: 0 0 var(--section-gap); } .studios__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } .studios__heading { font-size: clamp(28px, 4vw, 48px); font-weight: 700; letter-spacing: -0.02em; text-align: center; margin-bottom: 12px; } .studios__sub { font-size: 15px; font-weight: 400; color: var(--color-text-muted); text-align: center; margin-bottom: clamp(40px, 5vw, 72px); } .studios__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } /* Studio Card */ .studio-card { padding: 40px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); transition: background var(--transition), border-color var(--transition); } .studio-card:hover { background: var(--color-hover); border-color: rgba(255, 255, 255, 0.2); } .studio-card__city { font-size: clamp(24px, 3vw, 36px); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border); } .studio-card__locations li { padding: 14px 0; } .studio-card__locations li:not(:last-child) { border-bottom: 1px solid var(--color-border); } .studio-card__name { display: block; font-size: 15px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 4px; } .studio-card__address { display: block; font-size: 13px; font-weight: 300; color: var(--color-text-muted); } .studio-card__link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; transition: color var(--transition); } .studio-card__link .studio-card__name { flex: 0 0 auto; margin-bottom: 0; } .studio-card__link .studio-card__address { flex: 1; } .studio-card__arrow { font-size: 18px; color: var(--color-text-muted); transition: transform var(--transition), color var(--transition); flex-shrink: 0; } .studio-card__link:hover .studio-card__arrow { transform: translateX(4px); color: var(--color-text); } .studio-card__link:hover .studio-card__name { color: var(--color-text); } .studio-card__badge { display: inline-block; margin-top: 8px; padding: 4px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--color-border); border-radius: 100px; color: var(--color-text-muted); } /* =========================================== GIFTCARD BANNER (Homepage) =========================================== */ .gc-banner { padding: var(--section-gap) 0; } .gc-banner__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .gc-banner__eyebrow { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-bg); background: var(--color-text); padding: 4px 14px; border-radius: 100px; margin-bottom: 24px; } .gc-banner__title { font-size: clamp(36px, 5vw, 64px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 20px; } .gc-banner__text { font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--color-text-muted); margin-bottom: 32px; max-width: 460px; } .gc-banner__visual { display: flex; justify-content: center; align-items: center; } .gc-banner__card { width: 320px; height: 200px; background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%); border: 1px solid var(--color-border); border-radius: 16px; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); transform: rotate(-3deg); transition: transform var(--transition); } .gc-banner__card:hover { transform: rotate(0deg) scale(1.02); } .gc-banner__logo { height: 20px; width: auto; opacity: 0.9; } .gc-banner__card-text { font-size: 22px; font-weight: 300; letter-spacing: 0.04em; } .gc-banner__card-value { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); } /* =========================================== GIFTCARD PAGE =========================================== */ /* Hero */ .gc-hero { padding: calc(var(--header-height) + 100px) 0 80px; text-align: center; } .gc-hero__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } .gc-hero__badge { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); border: 1px solid var(--color-border); padding: 6px 20px; border-radius: 100px; margin-bottom: 28px; } .gc-hero__title { font-size: clamp(48px, 8vw, 100px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-bottom: 24px; } .gc-hero__sub { font-size: clamp(16px, 2vw, 20px); font-weight: 300; line-height: 1.6; color: var(--color-text-muted); max-width: 540px; margin: 0 auto; } /* Options grid */ .gc-options { padding: 40px 0 var(--section-gap); } .gc-options__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } .gc-options__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; } /* Individual card */ .gc-card { position: relative; padding: 40px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); transition: border-color var(--transition), background var(--transition); display: flex; flex-direction: column; } .gc-card:hover { border-color: rgba(255, 255, 255, 0.2); background: var(--color-hover); } .gc-card--featured { border-color: rgba(255, 255, 255, 0.25); background: var(--color-hover); } .gc-card__label { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-bg); background: var(--color-text); padding: 4px 16px; border-radius: 100px; white-space: nowrap; } .gc-card__top { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .gc-card__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid var(--color-border); border-radius: 14px; color: var(--color-text-muted); } .gc-card__title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; } .gc-card__price { font-size: 16px; font-weight: 300; color: var(--color-text-muted); margin-bottom: 16px; } .gc-card__price strong { font-size: 28px; font-weight: 700; color: var(--color-text); } .gc-card__desc { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--color-text-muted); margin-bottom: 24px; } .gc-card__perks { list-style: none; margin-bottom: 32px; flex: 1; } .gc-card__perks li { font-size: 14px; font-weight: 400; padding: 8px 0; border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); } .gc-card__perks li:last-child { border-bottom: none; } .gc-card__btn { width: 100%; text-align: center; } /* ---- Giftcard Configurator ---- */ .gc-step { max-width: 640px; margin: 0 auto 3rem; } .gc-step__heading { font-size: 1.15rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1.25rem; text-align: center; } .gc-step__hint { font-weight: 400; font-size: 0.85rem; opacity: 0.5; text-transform: none; letter-spacing: 0; } /* Amount presets */ .gc-amounts { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .gc-amounts__btn { background: transparent; border: 1px solid var(--color-border); color: #fff; font-family: var(--font-main); font-size: 1.05rem; font-weight: 500; padding: 0.85rem 1.6rem; border-radius: 100px; cursor: pointer; transition: all 0.2s; min-width: 80px; } .gc-amounts__btn:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.05); } .gc-amounts__btn--active { background: #fff; color: #000; border-color: #fff; } .gc-amounts__custom { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.25rem; } .gc-amounts__or { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.5; } .gc-card__input-group { display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; background: rgba(255, 255, 255, 0.05); max-width: 200px; } .gc-card__input { flex: 1; background: transparent; border: none; color: #fff; font-family: var(--font-main); font-size: 1.1rem; padding: 0.75rem 1rem; outline: none; -moz-appearance: textfield; width: 100%; } .gc-card__input::-webkit-outer-spin-button, .gc-card__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .gc-card__input::placeholder { color: rgba(255, 255, 255, 0.4); } .gc-card__input:focus { background: rgba(255, 255, 255, 0.08); } .gc-card__currency { padding: 0.75rem 1rem; color: rgba(255, 255, 255, 0.6); font-size: 1.1rem; font-weight: 500; pointer-events: none; } /* Design picker */ .gc-designs { display: flex; gap: 1.25rem; justify-content: center; } .gc-designs__option { background: none; border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; padding: 0; transition: border-color 0.25s, transform 0.2s; flex: 0 1 280px; max-width: 280px; } .gc-designs__option:hover { border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); } .gc-designs__option--active { border-color: #fff; } .gc-designs__img { width: 100%; height: auto; display: block; border-radius: 10px; } /* Message */ .gc-message { position: relative; } .gc-message__input { width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: #fff; font-family: var(--font-main); font-size: 0.95rem; padding: 1rem; resize: vertical; outline: none; min-height: 100px; transition: border-color 0.2s, background 0.2s; box-sizing: border-box; } .gc-message__input::placeholder { color: rgba(255, 255, 255, 0.4); } .gc-message__input:focus { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.08); } .gc-message__count { position: absolute; bottom: 0.75rem; right: 1rem; font-size: 0.75rem; opacity: 0.4; } /* Info */ .gc-info { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin: 2rem auto; max-width: 640px; } .gc-info__item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; opacity: 0.7; } .gc-info__item svg { flex-shrink: 0; } /* Checkout CTA */ .gc-checkout { text-align: center; margin-top: 1.5rem; } .gc-checkout__btn { padding: 1rem 3rem; font-size: 1.1rem; min-width: 280px; } @media (max-width: 600px) { .gc-amounts__btn { padding: 0.7rem 1.2rem; font-size: 0.95rem; min-width: 70px; } .gc-designs { flex-direction: column; align-items: center; } .gc-designs__option { max-width: 100%; flex: 0 1 auto; } .gc-info { flex-direction: column; align-items: center; gap: 1rem; } .gc-amounts__custom { flex-direction: column; gap: 0.5rem; } } /* Steps section */ .gc-steps { padding: 0 0 var(--section-gap); } .gc-steps__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } .gc-steps__heading { font-size: clamp(28px, 4vw, 48px); font-weight: 700; letter-spacing: -0.02em; text-align: center; margin-bottom: clamp(48px, 5vw, 80px); } .gc-steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: center; } .gc-steps__item { padding: clamp(20px, 3vw, 28px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.02); } .gc-steps__number { display: block; font-size: 48px; font-weight: 800; letter-spacing: -0.03em; color: rgba(255, 255, 255, 0.08); margin-bottom: 16px; } .gc-steps__title { font-size: 18px; font-weight: 600; margin-bottom: 10px; } .gc-steps__text { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--color-text-muted); } /* =========================================== CTA BANNER =========================================== */ .cta-banner { position: relative; min-height: 40vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .cta-banner__bg { position: absolute; inset: 0; } .cta-banner--parallax { clip-path: inset(0); } .cta-banner--parallax .cta-banner__bg { position: fixed; inset: 0; z-index: -1; } .cta-banner__img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .cta-banner__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); } .cta-banner__content { position: relative; z-index: 1; text-align: center; padding: 80px var(--page-gutter); max-width: 640px; } .cta-banner__title { font-size: clamp(28px, 4vw, 42px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 16px; } .cta-banner__text { font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--color-text-muted); margin-bottom: 36px; } .cta-banner__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* =========================================== CLASS LEVELS PAGE =========================================== */ /* Push levels section to top (no hero above) — legacy, use wo-hero instead */ .cl-levels-top { padding-top: clamp(48px, 6vw, 80px); } /* ── Level guide (class-levels page) ── */ .cl-levels { background: #000; padding: clamp(56px, 7vw, 96px) var(--page-gutter) clamp(48px, 6vw, 80px); } .cl-levels__inner { max-width: var(--page-width); margin: 0 auto; } .cl-levels__head { text-align: center; max-width: 44rem; margin: 0 auto clamp(48px, 6vw, 72px); } .cl-levels__intro { margin: 0 auto; max-width: 34em; font-size: clamp(17px, 1.55vw, 22px); font-weight: 300; line-height: 1.65; letter-spacing: 0.015em; color: rgba(255, 255, 255, 0.78); } .cl-levels__rule { width: 36px; height: 1px; margin: clamp(22px, 3vw, 32px) auto; background: #334d48; } .cl-levels__note { margin: 0 auto; max-width: 32em; font-size: clamp(13px, 1.05vw, 15px); font-weight: 400; line-height: 1.7; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.42); } .cl-levels__title { font-size: clamp(28px, 3.5vw, 44px); font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 14px; } .cl-picker { max-width: 880px; margin: 0 auto; } /* Segmented control — shadcn-style tabs */ .cl-picker__tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; margin-bottom: 20px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); } .cl-picker__tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; background: transparent; border: none; border-radius: calc(var(--radius-sm) - 2px); color: rgba(255, 255, 255, 0.45); cursor: pointer; font-family: var(--font-primary); transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .cl-picker__tab:hover { color: rgba(255, 255, 255, 0.75); } .cl-picker__tab.is-active { background: rgba(255, 255, 255, 0.1); color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } .cl-picker__tab:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; } .cl-picker__tab-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .cl-picker__tab-name { font-size: 11px; font-weight: 500; letter-spacing: 0.02em; } .cl-picker__panels { position: relative; min-height: 420px; } .cl-panel { animation: cl-panel-in 0.35s var(--ease) both; } .cl-panel[hidden] { display: none; } @keyframes cl-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .cl-panel__card { display: grid; grid-template-columns: 1fr 1fr; background: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); overflow: hidden; } .cl-panel__media { position: relative; overflow: hidden; min-height: 320px; } .cl-panel__img { width: 100%; height: 100%; object-fit: cover; display: block; } .cl-panel__body { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 32px); border-left: 1px solid rgba(255, 255, 255, 0.06); } .cl-panel__tag { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); margin-bottom: 10px; } .cl-panel__name { font-size: clamp(22px, 2.5vw, 28px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; color: #fff; margin: 0 0 12px; } .cl-panel__kicker { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.78); line-height: 1.45; margin: 0 0 8px; } .cl-panel__desc { font-size: 14px; font-weight: 300; color: rgba(255, 255, 255, 0.52); line-height: 1.65; margin: 0 0 18px; } .cl-panel__points { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; } .cl-panel__points li { position: relative; padding-left: 14px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.58); } .cl-panel__points li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); transform: translateY(-50%); } .cl-panel__btn { width: 100%; margin-top: auto; padding: 14px 20px; font-size: 12px; } @media (max-width: 720px) { .cl-picker__tabs { grid-template-columns: repeat(2, 1fr); } .cl-picker__tab-name { font-size: 10px; } .cl-panel__card { grid-template-columns: 1fr; } .cl-panel__media { aspect-ratio: 16 / 10; min-height: 0; } .cl-panel__body { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.06); } .cl-picker__panels { min-height: 0; } } @media (max-width: 680px) { .cl-levels { padding: 40px var(--page-gutter); } .cl-levels__head { margin-bottom: 32px; } } /* Video section */ .cl-video { background: #000; border-top: 1px solid var(--color-border); padding: clamp(56px, 7vw, 88px) var(--page-gutter); } .cl-video__inner { max-width: var(--page-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .cl-video__title { font-size: clamp(22px, 2.8vw, 34px); font-weight: 700; line-height: 1.2; color: #fff; margin-bottom: 16px; } .cl-video__desc { font-size: 15px; font-weight: 300; color: var(--color-text-muted); line-height: 1.75; margin-bottom: 28px; } .cl-video__media { width: min(100%, 340px); aspect-ratio: 4 / 5; justify-self: center; border-radius: var(--radius-sm); overflow: hidden; background: #111; } .cl-video__img { width: 100%; height: 100%; object-fit: cover; display: block; } .cl-video__player { aspect-ratio: 16 / 9; } @media (max-width: 900px) { .cl-video__inner { grid-template-columns: 1fr; gap: 40px; } .cl-video__media { width: min(100%, 260px); } } @media (max-width: 768px) { .cl-video { padding: 48px var(--page-gutter); } .cl-video__inner { gap: 28px; } .cl-video__title { font-size: clamp(20px, 5.5vw, 28px); } .cl-video__title br { display: none; } .cl-video__desc { font-size: 14px; } } /* =========================================== FIRST TIMER OFFER PAGE =========================================== */ .fto-scroll-arrow { position: absolute; left: 50%; bottom: 28px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.4); transform: translateX(-50%); transition: border-color var(--transition), color var(--transition); } .fto-scroll-arrow:hover { border-color: rgba(255,255,255,0.5); color: #fff; } /* ── Why 3 classes ────────────────────────── */ .fto-why { background: #000; padding: clamp(56px, 7vw, 88px) var(--page-gutter); border-top: 1px solid var(--color-border); } .fto-why__inner { max-width: var(--page-width); margin: 0 auto; } .fto-why__title { font-size: clamp(22px, 3vw, 36px); font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 48px; } .fto-why__title-line { display: block; } @media (min-width: 769px) { .fto-why__title-line:first-child { white-space: nowrap; } } .fto-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .fto-why__card { background: #0e0e0e; border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; } .fto-why__num { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); font-size: 14px; font-weight: 600; color: var(--color-text-muted); flex-shrink: 0; } .fto-why__card-title { font-size: 16px; font-weight: 700; color: #fff; } .fto-why__card-text { font-size: 14px; font-weight: 300; color: var(--color-text-muted); line-height: 1.7; } /* ── Toning hook ──────────────────────────── */ .fto-toning { background: #000; border-top: 1px solid var(--color-border); padding: clamp(56px, 7vw, 88px) var(--page-gutter); } .fto-toning__inner { max-width: var(--page-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .fto-toning__title { font-size: clamp(24px, 3.2vw, 42px); font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: 20px; } .fto-toning__desc { font-size: 15px; font-weight: 300; color: var(--color-text-muted); line-height: 1.75; max-width: 480px; } .fto-toning__media { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; } .fto-toning__img { width: 100%; height: 100%; object-fit: cover; display: block; } .fto-toning__media-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 60%); } /* ── Testimonials ─────────────────────────── */ .fto-testimonials { background: #000; border-top: 1px solid var(--color-border); padding: clamp(48px, 6vw, 80px) var(--page-gutter); } .fto-testimonials__inner { max-width: var(--page-width); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .fto-quote { background: #0e0e0e; border: 1px solid rgba(255,255,255,0.07); border-radius: 0; padding: 28px 24px; display: flex; flex-direction: column; gap: 16px; } .fto-quote--photo { padding: 14px 14px 0; border-radius: var(--radius-sm); overflow: hidden; } .fto-quote__media { height: 140px; flex-shrink: 0; overflow: hidden; background: #111; border-radius: var(--radius-sm); } .fto-quote__img { width: 100%; height: 100%; object-fit: cover; display: block; } .fto-quote__body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 18px 20px 22px; } .fto-quote__text { font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.85); line-height: 1.7; flex: 1; } .fto-quote__attr { font-size: 13px; font-weight: 500; color: var(--color-text-muted); letter-spacing: 0.02em; } /* ── Offer box ────────────────────────────── */ .fto-box-section { background: #000; border-top: 1px solid var(--color-border); padding: clamp(56px, 7vw, 88px) var(--page-gutter); } .fto-box { max-width: 560px; margin: 0 auto; border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: clamp(36px, 4vw, 56px) clamp(28px, 4vw, 48px); text-align: center; background: #0a0a0a; } .fto-box__title { font-size: clamp(36px, 5vw, 60px); font-weight: 800; color: #fff; line-height: 1.05; margin-bottom: 10px; } .fto-box__subtitle { font-size: 15px; font-weight: 300; color: var(--color-text-muted); margin-bottom: 36px; } .fto-box__stats { display: flex; justify-content: center; align-items: stretch; margin-bottom: 36px; } .fto-box__stat { flex: 1; padding: 20px 12px; display: flex; flex-direction: column; align-items: center; gap: 5px; border-right: 1px solid var(--color-border); } .fto-box__stat:last-child { border-right: none; } .fto-box__val { font-size: 32px; font-weight: 700; color: #fff; line-height: 1; } .fto-box__label { font-size: 12px; font-weight: 300; color: var(--color-text-muted); } .fto-box__btn { font-size: 15px; padding: 16px 36px; } .fto-box__note { margin-top: 16px; font-size: 12px; font-weight: 300; color: rgba(255,255,255,0.3); } /* ── Final push ───────────────────────────── */ .fto-final { background: #0a0a0a; border-top: 1px solid var(--color-border); padding: clamp(56px, 7vw, 88px) var(--page-gutter); text-align: center; } .fto-final__inner { max-width: 480px; margin: 0 auto; } .fto-final__title { font-size: clamp(26px, 3.5vw, 44px); font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: 14px; } .fto-final__text { font-size: 16px; font-weight: 300; color: var(--color-text-muted); margin-bottom: 32px; line-height: 1.6; } /* ── Responsive ───────────────────────────── */ @media (max-width: 900px) { .fto-why__grid { grid-template-columns: 1fr; } .fto-toning__inner { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 768px) { .fto-testimonials__inner { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--page-gutter); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: none; margin-left: calc(-1 * var(--page-gutter)); margin-right: calc(-1 * var(--page-gutter)); padding-inline: var(--page-gutter); grid-template-columns: unset; } .fto-testimonials__inner::-webkit-scrollbar { display: none; } .fto-quote--photo { flex: 0 0 min(300px, 84vw); width: min(300px, 84vw); scroll-snap-align: start; scroll-snap-stop: always; } .fto-quote__media { height: 140px; } } /* =========================================== WORKOUT PAGE =========================================== */ /* ── Hero ────────────────────────────────────── */ .wo-hero { position: relative; min-height: 72vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; } .wo-hero__bg { position: absolute; inset: 0; } .wo-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; } .wo-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.72) 100%); } .wo-hero__content { position: relative; z-index: 1; max-width: 720px; padding: calc(var(--header-height) + 48px) var(--page-gutter) clamp(56px, 8vw, 80px); } .wo-hero__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 20px; } .wo-hero__title { font-size: clamp(28px, 4vw, 52px); font-weight: 800; line-height: 1.1; color: #fff; margin-bottom: 18px; } .wo-hero__text { font-size: 17px; font-weight: 300; color: rgba(255,255,255,0.65); line-height: 1.7; margin-bottom: 36px; } /* ── FAQ split ────────────────────────────── */ .wo-faq { container-type: inline-size; display: grid; grid-template-columns: 2fr 3fr; align-items: start; background: #0a0a0a; } .wo-faq__aside { align-self: start; width: 100%; padding: clamp(20px, 2.5vw, 32px); border-right: 1px solid var(--color-border); } .wo-faq__media { position: relative; overflow: hidden; width: 100%; aspect-ratio: 4 / 3; height: auto; border-radius: var(--radius-sm); } .wo-faq__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; } .wo-faq__content { align-self: start; width: 100%; min-height: calc((100cqw * 2 / 5) * 3 / 4 + clamp(40px, 5vw, 64px)); padding: clamp(20px, 2.5vw, 32px); background: #0a0a0a; } .wo-acc { display: flex; flex-direction: column; gap: 10px; min-height: calc((100cqw * 2 / 5) * 3 / 4); } .wo-acc__item { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; min-height: calc(((100cqw * 2 / 5) * 3 / 4 - 20px) / 3); background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); overflow: hidden; transition: border-color 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease); } .wo-acc__item:hover { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); } .wo-acc__item--open { justify-content: flex-start; background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } .wo-acc__toggle { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(14px, 2vw, 20px); width: 100%; flex: 0 0 auto; padding: clamp(18px, 2.2vw, 24px); text-align: left; } .wo-acc__num { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.42); transition: border-color 0.35s var(--ease), color 0.35s var(--ease), background 0.35s var(--ease); } .wo-acc__item--open .wo-acc__num { color: #fff; border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.06); } .wo-acc__head { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .wo-acc__label { font-size: clamp(15px, 1.35vw, 18px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: #fff; } .wo-acc__teaser { font-size: 13px; font-weight: 300; line-height: 1.45; color: rgba(255, 255, 255, 0.42); max-height: 3em; opacity: 1; overflow: hidden; transition: opacity 0.3s var(--ease), max-height 0.4s var(--ease); } .wo-acc__item--open .wo-acc__teaser { max-height: 0; opacity: 0; } .wo-acc__icon-wrap { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.45); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease); } .wo-acc__item--open .wo-acc__icon-wrap { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); color: #fff; } .wo-acc__icon { display: block; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .wo-acc__item--open .wo-acc__icon { transform: rotate(45deg); } .wo-acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); } .wo-acc__body-inner { overflow: hidden; min-height: 0; padding: 0 clamp(18px, 2.2vw, 24px); opacity: 0; transform: translateY(-6px); transition: opacity 0.35s var(--ease), transform 0.45s var(--ease), padding-bottom 0.45s var(--ease); } .wo-acc__body-inner p { margin: 0; padding-left: calc(36px + clamp(14px, 2vw, 20px)); font-size: 14px; font-weight: 300; color: rgba(255, 255, 255, 0.58); line-height: 1.75; } .wo-acc__item--open .wo-acc__body { grid-template-rows: 1fr; } .wo-acc__item--open .wo-acc__body-inner { opacity: 1; transform: translateY(0); padding-bottom: clamp(18px, 2.2vw, 24px); } @media (prefers-reduced-motion: reduce) { .wo-acc__body, .wo-acc__body-inner, .wo-acc__teaser, .wo-acc__icon { transition: none; } .wo-acc__body-inner { opacity: 1; transform: none; } .wo-acc__item:not(.wo-acc__item--open) .wo-acc__body-inner { opacity: 0; } } /* ── Meet the Reformer (pairs with FAQ split above) ────────────── */ .wo-machine { display: grid; grid-template-columns: 3fr 2fr; align-items: center; background: #0a0a0a; border-top: 1px solid var(--color-border); } .wo-machine__text { padding: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; } .wo-machine__title { font-family: var(--font-primary); font-size: clamp(28px, 3.5vw, 44px); font-weight: 700; line-height: 1.15; color: #fff; margin-bottom: 18px; } .wo-machine__desc { font-size: 16px; font-weight: 300; color: var(--color-text-muted); line-height: 1.75; max-width: 420px; } .wo-machine__media { padding: clamp(20px, 2.5vw, 32px); border-left: 1px solid var(--color-border); } .wo-machine__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); } /* ── Find your level ─────────────────────── */ .wo-levels { background: #000; padding: clamp(60px, 8vw, 96px) var(--page-gutter); } .wo-levels__inner { max-width: var(--page-width); margin: 0 auto; } .wo-levels__head { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 32px; } .wo-levels__num { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); font-size: 13px; font-weight: 600; color: var(--color-text-muted); flex-shrink: 0; margin-top: 4px; } .wo-levels__title { font-size: clamp(26px, 3.5vw, 44px); font-weight: 700; color: #fff; line-height: 1.15; margin-bottom: 10px; } .wo-levels__subtitle { font-size: 15px; font-weight: 300; color: var(--color-text-muted); line-height: 1.7; max-width: 600px; } .wo-levels__note { font-size: 15px; font-weight: 400; color: rgba(255,255,255,0.6); margin-bottom: 36px; padding-top: 8px; } .wo-levels__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 44px; } .wo-level { display: block; color: #fff; text-decoration: none; } .wo-level__body { display: none; } .wo-level__basic { display: none; } .wo-level__cta { display: inline-block; font-size: 13px; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.45); transition: text-decoration-color 0.2s, color 0.2s; } .wo-level__cta:hover { color: #fff; text-decoration-color: #fff; } .wo-level__img-wrap { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 4; margin-bottom: 16px; background: #111; } .wo-level__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease, filter 0.5s ease; } @media (hover: hover) and (pointer: fine) { .wo-level:hover .wo-level__img { transform: scale(1.04); filter: brightness(0.55); } } .wo-level__hover { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; padding: 20px; background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 55%, transparent 100%); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } @media (hover: hover) and (pointer: fine) { .wo-level:hover .wo-level__hover, .wo-level:focus-visible .wo-level__hover { opacity: 1; } } .wo-level__hover-text { margin: 0; font-size: 13px; font-weight: 400; line-height: 1.65; color: rgba(255, 255, 255, 0.92); } .wo-level__badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(0,0,0,0.65); backdrop-filter: blur(6px); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 5px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.15); } .wo-level__name { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin-bottom: 6px; } .wo-level__text { font-size: 13px; font-weight: 300; color: var(--color-text-muted); line-height: 1.6; } @media (hover: hover) and (pointer: fine) { .wo-level__body { display: none; } .wo-level { cursor: pointer; } } .wo-levels__cta { text-align: center; } /* ── Final CTA ────────────────────────────── */ .wo-cta { background: #0a0a0a; border-top: 1px solid var(--color-border); padding: clamp(60px, 8vw, 96px) var(--page-gutter); text-align: center; } .wo-cta__inner { max-width: 560px; margin: 0 auto; } .wo-cta__title { font-size: clamp(28px, 4vw, 48px); font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 14px; } .wo-cta__text { font-size: 16px; font-weight: 300; color: var(--color-text-muted); margin-bottom: 36px; line-height: 1.65; } .wo-cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ── Responsive ───────────────────────────── */ @media (max-width: 960px) { .wo-faq { grid-template-columns: 1fr; } .wo-faq__aside { display: none; } .wo-faq__content { min-height: auto; padding: clamp(24px, 5vw, 40px) var(--page-gutter); } .wo-acc { min-height: auto; gap: 12px; } .wo-acc__item { flex: none; min-height: 0; justify-content: flex-start; } .wo-acc__toggle { flex: none; padding: 20px; } .wo-acc__body-inner p { padding-left: 0; } .wo-machine { grid-template-columns: 1fr; } .wo-machine__media { order: -1; border-left: none; border-bottom: 1px solid var(--color-border); padding-bottom: clamp(24px, 4vw, 32px); } .wo-machine__text { padding: clamp(32px, 5vw, 48px) var(--page-gutter); } .wo-levels__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .wo-levels__head { gap: 16px; } } @media (max-width: 768px) { .wo-hero { min-height: 68svh; } .wo-hero__content { padding-top: calc(var(--header-height) + 32px); } .wo-hero__title { font-size: clamp(24px, 7vw, 36px); } .wo-hero__text { font-size: 15px; } .wo-levels { padding: 48px var(--page-gutter); } .wo-levels__head { margin-bottom: 20px; } .wo-levels__num { width: 36px; height: 36px; font-size: 12px; margin-top: 2px; } .wo-levels__title { font-size: clamp(24px, 6.5vw, 32px); } .wo-levels__subtitle { font-size: 14px; line-height: 1.65; } .wo-levels__note { font-size: 14px; margin-bottom: 24px; } .wo-levels__grid { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--page-gutter); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: none; margin-bottom: 28px; margin-left: calc(-1 * var(--page-gutter)); margin-right: calc(-1 * var(--page-gutter)); padding-inline: var(--page-gutter); grid-template-columns: unset; } .wo-levels__grid::-webkit-scrollbar { display: none; } .wo-level { flex: 0 0 min(320px, 84vw); width: min(320px, 84vw); scroll-snap-align: start; scroll-snap-stop: always; border-radius: var(--radius); overflow: hidden; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); -webkit-tap-highlight-color: transparent; } .wo-level__img-wrap { border-radius: 0; margin-bottom: 0; aspect-ratio: 4 / 5; } .wo-level__hover, .wo-level__body { display: none; } .wo-level__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 28px 16px 14px; background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.35) 70%, transparent 100%); pointer-events: none; } .wo-level__name { font-size: 12px; margin: 0; padding: 0; } .wo-level__basic { display: block; font-size: 13px; line-height: 1.65; color: rgba(255, 255, 255, 0.72); padding: 14px 16px 16px; margin: 0; } .wo-cta { padding: 48px var(--page-gutter); } .wo-cta__title { font-size: clamp(24px, 6.5vw, 36px); } .wo-cta__text { font-size: 15px; margin-bottom: 28px; } .wo-cta__actions { flex-direction: column; align-items: stretch; } .wo-cta__actions .btn { width: 100%; } } /* =========================================== FIRST TIMERS PAGE =========================================== */ /* Shared pill label (top-right of sections) */ .ft-pill { position: absolute; top: 24px; right: var(--page-gutter); font-size: 11px; font-weight: 500; letter-spacing: 0.05em; color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); padding: 5px 12px; border-radius: 100px; white-space: nowrap; } /* Shared eyebrow */ .ft-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 14px; } /* ── Hero ─────────────────────────────────────── */ .ft-hero { position: relative; min-height: 72vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; /* Keep copy clear of the fixed header while centering in the remaining space */ padding: calc(var(--header-height) + 40px) 0 56px; box-sizing: border-box; } .ft-hero__bg { position: absolute; inset: 0; } .ft-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; } .ft-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.72) 100%); } .ft-hero__content { position: relative; z-index: 1; max-width: 1100px; padding: 0 var(--page-gutter); } .ft-hero__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 20px; } .ft-hero__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 0 0 28px; } .ft-hero__nav-link { position: relative; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); transition: color 0.2s var(--ease); } .ft-hero__nav-link:hover { color: rgba(255, 255, 255, 0.75); } .ft-hero__nav-link.is-active, .ft-hero__nav-link[aria-current="page"] { color: #fff; } .ft-hero__nav-link.is-active::after, .ft-hero__nav-link[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: rgba(255, 255, 255, 0.85); } .ft-hero__title { font-family: var(--font-primary); /* Shared size across all First Timer heroes — keeps page switches calm */ font-size: clamp(36px, 5vw, 58px); font-weight: 800; line-height: 1.15; letter-spacing: 0.02em; color: #fff; margin: 0 auto 18px; max-width: min(100%, 22em); } .ft-hero--workout .ft-hero__title { max-width: min(100%, 28em); } .ft-hero__title-line { display: block; font-family: var(--font-primary); } .ft-hero__title-line--accent { font-family: var(--font-primary); font-style: italic; font-weight: 300; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.7); } .ft-hero__text { font-size: 16px; font-weight: 300; color: rgba(255,255,255,0.65); margin: 0 auto 32px; max-width: 56ch; line-height: 1.65; } .ft-hero__text:has(+ .ft-hero__note) { margin-bottom: 14px; } .ft-hero__note { margin: 14px auto 0; font-size: 13px; font-weight: 300; color: rgba(255, 255, 255, 0.45); line-height: 1.55; letter-spacing: 0.02em; max-width: 40ch; } .ft-hero--offer { padding-bottom: 72px; } @media (max-width: 768px) { .ft-hero { min-height: 78svh; padding: calc(var(--header-height) + 28px) 0 48px; } .ft-hero__title { font-size: clamp(30px, 7.5vw, 44px); max-width: min(100%, 20em); } .ft-hero--workout .ft-hero__title { max-width: min(100%, 24em); } .ft-hero__nav { gap: 6px 12px; margin-bottom: 22px; } .ft-hero__nav-link { font-size: 10px; letter-spacing: 0.08em; } .ft-hero__text { font-size: 15px; margin-bottom: 28px; } /* First Timer Offer hero: keep title + CTA only */ .ft-hero--offer .ft-hero__text, .ft-hero--offer .ft-hero__note, .ft-hero--offer .fto-scroll-arrow { display: none; } .ft-hero--offer { padding-bottom: 40px; } .ft-hero--offer .ft-hero__content { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: calc(78svh - var(--header-height) - 68px); width: 100%; } .ft-hero--offer .ft-hero__eyebrow { margin-top: 88px; margin-bottom: 16px; } .ft-hero--offer .ft-hero__title { margin-bottom: 0; } .ft-hero--offer .btn { margin-top: auto; } } /* ── Video section ────────────────────────────── */ .ft-video { position: relative; background: #0a0a0a; padding: clamp(60px, 8vw, 100px) var(--page-gutter); border-top: 1px solid var(--color-border); } .ft-video__inner { max-width: var(--page-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .ft-video__title { font-size: clamp(22px, 2.8vw, 34px); font-weight: 700; line-height: 1.2; color: #fff; margin-bottom: 16px; } .ft-video__desc { font-size: 15px; font-weight: 300; color: var(--color-text-muted); line-height: 1.75; margin-bottom: 28px; } .ft-video__media { position: relative; width: min(100%, 340px); aspect-ratio: 4 / 5; justify-self: center; border-radius: var(--radius-sm); overflow: hidden; background: #111; } .ft-video__img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .ft-video__player { position: relative; aspect-ratio: 16 / 9; background: #111; border-radius: 12px; overflow: hidden; border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; } .ft-video__poster, .cl-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; pointer-events: none; } .ft-video__player .ft-video__play-btn, .ft-video__player .ft-video__placeholder-label { position: relative; z-index: 1; } .ft-video__play-btn { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.55); transition: border-color var(--transition), color var(--transition); padding-left: 3px; } .ft-video__play-btn:hover { border-color: #fff; color: #fff; } .ft-video__placeholder-label { font-size: 13px; color: rgba(255,255,255,0.25); } /* ── Client guide ─────────────────────────────── */ .ft-guide { position: relative; background: #000; padding: clamp(60px, 8vw, 100px) var(--page-gutter); border-top: 1px solid var(--color-border); } .ft-guide__inner { max-width: var(--page-width); margin: 0 auto; } .ft-guide__title { font-size: clamp(24px, 3.2vw, 40px); font-weight: 700; line-height: 1.2; color: #fff; margin-bottom: 40px; max-width: 680px; } /* Phase */ .ft-phase { margin-bottom: 8px; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; overflow: hidden; } .ft-phase__header { display: flex; align-items: center; gap: 16px; width: 100%; padding: 20px 24px; text-align: left; cursor: pointer; background: #0e0e0e; transition: background var(--transition); } .ft-phase__header:hover { background: #141414; } .ft-phase--open > .ft-phase__header { border-bottom: 1px solid rgba(255,255,255,0.08); } .ft-phase__arrow { margin-left: auto; color: rgba(255,255,255,0.3); flex-shrink: 0; transition: transform 0.3s ease, color 0.2s; } .ft-phase--open > .ft-phase__header .ft-phase__arrow { transform: rotate(180deg); color: rgba(255,255,255,0.6); } .ft-phase__num { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; } .ft-phase__title { font-size: 17px; font-weight: 600; color: #fff; pointer-events: none; } .ft-phase__sublabel { font-size: 10px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.3); margin: 20px 0 10px; } /* Items container – animates open via grid trick */ .ft-phase__items { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1); background: #0a0a0a; } .ft-phase__items-inner { overflow: hidden; min-height: 0; padding: 0 16px; transition: padding 0.38s cubic-bezier(0.4, 0, 0.2, 1); } .ft-phase--open > .ft-phase__items { grid-template-rows: 1fr; } .ft-phase--open > .ft-phase__items > .ft-phase__items-inner { padding: 16px 16px 8px; } /* Items */ .ft-item { display: flex; gap: 18px; align-items: flex-start; padding: 20px 22px; background: #0e0e0e; border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; margin-bottom: 8px; } .ft-item--cta { flex-direction: column; gap: 0; } .ft-item__row { display: flex; gap: 18px; align-items: flex-start; width: 100%; } .ft-item__icon { width: 38px; height: 38px; border-radius: 9px; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: rgba(255,255,255,0.45); } .ft-item__body { flex: 1; padding-top: 2px; } .ft-item__title { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 5px; } .ft-item__text { font-size: 13px; font-weight: 300; color: var(--color-text-muted); line-height: 1.65; } .ft-item__cta { display: inline-flex; align-self: center; margin-top: 18px; font-size: 13px; padding: 10px 22px; } /* ── First Timer Offer ────────────────────────── */ .ft-offer { position: relative; background: #0a0a0a; padding: clamp(60px, 8vw, 100px) var(--page-gutter); text-align: center; border-top: 1px solid var(--color-border); } .ft-offer__inner { max-width: 560px; margin: 0 auto; } .ft-offer__title { font-size: clamp(36px, 5vw, 60px); font-weight: 800; color: #fff; line-height: 1.05; margin-bottom: 14px; } .ft-offer__text { font-size: 16px; font-weight: 300; color: var(--color-text-muted); line-height: 1.65; margin-bottom: 44px; } .ft-offer__stats { display: flex; justify-content: center; align-items: stretch; margin-bottom: 44px; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; } .ft-offer__stat { flex: 1; padding: 24px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; border-right: 1px solid var(--color-border); } .ft-offer__stat:last-child { border-right: none; } .ft-offer__val { font-size: 30px; font-weight: 700; color: #fff; line-height: 1; } .ft-offer__label { font-size: 12px; font-weight: 300; color: var(--color-text-muted); letter-spacing: 0.02em; } /* ── Responsive ───────────────────────────────── */ @media (max-width: 900px) { .ft-video__inner { grid-template-columns: 1fr; gap: 40px; } .ft-video__media { width: min(100%, 260px); justify-self: center; } } @media (max-width: 600px) { .ft-hero { min-height: 80svh; padding-top: calc(var(--header-height) + 24px); } .ft-pill { display: none; } .ft-offer__stats { flex-direction: column; border-radius: 12px; } .ft-offer__stat { border-right: none; border-bottom: 1px solid var(--color-border); padding: 20px; } .ft-offer__stat:last-child { border-bottom: none; } } /* =========================================== FOOTER =========================================== */ .footer { padding: var(--section-gap) 0 0; border-top: 1px solid var(--color-border); } .footer__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } /* Footer top */ .footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 64px; } .footer__brand { display: flex; flex-direction: column; align-items: flex-start; padding-right: 24px; } .footer__logo { display: inline-flex; transition: opacity var(--transition); } .footer__logo:hover { opacity: 0.7; } .footer__logo-img { height: 22px; width: auto; } .footer__tagline { font-size: 13px; font-weight: 300; color: var(--color-text-muted); margin-top: 12px; letter-spacing: 0.04em; } /* Social icons – icon only */ .footer__social { display: flex; gap: 16px; margin-top: 24px; } .footer__social-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: 50%; transition: color var(--transition), border-color var(--transition); } .footer__social-icon:hover { color: #fff; border-color: rgba(255,255,255,0.4); } /* Footer columns */ .footer__col-title { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text); margin-bottom: 24px; } .footer__list li { margin-bottom: 13px; } .footer__list a { font-size: 14px; font-weight: 300; color: var(--color-text-muted); transition: color var(--transition); } .footer__list a:hover { color: var(--color-text); } .footer__soon { display: inline-block; margin-left: 8px; padding: 2px 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--color-border); border-radius: 100px; vertical-align: middle; } /* Footer bottom */ .footer__bottom { display: flex; align-items: center; justify-content: space-between; padding: 24px 0; border-top: 1px solid var(--color-border); } .footer__left { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .footer__copyright { font-size: 13px; font-weight: 400; color: var(--color-text-muted); } .footer__policies { display: flex; gap: 20px; } .footer__policies a, .footer__policy-btn { font-size: 13px; font-weight: 300; color: var(--color-text-muted); transition: color var(--transition); } .footer__policy-btn { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; text-decoration: none; } .footer__policies a:hover, .footer__policy-btn:hover { color: var(--color-text); } /* Legacy – kept for any remaining references */ .footer__social a { color: var(--color-text-muted); transition: color var(--transition); } .footer__social a:hover { color: var(--color-text); } /* =========================================== INNER PAGES (body.page) =========================================== */ /* Active nav link — underline only on plain links (dropdown ::after is the chevron) */ .header__nav-link--active { color: var(--color-text); } .header__nav-link--active:not(.header__nav-link--has-dd)::after { width: 100%; } .header__nav-link--has-dd.header__nav-link--active::after { width: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1.25 5 4.75 9 1.25' stroke='rgba(255,255,255,1)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .header__dd-link.is-active, .header__dd-link[aria-current="page"], .mobile-menu__sub-link.is-active, .mobile-menu__sub-link[aria-current="page"] { color: #fff; opacity: 1; } .header__dd-link.is-active, .header__dd-link[aria-current="page"] { background: rgba(255, 255, 255, 0.08); padding-left: 28px; } .header__dd-link.is-active::before, .header__dd-link[aria-current="page"]::before { height: 14px; } /* =========================================== ABOUT PAGE =========================================== */ /* About Hero – fullwidth image with text overlay */ .about-hero { position: relative; height: 70svh; min-height: 400px; max-height: 700px; display: flex; align-items: flex-end; overflow: hidden; } .about-hero__media { position: absolute; inset: 0; } .about-hero__img { width: 100%; height: 100%; object-fit: cover; } .about-hero__overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.6) 100% ); } .about-hero__content { position: relative; z-index: 1; max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter) 60px; width: 100%; } .about-hero__title { font-size: clamp(36px, 6vw, 72px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; } .about-hero__title em { font-style: italic; font-weight: 300; } .about-hero__sub { font-size: clamp(15px, 1.8vw, 20px); font-weight: 300; line-height: 1.65; color: rgba(255, 255, 255, 0.75); max-width: 560px; margin: 16px 0 0; } /* About Intro – two-column lead + body */ .about-intro { padding: var(--section-gap) 0; } .about-intro__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 60px 80px; align-items: start; } .about-intro__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 24px; } .about-intro__heading { font-size: clamp(28px, 3.5vw, 44px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; } .about-intro__heading em { font-style: italic; font-weight: 300; } .about-intro__body p { font-size: 16px; font-weight: 300; line-height: 1.8; color: var(--color-text-muted); margin-bottom: 20px; } .about-intro__body p:last-child { margin-bottom: 0; } /* About Image – full-bleed break */ .about-image { padding: 0 var(--page-gutter); } .about-image__inner { max-width: var(--page-width); margin: 0 auto; } .about-image__img { width: 100%; height: clamp(300px, 40vw, 500px); object-fit: cover; border-radius: var(--radius); } /* About Values – numbered items */ .about-values { padding: var(--section-gap) 0; } .about-values__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } .about-values__heading { font-size: clamp(28px, 4vw, 48px); font-weight: 700; letter-spacing: -0.02em; text-align: center; margin-bottom: clamp(48px, 6vw, 80px); } .about-values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .about-values__item { padding: 44px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); transition: background var(--transition), border-color var(--transition); } .about-values__item:hover { background: var(--color-hover); border-color: rgba(255, 255, 255, 0.2); } .about-values__number { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: var(--color-text-muted); margin-bottom: 20px; } .about-values__title { font-size: 18px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 14px; } .about-values__text { font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--color-text-muted); } /* =========================================== STUDIO SINGLE PAGE =========================================== */ /* Studio Hero */ .studio-hero { position: relative; height: 65svh; min-height: 380px; max-height: 650px; display: flex; align-items: flex-end; overflow: hidden; } .studio-hero__media { position: absolute; inset: 0; } .studio-hero__img { width: 100%; height: 100%; object-fit: cover; } .studio-hero__overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.42) 72%, rgba(0, 0, 0, 0.68) 100% ); } .studio-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 220px; background: linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.35) 45%, var(--color-bg) 100% ); z-index: 1; pointer-events: none; } .studio-hero__content { position: relative; z-index: 2; max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter) 72px; width: 100%; } .studio-hero__back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: 20px; transition: color var(--transition); } .studio-hero__back:hover { color: var(--color-text); } .studio-hero__city { font-size: 14px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 8px; } .studio-hero__title { font-size: clamp(40px, 7vw, 80px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; } /* Studio Info */ .studio-info { padding: clamp(48px, 6vw, 80px) var(--page-gutter); } .studio-info__inner { max-width: var(--page-width); margin: 0 auto; } .studio-info__intro { margin-bottom: 28px; } .studio-info__heading { font-size: clamp(24px, 3vw, 36px); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 12px; } .studio-info__about { font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--color-text-muted); margin: 0; max-width: 640px; } .studio-info__photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 28px; } .studio-info__photo { width: 100%; aspect-ratio: 3 / 4; height: 100%; object-fit: cover; object-position: center; border-radius: var(--radius-sm); filter: grayscale(0.1); } /* 4-image mosaic: tall feature + two stacked + wide bottom */ .studio-info__photos:has(> :nth-child(4)) { grid-template-columns: 1.35fr 1fr; grid-template-rows: repeat(2, minmax(190px, 24vw)); } .studio-info__photos:has(> :nth-child(4)) .studio-info__photo { aspect-ratio: auto; min-height: 0; } .studio-info__photos:has(> :nth-child(4)) .studio-info__photo:nth-child(1) { grid-row: 1 / 3; } .studio-info__photos:has(> :nth-child(4)) .studio-info__photo:nth-child(4) { grid-column: 1 / -1; aspect-ratio: 2.35 / 1; min-height: 180px; max-height: 320px; } .studio-info__amenities { background: #1c1c1c; border-radius: var(--radius); padding: clamp(36px, 5vw, 52px) clamp(20px, 4vw, 48px); } .studio-info__amenity-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 20px; } .studio-info__amenity { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; } .studio-info__amenity-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: #fff; } .studio-info__amenity-icon svg { width: 32px; height: 32px; } .studio-info__amenity-label { font-size: 12px; font-weight: 500; line-height: 1.4; color: rgba(255, 255, 255, 0.88); max-width: 130px; } .studio-info__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--color-border); } .studio-address { padding: clamp(24px, 3vw, 36px) var(--page-gutter) clamp(48px, 6vw, 80px); } .studio-address__inner { max-width: var(--page-width); margin: 0 auto; } .studio-address .studio-info__meta { margin-top: 0; padding-top: 0; border-top: none; } .studio-info__block { margin-bottom: 0; } .studio-info__label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 10px; } .studio-info__value { font-size: 15px; font-weight: 400; line-height: 1.6; } .studio-info__email { color: inherit; text-decoration: none; transition: color var(--transition); } .studio-info__email:hover { color: var(--color-text-muted); } .studio-info__link { display: inline-block; font-size: 13px; font-weight: 500; color: var(--color-text-muted); margin-top: 8px; transition: color var(--transition); } .studio-info__link:hover { color: var(--color-text); } .studio-info__note { font-size: 12px; font-weight: 400; color: var(--color-text-muted); margin-top: 6px; } @media (max-width: 900px) { .studio-info__amenity-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; } .studio-info__meta { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 768px) { .studio-info__photos, .studio-info__photos:has(> :nth-child(4)) { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: none; gap: 10px; overflow: visible; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .studio-info__photos .studio-info__photo, .studio-info__photos:has(> :nth-child(4)) .studio-info__photo { grid-row: auto; grid-column: auto; aspect-ratio: 3 / 4; width: 100%; max-width: none; min-height: 0; max-height: none; flex: none; border-radius: var(--radius-sm); object-position: center top; } /* Lead image full width, then a clean 2-up pair, landscape last */ .studio-info__photos:has(> :nth-child(3)) .studio-info__photo:nth-child(1), .studio-info__photos:has(> :nth-child(4)) .studio-info__photo:nth-child(1) { grid-column: 1 / -1; aspect-ratio: 4 / 5; max-height: 62svh; } .studio-info__photos:has(> :nth-child(4)) .studio-info__photo:nth-child(2), .studio-info__photos:has(> :nth-child(4)) .studio-info__photo:nth-child(3) { aspect-ratio: 3 / 4; } .studio-info__photos:has(> :nth-child(4)) .studio-info__photo:nth-child(4) { grid-column: 1 / -1; aspect-ratio: 16 / 10; object-position: center; } /* Two-image studios (e.g. Charlottenburg placeholders) */ .studio-info__photos:has(> :nth-child(2)):not(:has(> :nth-child(3))) .studio-info__photo:nth-child(1), .studio-info__photos:has(> :nth-child(2)):not(:has(> :nth-child(3))) .studio-info__photo:nth-child(2) { grid-column: auto; aspect-ratio: 3 / 4; max-height: none; } .studio-info__amenities { margin-left: 0; margin-right: 0; padding: 28px 20px; border-radius: var(--radius); } .studio-info__amenity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; } .studio-info__amenity-label { max-width: none; } } /* Studio Classes – 4-column grid */ .studio-classes { padding: 0 0 var(--section-gap); } .studio-classes__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } .studio-classes__heading { font-size: clamp(28px, 4vw, 48px); font-weight: 700; letter-spacing: -0.02em; text-align: center; margin-bottom: clamp(40px, 5vw, 72px); } .studio-classes__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .studio-classes__card { padding: 36px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); transition: background var(--transition), border-color var(--transition); } .studio-classes__card:hover { background: var(--color-hover); border-color: rgba(255, 255, 255, 0.2); } .studio-classes__level { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); padding: 4px 12px; border: 1px solid var(--color-border); border-radius: 100px; margin-bottom: 20px; } .studio-classes__name { font-size: 18px; font-weight: 600; margin-bottom: 10px; } .studio-classes__desc { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--color-text-muted); } /* =========================================== GENERIC PAGE LAYOUTS (studios, academy, memberships) =========================================== */ /* Page hero */ .page-hero { padding: calc(var(--header-height) + 80px) 0 60px; position: relative; } .page-hero--img { min-height: 70vh; display: flex; align-items: center; justify-content: center; } .page-hero__bg { position: absolute; inset: 0; z-index: 0; } .page-hero__bg-img { width: 100%; height: 100%; object-fit: cover; } .page-hero__bg-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.75) 100%); } .page-hero--img .page-hero__inner { position: relative; z-index: 1; } .error-404 { min-height: 60vh; display: flex; align-items: center; } .error-404__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; } .events-hero { padding: calc(var(--header-height) + 48px) 0 32px; } .events-hero .page-hero__title { font-size: clamp(32px, 5vw, 48px); } .events-hero .page-hero__sub { margin-top: 12px; max-width: 420px; margin-left: auto; margin-right: auto; } .events-hero .page-hero__badge { margin-bottom: 16px; } /* Events page – compact layout */ .events-page { padding: 24px 0 var(--section-gap); } .events-page .events__block { margin-bottom: clamp(40px, 5vw, 64px); } .events-page .events__heading { font-size: clamp(20px, 2.5vw, 28px); margin-bottom: 24px; } .events-page .events__block--past { padding-top: clamp(32px, 4vw, 48px); } .events-page .events__grid--past { grid-template-columns: repeat(3, 1fr); gap: 12px; } .events-page .event-card--compact { opacity: 0.85; } .events-page .event-card--compact .event-card__body { padding: 16px 18px; } .events-page .event-card--compact .event-card__tag { margin-bottom: 8px; padding: 2px 10px; font-size: 9px; } .events-page .event-card--compact .event-card__title { font-size: 14px; font-weight: 500; margin-bottom: 6px; line-height: 1.35; } .events-page .event-card--compact .event-card__meta { font-size: 12px; margin-bottom: 0; } .events-page .event-card--compact:hover { transform: translateY(-2px); opacity: 1; } .events-empty { max-width: 480px; margin: 0 auto; text-align: center; padding: 28px 24px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); } .events-empty__text { font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--color-text-muted); margin-bottom: 20px; } .events-empty__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .events-b2b { max-width: 560px; margin: 0 auto; text-align: center; } .events-b2b__text { font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--color-text-muted); margin: -8px auto 24px; } .events-b2b__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } @media (max-width: 900px) { .events-page .events__grid--past { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .events-page .events__grid--past { grid-template-columns: 1fr; } } .page-hero__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); text-align: center; } .page-hero__title { font-size: clamp(36px, 6vw, 80px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; } .page-hero__title em { font-style: italic; font-weight: 300; } .page-hero__sub { font-size: clamp(14px, 1.5vw, 17px); font-weight: 400; color: var(--color-text-muted); margin-top: 20px; letter-spacing: 0.03em; } .page-hero__badge { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); border: 1px solid var(--color-border); padding: 6px 18px; border-radius: 100px; margin-bottom: 24px; } .page-hero__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; } .page-hero__note { font-size: 13px; font-weight: 400; color: var(--color-text-muted); opacity: 0.6; margin-top: 20px; line-height: 1.5; } /* Page section wrapper */ .page-section { padding: var(--section-gap) 0; } .page-section + .page-section { padding-top: 0; } .page-section__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } /* Memberships: Intro — ruhig, wenige Elemente */ .page-section.members-split { padding: clamp(32px, 5vw, 48px) 0 clamp(28px, 4vw, 40px); border-top: 1px solid var(--color-border); } .members-split__inner { max-width: min(var(--page-width), 1040px); } .members-split__intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 4vw, 48px); align-items: center; } .members-split__intro-copy { text-align: left; } .members-split__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 14px; } .members-split__lead { font-size: clamp(15px, 1.35vw, 17px); font-weight: 400; line-height: 1.65; color: rgba(255, 255, 255, 0.88); margin: 0 0 22px; max-width: 34em; } .members-split__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; font-size: 13px; color: var(--color-text-muted); } .members-split__stars { letter-spacing: 2px; color: rgba(255, 255, 255, 0.85); font-size: 13px; line-height: 1; } .members-split__meta-text { font-weight: 500; letter-spacing: 0.04em; } .members-split__figure { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); } .members-split__img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; } @media (max-width: 900px) { .members-split__intro { grid-template-columns: 1fr; } .members-split__figure { order: -1; max-width: 420px; margin: 0 auto; width: 100%; } } /* Page content – text + image side-by-side */ .page-content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: var(--section-gap); } .page-content--reverse .page-content__text { order: 2; } .page-content--reverse .page-content__media { order: 1; } .page-content__heading { font-size: clamp(24px, 3vw, 36px); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 24px; } .page-content__text p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--color-text-muted); margin-bottom: 16px; } .page-content__img { width: 100%; border-radius: var(--radius); aspect-ratio: 3 / 4; object-fit: cover; } /* =========================================== STUDIO DETAIL (studios.html) =========================================== */ .studio-detail { margin-bottom: 60px; } .studio-detail:last-child { margin-bottom: 0; } .studio-detail__header { display: flex; align-items: baseline; gap: 16px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border); } .studio-detail__city { font-size: clamp(28px, 4vw, 48px); font-weight: 700; letter-spacing: -0.02em; } .studio-detail__count { font-size: 14px; font-weight: 400; color: var(--color-text-muted); } .studio-detail__badge { display: inline-block; padding: 4px 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--color-border); border-radius: 100px; color: var(--color-text-muted); } .studio-detail__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .studio-detail__card { position: relative; border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius); background: #111; overflow: hidden; display: flex; flex-direction: column; height: 400px; padding: 0; width: 100%; transition: background var(--transition), border-color var(--transition); } .studio-detail__img-wrap { flex: 0 0 50%; width: 100%; min-height: 0; overflow: hidden; position: relative; z-index: 0; } .studio-detail__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; pointer-events: none; user-select: none; -webkit-user-drag: none; } .studio-detail__card--link:hover .studio-detail__img { transform: scale(1.04); } .studio-detail__body { flex: 0 0 50%; min-height: 0; padding: 24px 28px; display: flex; flex-direction: column; justify-content: flex-start; position: relative; z-index: 0; } .studio-detail__card:hover { background: #1a1a1a; border-color: rgba(255, 255, 255, 0.25); } .studio-detail__name { font-size: 20px; font-weight: 600; margin-bottom: 8px; } .studio-detail__address { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--color-text-muted); margin-bottom: 0; } .studio-detail__hours { font-size: 13px; font-weight: 400; color: var(--color-text-muted); margin-top: auto; } .studio-detail__waitlist { display: inline-block; margin-top: 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.35); padding-bottom: 2px; transition: border-color 0.2s ease; } .studio-detail__waitlist:hover { border-color: #fff; } .studio-detail__card--link { display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .studio-detail__card--link::after { content: ''; position: absolute; inset: 0; z-index: 2; } .studio-detail__card--link .studio-detail__address { flex: 0 1 auto; } .studio-detail__card--link:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.65); outline-offset: 3px; } .studio-detail__arrow { display: block; font-size: 20px; margin-top: auto; padding-top: 16px; color: var(--color-text-muted); transition: transform var(--transition), color var(--transition); } .studio-detail__card--link:hover .studio-detail__arrow { transform: translateX(6px); color: var(--color-text); } /* =========================================== PRICING (memberships.html) =========================================== */ /* ── Memberships page: toggle + panels ── */ .page-hero--mem { padding-bottom: 0; } .page-hero--mem.page-hero--img { min-height: 72vh; padding-top: 0; padding-bottom: 0; } .page-hero--mem.page-hero--img .page-hero__sub { color: rgba(255, 255, 255, 0.7); } @media (max-width: 600px) { .page-hero--mem.page-hero--img { min-height: 80vh; } } .mem-toggle-bar { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: var(--page-width); margin: 0 auto; padding: 8px var(--page-gutter) 48px; text-align: center; } .mem-toggle { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 5px; background: #141414; border: 1px solid var(--color-border); border-radius: 100px; } .mem-gc-options { padding-top: 0; } .mem-gc-options .gc-options__inner { padding: 0; } .mem-gc-steps { padding-top: clamp(28px, 3.5vw, 48px); padding-bottom: clamp(28px, 3.5vw, 48px); } .mem-gc-steps .gc-steps__eyebrow, .gc-steps__eyebrow { text-align: center; margin-bottom: 16px; } .mem-gc-steps .gc-steps__heading { margin-bottom: clamp(32px, 4vw, 56px); } .mem-toggle__btn { padding: 14px 40px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); background: transparent; border: none; border-radius: 100px; cursor: pointer; transition: all var(--transition); font-family: var(--font-primary); } .mem-toggle__btn:hover { color: var(--color-text); background: rgba(255, 255, 255, 0.06); } .mem-toggle__btn.is-active { color: var(--color-bg); background: var(--color-text); font-weight: 700; } .mem-toggle-bar__sub { font-size: 15px; font-weight: 300; color: rgba(255, 255, 255, 0.55); max-width: 520px; line-height: 1.65; margin: 0; } .mem-panels { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter) clamp(48px, 6vw, 80px); } .mem-panel[hidden] { display: none !important; } @keyframes rc-soft-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .mem-panel.is-soft-in { animation: rc-soft-in 0.38s var(--ease) both; } .mem-studio, .mem-shop { transition: opacity 0.28s var(--ease), transform 0.28s var(--ease); } .mem-studio.is-soft-out, .mem-shop.is-soft-out { opacity: 0; transform: translateY(8px); pointer-events: none; } .mem-studio.is-soft-in, .mem-shop.is-soft-in { animation: rc-soft-in 0.4s var(--ease) both; } @media (prefers-reduced-motion: reduce) { .mem-panel.is-soft-in, .mem-studio.is-soft-in, .mem-shop.is-soft-in { animation: none; } .mem-studio, .mem-shop { transition: none; } } .mem-shop .mem-block { padding: clamp(20px, 3vw, 36px) 0; } .mem-shop .mem-block__head { margin-bottom: 20px; } .mem-shop .mem-block__title { font-size: clamp(22px, 2.8vw, 32px); } .mem-block { padding: clamp(40px, 5vw, 72px) 0; } .mem-block:first-child { padding-top: 0; } .mem-block--divider { border-top: 1px solid var(--color-border); margin-top: clamp(16px, 3vw, 32px); padding-top: clamp(48px, 6vw, 80px); } .mem-block__head { margin-bottom: 36px; } .mem-block__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); margin-bottom: 10px; } .mem-block__title { font-size: clamp(28px, 3.5vw, 44px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; } .mem-block__sub { font-size: 15px; font-weight: 300; color: rgba(255, 255, 255, 0.55); line-height: 1.7; max-width: 560px; margin: 0; } /* ── Section anchors (legacy) ── */ .mem-section { padding: clamp(56px, 7vw, 96px) var(--page-gutter); border-bottom: 1px solid var(--color-border); } .mem-section:last-of-type { border-bottom: none; } .mem-section__inner { max-width: var(--page-width); margin: 0 auto; } .mem-section__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 10px; } .mem-section__title { font-size: clamp(28px, 3.5vw, 44px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; } .mem-section__sub { font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.55); line-height: 1.7; max-width: 560px; margin-bottom: 40px; } /* ── Savings callout banner ── */ .mem-savings { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); margin-bottom: 40px; border-radius: var(--radius-sm); } .mem-savings__icon { font-size: 20px; flex-shrink: 0; } .mem-savings__text { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.75); } .mem-savings__text strong { color: #fff; font-weight: 700; } /* ── Pricing grid ── */ .mem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .mem-grid--4 { grid-template-columns: repeat(4, 1fr); } .mem-grid--2 { grid-template-columns: repeat(2, 1fr); } .mem-grid--3 { grid-template-columns: repeat(3, 1fr); } .mem-card { background: #000; padding: 32px 28px; display: flex; flex-direction: column; gap: 0; position: relative; transition: background 0.2s, border-color 0.2s; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); } .mem-card:hover { background: #0d0d0d; } .mem-card--highlight { background: #111; } .mem-card--info { justify-content: center; gap: 14px; } .mem-card__info-title { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; } .mem-card__info-text { font-size: 14px; color: rgba(255, 255, 255, 0.5); line-height: 1.7; } .mem-card__info-note { font-size: 12px; color: rgba(255, 255, 255, 0.25); } .mem-card__save { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #000; background: #fff; padding: 3px 10px; margin-bottom: 18px; align-self: flex-start; border-radius: 100px; } .mem-card__name { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 4px; } .mem-card__desc { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 24px; } .mem-card__price-block { margin-bottom: 6px; } .mem-card__price { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .mem-card__price-unit { font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.45); margin-left: 4px; } .mem-card__per-class { font-size: 12px; color: rgba(255,255,255,0.4); margin-bottom: 24px; margin-top: 6px; } .mem-card__per-class strong { color: rgba(255,255,255,0.75); font-weight: 600; } .mem-card__features { list-style: none; padding: 0; margin: 0 0 28px 0; display: flex; flex-direction: column; gap: 8px; flex: 1; } .mem-card__features li { font-size: 13px; color: rgba(255,255,255,0.55); padding-left: 16px; position: relative; } .mem-card__features li::before { content: '—'; position: absolute; left: 0; color: rgba(255,255,255,0.2); } .mem-card__btn { display: block; text-align: center; padding: 13px 20px; background: #fff; color: #000; font-family: var(--font-primary); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; transition: opacity 0.2s; border-radius: 100px; } .mem-card__btn:hover { opacity: 0.85; } .mem-card__btn--outline { background: transparent; color: rgba(255,255,255,0.65); border: 1px solid rgba(255,255,255,0.2); } .mem-card__btn--outline:hover { color: #fff; border-color: rgba(255,255,255,0.6); opacity: 1; } /* ── Studio picker (required first step) ── */ .mem-studio { max-width: var(--page-width); margin: 0 auto; padding: clamp(32px, 5vw, 64px) var(--page-gutter) clamp(24px, 4vw, 48px); } .mem-studio__inner { border: 1px solid var(--color-border); background: rgba(255, 255, 255, 0.03); padding: clamp(28px, 4vw, 48px); text-align: center; border-radius: var(--radius); } .mem-studio__step { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); margin: 0 0 12px; } .mem-studio__title { font-size: clamp(24px, 3vw, 36px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; } .mem-studio__sub { font-size: 15px; font-weight: 300; color: rgba(255, 255, 255, 0.55); line-height: 1.7; max-width: 560px; margin: 0 auto 32px; } .mem-studio__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 14px; max-width: 720px; margin: 0 auto; text-align: left; } .mem-studio__city:first-child { grid-column: 1 / -1; } .mem-studio__city-label { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); } .mem-studio__city-cards { display: grid; gap: 10px; } .mem-studio__city:first-child .mem-studio__city-cards { grid-template-columns: repeat(3, 1fr); } .mem-studio__city--solo .mem-studio__city-cards { grid-template-columns: 1fr; } .mem-studio-card { background: #000; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm); padding: 22px 16px; cursor: pointer; text-align: center; transition: background 0.2s, color 0.2s, border-color 0.2s; font-family: var(--font-primary); color: rgba(255, 255, 255, 0.75); width: 100%; } .mem-studio-card:hover { background: #111; color: #fff; border-color: rgba(255, 255, 255, 0.25); } .mem-studio-card.is-active { background: #fff; color: #000; border-color: #fff; } .mem-studio-card__name { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; } .mem-shop__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: var(--page-width); margin: 0 auto var(--mem-shop-gap, 8px); padding: 16px 20px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.03); } .mem-shop__bar-kicker { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); margin-bottom: 4px; } .mem-shop__bar-name { font-size: 15px; font-weight: 600; } .mem-shop__bar-change { background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.75); font-family: var(--font-primary); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 10px 16px; cursor: pointer; transition: border-color 0.2s, color 0.2s; border-radius: 100px; } .mem-shop__bar-change:hover { border-color: rgba(255, 255, 255, 0.5); color: #fff; } .mem-shop .mem-toggle-bar { padding-top: var(--mem-toggle-inset, 24px); } .mem-shop .mem-panels { padding-top: 0; padding-left: 0; padding-right: 0; } .mem-shop { --mem-shop-gap: 8px; --mem-toggle-inset: 24px; --mem-shop-section-spacing: calc(var(--mem-shop-gap) + var(--mem-toggle-inset)); max-width: var(--page-width); margin: 0 auto; padding: var(--mem-shop-section-spacing) var(--page-gutter) 0; } /* ── Hybrid layouts ── */ .mem-hybrid-stack { display: flex; flex-direction: column; gap: 16px; } .mem-hybrid { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); overflow: hidden; background: #000; } .mem-hybrid--row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; } .mem-hybrid--stack { display: flex; flex-direction: column; gap: 0; } .mem-hybrid--highlight .mem-hybrid__content { background: #111; } .mem-hybrid__widget, .mem-hybrid__content { background: #000; min-width: 0; } .mem-hybrid__content { padding: clamp(24px, 3vw, 36px); } .mem-hybrid__widget { display: flex; flex-direction: column; min-height: 0; background: rgba(255, 255, 255, 0.02); } .mem-hybrid--row .mem-hybrid__widget { border-left: 1px solid rgba(255, 255, 255, 0.08); } .mem-hybrid--stack .mem-hybrid__widget { border-top: 1px solid rgba(255, 255, 255, 0.08); } .mem-hybrid__widget-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02); } .mem-hybrid__widget-body--compact { min-height: 200px; } .mem-hybrid__widget-body--compact .mem-widget-iframe, .mem-hybrid__widget-body--compact .mem-widget-fallback { min-height: 200px; } /* ── First Timer Offer (featured top) ── */ .mem-block--fto { padding-top: 0; padding-bottom: clamp(24px, 4vw, 40px); } .mem-fto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: 0; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius); overflow: hidden; background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%); } .mem-fto__content { padding: clamp(24px, 4vw, 36px); display: flex; flex-direction: column; justify-content: center; } .mem-fto__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin: 0 0 12px; } .mem-fto__title { font-size: clamp(28px, 3.5vw, 40px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; } .mem-fto__desc { font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin: 0 0 16px; } .mem-fto__price { font-size: clamp(32px, 4vw, 44px); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 6px; } .mem-fto__per { font-size: 14px; font-weight: 400; line-height: 1.5; color: rgba(255, 255, 255, 0.55); margin: 0 0 12px; } .mem-fto__text { font-size: 14px; font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, 0.6); margin: 16px 0 12px; max-width: 42ch; } .mem-fto__features { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; } .mem-fto__features li { font-size: 13px; font-weight: 300; color: rgba(255, 255, 255, 0.65); padding-left: 14px; position: relative; } .mem-fto__features li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); } .mem-fto__note { font-size: 12px; color: rgba(255, 255, 255, 0.35); margin: 0 0 20px; } .mem-fto__cta { margin-top: 4px; } .mem-fto__widget { display: grid; place-items: center; min-height: 0; background: #000; border-left: 1px solid rgba(255, 255, 255, 0.08); padding: clamp(20px, 4vw, 32px); } .mem-fto__widget-body { width: 100%; max-width: 360px; margin-inline: auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } .mem-fto__widget-body > *, .mem-fto__widget-body iframe { width: 100% !important; max-width: 360px; margin-inline: auto !important; } .mem-fto__widget-body > * { margin-top: 0 !important; padding-top: 0 !important; } .mem-fto__widget-body:empty { min-height: 0; } /* ── Monthly memberships: prominent 3-column cards ── */ .mem-fto--solo { display: block; } .mem-fto--solo .mem-fto__content { max-width: none; } .mem-block--memberships { padding: clamp(32px, 5vw, 64px) 0; } .mem-block--memberships .mem-block__head { margin-bottom: clamp(28px, 4vw, 44px); max-width: 640px; } .mem-block--memberships .mem-block__title { font-size: clamp(32px, 4.5vw, 52px); } .mem-block--memberships .mem-block__sub { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.65; } #memberships-checkout { scroll-margin-top: 100px; } .mem-memberships-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 24px); align-items: stretch; } .mem-membership-col { display: flex; flex-direction: column; gap: 0; min-width: 0; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); overflow: hidden; background: #000; } .mem-membership-col--highlight { border-color: rgba(255, 255, 255, 0.45); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 48px rgba(0, 0, 0, 0.35); } .mem-membership-col--highlight .mem-membership-plan { background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%); } .mem-membership-plan { flex: 1; display: flex; flex-direction: column; text-align: left; padding: clamp(24px, 3vw, 36px); font-family: var(--font-primary); color: inherit; background: rgba(255, 255, 255, 0.02); } .mem-membership-plan--highlight { background: rgba(255, 255, 255, 0.04); } .mem-membership-plan__badge { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #000; background: #fff; padding: 5px 12px; border-radius: 100px; margin-bottom: 16px; } .mem-membership-plan__name { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 8px; } .mem-membership-plan__desc { font-size: clamp(13px, 1.2vw, 15px); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin: 0 0 24px; } .mem-membership-plan__price-block { margin-bottom: 8px; } .mem-membership-plan__price { display: block; font-size: clamp(40px, 4.5vw, 56px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; } .mem-membership-plan__price-unit { display: block; font-size: clamp(13px, 1.2vw, 15px); font-weight: 500; color: rgba(255, 255, 255, 0.45); margin-top: 6px; } .mem-membership-plan__per { font-size: clamp(13px, 1.2vw, 15px); color: rgba(255, 255, 255, 0.5); line-height: 1.5; margin: 0 0 24px; } .mem-membership-plan__per strong { color: rgba(255, 255, 255, 0.85); font-weight: 700; } .mem-membership-plan__features { list-style: none; padding: 0; margin: auto 0 0; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 20px; } .mem-membership-plan__features li { font-size: clamp(13px, 1.2vw, 15px); font-weight: 400; color: rgba(255, 255, 255, 0.65); padding-left: 18px; position: relative; line-height: 1.45; } .mem-membership-plan__features li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); } .mem-membership-widget { border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02); } .mem-membership-widget .mem-hybrid__widget-head { border-radius: 0; } .mem-hybrid__widget-body--membership { min-height: 220px; } .mem-hybrid__widget-body--membership .mem-widget-iframe, .mem-hybrid__widget-body--membership .mem-widget-fallback { min-height: 220px; } .mem-hybrid__widget-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); } .mem-hybrid__widget-product { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.7); } .mem-hybrid__widget-body { flex: 1; min-height: 300px; position: relative; overflow: hidden; } .mem-widget-iframe { width: 100%; height: 100%; min-height: 300px; border: 0; background: #fff; } .mem-widget-fallback { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; height: 100%; min-height: 300px; padding: 28px; } .mem-widget-fallback__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); margin: 0; } .mem-widget-fallback__text { font-size: 14px; font-weight: 300; line-height: 1.65; color: rgba(255, 255, 255, 0.55); margin: 0; max-width: 320px; } .mem-widget-fallback__btn { margin-top: 8px; } .mem-widget-note { font-size: 12px; font-weight: 300; color: rgba(255, 255, 255, 0.4); line-height: 1.6; padding: 12px 18px 16px; margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.06); } .mem-product__badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #000; background: #fff; padding: 3px 10px; margin-bottom: 16px; border-radius: 100px; } .mem-product__name { font-size: clamp(20px, 2.2vw, 28px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px; } .mem-product__desc { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); margin: 0 0 20px; } .mem-product__price-row { margin-bottom: 6px; } .mem-product__price { font-size: clamp(28px, 3vw, 36px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .mem-product__price-unit { font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, 0.45); margin-left: 4px; } .mem-product__per { font-size: 12px; color: rgba(255, 255, 255, 0.45); margin: 0 0 20px; } .mem-product__per strong { color: rgba(255, 255, 255, 0.75); font-weight: 600; } .mem-product__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .mem-product__features li { font-size: 13px; font-weight: 300; color: rgba(255, 255, 255, 0.6); padding-left: 14px; position: relative; } .mem-product__features li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); } .mem-product__info-title { font-size: 18px; font-weight: 700; margin: 0 0 10px; } .mem-product__info-text { font-size: 14px; font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, 0.55); margin: 0 0 10px; } .mem-product__info-note { font-size: 12px; color: rgba(255, 255, 255, 0.3); margin: 0; } .mem-benefits { margin-bottom: 32px; padding: clamp(20px, 3vw, 28px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); background: rgba(255, 255, 255, 0.02); } .mem-benefits__list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; } .mem-benefits__list li { font-size: 14px; font-weight: 300; color: rgba(255, 255, 255, 0.65); padding-left: 16px; position: relative; line-height: 1.5; } .mem-benefits__list li::before { content: '✓'; position: absolute; left: 0; color: rgba(255, 255, 255, 0.45); font-size: 12px; } .mem-savings--inline { margin-bottom: 0; } /* ── Credits: guide (info) + single Eversports widget (purchase) ── */ .mem-block--credits { padding: clamp(20px, 3vw, 40px) 0; } .mem-block--credits .mem-block__head { margin-bottom: clamp(16px, 2.5vw, 24px); max-width: 720px; } .mem-block--credits .mem-block__title { font-size: clamp(32px, 4.5vw, 52px); } .mem-block--credits .mem-block__sub { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.65; } .mem-block--credits .mem-credits-benefits { margin-bottom: clamp(24px, 3vw, 36px); } .mem-block--credits .mem-block__head--pt { margin-top: clamp(8px, 1.5vw, 16px); margin-bottom: clamp(20px, 3vw, 28px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid rgba(255, 255, 255, 0.08); } .mem-credits-widget__hint { margin: 0 0 clamp(16px, 2vw, 20px); font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); } /* ── Giftcards: intro + Eversports widget ── */ .mem-block--giftcards { padding: clamp(24px, 4vw, 48px) 0; } .mem-gc-intro { text-align: center; max-width: 720px; margin: clamp(36px, 5vw, 56px) auto clamp(28px, 4vw, 44px); padding: clamp(32px, 5vw, 48px) clamp(24px, 4vw, 40px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%); } .mem-gc-intro__badge { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.14); padding: 7px 18px; border-radius: 100px; margin-bottom: 22px; } .mem-gc-intro__title { font-size: clamp(36px, 5vw, 56px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 16px; } .mem-gc-intro__sub { font-size: clamp(15px, 1.6vw, 18px); font-weight: 300; line-height: 1.65; color: rgba(255, 255, 255, 0.55); margin: 0 auto 28px; max-width: 520px; } .mem-gc-intro__highlights { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; } .mem-gc-intro__highlight { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 300; color: rgba(255, 255, 255, 0.6); } .mem-gc-intro__highlight svg { flex-shrink: 0; opacity: 0.45; } .mem-gc-intro__highlight strong { font-weight: 600; color: rgba(255, 255, 255, 0.88); } .mem-credits-layout { display: flex; flex-direction: column; gap: 0; } .mem-credits-guide { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 28px); } #memCreditsGuideTop, #memMembershipsGuideTop { margin-bottom: 0; } #memCreditsGuideBottom, #memMembershipsGuideBottom { margin-top: clamp(24px, 3vw, 36px); } .mem-credits-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 20px); } .mem-credits-benefit { padding: clamp(22px, 2.5vw, 28px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); background: rgba(255, 255, 255, 0.02); } .mem-credits-benefit__icon { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.35); margin-bottom: 14px; } .mem-credits-benefit__title { font-size: clamp(17px, 1.6vw, 20px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 10px; } .mem-credits-benefit__text { font-size: 14px; font-weight: 300; line-height: 1.65; color: rgba(255, 255, 255, 0.58); margin: 0; } .mem-credits-choose__title { font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 20px; } .mem-credits-choose__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 16px); } .mem-credits-choose__item { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(22px, 2.8vw, 28px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.02); min-height: 100%; } .mem-credits-choose__item--highlight { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.05); } .mem-credits-choose__name { font-size: clamp(18px, 2vw, 22px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 6px; } .mem-credits-choose__classes { font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.5); margin: 0 0 20px; } .mem-credits-choose__price-block { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } .mem-credits-choose__price { font-size: clamp(28px, 3.2vw, 36px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .mem-credits-choose__price-unit { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); } .mem-credits-choose__per { font-size: 14px; font-weight: 400; line-height: 1.4; color: rgba(255, 255, 255, 0.65); margin: 0 0 16px; } .mem-credits-choose__save { display: inline-block; margin-top: auto; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 100px; padding: 6px 12px; } .mem-credits-choose__item--highlight .mem-credits-choose__save { color: #000; background: #fff; border-color: #fff; } .mem-credits-choose__text { font-size: 13px; font-weight: 300; line-height: 1.65; color: rgba(255, 255, 255, 0.55); margin: 0; } .mem-credits-widget { border: none; border-radius: 0; overflow: visible; background: transparent; scroll-margin-top: 100px; margin: 0; } .mem-credits-widget__body { min-height: 0; padding: 0; margin: 0; background: transparent; overflow: hidden; } .mem-credits-widget__body > * { margin-top: 0 !important; padding-top: 0 !important; } .mem-credits-widget__body:empty { min-height: 0; background: transparent; } /* ── Giftcards hybrid ── */ .mem-hybrid--giftcard { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); overflow: hidden; background: #000; } .mem-hybrid__widget--giftcard { min-height: 560px; } .mem-hybrid__content--giftcard { padding: 0; } .mem-hybrid__content--giftcard .gc-options__inner { padding: clamp(20px, 3vw, 28px); } .mem-gc-preview { padding: 20px 20px 0; } .mem-gc-preview__card { aspect-ratio: 1.6 / 1; max-width: 320px; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(145deg, #1a2e2a 0%, #0d1514 100%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius); } .mem-gc-preview__brand { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; } .mem-gc-preview__amount { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.03em; } .mem-gc-preview__studio { font-size: 12px; color: rgba(255, 255, 255, 0.55); } .mem-hybrid--giftcard .mem-hybrid__widget-body { min-height: 280px; } .mem-gc-options .gc-info__item { padding: 8px 14px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); } /* ── First Timer Offer grid (2 cards wide + note) ── */ .mem-ft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; } /* ── Gift card section ── */ .mem-gift { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .mem-gift__copy { display: flex; flex-direction: column; } .mem-gift__title { font-size: clamp(22px, 3vw, 32px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; } .mem-gift__text { font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.55); line-height: 1.75; margin-bottom: 28px; } .mem-gift__img-wrap { aspect-ratio: 4 / 3; background: #111; border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; } .mem-gift__img { width: 100%; height: 100%; object-fit: cover; } /* ── Responsive ── */ @media (max-width: 1024px) { .mem-grid--4 { grid-template-columns: repeat(2, 1fr); } .mem-grid--3 { grid-template-columns: repeat(2, 1fr); } .mem-studio__grid { grid-template-columns: 1fr 1fr; } .mem-studio__city:first-child .mem-studio__city-cards { grid-template-columns: repeat(3, 1fr); } .mem-memberships-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } .mem-membership-col--highlight { order: -1; } .mem-credits-benefits, .mem-credits-choose__grid { grid-template-columns: 1fr; } .mem-fto, .mem-hybrid--row { grid-template-columns: 1fr; } .mem-fto__widget, .mem-hybrid--row .mem-hybrid__widget { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.08); } .mem-fto__features { grid-template-columns: 1fr; } .mem-benefits__list { grid-template-columns: 1fr; } } @media (max-width: 768px) { .mem-toggle { display: flex; width: 100%; max-width: 480px; } .mem-toggle__btn { flex: 1; padding: 12px 10px; font-size: 10px; letter-spacing: 0.04em; } .mem-toggle-bar { padding-left: var(--page-gutter); padding-right: var(--page-gutter); } .mem-studio__grid { grid-template-columns: 1fr; gap: 22px; } .mem-studio__city:first-child .mem-studio__city-cards { grid-template-columns: 1fr; } .mem-shop__bar { flex-direction: column; align-items: flex-start; } .mem-fto__content { padding: 20px; } .mem-gc-intro { padding: 28px 20px; margin-bottom: 24px; } .mem-gc-intro__highlights { flex-direction: column; align-items: center; gap: 10px; } .mem-toggle-bar__sub { font-size: 14px; padding: 0 4px; } .mem-card { padding: 28px 22px; } .mem-grid, .mem-grid--3, .mem-grid--4, .mem-ft-grid { grid-template-columns: 1fr; } .mem-grid--2 { grid-template-columns: 1fr; } .mem-gift { grid-template-columns: 1fr; } } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .pricing-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 20px; } .pricing-card__amount small { font-size: 13px; font-weight: 300; color: var(--color-text-muted); } .pricing-card { padding: 48px 36px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); display: flex; flex-direction: column; position: relative; transition: background var(--transition), border-color var(--transition), transform var(--transition); } .pricing-card:hover { background: var(--color-hover); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-4px); } .pricing-card--featured { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.06); } .pricing-card__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 6px 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; background: var(--color-text); color: var(--color-bg); border-radius: 100px; white-space: nowrap; } .pricing-card__title { font-size: 22px; font-weight: 700; margin-bottom: 8px; } .pricing-card__desc { font-size: 14px; font-weight: 300; color: var(--color-text-muted); margin-bottom: 28px; } .pricing-card__price { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--color-border); } .pricing-card__amount { font-size: 18px; font-weight: 600; letter-spacing: 0.02em; } .pricing-card__features { flex: 1; margin-bottom: 32px; } .pricing-card__features li { font-size: 14px; font-weight: 300; color: var(--color-text-muted); padding: 8px 0; padding-left: 20px; position: relative; } .pricing-card__features li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); } /* =========================================== COOKIE BANNER =========================================== */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 3000; padding: 0 var(--page-gutter) 24px; transform: translateY(100%); opacity: 0; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; pointer-events: none; } .cookie-banner.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; } .cookie-banner__inner { max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 20px 28px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4); } .cookie-banner__text p { font-size: 13px; font-weight: 400; line-height: 1.6; color: var(--color-text-muted); margin: 0; } .cookie-banner__text a { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; } .cookie-banner__actions { display: flex; gap: 8px; flex-shrink: 0; } .cookie-banner__btn { padding: 10px 18px; border-radius: 100px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background var(--transition), color var(--transition); } .cookie-banner__btn--accept { background: var(--color-text); color: var(--color-bg); border: 1px solid var(--color-text); } .cookie-banner__btn--accept:hover { background: rgba(255, 255, 255, 0.85); } .cookie-banner__btn--decline { background: transparent; color: var(--color-text-muted); border: 1px solid var(--color-border); } .cookie-banner__btn--decline:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--color-text); } /* Form status (contact + newsletter) */ .form-status { margin-top: 12px; font-size: 13px; font-weight: 400; line-height: 1.45; } .form-status--ok { color: rgba(180, 220, 180, 0.95); } .form-status--error { color: rgba(255, 160, 160, 0.95); } .footer__form .form-status { margin-top: 10px; } @media (max-width: 640px) { .cookie-banner__inner { flex-direction: column; gap: 16px; padding: 20px; text-align: center; } .cookie-banner__actions { width: 100%; } .cookie-banner__btn { flex: 1; padding: 12px 16px; } } /* =========================================== RESPONSIVE =========================================== */ /* ---------- Tablet ---------- */ @media (max-width: 1024px) { .levels__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 0; } .levels__item:nth-child(3) { border-left: none; padding-left: 0; } .steps__row { grid-template-columns: 1fr; gap: 32px; } .steps__item { border-left: none; padding: 0; border-bottom: 1px solid var(--color-border); padding-bottom: 32px; } .steps__item:last-child { border-bottom: none; padding-bottom: 0; } .about__grid { grid-template-columns: 1fr; gap: 20px; } .events__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 16px; padding-bottom: 8px; } .events__grid > .event-card { flex: 0 0 80%; max-width: 340px; scroll-snap-align: start; } /* Events page: keep grid layout, no horizontal scroll */ .events-page .events__grid, .events-page .events__grid--upcoming, .events-page .events__grid--past { display: grid; overflow: visible; } .events-page .events__grid--past { grid-template-columns: 1fr; } .offerings__grid { grid-template-columns: 1fr; gap: 20px; } .studios__grid { grid-template-columns: 1fr; gap: 20px; } .footer__top { grid-template-columns: 1fr 1fr 1fr; gap: 40px 28px; } /* About page */ .about-intro__inner { grid-template-columns: 1fr; gap: 40px; } .about-values__grid { grid-template-columns: 1fr; gap: 20px; } /* Giftcard banner */ .gc-banner__inner { grid-template-columns: 1fr; gap: 48px; text-align: center; } .gc-banner__text { margin-left: auto; margin-right: auto; } /* Academy page */ .acad-why__grid { grid-template-columns: 1fr; gap: 40px; } .acad-why__img { max-height: 400px; } .acad-curriculum__grid { grid-template-columns: repeat(2, 1fr); } .acad-pricing__grid { grid-template-columns: 1fr; } .acad-included__grid { grid-template-columns: repeat(2, 1fr); } .acad-included__grid--balanced .acad-included__item:nth-child(-n + 4), .acad-included__grid--balanced .acad-included__item:nth-child(n + 5) { grid-column: auto; } .acad-fit__layout { grid-template-columns: 1fr; gap: 40px; } .acad-fit__img { max-height: 400px; } .acad-coach__grid { grid-template-columns: 1fr; gap: 40px; } .acad-coach__media { order: -1; } .acad-coach__img { max-height: 400px; } /* Contact page */ .contact__grid { grid-template-columns: 1fr; gap: 60px; } /* Giftcard page */ .gc-options__grid { grid-template-columns: 1fr; gap: 20px; } .gc-steps__grid { grid-template-columns: 1fr; gap: 40px; } /* Studio single page */ .studio-classes__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } /* Inner pages */ .page-content { grid-template-columns: 1fr; gap: 40px; } .page-content--reverse .page-content__text, .page-content--reverse .page-content__media { order: unset; } .page-content__img { aspect-ratio: 16 / 9; } .studio-detail__grid { grid-template-columns: 1fr; gap: 20px; } .pricing-grid { grid-template-columns: 1fr; gap: 20px; } .pricing-grid--4 { grid-template-columns: repeat(2, 1fr); } } /* ---------- Mobile ---------- */ @media (max-width: 768px) { /* Get Started steps */ .get-started__heading { font-size: clamp(22px, 6vw, 32px); } .get-started__steps { max-width: 100%; } .get-started__label { font-size: 16px; } .get-started__item-bd { padding-left: calc(28px + 14px); } .get-started__item-bd--wide { padding-left: 0; } .get-started__item-bd > p { font-size: 14px; } .get-started__link { font-size: 12px; } .plan-cards { grid-template-columns: 1fr; gap: 12px; } /* Manifesto – präsenter */ .manifesto { padding: clamp(64px, 16vw, 110px) 0; } .manifesto::before { opacity: 0.55; } .manifesto::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.45) 100% ); } .manifesto__line { font-size: clamp(18px, 5.2vw, 32px); line-height: 1.15; } .manifesto__subline { margin-top: 20px; font-size: 11px; } /* Stats – 2-Spalten wie .levels__grid */ .stats__inner { grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 5vw, 36px) clamp(16px, 5vw, 28px); } /* Levels */ .levels__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 0; } .levels__item:nth-child(odd) { border-left: none; padding-left: 0; } .levels__tag { font-size: clamp(36px, 10vw, 48px); } .levels__heading { font-size: clamp(22px, 6vw, 32px); } /* Steps – Nummern wie .levels__tag auf Mobile */ .steps__num { font-size: clamp(40px, 11vw, 52px); } /* Studios scroll – smaller slides, nur horizontales Wischen */ .studios-home__scroll { touch-action: pan-x; overscroll-behavior-y: none; } .studio-slide { flex: 0 0 56vw; aspect-ratio: 3 / 4; touch-action: pan-x; } /* Studio hover info – always visible on mobile (no hover) */ .studio-slide__hover { opacity: 1; pointer-events: auto; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 60%, transparent 100%); } .studio-slide__content { display: none; } .studio-slide--new .studio-slide__content { display: flex; } .studio-slide__address { font-size: 11px; } .studio-slide__route, .studio-slide__detail { font-size: 10px; } /* New studio card mobile */ .studio-slide--new { flex: 0 0 56vw; } .studio-slide__badge--new { font-size: 9px; padding: 3px 10px; } .studios-home__cta { padding-top: clamp(24px, 4vw, 36px); } .studios-home__cta .btn { max-width: 100%; white-space: normal; line-height: 1.4; padding: 14px 24px; } /* Disable parallax on mobile */ .cta-banner--parallax .cta-banner__bg { position: absolute; } /* Event panel */ .event-panel__drawer { width: 100%; border-left: none; } .event-panel__body { padding: 24px; } .event-panel__meta-grid { grid-template-columns: 1fr 1fr; gap: 16px; } .event-panel__title { font-size: 24px; } .event-panel__actions { flex-direction: column; } /* Events horizontal scroll – smaller cards on mobile */ .events__grid > .event-card { flex: 0 0 85%; max-width: none; } /* Header */ .header__nav { display: none; } .header__menu-toggle { display: flex; } .header__inner--split { gap: 12px; padding-right: var(--page-gutter); } .header__actions { gap: 10px; margin-left: auto; } .header__login, .header__actions > .header__lang-switch { display: none; } .header__book { padding: 8px 14px; font-size: 11px; white-space: nowrap; } /* Hero — same viewport framing as desktop so cover crop matches */ .hero { margin-top: 0; height: 75svh; min-height: 440px; } .hero__img, .hero__video { object-position: center center; } .hero__slide { align-items: flex-end; padding-bottom: 14vh; } .hero__slide--split .hero__content { padding-left: var(--page-gutter); } .hero__title { font-size: clamp(18px, 5.2vw, 32px); margin-bottom: 12px; } .hero__title-line { white-space: normal; } .hero__desc { font-size: clamp(11px, 2.8vw, 13px); margin-bottom: 8px; max-width: min(100%, 36ch); white-space: normal; letter-spacing: 0.03em; line-height: 1.55; } .hero__slide--split .hero__actions { padding-left: 0; } .hero__actions { flex-direction: column; align-items: center; } .hero__actions .btn, .cta-banner__actions .btn, .acad-hero__actions .btn { width: 100%; max-width: 280px; } /* About */ .about__heading { font-size: clamp(24px, 6vw, 36px); } .about__item { padding: 28px; } /* Offerings */ .offer-card__body { padding: 24px; } /* Studios */ .studio-card { padding: 28px; } /* CTA */ .cta-banner { min-height: 32vh; } .cta-banner__actions { flex-direction: column; align-items: center; } /* Footer */ .footer__top { grid-template-columns: 1fr 1fr; gap: 36px 24px; } .footer__brand { grid-column: 1 / -1; padding-right: 0; align-items: center; text-align: center; } .footer__social { justify-content: center; } .footer__bottom { flex-direction: column; gap: 20px; text-align: center; } .footer__left { flex-direction: column; gap: 12px; } .footer__policies { flex-wrap: wrap; justify-content: center; gap: 12px; } /* Hero mobile */ .hero__slide--split::after { background: linear-gradient( to right, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.32) 48%, rgba(0, 0, 0, 0) 100% ); } .hero__dots { bottom: 40px; } .hero__inline-link { font-weight: 600; } /* Dropdown panel – hide on mobile (use mobile menu instead) */ .header__dd-panel { display: none !important; } /* Academy mobile */ .acad-hero { height: 70svh; min-height: 400px; } .acad-hero__actions { flex-direction: column; align-items: center; } .acad-curriculum__grid { grid-template-columns: 1fr; gap: 10px; } .acad-curriculum__item { padding: 20px 24px; display: flex; align-items: center; gap: 16px; } .acad-curriculum__num { margin-bottom: 0; font-size: 28px; flex-shrink: 0; width: 36px; } .acad-pricing__card, .acad-pricing__dates { padding: 32px; } .acad-fit__grid { grid-template-columns: 1fr; } .acad-process__step { flex-direction: column; gap: 12px; } .acad-process--stagger .acad-process__step { align-self: stretch !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none; width: 100%; } .acad-quote { padding: 28px; } /* Giftcard banner mobile */ .gc-banner__card { width: 260px; height: 164px; padding: 24px; } .gc-card { padding: 28px; } /* Studio single page mobile */ .studio-hero { height: 52svh; min-height: 280px; max-height: none; } .studio-hero__img { object-position: center top; } .studio-hero__content { padding-bottom: 52px; } .studio-hero__title { font-size: clamp(36px, 9vw, 56px); } .studio-hero__back { font-size: 12px; margin-bottom: 14px; } .studio-classes__grid { grid-template-columns: 1fr; } .studio-classes__card { padding: 28px; } /* About page mobile */ .about-hero { height: 50svh; min-height: 300px; } .about-hero__content { padding-bottom: 40px; } .about-values__item { padding: 28px; } /* Inner pages mobile */ .page-hero { padding: calc(var(--header-height) + 48px) 0 40px; } .page-hero--img { min-height: 60vh; } .page-hero__title { font-size: clamp(32px, 9vw, 52px); overflow-wrap: anywhere; } .page-hero__sub { font-size: 15px; } .acad-why__content .btn, .acad-fit__text .btn { width: auto; max-width: none; } .studio-detail__card { height: 260px; } .studio-detail__card:has(.studio-detail__waitlist) { height: auto; min-height: 320px; } .studio-detail__card:has(.studio-detail__waitlist) .studio-detail__img-wrap { flex: 0 0 auto; height: 150px; } .studio-detail__card:has(.studio-detail__waitlist) .studio-detail__body { flex: 1 1 auto; padding-bottom: 18px; } .studio-detail__waitlist { margin-top: 12px; position: relative; z-index: 3; } .studio-detail__grid { gap: 16px; } .studio-detail__body { padding: 16px 18px; } .studio-detail__name { font-size: 17px; margin-bottom: 4px; } .studio-detail__address { font-size: 13px; line-height: 1.5; } .studio-detail__arrow { font-size: 18px; padding-top: 8px; } .pricing-card { padding: 36px 28px; } .pricing-grid--4 { grid-template-columns: 1fr; } } /* ===== STUDIO TAB NAVIGATION (one-pager anchors) ===== */ .studio-tab-nav { position: sticky; top: var(--header-height); z-index: 90; background: #000; border-bottom: 1px solid var(--color-border); transition: top var(--transition); } .studio-tab-nav.is-header-hidden { top: 0; } .studio-tab-nav__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .studio-tab-nav__inner::-webkit-scrollbar { display: none; } .studio-tab-nav__btn { display: inline-block; padding: 16px 24px; background: transparent; border: none; border-bottom: 2px solid transparent; color: rgba(255,255,255,0.45); font-family: var(--font-primary); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color 0.2s, border-color 0.2s; margin-bottom: -1px; } .studio-tab-nav__btn:hover { color: rgba(255,255,255,0.8); } .studio-tab-nav__btn.is-active { color: #fff; border-bottom-color: #fff; } @media (max-width: 768px) { .studio-tab-nav__inner { padding: 0 var(--page-gutter); } .studio-tab-nav__btn { padding: 16px 18px; font-size: 12px; flex: none; text-align: left; } .studio-section { scroll-margin-top: calc(var(--header-height) + 53px); } } .studio-section { scroll-margin-top: calc(var(--header-height) + 53px); } /* ===== STUDIO PRICING (tab panel) ===== */ .studio-pricing { padding: clamp(48px, 6vw, 80px) var(--page-gutter) clamp(16px, 2vw, 24px); } .studio-pricing.studio-section + .booking.studio-section { padding-top: clamp(24px, 3vw, 36px); } .studio-pricing__inner { max-width: var(--page-width); margin: 0 auto; } .studio-pricing__label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 12px; } .studio-pricing__heading { font-size: clamp(24px, 3vw, 36px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; } .studio-pricing__intro { max-width: 56ch; font-size: clamp(14px, 1vw, 16px); line-height: 1.6; color: rgba(255,255,255,0.62); margin-bottom: clamp(32px, 4vw, 48px); } .studio-pricing__head { margin-bottom: clamp(24px, 3vw, 36px); max-width: 720px; } .studio-pricing__head .mem-block__eyebrow { text-transform: none; } .studio-pricing__head .mem-block__title { font-size: clamp(28px, 3.5vw, 44px); } .studio-pricing__fto-widget { margin-bottom: clamp(32px, 4vw, 56px); } .studio-pricing__fto { margin-bottom: clamp(32px, 4vw, 56px); } .studio-pricing__fto.mem-block--fto { padding: 0; } .studio-pricing__credits.mem-block--credits { padding: 0; } .studio-pricing__credits .mem-block__head { margin-bottom: clamp(16px, 2.5vw, 24px); max-width: 720px; } .studio-pricing__grid--duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 32px; align-items: stretch; } .studio-pricing__offers .mem-fto--card { display: flex; flex-direction: column; height: 100%; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius); overflow: hidden; background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%); } .studio-pricing__offers .mem-fto--card .mem-fto__content { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: clamp(20px, 3vw, 28px); } .studio-pricing__offers .mem-fto--card .mem-fto__title { font-size: clamp(20px, 2.2vw, 26px); } .studio-pricing__offers .mem-fto--card .mem-fto__price { font-size: clamp(26px, 3vw, 34px); margin: 0; } .studio-pricing__offers .mem-fto--card .mem-fto__text { margin: 12px 0 0; max-width: none; font-size: 13px; flex: 1; line-height: 1.55; } .studio-pricing__offers .mem-fto--card .mem-fto__cta { width: 100%; margin-top: 20px; text-align: center; } .studio-pricing__offers .mem-fto--featured { border-color: rgba(255, 255, 255, 0.2); background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%); } .mem-fto__price-unit { font-size: 0.55em; font-weight: 600; letter-spacing: 0; color: rgba(255, 255, 255, 0.55); vertical-align: baseline; margin-left: 0.15em; } .studio-schedule__intro { max-width: var(--page-width); margin: 0 auto clamp(32px, 4vw, 48px); padding: 0; } .studio-schedule__heading { font-size: clamp(24px, 3vw, 36px); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 12px; } .studio-schedule__body { font-size: clamp(14px, 1vw, 16px); line-height: 1.6; color: rgba(255,255,255,0.62); margin: 0; max-width: 52ch; } .studio-schedule__widget { max-width: var(--page-width); margin: 0 auto; min-height: 420px; } .studio-schedule__widget [data-eversports-widget-id] { width: 100%; } .studio-pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px; } .studio-pricing__card { position: relative; padding: 36px 32px; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius); background: #111; display: flex; flex-direction: column; gap: 6px; } .studio-pricing__card--featured { border-color: rgba(255,255,255,0.35); background: #161616; } .studio-pricing__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #fff; color: #000; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 14px; border-radius: 100px; white-space: nowrap; } .studio-pricing__card-name { font-size: 17px; font-weight: 700; margin-bottom: 4px; } .studio-pricing__card-price { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; } .studio-pricing__card-price small { font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.45); } .studio-pricing__card-note { font-size: 12px; color: rgba(255,255,255,0.4); line-height: 1.5; margin-top: 4px; flex: 1; } .studio-pricing__card-btn { margin-top: 20px; display: block; text-align: center; padding: 12px; border-radius: 100px; background: #fff; color: #000; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; transition: opacity 0.2s; } .studio-pricing__card-btn:hover { opacity: 0.85; } .studio-pricing__footer { text-align: center; padding-top: 8px; } .studio-pricing__all-link { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.65); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.25); padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; } .studio-pricing__all-link:hover { color: #fff; border-color: #fff; } @media (max-width: 900px) { .studio-pricing__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .studio-pricing__grid--duo { grid-template-columns: 1fr; } .studio-pricing__grid { grid-template-columns: 1fr; } } /* ===== STUDIO COACHES (tab panel) ===== */ .studio-coaches { padding: clamp(48px, 6vw, 80px) var(--page-gutter); } .studio-coaches__inner { max-width: var(--page-width); margin: 0 auto; } .studio-coaches__label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 12px; } .studio-coaches__heading { font-size: clamp(22px, 2.5vw, 30px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 24px; } .studio-coaches__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 620px; } .studio-coach-card { display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); overflow: hidden; background: #0a0a0a; transition: border-color 0.25s ease; } .studio-coach-card:hover { border-color: rgba(255, 255, 255, 0.22); } .studio-coach-card__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #1a1a1a; } .studio-coach-card__img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(0.15); transition: transform 0.5s ease, filter 0.5s ease; } .studio-coach-card:hover .studio-coach-card__img { transform: scale(1.03); filter: grayscale(0); } .studio-coach-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #1a1a1a 0%, #111 100%); } .studio-coach-card__placeholder svg { opacity: 0.15; } .studio-coach-card__body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 10px 12px 12px; } .studio-coach-card__name { font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin: 0; } .studio-coach-card__role { font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin: 0; } .studio-coach-card__levels { display: flex; gap: 6px; flex-wrap: wrap; } .studio-coach-card__level { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.04); } .studio-coach-card__spirit { margin: 0; padding: 8px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.08); } .studio-coach-card__spirit-label { display: block; font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); margin-bottom: 4px; } .studio-coach-card__spirit p { margin: 0; font-size: 10px; font-weight: 300; font-style: italic; line-height: 1.4; color: rgba(255, 255, 255, 0.7); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .studio-coach-card__playlist { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 0; font-size: 10px; font-weight: 600; color: #fff; text-decoration: none; transition: color 0.2s ease, opacity 0.2s ease; } .studio-coach-card__playlist svg { flex-shrink: 0; width: 10px; height: 10px; opacity: 0.85; } .studio-coach-card__playlist:hover { color: #1ed760; } .studio-coach-card__playlist:hover svg { opacity: 1; } html.js .studio-coaches__grid .studio-coach-card.reveal:nth-child(2) { transition-delay: 0.08s; } html.js .studio-coaches__grid .studio-coach-card.reveal:nth-child(3) { transition-delay: 0.16s; } .studio-coaches__minimal-wrap { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .studio-coaches__minimal-label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); margin: 0 0 12px; } .studio-coaches__minimal { display: flex; flex-wrap: wrap; gap: 8px; } .studio-coach-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; background: rgba(255, 255, 255, 0.03); width: auto; max-width: 220px; } .studio-coach-chip__info { display: flex; flex-direction: column; gap: 2px; } .studio-coach-chip__name { font-size: 13px; font-weight: 600; line-height: 1.2; } .studio-coach-chip__role { font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); } .studio-coach-chip__levels { display: flex; gap: 4px; flex-wrap: wrap; } .studio-coach-chip__level { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.65); } @media (max-width: 1024px) { .studio-coaches__grid { max-width: none; grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .studio-coaches__grid { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; overscroll-behavior-y: none; touch-action: pan-x; scrollbar-width: none; max-width: none; margin: 0; padding: 0; grid-template-columns: unset; } .studio-coaches__grid::-webkit-scrollbar { display: none; } .studio-coach-card { flex: 0 0 260px; width: 260px; height: 440px; overflow: hidden; scroll-snap-align: start; } .studio-coach-card__media { flex: 0 0 260px; width: 260px; height: 260px; aspect-ratio: unset; overflow: hidden; } .studio-coach-card__body { flex: 1; padding: 10px 12px 12px; gap: 6px; min-height: 0; overflow: hidden; } .studio-coaches__minimal-wrap { margin-top: 20px; padding-top: 16px; } .studio-coaches__minimal { flex-wrap: nowrap; align-items: flex-start; gap: 8px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; overscroll-behavior-y: none; touch-action: pan-x; scrollbar-width: none; margin: 0; padding: 0; } .studio-coaches__minimal::-webkit-scrollbar { display: none; } .studio-coach-chip { flex: 0 0 auto; width: auto; min-width: 0; max-width: 220px; overflow: hidden; scroll-snap-align: start; } } /* ===== BOOKING SECTION ===== */ .booking { padding: var(--section-gap) 0; } .booking--hero-flush { padding-top: clamp(40px, 5vw, 64px); } .booking__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-gutter); } .booking__heading { font-size: clamp(24px, 3.5vw, 40px); font-weight: 600; text-align: center; margin-bottom: clamp(32px, 4vw, 48px); } /* Day picker */ .booking__days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 20px; } .booking__days::-webkit-scrollbar { display: none; } .booking__day { flex: 0 0 auto; width: 64px; padding: 12px 0; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: all var(--transition); font-family: inherit; } .booking__day:hover { border-color: rgba(255, 255, 255, 0.25); } .booking__day.is-active { background: #fff; border-color: #fff; color: #000; } .booking__day-label { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .booking__day.is-active .booking__day-label { color: rgba(0, 0, 0, 0.5); } .booking__day-num { font-size: 22px; font-weight: 700; line-height: 1; } /* Filters */ .booking__filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; } /* ── Toolbar row: filter toggles + search + actions ── */ .booking__toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .booking__toolbar-left { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; } .booking__toolbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Trainer search input */ .booking__search-input { height: 36px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-family: inherit; font-size: 13px; outline: none; min-width: 160px; transition: border-color 0.2s, background 0.2s; } .booking__search-input::placeholder { color: var(--color-text-muted); } .booking__search-input:focus { border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.07); } /* Action buttons */ .booking__action-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted); font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; transition: color 0.2s, border-color 0.2s; } .booking__action-btn:hover { color: var(--color-text); border-color: rgba(255,255,255,0.35); } /* Toast notification */ .booking__toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px); background: #fff; color: #000; padding: 10px 20px; border-radius: 100px; font-size: 13px; font-weight: 600; pointer-events: none; opacity: 0; transition: opacity 0.25s, transform 0.25s; z-index: 9999; } .booking__toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } .booking__filter-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } .booking__filter-row::-webkit-scrollbar { display: none; } .booking__filter-options { display: none; } .booking__filter-toggle { flex: 0 0 auto; padding: 8px 16px; border-radius: 20px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: all var(--transition); } .booking__filter-toggle:hover { color: var(--color-text); border-color: rgba(255, 255, 255, 0.25); } .booking__filter-toggle.is-active { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); } .booking__filter-toggle.is-active svg { transform: rotate(180deg); } .booking__filter { flex: 0 0 auto; padding: 8px 16px; border-radius: 20px; border: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: all var(--transition); white-space: nowrap; } .booking__filter:hover { border-color: rgba(255, 255, 255, 0.25); } .booking__filter.is-active { background: #fff; border-color: #fff; color: #000; } @media (max-width: 600px) { .booking__toolbar-right { width: 100%; justify-content: flex-start; } .booking__search-input { min-width: 120px; flex: 1; } } /* Schedule – two-day layout on desktop */ .booking__schedule { display: flex; flex-direction: column; gap: 10px; } .booking__schedule-columns { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 768px) { .booking__schedule-columns { grid-template-columns: 1fr 1fr; } } .booking__schedule-col-header { font-size: 14px; font-weight: 600; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); color: var(--color-text); } .booking__schedule-col-header span { color: var(--color-text-muted); font-weight: 400; margin-left: 6px; } .booking__schedule-col { display: flex; flex-direction: column; gap: 10px; } .booking__empty { text-align: center; padding: 48px 0; color: var(--color-text-muted); font-size: 14px; } /* Class tile */ .booking__tile { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-class-tile); transition: border-color var(--transition), background var(--transition); } .booking__tile:hover { border-color: rgba(255, 255, 255, 0.2); background: var(--color-class-tile-hover); } .booking__tile-time { flex: 0 0 64px; text-align: center; } .booking__tile-hour { display: block; font-size: 20px; font-weight: 700; line-height: 1.2; } .booking__tile-dur { display: block; font-size: 10px; color: var(--color-text-muted); } .booking__tile-divider { width: 1px; height: 50px; background: var(--color-border); flex-shrink: 0; } .booking__tile-info { flex: 1; min-width: 0; } .booking__tile-name { font-size: 15px; font-weight: 600; margin-bottom: 2px; } .booking__tile-meta { font-size: 12px; color: var(--color-text-muted); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .booking__tile-spots { display: flex; align-items: center; gap: 8px; } .booking__tile-bar { flex: 1; height: 3px; border-radius: 2px; background: var(--color-border); overflow: hidden; } .booking__tile-bar-fill { height: 100%; border-radius: 2px; background: rgba(255, 255, 255, 0.4); transition: width 0.4s ease; } .booking__tile-bar-fill.is-low { background: #ff5252; } .booking__tile-spots-text { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; } .booking__tile-spots-text.is-full { color: #ff5252; } .booking__tile-action { flex-shrink: 0; } .booking__book-btn { padding: 8px 20px; border-radius: 8px; border: none; background: #fff; color: #000; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity var(--transition); text-decoration: none; } .booking__book-btn:hover { opacity: 0.85; } .booking__book-btn--waitlist { background: transparent; color: var(--color-text-muted); border: 1px solid var(--color-border); } .booking__book-btn--waitlist:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); } /* Tile wrapper + expandable detail */ .booking__tile-wrapper { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-class-tile); transition: border-color var(--transition), background var(--transition); } .booking__tile-wrapper:hover { border-color: rgba(255, 255, 255, 0.2); background: var(--color-class-tile-hover); } .booking__tile-wrapper .booking__tile { border: none; border-radius: 0; background: transparent; } .booking__tile-wrapper:hover .booking__tile { background: transparent; } .booking__tile-wrapper.is-expanded { background: var(--color-class-tile); } .booking__tile-wrapper.is-expanded:hover { background: var(--color-class-tile-hover); } .booking__detail { max-height: 0; overflow: hidden; background: transparent; transition: max-height 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .booking__tile-wrapper.is-expanded .booking__detail { max-height: 400px; } .booking__tile-wrapper.is-expanded .booking__tile { border-bottom: none; background: transparent; } .booking__detail-class { padding: 16px 20px; background: transparent; } .booking__detail-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; } .booking__detail-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 100px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; border: 1px solid var(--color-border); color: var(--color-text-muted); } .booking__detail-badge--level { border-color: rgba(255, 255, 255, 0.25); color: #fff; } .booking__detail-coach { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-radius: 0; background: transparent; border: none; margin-bottom: 14px; } .booking__detail-avatar { width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); flex-shrink: 0; overflow: hidden; } .booking__detail-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .booking__detail-coach-info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .booking__detail-coach-name { font-size: 14px; font-weight: 700; color: #fff; } .booking__detail-coach-role { font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); margin-bottom: 6px; } .booking__detail-tags { display: flex; gap: 5px; flex-wrap: wrap; } .booking__detail-tag { display: inline-block; padding: 3px 9px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.12); font-size: 10px; font-weight: 500; color: rgba(255, 255, 255, 0.5); } .booking__detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: none; } .booking__detail-action-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 100px; border: 1px solid var(--color-border); background: transparent; color: rgba(255, 255, 255, 0.55); font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: none; transition: color 0.2s, border-color 0.2s; } .booking__detail-action-btn:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); } .booking__tile { cursor: pointer; } .booking__book-btn.is-booked { background: var(--color-hover); color: var(--color-text-muted); cursor: default; } /* Loading & error states */ .booking__loading { text-align: center; padding: 64px 0; color: var(--color-text-muted); font-size: 14px; } .booking__spinner { width: 32px; height: 32px; border: 2px solid var(--color-border); border-top-color: #fff; border-radius: 50%; animation: booking-spin 0.8s linear infinite; margin: 0 auto 16px; } @keyframes booking-spin { to { transform: rotate(360deg); } } .booking__error { text-align: center; padding: 48px 0; color: var(--color-text-muted); font-size: 14px; } .booking__error p { margin-bottom: 16px; } /* Booking modal */ .booking-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .booking-modal.is-open { opacity: 1; pointer-events: auto; } .booking-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); } .booking-modal__sheet { position: relative; width: 100%; max-width: 520px; background: #111; border-radius: 24px 24px 0 0; padding: 12px 28px 40px; transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .booking-modal.is-open .booking-modal__sheet { transform: translateY(0); } .booking-modal__handle { width: 40px; height: 4px; background: var(--color-border); border-radius: 2px; margin: 0 auto 24px; } .booking-modal__title { font-size: 22px; font-weight: 700; margin-bottom: 20px; text-align: center; } .booking-modal__details { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; } .booking-modal__row { display: flex; align-items: center; gap: 12px; font-size: 14px; } .booking-modal__row svg { flex-shrink: 0; opacity: 0.5; } .booking-modal__confirm { width: 100%; padding: 16px; font-size: 15px; border-radius: var(--radius-sm); margin-bottom: 10px; } .booking-modal__note { text-align: center; font-size: 12px; color: var(--color-text-muted); } /* Share sheet fallback (mobile / no Web Share API) */ .share-sheet { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .share-sheet.is-open { opacity: 1; pointer-events: auto; } .share-sheet__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); } .share-sheet__panel { position: relative; width: 100%; max-width: 520px; background: #111; border-radius: 24px 24px 0 0; padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .share-sheet.is-open .share-sheet__panel { transform: translateY(0); } .share-sheet__handle { width: 40px; height: 4px; background: var(--color-border); border-radius: 2px; margin: 0 auto 20px; } .share-sheet__title { font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 16px; } .share-sheet__options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .share-sheet__option { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: rgba(255, 255, 255, 0.04); color: #fff; font-family: inherit; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background 0.2s, border-color 0.2s; } .share-sheet__option:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); } .share-sheet__cancel { width: 100%; min-height: 44px; border: none; background: transparent; color: rgba(255, 255, 255, 0.55); font-family: inherit; font-size: 14px; cursor: pointer; } /* Toast */ .booking-toast { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%) translateY(20px); background: #fff; color: #000; padding: 14px 28px; border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: all 0.35s ease; z-index: 3000; } .booking-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } @media (max-width: 768px) { .booking__day { width: 56px; } .booking__tile { flex-wrap: wrap; gap: 10px; } .booking__tile-time { flex: 0 0 50px; } .booking__tile-divider { height: 40px; } .booking__tile-action { width: 100%; } .booking__book-btn { width: 100%; text-align: center; } .booking__tile-wrapper.is-expanded .booking__detail { max-height: none; overflow: visible; } } /* Portal panels */ .portal-panel { display: none; } .portal-panel.is-active { display: block; } .portal-panel .acad-process__step-body li { font-weight: 400; color: rgba(255, 255, 255, 0.7); font-size: 15px; } .portal-panel .acad-process__step-body h3 { font-size: 18px; } .portal-panel .contact__info-text { font-weight: 400; color: rgba(255, 255, 255, 0.7); font-size: 15px; } .portal-panel .contact__info-label { font-size: 13px; color: rgba(255, 255, 255, 0.85); } .portal-panel .acad-pricing__note, .portal-panel .acad-pricing__date-block p { font-weight: 400; color: rgba(255, 255, 255, 0.7); } .portal-panel .acad-included__item span { font-size: 15px; font-weight: 500; } .portal-panel .acad-curriculum__heading { font-size: clamp(22px, 3vw, 32px); } /* Registration form: larger, brighter typography for better readability */ .contact--register .contact-form__label { font-size: 14px; color: rgba(255, 255, 255, 0.85); } .contact--register .contact-form__input { font-size: 16px; font-weight: 500; } .contact--register .contact-form__input::placeholder { color: rgba(255, 255, 255, 0.5); } .contact--register .contact__info-text { font-size: 15px; font-weight: 400; color: rgba(255, 255, 255, 0.7); line-height: 1.6; } .contact--register .contact__info-label { font-size: 13px; color: rgba(255, 255, 255, 0.85); } .contact--register .acad-fit__item p { font-size: 16px; font-weight: 400; color: rgba(255, 255, 255, 0.7); } .contact--register .acad-process__step-body li { font-size: 15px; font-weight: 400; color: rgba(255, 255, 255, 0.7); } /* Registration form: two-column row for inputs */ .contact-form__group--row { display: grid; grid-template-columns: 1fr; gap: 0; } @media (min-width: 600px) { .contact-form__group--row { grid-template-columns: 1fr 1fr; gap: 16px; } } /* Studio Gallery (Homepage) */ .studio-gallery { padding: var(--section-gap) 0; } .studio-gallery__inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--page-gutter); } .studio-gallery__heading { font-size: clamp(48px, 8vw, 100px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; text-align: center; margin-bottom: clamp(48px, 6vw, 80px); } .studio-gallery__heading em { font-style: italic; font-weight: 300; } .studio-gallery__scroll { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .studio-gallery__card { display: block; text-decoration: none; color: var(--color-text); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); transition: border-color 0.4s, transform 0.4s var(--ease); } .studio-gallery__card:hover { border-color: rgba(255, 255, 255, 0.25); transform: translateY(-4px); } .studio-gallery__img-wrap { position: relative; aspect-ratio: 3 / 4; overflow: hidden; } .studio-gallery__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .studio-gallery__card:hover .studio-gallery__img { transform: scale(1.06); } .studio-gallery__content { padding: 24px 20px 28px; } .studio-gallery__city { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 8px; } .studio-gallery__name { font-size: clamp(22px, 2.5vw, 28px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; } .studio-gallery__detail { font-size: 14px; font-weight: 400; color: var(--color-text-muted); margin-bottom: 20px; } .studio-gallery__cta { display: inline-block; font-size: 13px; font-weight: 500; color: var(--color-text-muted); transition: color 0.3s; } .studio-gallery__card:hover .studio-gallery__cta { color: var(--color-text); } @media (max-width: 1024px) { .studio-gallery__scroll { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 580px) { .studio-gallery__scroll { grid-template-columns: 1fr; gap: 12px; } .studio-gallery__img-wrap { aspect-ratio: 16 / 10; } } /* Studio Showcase (Mosaic Gallery) */ .studio-showcase { padding: 24px 0 0; } .studio-showcase__inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--page-gutter); } .studio-showcase__mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; grid-template-rows: 1fr 1fr 1fr; gap: 5px; height: clamp(420px, 52vw, 620px); } .studio-showcase__img-wrap { border-radius: var(--radius); overflow: hidden; position: relative; } .studio-showcase__img-wrap:nth-child(1) { grid-column: 1; grid-row: 1 / 3; } .studio-showcase__img-wrap:nth-child(2) { grid-column: 2 / 4; grid-row: 1; } .studio-showcase__img-wrap:nth-child(3) { grid-column: 4; grid-row: 1 / 3; } .studio-showcase__img-wrap:nth-child(4) { grid-column: 1; grid-row: 3; } .studio-showcase__img-wrap:nth-child(5) { grid-column: 2; grid-row: 2 / 4; } .studio-showcase__img-wrap:nth-child(6) { grid-column: 3; grid-row: 2; } .studio-showcase__img-wrap:nth-child(7) { grid-column: 3 / 5; grid-row: 3; } .studio-showcase__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .studio-showcase__img-wrap:hover .studio-showcase__img { transform: scale(1.04); } @media (max-width: 768px) { .studio-showcase__mosaic { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; height: clamp(320px, 60vw, 480px); } .studio-showcase__img-wrap:nth-child(1) { grid-column: 1 / 3; grid-row: 1; } .studio-showcase__img-wrap:nth-child(2) { grid-column: 3; grid-row: 1 / 3; } .studio-showcase__img-wrap:nth-child(3) { grid-column: 1; grid-row: 2; } .studio-showcase__img-wrap:nth-child(4) { grid-column: 2; grid-row: 2; } .studio-showcase__img-wrap:nth-child(5) { grid-column: 1; grid-row: 3; } .studio-showcase__img-wrap:nth-child(6) { grid-column: 2 / 4; grid-row: 3; } .studio-showcase__img-wrap:nth-child(7) { display: none; } } @media (max-width: 480px) { .studio-showcase__mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; height: auto; } .studio-showcase__img-wrap { aspect-ratio: 4 / 3; } .studio-showcase__img-wrap:nth-child(1) { grid-column: 1 / 3; grid-row: 1; aspect-ratio: 16 / 9; } .studio-showcase__img-wrap:nth-child(2) { grid-column: 1; grid-row: 2; } .studio-showcase__img-wrap:nth-child(3) { grid-column: 2; grid-row: 2; } .studio-showcase__img-wrap:nth-child(4) { grid-column: 1; grid-row: 3; } .studio-showcase__img-wrap:nth-child(5) { grid-column: 2; grid-row: 3; } .studio-showcase__img-wrap:nth-child(6) { display: none; } .studio-showcase__img-wrap:nth-child(7) { display: none; } } /* Studio Features */ .studio-features { padding: 0 0 var(--section-gap); } .studio-features__inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--page-gutter); } .studio-features__heading { font-size: clamp(24px, 3.5vw, 36px); font-weight: 600; letter-spacing: 0.02em; margin-bottom: clamp(32px, 4vw, 48px); } .studio-features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .studio-features__grid--4 { grid-template-columns: repeat(4, 1fr); } .studio-features__item { padding: 28px 24px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); transition: border-color 0.3s; } .studio-features__item:hover { border-color: rgba(255, 255, 255, 0.2); } .studio-features__badge { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--color-border); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 16px; color: var(--color-text); opacity: 0.85; } .studio-features__item svg { color: var(--color-text); margin-bottom: 16px; opacity: 0.7; } .studio-features__item h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; } .studio-features__item p { font-size: 14px; font-weight: 400; color: var(--color-text-muted); line-height: 1.6; } @media (max-width: 1024px) { .studio-features__grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .studio-features__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .studio-features__grid, .studio-features__grid--4 { grid-template-columns: 1fr; } } /* Studio Switcher */ .studio-switcher { padding: 0 var(--page-gutter) 20px; display: flex; flex-direction: column; align-items: center; margin-top: -36px; margin-bottom: 0; position: relative; z-index: 3; background: transparent; } .studio-switcher__inner { display: flex; gap: 3px; width: 100%; max-width: 480px; padding: 4px; background: rgba(10, 10, 10, 0.62); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 100px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22); } .studio-switcher__btn { flex: 1; min-width: 0; padding: 11px 18px; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.52); text-decoration: none; text-align: center; border-radius: 100px; transition: color 0.3s ease, background 0.3s ease; } .studio-switcher__btn:hover { color: rgba(255, 255, 255, 0.82); background: rgba(255, 255, 255, 0.06); } .studio-switcher__btn.is-active { color: rgba(0, 0, 0, 0.88); background: rgba(255, 255, 255, 0.9); font-weight: 600; } /* München: 3 studios — equal segments */ .studio-switcher[data-city="münchen"] .studio-switcher__inner { display: grid; grid-template-columns: repeat(3, 1fr); } @media (max-width: 768px) { .studio-switcher { margin-top: -28px; padding: 0 var(--page-gutter) 14px; } .studio-switcher__inner { max-width: none; border-radius: 100px; } .studio-switcher[data-city="münchen"] .studio-switcher__btn { padding: 10px 6px; font-size: 11px; line-height: 1.3; } } @media (max-width: 480px) { .studio-switcher { margin-top: -22px; } .studio-switcher[data-city="münchen"] .studio-switcher__btn { padding: 9px 4px; font-size: 10px; } } /* Studios Map */ /* ── Studios Map ── */ .studios-map { padding: 0 var(--page-gutter); margin-bottom: 0; } .studios-map__inner { max-width: var(--max-width); margin: 0 auto; } /* PLZ finder bar */ .studios-finder { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .studios-finder__input-wrap { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 260px; max-width: 480px; } .studios-finder__input { flex: 1; height: 44px; padding: 0 16px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: #fff; font-family: var(--font-primary); font-size: 14px; outline: none; transition: border-color 0.2s, background 0.2s; } .studios-finder__input::placeholder { color: rgba(255,255,255,0.35); } .studios-finder__input:focus { border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.09); } .studios-finder__btn { white-space: nowrap; height: 44px; padding: 0 22px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.85); background: transparent; color: #fff; font-family: var(--font-primary); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; transition: background 0.2s, color 0.2s; } .studios-finder__btn:hover { background: #fff; color: #000; } /* Result info (no route button) */ .studios-finder__result { display: flex; align-items: center; padding: 12px 20px; border-radius: 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); width: 100%; } .studios-finder__result[hidden], .studios-finder__error[hidden] { display: none; } .studios-finder__nav-btn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; height: 36px; padding: 0 16px; border-radius: 100px; background: #fff; color: #000; font-family: var(--font-primary); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-decoration: none; flex-shrink: 0; margin-left: auto; transition: opacity 0.2s; } .studios-finder__nav-btn:hover { opacity: 0.8; } .studios-finder__result-info { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .studios-finder__result-name { font-size: 14px; font-weight: 600; color: #fff; } .studios-finder__result-addr { font-size: 13px; color: rgba(255,255,255,0.5); } .studios-finder__result-dist { font-size: 12px; color: rgba(255,255,255,0.35); } .studios-finder__error { font-size: 13px; color: rgba(255,100,100,0.85); padding: 10px 20px; width: 100%; border-radius: 14px; background: rgba(255,0,0,0.05); border: 1px solid rgba(255,0,0,0.15); } @media (max-width: 768px) { .studios-finder__input-wrap { max-width: 100%; min-width: 0; } } /* City pills */ .studios-cities { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .studios-city-pill { height: 36px; padding: 0 18px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.18); background: transparent; color: rgba(255,255,255,0.65); font-family: var(--font-primary); font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; -webkit-tap-highlight-color: transparent; } @media (hover: hover) and (pointer: fine) { .studios-city-pill:hover { border-color: rgba(255,255,255,0.5); color: #fff; } } .studios-city-pill--active, .studios-city-pill--active:hover, .studios-city-pill--active:focus, .studios-city-pill--active:focus-visible, .studios-city-pill--active:active { background: #fff; border-color: #fff; color: #000; font-weight: 600; } .studios-map__container { width: 100%; height: 520px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.12); overflow: hidden; background: #e0e0e0; } /* Invert the tile layer only → turns the light base into a crisp dark map that matches the site's aesthetic while labels remain sharp & readable. Markers/popups are in separate panes and are NOT affected. */ .studios-map__container .leaflet-tile-pane { filter: grayscale(1) brightness(0.95); } @media (max-width: 768px) { .studios-map__container { height: 380px; } .studios-finder { flex-direction: column; align-items: stretch; } .studios-finder__input-wrap { max-width: 100%; min-width: 0; flex-direction: column; align-items: stretch; width: 100%; } .studios-finder__input { width: 100%; flex: none; height: 52px; min-height: 52px; font-size: 16px; padding: 0 18px; } .studios-finder__btn { width: 100%; height: 52px; min-height: 52px; font-size: 14px; } .studio-detail { margin-bottom: 40px; } .studio-detail__header { flex-wrap: wrap; gap: 8px 12px; margin-bottom: 20px; padding-bottom: 16px; } .studio-detail__city { font-size: clamp(24px, 6vw, 36px); } } .studios-map__pin { background: none; border: none; } .studios-map__pin-dot { width: 16px; height: 16px; background: #111; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.35); transition: transform 0.2s; cursor: pointer; } .studios-map__pin-dot--active { background: #111; transform: scale(1.5); box-shadow: 0 0 0 3px rgba(0,0,0,0.15), 0 2px 10px rgba(0,0,0,0.4); } .studios-map__pin-dot:hover { transform: scale(1.4); } .studios-map__popup .leaflet-popup-content-wrapper { background: #111; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.35); padding: 0; pointer-events: auto; } .studios-map__popup .leaflet-popup-content { margin: 14px 18px; line-height: 1.5; pointer-events: auto; } .studios-map__popup-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--font-primary); color: #fff; text-align: center; min-width: 160px; } .studios-map__popup-name { font-size: 14px; font-weight: 700; } .studios-map__popup-addr { font-size: 12px; color: rgba(255, 255, 255, 0.55); line-height: 1.45; } .studios-map__popup .studios-map__popup-link, .studios-map__popup .studios-map__popup-link:link, .studios-map__popup .studios-map__popup-link:visited, .studios-map__popup .studios-map__popup-link:hover, .studios-map__popup .studios-map__popup-link:active, .studios-map__popup .studios-map__popup-link:focus { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 3px; pointer-events: auto; cursor: pointer; } .studios-map__popup .studios-map__popup-link:hover { opacity: 0.75; color: #fff; } .studios-map__popup-soon { font-size: 11px; color: rgba(255, 255, 255, 0.4); } .studios-map__popup .leaflet-popup-tip-container { margin-top: -1px; } .studios-map__popup .leaflet-popup-tip { background: #111; box-shadow: none; } /* =========================================== MOBILE POLISH (site-wide) =========================================== */ @media (max-width: 600px) { .acad-included__grid { grid-template-columns: 1fr; } .booking__toolbar-left { width: 100%; } .booking__filter-row { padding-bottom: 4px; -webkit-overflow-scrolling: touch; } } @media (max-width: 480px) { .footer__top { grid-template-columns: 1fr; gap: 28px; } .legal__title { font-size: clamp(28px, 8vw, 40px); margin-bottom: 32px; } .mem-card__price { font-size: 30px; } } /* ── Studio pages — mobile polish ── */ @media (max-width: 768px) { .studio-pricing, .studio-info, .studio-coaches, .studio-address, .booking.studio-section { padding-top: clamp(32px, 5vw, 48px); padding-bottom: clamp(32px, 5vw, 48px); } .studio-pricing.studio-section { padding-bottom: clamp(12px, 3vw, 20px); } .studio-pricing.studio-section + .booking.studio-section { padding-top: clamp(20px, 4vw, 28px); padding-bottom: clamp(32px, 5vw, 48px); } .studio-pricing__heading { margin-bottom: 24px; font-size: clamp(20px, 5.5vw, 28px); } .studio-pricing__card { padding: 28px 22px; } .studio-pricing__card-btn { width: 100%; } .studio-pricing__all-link { font-size: 13px; text-align: center; display: block; } .studio-info__heading { font-size: clamp(22px, 5.5vw, 30px); } .studio-info__about { font-size: 15px; line-height: 1.65; } .studio-coaches__heading { font-size: clamp(20px, 5vw, 26px); margin-bottom: 16px; } .booking__days { margin-left: calc(-1 * var(--page-gutter)); margin-right: calc(-1 * var(--page-gutter)); padding-left: var(--page-gutter); padding-right: var(--page-gutter); -webkit-overflow-scrolling: touch; } .booking__toolbar { gap: 8px; } .booking__tile-meta { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } @media (max-width: 600px) { .studio-hero::after { height: 140px; } .booking__detail-class { padding: 12px 14px; } .booking__detail-actions { flex-direction: column; } .booking__detail-actions .booking__book-btn { width: 100%; text-align: center; } } @media (max-width: 480px) { .studio-tab-nav__btn { padding: 14px 12px; font-size: 11px; } .studio-detail__card { height: 220px; } .studio-detail__card:has(.studio-detail__waitlist) { height: auto; min-height: 300px; } .studio-detail__card:has(.studio-detail__waitlist) .studio-detail__img-wrap { flex: 0 0 auto; height: 130px; } .studio-detail__card:has(.studio-detail__waitlist) .studio-detail__body { flex: 1 1 auto; padding-bottom: 16px; } .studio-detail__body { padding: 12px 14px; } .studio-detail__name { font-size: 15px; margin-bottom: 2px; } .studio-detail__address { font-size: 12px; line-height: 1.45; } .studio-detail__grid { gap: 12px; } .studio-detail__arrow { font-size: 16px; padding-top: 6px; } .studios-map__container { height: 300px; } } /* ── Studio detail cards — hover only (layout defined above) ── */ /* =========================================== NEWSLETTER / WAITLIST =========================================== */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .nl-hero--banner { position: relative; margin-top: var(--header-height); min-height: 42vw; max-height: 72vh; overflow: hidden; background: #000; } .nl-hero__img { width: 100%; height: 100%; min-height: 280px; max-height: 72vh; object-fit: cover; object-position: center; display: block; } .nl-hero--plain { padding: calc(var(--header-height) + 72px) var(--page-gutter) 24px; text-align: center; } .nl-hero__plain-inner { max-width: 640px; margin: 0 auto; } .nl-signup { padding: clamp(40px, 6vw, 72px) var(--page-gutter) clamp(64px, 8vw, 100px); } .nl-signup--tight { padding-top: 12px; } .nl-signup__inner { max-width: 560px; margin: 0 auto; text-align: center; } .nl-signup__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin: 0 0 14px; } .nl-signup__title { font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 16px; } .nl-signup__text { font-size: clamp(15px, 1.5vw, 17px); font-weight: 300; line-height: 1.65; color: rgba(255, 255, 255, 0.62); margin: 0 0 12px; } .nl-signup__text--soft { color: rgba(255, 255, 255, 0.45); margin-bottom: 28px; } .nl-form { margin-top: 28px; text-align: left; } .nl-form__row { display: flex; gap: 10px; align-items: stretch; } .nl-form__input { flex: 1; min-width: 0; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 100px; color: #fff; font-family: var(--font-primary); font-size: 14px; padding: 14px 20px; outline: none; transition: border-color 0.2s ease; } .nl-form__input::placeholder { color: rgba(255, 255, 255, 0.35); } .nl-form__input:focus { border-color: rgba(255, 255, 255, 0.45); } .nl-form__btn { flex-shrink: 0; border-radius: 100px; padding-inline: 28px; } .nl-form__consent { margin: 14px 2px 0; font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, 0.4); } .nl-form__consent a { text-decoration: underline; text-underline-offset: 2px; color: rgba(255, 255, 255, 0.65); } .nl-form .form-status { margin-top: 14px; text-align: center; } @media (max-width: 640px) { .nl-hero--banner { min-height: 48vw; } .nl-form__row { flex-direction: column; } .nl-form__btn { width: 100%; } } /* =========================================== AMBASSADORS =========================================== */ .amb-hero { position: relative; min-height: 72vh; display: flex; align-items: flex-end; padding: calc(var(--header-height) + 40px) var(--page-gutter) clamp(48px, 6vw, 72px); overflow: hidden; } .amb-hero__bg { position: absolute; inset: 0; } .amb-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .amb-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.82) 100%); } .amb-hero__content { position: relative; z-index: 1; max-width: 720px; } .amb-hero__title { font-size: clamp(32px, 5vw, 56px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 16px; } .amb-hero__text { font-size: clamp(15px, 1.6vw, 18px); font-weight: 300; line-height: 1.6; color: rgba(255, 255, 255, 0.7); margin: 0 0 24px; max-width: 46ch; } .amb-intro { padding: clamp(48px, 7vw, 88px) var(--page-gutter); border-bottom: 1px solid var(--color-border); } .amb-intro__inner { max-width: 720px; margin: 0 auto; } .amb-intro__inner p { font-size: clamp(15px, 1.5vw, 17px); font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, 0.65); margin: 0 0 18px; } .amb-intro__tagline { font-size: clamp(18px, 2vw, 22px) !important; font-weight: 700 !important; color: #fff !important; margin-top: 28px !important; } .amb-grid { padding: clamp(48px, 7vw, 88px) var(--page-gutter); } .amb-grid__inner { max-width: var(--page-width); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 28px); } .amb-card { padding: clamp(24px, 3vw, 32px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); background: rgba(255, 255, 255, 0.02); } .amb-card__title { font-size: clamp(18px, 2vw, 22px); font-weight: 800; margin: 0 0 14px; } .amb-card p, .amb-card__list { font-size: 14px; font-weight: 300; line-height: 1.65; color: rgba(255, 255, 255, 0.58); margin: 0; } .amb-card__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; } .amb-card__list li { padding-left: 16px; position: relative; } .amb-card__list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); } .amb-steps { padding: clamp(48px, 7vw, 88px) var(--page-gutter); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .amb-steps__inner { max-width: var(--page-width); margin: 0 auto; } .amb-steps__heading { font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 clamp(28px, 4vw, 44px); text-align: center; } .amb-steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 32px); } .amb-step__num { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.35); margin-bottom: 12px; } .amb-step__title { font-size: 20px; font-weight: 800; margin: 0 0 10px; } .amb-step p { font-size: 14px; font-weight: 300; line-height: 1.65; color: rgba(255, 255, 255, 0.58); margin: 0; } .amb-apply { padding: clamp(56px, 8vw, 100px) var(--page-gutter); } .amb-apply__inner { max-width: 560px; margin: 0 auto; } .amb-apply__title { font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -0.03em; text-align: center; margin: 0 0 12px; } .amb-apply__text { text-align: center; font-size: 15px; font-weight: 300; color: rgba(255, 255, 255, 0.58); margin: 0 0 36px; white-space: pre-line; } .amb-form .contact-form__submit { width: 100%; margin-top: 8px; } @media (max-width: 900px) { .amb-grid__inner, .amb-steps__grid { grid-template-columns: 1fr; } } .partner-options { padding-top: 0; } .partner-cta { max-width: 720px; margin: 0 auto 80px; text-align: center; } .partner-cta__inner { padding: 0 24px; } .careers-intro .amb-intro__inner { text-align: center; }