/* ========================================================================== Reforme — intro class landing page Swap brand colors in the :root block below. Nothing else needs editing. ========================================================================== */ /* Sampled from reformeclub.com: white ground, sienna headings and accents, near-black body copy. Their site runs every heading in the sienna. */ :root { --bg: #FFFFFF; /* page background */ --text: #1B1B1B; /* primary text */ --muted: #5E5E5E; /* secondary text, footer */ --accent: #A0522D; /* brand sienna — headings, buttons, highlights */ --accent-text: #FFFFFF; /* text on top of --accent */ --accent-warm: #A0522D; /* stars; same sienna, kept separate for tuning */ --surface: #FBF8F6; /* card background — warm, since the page is white */ --line: rgba(160, 82, 45, 0.18); --font-head: "Instrument Serif", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --col: 480px; /* desktop column width */ --pad: 20px; /* horizontal gutter */ --radius: 14px; } /* --- Ad variants --------------------------------------------------------- Both sets of copy ship in the HTML; picks one. Set in a synchronous script, so the right copy is present on first paint. -------------------------------------------------------------------------- */ [data-variant="pilates"] [data-v="sauna"], [data-variant="sauna"] [data-v="pilates"] { display: none !important; } /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } img, video { display: block; max-width: 100%; } /* Sienna headings are the signature of reformeclub.com — every heading there is set in it. */ h1, h2 { margin: 0; font-family: var(--font-head); font-weight: 400; line-height: 1.12; color: var(--accent); } p { margin: 0; } ul, ol { margin: 0; padding: 0; } a { color: inherit; } /* --- Layout --------------------------------------------------------------- */ .header, .page, .footer, .sticky-cta > .btn { max-width: var(--col); margin-inline: auto; } .page > section { padding: 0 var(--pad); margin-top: 44px; } .page > section:first-child { margin-top: 0; } /* --- Announcement bar ---------------------------------------------------- */ .announce { background: var(--accent); color: var(--accent-text); padding: 16px var(--pad); text-align: center; font-size: 15px; font-weight: 600; line-height: 1.45; letter-spacing: 0.04em; text-transform: uppercase; text-wrap: balance; } /* --- Header ------------------------------------------------------------ */ .header { display: flex; justify-content: center; padding: 18px var(--pad); } .logo { height: 96px; width: auto; max-height: 96px; object-fit: contain; } /* --- Hero -------------------------------------------------------------- */ .hero { text-align: center; } .hero-title { font-size: 40px; letter-spacing: -0.015em; margin-bottom: 14px; } .hero-sub { color: var(--muted); font-size: 17px; margin-bottom: 20px; text-wrap: balance; } /* --- Buttons -------------------------------------------------------------- */ .btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 14px 20px; border: 1px solid transparent; border-radius: 999px; font-family: var(--font-body); font-size: 16px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; } .btn-primary { background: var(--accent); color: var(--accent-text); } .btn-secondary { background: transparent; color: var(--accent); border-color: var(--accent); } .btn:active { transform: translateY(1px); } /* --- VSL --------------------------------------------------------------- */ .vsl-frame { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden; background: #000; } .vsl-mount { position: absolute; inset: 0; } .vsl-mount iframe { display: block; width: 100%; height: 100%; border: 0; } .vsl-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 20px; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; } .vsl-overlay[hidden] { display: none; } .vsl-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(6px); color: #fff; font-family: var(--font-body); font-size: 15px; font-weight: 500; } .vsl-icon { width: 20px; height: 20px; fill: currentColor; flex: none; } /* Speaker while playing muted, triangle when stopped. */ .icon-play { display: none; } .vsl-frame.is-paused .icon-sound { display: none; } .vsl-frame.is-paused .icon-play { display: block; } /* Reduced-motion / paused state: centre the affordance and dim the frame. */ .vsl-frame.is-paused .vsl-overlay { align-items: center; padding-bottom: 0; background: rgba(0, 0, 0, 0.18); } /* Once sound is on, the overlay stays as a bare play/pause target — no pill, no dimming — standing in for the native controls Vimeo isn't rendering. */ .vsl-frame.is-playing .vsl-pill { display: none; } .vsl-frame.is-playing.is-paused .vsl-pill { display: inline-flex; } /* --- Offer ------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .offer-card { padding: 24px 20px; } .offer-name { font-size: 26px; margin-bottom: 16px; } .offer-list { list-style: none; margin-bottom: 22px; } .offer-list li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 15px; } .offer-list li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } /* --- Social proof ------------------------------------------------------ */ .rating { text-align: center; font-size: 15px; color: var(--muted); margin-bottom: 16px; } .stars { display: block; color: var(--accent-warm); font-size: 19px; letter-spacing: 3px; margin-bottom: 4px; } .quotes { list-style: none; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* bleed to the screen edges so cards peek past the gutter */ margin-inline: calc(var(--pad) * -1); padding: 0 var(--pad) 4px; } .quotes::-webkit-scrollbar { display: none; } .quote { flex: 0 0 84%; scroll-snap-align: center; padding: 18px; } .quote-text { font-size: 15px; margin-bottom: 10px; } .quote-name { font-size: 13px; color: var(--muted); } /* --- What to expect ---------------------------------------------------- */ .h2 { font-size: 30px; letter-spacing: -0.01em; margin-bottom: 18px; text-align: center; } .steps { list-style: none; counter-reset: step; } .steps li { counter-increment: step; position: relative; padding-left: 42px; margin-bottom: 16px; font-size: 15px; } .steps li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: 13px; font-weight: 600; } /* --- Booking -------------------------------------------------------------- */ .book { scroll-margin-top: 16px; } /* Calendly's iframe is cross-origin — its interior can't be styled from here. The most we can do is sit it in the same card treatment as everything else so it reads as part of the page rather than a pasted-in widget. */ /* Scoped to .book so it outranks Calendly's own widget.css, which loads after this file and also targets .calendly-inline-widget. */ .book .calendly-inline-widget { /* No min-height: main.js sizes this from Calendly's page_height message. The inline height on the element reserves space until that arrives. position:relative is set here rather than relying on Calendly's script, which only applies it once the widget loads — the skeleton needs a positioned ancestor before that. */ position: relative; width: 100%; transition: height 0.2s ease; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .calendly-fallback, .calendly-error { padding: 24px 0; text-align: center; color: var(--muted); font-size: 15px; } /* Skeleton shown while the Calendly widget is held back until first interaction. Deliberately shaped like the calendar that replaces it — heading, month nav, weekday row, day grid, timezone line — so the swap isn't a jolt. */ .cal-skeleton { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 30px 20px 24px; } .cal-skeleton span, .cal-skeleton i { display: block; border-radius: 6px; background: color-mix(in srgb, var(--accent) 9%, transparent); animation: skeleton-pulse 1.6s ease-in-out infinite; } .sk-title { width: 132px; height: 21px; margin-bottom: 26px; } .sk-month { width: 104px; height: 15px; margin-bottom: 20px; } .sk-dow, .sk-days { display: grid; grid-template-columns: repeat(7, 1fr); width: 100%; gap: 7px; } .sk-dow { margin-bottom: 12px; padding: 0 2px; } .sk-dow i { height: 10px; border-radius: 3px; justify-self: center; width: 60%; } /* Circles, matching Calendly's round day cells. */ .sk-days i { aspect-ratio: 1; border-radius: 50%; width: 100%; } .sk-tz-label { width: 72px; height: 12px; margin: 22px auto 10px 0; } .sk-tz { width: 62%; height: 15px; margin-right: auto; } @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @media (prefers-reduced-motion: reduce) { .cal-skeleton span, .cal-skeleton i { animation: none; } } /* Sample calendar — placeholder only, removed once Calendly is configured. */ .cal-mock { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px 16px; } .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .cal-month { font-family: var(--font-head); font-size: 21px; } .cal-nav { width: 28px; text-align: center; color: var(--muted); font-size: 20px; line-height: 1; } .cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .cal-dow { margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-align: center; } .cal-day { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--text); font-size: 14px; font-weight: 500; } .cal-day.is-off { background: transparent; color: color-mix(in srgb, var(--muted) 45%, transparent); font-weight: 400; } .cal-day.is-on { background: var(--accent); color: var(--accent-text); } .cal-slots-label { margin: 18px 0 10px; font-size: 14px; font-weight: 600; } .cal-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .cal-slot { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--accent); border-radius: 8px; font-size: 14px; font-weight: 500; } .cal-note { margin-top: 16px; color: var(--muted); font-size: 12px; line-height: 1.45; } .cal-note code { font-size: 11px; background: color-mix(in srgb, var(--accent) 8%, transparent); padding: 1px 4px; border-radius: 3px; } /* --- FAQ --------------------------------------------------------------- */ .faq details { border-bottom: 1px solid var(--line); } .faq details:first-of-type { border-top: 1px solid var(--line); } .faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 16px 0; font-size: 16px; font-weight: 500; cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 22px; color: var(--muted); line-height: 1; } .faq details[open] summary::after { content: "–"; } .faq details p { padding: 0 0 18px; font-size: 15px; color: var(--muted); } /* --- Amenities ----------------------------------------------------------- */ .amenity-list { margin: 0; } .amenity { padding: 16px 0; border-bottom: 1px solid var(--line); } .amenity:first-child { border-top: 1px solid var(--line); } .amenity dt { font-weight: 600; font-size: 15px; margin-bottom: 4px; } .amenity dd { margin: 0; font-size: 15px; color: var(--muted); } /* --- Footer ------------------------------------------------------------ */ .footer { margin-top: 56px; /* room for the sticky bar on mobile */ padding: 32px var(--pad) calc(112px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); text-align: center; color: var(--muted); } .footer-mark { height: 38px; width: auto; margin: 0 auto 18px; opacity: 0.75; } .footer-contact { font-style: normal; /*
defaults to italic */ font-size: 14px; line-height: 1.6; } /* fit-content + auto margins keeps each item on its own line without stretching the tap target across the full width of the footer. */ .footer-contact a { display: block; width: fit-content; margin-inline: auto; padding: 8px 10px; text-decoration: none; } /* The address runs to two lines and clears 44px on its own; the single-line phone number needs the extra padding to get there. */ .footer-contact a[href^="tel:"] { padding: 11px 10px; } .footer-links { display: flex; align-items: center; justify-content: center; gap: 2px; margin-top: 10px; font-size: 13px; } .footer-links a { /* padding rather than min-height, so the row stays visually tight while the tap targets still clear 44px */ padding: 12px 10px; text-decoration: none; } .footer-dot { opacity: 0.5; } /* --- Sticky mobile CTA ---------------------------------------------------- */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); transition: transform 0.2s ease, opacity 0.2s ease; } .sticky-cta.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; } /* Desktop: phone-width column, no sticky bar */ @media (min-width: 600px) { .sticky-cta { display: none; } .footer { padding-bottom: 40px; } .quote { flex-basis: 70%; } } @media (min-width: 380px) { .hero-title { font-size: 44px; } } /* --- Accessibility -------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }