:root { --ink: #292622; --cream: #fffaf1; --peach: #f7c9aa; --coral: #ee8068; --rose: #f6ddd5; --sage: #b9cbb3; --yellow: #f5dc8d; --blue: #cfe3e4; --muted: #776f68; --line: #decfc2; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 16px/1.65 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; } a:hover { color: var(--coral); } p { margin-top: 0; } img { display: block; max-width: 100%; }
.site-header, main, footer { max-width: 1240px; margin: auto; padding-left: 34px; padding-right: 34px; }
.site-header { display: flex; align-items: center; gap: 30px; padding-top: 28px; position: relative; z-index: 2; } .wordmark { font-family: Georgia, serif; font-size: 1.3rem; text-decoration: none; letter-spacing: -.04em; } .wordmark span { color: var(--coral); } nav { display: flex; gap: 30px; margin-left: auto; } nav a { color: var(--muted); font-size: .88rem; text-decoration: none; } .header-cta { background: var(--ink); color: var(--cream); padding: 9px 15px; text-decoration: none; font-size: .82rem; } .header-cta span, .button span { margin-left: 9px; }
.hero { min-height: 700px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 6vw; padding: 85px 6vw 105px; position: relative; } .hero-copy { position: relative; z-index: 1; } .eyebrow { color: #ba6554; font-size: .7rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; } h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; } h1 { font-size: clamp(4.4rem, 9vw, 8.6rem); line-height: .86; letter-spacing: -.085em; margin: 22px 0 32px; } h1 em, h2 em { color: var(--coral); font-style: normal; } .hero-lede { color: var(--muted); font-size: 1.16rem; max-width: 570px; } .hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 25px; margin-top: 35px; } .button { display: inline-block; font-weight: 750; padding: 13px 18px; text-decoration: none; } .button-coral { background: var(--coral); color: #fffaf1; } .button-coral:hover { background: var(--ink); color: var(--cream); } .button-ink { background: var(--ink); color: var(--cream); } .button-ink:hover { background: var(--cream); color: var(--ink); } .text-link { border-bottom: 1px solid var(--coral); text-decoration: none; }
.hero-portrait { background: var(--rose); height: min(560px, 45vw); min-height: 400px; max-width: 500px; overflow: hidden; position: relative; transform: rotate(2deg); } .hero-portrait img { height: 100%; object-fit: cover; object-position: center; position: relative; width: 100%; } .sun-disc { background: var(--yellow); border-radius: 50%; height: 150px; position: absolute; right: -35px; top: -30px; width: 150px; z-index: 0; } .portrait-caption { background: var(--cream); bottom: 20px; font-family: Georgia, serif; font-size: 1rem; left: 20px; line-height: 1.15; padding: 11px 15px; position: absolute; transform: rotate(-2deg); } .hero-stamp { align-items: center; background: var(--sage); border-radius: 50%; bottom: 100px; display: flex; flex-direction: column; height: 145px; justify-content: center; position: absolute; right: -15px; text-align: center; transform: rotate(10deg); width: 145px; } .hero-stamp span { font-size: 1.6rem; } .hero-stamp small { font-family: Georgia, serif; line-height: 1.1; }
.marquee { align-items: center; background: var(--ink); color: var(--cream); display: flex; gap: 30px; justify-content: space-around; margin: 0 -34px; padding: 20px 50px; text-transform: uppercase; letter-spacing: .13em; font-size: .69rem; } .marquee b { color: var(--peach); font-size: 1rem; }
.section { padding: 120px 0; } .section-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: end; margin-bottom: 52px; } h2 { font-size: clamp(3rem, 6vw, 5.9rem); letter-spacing: -.075em; line-height: .9; margin: 12px 0 0; } .section-intro > p:last-child { color: var(--muted); font-size: 1.04rem; max-width: 420px; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 19px; } .service { min-height: 590px; display: flex; flex-direction: column; } .service img { height: 235px; object-fit: cover; width: 100%; } .service > div { flex: 1; padding: 25px 27px 28px; } .service-birth { background: var(--peach); } .service-class { background: var(--sage); } .service-yoga { background: var(--blue); } .service-number { color: var(--muted); font-size: .75rem; } .service h3 { font-size: 2.25rem; letter-spacing: -.06em; line-height: 1; margin: 38px 0 16px; } .service p { color: #625a53; } .service a { border-bottom: 1px solid currentColor; font-size: .85rem; font-weight: 700; text-decoration: none; }
.class-callout { background: var(--yellow); margin: 0 -34px; overflow: hidden; padding: 115px max(34px, 8vw); position: relative; } .class-copy { max-width: 620px; position: relative; z-index: 1; } .class-copy h2 { max-width: 550px; } .class-copy > p:not(.eyebrow) { color: #665b49; font-size: 1.08rem; max-width: 520px; margin: 28px 0 32px; } .class-note { background: var(--cream); bottom: 85px; max-width: 330px; padding: 27px; position: absolute; right: 11vw; transform: rotate(5deg); z-index: 1; } .class-note span { color: var(--coral); font-family: Georgia, serif; font-size: 4rem; line-height: .4; } .class-note p { font-family: Georgia, serif; font-size: 1.35rem; line-height: 1.2; margin: 15px 0 0; } .class-shape { border: 1px solid rgba(41,38,34,.18); border-radius: 50%; position: absolute; } .shape-one { height: 490px; right: -90px; top: -135px; width: 490px; } .shape-two { background: var(--coral); border: 0; bottom: -210px; height: 430px; left: 38%; opacity: .45; width: 430px; }
.about-section { display: grid; grid-template-columns: .78fr 1.22fr; gap: 9vw; align-items: center; } .about-photo { background: var(--rose); max-width: 380px; padding: 22px 22px 0; position: relative; transform: rotate(-2deg); } .about-photo img { filter: saturate(.9); height: 430px; object-fit: cover; width: 100%; } .about-photo span { display: block; font-family: Georgia, serif; font-size: 1.05rem; line-height: 1.1; padding: 18px 2px 22px; } .about-copy { max-width: 590px; } .about-copy > p:not(.eyebrow) { color: var(--muted); font-size: 1.08rem; } .values { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .values span { border: 1px solid var(--line); border-radius: 50px; color: #8b584e; font-size: .76rem; padding: 7px 12px; }
.connect-section { align-items: end; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; padding: 100px 0; } .connect-section > div:last-child { color: var(--muted); max-width: 420px; } .connect-section .button { margin-top: 13px; }
footer { border-top: 1px solid var(--line); display: flex; font-size: .78rem; gap: 25px; justify-content: space-between; padding-bottom: 42px; padding-top: 25px; } footer a { color: var(--coral); text-decoration: none; }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; padding-top: 70px; } .hero-portrait { height: 540px; max-width: 520px; width: 90%; } .hero-stamp { right: 0; } .section-intro, .about-section, .connect-section { grid-template-columns: 1fr; gap: 25px; } .service-grid { grid-template-columns: 1fr 1fr; } .service-yoga { grid-column: span 2; } .class-note { bottom: 40px; right: 7vw; } }
@media (max-width: 560px) { .site-header { flex-wrap: wrap; } nav { margin-left: auto; order: 3; width: 100%; justify-content: space-between; } .site-header, main, footer { padding-left: 20px; padding-right: 20px; } .hero { padding-left: 0; padding-right: 0; } h1 { font-size: clamp(3.7rem, 17vw, 6rem); } .marquee, .class-callout { margin-left: -20px; margin-right: -20px; } .marquee { flex-wrap: wrap; gap: 10px 18px; justify-content: center; } .marquee b { display: none; } .service-grid { grid-template-columns: 1fr; } .service-yoga { grid-column: auto; } .service { min-height: 0; } .class-callout { padding: 90px 20px 290px; } .class-note { bottom: 55px; left: 20px; right: auto; } footer { display: block; } footer span, footer a { display: block; margin-top: 8px; } }