/* GLOBAL */
/* ==== */
html {
scroll-behavior: smooth;
}
#savecontent {
margin-top: -2px;
}
.anchor {
scroll-margin-top: 150px;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
color: inherit;
}
h1, .h1 {
font-size: clamp(35px, 4.4vw, 46px);
}
h1.mega, .h1.mega {
font-size: clamp(36px, 4.7vw, 70px);
}
h1.ultra, .h1.ultra {
font-size: clamp(37px, 5.3vw, 95px);
}
h2, .h2 {
font-size: clamp(32px, 4vw, 42px);
}
h3, .h3 {
font-size: clamp(29px, 3.6vw, 37px);
}
h4, .h4 {
font-size: clamp(26px, 3.2vw, 32px);
}
h5, .h5 {
font-size: clamp(23px, 2.8vw, 27px);
}
h6, .h6 {
font-size: clamp(20px, 2.4vw, 22px);
}
body {
font-size: clamp(15px, 2vw, 18px);
}
.btn {
white-space: normal;
}
a:hover img,
a.bg-img:hover a.bg-image:hover {
opacity: .85;
}
#savecontent img {
max-width: 100% !important;
height: auto !important;
}
.rightfloat {
float: right;
margin: 0 0 .5rem 1rem;
width: 40%;
}
@media (max-width: 767px) {
.rightfloat {
float: none;
margin: 0 0 1rem 0;
width: 100%;
}
}
.btn-primary {
color: white !important;
}
.round {
border-radius: 12px;
}
.carousel-control-next-icon,
.carousel-control-prev-icon {
background-color: rgba(0, 0, 0, 0.9);
padding: 1rem;
background-size: 20px;
}
@media(min-width: 1600px) {
.container {
max-width: 1300px;
}
}
@media(min-width: 1600px) {
.container.container-wide {
width: 1500px !important;
max-width: 1500px !important;
}
}
.product-image {
background-size: cover !important;
min-height: auto !important;
padding-bottom: 75%;
}
#savecontent form label {
font-weight: bold;
}
#savecontent form .checkbox-group label,
#savecontent form .radio-group label {
font-weight: normal;
}
.formbuilder-required {
color: red;
}
.text-right.addToCart {
text-align: left !important;
}
.blog-detail-page {
background: var(--light);
}
.blog-detail-page .blog {
border-radius: 12px;
padding: 1.5rem;
background: white;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
}
.blog-detail-page .blog h4 {
margin-top: 1rem;
}
form li p {
margin-bottom: 0;
}
form label {
font-weight: bold;
}
form .checkbox-group label,
form .radio-group label {
font-weight: normal;
}
.formbuilder-checkbox,
.formbuilder-radio {
margin-bottom: 4px;
}
/* ==========================================================================
LODO CHAIR MASSAGE & WELLNESS / SITE 2748 / GLOBAL CSS
Loads after Bootstrap 4 and the Omnia template CSS, so source order wins.
The Omnia base block above is the platform starter; everything LoDo is below.
PALETTE (also set these in the CMS theme so the compiled button and link
colours match; until then the overrides in section 2 carry the page):
primary #5A4766 refined plum, buttons and accents
primary-alt #A98FBB light plum, accents on dark
dark #1F1A24 near black ink, the dark bands
light #FAF8F5 warm paper, never pure white
TYPE: high-contrast serif for display, light wide-tracked sans for the rest,
which is what the existing LoDo logo lockup already does.
PASS 3 (2026-09-18): Ken Burns hero on background-image spans, custom SVG
icon set, a plum gradient band and a plum tint band so the page is no longer
white top to bottom, a scroll-filled process rail, and the dark Locations
band rebuilt around the (now right-side-up) map. Vertical rhythm tightened.
PLATFORM NOTES kept in mind throughout:
content images are forced to height:auto, so every crop here is
aspect-ratio plus object-fit, never a pixel height (the hero uses spans);
heading colour is !important, so white headings use the .text-white utility;
transitions are short and linear; no card lift, no image zoom on hover.
========================================================================== */
/* 1. TOKENS ---------------------------------------------------------------- */
:root {
--primary: #5A4766;
--primary-alt: #A98FBB;
--dark: #1F1A24;
--light: #FAF8F5;
--paper: #FAF8F5;
--tint: #F1EBF5;
--ink: #1F1A24;
--muted: #6B6472;
--link: #A25ECE;
--line: rgba(31, 26, 36, .13);
--serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
/* 2. BASE ------------------------------------------------------------------ */
body {
font-family: var(--sans);
font-weight: 300;
color: var(--ink);
background: var(--paper);
font-size: clamp(15.5px, .35vw + 14.4px, 18px);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; line-height: 1.12; }
h1 strong, h2 strong, h3 strong, h4 strong, .h1 strong, .h2 strong, .h3 strong { font-weight: 700; }
p { margin-bottom: 1.05rem; }
a { color: var(--link); }
a:hover, a:focus { color: var(--primary); }
img { max-width: 100%; }
::selection { background: var(--primary-alt); color: var(--ink); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
[id] { scroll-margin-top: 90px; }
.text-primary { color: var(--primary) !important; }
.text-primary-alt { color: var(--primary-alt) !important; }
.bg-paper { background: var(--paper); }
.bg-ink { background: var(--dark); }
/* Buttons: platform classes only, restyled to the LoDo palette. */
.btn { font-family: var(--sans); font-weight: 500; letter-spacing: .04em; border-radius: 2px; padding: .85rem 1.9rem; border-width: 1px; transition: background-color .14s linear, color .14s linear, border-color .14s linear; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: #47374F; border-color: #47374F; color: #fff; }
.btn-primary:disabled, .btn-primary.disabled { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary-alt { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.btn-primary-alt:hover, .btn-primary-alt:focus { background: #fff; border-color: #fff; color: var(--primary); }
.btn-outline-primary { border-color: var(--primary); color: var(--primary); background: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--primary); border-color: var(--primary); color: #fff; }
/* 3. SHARED SECTION FURNITURE ---------------------------------------------- */
.lodo-sec { padding-top: clamp(3rem, 5.5vw, 5.75rem); padding-bottom: clamp(3rem, 5.5vw, 5.75rem); }
.lodo-sec-tight { padding-top: clamp(2rem, 3.5vw, 3rem); padding-bottom: clamp(2rem, 3.5vw, 3rem); }
.lodo-eyebrow { font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--primary); margin-bottom: 1rem; }
.lodo-eyebrow-alt { color: var(--primary-alt); }
.lodo-display { font-size: clamp(2.15rem, 4.6vw, 4.05rem); font-weight: 300; line-height: 1.06; letter-spacing: -.022em; }
.lodo-h2 { font-size: clamp(1.75rem, 3.1vw, 2.9rem); font-weight: 300; }
.lodo-lead { font-size: clamp(1rem, .6vw + .85rem, 1.2rem); font-weight: 300; line-height: 1.68; color: var(--muted); max-width: 42rem; }
.lodo-lead-lg { max-width: 34rem; }
.lodo-center .lodo-lead { margin-left: auto; margin-right: auto; }
.lodo-head { max-width: 42rem; }
/* soft plum blooms: the only decoration the light sections get */
.lodo-bloom { position: absolute; border-radius: 50%; pointer-events: none; }
.lodo-bloom-tr { top: -22vw; right: -14vw; width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; background: radial-gradient(circle at center, rgba(169,143,187,.22) 0%, rgba(169,143,187,0) 68%); }
.lodo-bloom-values { left: -12vw; bottom: -30vw; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; background: radial-gradient(circle at center, rgba(169,143,187,.28) 0%, rgba(169,143,187,0) 68%); }
.lodo-bloom-cta { right: -10vw; top: -30vw; width: 56vw; height: 56vw; max-width: 820px; max-height: 820px; background: radial-gradient(circle at center, rgba(169,143,187,.3) 0%, rgba(169,143,187,0) 68%); }
/* 4. HERO ------------------------------------------------------------------
Bootstrap carousel-fade + Ken Burns on the inner span. Opacity fades on
.carousel-item, the zoom lives on .lodo-kb, never both on one element or the
compositor drops to the main thread and it jitters. The copy is in normal
flow OUTSIDE the slides (so the hero can never change height mid-fade) and
the slides are an absolutely positioned backdrop behind it. */
.lodo-hero { position: relative; background: var(--dark); isolation: isolate; }
.lodo-hero .carousel { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 82vh; min-height: 82svh; }
.lodo-hero .carousel-inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; }
.lodo-hero .carousel-item { height: 100%; transition-duration: 1.2s; }
/* the platform's 4.0-era carousel CSS omits left/width on the in-flight items */
.lodo-hero .carousel-item-next,
.lodo-hero .carousel-item-prev { position: absolute; top: 0; left: 0; width: 100%; }
.lodo-kb { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center; }
/* Bootstrap 4.1+ stacking rules the platform CSS lacks: incoming above, outgoing below,
and the outgoing slide holds full opacity for the whole 1.2s fade (BS hardcodes .6s). */
.lodo-hero .carousel-item.active,
.lodo-hero .carousel-item-next.carousel-item-left,
.lodo-hero .carousel-item-prev.carousel-item-right { z-index: 1; }
.lodo-hero .carousel-item.active.carousel-item-left,
.lodo-hero .carousel-item.active.carousel-item-right { z-index: 0; transition: opacity 0s 1.2s; }
@media (prefers-reduced-motion: no-preference) {
/* zoom starts on the first fade-in frame (-next/-prev) and the identical value
carries through the class swap to .active, so it never restarts mid-fade.
11s = 6.5s interval + 2 x 1.2s fade + margin; odd slides push in, even pull out. */
.lodo-hero .carousel-item.active .lodo-kb,
.lodo-hero .carousel-item-next .lodo-kb,
.lodo-hero .carousel-item-prev .lodo-kb { animation: lodoKbIn 11s linear both; }
.lodo-hero .carousel-item:nth-child(even).active .lodo-kb,
.lodo-hero .carousel-item:nth-child(even).carousel-item-next .lodo-kb,
.lodo-hero .carousel-item:nth-child(even).carousel-item-prev .lodo-kb { animation-name: lodoKbOut; }
.lodo-hero .carousel-item:nth-child(3n+1) .lodo-kb { transform-origin: 68% 42%; }
.lodo-hero .carousel-item:nth-child(3n+2) .lodo-kb { transform-origin: 30% 55%; }
.lodo-hero .carousel-item:nth-child(3n+3) .lodo-kb { transform-origin: 58% 30%; }
}
@keyframes lodoKbIn { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes lodoKbOut { from { transform: scale(1.12); } to { transform: scale(1); } }
.lodo-hero-scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; pointer-events: none;
background:
linear-gradient(to right, rgba(31,26,36,.82) 0%, rgba(31,26,36,.58) 42%, rgba(31,26,36,.22) 75%, rgba(31,26,36,.12) 100%),
linear-gradient(to top, rgba(31,26,36,.78) 0%, rgba(31,26,36,.12) 40%, rgba(31,26,36,0) 100%); }
.lodo-hero-bloom { position: absolute; z-index: 2; top: -28vw; right: -18vw; width: 62vw; height: 62vw; max-width: 900px; max-height: 900px; border-radius: 50%; background: radial-gradient(circle at center, rgba(169,143,187,.42) 0%, rgba(169,143,187,0) 68%); pointer-events: none; }
.lodo-hero-content { position: relative; z-index: 3; flex: 1 1 auto; display: flex; align-items: center; padding: 4.5rem 0 3.25rem; }
.lodo-hero-content .container { width: 100%; }
/* three messages in one grid cell: the block is as tall as the tallest, so
switching between them can never move the hero; only opacity changes */
.lodo-hero-msgs { display: grid; }
.lodo-hero-msg { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity .7s linear; }
.lodo-hero-msg.is-on { opacity: 1; pointer-events: auto; }
.lodo-hero .lodo-display { color: #fff; font-size: clamp(2.05rem, 3.8vw, 3.6rem); text-shadow: 0 1px 24px rgba(0,0,0,.22); }
.lodo-hero .lodo-lead { color: rgba(255,255,255,.9); }
.lodo-hero .lodo-eyebrow { color: var(--primary-alt); }
.lodo-hero-link { color: #fff; font-weight: 500; letter-spacing: .04em; border-bottom: 1px solid rgba(255,255,255,.45); padding-bottom: 2px; transition: border-color .14s linear, color .14s linear; }
.lodo-hero-link:hover, .lodo-hero-link:focus { color: var(--primary-alt); border-color: var(--primary-alt); text-decoration: none; }
/* staged entrance on load, gated on the html class the script adds, so no JS = no hiding */
@media (prefers-reduced-motion: no-preference) {
html.lodo-js .lodo-hero-in { animation: lodoHeroIn .8s linear both; }
html.lodo-js .lodo-hero-in:nth-child(2) { animation-delay: .1s; }
html.lodo-js .lodo-hero-in:nth-child(3) { animation-delay: .2s; }
html.lodo-js .lodo-hero-in:nth-child(4) { animation-delay: .3s; }
}
@keyframes lodoHeroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* readout strip: slide caption + counter + timing bar + arrows */
.lodo-hero-log { position: relative; z-index: 3; border-top: 1px solid rgba(255,255,255,.14); background: rgba(31,26,36,.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lodo-log-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; padding: .8rem 0; color: rgba(255,255,255,.85); font-size: .86rem; }
.lodo-log-count { font-size: .72rem; font-weight: 500; letter-spacing: .16em; color: #fff; white-space: nowrap; }
.lodo-log-total { color: rgba(255,255,255,.45); margin-left: .35rem; }
.lodo-log-caps { position: relative; flex: 1 1 240px; min-width: 0; height: 1.5em; }
.lodo-log-caps > span { position: absolute; left: 0; top: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .5s linear; font-weight: 400; letter-spacing: .01em; }
.lodo-log-caps > span.is-on { opacity: 1; }
.lodo-log-bar { flex: 0 0 110px; height: 2px; background: rgba(255,255,255,.18); overflow: hidden; }
.lodo-log-fill { display: block; height: 100%; width: 100%; background: var(--primary-alt); transform-origin: left; transform: scaleX(0); }
html.lodo-js .lodo-log-fill { animation: lodoBar 6.5s linear both; }
@keyframes lodoBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lodo-log-nav { display: flex; gap: .4rem; margin-left: auto; }
.lodo-log-btn { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: .78rem; transition: border-color .14s linear, background-color .14s linear; }
.lodo-log-btn:hover, .lodo-log-btn:focus { color: #fff; border-color: var(--primary-alt); background: rgba(169,143,187,.2); text-decoration: none; }
/* 5. CLIENT LOGO WALL on the plum tint --------------------------------------
The tint is what separates the partner strip from the white services section
below it: a colour step rather than another hairline. */
.lodo-clients { background: var(--tint); padding: 1.75rem 0 1.5rem; }
.lodo-clients-label { font-size: .66rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--primary); }
/* marquee: the track is two identical sets and slides exactly half its width */
.lodo-marquee { margin-top: 1.25rem; overflow: hidden; background: var(--tint); /* the mask isolates blending, so multiply needs a backdrop in here */
-webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, transparent 100%); }
.lodo-marquee-track { display: flex; align-items: center; width: max-content; background: var(--tint); /* the animated transform isolates blending too, so the backdrop has to be on the track */ }
.lodo-client-logo { width: 150px; max-width: none; aspect-ratio: 3 / 1; object-fit: contain; margin-right: clamp(2.5rem, 5vw, 5rem); filter: grayscale(1); opacity: .6; mix-blend-mode: multiply; flex: none; }
@media (prefers-reduced-motion: no-preference) {
.lodo-marquee-track { animation: lodoMarquee 42s linear infinite; }
.lodo-marquee:hover .lodo-marquee-track { animation-play-state: paused; }
}
@keyframes lodoMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.lodo-marquee { -webkit-mask-image: none; mask-image: none; }
.lodo-marquee-track { width: auto; flex-wrap: wrap; justify-content: center; }
.lodo-marquee-track img[aria-hidden] { display: none; }
.lodo-client-logo { margin: .5rem 1.25rem; }
}
/* 6. SERVICES: linked tiles with the hand-drawn icon set -------------------
White section. Tiles rest on paper and turn white on hover, a plum accent
line grows across the top of the hovered tile, the icon disc fills with the
plum gradient and the arrow slides in. A faint index numeral sits top-right. */
.lodo-services { position: relative; overflow: hidden; background: #fff; }
.lodo-tile { position: relative; display: flex; align-items: flex-start; gap: 1.1rem; height: 100%; padding: 1.6rem 3rem 1.6rem 1.4rem; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; color: var(--ink); text-decoration: none; overflow: hidden; transition: border-color .14s linear, box-shadow .14s linear, background-color .14s linear; }
.lodo-tile::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--primary) 0%, var(--primary-alt) 100%); transform: scaleX(0); transform-origin: left center; transition: transform .2s linear; }
.lodo-tile:hover, .lodo-tile:focus { color: var(--ink); text-decoration: none; background: #fff; border-color: rgba(90,71,102,.3); box-shadow: 0 18px 40px rgba(31,26,36,.08); }
.lodo-tile:hover::before, .lodo-tile:focus::before { transform: scaleX(1); }
.lodo-tile-icon { flex: none; width: 60px; height: 60px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--primary); background: #fff; box-shadow: inset 0 0 0 1px rgba(90,71,102,.18), 0 0 0 6px rgba(169,143,187,.12); }
.lodo-tile-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lodo-tile:hover .lodo-tile-icon { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-alt) 100%); color: #fff; box-shadow: 0 0 0 6px rgba(169,143,187,.22); }
.lodo-tile-body { display: block; flex: 1 1 auto; min-width: 0; }
.lodo-tile-title { display: block; font-family: var(--serif); font-size: 1.18rem; line-height: 1.2; margin-bottom: .35rem; }
.lodo-tile-text { display: block; font-size: .9rem; line-height: 1.55; color: var(--muted); }
.lodo-tile-idx { position: absolute; right: 1.15rem; top: 1.2rem; font-family: var(--sans); font-size: .64rem; font-weight: 600; letter-spacing: .2em; color: var(--primary-alt); transition: opacity .14s linear; }
.lodo-tile-go { position: absolute; right: 1.15rem; top: 1.2rem; color: var(--primary); font-size: .8rem; opacity: 0; transform: translateX(-4px); transition: opacity .14s linear, transform .14s linear; }
.lodo-tile:hover .lodo-tile-idx { opacity: 0; }
.lodo-tile:hover .lodo-tile-go { opacity: 1; transform: none; }
.lodo-service-more { font-size: .92rem; color: var(--muted); }
/* framed full-colour photographs: aspect-ratio crop (the platform forces
height auto) and a light plum offset frame sitting behind the image */
.lodo-photo { position: relative; margin: 0; isolation: isolate; }
.lodo-photo img { width: 100%; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 4px; }
.lodo-photo-tall img { aspect-ratio: 4 / 5; }
.lodo-photo-sq img { aspect-ratio: 1 / 1; }
.lodo-photo::after { content: ""; position: absolute; top: 14px; right: -14px; bottom: -14px; left: 14px; border: 1px solid var(--primary-alt); border-radius: 4px; opacity: .55; z-index: -1; }
/* 8. VALUE CARDS on the plum gradient ------------------------------------- */
.lodo-values { position: relative; overflow: hidden; color: rgba(255,255,255,.8); background: linear-gradient(135deg, #5A4766 0%, #3F3149 55%, #1F1A24 100%); }
/* same treatment as the closing CTA: a photograph under the plum gradient,
desaturated by luminosity blending so the plum stays the colour of the band */
.lodo-values-photo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center; opacity: .18; mix-blend-mode: luminosity; pointer-events: none; }
.lodo-values .container { position: relative; z-index: 1; }
.lodo-glass { height: 100%; padding: 1.75rem 1.5rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 4px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lodo-glass-icon { display: inline-flex; color: var(--primary-alt); }
.lodo-glass-icon svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.lodo-glass h3 { font-size: 1.08rem; margin: 1.1rem 0 .5rem; line-height: 1.25; }
.lodo-glass p { font-size: .92rem; color: rgba(255,255,255,.72); margin: 0; line-height: 1.6; }
/* 9. PROCESS RAIL ----------------------------------------------------------
Phone: a vertical rail down the left. Desktop: a horizontal rail through the
number badges. --lodo-rail (0..1) is the fill, set by JS as the section
scrolls; the default of 1 means a page without JS just shows a full rail. */
.lodo-steps { position: relative; }
.lodo-rail { position: absolute; left: 1.45rem; top: 2.9rem; bottom: 2.9rem; width: 1px; background: var(--line); }
.lodo-rail-fill { display: block; width: 100%; height: 100%; background: var(--primary); transform-origin: top center; transform: scaleY(var(--lodo-rail, 1)); }
.lodo-step { position: relative; padding-left: 4.25rem; padding-bottom: 2.1rem; }
.lodo-step:last-child { padding-bottom: 0; }
.lodo-step-num { position: absolute; left: 0; top: 0; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); color: var(--primary); display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .06em; transition: background-color .14s linear, color .14s linear, border-color .14s linear; }
.lodo-step.is-lit .lodo-step-num { background: var(--primary); border-color: var(--primary); color: #fff; }
.lodo-step h3 { font-size: 1.06rem; margin: .35rem 0 .3rem; }
.lodo-step p { font-size: .92rem; color: var(--muted); margin: 0; line-height: 1.6; }
/* 10. LOCATIONS (dark) ----------------------------------------------------- */
.lodo-dark { background: var(--dark); color: rgba(255,255,255,.82); position: relative; overflow: hidden; }
.lodo-dark .lodo-lead { color: rgba(255,255,255,.72); }
.lodo-dark-bloom { position: absolute; left: 62%; top: -34%; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at center, rgba(169,143,187,.2) 0%, rgba(169,143,187,0) 70%); pointer-events: none; }
.lodo-dark .container { position: relative; z-index: 1; }
.lodo-stat { font-family: var(--serif); font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 300; line-height: 1; letter-spacing: -.03em; }
.lodo-stat-light { opacity: .5; }
.lodo-check { list-style: none; margin: 0; padding: 0; }
.lodo-check li { display: flex; align-items: flex-start; gap: .85rem; padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .96rem; font-weight: 300; }
.lodo-check li:last-child { border-bottom: 0; }
.lodo-check i { color: var(--primary-alt); font-size: .8rem; margin-top: .45rem; }
.lodo-map-wrap { position: relative; }
.lodo-map { width: 100%; max-width: 100%; height: auto; display: block; overflow: visible; }
.lodo-map-field circle { fill: rgba(255,255,255,.1); }
/* the arcs: JS measures each path and writes its own dash length, draw
duration and departure delay, all keyed off distance from Denver, so the
network grows outward from the middle rather than in DOM order. The values
here are only the fallback for a page where the script never ran. */
.lodo-map-links path { fill: none; stroke: var(--primary-alt); stroke-width: 1; stroke-opacity: .32; stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
.lodo-map.is-in .lodo-map-links path { stroke-dashoffset: 0; transition-property: stroke-dashoffset; transition-duration: var(--dur, 1.8s); transition-timing-function: linear; transition-delay: var(--delay, 0ms); }
.lodo-map-cities circle { fill: var(--primary-alt); cursor: pointer; transition: fill .14s linear; }
.lodo-map-cities circle:hover, .lodo-map-cities circle.is-on { fill: #fff; }
.lodo-map-hq, .lodo-map-cities .lodo-map-hq { fill: #fff; }
.lodo-map-ring { fill: none; stroke: #fff; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) { .lodo-map.is-in .lodo-map-ring { animation: lodoPing 2.6s linear infinite; } }
@keyframes lodoPing { 0% { transform: scale(.6); opacity: .9; } 70% { transform: scale(2.4); opacity: 0; } 100% { transform: scale(2.4); opacity: 0; } }
.lodo-map-tip { position: absolute; z-index: 2; left: 0; top: 0; pointer-events: none; transform: translate(-50%, calc(-100% - 14px)); background: #fff; color: var(--ink); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .4rem .65rem; border-radius: 2px; white-space: nowrap; opacity: 0; transition: opacity .14s linear; }
.lodo-map-tip.is-on { opacity: 1; }
.lodo-map-note { margin-top: 1.25rem; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.lodo-map-key { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.14); }
.lodo-map-sep { width: 28px; height: 1px; background: rgba(255,255,255,.25); }
.lodo-regions { margin-top: 3.25rem; padding-top: 2.5rem; border-top: 1px solid rgba(255,255,255,.1); }
.lodo-region { font-family: var(--sans); font-size: .64rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--primary-alt); margin-bottom: .9rem; }
.lodo-cities { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.lodo-cities li { padding: .16rem 0; }
.lodo-cities a { color: rgba(255,255,255,.62); text-decoration: none; transition: color .14s linear; }
.lodo-cities a:hover, .lodo-cities a:focus { color: #fff; text-decoration: none; }
/* 11. TESTIMONIAL on the plum tint ----------------------------------------- */
.lodo-quote-band { background: var(--tint); position: relative; overflow: hidden; }
.lodo-quote-band .container { position: relative; }
.lodo-quote-col { position: relative; }
.lodo-quote-mark { position: absolute; left: .4rem; top: -3.6rem; font-family: var(--serif); font-size: 11rem; line-height: 1; color: var(--primary-alt); opacity: .28; pointer-events: none; }
.lodo-quote { position: relative; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 2.3vw, 1.9rem); line-height: 1.4; color: var(--ink); margin: 0; max-width: 34rem; }
.lodo-quote-by { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 1.4rem; }
/* 12. CLOSING CTA on the plum gradient ------------------------------------- */
.lodo-cta { position: relative; overflow: hidden; color: rgba(255,255,255,.82); background: linear-gradient(135deg, #3F3149 0%, #5A4766 55%, #1F1A24 100%); }
/* the closing band photo is set here, once, for every page: change this url to swap it site wide */
.lodo-cta-photo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: url(/userfiles/2748/images/lodo-yoga-office-stretch.jpg); background-size: cover; background-position: center; opacity: .14; mix-blend-mode: luminosity; pointer-events: none; }
.lodo-cta .container { position: relative; z-index: 1; }
.lodo-cta .lodo-lead { color: rgba(255,255,255,.76); }
/* 13. BREAKPOINTS ---------------------------------------------------------- */
@media (min-width: 576px) {
.lodo-cities { font-size: .9rem; }
}
@media (min-width: 768px) {
.lodo-hero .carousel { min-height: min(calc(100vh - var(--lodo-navh, 76px)), 880px); min-height: min(calc(100svh - var(--lodo-navh, 76px)), 880px); }
}
@media (min-width: 992px) {
.lodo-steps { display: flex; gap: 1.5rem; }
.lodo-rail { left: 2.9rem; right: 2.9rem; top: 1.45rem; bottom: auto; width: auto; height: 1px; }
.lodo-rail-fill { transform-origin: left center; transform: scaleX(var(--lodo-rail, 1)); }
.lodo-step { flex: 1 1 0; padding-left: 0; padding-top: 4.25rem; padding-bottom: 0; padding-right: 1rem; }
.lodo-step:last-child { padding-right: 0; }
}
/* 14. MOTION ---------------------------------------------------------------
Restrained and linear. Every hidden start state below is gated on a class
that JavaScript adds, so if the script never runs the page is a normal
static page with nothing invisible. Reduced-motion users and anyone
editing in the CMS get no motion at all. */
/* split headings: letters fade and lift a little in a wave */
.lodo-split .lodo-w { display: inline-block; }
.lodo-split .lodo-l { display: inline-block; opacity: 0; transform: translate3d(0, .32em, 0); }
.lodo-split.is-in .lodo-l { opacity: 1; transform: none; transition: opacity .4s linear, transform .4s linear; transition-delay: calc(var(--i) * 9ms); }
/* every city marker lights the moment its own line reaches it: JS puts that
exact arrival time in --delay. The flash to white is inside the keyframes,
and the last keyframe deliberately does not declare fill, so the marker
hands its colour straight back to the hover rule when the pop finishes. */
.lodo-map-anim .lodo-map-cities circle { opacity: 0; transform-box: fill-box; transform-origin: center; }
.lodo-map-anim.is-in .lodo-map-cities circle { animation: lodoDotIn .5s linear both; animation-delay: var(--delay, 0ms); }
@keyframes lodoDotIn {
0% { opacity: 0; transform: scale(.4); }
45% { opacity: 1; transform: scale(2.2); fill: #fff; }
100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.lodo-split .lodo-l { transform: none; opacity: 1; }
.lodo-map-anim .lodo-map-cities circle,
.lodo-map-anim.is-in .lodo-map-cities circle { opacity: 1; animation: none; transform: none; }
.lodo-map-links path { stroke-dashoffset: 0; }
.wow { visibility: visible !important; animation: none !important; }
}
/* phone: the hero headline has to fit the narrowest screen we support (340px) */
@media (max-width: 575.98px) {
.lodo-hero .lodo-display { font-size: clamp(1.7rem, 7.4vw, 2.1rem); }
.lodo-hero .lodo-lead { font-size: 1rem; }
.lodo-hero-content { padding: 3.5rem 0 2.5rem; }
.lodo-log-caps { flex-basis: 100%; order: 3; }
.lodo-quote-mark { font-size: 7rem; top: -2.4rem; }
}
/* 15. LOCATION PAGES -------------------------------------------------------
Shared by all 38 cities x 3 modes. Reuses the homepage furniture (blooms,
tint band, gradient band, process rail, framed photos, CTA) and adds the
half-height hero bar, the service switcher, notes lists, the quote form and
the practitioner grid. */
.lodo-lhero { position: relative; background: var(--dark); overflow: hidden; isolation: isolate; }
.lodo-lhero-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center 40%; }
.lodo-lhero-copy { position: relative; z-index: 3; padding: clamp(3.5rem, 8vw, 6rem) 15px clamp(2.75rem, 6vw, 4.5rem); }
.lodo-lhero .lodo-display { color: #fff; font-size: clamp(1.9rem, 3.4vw, 3.1rem); text-shadow: 0 1px 24px rgba(0,0,0,.22); }
.lodo-lhero .lodo-lead { color: rgba(255,255,255,.9); }
.lodo-lhero .lodo-eyebrow { color: var(--primary-alt); }
@media (min-width: 768px) { .lodo-lhero { min-height: 44vh; display: flex; align-items: center; } .lodo-lhero-copy { width: 100%; } }
/* service switcher: one segmented bar, current page lit */
.lodo-switch-band { background: var(--paper); border-bottom: 1px solid var(--line); padding: 1rem 0; }
.lodo-switch-band-bottom { background: var(--tint); border-top: 1px solid var(--line); border-bottom: 0; padding: 2rem 0 2.25rem; }
.lodo-switch { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.lodo-switch-item { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.25rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: border-color .14s linear, background-color .14s linear, color .14s linear; }
.lodo-switch-item:hover, .lodo-switch-item:focus { color: var(--primary); border-color: var(--primary); text-decoration: none; }
.lodo-switch-item.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.lodo-switch-ic { color: var(--primary-alt); font-size: .9rem; }
.lodo-switch-item.is-on .lodo-switch-ic { color: #fff; }
/* chips, notes, fine print, hours */
.lodo-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.lodo-chips span { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); background: var(--tint); border-radius: 999px; padding: .32rem .7rem; }
.lodo-notes { list-style: none; margin: 0; padding: 0; }
.lodo-notes li { display: flex; align-items: flex-start; gap: .75rem; padding: .45rem 0; font-size: .95rem; }
.lodo-notes i { color: var(--primary-alt); font-size: .78rem; margin-top: .42rem; }
.lodo-notes-2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
.lodo-fine { font-size: .78rem; line-height: 1.55; color: var(--muted); }
.lodo-fine-light { color: rgba(255,255,255,.55); }
.lodo-hours { font-size: 1.05rem; margin-bottom: 1rem; }
.lodo-local .lodo-prose p { font-size: 1rem; line-height: 1.75; }
.lodo-local-rule { border-top: 1px solid var(--line); }
/* quote form on the gradient band */
.lodo-form { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 4px; padding: 1.75rem 1.5rem 1.5rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lodo-form .form-group { margin-bottom: 1rem; }
.lodo-form label { display: block; font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: .35rem; }
.lodo-form .form-control { background: rgba(31,26,36,.35); border: 1px solid rgba(255,255,255,.22); border-radius: 2px; color: #fff; font-size: .95rem; font-weight: 300; padding: .6rem .8rem; height: auto; transition: border-color .14s linear, background-color .14s linear; }
.lodo-form .form-control::placeholder { color: rgba(255,255,255,.4); }
.lodo-form .form-control:focus { background: rgba(31,26,36,.55); border-color: var(--primary-alt); color: #fff; box-shadow: none; }
.lodo-form input[type="date"].form-control { color-scheme: dark; }
.lodo-form .btn[disabled] { opacity: .5; cursor: not-allowed; }
.lodo-form .g-recaptcha { transform-origin: left top; }
/* practitioner grid: square headshots, long bios fold to three lines */
.lodo-bios { background: #fff; }
.lodo-bio { height: 100%; }
/* the square headshot tile. The lotus below is the DEFAULT: any card with no
headshot shows it automatically. A real headshot goes inline on the span,
style="background-image: url(...)", and an inline style always outranks
this rule, so adding one needs no class change and no CSS. The tint colour
underneath shows if an inline image ever fails to load. */
.lodo-bio-photo { display: block; width: 100%; aspect-ratio: 1 / 1; margin-bottom: .85rem; border-radius: 4px; background-color: var(--tint); background-image: url(https://images.unsplash.com/photo-1561186865-380ab655cb1d?auto=format&fit=crop&w=500&h=500&q=70); background-size: cover; background-position: center top; box-shadow: inset 0 0 0 1px rgba(90,71,102,.1); }
.lodo-bio-name { font-size: 1.05rem; margin: 0 0 .3rem; }
.lodo-bio-text { font-size: .86rem; line-height: 1.55; color: var(--muted); margin: 0; }
.lodo-bio-text[data-lodo-more] { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lodo-bio-text.is-open { display: block; -webkit-line-clamp: unset; }
.lodo-bio-more { display: inline-block; margin-top: .35rem; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); background: none; border: 0; padding: 0; cursor: pointer; }
.lodo-bio-more:hover, .lodo-bio-more:focus { color: var(--ink); }
@media (max-width: 575.98px) {
.lodo-notes-2col { grid-template-columns: 1fr; }
.lodo-form { padding: 1.25rem 1rem 1rem; }
.lodo-form .g-recaptcha { transform: scale(.86); }
}
/* 16. LOCATION PAGES, PASS 2 -----------------------------------------------
Tighter vertical rhythm and more colour, so the page is not a run of white
blocks with text on them. Colour order down the page is now:
dark hero / white / tint / DARK steps / white prose with a tint panel /
plum gradient form / soft tint into white practitioners / tint / gradient. */
/* tighter section padding, location pages only (the homepage keeps its own) */
.lodo-sec-lp { padding-top: clamp(2.5rem, 4.1vw, 4.25rem); padding-bottom: clamp(2.5rem, 4.1vw, 4.25rem); }
/* the process rail on the dark band: light rail, plum-alt fill and badges */
.lodo-dark .lodo-rail { background: rgba(255,255,255,.14); }
.lodo-dark .lodo-rail-fill { background: var(--primary-alt); }
.lodo-dark .lodo-step-num { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.22); color: #fff; }
.lodo-dark .lodo-step.is-lit .lodo-step-num { background: var(--primary-alt); border-color: var(--primary-alt); color: var(--dark); }
.lodo-dark .lodo-step p { color: rgba(255,255,255,.88); font-weight: 300; }
/* the tint panel that carries the second half of the SEO copy */
.lodo-panel { position: relative; overflow: hidden; background: var(--tint); border-radius: 6px; padding: clamp(1.75rem, 3.4vw, 3.25rem); }
.lodo-panel > .row { position: relative; z-index: 1; }
.lodo-bloom-panel { right: -14%; top: -55%; width: 46%; height: 180%; background: radial-gradient(circle at center, rgba(90,71,102,.16) 0%, rgba(90,71,102,0) 68%); }
/* three small facts under the panel heading, for a little colour */
.lodo-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; }
.lodo-facts li { display: flex; flex-direction: column; }
.lodo-fact-n { font-family: var(--serif); font-size: 1.9rem; line-height: 1; color: var(--primary); letter-spacing: -.02em; }
.lodo-fact-n i { font-size: .72rem; margin-left: .25rem; vertical-align: .75rem; color: var(--primary-alt); }
/* the SEO block headings sit in a narrow column, so they run a size smaller
than the section heads elsewhere and the block stays compact */
.lodo-local .lodo-h2 { font-size: clamp(1.6rem, 2.3vw, 2.2rem); }
.lodo-fact-l { font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: .4rem; }
@media (min-width: 992px) { .lodo-facts { flex-direction: column; gap: 1.1rem; } }
/* form band: the intro copy is on a dark gradient, so it is never grey, and
it holds at the top of the viewport while the form scrolls past it */
.lodo-values .lodo-lead { color: rgba(255,255,255,.8); }
/* sticky needs a non-scroll-container ancestor: overflow clip still hides the
bloom but, unlike overflow hidden, does not become the sticky scrollport.
Browsers without overflow clip simply keep the column in normal flow. */
.lodo-quote-sec { overflow: clip; }
@media (min-width: 992px) {
.lodo-quote-aside { position: -webkit-sticky; position: sticky; top: calc(var(--lodo-navh, 76px) + 1.5rem); align-self: flex-start; }
}
/* practitioners: a soft tint fading into white under the dark form band,
and the grid Jared specified: 2 / 2 / 3 / 4 / 5 / 6 up to our own 1600 step */
.lodo-bios { background: linear-gradient(180deg, #F3EDF7 0%, #FBF9FC 34%, #fff 62%); }
.lodo-bio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.25rem; }
@media (min-width: 768px) { .lodo-bio-grid { grid-template-columns: repeat(3, 1fr); } }
/* 17. YOGA MODE -----------------------------------------------------------
The yoga location page shares everything above; these are the three pieces
it does not share with the chair massage mode. */
/* the headline rate, the one number the yoga page leads with */
.lodo-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .6rem; }
.lodo-price-n { font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; color: var(--primary); letter-spacing: -.02em; }
.lodo-price-u { font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--primary); }
.lodo-price-note { flex: 1 1 100%; font-size: .8rem; color: var(--muted); }
/* small uppercase label above a list, where a full eyebrow would be too loud */
.lodo-label { font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--primary); margin-bottom: .5rem; }
/* the two class formats: glass cards on the dark band */
.lodo-format { height: 100%; padding: 1.9rem 1.75rem 1.75rem; }
.lodo-format-no { font-size: .64rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--primary-alt); margin-bottom: .75rem; }
.lodo-format h3 { font-size: 1.35rem; margin: 0 0 .5rem; }
.lodo-format-meta { font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--primary-alt); margin-bottom: 1.1rem; }
/* .lodo-glass zeroes paragraph margins for the homepage value cards; these
cards run to two paragraphs, so put the spacing back */
.lodo-format p { font-size: .94rem; line-height: 1.65; color: rgba(255,255,255,.86); margin-bottom: .95rem; }
.lodo-format p:last-child { margin-bottom: 0; }
@media (min-width: 992px) { .lodo-bio-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .lodo-bio-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1600px) { .lodo-bio-grid { grid-template-columns: repeat(6, 1fr); gap: 2rem 1.5rem; } }
/* 18. LINK COLOUR ----------------------------------------------------------
One accent for links site wide. Ordinary body copy links are --link and
darken to the plum on hover; links that are white, muted or dark because of
where they sit (the header, the footer, the dark bands) keep their resting
colour and turn --link on hover instead.
The header and the footer apply that hover in their own fields, next to the
rest of their CSS, so look there rather than here for those two. The
copyright row is below because its own field sets no hover colour at all. */
.copyrightWrapper a:hover, .copyrightWrapper a:focus { color: var(--link); }
/* the in-page links that sit on dark or tinted bands */
.lodo-hero-link:hover, .lodo-hero-link:focus { color: var(--link); border-color: var(--link); }
.lodo-switch-item:hover, .lodo-switch-item:focus { color: var(--link); border-color: var(--link); }
.lodo-bio-more:hover, .lodo-bio-more:focus { color: var(--link); }
.lodo-log-btn:hover, .lodo-log-btn:focus { border-color: var(--link); background: rgba(162,94,206,.18); }
/* ==========================================================================
13. MAP: LINKED, SCALABLE, ALIVE (2026-09-18)
Appended last so source order wins. The map is the strongest section on
the page and it has to survive roughly doubling in size, so everything
here is written against the number of cities rather than against 38.
========================================================================== */
/* 13a. ARC DENSITY ----------------------------------------------------------
Thirty-eight arcs out of Denver read as a network. Eighty read as a
scribble unless they thin out as they multiply, so the opacity is a
variable the script sets from the live dot count. The literal fallback is
today's value, so the arcs look right even if the script never runs.
-------------------------------------------------------------------------- */
.lodo-map-links path { stroke-opacity: var(--lodo-arc-op, .32); }
/* 13b. DISPATCH SPARK -------------------------------------------------------
A short lit segment travelling an arc from Denver to a city. Two of these
exist and are reused forever, so the cost is flat no matter how many
cities there are. No drop-shadow on purpose: a filter on an animating SVG
path is the most expensive thing on this page and white at full opacity
against 30 percent arcs already reads as light.
-------------------------------------------------------------------------- */
.lodo-map-links path.lodo-spark {
stroke: #fff;
stroke-width: 2;
stroke-opacity: 1;
stroke-linecap: round;
pointer-events: none;
}
/* 13c. DOTS ARE LINKS NOW ---------------------------------------------------
The script wraps each city dot in a real SVG anchor pointing at that
city's page. Keyboard users get a focus ring, and the dot grows a little
on hover so the hit target is felt as well as seen.
-------------------------------------------------------------------------- */
.lodo-map-cities a { cursor: pointer; }
.lodo-map-cities a:focus { outline: none; }
.lodo-map-cities a:focus-visible circle { stroke: #fff; stroke-width: 2.5; }
.lodo-map-cities circle { transition: fill .14s linear, r .16s linear; }
.lodo-map-cities a:hover circle,
.lodo-map-cities circle.is-on { fill: #fff; r: calc(var(--lodo-dot-r, 7) * 1.45); }
.lodo-map-hq, .lodo-map-cities .lodo-map-hq { fill: #fff; }
/* 13d. MAP AND LIST FIND EACH OTHER -----------------------------------------
Hovering a dot lights its name in the list below and vice versa. Only the
pair being pointed at changes: the rest of the list holds its colour, so
nothing dims out from under the cursor.
-------------------------------------------------------------------------- */
.lodo-cities a { transition: color .14s linear; }
.lodo-cities a.is-on { color: #fff; }
/* after .is-on deliberately: a dot hover whitens the name to match the map,
while hovering the name itself gives the ordinary link accent */
.lodo-cities a:hover, .lodo-cities a:focus { color: var(--link); }
/* 13e. REGION COLUMNS AT SCALE ----------------------------------------------
Eleven names per column today. At eighty cities the longest column runs
past the map beside it, so the columns get their own inner wrap rather
than growing the section without limit.
-------------------------------------------------------------------------- */
.lodo-cities { columns: 1; column-gap: 1.25rem; }
@media (min-width: 576px) { .lodo-regions > div { break-inside: avoid; } }
/* 13f. MOTION OFF ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.lodo-map-links path.lodo-spark { display: none; }
.lodo-map-cities circle { transition: fill .14s linear; }
.lodo-map-cities a:hover circle, .lodo-map-cities circle.is-on { r: var(--lodo-dot-r, 7); }
}
/* 13g. LOCATIONS SECTION RHYTHM ---------------------------------------------
The gap between the proof list and the region columns was 5.75rem, which on
the dark band read as a break between two sections rather than a divider
inside one. The rule stays, the air around it is halved.
-------------------------------------------------------------------------- */
.lodo-regions { margin-top: 2.25rem; padding-top: 1.75rem; }
.lodo-map-note { margin-top: 1rem; }
/* ==========================================================================
14. POLISH PASS (2026-09-18)
Four things, each one a thing that was actually wrong on screen rather
than a preference. Appended last so source order wins.
========================================================================== */
/* 14a. THE VALUES BAND ------------------------------------------------------
The biggest elegance problem on the page. The photograph behind this band
is set to opacity .18 with mix-blend-mode luminosity, which sounds faint,
but luminosity blending lifts bright areas hard and that shot has a blown
out sky. The result was a legible mountain lake with a figure on a dock
running straight through the glass cards: a stock photo with a purple
filter over it, which is the exact look the brief rules out.
So the photo is pushed back to texture, and a directional scrim weights
the left where the heading and the first cards sit. The photo still gives
the band depth. It no longer competes with the type.
-------------------------------------------------------------------------- */
.lodo-values-photo { opacity: .2; }
.lodo-values::after {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: linear-gradient(100deg, rgba(31,26,36,.56) 0%, rgba(31,26,36,.32) 44%, rgba(31,26,36,.06) 100%);
pointer-events: none;
}
/* the container already carries z-index 1, so it stays above the new scrim */
.lodo-glass { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.17); }
.lodo-glass p { color: rgba(255,255,255,.78); }
/* homepage value cards: no frosted glass, just a hairline frame over the band */
.lodo-values .lodo-glass { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* 14b. HEADINGS THAT WRAP BADLY ---------------------------------------------
"One planner, start to / finish" and "One partner. Everything taken / care
of." both broke with one orphaned word on the last line. Balancing the
wrap is a one line fix that browsers without support simply ignore.
-------------------------------------------------------------------------- */
h1, h2, h3, .lodo-h2, .lodo-display, .lodo-stat,
.lodo-glass h3, .lodo-tile-title, .lodo-step h3 { text-wrap: balance; }
.lodo-lead, .lodo-tile-text, .lodo-glass p { text-wrap: pretty; }
/* 14c. THE CLIENT LOGO WALL -------------------------------------------------
Nike, Goldman Sachs, Cigna, Fitbit, 23andMe, Kaiser Permanente and Perkins
Coie are the single most persuasive thing on this page, and they were set
to grayscale at .6 opacity on a pale tint, which left Goldman Sachs and
23andMe close to unreadable. Lifted enough to be legible, still quiet
enough to stay a proof strip rather than a sponsor banner, and they come
up to full strength when the row is hovered.
-------------------------------------------------------------------------- */
.lodo-client-logo { opacity: .82; filter: grayscale(1) contrast(1.15); transition: opacity .18s linear, filter .18s linear; }
.lodo-marquee:hover .lodo-client-logo { opacity: 1; }
.lodo-clients-label { color: var(--primary); opacity: .85; }
/* 14d. THE SERVICES HEADER GAP ----------------------------------------------
The heading column is shorter than the photograph beside it, and the row
also carried mb-5, so on wide screens there was roughly 140px of empty
paper between the lead paragraph and the first tile. The photo keeps its
height; the gap under it comes back to the page.
-------------------------------------------------------------------------- */
@media (min-width: 992px) {
.lodo-services .row.align-items-center.mb-5 { margin-bottom: 1.75rem !important; }
}
/* the offset frame behind a photo only read as intentional on two sides;
pulling it in makes it a deliberate detail rather than a stray outline */
.lodo-photo::after { top: 18px; right: -18px; bottom: -18px; left: 18px; opacity: .45; }
/* 19. OTHER SERVICES PAGE ---------------------------------------------------
The service tile as a static card. The homepage tiles are links and light up
on hover; these are plain cards with nowhere to go, so every hover change is
switched back off (hover is for clickable things only). Icons here are Font
Awesome glyphs rather than the drawn SVG set, so they get a size. */
.lodo-tile-flat { padding-right: 1.4rem; }
.lodo-tile-flat:hover { background: var(--paper); border-color: var(--line); box-shadow: none; }
.lodo-tile-flat:hover::before { transform: scaleX(0); }
.lodo-tile-flat:hover .lodo-tile-icon { background: #fff; color: var(--primary); box-shadow: inset 0 0 0 1px rgba(90,71,102,.18), 0 0 0 6px rgba(169,143,187,.12); }
.lodo-tile-icon i { font-size: 1.3rem; }
h3.lodo-tile-title { font-size: 1.18rem; margin: 0 0 .35rem; }
/* a framed photo sits in this section on the Other Services page, and the
offset frame reaches 3px past the phone gutter, so the section clips it */
.lodo-local { overflow: hidden; }
/* the program cards on the general yoga page use Font Awesome faces in the
glass card icon slot, which is otherwise sized for the drawn SVG set */
.lodo-glass-icon i { font-size: 2.1rem; }
/* 20. MANAGEMENT BIOS -------------------------------------------------------
Three bio cards under the usual hero bar. The headshots
the client has are small (two are 224px square), so they are shown as small
round portraits on a background span instead of being stretched. */
.lodo-mgmt { height: 100%; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 2rem 1.75rem; box-shadow: 0 1px 2px rgba(31,26,36,.04), 0 18px 40px rgba(31,26,36,.05); }
.lodo-mgmt-photo { display: block; width: 132px; height: 132px; border-radius: 50%; margin-bottom: 1.4rem; background-color: var(--tint); background-size: cover; background-position: center; box-shadow: 0 0 0 6px rgba(169,143,187,.18); }
.lodo-mgmt-name { font-size: 1.45rem; margin: 0 0 1rem; }
.lodo-mgmt p { font-size: .95rem; line-height: 1.7; }
.lodo-mgmt .lodo-label { font-size: .66rem; }
@media (max-width: 575.98px) { .lodo-mgmt { padding: 1.5rem 1.25rem; } }
/* 21. CLIENTS AND TESTIMONIALS ----------------------------------------------
Eighteen quotes of very different lengths. CSS columns pack them like a
masonry wall with no script: one column on phones, two from 768, three from
1200. Each card refuses to split across a column break. */
.lodo-tm-grid { columns: 1; column-gap: 1.5rem; }
@media (min-width: 768px) { .lodo-tm-grid { columns: 2; } }
@media (min-width: 1200px) { .lodo-tm-grid { columns: 3; } }
.lodo-tm { display: inline-block; width: 100%; margin: 0 0 1.5rem; padding: 1.6rem 1.5rem 1.4rem; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; -webkit-column-break-inside: avoid; break-inside: avoid; }
.lodo-tm-mark { display: block; height: 1.5rem; font-family: var(--serif); font-size: 3.2rem; line-height: 1; color: var(--primary-alt); }
.lodo-tm-text { font-size: .95rem; line-height: 1.7; margin: 0 0 1.1rem; }
.lodo-tm-by { font-family: var(--serif); font-size: 1.08rem; line-height: 1.25; }
.lodo-tm-where { display: block; margin-top: .35rem; font-family: var(--sans); font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
/* 22. FAQ ------------------------------------------------------------------
A Bootstrap 4 collapse accordion, restyled: hairline rows, the question set
in the serif, and a plus that turns into a cross when its answer is open.
The whole row is the button, so the tap target is the full width. */
.lodo-faq { border-top: 1px solid var(--line); }
.lodo-faq-item { border-bottom: 1px solid var(--line); }
.lodo-faq-q { margin: 0; font-size: 1rem; }
.lodo-faq-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.2rem 0; background: none; border: 0; text-align: left; font-family: var(--serif); font-size: clamp(1.08rem, 1.45vw, 1.3rem); font-weight: 400; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); cursor: pointer; transition: color .14s linear; touch-action: manipulation; }
.lodo-faq-btn:hover, .lodo-faq-btn:focus-visible { color: var(--link); }
/* no box on a mouse click or a tap; the keyboard focus ring stays */
.lodo-faq-btn:focus { outline: 0; box-shadow: none; }
.lodo-faq-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.lodo-faq-btn i { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .68rem; color: var(--primary); box-shadow: inset 0 0 0 1px rgba(90,71,102,.28); transition: transform .14s linear, background-color .14s linear, color .14s linear; }
.lodo-faq-btn[aria-expanded="true"] i { transform: rotate(45deg); background: var(--primary); color: #fff; box-shadow: none; }
.lodo-faq-a { padding: 0 3.4rem 1.5rem 0; font-size: .98rem; line-height: 1.75; }
@media (max-width: 575.98px) { .lodo-faq-a { padding-right: 0; } }
/* 23. PARTNER WITH US -------------------------------------------------------
The partner form is a CMS form inside the dark glass panel. Two controls
need help there: the open State dropdown would otherwise list white text on
the browser's white menu, and the resume upload shows its file name in the
default dark text. The requirement lists in the glass cards drop the bottom
rule the dark band list carries. */
.lodo-form select.form-control option { color: var(--ink); background: #fff; }
.lodo-form input[type="file"] { display: block; width: 100%; max-width: 100%; color: rgba(255,255,255,.8); font-size: .88rem; }
.lodo-form .formbuilder-required { color: var(--primary-alt); }
.lodo-form-cms .btn-primary { background: #fff; border-color: #fff; color: var(--primary) !important; }
.lodo-form-cms .btn-primary:hover, .lodo-form-cms .btn-primary:focus { background: var(--tint); border-color: var(--tint); }
.lodo-format .lodo-check li { padding: .6rem 0; font-size: .94rem; color: rgba(255,255,255,.86); }
.soro-blog-card {background: white !important;}
@media(min-width: 1400px){
.container-fluid.blog-wrapper .col-12.col-lg-6.py-3 {
flex: 0 0 33.3333333333% !important;
max-width: 33.3333333333% !important;
}
}
.blog-item-image img {
aspect-ratio: 4/3;
object-fit: contain;
}
/* PAGE SPECIFIC */
/* FOOTER */