/* * about.css v1.1.7 * * v1.1.7 — The real fix, from the live DOM. Measured: #page/#content/#primary * all rendered at 455px against a 401px , AND the site header * rendered at 455 too — i.e. the whole layout viewport had expanded to * fit #page, not just the carousel (which measured 423, comfortably * inside). Root cause: is a COLUMN flex, so #page is a flex * item on the CROSS axis, where flex-shrink does nothing — that's why * every flex-shrink attempt failed. The cross-axis control is an * explicit width. So: #page + #content get width:100% (resolves to the * 401px ) + min-width:0; #primary fills 401 and clips. Once #page * stops overflowing, the layout viewport collapses to 401 and the * header normalizes on its own. Mobile + About page only. Theme v2.6.2. * * v1.1.6 — (superseded) #page min-width:0 + flex-shrink:1 AND #primary * overflow-x:hidden together. flex-shrink was a cross-axis no-op, so * #page never bound; #primary dutifully filled 100% of a 455px #page. * v1.1.5 — (half) #page "shrinkable" via flex-shrink — cross-axis no-op. * v1.1.4 — (half) overflow-x:hidden on #primary; inert while #page was wide. * * v1.1.3 — (superseded) forced #primary width:100% on mobile; correct but * insufficient alone — the non-shrinking #page above it still * inflated from the carousel's intrinsic width. * * v1.1.2 — (reverted) container-type:inline-size on __inner. Collapsed the * shrink-to-fit #primary on desktop; superseded by v1.1.3. * * v1.1.1 — Mobile carousel card centering fix. The card inherited the body's * max-width: 540px, and a flex item's default min-width: auto floored * each card at that content width (~540px), overflowing the viewport * and pushing the content (and the heading) off-center to the right. * Fix: the card gets min-width: 0 + width: 100% so it pins to the * scroller width; the 540px body cap now applies on desktop only * (mobile body fills the card). Scroller gets min-width: 0 / * max-width: 100% as overflow insurance. CSS-only — no template / * JS / functions.php change (theme stays v2.6.2). * * About Us agent roster (page-about-us.php). * * Two layouts off one markup: * - Mobile (<768px): horizontal scroll-snap CAROUSEL. .lore-about__rows is * the flex scroller; each .lore-about__row is a full-width snap card * (portrait + name + role + License # + bio). A dot indicator * (.lore-about__dots) sits below; about.js keeps the active dot in sync * with scroll and wires tap-dot -> scrollTo. This mirrors the §8 Rent Roll * mobile carousel (listing.css v1.0.33+ / rent-roll.js) so the two feel * like one component. * - Desktop (>=768px): editorial alternating profile rows. The scroller * reverts to a plain block, the card chrome is removed, rows lay out * portrait-beside-bio alternating sides (.lore-about__row--flip), and the * dots are hidden. about.js reads the dots' visibility to know it is in * table/desktop mode and no-ops there (same contract as rent-roll.js). * * v1.1.0 — add the mobile carousel + dots. v1.0.0 was a plain stacked-card * mobile view; the rows/cards and desktop editorial layout are * otherwise unchanged. * * Every rule is scoped under .lore-about. Brand tokens per tokens.css. * Dot anatomy (44x44 tap target, 6px cabernet mark, :focus-visible ring at * outline-offset -8px) mirrors .lore-listing__rent-roll-dot verbatim * (convention #22). */ .lore-about { width: 100%; } /* Measured root cause (live DOM): is a COLUMN flex (display:flex), so #page is a flex item on the CROSS (horizontal) axis. flex-shrink applies only to the MAIN (vertical) axis — which is why v1.1.5/1.1.6's flex-shrink:1 never bound #page's width. #page stayed content-sized (~455px) and overflowed the 401px , expanding the layout viewport so even the site header rendered at 455. Everything at width:100% inflated with it. The cross-axis control is an explicit width: #page and #content both measured 455 with overflow:visible, so both get width:100% (resolves against the 401px ) + min-width:0 (drops the auto min-content floor). #primary then fills 401 and clips. Mobile + About page only; desktop untouched. */ @media (max-width: 767px) { body.page-template-page-about-us #page, body.page-template-page-about-us #content { width: 100%; min-width: 0; max-width: 100%; } .lore-about-page { width: 100%; min-width: 0; max-width: 100%; overflow-x: hidden; } } .lore-about__inner { max-width: 920px; margin: 0 auto; padding: var(--space-10) var(--space-4) var(--space-12); color: var(--color-text); } @media (min-width: 768px) { .lore-about__inner { padding: 60px var(--space-6) var(--space-12); } } /* ─── Heading ───────────────────────────────────────────────────────── */ .lore-about__head { text-align: center; margin: 0 0 var(--space-10); } .lore-about__title { margin: 0; font-size: var(--fs-3xl); line-height: var(--lh-tight); color: var(--color-cabernet); } .lore-about__empty { text-align: center; font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--color-text-muted); margin: 0; } /* ─── Mobile: horizontal scroll-snap carousel ───────────────────────── */ .lore-about__rows { display: flex; flex-direction: row; width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: 0; gap: var(--space-3); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; } .lore-about__rows::-webkit-scrollbar { display: none; } /* Each row is a full-width snap card on mobile. The card is itself a centered vertical stack (portrait over text). Equal height comes from the flex scroller's default align-items: stretch. */ .lore-about__row { flex: 0 0 100%; width: 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); margin: 0; text-align: center; padding: var(--space-6) var(--space-5); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .lore-about__portrait-wrap { flex: 0 0 auto; } .lore-about__portrait { display: block; width: 220px; max-width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); background: var(--color-surface-muted); } .lore-about__monogram { display: flex; align-items: center; justify-content: center; width: 220px; max-width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); background: var(--color-bay-mist); color: var(--color-harbor-blue); font-family: var(--font-display); font-size: var(--fs-3xl); line-height: 1; letter-spacing: var(--ls-tight); } .lore-about__body { max-width: 100%; } .lore-about__name { margin: 0; font-size: var(--fs-2xl); line-height: var(--lh-snug); color: var(--color-text); } .lore-about__rule { width: 32px; height: 2px; background: var(--color-scarlet); border-radius: 0; margin: var(--space-3) auto var(--space-4); } .lore-about__position { margin: 0 0 var(--space-2); font-size: var(--fs-base); color: var(--color-text-muted); } .lore-about__license { margin: 0 0 var(--space-4); font-size: var(--fs-sm); color: var(--color-text-muted); } .lore-about__bio { margin: 0; font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--color-text); } /* ─── Dot indicator (mobile only) — mirrors rent-roll dots ──────────── */ .lore-about__dots { display: flex; justify-content: center; align-items: center; gap: var(--space-1); margin-top: var(--space-4); } .lore-about__dot { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; } .lore-about__dot:hover, .lore-about__dot:focus, .lore-about__dot:active { background: transparent; } .lore-about__dot:focus-visible { outline: 2px solid var(--color-cabernet); outline-offset: -8px; border-radius: var(--radius-round); } .lore-about__dot-mark { display: block; width: 6px; height: 6px; border-radius: var(--radius-round); background: var(--color-border); transition: background 150ms ease, transform 150ms ease, opacity 150ms ease; } .lore-about__dot:hover .lore-about__dot-mark, .lore-about__dot:active .lore-about__dot-mark { background: var(--color-cabernet); opacity: 0.5; } .lore-about__dot--active .lore-about__dot-mark { background: var(--color-cabernet); opacity: 1; transform: scale(1.3); } /* ─── Desktop (>=768px): editorial rows, carousel reset off ─────────── */ @media (min-width: 768px) { .lore-about__rows { display: block; width: auto; overflow: visible; scroll-snap-type: none; gap: 0; } .lore-about__row { flex: initial; scroll-snap-align: none; scroll-snap-stop: normal; display: flex; flex-direction: row; align-items: center; gap: var(--space-10); margin: 0 0 var(--space-10); padding: 0; background: none; border: 0; border-radius: 0; text-align: left; } .lore-about__row:last-child { margin-bottom: 0; } .lore-about__row--flip { flex-direction: row-reverse; } .lore-about__portrait, .lore-about__monogram { width: 240px; max-width: none; } .lore-about__body { flex: 1 1 auto; max-width: 540px; } .lore-about__rule { margin-left: 0; margin-right: auto; } .lore-about__row--flip .lore-about__body { text-align: right; } .lore-about__row--flip .lore-about__rule { margin-left: auto; margin-right: 0; } /* Dots are the card-mode signal for about.js — hidden here = desktop. */ .lore-about__dots { display: none; } }