/* ============================================================
StretchOn Landing — Enterprise CSS v2.0
Brandbook: #000000, #FFFFFF, #00B4B4
Fonts: StretchPro (display), SF Pro Display (body)
============================================================ */
/* === @font-face — unified SF Pro Display family === */
@font-face {
font-family: "SF Pro Display";
font-weight: 300;
font-style: normal;
font-display: swap;
src: local("SF Pro Display Light"),
url(../fonts/SF-Pro-Display-Light.woff2) format("woff2"),
url(../fonts/SF-Pro-Display-Light.otf) format("opentype");
}
@font-face {
font-family: "SF Pro Display";
font-weight: 400;
font-style: normal;
font-display: swap;
src: local("SF Pro Display Regular"),
url(../fonts/SF-Pro-Display-Regular.woff2) format("woff2"),
url(../fonts/SF-Pro-Display-Regular.otf) format("opentype");
}
@font-face {
font-family: "SF Pro Display";
font-weight: 500;
font-style: normal;
font-display: swap;
src: local("SF Pro Display Medium"),
url(../fonts/SF-Pro-Display-Medium.woff2) format("woff2"),
url(../fonts/SF-Pro-Display-Medium.otf) format("opentype");
}
@font-face {
font-family: "SF Pro Display";
font-weight: 600;
font-style: normal;
font-display: swap;
src: local("SF Pro Display Semibold"),
url(../fonts/SF-Pro-Display-Semibold.woff2) format("woff2"),
url(../fonts/SF-Pro-Display-Semibold.otf) format("opentype");
}
@font-face {
font-family: "StretchPro";
font-weight: 400;
font-style: normal;
font-display: swap;
src: local("StretchPro"),
url(../fonts/StretchPro.woff2) format("woff2"),
url(../fonts/StretchPro.otf) format("opentype");
}
/* Font fallback with metrics */
@font-face {
font-family: "SF Pro Display Fallback";
src: local("Arial");
ascent-override: 92%;
descent-override: 24%;
line-gap-override: 0%;
size-adjust: 100%;
}
/* === Design Tokens === */
:root {
/* --- Brandbook: 3 colors --- */
--color-black: #000000;
--color-white: #FFFFFF;
--color-teal: #00B4B4;
/* --- Derived colors --- */
--color-teal-hover: #009E9E;
--color-teal-light: rgba(0, 180, 180, 0.08);
--color-teal-border: rgba(0, 180, 180, 0.18);
--color-teal-subtle: rgba(0, 180, 180, 0.06);
--color-black-secondary: rgba(0, 0, 0, 0.68);
--color-black-tertiary: rgba(0, 0, 0, 0.48);
--accent-text: #008A8A; /* 4.6:1 on white — WCAG AA for small text */
/* --- Semantic tokens (light mode default) --- */
--surface-primary: #FFFFFF;
--surface-secondary: rgba(0, 180, 180, 0.08);
--surface-card: #FFFFFF;
--surface-overlay: rgba(0, 0, 0, 0.4);
--text-primary: #000000;
--text-secondary: rgba(0, 0, 0, 0.68);
--text-tertiary: rgba(0, 0, 0, 0.48);
--text-on-accent: #FFFFFF;
--accent: #00B4B4;
--accent-hover: #009E9E;
--accent-subtle: rgba(0, 180, 180, 0.08);
--accent-border: rgba(0, 180, 180, 0.18);
--border: rgba(0, 0, 0, 0.08);
--shadow-color: rgba(0, 0, 0, 0.04);
--shadow-color-strong: rgba(0, 0, 0, 0.06);
/* --- Typography --- */
--font-display: "StretchPro", Arial Black, sans-serif;
--font-body: "SF Pro Display", "SF Pro Display Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* --- Type Scale — compact for StretchPro wide glyphs --- */
--text-xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.8125rem);
--text-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
--text-base: clamp(0.875rem, 0.84rem + 0.15vw, 1rem);
--text-md: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
--text-lg: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
--text-xl: clamp(1.125rem, 1rem + 0.4vw, 1.5rem);
--text-2xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
--text-3xl: clamp(1.5rem, 1.25rem + 0.9vw, 2.25rem);
/* --- Spacing (8px baseline) --- */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 2.5rem;
--space-8: 3rem;
--space-10: 4rem;
--space-12: 5rem;
--space-16: 6.875rem;
/* --- Section rhythm — full viewport --- */
--section-padding-y: clamp(2rem, 1.5rem + 2vw, 3.5rem);
--section-padding-y-sm: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
--title-to-content-gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
--title-to-desc-gap: clamp(0.5rem, 0.375rem + 0.5vw, 1rem);
/* --- Radii --- */
--radius-sm: 12px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--radius-full: 9999px;
/* --- Shadows --- */
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04);
--shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 32px rgba(0, 0, 0, 0.06);
--shadow-header: 0 1px 0 rgba(0, 0, 0, 0.06);
/* --- Easing --- */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* --- Durations --- */
--duration-instant: 100ms;
--duration-fast: 180ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--duration-glacial: 800ms;
/* --- Stagger --- */
--stagger-cards: 100ms;
/* --- Z-index --- */
--z-header: 100;
--z-burger: 200;
--z-overlay: 150;
--z-progress: 99;
--z-back-to-top: 80;
--z-sticky-cta: 90;
}
/* === Body & Base === */
body,
body.custom-background {
background-color: #FFFFFF !important;
color: var(--text-primary);
font-family: var(--font-body);
font-weight: 400;
font-size: var(--text-base);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-synthesis: none;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
font-kerning: normal;
}
/* === Selection === */
::selection {
background-color: rgba(0, 180, 180, 0.2);
color: var(--text-primary);
}
::-moz-selection {
background-color: rgba(0, 180, 180, 0.2);
color: var(--text-primary);
}
/* === Scrollbar === */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.15);
border-radius: 4px;
border: 2px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.25);
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}
/* === Wrapper === */
.wrapper {
max-width: 1400px;
padding: 0 clamp(1.5rem, 1rem + 2.5vw, 4rem);
width: 100%;
margin: 0 auto;
box-sizing: border-box;
}
/* === Full-viewport sections === */
.banner,
.stretching,
.uniqueness,
.directions,
.meditations,
.mobdev,
.author,
.footer {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* The wrapper inside each section */
.banner > .wrapper,
.stretching > .wrapper,
.uniqueness > .wrapper,
.directions > .wrapper,
.meditations > .wrapper,
.mobdev > .wrapper,
.author > .wrapper,
.footer > .wrapper {
width: 100%;
min-height: calc(100vh - 48px);
display: flex;
flex-direction: column;
justify-content: center;
padding-top: var(--section-padding-y);
padding-bottom: var(--section-padding-y);
}
/* === Common Typography === */
.title {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--text-2xl);
color: var(--text-primary);
line-height: 1.1;
text-transform: uppercase;
letter-spacing: 0;
font-feature-settings: "kern" 1, "liga" 0;
max-width: 100%;
word-break: keep-all;
overflow-wrap: normal;
hyphens: none;
}
.desc {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--text-md);
color: var(--text-secondary);
line-height: 1.5;
text-transform: none;
}
/* Only uppercase on section-level desc (sub-titles) */
.meditations__desc,
.mobdev__desc,
.footer__desc {
text-transform: uppercase;
font-size: var(--text-base);
line-height: 1.4;
}
.item-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(0.85rem, 0.75rem + 0.4vw, 1.1rem);
color: var(--text-primary);
letter-spacing: 0;
line-height: 1.25;
overflow-wrap: anywhere;
}
.item-title b,
.directions__item-title b,
.uniqueness__item-title b {
font-weight: inherit;
display: inline;
}
.indent {
padding-top: 0;
}
/* === Button === */
.btn {
font-family: var(--font-body);
font-weight: 600;
font-size: var(--text-base);
color: var(--text-on-accent);
background-color: var(--accent);
border-radius: var(--radius-md);
padding: 12px 36px;
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
white-space: nowrap;
border: none;
text-decoration: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
position: relative;
overflow: hidden;
transition: background-color var(--duration-fast) var(--ease-out-quart),
transform var(--duration-fast) var(--ease-out-quart),
box-shadow var(--duration-fast) var(--ease-out-quart);
}
.btn:hover {
background-color: var(--accent-hover);
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(0, 180, 180, 0.3);
}
.btn:active {
transform: translateY(1px);
box-shadow: 0 1px 4px rgba(0, 180, 180, 0.2);
transition-duration: var(--duration-instant);
}
.btn:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
box-shadow: 0 0 0 6px rgba(0, 180, 180, 0.15);
}
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
transform: none;
box-shadow: none;
}
/* Ripple effect */
.btn::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
rgba(255, 255, 255, 0.3) 0%,
transparent 60%
);
opacity: 0;
transform: scale(0);
transition: transform 0.5s, opacity 0.3s;
}
.btn:active::after {
opacity: 1;
transform: scale(2.5);
transition: transform 0s, opacity 0s;
}
/* Primary CTA (Hero + Footer) */
.btn--primary {
padding: 14px 40px;
font-size: var(--text-base);
}
/* Secondary CTA (Header) */
.btn--secondary {
padding: 12px 24px;
font-size: var(--text-xs);
min-height: 48px;
}
/* === Focus styles === */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
outline: none;
}
/* === Cursor styles === */
a,
button,
[role="button"],
.directions__slider-pagination,
.footer__button-list a,
.header__burger-btn {
cursor: pointer;
}
.swiper {
cursor: grab;
}
.swiper:active {
cursor: grabbing;
}
[disabled],
[aria-disabled="true"] {
cursor: not-allowed;
}
/* === Skip Link === */
.skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: 999;
padding: 12px 24px;
background-color: var(--accent);
color: var(--text-on-accent);
font-weight: 600;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
text-decoration: none;
}
.skip-link:focus {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: auto;
height: auto;
overflow: visible;
}
/* Also hide WP default screen-reader-text */
.screen-reader-text {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.screen-reader-text:focus {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: auto;
height: auto;
overflow: visible;
z-index: 999;
padding: 12px 24px;
background-color: var(--accent);
color: var(--text-on-accent);
font-weight: 600;
}
/* === Scroll Progress === */
.scroll-progress {
display: none !important;
position: fixed;
top: 40px;
left: 0;
width: 0%;
height: 2px;
background: linear-gradient(90deg, var(--accent) 0%, #00D4D4 100%);
z-index: var(--z-progress);
pointer-events: none;
}
/* ============================================================
HEADER
============================================================ */
.header {
position: sticky;
top: 0;
z-index: var(--z-header);
background-color: #FFFFFF;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: var(--shadow-header);
/* contain removed: it creates a containing block that trapped the
fixed mobile nav drawer in iOS Safari; nav is now a sibling. */
}
/* Header goes transparent on scroll — handled via JS if needed */
.header__inner {
padding: 4px 0;
display: grid;
align-items: center;
grid-template-columns: 140px auto 140px;
min-height: 40px;
gap: 16px;
}
/* SEO site title/description are always SR-only inside the main header and
inside the burger drawer — breakpoint-agnostic so they never flash when
a state change causes a media-query re-evaluation on iOS Safari. */
.header__logo .site-title,
.header__logo .site-description,
.burger-top__logo .site-title,
.burger-top__logo .site-description {
position: absolute !important;
width: 1px !important;
height: 1px !important;
clip: rect(1px, 1px, 1px, 1px) !important;
clip-path: inset(50%) !important;
overflow: hidden !important;
white-space: nowrap !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.header__nav {
margin: 0 auto;
}
.header__burger-top {
display: block;
justify-content: space-between;
}
.burger-top__text {
font-family: var(--font-display);
font-weight: 400;
font-size: 34px;
color: var(--text-primary);
}
.header__menu {
display: flex;
gap: 24px;
}
.header__menu a {
color: var(--text-primary);
font-family: var(--font-body);
font-weight: 500;
font-size: var(--text-sm);
padding: 4px 0;
min-height: 48px;
display: inline-flex;
align-items: center;
position: relative;
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out-quart);
line-height: 1.3;
}
.header__menu a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--accent);
transition: width var(--duration-normal) var(--ease-out-expo);
}
.header__menu a:hover {
color: var(--accent);
}
.header__menu a:hover::after,
.header__menu a.active::after {
width: 100%;
}
.header__menu a.active {
color: var(--accent);
}
.header__burger-btn,
.header__burger-top {
display: none;
}
.header__burger-btn {
width: 36px;
height: 36px;
padding: 6px;
background: none;
border: none;
-webkit-tap-highlight-color: transparent;
}
.burger-btn__img {
width: 100%;
height: 100%;
display: block;
}
/* Burger overlay removed — mobile drawer is full-viewport white, no dim needed. */
@media screen and (max-width: 1024px) {
.header__burger-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
margin: 0 0 20px;
border-bottom: none;
background: transparent;
}
.burger-top__text {
display: none;
}
.burger-top__logo {
display: flex;
align-items: center;
line-height: 0;
}
.burger-top__logo a,
.burger-top__logo .custom-logo-link {
display: block;
line-height: 0;
padding: 0;
margin: 0;
}
.burger-top__logo img,
.burger-top__logo .custom-logo,
.burger-top__logo .custom-logo-link img {
max-width: 90px;
width: auto;
height: auto;
display: block;
margin: 0;
}
.burger-top__logo .site-title,
.burger-top__logo .site-description {
display: none;
}
.burger-top__btn {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--border);
border-radius: 50%;
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-out-quart),
border-color var(--duration-fast) var(--ease-out-quart);
}
.burger-top__btn:active {
background-color: var(--accent-subtle);
border-color: var(--accent);
}
.burger-top__img {
width: 11px;
height: 11px;
}
.header__inner {
grid-template-columns: auto 32px;
padding: 2px 0;
min-height: 30px;
align-items: center;
}
.header__logo {
text-align: left;
justify-self: start;
align-self: center;
display: flex;
align-items: center;
line-height: 0;
}
.header__logo img,
.header__logo .custom-logo,
.header__logo .custom-logo-link {
max-width: 90px;
width: auto;
height: auto;
display: block;
margin: 0;
}
/* Hide SEO site title/description text that flows under the logo image. */
.header__logo .site-title,
.header__logo .site-description {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
width: 1px;
height: 1px;
overflow: hidden;
white-space: nowrap;
margin: 0;
padding: 0;
}
.header__burger-btn {
width: 32px;
height: 32px;
padding: 6px;
align-self: center;
background: none;
border: none;
border-radius: 50%;
box-shadow: none;
transition: background-color var(--duration-normal) var(--ease-out-quart),
box-shadow var(--duration-normal) var(--ease-out-quart);
}
.header__nav {
position: fixed;
/* Full-width full-height white drawer covers the whole viewport
including the safe-area / notch so there is never any gray leakage. */
top: 0;
left: 0;
right: 0;
padding: calc(8px + env(safe-area-inset-top, 0px)) 20px calc(28px + env(safe-area-inset-bottom, 0px));
display: none;
flex-direction: column;
gap: 8px;
width: 100vw;
height: 100dvh;
background-color: #FFFFFF;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
z-index: var(--z-burger);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.header__nav.active {
display: flex;
}
.header__btn {
display: none;
}
.header__burger-btn {
display: flex;
align-items: center;
justify-content: center;
}
.header__menu {
flex-direction: column;
gap: 2px;
}
.header__menu li {
border-bottom: 1px solid var(--border);
}
.header__menu li:last-child {
border-bottom: none;
}
.header__menu a {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.01em;
padding: 16px 4px;
min-height: 52px;
width: 100%;
color: var(--text-primary);
display: inline-flex;
align-items: center;
justify-content: space-between;
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out-quart),
padding var(--duration-fast) var(--ease-out-quart);
}
.header__menu a::before {
display: none;
}
.header__menu a::after {
content: "";
position: static;
width: 12px;
height: 12px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
opacity: 0.35;
background: none;
margin-right: 4px;
transition: opacity var(--duration-fast), color var(--duration-fast);
}
@media (hover: hover) {
.header__menu a:hover,
.header__menu a:focus-visible {
color: var(--accent);
padding-left: 8px;
}
.header__menu a:hover::after,
.header__menu a:focus-visible::after {
opacity: 1;
color: var(--accent);
}
}
}
/* ============================================================
BANNER / HERO
============================================================ */
.banner {
background-color: var(--surface-primary);
display: flex;
align-items: center;
min-height: calc(100svh - 80px);
}
.banner__inner {
padding-top: 0;
padding-bottom: clamp(1rem, 0.5rem + 1vw, 2rem);
display: flex;
align-items: stretch;
gap: clamp(2rem, 1.5rem + 2.5vw, 4rem);
width: 100%;
max-height: calc(100svh - 80px);
}
.banner__info {
max-width: none;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: clamp(1.25rem, 1rem + 1vw, 2rem);
flex: 2;
}
.banner__title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1rem, 0.5rem + 0.85vw, 1.625rem);
color: var(--text-primary);
letter-spacing: 0;
line-height: 1.15;
text-transform: uppercase;
font-feature-settings: "kern" 1, "liga" 0;
word-break: keep-all;
overflow-wrap: normal;
}
.banner__br { display: none; }
@media (min-width: 600px) {
.banner__br { display: inline; }
}
.banner__desc {
font-family: var(--font-body);
font-weight: 400;
font-size: clamp(1.125rem, 0.85rem + 0.6vw, 1.5rem);
color: var(--text-secondary);
max-width: none;
line-height: 1.5;
white-space: nowrap;
}
@media (max-width: 767px) {
.banner {
min-height: auto;
padding-top: 1rem;
}
.banner__inner {
max-height: none;
gap: 1.5rem;
}
.banner__image {
max-height: 60vh;
align-self: center;
}
.banner__title {
font-size: clamp(1.4rem, 1rem + 3vw, 2rem);
}
.banner__desc {
white-space: normal;
font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.125rem);
}
}
.banner__image {
max-width: none;
min-width: 0;
width: 100%;
overflow: hidden;
border-radius: var(--radius-lg);
flex: 1;
position: relative;
align-self: stretch;
margin-top: 0;
max-height: calc(100svh - 5rem);
display: flex;
align-items: stretch;
justify-content: center;
}
.banner__img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
display: block;
object-fit: cover;
object-position: center top;
}
/* Image overlay gradient for depth */
.banner__image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.05) 100%);
pointer-events: none;
border-radius: inherit;
}
/* Hero CTA pulse animation */
.banner .btn {
animation: pulse-cta 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
animation-delay: 2s;
}
@keyframes pulse-cta {
0%, 100% { box-shadow: 0 0 0 0 rgba(0, 180, 180, 0.4); }
50% { box-shadow: 0 0 0 12px rgba(0, 180, 180, 0); }
}
/* Banner responsive — now handled by container query (banner-layout) and phablet 600px breakpoint */
/* ============================================================
STRETCHING
============================================================ */
.stretching {
background-color: var(--surface-primary);
overflow-x: clip;
}
.stretching__inner {
}
.stretching__title {
text-align: center;
}
.stretching__slider {
margin-top: var(--title-to-content-gap);
}
.stretching__slider .swiper-slide {
padding: clamp(1rem, 0.856rem + 0.537vw, 1.5rem);
border-radius: var(--radius-lg);
border: 1px solid var(--accent-border);
background-color: var(--surface-card);
display: flex;
flex-direction: column;
gap: clamp(1.25rem, 1rem + 0.75vw, 2rem);
height: auto;
box-shadow: var(--shadow-card);
transition: box-shadow var(--duration-normal) var(--ease-out-quart),
transform var(--duration-normal) var(--ease-out-quart);
contain: layout style;
}
.stretching__slider .swiper-slide:hover {
box-shadow: var(--shadow-card-hover);
transform: translateY(-4px);
}
.stretching__item-title {
min-height: 2rem;
}
.stretching__item-image {
overflow: hidden;
border-radius: var(--radius-md);
width: 100%;
}
.stretching__item-img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
/* Card text */
.stretching__item-text,
.stretching__slider .desc {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--text-base);
line-height: 1.6;
color: var(--text-secondary);
text-transform: none;
}
@media screen and (max-width: 640px) {
.stretching__slider {
margin-right: calc(-1 * clamp(1rem, 0.5rem + 2.5vw, 6.875rem));
}
}
/* ============================================================
UNIQUENESS
============================================================ */
.uniqueness {
background-color: var(--surface-secondary);
}
.uniqueness__inner {
display: flex;
flex-direction: column;
flex: 1;
}
.uniqueness__list {
margin-top: auto;
margin-bottom: auto;
}
.uniqueness__title {
max-width: 1247px;
text-align: center;
margin: 30px auto 0;
font-size: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
line-height: 1.05;
letter-spacing: -0.01em;
}
.uniqueness__list {
padding-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1rem, 0.75rem + 0.75vw, 1.5rem);
container-type: inline-size;
container-name: uniqueness-grid;
}
.uniqueness__item {
padding: clamp(1.5rem, 1.25rem + 0.75vw, 2rem) clamp(1.25rem, 1rem + 0.75vw, 1.75rem);
border-radius: var(--radius-lg);
background-color: var(--surface-card);
display: flex;
flex-direction: column;
gap: clamp(0.75rem, 0.5rem + 0.5vw, 1.25rem);
box-shadow: var(--shadow-card);
transition: box-shadow var(--duration-normal) var(--ease-out-quart),
transform var(--duration-normal) var(--ease-out-quart);
contain: layout style;
}
.uniqueness__item:hover {
box-shadow: var(--shadow-card-hover);
transform: translateY(-4px);
}
/* All cards — teal top accent */
.uniqueness__item {
border-top: 3px solid var(--accent);
}
.uniqueness__item-title b {
font-weight: inherit;
}
/* Icons */
.uniqueness__item svg,
.uniqueness__item img:first-child {
width: 56px;
height: 56px;
flex-shrink: 0;
}
.uniqueness__item-sub-text h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(0.65rem, 0.55rem + 0.3vw, 0.85rem);
color: var(--accent);
letter-spacing: 0;
line-height: 1.2;
padding-top: clamp(0.75rem, 0.5rem + 0.5vw, 1rem);
padding-bottom: 8px;
word-break: keep-all;
overflow-wrap: normal;
hyphens: none;
}
.uniqueness__item-sub-text h3:first-child {
padding-top: 0;
}
@container uniqueness-grid (max-width: 900px) {
.uniqueness__list {
grid-template-columns: repeat(2, 1fr);
}
}
@container uniqueness-grid (max-width: 500px) {
.uniqueness__list {
grid-template-columns: 1fr;
}
.uniqueness__title {
text-align: left;
}
}
/* fallback for browsers without container queries */
@media screen and (max-width: 768px) {
.uniqueness__list {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 520px) {
.uniqueness__list {
grid-template-columns: 1fr;
}
.uniqueness__title {
text-align: left;
}
}
/* ============================================================
DIRECTIONS
============================================================ */
.directions {
background-color: var(--surface-primary);
overflow-x: clip;
}
.directions__inner {
}
.directions__title-inner {
position: relative;
}
.directions__slider-wrap {
position: relative;
margin-top: 100px;
padding-bottom: 80px;
}
.directions__slider-pagination {
position: absolute;
left: calc(50% + 8px);
bottom: 0;
width: 48px;
height: 48px;
background-color: var(--color-black);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
border: none;
padding: 0;
transition: background-color var(--duration-fast),
transform var(--duration-fast);
cursor: pointer;
}
.directions__slider-pagination svg {
color: var(--color-white);
}
.directions__slider-pagination:hover {
background-color: var(--color-white);
transform: scale(1.08);
}
.directions__slider-pagination:hover svg {
color: var(--color-black);
}
.directions__slider-pagination:active {
transform: scale(0.95);
}
.directions__title-inner {
position: absolute;
top: 60px;
left: 0;
right: 0;
text-align: center;
}
.directions__title {
max-width: 100%;
}
.directions__desc {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--text-xl);
color: var(--text-secondary);
margin-top: 0.5rem;
line-height: 1.3;
text-transform: uppercase;
letter-spacing: 0.01em;
}
.directions > .wrapper {
position: relative;
}
.directions__slider {
margin-top: 0;
}
/* All section titles — prevent ugly breaks by using smaller size when needed */
.directions__title,
.meditations__title,
.mobdev__title,
.footer__title,
.author__title {
font-size: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
transform: translateY(-30px);
}
.author > .wrapper {
justify-content: flex-start;
padding-top: 0.5rem;
}
.directions__slider .swiper-slide {
padding: clamp(1rem, 0.675rem + 1.208vw, 2.125rem);
border-radius: var(--radius-lg);
background-color: #E6F7F7;
display: flex;
gap: clamp(1.375rem, 0.816rem + 2.081vw, 3.313rem);
height: auto;
}
.directions__slider .swiper-slide:hover {
box-shadow: var(--shadow-card-hover);
}
.directions__item-inner {
flex: 1;
}
.directions__item-text {
padding-top: clamp(0.75rem, 0.5rem + 0.5vw, 1rem);
font-family: var(--font-body);
font-weight: 400;
font-size: var(--text-sm);
color: var(--text-secondary);
display: flex;
flex-direction: column;
gap: clamp(0.5rem, 0.375rem + 0.5vw, 1rem);
line-height: 1.5;
max-width: 600px;
}
.directions__item-text p {
display: -webkit-box;
-webkit-line-clamp: 8;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Direction card title — logo style
HTML: Stretch
On Tennis
Layout: Stretch
On TENNIS
*/
.directions__item-title {
font-family: var(--font-display);
font-size: clamp(0.8rem, 0.7rem + 0.35vw, 1rem);
color: var(--accent);
line-height: 1.15;
letter-spacing: 0;
text-transform: none;
}
/* Direction name (Tennis, Football etc) — black, larger, inline with "On" */
.directions__item-title span {
color: var(--color-black);
font-size: 1.5em;
display: inline;
margin-left: 0.3em;
text-transform: uppercase;
vertical-align: baseline;
}
/* Bold tags — just inherit */
.directions__item-title b {
font-weight: inherit;
display: inline;
}
.directions__item-image {
border-radius: var(--radius-lg);
overflow: hidden;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
@container direction-card (max-width: 700px) {
.directions__slider .swiper-slide {
flex-direction: column-reverse;
}
.directions__item-image {
width: 100%;
max-height: 350px;
aspect-ratio: auto;
}
}
@media screen and (max-width: 768px) {
.directions__slider-pagination {
display: none;
}
.directions__title-inner {
position: static;
text-align: left;
}
.directions__slider .swiper-slide {
flex-direction: column-reverse;
}
.directions__item-image {
min-width: auto;
width: 100%;
max-height: 360px;
border-radius: var(--radius-md);
}
}
@media screen and (max-width: 480px) {
.directions__item-image {
max-height: 260px;
}
}
@media screen and (max-width: 640px) {
.directions__slider {
margin-right: calc(-1 * clamp(1rem, 0.5rem + 2.5vw, 6.875rem));
}
}
@media screen and (max-width: 480px) {
.directions__item-image {
max-height: 170px;
}
}
/* ============================================================
MEDITATIONS
============================================================ */
.meditations {
background-color: var(--surface-primary);
overflow-x: clip;
}
/* ── Header block: title left-aligned, accent rule as separator ── */
/* meditations/mobdev/footer — default wrapper rules apply */
.meditations__inner {
display: flex;
flex-direction: column;
}
.meditations__title {
text-align: left;
max-width: 72ch; /* prevents StretchPro wide-glyph orphans */
}
.meditations__desc {
padding-top: var(--title-to-desc-gap);
text-align: left;
/* Subtle accent rule above desc acts as a divider */
padding-left: 1rem;
border-left: 3px solid var(--accent);
margin-top: clamp(0.75rem, 0.5rem + 0.5vw, 1.25rem);
}
/* ── Two-column content area ── */
.meditations__content {
padding-top: var(--title-to-content-gap);
display: flex;
gap: clamp(1.5rem, 1rem + 2vw, 3rem);
align-items: center;
container-type: inline-size;
container-name: meditation-content;
}
/* ── Left column: phone mockup ── */
.meditations__content-img {
max-width: 380px;
width: 100%;
flex-shrink: 0;
/* Lift it subtly so it feels grounded in the layout */
align-self: flex-end;
padding-bottom: 0;
position: relative;
}
/* Soft teal glow behind the phone */
.meditations__content-img::before {
content: "";
position: absolute;
inset: 10% -12%;
background: radial-gradient(ellipse at center, var(--accent-subtle) 0%, transparent 70%);
border-radius: 50%;
z-index: 0;
pointer-events: none;
}
.meditations__img {
width: 100%;
position: relative;
z-index: 1;
display: block;
}
/* ── Right column: text + cards ── */
.meditations__content-inner {
display: flex;
flex-direction: column;
gap: 0;
min-width: 0;
flex: 1;
}
/* Paragraphs */
.meditations__content-text {
font-size: var(--text-base);
line-height: 1.55;
color: var(--text-secondary);
margin-bottom: 1rem;
}
/* Second paragraph (closing) */
.meditations__slider-inner + .meditations__content-text {
margin-top: 1rem;
margin-bottom: 0;
font-size: var(--text-sm);
color: var(--text-tertiary);
line-height: 1.5;
}
/* ── "The course includes three key meditations:" label ── */
.meditations__content-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(0.65rem, 0.55rem + 0.35vw, 0.85rem);
color: var(--accent);
letter-spacing: 0.04em;
line-height: 1.2;
text-transform: uppercase;
word-break: keep-all;
overflow-wrap: normal;
hyphens: none;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
/* ── Slider wrapper — must be above all siblings for hover to work ── */
.meditations__content-inner > * {
position: relative;
z-index: 1;
}
.meditations__slider-inner {
position: relative;
z-index: 50;
padding-top: 8px;
}
/* Allow cards to visually escape upward on hover */
.meditations__slider.swiper {
overflow: clip;
overflow-clip-margin: 20px;
}
/* Fallback for browsers without overflow-clip-margin */
@supports not (overflow-clip-margin: 20px) {
.meditations__slider.swiper {
overflow: visible;
clip-path: inset(-20px -5px -5px -5px);
}
}
/* ── Meditation cards — the main visual event ── */
.meditations__slider .swiper-slide {
border-radius: var(--radius-lg);
overflow: hidden;
border: 1.5px solid var(--accent-border);
/* Fixed width fills the column width proportionally for 3 cards */
width: clamp(140px, 38vw, 220px);
height: auto;
background-color: var(--surface-card);
box-shadow: var(--shadow-card);
transition: box-shadow var(--duration-normal) var(--ease-out-quart),
transform var(--duration-normal) var(--ease-out-quart);
display: flex;
flex-direction: column;
}
.meditations__slider .swiper-slide:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
transform: translateY(-4px) scale(1.02);
}
/* Taller image so the card has genuine presence */
.meditations__item-image {
width: 100%;
height: 130px;
overflow: hidden;
flex-shrink: 0;
position: relative;
}
/* Item title: overlay on the image, teal-to-transparent scrim */
.meditations__item-title {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 10px 12px 32px;
/* Scrim ensures legibility over any photo */
background: linear-gradient(180deg, rgba(0,0,0,0.52) 0%, transparent 100%);
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(0.55rem, 0.45rem + 0.3vw, 0.75rem);
color: #FFFFFF;
letter-spacing: 0.03em;
line-height: 1.1;
text-transform: uppercase;
word-break: keep-all;
overflow-wrap: normal;
hyphens: none;
z-index: 2;
}
.meditations__item-inner {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
}
/* Card body text */
.meditations__item-text {
padding: 10px 10px 12px;
font-family: var(--font-body);
font-weight: 400;
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.5;
flex: 1;
/* Teal micro-rule at the top of the text block */
border-top: 2px solid var(--accent-border);
}
/* ── Responsive fallback ── */
@container meditation-content (max-width: 620px) {
.meditations__content {
flex-direction: column;
align-items: flex-start;
gap: 2rem;
}
.meditations__content-img {
max-width: 180px;
align-self: center;
}
}
@media screen and (max-width: 768px) {
.meditations__title,
.meditations__desc {
text-align: center;
}
.meditations__desc {
padding-left: 0;
border-left: none;
border-top: 3px solid var(--accent);
padding-top: 0.75rem;
margin-top: clamp(0.75rem, 0.5rem + 0.5vw, 1.25rem);
}
.meditations__content {
flex-direction: column;
align-items: flex-start;
gap: 2.5rem;
}
.meditations__content-img {
max-width: 200px;
align-self: center;
}
.meditations__content-img::before {
display: none;
}
.meditations__slider {
margin-right: calc(-1 * clamp(1rem, 0.5rem + 2.5vw, 6.875rem));
}
.meditations__slider .swiper-slide {
width: clamp(140px, 44vw, 180px);
}
}
/* ============================================================
MOBDEV
============================================================ */
.mobdev {
background-color: var(--surface-secondary);
}
.mobdev__inner {
display: flex;
flex-direction: column;
gap: var(--title-to-content-gap);
align-items: center;
}
.mobdev__title,
.mobdev__desc {
text-align: center;
}
.mobdev__title {
margin: 0 auto;
max-width: 1247px;
}
.mobdev__desc {
font-size: var(--text-xl);
margin-top: -1.5rem;
}
.mobdev__content-img {
max-width: min(680px, 100%);
width: 100%;
margin: 0 auto;
}
/* Float animation for device mockup */
@keyframes float-device {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.mobdev__content-img.in-view img {
animation: float-device 6s ease-in-out infinite;
animation-delay: 0.5s;
}
/* Mobdev responsive */
@media screen and (max-width: 768px) {
.mobdev__content-img {
max-width: 100%;
}
.mobdev__content-img.in-view img {
animation: none;
}
.mobdev__desc {
font-size: var(--text-base);
}
}
@media screen and (max-width: 480px) {
.mobdev__title {
text-align: left;
}
.mobdev__desc {
text-align: left;
}
}
/* ============================================================
AUTHOR
============================================================ */
.author {
background-color: var(--surface-primary);
position: relative;
}
/* Top accent line — removed */
.author__inner {
padding: 0;
display: flex;
gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
container-type: inline-size;
align-items: center;
container-name: author-layout;
}
.author__content {
flex: 2;
display: flex;
flex-direction: column;
gap: clamp(0.75rem, 0.5rem + 0.5vw, 1.25rem);
justify-content: center;
}
.author__text {
display: flex;
flex-direction: column;
gap: clamp(0.5rem, 0.375rem + 0.375vw, 0.75rem);
max-width: 720px;
font-weight: 400;
font-size: var(--text-sm);
line-height: 1.5;
color: var(--text-secondary);
}
.author__text p + p {
margin-top: 1em;
}
.author__foto {
flex: 1;
position: relative;
display: flex;
flex-direction: column;
gap: 16px;
}
.author__autograph {
position: absolute;
bottom: 36px;
left: -280px;
max-width: 200px;
}
.author__autograph img {
width: 100%;
height: auto;
}
.author__foto-image {
width: 100%;
border-radius: var(--radius-lg);
overflow: hidden;
}
.author__foto-img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
.author__foto-about {
max-width: 100%;
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.5;
}
/* author__text.foto removed — duplicate eliminated from DOM */
/* Credentials badge */
.author__credentials {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
background-color: var(--accent-subtle);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 500;
color: var(--accent);
margin-top: 8px;
}
@container author-layout (max-width: 800px) {
.author__inner {
flex-direction: column;
}
}
@media screen and (max-width: 768px) {
.author__inner {
flex-direction: column;
}
.author__content {
order: 2;
}
.author__foto {
order: 1;
}
.author__foto-image {
margin: 0 auto;
}
.author__foto-about {
padding-top: 1rem;
}
.author__autograph {
position: relative;
width: 200px;
max-width: 200px;
bottom: auto;
left: auto;
right: auto;
margin: 0 auto;
}
.author__autograph-img {
width: 100%;
}
}
/* ============================================================
FOOTER / CTA
============================================================ */
.footer {
background-color: var(--surface-primary);
}
.footer__inner {
display: flex;
gap: clamp(2rem, 1.5rem + 2.5vw, 4rem);
align-items: center;
container-type: inline-size;
container-name: footer-layout;
}
.footer__image {
max-width: 420px;
width: 100%;
border-radius: var(--radius-lg);
overflow: hidden;
}
.footer__img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
.footer__info {
display: flex;
flex-direction: column;
align-items: center;
}
.footer__title,
.footer__desc {
text-align: center;
}
.footer__desc.above {
padding-top: clamp(1rem, 0.75rem + 0.75vw, 1.5rem);
max-width: 608px;
width: 100%;
}
.footer__desc.under {
padding-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
max-width: 640px;
width: 100%;
}
.footer__button-list {
padding-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
display: flex;
flex-direction: column;
gap: 16px;
}
.footer__button-list a {
display: inline-flex;
align-items: center;
transition: transform var(--duration-fast) var(--ease-out-quart),
opacity var(--duration-fast);
border-radius: var(--radius-sm);
min-width: 48px;
min-height: 48px;
}
.footer__button-list a img {
height: 56px;
width: auto;
border-radius: var(--radius-sm);
}
.footer__button-list a:hover {
transform: scale(1.04);
opacity: 0.92;
}
.footer__button-list a:active {
transform: scale(0.98);
transition-duration: var(--duration-instant);
}
.footer__button-list a:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 4px;
}
@container footer-layout (max-width: 800px) {
.footer__inner {
flex-direction: column;
gap: 32px;
}
.footer__image {
order: 2;
}
}
@media screen and (max-width: 768px) {
.footer__inner {
flex-direction: column;
gap: 36px;
}
.footer__image {
order: 2;
}
}
@media screen and (max-width: 480px) {
.title,
.desc {
text-align: left;
}
.footer__desc.under {
text-align: center;
}
}
/* ============================================================
SITE FOOTER BAR
============================================================ */
.site-footer-bar {
background-color: #0A1A1A;
color: rgba(255, 255, 255, 0.8);
font-family: var(--font-body);
font-size: var(--text-sm);
line-height: 1.5;
}
/* Social row */
.site-footer-bar__social {
padding: 2.5rem 0 2rem;
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.site-footer-bar__label {
display: block;
font-family: var(--font-body);
font-weight: 500;
font-size: var(--text-xs);
letter-spacing: 0.15em;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 1rem;
}
.site-footer-bar__icons {
display: flex;
justify-content: center;
gap: 1.25rem;
}
.site-footer-bar__icons a {
color: rgba(255, 255, 255, 0.7);
transition: color var(--duration-fast), transform var(--duration-fast);
}
.site-footer-bar__icons a:hover {
color: var(--accent);
transform: translateY(-2px);
}
/* Main content row */
.site-footer-bar__main {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 2.5rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
gap: 3rem;
}
.site-footer-bar__brand {
max-width: 400px;
}
.site-footer-bar__logo {
font-family: var(--font-display);
font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
color: #FFFFFF;
text-transform: uppercase;
line-height: 0.9;
}
.site-footer-bar__logo span {
color: var(--accent);
}
.site-footer-bar__tagline {
margin-top: 0.75rem;
color: rgba(255, 255, 255, 0.5);
font-size: var(--text-sm);
}
/* Navigation */
.site-footer-bar__nav {
display: flex;
flex-direction: column;
gap: 0.75rem;
text-align: right;
}
.site-footer-bar__nav a {
font-family: var(--font-display);
font-size: clamp(0.7rem, 0.6rem + 0.3vw, 0.9rem);
color: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
text-decoration: none;
transition: color var(--duration-fast);
}
.site-footer-bar__nav a:hover {
color: var(--accent);
}
/* Bottom bar */
.site-footer-bar__bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 0;
font-size: var(--text-xs);
color: rgba(255, 255, 255, 0.35);
}
.site-footer-bar__links {
display: flex;
gap: 1.5rem;
}
.site-footer-bar__links a {
color: rgba(255, 255, 255, 0.35);
text-decoration: none;
transition: color var(--duration-fast);
}
.site-footer-bar__links a:hover {
color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 768px) {
.site-footer-bar__main {
flex-direction: column;
align-items: center;
text-align: center;
}
.site-footer-bar__nav {
text-align: center;
}
.site-footer-bar__bottom {
flex-direction: column;
gap: 0.75rem;
text-align: center;
}
}
/* ============================================================
IMAGES — common
============================================================ */
/* Images that should show FULL (no crop) */
.banner__img,
.stretching__item-img,
.author__foto-img,
.footer__img,
.mobdev__img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
/* Images that can be cropped to fit container */
.directions__item-img,
.meditations__item-img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Image hover effects */
.banner__image img,
.stretching__item-image img,
.directions__item-image img,
.author__foto-image img,
.footer__image img {
transition: transform 8s cubic-bezier(0.25, 0.1, 0.25, 1);
will-change: auto;
}
.banner__image:hover img,
.author__foto-image:hover img,
.footer__image:hover img {
transform: scale(1.03);
}
.stretching__slider .swiper-slide:hover .stretching__item-image img {
transform: scale(1.04);
}
.directions__slider .swiper-slide:hover .directions__item-image img {
transform: scale(1.03);
}
/* Skeleton loading for images */
.banner__image:not(.loaded),
.stretching__item-image:not(.loaded),
.directions__item-image:not(.loaded),
.meditations__item-image:not(.loaded),
.author__foto-image:not(.loaded),
.footer__image:not(.loaded) {
background: linear-gradient(
90deg,
rgba(0, 180, 180, 0.06) 25%,
rgba(0, 180, 180, 0.12) 37%,
rgba(0, 180, 180, 0.06) 63%
);
background-size: 400% 100%;
animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
0% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Broken image fallback */
.banner__image,
.stretching__item-image,
.directions__item-image,
.meditations__item-image,
.author__foto-image,
.footer__image {
background-color: var(--accent-subtle);
position: relative;
}
.image-error::after {
content: "";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--accent-subtle);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%2300B4B4' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
border-radius: inherit;
}
/* ============================================================
SCROLL REVEAL ANIMATIONS
============================================================ */
/* Base state */
[data-reveal] {
opacity: 0;
}
[data-reveal="bottom"] {
transform: translateY(32px);
}
[data-reveal="left"] {
transform: translateX(-32px);
}
[data-reveal="right"] {
transform: translateX(32px);
}
/* Revealed state */
[data-reveal].revealed {
opacity: 1;
transform: translate(0);
transition: opacity var(--duration-glacial) var(--ease-out-expo),
transform var(--duration-glacial) var(--ease-out-expo);
}
/* After reveal — release resources */
[data-reveal].reveal-done {
will-change: auto;
}
/* Hero page load animation */
@keyframes header-enter {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-text-enter {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-image-enter {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
.header {
animation: header-enter 0.6s var(--ease-out-expo) 0.1s forwards;
}
.banner__title {
animation: hero-text-enter 0.8s var(--ease-out-expo) 0.3s both;
}
.banner__desc {
animation: hero-text-enter 0.8s var(--ease-out-expo) 0.45s both;
}
.banner__info .btn {
animation: hero-text-enter 0.8s var(--ease-out-expo) 0.6s both;
}
.banner__image {
animation: hero-image-enter 1.2s var(--ease-out-expo) 0.4s both;
}
/* Autograph fade-in */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.author__autograph.in-view img {
animation: fadeIn 1.5s var(--ease-out-expo) 0.8s both;
}
/* ============================================================
BACK TO TOP
============================================================ */
.back-to-top {
position: fixed;
bottom: calc(32px + env(safe-area-inset-bottom, 0px));
right: calc(24px + env(safe-area-inset-right, 0px));
width: 48px;
height: 48px;
border-radius: var(--radius-full);
background-color: var(--accent);
color: var(--text-on-accent);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(0, 180, 180, 0.3);
cursor: pointer;
border: none;
z-index: var(--z-back-to-top);
opacity: 0;
transform: translateY(16px) scale(0.8);
pointer-events: none;
transition: opacity var(--duration-normal) var(--ease-out-quart),
transform var(--duration-normal) var(--ease-out-quart),
background-color var(--duration-fast);
}
.back-to-top.visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.back-to-top:hover {
background-color: var(--accent-hover);
transform: translateY(-2px) scale(1.05);
}
.back-to-top:active {
transform: translateY(0) scale(0.95);
}
.back-to-top:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 4px;
}
/* ============================================================
MOBILE ADJUSTMENTS
============================================================ */
@media (max-width: 768px) {
.btn {
padding: 12px 24px;
}
}
/* ============================================================
RESPONSIVE — ADDITIONAL
============================================================ */
/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
.banner__inner {
min-height: auto;
padding-top: 2rem;
padding-bottom: 2rem;
}
.banner__image {
max-height: 60vh;
}
.header__inner {
padding: 8px 0;
min-height: 48px;
}
}
/* Fold-screen (280px+) */
@media (max-width: 320px) {
.wrapper {
padding: 0 12px;
}
.banner__title {
font-size: 1.625rem;
word-break: break-word;
}
.btn {
padding: 14px 20px;
font-size: 0.875rem;
}
.uniqueness__list {
gap: 12px;
}
.header__inner {
grid-template-columns: 1fr 44px;
}
* {
overflow-wrap: break-word;
word-break: break-word;
}
img {
max-width: 100%;
height: auto;
}
body {
overflow-x: hidden;
}
}
/* ============================================================
RESPONSIVE BREAKPOINTS (mobile-first additions)
============================================================ */
/* Mobile compact cap (320-480px) */
@media (max-width: 480px) {
:root {
--text-3xl: 1.5rem;
--text-2xl: 1.375rem;
--text-xl: 1.125rem;
--text-lg: 1rem;
--text-md: 0.9375rem;
--text-base: 0.875rem;
--text-sm: 0.8125rem;
--text-xs: 0.75rem;
}
}
/* Phablet (600px+) — hero row, footer row, author row */
@media (min-width: 600px) {
.banner__inner {
flex-direction: row;
min-height: auto;
}
.banner__info {
flex: 2;
}
.banner__image {
flex: 1;
order: 0;
min-width: 200px;
margin-top: 0;
}
.footer__inner {
flex-direction: row;
}
.footer__image {
order: 0;
}
.author__inner {
flex-direction: row;
}
.author__foto {
order: 0;
}
.mobdev__content-img {
max-width: 90%;
}
}
/* Tablet portrait (768px+) */
@media (min-width: 768px) {
.wrapper {
padding: 0 clamp(2rem, 1.5rem + 2vw, 3rem);
}
:root {
--text-3xl: 1.75rem;
--text-2xl: 1.5rem;
--text-xl: 1.25rem;
--text-base: 0.9375rem;
}
.mobdev__content-img {
max-width: 80%;
}
/* Author autograph — relative on tablet */
.author__autograph {
position: relative;
bottom: auto;
left: auto;
right: auto;
max-width: 160px;
margin: 0 auto;
}
}
/* Laptop (1024px+) — inline menu, 3-col uniqueness */
@media (min-width: 1024px) {
.wrapper {
max-width: 1080px;
}
:root {
--text-3xl: 2rem;
--text-2xl: 1.625rem;
--text-xl: 1.375rem;
--text-base: 1rem;
}
.uniqueness__list {
grid-template-columns: repeat(3, 1fr);
}
.directions__slider-pagination {
display: flex;
}
.mobdev__content-img {
max-width: 680px;
}
/* Author autograph back to absolute on desktop */
.author__autograph {
position: absolute;
bottom: 36px;
left: -280px;
max-width: 200px;
margin: 0;
}
}
/* Desktop (1280px+) */
@media (min-width: 1280px) {
.wrapper {
max-width: 1280px;
padding: 0 2.5rem;
}
:root {
--section-padding-y: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.mobdev__content-img {
max-width: 720px;
}
}
/* Desktop cap (1440px+) */
@media (min-width: 1440px) {
.banner__title {
font-size: 1.75rem;
}
:root {
--text-3xl: 2.25rem;
--text-2xl: 1.75rem;
--text-xl: 1.5rem;
}
.wrapper {
max-width: 1400px;
}
}
/* Large Desktop (1536px+) */
@media (min-width: 1536px) {
:root {
--text-3xl: 2.5rem;
--text-2xl: 2rem;
--text-xl: 1.625rem;
--text-base: 1.0625rem;
--section-padding-y: clamp(3rem, 2rem + 3vw, 5rem);
}
.wrapper {
max-width: 1400px;
padding: 0 3rem;
}
.uniqueness__list {
gap: clamp(1.5rem, 1rem + 1vw, 2.5rem);
}
.footer__inner {
gap: clamp(3rem, 2rem + 2vw, 5rem);
}
.mobdev__content-img {
max-width: 800px;
}
}
/* Full HD (1920px+) */
@media (min-width: 1920px) {
.wrapper {
max-width: 1600px;
padding: 0 4rem;
}
:root {
--text-3xl: 2.75rem;
--text-2xl: 2.125rem;
}
}
/* Ultra-wide (2560px+) */
@media (min-width: 2560px) {
.wrapper {
max-width: 1800px;
}
:root {
--text-3xl: 3rem;
--text-2xl: 2.25rem;
--text-xl: 1.75rem;
--section-padding-y: 5rem;
}
}
/* ============================================================
WIDE-SCREEN HERO DECORATION (1920px+)
============================================================ */
@media (min-width: 1920px) {
.banner {
position: relative;
}
.banner::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse 600px 400px at 10% 50%, rgba(0, 180, 180, 0.03), transparent),
radial-gradient(ellipse 600px 400px at 90% 30%, rgba(0, 180, 180, 0.02), transparent);
pointer-events: none;
}
}
/* ============================================================
HOVER ANIMATIONS (P2-WEB)
============================================================ */
/* Interactive cards cursor */
.uniqueness__item,
.stretching__slider .swiper-slide,
.directions__slider .swiper-slide,
.meditations__slider .swiper-slide {
cursor: pointer;
}
/* Nav underline animation — desktop only (burger menu gets a chevron instead) */
@media (min-width: 1025px) {
.header__menu a {
position: relative;
}
.header__menu a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--accent);
transition: width var(--duration-normal) var(--ease-out-expo);
}
.header__menu a:hover::after,
.header__menu a.active::after {
width: 100%;
}
}
/* CTA button gradient-shift on hover */
.btn--primary {
background-image: linear-gradient(135deg, var(--accent), var(--accent-hover));
background-size: 200% 200%;
background-position: 0% 50%;
transition: background-position var(--duration-normal) var(--ease-out-quart),
transform var(--duration-fast) var(--ease-out-quart),
box-shadow var(--duration-fast);
}
.btn--primary:hover {
background-position: 100% 50%;
}
/* ============================================================
STICKY HEADER COMPACTIFICATION
============================================================ */
.header {
transition: padding var(--duration-normal) var(--ease-out-quart),
background-color var(--duration-normal),
box-shadow var(--duration-normal);
}
.header.scrolled {
box-shadow: var(--shadow-header);
}
.header.scrolled .header__inner {
padding: 2px 0;
min-height: 36px;
}
.header.scrolled .header__logo img,
.header.scrolled .header__logo .custom-logo {
transform: scale(0.85);
transform-origin: left center;
transition: transform var(--duration-normal) var(--ease-out-quart);
}
/* On mobile: when scrolled, hide the full header bar and keep only a compact
burger top-right with a soft white circular backdrop so it reads over any
page content. */
@media (max-width: 1024px) {
.header.scrolled {
background-color: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
pointer-events: none;
}
.header.scrolled .header__logo {
opacity: 0;
pointer-events: none;
transition: opacity var(--duration-normal);
}
.header.scrolled .header__burger-btn {
pointer-events: auto;
background-color: #FFFFFF;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
/* When menu is open: kill header chrome and hide header content. Nav is
now a sibling so the header can safely go blank underneath. */
body.nav-open .header {
background-color: #FFFFFF !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
}
body.nav-open .header__logo,
body.nav-open .header__burger-btn {
visibility: hidden;
}
/* When menu is open, neutralise any transient .scrolled state that could
stick after close (scale / opacity / transparent bg). Guarantees the
header returns to its pre-open look. */
body.nav-open .header.scrolled {
background-color: #FFFFFF !important;
pointer-events: auto;
}
body.nav-open .header.scrolled .header__logo {
opacity: 1;
pointer-events: auto;
}
body.nav-open .header.scrolled .header__logo img,
body.nav-open .header.scrolled .header__logo .custom-logo {
transform: none;
}
body.nav-open .header.scrolled .header__burger-btn {
background-color: transparent;
box-shadow: none;
}
/* Kill focus outline on the logo link inside the open menu and on the
outer burger button after close (closeBurger() calls .focus()). iOS
otherwise paints the browser accent ring around the tapped button. */
.burger-top__logo a,
.burger-top__logo a:focus,
.burger-top__logo a:focus-visible,
.burger-top__logo .custom-logo-link,
.burger-top__logo .custom-logo-link:focus,
.burger-top__logo .custom-logo-link:focus-visible,
.header__burger-btn,
.header__burger-btn:focus,
.header__burger-btn:focus-visible,
.burger-top__btn,
.burger-top__btn:focus,
.burger-top__btn:focus-visible {
outline: none !important;
-webkit-tap-highlight-color: transparent;
}
.burger-top__logo a,
.burger-top__logo .custom-logo-link {
box-shadow: none !important;
border: none !important;
}
/* Don't repaint menu items as accent when scroll-spy marks the matching
section. On the full-screen mobile menu this reads as stuck state. */
.header__menu a.active {
color: var(--text-primary) !important;
}
.header__menu a.active::after {
opacity: 0.35 !important;
color: currentColor !important;
}
}
/* ============================================================
FOOTER 4-COLUMN GRID (P2-WEB — desktop)
============================================================ */
@media (min-width: 1024px) {
.site-footer-bar__main {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
text-align: left;
gap: 2rem;
}
.site-footer-bar__brand {
max-width: none;
text-align: left;
}
.site-footer-bar__nav {
flex-direction: row;
justify-content: flex-end;
gap: 2rem;
text-align: right;
}
.site-footer-bar__social {
text-align: center;
display: block;
}
.site-footer-bar__icons {
justify-content: center;
}
.site-footer-bar__bottom {
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
text-align: left;
}
}
/* ============================================================
CAROUSEL SCROLL INDICATORS (P1 3.1)
============================================================ */
/* Fade gradient hint on mobile */
.stretching__slider::after,
.directions__slider::after,
.meditations__slider::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 100%;
background: linear-gradient(to right, transparent, var(--surface-primary));
pointer-events: none;
z-index: 2;
opacity: 1;
transition: opacity var(--duration-normal);
}
.stretching__slider,
.directions__slider,
.meditations__slider {
position: relative;
}
.stretching {
--carousel-bg: var(--surface-primary);
}
.directions__slider::after {
background: linear-gradient(to right, transparent, var(--surface-primary));
}
.meditations__slider::after {
background: linear-gradient(to right, transparent, var(--surface-primary));
}
/* Hide fade on desktop when all slides visible */
@media (min-width: 1050px) {
.stretching__slider::after,
.meditations__slider::after {
opacity: 0;
}
}
/* Overscroll containment */
.swiper-wrapper {
overscroll-behavior-x: contain;
}
/* ============================================================
SKELETON SCREENS (P3 5.2)
============================================================ */
@keyframes skeleton-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
[class*="image"]:not(.loaded):not(.image-error) {
background: linear-gradient(90deg,
var(--accent-subtle) 25%,
rgba(0, 180, 180, 0.12) 50%,
var(--accent-subtle) 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
min-height: 120px;
border-radius: var(--radius-md);
}
/* ============================================================
VIEW TRANSITIONS API (P3 5.4)
============================================================ */
@view-transition {
navigation: auto;
}
/* ============================================================
SCROLL-DRIVEN ANIMATIONS (P3 5.5)
============================================================ */
@supports (animation-timeline: scroll()) {
@keyframes parallax-scroll {
from { transform: translateY(0); }
to { transform: translateY(60px); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
.banner__image {
animation: parallax-scroll linear;
animation-timeline: scroll();
animation-range: 0vh 100vh;
}
}
}
/* ============================================================
CONTAINER QUERIES — EXPANDED (P3 5.6)
============================================================ */
.banner__inner {
container-type: inline-size;
container-name: banner-layout;
}
@container banner-layout (min-width: 600px) {
.banner__inner {
flex-direction: row;
}
.banner__info {
flex: 2;
}
.banner__image {
flex: 1;
order: 0;
margin-top: 0;
}
}
@container banner-layout (max-width: 599px) {
.banner__inner {
flex-direction: column;
}
.banner__image {
order: -1;
}
}
.stretching__inner {
container-type: inline-size;
container-name: stretching-layout;
}
/* ============================================================
SUBGRID (P3 5.7)
============================================================ */
@supports (grid-template-rows: subgrid) {
.uniqueness__list {
grid-template-rows: auto;
}
.uniqueness__item {
display: grid;
grid-template-rows: auto auto 1fr;
}
}
/* Safe area insets */
@supports (padding: env(safe-area-inset-top)) {
.header {
padding-top: env(safe-area-inset-top);
}
.footer {
padding-bottom: env(safe-area-inset-bottom);
}
.wrapper {
padding-left: max(clamp(1rem, 0.5rem + 2.5vw, 6.875rem), env(safe-area-inset-left));
padding-right: max(clamp(1rem, 0.5rem + 2.5vw, 6.875rem), env(safe-area-inset-right));
}
}
/* ============================================================
TOUCH DEVICES
============================================================ */
@media (pointer: coarse) {
a, button, [role="button"] {
min-height: 48px;
min-width: 48px;
}
.directions__slider-pagination {
width: 56px;
height: 56px;
}
}
@media (hover: none) {
.stretching__slider .swiper-slide:hover,
.uniqueness__item:hover,
.directions__slider .swiper-slide:hover,
.meditations__slider .swiper-slide:hover {
transform: none;
box-shadow: var(--shadow-card);
}
.banner__image:hover img,
.author__foto-image:hover img,
.footer__image:hover img,
.stretching__slider .swiper-slide:hover .stretching__item-image img,
.directions__slider .swiper-slide:hover .directions__item-image img {
transform: none;
}
}
/* ============================================================
MOBILE STACK OVERRIDE — stretching/meditations stack vertically
(Swiper not initialised for them <900px). Directions remains a
functional swiper on every breakpoint — handled below.
============================================================ */
@media (max-width: 899px) {
/* --- Non-directions carousels → vertical stack --- */
.stretching__slider,
.meditations__slider {
margin-right: 0 !important;
overflow: visible !important;
clip-path: none !important;
}
.stretching__slider .swiper-wrapper,
.meditations__slider .swiper-wrapper {
display: flex !important;
flex-direction: column !important;
gap: 16px;
transform: none !important;
width: 100% !important;
height: auto !important;
align-items: center;
}
.stretching__slider .swiper-slide {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
height: auto !important;
flex-shrink: 0 !important;
display: flex !important;
flex-direction: column !important;
}
/* Meditations cards: compact, centred — not full-bleed */
.meditations__slider .swiper-slide {
width: 100% !important;
max-width: 280px !important;
margin: 0 auto !important;
height: auto !important;
flex-shrink: 0 !important;
}
/* Hide carousel-hint gradient on stacked sliders */
.stretching__slider::after,
.meditations__slider::after {
display: none !important;
}
/* If Swiper was initialised before a resize-to-mobile, its loop
clones linger in the DOM. Hide them on stacked mobile sliders. */
.stretching__slider .swiper-slide-duplicate,
.meditations__slider .swiper-slide-duplicate {
display: none !important;
}
/* Disable hover-lift transforms (no mouse) */
.stretching__slider .swiper-slide:hover,
.meditations__slider .swiper-slide:hover,
.uniqueness__item:hover {
transform: none !important;
}
/* --- Directions: remains a real swiper carousel --- */
.directions__slider {
overflow: hidden;
}
.directions__slider .swiper-slide {
height: auto;
display: flex;
flex-direction: column-reverse;
}
.directions__slider::after {
display: none !important;
}
.directions__slider .swiper-slide:hover {
transform: none !important;
}
/* --- Hero: photo on top, text below, no svh tricks --- */
.banner {
min-height: auto !important;
padding: 1rem 0 1.5rem;
}
.banner__inner {
flex-direction: column !important;
max-height: none !important;
gap: 1.25rem;
padding-bottom: 0;
}
.banner__image {
order: -1 !important;
align-self: stretch !important;
max-height: 60vh !important;
width: 100% !important;
flex: none !important;
margin: 0 !important;
}
.banner__image::after {
display: none;
}
.banner__img {
width: 100% !important;
height: auto !important;
max-height: 60vh !important;
object-fit: cover;
object-position: center 20%;
}
.banner__info {
flex: none !important;
width: 100%;
}
.banner__br {
display: none !important;
}
/* --- Author section: stack photo and text --- */
.author__inner {
flex-direction: column !important;
align-items: stretch !important;
}
.author__content {
order: 2;
}
.author__foto {
order: 1;
}
.author__foto-image {
max-width: 320px;
margin: 0 auto;
}
.author__autograph {
position: relative !important;
width: 160px;
max-width: 160px;
bottom: auto !important;
left: auto !important;
right: auto !important;
margin: 0 auto;
}
/* --- Meditations content: stack phone image and text column --- */
.meditations__content {
flex-direction: column !important;
align-items: stretch !important;
gap: 1.5rem;
}
.meditations__content-img {
max-width: 220px !important;
margin: 0 auto;
align-self: center !important;
}
.meditations__content-img::before {
display: none;
}
/* --- Mobdev image fits viewport --- */
.mobdev__content-img {
max-width: 100% !important;
}
.mobdev__img {
width: 100%;
height: auto;
}
/* --- Uniqueness list: 1 column on phones --- */
.uniqueness__list {
grid-template-columns: 1fr !important;
}
/* --- Footer/site-footer-bar: ensure stacking --- */
.footer__inner {
flex-direction: column !important;
gap: 2rem;
}
.footer__image {
max-width: 320px;
margin: 0 auto;
}
.site-footer-bar__main {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 1.25rem;
}
.site-footer-bar__nav {
flex-direction: column !important;
align-items: center !important;
gap: 0.75rem !important;
text-align: center !important;
}
.site-footer-bar__bottom {
flex-direction: column !important;
gap: 0.75rem;
text-align: center;
align-items: center;
}
.site-footer-bar__links {
flex-wrap: wrap;
justify-content: center;
}
}
@media (max-width: 480px) {
.meditations__item-image {
height: 160px;
}
.author__foto-image {
max-width: 320px;
}
}
/* ============================================================
MOBILE POLISH — kill 100vh empty canvas, tighten section rhythm,
repair ligatures & typography for narrow screens
============================================================ */
@media (max-width: 899px) {
/* Full-viewport sections → natural content height. Banner keeps its own rule above. */
.stretching,
.uniqueness,
.directions,
.meditations,
.author,
.footer {
min-height: 0 !important;
display: block !important;
}
.stretching > .wrapper,
.uniqueness > .wrapper,
.directions > .wrapper,
.meditations > .wrapper,
.author > .wrapper,
.footer > .wrapper {
min-height: 0 !important;
padding-top: clamp(2rem, 1.25rem + 2.5vw, 3rem);
padding-bottom: clamp(2rem, 1.25rem + 2.5vw, 3rem);
}
/* Mobdev — mobile full-viewport fill: title sits in the upper third with
breathing room above, mockup stays vertically centered in remaining space. */
.mobdev {
min-height: 100svh !important;
display: flex !important;
align-items: stretch !important;
}
.mobdev > .wrapper {
min-height: auto !important;
justify-content: flex-start !important;
padding-top: clamp(5rem, 3rem + 8vw, 9rem);
padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
flex: 1;
}
.mobdev__inner {
flex: 1;
}
.mobdev__content-img {
margin-top: auto;
margin-bottom: auto;
}
/* Desktop title lift breaks mobile rhythm — cancel on phones. */
.directions__title,
.meditations__title,
.mobdev__title,
.footer__title,
.author__title {
transform: none !important;
}
/* Directions: title was absolutely positioned on desktop, slider-wrap had 100px gap. */
.directions__title-inner {
position: static !important;
text-align: left;
margin-bottom: 0;
}
.directions__slider-wrap {
margin-top: clamp(1.25rem, 1rem + 1vw, 2rem) !important;
}
.directions__desc {
font-size: var(--text-base) !important;
margin-top: 0.5rem !important;
line-height: 1.35;
}
/* Mobdev: kill stray negative margin that only made sense on desktop. */
.mobdev__inner {
gap: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.mobdev__desc {
margin-top: 0 !important;
}
/* Meditations cards: taller image, softer scrim, centred crop. */
.meditations__slider .swiper-wrapper {
gap: 12px !important;
}
.meditations__item-image {
height: clamp(130px, 22vw, 170px);
}
.meditations__item-img {
object-position: center;
}
.meditations__item-title {
padding: 10px 12px 24px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 70%);
font-size: clamp(0.7rem, 0.6rem + 0.5vw, 0.85rem);
}
.meditations__item-text {
padding: 10px 14px 14px;
}
/* Uniqueness: keep card padding compact and kill awkward negative margin on title. */
.uniqueness__title {
margin-top: 0;
}
/* Author: constrain foto, tighten block, reclaim vertical rhythm. */
.author__inner {
gap: 1.5rem;
}
.author__foto {
gap: 12px;
}
.author__foto-image {
max-width: min(360px, 100%);
margin: 0 auto;
}
.author__autograph {
margin-bottom: 4px;
}
.author__foto-about {
padding-top: 0.5rem;
text-align: center;
}
.author__content {
gap: 1rem;
}
/* Footer CTA stack */
.footer__button-list {
align-items: center;
padding-top: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.footer__desc.under {
padding-top: clamp(1.25rem, 1rem + 1vw, 2rem);
}
/* Site-footer-bar: StretchPro font renders "APP" → "AP→" via ligatures.
Kill ligatures on the nav so "APP" reads cleanly. Logo keeps its ligatures
because the STRETCHH / ONN double-letter glyphs are intentional branding. */
.site-footer-bar__nav a {
font-feature-settings: "kern" 1, "liga" 0, "dlig" 0, "calt" 0;
padding: 4px 0;
min-height: 32px;
font-size: 0.78rem;
letter-spacing: 0.04em;
}
.site-footer-bar__nav {
gap: 2px !important;
}
.site-footer-bar__social {
padding: 1.25rem 0 1rem;
}
.site-footer-bar__label {
font-size: 0.7rem;
margin-bottom: 0.6rem;
letter-spacing: 0.2em;
}
.site-footer-bar__icons {
gap: 1rem;
}
.site-footer-bar__main {
padding: 1.25rem 0;
gap: 0.75rem;
}
.site-footer-bar__brand {
margin-bottom: 0.25rem;
}
.site-footer-bar__logo {
font-size: 1.25rem;
}
.site-footer-bar__tagline {
margin-top: 0.4rem;
font-size: 0.78rem;
line-height: 1.4;
}
.site-footer-bar__bottom {
padding: 0.9rem 0 1rem;
font-size: 0.7rem;
gap: 0.4rem !important;
}
.site-footer-bar__links {
gap: 0.85rem !important;
}
.site-footer-bar__links a {
font-size: 0.7rem;
}
}
/* ============================================================
DIRECTIONS SLIDER — mobile arrows + base pagination styling
Prev arrow mirrors the existing next button.
============================================================ */
.directions__slider-prev {
position: absolute;
right: auto;
left: calc(50% - 56px);
bottom: 0;
top: auto;
width: 48px;
height: 48px;
background-color: var(--color-black);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
border: none;
padding: 0;
cursor: pointer;
transition: background-color var(--duration-fast),
transform var(--duration-fast),
opacity var(--duration-fast);
}
.directions__slider-prev svg {
color: var(--color-white);
}
.directions__slider-prev:hover {
background-color: var(--color-white);
transform: scale(1.08);
}
.directions__slider-prev:hover svg {
color: var(--color-black);
}
.directions__slider-prev:active {
transform: scale(0.95);
}
.directions__slider-prev.swiper-button-disabled,
.directions__slider-next.swiper-button-disabled {
opacity: 0.3;
pointer-events: none;
}
/* Mobile: arrows below the slider, centered */
@media (max-width: 899px) {
.directions__slider-wrap {
padding-bottom: 64px;
}
.directions__slider-prev,
.directions__slider-next {
display: flex !important;
position: absolute;
top: auto;
bottom: 0;
width: 44px;
height: 44px;
}
.directions__slider-prev {
right: auto;
left: calc(50% - 52px);
}
.directions__slider-next {
right: auto;
left: calc(50% + 8px);
}
}
/* ============================================================
AUTHOR SECTION — mobile reorder:
1) title → 2) photo → 3) caption → 4) text → 5) signature
DOM has nested wrappers, so we flatten with `display: contents`
and put everything directly under .author__inner in flex order.
============================================================ */
@media (max-width: 899px) {
.author__inner {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
}
.author__content,
.author__foto {
display: contents;
}
.author__title {
order: 1;
text-align: left;
margin-bottom: 0;
}
.author__foto-image {
order: 2;
max-width: min(360px, 100%);
margin: clamp(1rem, 0.75rem + 1vw, 1.75rem) auto clamp(1rem, 0.75rem + 1vw, 1.75rem);
}
.author__text {
order: 3;
}
.author__foto-about {
order: 4;
max-width: 36ch;
margin: clamp(1rem, 0.75rem + 0.75vw, 1.5rem) auto 0;
text-align: center;
padding-top: 0;
font-weight: 500;
color: var(--text-primary);
}
.author__autograph {
order: 5;
position: relative !important;
width: 180px;
max-width: 180px;
bottom: auto !important;
left: auto !important;
right: auto !important;
margin: -1.75rem auto 0;
z-index: 2;
pointer-events: none;
}
}
/* ============================================================
FOOTER (download CTA) — enterprise spacing on mobile
============================================================ */
@media (max-width: 899px) {
.footer__info {
width: 100%;
align-items: center;
}
.footer__info.indent {
padding-top: clamp(0.5rem, 0.25rem + 0.75vw, 1rem);
}
.footer__title {
text-align: center;
padding-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}
.footer__desc.above {
padding-top: 0;
padding-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
max-width: 36ch;
margin: 0 auto;
}
.footer__button-list {
padding-top: 0 !important;
padding-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
align-items: center;
gap: 14px;
}
.footer__desc.under {
padding-top: 0 !important;
padding-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
max-width: 34ch;
margin: 0 auto;
}
.footer__image {
max-width: min(360px, 100%);
margin: 0 auto;
}
}
/* ============================================================
AUTHOR SECTION — desktop two-column grid.
Left column stacks: title → text → autograph → caption
Right column: photo (spans full height)
DOM has nested wrappers, so we flatten with `display: contents`.
============================================================ */
@media (min-width: 900px) {
/* Consistent top padding across every middle section.
Banner (first screen) and Footer (download screen) keep their own rhythm. */
.stretching > .wrapper,
.uniqueness > .wrapper,
.directions > .wrapper,
.meditations > .wrapper,
.mobdev > .wrapper,
.author > .wrapper {
justify-content: flex-start;
padding-top: var(--section-padding-y);
padding-bottom: var(--section-padding-y);
}
/* Directions title was absolutely positioned — put it back in flow
so its top spacing matches the rest of the page. */
.directions__title-inner {
position: static;
top: auto;
left: auto;
right: auto;
text-align: center;
}
.directions__slider-wrap {
margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}
.directions__title,
.meditations__title,
.mobdev__title,
.footer__title,
.author__title {
transform: none;
}
.author__inner {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
column-gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
row-gap: 0;
align-items: start;
}
.author__content,
.author__foto {
display: contents;
}
.author__title {
grid-column: 1;
}
.author__text {
grid-column: 1;
padding-top: clamp(1rem, 0.75rem + 1vw, 1.75rem);
}
.author__foto-image {
grid-column: 2;
grid-row: 1 / span 4;
align-self: stretch;
max-width: 100%;
}
.author__autograph {
grid-column: 1;
position: relative;
bottom: auto;
left: auto;
right: auto;
max-width: 220px;
margin: clamp(1.25rem, 1rem + 1vw, 2rem) 0 0 0;
z-index: 2;
pointer-events: none;
}
.author__foto-about {
grid-column: 1;
margin-top: -1.25rem;
padding-left: clamp(5rem, 4rem + 2vw, 8rem);
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.5;
position: relative;
z-index: 1;
}
}
/* Narrow phones — one more pass on the hero title to stop orphaned words. */
@media (max-width: 420px) {
.banner__title {
font-size: clamp(1.15rem, 0.9rem + 2.5vw, 1.6rem);
line-height: 1.18;
word-break: keep-all;
overflow-wrap: anywhere;
}
.banner__desc {
font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.05rem);
line-height: 1.4;
}
.banner__image {
max-height: 50vh !important;
}
.banner__img {
max-height: 50vh !important;
}
}
/* ============================================================
PREFERS REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.banner__image {
transform: none !important;
}
[data-reveal] {
opacity: 1 !important;
transform: none !important;
}
.mobdev__content-img img {
animation: none !important;
}
.btn {
animation: none !important;
}
.skeleton-loader,
[class*="image"]:not(.loaded) {
animation: none !important;
background: var(--accent-subtle);
}
}
/* ============================================================
PRINT
============================================================ */
@media print {
.header,
.back-to-top,
.scroll-progress,
.mobile-sticky-cta,
.swiper-pagination,
.directions__slider-pagination {
display: none !important;
}
body,
.stretching,
.meditations,
.mobdev,
.footer,
.author {
background-color: white !important;
color: black !important;
}
[data-reveal] {
opacity: 1 !important;
transform: none !important;
}
.uniqueness__item,
.stretching__slider .swiper-slide,
.directions__slider .swiper-slide,
.meditations__slider .swiper-slide {
box-shadow: none !important;
border: 1px solid #ccc !important;
break-inside: avoid;
}
img {
max-width: 100% !important;
page-break-inside: avoid;
}
.swiper-wrapper {
display: flex !important;
flex-wrap: wrap !important;
transform: none !important;
}
.swiper-slide {
flex: 0 0 48% !important;
margin: 1% !important;
}
a[href]::after {
content: " (" attr(href) ")";
font-size: 0.8em;
color: #666;
}
.btn {
background: none !important;
color: black !important;
border: 2px solid black !important;
box-shadow: none !important;
}
.wrapper {
max-width: 100% !important;
padding: 0 20px !important;
}
section {
page-break-inside: avoid;
}
h2, h3 {
page-break-after: avoid;
}
}