/* ========================================================================= Wellness Matters — palette overrides + wellness-specific layout extensions built on top of the Flatirons design system tokens. We keep all the existing --brand-* / --paper / --ink-950 var names so every component in marketing.css keeps working. We just change their VALUES per palette via [data-palette="..."] on . ========================================================================= */ /* ---------- Palette 1 — SAGE & CLAY (default) ---------- */ :root, body[data-palette="sage-clay"] { /* Brand */ --brand-teal: #5e7a64; /* deep sage — primary */ --brand-orange: #c2734c; /* warm clay — accent */ --brand-amber: #d6a564; /* soft golden */ --brand-purple: #7a5a4a; /* warm cocoa */ /* Tints */ --teal-50: #eef1ec; --teal-100: #d4dccd; --teal-500: #5e7a64; --teal-700: #46604c; --teal-900: #2a3a30; --orange-50: #f9ede4; --orange-100: #f0d4bf; --orange-500: #c2734c; --orange-700: #95562f; --orange-900: #4a2a14; --amber-50: #f8efde; --amber-100: #eed9af; --amber-500: #d6a564; --amber-700: #a17a3b; --amber-900: #5e4520; --purple-50: #efe9e3; --purple-100: #d8c8bb; --purple-500: #7a5a4a; --purple-700: #5a3f31; --purple-900: #2e1f17; /* Neutrals — warmer, bone-toned paper */ --paper: #f5efe1; --paper-2: #ebe2cd; --ink-950: #1c1f1c; --ink-900: #21241f; --ink-700: #3a3d36; --ink-500: #65685e; /* muted body */ --ink-400: #8a8c80; --ink-300: #b6b8ad; --ink-200: #d0cfc3; --ink-100: #e6e2d6; --ink-50: #efeadd; } /* ---------- Palette 2 — FOREST & AMBER (Beckley-feel) ---------- */ body[data-palette="forest-amber"] { --brand-teal: #2f4a36; --brand-orange: #b8512a; --brand-amber: #c9892f; --brand-purple: #3d2e2a; --teal-50: #e8ede9; --teal-100: #c5d2c8; --teal-500: #2f4a36; --teal-700: #213628; --teal-900: #121e15; --orange-50: #f7e6df; --orange-100: #ecc4b0; --orange-500: #b8512a; --orange-700: #8b3c1d; --orange-900: #471d0c; --amber-50: #f7ecd5; --amber-100: #ecd29a; --amber-500: #c9892f; --amber-700: #95641d; --amber-900: #4e3510; --purple-50: #ece6e3; --purple-100: #cebdb7; --purple-500: #3d2e2a; --purple-700: #2a1f1c; --purple-900: #15100e; --paper: #f1ebdc; --paper-2: #e0d4ba; --ink-950: #14180f; --ink-900: #1a1e15; --ink-700: #34372e; --ink-500: #5c5f55; --ink-400: #80837a; --ink-300: #aeb1a7; --ink-200: #c9cbc0; --ink-100: #ddd8c7; --ink-50: #e6e0cf; } /* ---------- Palette 3 — EUCALYPTUS & BONE (Templ minimal) ---------- */ body[data-palette="eucalyptus-bone"] { --brand-teal: #708a78; --brand-orange: #ad8a6c; --brand-amber: #c2a87a; --brand-purple: #6b6a5a; --teal-50: #eef1ee; --teal-100: #d2dad4; --teal-500: #708a78; --teal-700: #556a5d; --teal-900: #2f3f35; --orange-50: #f3ece4; --orange-100: #ddc8b0; --orange-500: #ad8a6c; --orange-700: #836a52; --orange-900: #463728; --amber-50: #f3ecde; --amber-100: #e0d2af; --amber-500: #c2a87a; --amber-700: #927d54; --amber-900: #4f4329; --purple-50: #ededea; --purple-100: #cdccbf; --purple-500: #6b6a5a; --purple-700: #4f4e41; --purple-900: #28281f; --paper: #f4f1ea; --paper-2: #e6e1d4; --ink-950: #25282b; --ink-900: #2a2c2c; --ink-700: #44464a; --ink-500: #6a6c6b; --ink-400: #8a8c8a; --ink-300: #b3b5b1; --ink-200: #cbccc6; --ink-100: #e0ddd3; --ink-50: #ebe7dc; } /* ========================================================================= Density — controls section padding + heading scale via [data-density] ========================================================================= */ body[data-density="spacious"] section { padding: 128px 0; } body[data-density="standard"] section { padding: 96px 0; } body[data-density="compact"] section { padding: 64px 0; } @media (max-width: 720px) { body[data-density="spacious"] section { padding: 80px 0; } body[data-density="standard"] section { padding: 64px 0; } body[data-density="compact"] section { padding: 48px 0; } } /* ========================================================================= Wellness extensions ========================================================================= */ /* Slightly softer cards on warm paper */ .card { background: var(--white); border-color: var(--ink-200); box-shadow: 0 1px 2px rgba(28, 31, 28, 0.04); } /* Buttons recolored: dark = warm ink, primary = sage */ .btn.dark { background: var(--ink-950); color: var(--paper); } .btn.dark:hover { background: var(--ink-700); } .btn.primary { background: var(--brand-teal); color: #fff; } .btn.primary:hover { background: var(--teal-700); } .btn.ghost { border-color: var(--ink-200); color: var(--ink-900); } .btn.ghost:hover { background: var(--paper-2); border-color: var(--ink-200); } .btn.lg { font-size: 16px; padding: 16px 28px; } /* Pill CTA used for the dominant action */ .btn.cta { border-radius: var(--radius-pill); padding: 16px 28px; font-size: 16px; } /* Larger section heads on the wellness brand */ .section-head h2 { font-size: clamp(34px, 4.8vw, 56px); font-weight: 400; /* lighter on serif */ line-height: 1.08; letter-spacing: -0.015em; } h1, h2, h3, h4 { font-weight: 400; } /* Beckley-ish: lighter serif weight */ .accent-italic { font-weight: 400; font-style: italic; color: inherit; } /* inherit so italic keywords stay visible on dark sections */ /* Hairline divider — used between sections for editorial rhythm */ .rule { display: block; width: 48px; height: 1px; background: var(--ink-300); margin: 0 auto 24px; } .rule.left { margin-left: 0; } /* Image placeholder — warm, photographic-feeling, with a soft label */ .imgbox { position: relative; background: var(--paper-2); border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; } .imgbox::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.45), transparent 55%), linear-gradient(155deg, var(--clr-a, var(--amber-100)) 0%, var(--clr-b, var(--orange-100)) 55%, var(--clr-c, var(--teal-100)) 100%); z-index: -1; } .imgbox::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 75% 80%, rgba(28,31,28,0.12), transparent 50%); z-index: -1; } .imgbox .imgbox-label { position: absolute; left: 16px; bottom: 14px; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(28,31,28,0.55); background: rgba(245,239,225,0.75); backdrop-filter: blur(6px); padding: 5px 9px; border-radius: 999px; } /* Quote / pullquote */ .pull { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(26px, 3vw, 38px); line-height: 1.3; color: var(--ink-900); letter-spacing: -0.005em; text-wrap: balance; } /* Decorative inline ornament — a slim circle, used as a section anchor */ .ornament { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--brand-teal); vertical-align: middle; margin: 0 10px; } /* Tiny "WATCH INTRO 2 MIN" chip beside hero CTA */ .watch-chip { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--ink-900); cursor: pointer; border: 0; background: transparent; padding: 14px 4px; } .watch-chip .play { width: 32px; height: 32px; border-radius: 999px; background: var(--ink-950); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; transition: all var(--dur-med) var(--ease-out); } .watch-chip:hover .play { background: var(--brand-teal); transform: scale(1.06); } /* Service tile — a denser bordered card for the two-services row */ .svc-tile { background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-xl); padding: 40px; display: flex; flex-direction: column; gap: 18px; transition: all var(--dur-med) var(--ease-out); } .svc-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(28,31,28,0.18), 0 2px 6px rgba(28,31,28,0.05); border-color: var(--ink-300); } .svc-tile .svc-tag { font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-teal); } .svc-tile h3 { font-family: var(--font-display); font-size: 32px; font-weight: 400; line-height: 1.1; margin: 0; color: var(--ink-950); letter-spacing: -0.01em; } .svc-tile .svc-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; color: var(--ink-700); line-height: 1.4; } .svc-tile .svc-list li::before { content: "·"; color: var(--brand-teal); font-weight: 700; margin-right: 10px; } .svc-tile .svc-foot { margin-top: 4px; display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--ink-100); } .svc-tile .svc-cta { font-family: var(--font-sans); font-weight: 500; font-size: 14.5px; color: var(--ink-950); border-bottom: 1px solid var(--ink-300); padding-bottom: 1px; } .svc-tile .svc-cta:hover { border-bottom-color: var(--brand-teal); color: var(--brand-teal); } .svc-tile .svc-meta { font-size: 12.5px; color: var(--ink-500); } /* Two-up shop strip */ .shop-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 720px) { .shop-row { grid-template-columns: 1fr; } } .shop-tile { background: var(--paper); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); padding: 32px; display: flex; align-items: center; gap: 24px; } .shop-tile .shop-img { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 12px; } .shop-tile h4 { font-family: var(--font-display); font-size: 22px; font-weight: 400; margin: 0 0 6px; color: var(--ink-950); } .shop-tile p { font-size: 14px; color: var(--ink-500); line-height: 1.55; margin: 0 0 12px; } .shop-tile a { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--ink-950); border-bottom: 1px solid var(--ink-300); } .shop-tile a:hover { color: var(--brand-teal); border-bottom-color: var(--brand-teal); } /* Smooth scroll for hash links */ html { scroll-behavior: smooth; } /* Anchor scroll offset for sticky header */ section[id] { scroll-margin-top: 80px; } /* Container variants used by wellness page */ .container-md { max-width: 980px; margin: 0 auto; padding: 0 32px; } @media (max-width: 720px) { .container-md { padding: 0 20px; } } /* Footer link hover: warm rather than teal underline */ footer a { color: inherit !important; border-bottom-color: transparent !important; } footer a:hover { color: var(--paper) !important; border-bottom-color: var(--ink-700) !important; } /* ========================================================================= Header / navigation ========================================================================= */ .site-nav { display: flex; gap: 36px; align-items: center; } .site-nav-link { transition: border-color var(--dur-fast) var(--ease-out); } .site-nav-link:hover { border-bottom-color: var(--brand-teal) !important; } /* The in-menu Book CTA + the hamburger only appear on mobile */ .site-nav-book { display: none; } .nav-toggle { display: none; } .nav-toggle { width: 44px; height: 44px; flex: 0 0 auto; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--radius-md); color: var(--ink-950); } .nav-toggle:hover { background: var(--paper-2); } .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; display: block; width: 22px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .nav-toggle-bars { position: relative; } .nav-toggle-bars::before { position: absolute; top: -7px; left: 0; } .nav-toggle-bars::after { position: absolute; top: 7px; left: 0; } /* Animate to an X when the menu is open */ .nav-toggle-cb:checked ~ .nav-toggle .nav-toggle-bars { background: transparent; } .nav-toggle-cb:checked ~ .nav-toggle .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); } .nav-toggle-cb:checked ~ .nav-toggle .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); } /* ========================================================================= Toggle audience split (used in Tweaks) */ .split-tabs { display: inline-flex; padding: 4px; background: var(--paper-2); border-radius: 999px; gap: 4px; margin: 0 auto 32px; } .split-tabs button { appearance: none; border: 0; background: transparent; font-family: var(--font-sans); font-size: 14.5px; font-weight: 500; color: var(--ink-700); padding: 10px 22px; border-radius: 999px; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); } .split-tabs button.active { background: var(--white); color: var(--ink-950); box-shadow: 0 1px 3px rgba(28,31,28,0.08); } /* Split-screen audience layout */ .split-screen { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--ink-200); } @media (max-width: 720px) { .split-screen { grid-template-columns: 1fr; } } .split-half { padding: 56px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 420px; background: var(--white); border-right: 1px solid var(--ink-200); } .split-screen .split-half:last-child { border-right: 0; border-top: 0; background: var(--paper-2); } @media (max-width: 720px) { .split-half { padding: 40px 28px; min-height: auto; border-right: 0; border-bottom: 1px solid var(--ink-200); } } /* ========================================================================= MOBILE — responsive overrides for the React prototype. Components use inline grid styles which can't be overridden via class alone, so attribute selectors + !important do the work here. Keep in sync between site/wellness.css and review/site/wellness.css. ========================================================================= */ @media (max-width: 760px) { /* ---------- Layout: stack every multi-col grid ---------- */ main [style*="grid-template-columns: 1fr 1fr"], main [style*="grid-template-columns: 1.05fr 0.95fr"], main [style*="grid-template-columns: 0.95fr 1.05fr"], main [style*="grid-template-columns: 0.9fr 1.1fr"], main [style*="grid-template-columns: 1.1fr 0.9fr"], main [style*="grid-template-columns: 1.4fr auto auto"], main [style*="grid-template-columns: 52px 1fr auto auto"], main [style*="grid-template-columns: repeat(3"], main [style*="grid-template-columns: repeat(4"], main [style*="grid-template-columns: 160px 1fr"], footer [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 28px !important; align-items: start !important; } /* Resource library rows: keep a 2-line stack with icon + title above status/link */ main [style*="grid-template-columns: 52px 1fr auto auto"] { grid-template-columns: 40px 1fr !important; gap: 14px !important; } main [style*="grid-template-columns: 52px 1fr auto auto"] > *:nth-child(3), main [style*="grid-template-columns: 52px 1fr auto auto"] > *:nth-child(4) { grid-column: 2 !important; } /* ---------- Hero ---------- */ /* The floating testimonial chip (absolute-positioned) wraps + becomes a regular block below the portrait so it never overflows the screen. */ main .imgbox + div[style*="position: absolute"][style*="bottom"] { position: static !important; margin: 16px 0 0 !important; width: 100% !important; max-width: none !important; } /* Trust strip — slightly tighter, allow wrap */ main [style*="display: flex"][style*="flex-wrap: wrap"][style*="justify-content: center"] { gap: 8px 18px !important; font-size: 12.5px !important; } /* ---------- Header / nav (mobile menu) ---------- */ .site-header .container { gap: 12px; } /* Show hamburger, hide the inline desktop nav + desktop book button */ .nav-toggle { display: inline-flex !important; } .site-book-desktop { display: none !important; } .site-nav { position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0 !important; background: var(--paper); border-bottom: 1px solid var(--ink-200); box-shadow: 0 16px 30px -18px rgba(28,31,28,0.28); padding: 8px 0 16px; display: none; } /* Reveal on checkbox toggle */ .nav-toggle-cb:checked ~ .site-nav { display: flex; } .site-nav-link { padding: 15px 24px !important; border-bottom: 1px solid var(--ink-100) !important; font-size: 16px !important; } .site-nav-book { margin: 14px 24px 0; justify-content: center; } /* ---------- Padding / spacing ---------- */ body[data-density="spacious"] section, body[data-density="standard"] section, body[data-density="compact"] section { padding: 48px 0 !important; } .container, .container-md, .container-sm { padding: 0 20px !important; } /* Section heads sit closer to content */ .section-head { margin-bottom: 32px !important; } /* ---------- Cards + tiles ---------- */ .svc-tile { padding: 28px !important; } .svc-tile h3 { font-size: 26px !important; } .svc-tile .svc-foot { flex-direction: column; align-items: flex-start !important; gap: 10px; } /* Shop tile — stack image on top */ .shop-tile { flex-direction: column !important; align-items: flex-start !important; padding: 24px !important; } .shop-tile .shop-img { width: 100% !important; flex: none !important; height: 140px !important; border-radius: 12px; } /* Image boxes don't need huge fixed aspect ratios on mobile */ main .imgbox[style*="aspect-ratio: 4/5"] { aspect-ratio: 1 / 1 !important; } main .imgbox[style*="aspect-ratio: 21/9"] { aspect-ratio: 4 / 3 !important; } /* ---------- Forms ---------- */ /* Form rows inside Contact — let them grow full width */ form { width: 100%; } /* ---------- Buttons ---------- */ .btn.lg, .btn.cta.lg { width: 100%; justify-content: center; } .btn.cta { padding: 14px 22px !important; font-size: 15px !important; } /* Hero CTA row stays centered/stacked */ main [style*="display: flex"][style*="gap: 18px"][style*="flex-wrap: wrap"] { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; } /* ---------- Final dark CTA ---------- */ /* The Begin-conversation CTA's inline-flex wrap — stack and center */ main [style*="display: inline-flex"][style*="gap: 16px"] { flex-direction: column; align-items: stretch; } /* ---------- Footer ---------- */ footer { padding: 56px 0 28px !important; } footer [style*="display: grid"][style*="margin-bottom: 64px"] { gap: 36px !important; } footer [style*="display: flex"][style*="justify-content: space-between"] { flex-direction: column; align-items: flex-start !important; gap: 8px !important; } /* Portal "Up next" — let the join button drop below the title */ main [style*="grid-template-columns: 1.4fr auto auto"] { padding: 24px !important; } main [style*="grid-template-columns: 1.4fr auto auto"] > * { width: 100%; } /* Calendly month grid in Contact — tighter on phones */ [style*="display: grid"][style*="grid-template-columns: repeat(7, 1fr)"] { gap: 3px !important; } } /* Smaller phones (iPhone SE etc.) */ @media (max-width: 380px) { h1, h2 { letter-spacing: -0.025em !important; } .container, .container-md, .container-sm { padding: 0 16px !important; } }