@font-face { font-family: Nohemi; src: url('assets/fonts/Nohemi-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: Nohemi; src: url('assets/fonts/Nohemi-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: Nohemi; src: url('assets/fonts/Nohemi-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } :root{--cream:#fff3e1;--brown:#5c473d;--ink:#27272b;--muted:#71717b}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:Nohemi,Arial,sans-serif}main{width:100%;max-width:810px;margin:auto;overflow:hidden;container-type:inline-size}h1,h2,p{margin:0}h1,h2{font-family:Nohemi,Arial,sans-serif;font-weight:400}button{font:inherit;cursor:pointer}button:focus-visible,.gallery:focus-visible{outline:3px solid #a67c65;outline-offset:5px}.hero{height:133.4568cqw;position:relative}.hero-photo{position:absolute;inset:0;overflow:hidden}.hero-photo img{position:absolute;width:176.42%;height:165.18%;left:-38.21%;top:-22.11%;max-width:none}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50.046%,rgba(19,19,22,.65))}.signature{position:absolute;z-index:1;left:11.9753%;top:67.9001%;width:75.9259%;height:27.9371%;object-fit:cover}.ticker{background:var(--brown);color:snow;padding:3.9506cqw 0;overflow:hidden;font-size:2.963cqw;line-height:1}.ticker>div{display:flex;align-items:center;justify-content:center;gap:3.9506cqw;width:max-content;transform:translateX(-12cqw)}.ticker span{white-space:nowrap}.intro{padding:7.9012cqw 5.9259cqw 0;min-height:119.5062cqw}.intro-heading{display:flex;flex-direction:column;gap:1.9753cqw}.tag{display:inline-flex;align-items:center;justify-content:center;border:1px solid #7a6660;border-radius:99px;background:#7a6660c7;color:#fcfcfc;font-size:1.9753cqw;line-height:1;padding:.9877cqw 1.9753cqw}.intro-heading>.tag{margin-bottom:1.7284cqw}h1,.help h2,.social h2{font-size:5.9259cqw;line-height:1.2;letter-spacing:.1185cqw}.intro p{font-size:3.9506cqw;line-height:1;color:var(--muted)}.gallery{display:flex;gap:2.4691cqw;overflow-x:auto;scroll-snap-type:x mandatory;margin:5.9259cqw -5.9259cqw 5.9259cqw 0;padding:0 5.9259cqw 1cqw 0;scrollbar-width:none}.gallery::-webkit-scrollbar{display:none}.gallery-photo{position:relative;flex:0 0 55.5556cqw;height:41.7284cqw;border:1px solid #a67c65;border-radius:3.9506cqw;box-shadow:.3704cqw .7407cqw #70564a;overflow:hidden;scroll-snap-align:start}.gallery-photo img{position:absolute;width:106.89%;height:253%;left:-3.45%;top:-93.65%;max-width:none}.gallery-photo.second img{top:-91.09%}.help>.tag{margin-bottom:3.7037cqw}.help h2{margin-bottom:1.9753cqw}.help p{max-width:75.0617cqw}.cards{padding:7.9012cqw 5.9259cqw;display:flex;flex-direction:column;gap:4.9383cqw}.card{position:relative;isolation:isolate;border:.4938cqw solid #70564a;border-radius:2.4691cqw;box-shadow:0 1.4815cqw #473a33;min-height:110.6173cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.7037cqw;padding:4.5cqw 5.679cqw;background:linear-gradient(#795548 0%,#a67c65 15.056%,#d2b49c 30.056%,#fdf3e8 50.056%,#fff3e1 67.056%)}.card:before{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;background:none;opacity:0}.card-image{width:100%;height:53.0864cqw;position:relative;overflow:hidden;border:1px solid #70564a;border-radius:3.4568cqw}.card-image>img{width:100%;height:100%;object-fit:cover}.card-image.portrait img{position:absolute;left:-10.03%;top:-33.6%;width:113.77%;height:203%;max-width:none}.card-copy{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.8519cqw}.card h2{font-size:5.9259cqw;line-height:1;color:#7c5760}.card em{font-style:normal;color:transparent;background:linear-gradient(90deg,#6b1f03,#c4824c);background-clip:text}.card p{font-family:Nohemi,Arial,sans-serif;font-size:3.0864cqw;font-weight:300;line-height:1;letter-spacing:.2469cqw;color:var(--muted);max-width:69.1358cqw}.cta{width:100%;border:1px solid #4326087a;border-radius:900px;padding:2.5102cqw 0;color:snow;background:linear-gradient(90deg,#5c473d,#70564a);box-shadow:0 .4938cqw #453027;font-family:Nohemi,Arial,sans-serif;font-size:3.0864cqw;line-height:1;display:flex;align-items:center;justify-content:center;gap:1.2346cqw}.cta img{flex:none}.cta:hover{filter:brightness(1.08)}.cta:active{transform:translateY(2px)}.homecare{border-color:#575656;box-shadow:0 1.4815cqw #333231;background:linear-gradient(#7b7b7b,#b1b1b1 15.056%,#cdcdcd 30.056%,#fdf3e8 50.056%,#fff3e1 67.056%)}.homecare em{background-image:linear-gradient(90deg,#505050,#868584)}.homecare p,.method p{max-width:71.8519cqw}.homecare .cta{background:linear-gradient(90deg,#5f636c,#9699a8);box-shadow:0 .4938cqw #4e4c4b}.method{border-color:#f6839f;box-shadow:0 1.4815cqw #cc4f74;background:linear-gradient(#ef8fae,#f3a9c0 15.056%,#f7c5d5 30.056%,#fce3eb 50.056%,#fff3e1 67.056%)}.method em{background-image:linear-gradient(90deg,#d34b75,#e96388)}.method .cta{background:linear-gradient(90deg,#d55379,#f29eae);border-color:#ed6b8d;box-shadow:0 .4938cqw #ce5176;cursor:default}.social{padding:5.9259cqw;display:flex;flex-direction:column;align-items:center;gap:3.7037cqw}.green{color:#20b202;background:#dbffd4;border-color:#bfffb2}.social h2{text-align:center;margin-top:-.7407cqw}.social-box{width:86.4198cqw;max-width:100%;height:20.9877cqw;padding:2.4691cqw 1.6461cqw;border:.6173cqw solid var(--brown);border-radius:3.7037cqw;background:#f8ead9;box-shadow:0 .6678cqw .1235cqw #4a3124,0 1.2019cqw #432608,inset 0 1.469cqw 1.9964cqw #7768425c;display:flex;flex-direction:column;justify-content:center;gap:1.8519cqw}.social-box>div{display:flex;gap:.9877cqw}.social-box button{display:flex;align-items:center;justify-content:center;gap:.6cqw;min-width:0;flex:1;width:100%;height:5.3086cqw;padding:0;border:1px solid #70564a;border-radius:900px;background:#f8ead9;box-shadow:0 .4938cqw #70564a;color:var(--brown);font-size:1.6049cqw;font-weight:600}.social-box img{flex:none}footer{padding:3.9506cqw 9.8765cqw;background:var(--brown);color:#fcfcfc;display:flex;align-items:center;justify-content:space-between;font-family:Nohemi,Arial,sans-serif;font-size:1.9753cqw}footer p{line-height:1.36}footer div{display:flex;gap:.6173cqw;align-items:center}footer img{width:9.1358cqw;height:1.4815cqw;object-fit:cover}dialog{max-width:85vw;border:1px solid var(--brown);border-radius:16px;padding:24px;background:var(--cream);color:var(--brown)}dialog::backdrop{background:#0008}dialog button{margin-top:20px;padding:10px 24px;border:0;border-radius:30px;background:var(--brown);color:white}@media(min-width:811px){body{background:#e8dccb}} main { overflow: clip; } .ticker > .ticker-track { gap: 0; justify-content: flex-start; transform: none; animation: ticker-scroll 24s linear infinite; will-change: transform; } .ticker-group { display: flex; flex: none; align-items: center; gap: 3.9506cqw; padding-right: 3.9506cqw; } @keyframes ticker-scroll { to { transform: translateX(-50%); } } .intro-heading > .tag { align-self: flex-start; } .cards { position: relative; isolation: isolate; } .card { position: sticky; top: var(--card-top, 24px); flex-shrink: 0; } .card:nth-child(1) { z-index: 1; } .card:nth-child(2) { z-index: 2; } .card:nth-child(3) { z-index: 3; } .signature { transform-origin: center; animation: signature-pulse 4s ease-in-out infinite; } @keyframes signature-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.055); opacity: .88; } } .gallery { cursor: grab; touch-action: pan-x pan-y; } .gallery.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; } .gallery img { pointer-events: none; user-select: none; -webkit-user-drag: none; } .cards .cta { position: relative; overflow: hidden; isolation: isolate; } .cards .cta::after { content: ""; position: absolute; inset: -60% auto -60% -55%; width: 35%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-22deg); pointer-events: none; } .cards .cta:hover::after, .cards .cta:focus-visible::after, .cards .cta:active::after { animation: button-shine .8s ease-out both; } @keyframes button-shine { from { left: -55%; } to { left: 125%; } } @media (prefers-reduced-motion: reduce) { .ticker > .ticker-track, .signature { animation: none; } .signature { clip-path: none; } .card { position: relative; top: auto; } } @media (prefers-reduced-motion: reduce) { .cards .cta::after { animation: none; display: none; } } main { overflow: visible; } .ticker, main > footer { width: var(--viewport-width, 100vw); margin-inline: calc((100% - var(--viewport-width, 100vw)) / 2); } .ticker-group { min-width: var(--viewport-width, 100vw); justify-content: space-around; } main > footer { padding-inline: max(9.8765cqw, calc((var(--viewport-width, 100vw) - 650px) / 2)); } .social-box button { position: relative; transition: transform .18s ease, filter .18s ease; transform-origin: center; } .social-box button:hover, .social-box button:focus-visible, .social-box button:active { transform: scale(1.025); filter: brightness(1.035); z-index: 1; } @media (prefers-reduced-motion: reduce) { .social-box button { transition: none; } } html { scroll-behavior: smooth; scroll-padding-top: 24px; } .ticker-group { min-width: 0; justify-content: flex-start; } .ticker > .ticker-track { animation-duration: var(--ticker-duration, 24s); } .reveal { transition: opacity .7s ease, translate .7s ease; } .reveal.is-pending { opacity: 0; translate: 0 22px; } @media (min-width: 960px) { body { background: var(--cream); } main { max-width: 1280px; display: block; } .hero { width: 810px; max-width: 100%; height: 1081px; margin-inline: auto; } .intro { min-height: 0; padding: 72px 40px 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 56px 48px; align-items: center; } .intro-heading { gap: 18px; } .tag { font-size: 13px; padding: 8px 14px; } .intro-heading > .tag { margin-bottom: 8px; } h1 { font-size: clamp(36px, 3vw, 46px); line-height: 1.15; letter-spacing: .5px; } .intro p { font-size: 21px; line-height: 1.4; } .gallery { min-width: 0; gap: 20px; margin: 0; padding: 0 8px 8px 0; } .gallery-photo { flex-basis: 80%; height: auto; aspect-ratio: 450/338; border-radius: 24px; box-shadow: 3px 6px #70564a; } .help { grid-column: 1/-1; text-align: center; } .help > .tag { margin-bottom: 20px; } .help h2 { font-size: 40px; letter-spacing: .5px; margin-bottom: 16px; } .help p { max-width: 620px; margin-inline: auto; } .ticker { font-size: 18px; padding-block: 23px; } .ticker-group { gap: 32px; padding-right: 32px; } .cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 40px 40px 72px; gap: 24px; align-items: stretch; } .card { position: relative; top: auto; min-width: 0; min-height: 540px; border-width: 3px; border-radius: 18px; padding: 24px; gap: 24px; justify-content: flex-start; box-shadow: 0 8px #473a33; } .homecare { box-shadow: 0 8px #333231; } .method { box-shadow: 0 8px #cc4f74; } .card-image { width: 100%; height: auto; aspect-ratio: 614/430; border-radius: 16px; flex-shrink: 0; } .card-copy { gap: 16px; } .card h2 { font-size: 27px; line-height: 1.15; } .card p { font-size: 16px; line-height: 1.4; letter-spacing: .4px; max-width: 100%; } .cta { margin-top: auto; min-height: 48px; padding: 14px 6px; font-size: 14px; gap: 8px; box-shadow: 0 4px #453027; } .homecare .cta { box-shadow: 0 4px #4e4c4b; } .method .cta { box-shadow: 0 4px #ce5176; } .social { padding: 24px 40px 72px; gap: 24px; } .social h2 { font-size: 42px; line-height: 1.2; letter-spacing: .5px; margin: 0; } .social-box { width: 700px; height: 170px; border-width: 5px; border-radius: 30px; padding: 20px 14px; gap: 15px; box-shadow: 0 5px 1px #4a3124,0 9px #432608,inset 0 12px 16px #7768425c; } .social-box > div { gap: 8px; } .social-box button { height: 43px; font-size: 13px; gap: 5px; box-shadow: 0 4px #70564a; } main > footer { font-size: 14px; padding: 28px max(40px,calc((var(--viewport-width,100vw) - 1200px)/2)); } footer div { gap: 6px; } footer img { width: 74px; height: 12px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { transition: none; } .reveal.is-pending { opacity: 1; translate: none; } } .gallery { --fade-left: 0px; --fade-right: 0px; --gallery-fade-size: clamp(24px, 6vw, 48px); -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent); } .gallery.has-content-left { --fade-left: var(--gallery-fade-size); } .gallery.has-content-right { --fade-right: var(--gallery-fade-size); } .creator-link { display: inline-flex; align-items: center; border-radius: 2px; } .creator-link:focus-visible { outline: 2px solid #fff3e1; outline-offset: 5px; } .hero-photo img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% top; } .hero::after { background: linear-gradient(to bottom, transparent 50.046%, rgba(19,19,22,.65) 100%); } @media (min-width: 960px) { .hero { width: var(--viewport-width,100vw); max-width: none; height: clamp(560px,41.8605vw,1100px); margin-inline: calc((100% - var(--viewport-width,100vw))/2); } .hero-photo img { object-position: center top; } .hero .signature { --signature-width: clamp(320px,25vw,560px); width: var(--signature-width); height: auto; aspect-ratio: 615/302; object-fit: contain; left: calc(50% - var(--signature-width)/2); top: auto; bottom: 4%; } } main { --text-gap: clamp(12px, 1.9753cqw, 16px); --content-gap: clamp(20px, 2.963cqw, 24px); } .intro-heading { gap: var(--text-gap); } .intro-heading > .tag { margin-bottom: 0; } .help { display: flex; flex-direction: column; align-items: flex-start; gap: var(--text-gap); } .help > .tag, .help h2 { margin-bottom: 0; } .card-copy { gap: var(--text-gap); } .card h2 { line-height: 1.15; } .card p, .intro p { line-height: 1.35; } .social { gap: var(--text-gap); } .social h2 { margin-top: 0; } .social-box { margin-top: calc(var(--content-gap) - var(--text-gap)); } @media (min-width: 960px) { .help { align-items: center; } .card h2 { min-height: 3.45em; align-content: center; } } .method .cta { cursor: pointer; } body.modal-open { overflow: hidden; } dialog.coming-soon { width: min(520px,calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; overflow-y: auto; border: 3px solid #f6839f; border-radius: 24px; background: linear-gradient(#ef8fae,#fce3eb 55%,#fff3e1); box-shadow: 0 8px #cc4f74,0 24px 80px #43260840; color: #7c5760; } .coming-soon::backdrop { background: #30232bb3; backdrop-filter: blur(5px); } .coming-soon .modal-close { position: absolute; z-index: 1; top: 12px; right: 12px; margin: 0; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid #ed6b8d; border-radius: 50%; background: #fff3e1; color: #b83f67; font-size: 32px; line-height: 1; box-shadow: 0 3px #ce5176; } .modal-art { display: block; width: 100%; height: auto; aspect-ratio: 1672/941; object-fit: cover; } .modal-copy { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px; text-align: center; } .modal-label { font-size: 11px; letter-spacing: 1.5px; color: #b83f67; } .modal-copy h2 { font-size: clamp(25px,5vw,32px); line-height: 1.15; color: #b83f67; } .modal-copy p { font-size: 16px; line-height: 1.5; } .coming-soon .modal-dismiss { width: 100%; margin: 8px 0 0; padding: 16px; border: 1px solid #ed6b8d; border-radius: 99px; background: linear-gradient(90deg,#d55379,#f29eae); box-shadow: 0 4px #ce5176; color: white; font-size: 14px; } .coming-soon button:hover { filter: brightness(1.06); } .coming-soon button:focus-visible { outline: 3px solid #b83f67; outline-offset: 3px; } @media (min-width: 600px) and (max-width: 959px) { body { background: var(--cream); } .hero { width: var(--viewport-width,100vw); max-width: none; height: clamp(440px,70vw,670px); margin-inline: calc((100% - var(--viewport-width,100vw))/2); } .hero-photo img { object-position: 54% top; } .hero .signature { --signature-width: min(50vw,420px); width: var(--signature-width); height: auto; aspect-ratio: 615/302; object-fit: contain; left: calc(50% - var(--signature-width)/2); top: auto; bottom: 4%; } } .social-box { height: auto; min-height: 0; padding: clamp(12px,2.4691cqw,20px); gap: clamp(10px,1.8519cqw,15px); } .social-box > button { flex: none; } .social-box button { min-height: clamp(32px,5.3086cqw,43px); font-size: clamp(10px,1.6049cqw,13px); } .social-box [data-link="clinica"] { white-space: normal; padding-inline: 8px; } footer .creator-credit { display: inline-flex; align-items: center; gap: 6px; line-height: 1; } .creator-credit > span { display: block; line-height: 1; } .creator-credit .creator-link { display: flex; align-items: center; line-height: 1; } .creator-credit img { display: block; height: auto; object-fit: contain; } .ticker-group { gap: 0; padding-right: 0; } .ticker-group > span { display: inline-flex; align-items: center; } .ticker-group > span::after { content: '·'; display: inline-block; margin-inline: 2.4691cqw; font-size: 1.2em; line-height: 1; } @media (min-width: 960px) { .ticker-group > span::after { margin-inline: 20px; } } .social-box button { font-family: Nohemi,Arial,sans-serif; font-weight: 500; } .intro-heading > p, .help > p { font-family: Nohemi,Arial,sans-serif; font-weight: 300; } .tag { display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.2; padding-block: .6em; } .gallery-photo.exercise img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; } .tag, .ticker, .cta { font-weight: 500; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } main { --muted: #625e65; } .tag { font-size: .75rem; padding: .65em 1em; background: #806d64; border-color: #806d64; } .ticker { font-size: clamp(.75rem,2.963cqw,1.125rem); } h1, .help h2 { font-size: clamp(1.75rem,5.9259cqw,3rem); line-height: 1.2; } .intro p { font-size: clamp(1rem,3.4cqw,1.5rem); line-height: 1.5; color: var(--muted); } .card h2 { font-size: clamp(1.625rem,5.9259cqw,3rem); line-height: 1.2; } .card p { font-size: clamp(1rem,3.0864cqw,1.375rem); line-height: 1.5; letter-spacing: .025em; color: var(--muted); } .card-image { flex-shrink: 0; } .cta { font-size: 1rem; line-height: 1.3; min-height: 3rem; padding: .9rem .6rem; gap: .5rem; text-align: center; } .homecare .cta { background: linear-gradient(90deg,#555963,#6b6e7b); } .method .cta { background: linear-gradient(90deg,#a52d53,#b83f67); } .method em { background-image: linear-gradient(90deg,#b33f65,#c04b70); } .social h2 { font-size: clamp(1.75rem,5.9259cqw,2.625rem); } .social-box button { font-size: .875rem; min-height: 3rem; height: auto; padding: .7rem .5rem; line-height: 1.3; gap: .4rem; } footer { font-size: .75rem; line-height: 1.5; } .creator-link { min-height: 2.75rem; min-width: 2.75rem; justify-content: center; } footer .creator-credit img { width: 4.625rem; height: auto; } .modal-label { font-size: .75rem; } .modal-copy p { font-size: 1rem; color: #68464f; } .coming-soon .modal-dismiss { font-size: .875rem; min-height: 3rem; background: linear-gradient(90deg,#a52d53,#b83f67); } .coming-soon .modal-close { position: sticky; top: .75rem; float: right; margin: .75rem .75rem -3.5rem 0; } @media (max-width: 959px) { .intro { min-height: 0; } .card { min-height: 0; padding: clamp(1.25rem,4.5cqw,2.5rem) clamp(1.25rem,5.679cqw,2.875rem); gap: 1.5rem; } .card-copy { width: 100%; } .card-copy p { max-width: 100%; } } @media (max-width: 599px) { main > footer { flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding: 1.5rem 1rem; } } @media (min-width: 960px) { h1 { font-size: clamp(2.25rem,3vw,2.875rem); } .help h2 { font-size: 2.5rem; } .intro p { font-size: 1.3125rem; } .card h2 { font-size: 1.6875rem; } .card p { font-size: 1rem; } .card { min-height: 34rem; } .cta { font-size: .9375rem; } main > footer { font-size: .875rem; } } @media (max-height: 500px) and (orientation: landscape) { .hero { height: 85svh; } .hero .signature { width: min(42vw,360px); height: auto; aspect-ratio: 615/302; left: 50%; translate: -50% 0; top: auto; bottom: 4%; } } .cta { overflow-wrap: anywhere; } .social-box > div { flex-wrap: wrap; } .social-box > div > button { flex: 1 1 7rem; min-width: 0; overflow-wrap: anywhere; } .card h2, h1, .help h2, .social h2 { overflow-wrap: anywhere; } .help-section { padding: 7.9012cqw 5.9259cqw 0; } @media (min-width: 960px) { .help-section { padding: 72px 40px 0; } #pilates { padding-top: 0; padding-bottom: 56px; } }