anywhere on the site, other than: - .page-hero (dark photo + veil) - .final-cta (navy + Office 2 overlay) - .site-header / .site-footer A = paper = solid white, no overlay B = ivory-dot = ivory background + subtle navy radial dot grid Testimonials get their own third background: T = parchment = warm cream + thin gold hairlines top/bottom These rules live at the END of redesign.css so they override any earlier per-class background declarations across the site. Alternation (B-A-B-A...) is enforced per-page by ordering the matching section classes, not by nth-child selectors. ============================================================ */ .rd { --section-bg-a: var(--color-white); --section-bg-b: var(--color-ivory); --testimonial-bg: #EEE7D8; } /* === B sections (ivory + dot grid) =========================== */ .rd .why-helms, .rd .self-id, .rd .workshops, .rd .tier-stack, .rd .insight-section--ivory, .rd .legal-body--ivory, .rd .team-bio, .rd .about-behavior, .rd .about-bio, .rd .workshops-expectations, .rd .workshops-environment, .rd .referral-share, .rd .concern-visual, .rd .consult-options, .rd .section--ivory { background-color: var(--section-bg-b); background-image: radial-gradient(rgba(13, 31, 60, 0.05) 1.4px, transparent 1.5px); background-size: 22px 22px; } /* === A sections (paper white, plain) ========================= */ .rd .worries, .rd .tier-router, .rd .inaction, .rd .brent, .rd .team, .rd .legal-body, .rd .insight-section, .rd .insight-section--white, .rd .about-experience, .rd .workshops-confidence, .rd .workshops-speaking, .rd .how-it-works, .rd .referral-note, .rd .referral-make, .rd .referral-meet, .rd .concern-bullets, .rd .concern-related, .rd .insight-questions, .rd .consult-contact, .rd .consult-property, .rd .section--paper { background-color: var(--section-bg-a); background-image: none; } /* A rule above lists .insight-section (bare) so that any insight-section without a --ivory or --white modifier defaults to white. The --ivory modifier wins because both selectors are equal specificity and the B block comes first; ordering them so --ivory is later guarantees it. */ .rd .insight-section--ivory { background-color: var(--section-bg-b); background-image: radial-gradient(rgba(13, 31, 60, 0.05) 1.4px, transparent 1.5px); background-size: 22px 22px; } /* === Testimonial — parchment + gold hairlines ================ */ .rd .inline-testimonial, .rd .inline-testimonial--white { background-color: var(--testimonial-bg); background-image: none; border-top: 1px solid var(--color-gold); border-bottom: 1px solid var(--color-gold); } /* === Header / footer parity (LOCKED, 2026-06-03) ============= The footer mirrors the header: same navy token, same 1px rgba-white hairline, no gradient, no diagonal weave, no noise overlay. The hairline sits at the top of the footer (mirror of the header's bottom hairline) to separate the footer cleanly from the final-cta block above. ============================================================ */ .rd .site-footer { background-color: var(--color-navy); background-image: none; border-top: 1px solid rgba(255, 255, 255, 0.10); } .rd .site-footer::before { display: none; } /* === Disable bespoke ::before noise overlays on Why Helms + Meet Brent === These were a previous-design-pass holdover that painted a fractal-noise texture over the section. The section background standard above is the single source of truth across the site — no per-section noise overlays. ============================================================ */ .rd .why-helms::before, .rd .brent::before { display: none; } /* === Meet Brent inner card — ivory panel on the white A section so the card defines itself against the new background without relying on the removed texture overlay. Uses the existing --color-ivory token; no new color introduced. */ .rd .brent .brent__grid { background-color: var(--color-ivory); } /* === Header logo — match footer logo size on desktop (LOCKED, 2026-06-03) The footer logo is sized by width (260px). The header logo now matches that constraint on desktop. Mobile keeps its existing 50px-height cap so the header band stays a reasonable size on small screens. The JS in redesign.js measures the header live and writes --rd-header-height; the sticky breadcrumb and any anchor scroll uses that variable, so the layout adapts automatically when this grows. ============================================================ */ .rd .brand__logo { width: 260px; height: auto; max-width: none; } @media (max-width: 768px) { .rd .brand__logo { width: auto; height: 50px; } } /* === Primary nav text — larger on desktop (LOCKED, 2026-06-03) Bumps the header nav links, dropdown triggers, mega-trigger, and the "Schedule a Consultation" CTA from 0.94rem (~15px) to 1.08rem (~17px) so the nav reads at a comfortable size next to the larger logo. .primary-nav only renders on desktop (mobile uses .mobile-nav with its own typography), so no media query needed. ============================================================ */ .rd .primary-nav__link, .rd .dropdown-trigger, .rd .mega-trigger, .rd .primary-nav__cta { font-size: 1.08rem; } /* === How We Work — engagement ribbon overlays (LOCKED, 2026-06-04) Standard and Bespoke overlays use the same .tier-overlay--ribbon layout as planning.html, but they carry MORE TEXT in the center (5 numbered steps) and that text has to sell the visitor on the personal nature of the engagement. So this variant runs noticeably LARGER type, a wider/heavier center panel, a denser veil over the photo for legibility, and a bigger "Best for" panel on the right. Scoped under .tier-overlay--engagement so the planning + get-clarity overlays are not affected. ============================================================ */ /* Stronger veil over the photo so the larger center text remains readable regardless of how busy the photo is. */ .rd .tier-overlay--engagement .tier-overlay__veil { background: linear-gradient(180deg, rgba(13, 31, 60, 0.55) 0%, rgba(13, 31, 60, 0.72) 55%, rgba(13, 31, 60, 0.88) 100%); } /* Center-steps panel — placed in the ribbon grid's "centerquiz" area so it sits in the TOP-spanning row, then centered both horizontally and vertically within that area via align-self / justify-self. The ribbon grid template defines centerquiz as the full-width top row; we use that area, NOT align-self: end (which would sink the box to the bottom of the area). */ .rd .tier-overlay__center-steps { grid-area: centerquiz; align-self: center; justify-self: center; text-align: center; color: #FFFFFF; } .rd .tier-overlay--engagement .tier-overlay__center-steps { max-width: 560px; width: 100%; padding: clamp(28px, 3vw, 40px) clamp(28px, 3vw, 40px); background: rgba(13, 31, 60, 0.78); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; backdrop-filter: blur(3px); } .rd .tier-overlay__center-steps-eyebrow { font-family: var(--font-sans); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: var(--color-gold); margin: 0 0 22px; text-align: center; } .rd .tier-overlay__center-steps-list { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 14px; } /* List items: centered baseline alignment for the bigger numeral + title pairing */ .rd .tier-overlay__center-steps-list li { display: flex; align-items: baseline; justify-content: center; gap: 18px; padding: 12px 18px; background: rgba(13, 31, 60, 0.45); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 6px; } .rd .tier-overlay__center-steps-num { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.4rem, 2vw, 1.85rem); color: var(--color-gold); line-height: 1; flex-shrink: 0; } .rd .tier-overlay__center-steps-title { font-family: var(--font-serif); font-size: clamp(1.18rem, 1.7vw, 1.45rem); font-weight: 500; line-height: 1.25; color: #FFFFFF; text-align: left; } .rd .tier-overlay__center-steps-cta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.02em; color: var(--color-gold); text-decoration: none; padding: 10px 4px; border-bottom: 1px solid rgba(184, 150, 46, 0.40); transition: border-color .25s var(--rd-ease), color .25s var(--rd-ease), gap .25s var(--rd-ease); } .rd .tier-overlay__center-steps-cta:hover { color: #FFFFFF; border-bottom-color: rgba(255, 255, 255, 0.8); gap: 14px; } .rd .tier-overlay__center-steps-cta-arrow { display: inline-flex; font-family: var(--font-sans); font-size: 1.15rem; } /* "Best for" bullet variant of the alternates list — flat bullet list with bigger type than the planning alternates list. */ .rd .tier-overlay__alternates-list--bullets { list-style: none; padding: 0; margin: 0; } .rd .tier-overlay--engagement .tier-overlay__alternates { padding: clamp(30px, 3.4vw, 44px) clamp(28px, 3vw, 38px); min-width: clamp(320px, 32vw, 420px); background: rgba(13, 31, 60, 0.78); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; } .rd .tier-overlay--engagement .tier-overlay__alternates-header { font-size: 1.05rem; letter-spacing: 0.20em; margin-bottom: 22px; color: var(--color-gold); } .rd .tier-overlay__alternates-list--bullets li { position: relative; padding: 10px 0 10px 24px; font-family: var(--font-sans); font-size: 1.18rem; line-height: 1.5; color: rgba(255, 255, 255, 0.95); } .rd .tier-overlay__alternates-list--bullets li::before { content: ""; position: absolute; left: 0; top: 19px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-gold); } /* === Explainer "?" inside the center-steps list ============== */ /* The step titles are wrapped in .explainer with a clickable button + popup. On the dark step rows, the title text needs to stay white (the default .explainer__term color is gold), and the "?" indicator needs its own compact circular treatment so it doesn't crowd the title. */ .rd .tier-overlay__center-steps .explainer { display: inline-flex; align-items: baseline; position: relative; } .rd .tier-overlay__center-steps .explainer__term { color: #FFFFFF !important; border-bottom: none !important; padding: 0 !important; font-family: var(--font-serif) !important; text-align: left; } .rd .tier-overlay__center-steps .explainer__term::after { content: "?"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 10px; font-size: 0.62em; font-weight: 700; font-style: normal; color: var(--color-gold); background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(184, 150, 46, 0.55); border-radius: 50%; vertical-align: middle; transition: background-color .2s var(--rd-ease), color .2s var(--rd-ease); } .rd .tier-overlay__center-steps .explainer__term:hover::after, .rd .tier-overlay__center-steps .explainer__term:focus-visible::after { background: var(--color-gold); color: var(--color-navy); } /* Popup positioning inside the dark overlay: place above the term and keep the existing .explainer__pop styling for the popup itself. */ .rd .tier-overlay__center-steps .explainer__pop { text-align: left; } /* Mobile: center-steps collapses to full width; box stays for legibility */ @media (max-width: 900px) { .rd .tier-overlay--engagement .tier-overlay__center-steps { max-width: none; background: rgba(13, 31, 60, 0.82); } .rd .tier-overlay--engagement .tier-overlay__center-steps-list li { background: rgba(13, 31, 60, 0.55); } } /* === Quiz-fallback button below the engagement ribbons ====== */ .rd .tier-stack__quiz-fallback { text-align: center; margin-top: clamp(28px, 4vw, 44px); } /* === Why Helms pillars — static, visible by default (LOCKED, 2026-06-03) Previous behavior: the four pillars started invisible (opacity 0) and were only revealed when the why-helms typewriter finished, by JS adding .is-revealed-staged. The typewriter was moved to the homepage hero, so there's nothing left to trigger the staged reveal — without this override the pillars would never appear. Hover lift still works (separate rule). ============================================================ */ .rd .why-helms__grid .pillar { opacity: 1; transform: none; } /* === Mobile sticky action bar (LOCKED, 2026-06-04) Bottom-anchored bar with three quick actions: Directions to the office (Google Maps), Call (tel: link), and Consultation (links to consultation.html). Mobile-only — hidden above 992px so it doesn't compete with the desktop header CTA. Background matches the nav header (navy + thin white hairline at the top edge). Bar is injected by redesign.js so we don't have to edit 70+ HTML files. Body gets a padding-bottom equal to the bar's height so footer content isn't hidden under it. env(safe-area-inset-bottom) keeps the bar above the iPhone home-indicator gesture area. z-index sits below the tour-widget (9000), the tour-widget panel (9100), and the tier-overlays (9500), so any of those that open over the bar correctly cover it. ============================================================ */ .rd .mobile-actions { display: none; } @media (max-width: 992px) { .rd .mobile-actions { /* !important on the positional properties so nothing else can knock the bar off the bottom. Brent saw the bar "floating" mid-page with text above and below it on his phone — symptom of position:fixed being overridden or not applied. */ display: flex !important; position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important; background: var(--color-navy); border-top: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 -8px 22px rgba(13, 31, 60, 0.18); z-index: 8000; padding-bottom: env(safe-area-inset-bottom); font-family: var(--font-sans); /* Promote to its own GPU composite layer so iOS Safari's compositor doesn't shift the bar around during URL-bar transitions or momentum scrolling. */ transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform; /* Reset margin in case a UA stylesheet or generic rule adds any. */ margin: 0 !important; } .rd .mobile-actions__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 6px; color: #FFFFFF; text-decoration: none; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; border-right: 1px solid rgba(255, 255, 255, 0.10); transition: background-color .18s ease; min-height: 62px; } .rd .mobile-actions__item:last-child { border-right: none; } .rd .mobile-actions__item:hover, .rd .mobile-actions__item:active, .rd .mobile-actions__item:focus-visible { background: rgba(255, 255, 255, 0.08); outline: none; } .rd .mobile-actions__icon { width: 22px; height: 22px; color: var(--color-gold); flex-shrink: 0; } .rd .mobile-actions__label { line-height: 1; } /* CTA column — gold background to make the consultation action the obvious primary among the three. Icon + label flip to navy. */ .rd .mobile-actions__item--cta { background: var(--color-gold); color: var(--color-navy); } .rd .mobile-actions__item--cta .mobile-actions__icon { color: var(--color-navy); } .rd .mobile-actions__item--cta:hover, .rd .mobile-actions__item--cta:active, .rd .mobile-actions__item--cta:focus-visible { background: #d8b878; } /* Push body content up so the footer (or last section) isn't hidden behind the fixed bar. .rd is the body class. */ .rd { padding-bottom: calc(62px + env(safe-area-inset-bottom)); } } /* Hide bar in print — these are interactive-only actions. */ @media print { .rd .mobile-actions { display: none !important; } } /* === Mobile action-bar minimize affordance (LOCKED, 2026-06-04) Same pattern as the hamburger minimize: a gold minus circle on the bar's top-left corner slides the whole bar off the right edge of the screen. A small navy tab on the right edge restores it. State persists in sessionStorage. Body class shrinks padding-bottom while minimized so the user reclaims the bottom 62px of viewport. ============================================================ */ .rd .mobile-actions__min { display: none; } .rd .mobile-actions-stub { display: none; } @media (max-width: 992px) { /* Minus circle floats on the top-left corner of the bar, half overlapping with page content above. Mirrors the hamburger widget's gold minus button. */ .rd .mobile-actions__min { position: absolute; top: -14px; left: 12px; width: 34px; height: 34px; border-radius: 50%; background: var(--color-gold); color: var(--color-navy); border: 2px solid #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 1.4rem; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; box-shadow: 0 3px 10px rgba(13, 31, 60, 0.35); z-index: 8001; transition: transform .2s var(--rd-ease), background-color .2s var(--rd-ease); } .rd .mobile-actions__min:hover, .rd .mobile-actions__min:active, .rd .mobile-actions__min:focus-visible { background: #d8b878; transform: scale(1.08); outline: none; } /* When the bar is already minimized, the minus button slid off with the bar — hide so it doesn't render anywhere weird. */ .rd .mobile-actions.is-minimized .mobile-actions__min { display: none; } /* Slide the whole bar off the right edge with a 3D transform so it keeps its own composite layer (no jitter). !important needed to beat the bar's own bulletproofed transform: translateZ(0). */ .rd .mobile-actions.is-minimized { transform: translate3d(105%, 0, 0) !important; pointer-events: none; transition: transform .35s var(--rd-ease); } /* Smooth slide-back animation when restoring. */ .rd .mobile-actions { transition: transform .35s var(--rd-ease); } /* Restore stub — small navy tab on the right edge, sitting above the home indicator. Visible only when the bar is minimized. */ .rd .mobile-actions-stub { position: fixed; right: 0; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 8000; width: 38px; height: 58px; background: var(--color-navy); color: #FFFFFF; border: none; border-left: 3px solid var(--color-gold); border-radius: 12px 0 0 12px; align-items: center; justify-content: center; cursor: pointer; box-shadow: -10px 0 22px rgba(13, 31, 60, 0.30); padding: 0; font-family: var(--font-sans); font-size: 1.5rem; line-height: 1; } .rd .mobile-actions-stub.is-visible { display: inline-flex; } .rd .mobile-actions-stub:hover, .rd .mobile-actions-stub:active, .rd .mobile-actions-stub:focus-visible { background: #1a2d52; outline: none; } /* When minimized, drop body padding-bottom so the user gets the bottom 62px of viewport back. Only safe-area-inset-bottom is retained so content doesn't hide under the iPhone home indicator. */ .rd.is-actions-minimized { padding-bottom: env(safe-area-inset-bottom) !important; transition: padding-bottom .35s var(--rd-ease); } } /* === Mobile hero typewriter — dedicated line (LOCKED, 2026-06-04) PROBLEM: The homepage hero headline ends with "...and you start [WORD]." The cycling word changes length ("living" = 6 chars, "breathing easier" = 16 chars), and on mobile the headline wraps differently each tick: sometimes the word fits at the end of the prior line, sometimes it drops to a new line, sometimes the trailing period jumps alone. The text appeared to bounce between two layouts each second. FIX: Wrap the typewriter span + trailing period in a new line container, .page-hero__typewriter-line. On mobile, force display: block so the word + period always sit on their own row underneath the static intro text. The static text never reflows; only the dedicated line changes content. On desktop, the wrapper is still display: inline so the original flowing headline is preserved. ============================================================ */ @media (max-width: 700px) { .rd .page-hero__typewriter-line { display: block; margin-top: 6px; } } /* === Mobile consultation-hero crop fix (LOCKED, 2026-06-04) PROBLEM: The consultation page hero uses Brent in Home.png — Brent is seated on the LEFT side of the kitchen table, with two clients to the right. The inline style on the sets object-position: center 25%, which works on desktop's wide landscape crop but on mobile's 4/5 portrait crop, the center-X anchor crops Brent out of frame — leaving only the two clients visible. FIX: On mobile, anchor the X position to ~20% so Brent stays visible in the cropped portrait frame. Selector targets only the consultation hero (via its unique aria-labelledby) so no other page is affected. !important is required to overcome the inline style on the . ============================================================ */ @media (max-width: 992px) { [aria-labelledby="consult-hero-headline"] .page-hero__image { object-position: 22% 28% !important; } } /* === Concerns + Insights hero — pattern match homepage (LOCKED, 2026-06-04) Brent: "Pattern the hero section on the concerns and insights pages after the hero section on the homepage. That should make it work." The fix is NEGATIVE space: previously this block held an override that gave these two pages an ivory veil with navy text, which fought against the global .rd .page-hero__veil rule (navy gradient + white text — the homepage pattern). Deleting the override lets these two pages inherit the canonical homepage hero treatment naturally: - Dark navy gradient veil over the photo (visible photo behind) - White headline + sub text on the dark wash - Same animation cascade as the homepage hero copy If a future page needs a different hero treatment, scope it with a page-specific aria-labelledby selector but be sure white text on the veil still reads. Don't break the inheritance. ============================================================ */ /* === Referral one-pager share section (LOCKED, 2026-06-04) Sits between Make a Referral and the Lunch Invitation on referral-partners.html. Three buttons let the referring professional download, email-from-their-own-inbox, or auto-print the firm- introduction one-pager. Quiet ivory backdrop keeps it visually distinct from the white Make a Referral above without competing. ============================================================ */ .rd .referral-share { /* Background-color/image are inherited from the B-section block at the end of redesign.css (added .referral-share to that selector list so it adopts the canonical ivory + navy-dot-grid pattern). Only layout properties live here. */ padding: clamp(56px, 8vw, 88px) clamp(20px, 5vw, 48px); } .rd .referral-share__inner { max-width: 720px; margin: 0 auto; text-align: center; } .rd .referral-share__eyebrow { font-family: var(--font-sans); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: var(--color-gold); margin: 0 0 14px; } .rd .referral-share__headline { font-family: var(--font-serif); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 500; line-height: 1.18; color: var(--color-navy); margin: 0 0 18px; letter-spacing: -0.005em; } .rd .referral-share__body { font-family: var(--font-serif); font-size: clamp(1.02rem, 1.4vw, 1.16rem); line-height: 1.6; color: var(--color-charcoal); margin: 0 auto 32px; max-width: 580px; } .rd .referral-share__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } @media (max-width: 600px) { .rd .referral-share__actions { flex-direction: column; align-items: stretch; gap: 12px; } .rd .referral-share__actions .btn { width: 100%; } } /* === Mobile print-result button removal (LOCKED, 2026-06-04) Brent: "on your path, take out 'print my result' button for mobile." The Find-Your-Path quiz on planning.html and the matching quiz on how-we-work.html end with a "Print My Result" button + its hint paragraph ("Print your answers and bring them to your consultation"). Printing from a phone isn't useful, so hide the button, the hint, and the wrapper container on mobile. Surgical: every other page also uses .quiz-modal__actions (for a "Schedule a Consultation" CTA on the concern/insight quiz results), so we only hide the container when it actually contains a [data-quiz-print] button. The child-selector rules are the broad- browser fallback for environments without :has() support — those leave the empty wrapper visible but at least no print button. ============================================================ */ @media (max-width: 992px) { .rd .quiz-modal__actions [data-quiz-print] { display: none !important; } .rd .quiz-modal__actions-hint { display: none !important; } /* Modern browsers (Safari 15.4+, Chrome 105+, Firefox 121+) — collapse the now-empty actions container so no padding band remains. */ .rd .quiz-modal__actions:has([data-quiz-print]) { display: none !important; } } /* === Mobile tour-widget panel scroll fix (LOCKED, 2026-06-04) PROBLEM: When the hamburger panel opens on a phone, the reading list + router (Want to talk it through? / Want to sit in on a workshop? / End my guided tour, etc.) overflows the viewport. The panel had `overflow: hidden` and the comment "No scroll — content must fit" — true on desktop, false on phones. Worse, trying to swipe inside the panel scrolled the PAGE underneath instead, because body scroll wasn't locked when the panel opened. FIX: Make the panel itself the scroll container on mobile, keep the close button anchored to the corner of the panel even while content scrolls, and lock body scroll via JS so swipes inside the panel never bubble to the page. `overscroll-behavior: contain` provides defense-in-depth even on browsers where the JS lock fails. Body-scroll lock is in redesign.js — see the [data-tour-toggle] handler. Restored on minimize, End Tour, Restart, and Escape. ============================================================ */ @media (max-width: 992px) { .rd .tour-widget__panel { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Close button: switch from absolute (scrolls with content) to fixed so it always sits in the top-right corner of the viewport while the panel is open. The panel covers the full viewport width on mobile (width: min(480px, 100vw) -> 100vw), so viewport top-right === panel top-right. .tour-widget.is-open dissolves the widget's transform (see the .is-open rule above), so position:fixed escapes correctly to the viewport rather than being trapped to the widget. */ .rd .tour-widget.is-open .tour-widget__close { position: fixed; top: 18px; right: 18px; z-index: 9101; } } /* === Mobile tour-widget minimize affordance (LOCKED, 2026-06-04) PROBLEM: On mobile, the floating tour widget sits over body text, making it hard to read or interact with the page. FIX: A small gold minus-circle on the corner of the handle that slides the entire widget off-screen to the right when tapped. A tiny navy stub remains anchored to the right edge — tapping it slides the widget back into view. State persists in sessionStorage so the minimize choice survives page-to-page navigation during a tour. Desktop-safe: minimize button is display:none above 992px, the stub is display:none above 992px, and the slide-off transform is only applied inside the mobile media query — so even if `is-minimized` leaks to desktop, the widget remains visible. ============================================================ */ .rd .tour-widget__min { position: absolute; top: -10px; left: -12px; width: 34px; height: 34px; border-radius: 50%; background: var(--color-gold); color: var(--color-navy); border: 2px solid #FFFFFF; /* Desktop: hidden. Mobile media query below flips this to inline-flex. */ display: none; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 1.4rem; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; box-shadow: 0 3px 10px rgba(13, 31, 60, 0.35); z-index: 9050; transition: transform .2s var(--rd-ease), background-color .2s var(--rd-ease); } .rd .tour-widget__min:hover, .rd .tour-widget__min:focus-visible { background: #d8b878; transform: scale(1.08); outline: none; } /* When the panel is open, the close button (×) inside the panel handles close — hide the minimize affordance so they don't compete. */ .rd .tour-widget.is-open .tour-widget__min { display: none !important; } /* Restore stub — tiny tab fixed to the right edge of the viewport, only visible when the widget is minimized. */ .rd .tour-widget-stub { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 9000; width: 40px; height: 72px; background: var(--color-navy); color: #FFFFFF; border: none; border-left: 3px solid var(--color-gold); border-radius: 14px 0 0 14px; font-size: 1.4rem; /* Desktop: hidden. Mobile + .is-visible flips this on. */ display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: -10px 0 24px rgba(13, 31, 60, 0.30); padding: 0; font-family: var(--font-sans); } .rd .tour-widget-stub:hover, .rd .tour-widget-stub:focus-visible { background: #1a2d52; outline: none; } @media (max-width: 992px) { /* Show the minus circle on mobile (unless panel is open or widget minimized). */ .rd .tour-widget__min { display: inline-flex; } .rd .tour-widget.is-minimized .tour-widget__min { display: none; } /* Slide the whole widget off the right edge when minimized. */ .rd .tour-widget.is-minimized { transform: translate(120%, -50%); pointer-events: none; transition: transform .35s var(--rd-ease); } /* Show the stub only when the widget is minimized. */ .rd .tour-widget-stub.is-visible { display: inline-flex; } } /* === Mobile hero — navy backdrop so white text reads (LOCKED, 2026-06-04) BUG: On mobile (≤992px), styles.css collapses .page-hero so the photo becomes a small banner at the top, the veil is display:none, and the text block sits below on the body's ivory background. The .rd text colors are WHITE, which means white-on-ivory = invisible. FIX: Force a navy backdrop on the mobile .page-hero, restore a dark veil sitting over the photo, and ensure all text inside the mobile hero is white. Also fix the .btn--secondary which uses navy borders by default — on the new navy backdrop those would disappear. ============================================================ */ @media (max-width: 992px) { .rd .page-hero { background-color: var(--color-navy); border-bottom: none; } /* Bring the veil back on mobile so the photo banner above keeps a consistent darkened tone that matches the text-block below. */ .rd .page-hero__veil { display: block; background: linear-gradient( 180deg, rgba(13, 31, 60, 0.30) 0%, rgba(13, 31, 60, 0.55) 100% ); } .rd .page-hero__inner { background-color: var(--color-navy); padding-top: 48px; padding-bottom: 64px; } .rd .page-hero__headline, .rd .page-hero__copy h1 { color: #FFFFFF; } .rd .page-hero__sub { color: rgba(255, 255, 255, 0.92); } /* Secondary buttons default to navy-on-transparent — invisible on the navy backdrop. Flip to white-on-transparent for mobile hero. */ .rd .page-hero .btn--secondary { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.65); background-color: transparent; } .rd .page-hero .btn--secondary:hover, .rd .page-hero .btn--secondary:focus-visible { background-color: rgba(255, 255, 255, 0.10); border-color: #FFFFFF; color: #FFFFFF; } } /* === Meet Brent credentials + closing line (LOCKED, 2026-06-03) Every credential in the .brent__list is wrapped in an explainer button, so each role gets its own gold "?" indicator. The benefit description sits inside the popup (not in the visible flow), so the list stays a tight roster of credentials at a glance. A short you-centered closing line sits between the list and the "Read more about Brent" CTA. ============================================================ */ .rd .brent__close { margin: 18px 0 22px; font-style: italic; color: var(--color-charcoal); } /* === Footer — 4-column grid mirroring the nav (LOCKED, 2026-06-03) Was a 3-column grid (Brand / Explore / Areas We Serve). The footer now mirrors the primary nav + dropdowns: 1. Brand — logo, address, phone, hours, social 2. Plan With Brent — Get Clarity, Planning, How We Work, Insights, Workshops, Schedule a Consultation 3. About — About Brent, Our Team, Areas We Serve 4. For Professionals — Referral Partners, Working With Advisors Responsive collapse: 4 across on desktop, 2 across on tablet (≤1024px), 1 column on mobile (≤600px). ============================================================ */ .rd .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } @media (max-width: 1024px) { .rd .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 600px) { .rd .site-footer__grid { grid-template-columns: 1fr; gap: 36px; } }