/* ==========================================================================
design-fixes.css — loaded LAST, after mcs-polish.css.
Visual-QA pass (2026-07-16): fixes for defects the client flagged as
"somewhat ugly". Scope is limited to spacing, alignment, hierarchy,
consistency, hover/focus states, and responsive behaviour. NO new hues
(brand tokens only) and NO font swaps — sections stay recognizable.
Brand tokens available (from the ported Webflow CSS):
--wbec-dark-blue #0b1021 --wbec-royal-blue #3263e4
--dark #08262a --primary-1 #264c51 (teal)
--primary-2 #b85b24 (rust) --primary-3 #6b818c (slate)
--light #eeece7 (cream) --white-smoke #f4f4f4
========================================================================== */
/* ---------- Back-to-top: appear only after scrolling -------------------- */
/* The button is position:fixed (webflow css). Hidden by default, fades +
slides up once BackToTop.tsx flags .mcs-btt-visible (scrollY > 400). */
.back-to-top-button.mcs-btt {
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.back-to-top-button.mcs-btt.mcs-btt-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
/* ---------- Empty state (state pages with no listed surgeons) ----------- */
/* Was two unstyled centred paragraphs floating in white space under a big
left heading — read as broken. Give it a deliberate "no results" panel. */
.mcs-empty-state {
max-width: 640px;
margin: 8px 0 8px;
padding: 40px 40px 44px;
text-align: center;
background: var(--white-smoke);
border: 1px solid var(--border-dark);
border-radius: 14px;
}
.mcs-empty-state .mcs-empty-lead {
margin: 0 0 10px;
font-weight: 600;
color: var(--dark);
}
.mcs-empty-state .mcs-empty-sub {
margin: 0;
color: var(--primary-3);
line-height: 1.6;
}
.mcs-empty-state a {
color: var(--wbec-royal-blue);
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 500;
}
.mcs-empty-state a:hover { opacity: .8; }
/* ---------- National list: consistent headshot sizing/cropping ---------- */
/* The "rest" doctor headshots had no sizing, so each rendered at its source
image's natural size -> ragged, inconsistent cards. Every rest card shares
the same .composed-elements container width, so a uniform square with
object-fit:cover makes all headshots identical size + crop. */
.composed-elements.contained-section-right.werhyrt {
max-width: 78%;
margin-left: auto;
margin-right: auto;
}
.mcs-natl-headshot {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center 28%;
border-radius: 20px;
}
@media screen and (max-width: 767px) {
.composed-elements.contained-section-right.werhyrt { max-width: 320px; }
}
/* ---------- Doctor header avatar: graceful initials fallback ------------ */
/* .team-avatar is a 300px #f9fafb circle; an empty one reads as a blank white
disc. When the remote photo is missing/fails, DoctorAvatar renders this
monogram instead — brand blues + white initials, filling the circle. */
.mcs-avatar-fallback {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(140deg, var(--wbec-royal-blue), var(--wbec-dark-blue));
color: #fff;
}
.mcs-avatar-fallback span {
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 104px;
line-height: 1;
letter-spacing: 2px;
}
@media screen and (max-width: 767px) {
.mcs-avatar-fallback span { font-size: 84px; }
}
/* ---------- Reviews: adopt brand tokens (styles.ts invites .rv-root overrides) */
/* The two-lane review system ships neutral placeholder colours (a generic blue
accent, Tailwind greys) and a dark-mode block. The site is light-only and
brand-blue. `body .rv-root` (0,1,1) outranks the component's own `.rv-root`
rules incl. its @media(dark) block, so this remaps every review colour to a
brand token — Submit + links become royal-blue, muted text -> brand slate,
borders/subtle bg -> brand tints. No markup changes. */
body .rv-root {
--rv-fg: #08262a;
--rv-muted: #6b818c; /* brand slate (--primary-3) */
--rv-border: rgba(8, 38, 42, 0.14);
--rv-bg: #ffffff;
--rv-bg-subtle: #f4f4f4; /* brand white-smoke */
--rv-star: #c47600; /* review gold, deepened from #f5a623 — 3.22:1 on the
#f4f4f4 card / 3.54:1 on white (icon threshold is 3:1;
the original sat at 1.84:1, flagged by visual-qa.mjs) */
--rv-star-empty: #cbd2d3;
--rv-accent: #3263e4; /* brand royal-blue (--wbec-royal-blue) */
--rv-accent-fg: #ffffff;
--rv-radius: 10px;
}
/* Give the Google-source chip a touch more brand identity + tighter baseline. */
body .rv-root .rv-via-google {
color: var(--primary-3);
background: #f4f4f4;
border-color: rgba(8, 38, 42, 0.14);
}
/* ---------- QA sweep fixes (docs/visual-qa/FINDINGS.md, 2026-07-18) ------ */
/* P0 #1: /brent-bellotte-md "Background & Education" editorial row is a
no-wrap flex with NO mobile override in the Webflow export — on phones the
left heading clipped offscreen and the row overflowed 52px. Stack it. */
@media (max-width: 767px) {
.container-large.section-title.body-copy-container {
display: block;
}
}
/* P1 #2: Google review bodies carry literal
markers; ReviewCard converts
them to newlines — render those newlines. */
body .rv-root .rv-body,
body .rv-root .rv-owner-response {
white-space: pre-line;
}
/* P1 #3: initials monogram for the 43% of doctors with no headshot — the
state-page card wrapper otherwise rendered an empty gray blob. Matches the
/find card fallback, sized to the card avatar frame. */
/* The wrapper is a fixed 120×120 circle (webflow.css) — the fallback must fill
it exactly. (A min-height:220px here originally overflowed the circle and
clipped the letter — loop-2 finding #1.) */
.b-team-avatar-wrapper .mcs-team-avatar-fallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-radius: inherit;
background: var(--wbec-dark-blue);
color: #fff;
font-size: 2.6rem;
font-weight: 600;
letter-spacing: 0.02em;
}
/* P2 #9: state-page "#1 Eye Doctor" featured panel when the doctor has no
headshot — initials block instead of an empty half-panel. Solid navy so it
reads on the panel's light off-white variant too (loop-2 #4: the original
translucent white-on-light rendered near-invisible on Nevada/Georgia). */
.mcs-featured-avatar-fallback {
display: flex;
align-items: center;
justify-content: center;
min-height: 320px;
background: var(--wbec-dark-blue);
border-radius: 12px;
color: #fff;
font-size: 4.5rem;
font-weight: 600;
}
/* ---------- Service-page FAQ accordion (refero-grounded, 2026-07-18) ----- */
/* Editorial divider rows (not cards) to match the site's blog-vertical
rhythm; native /, royal chevron rotates open, generous
padding for the 60+ audience. Motion: 200ms ease state change. */
/* Center the FAQ column on wide screens (Michael-flagged: the block sat
left-anchored with dead space to the right). The webflow .container-large
is a narrow LEFT-anchored box in this context (624px, no auto margins), so
the centering must happen on the container itself: one 860px column,
centered in main-container, matching the article body above. */
.mcs-faq-section .container-large {
width: 100%;
max-width: 860px;
margin-left: auto;
margin-right: auto;
}
.mcs-faq-section .section-title {
margin-bottom: 8px;
}
.mcs-faq-list {
border-bottom: 1px solid rgba(8, 38, 42, 0.14);
}
.mcs-faq-item {
border-top: 1px solid rgba(8, 38, 42, 0.14);
}
.mcs-faq-q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 22px 4px;
cursor: pointer;
list-style: none;
color: var(--wbec-dark-blue, #0b1021);
font-size: 19px;
font-weight: 600;
line-height: 1.35;
}
.mcs-faq-q::-webkit-details-marker {
display: none;
}
.mcs-faq-q:hover {
color: var(--wbec-royal-blue, #3263e4);
}
.mcs-faq-q:focus-visible {
outline: 2px solid var(--wbec-royal-blue, #3263e4);
outline-offset: 2px;
border-radius: 4px;
}
.mcs-faq-chevron {
flex: none;
color: var(--wbec-royal-blue, #3263e4);
transition: transform 0.2s ease;
}
.mcs-faq-item[open] .mcs-faq-chevron {
transform: rotate(180deg);
}
.mcs-faq-a {
margin: 0;
padding: 0 40px 24px 4px;
color: #33424a;
font-size: 16.5px;
line-height: 1.65;
max-width: 70ch;
}
@media (max-width: 640px) {
.mcs-faq-q { font-size: 17px; padding: 18px 2px; }
.mcs-faq-a { padding-right: 8px; }
}
/* ---------- Loop-2 animation parity (IX2 audit, 2026-07-18) -------------- */
/* Grow-underline hover, from the IX2 MOUSE_OVER SIZE interaction on
.underline-link: .underline-line ships at width 0% in the export and only
IX2 ever grew it — so every underline link in the port (nav "List Your
Practice", best-index national link, footer) had an invisible underline and
zero hover feedback. */
.underline-link .underline-line,
.underline-link .underline-line-2 {
transition: width 0.3s ease;
}
.underline-link:hover .underline-line,
.underline-link:focus-visible .underline-line,
.underline-link:hover .underline-line-2,
.underline-link:focus-visible .underline-line-2 {
width: 100%;
}
/* Generic reveal opt-in (same treatment as .section-contents) for components
that can't take that class without inheriting its layout — currently the
NewsletterBox card on news/post pages, matching detail_post's reveal. */
@media (prefers-reduced-motion: no-preference) {
html.mcs-anim .mcs-reveal,
html.mcs-anim .blog-vertical-item {
opacity: 0;
transform: translate3d(0, 24px, 0);
transition:
opacity 0.5s cubic-bezier(0, 0, 0.58, 1),
transform 0.5s cubic-bezier(0, 0, 0.58, 1);
}
html.mcs-anim .mcs-reveal.mcs-in,
html.mcs-anim .blog-vertical-item.mcs-in {
opacity: 1;
transform: none;
}
}
/* Related-posts card grid (v2, Michael-flagged composition): 2×2 image-led
cards, two across, filling the width — replaces the airy vertical rows.
Cards echo the news-index language: cover image, royal date, dark title.
Reveal comes from the shared .mcs-reveal opt-in. */
.mcs-rel-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 44px 40px;
margin-top: 16px;
}
.mcs-rel-card {
display: block;
text-decoration: none;
color: inherit;
}
.mcs-rel-card-imgwrap {
overflow: hidden;
border-radius: 12px;
margin-bottom: 16px;
}
.mcs-rel-card-img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
transition: transform 0.3s ease;
}
.mcs-rel-card:hover .mcs-rel-card-img {
transform: scale(1.05);
}
.mcs-rel-card-date {
margin-bottom: 6px;
}
.mcs-rel-card-title {
margin: 0;
line-height: 1.25;
transition: color 0.15s ease;
}
.mcs-rel-card:hover .mcs-rel-card-title {
color: var(--wbec-royal-blue, #3263e4);
}
.mcs-rel-card:focus-visible {
outline: 2px solid var(--wbec-royal-blue, #3263e4);
outline-offset: 4px;
border-radius: 12px;
}
@media (max-width: 767px) {
.mcs-rel-grid {
grid-template-columns: 1fr;
gap: 36px;
}
}
/* Latest-articles rail on /post (realized from the export's never-populated
blog-vertical template): keep thumbs bounded; give the rail's section title
the standard gap above the list. */
.blog-vertical-item .mcs-related-thumb {
width: 220px;
max-width: 38vw;
height: 140px;
object-fit: cover;
border-radius: 10px;
display: block;
}
.section.off-white .section-title + .w-dyn-list {
margin-top: 12px;
}
@media (max-width: 640px) {
.blog-vertical-item {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.blog-vertical-item .mcs-related-thumb {
width: 100%;
max-width: 100%;
height: 160px;
}
}
/* ---------- /news featured hero: blurred self-backdrop fill -------------- */
/* The featured post's asset is an extreme portrait crop; cover-fit rendered a
narrow sliver with a large dark void beside it (matched the live site, but
read as broken). The sharp image now sits contained over a blurred cover
copy of itself, so the marquee fills edge-to-edge for any asset aspect. */
/* The whole featured unit was capped at 60% width by the export's
`.composed-elements.dfsbvefgew { max-width: 60% }` — the marquee's dark void
was the other 40%. Let it span the container on the news hero. */
.composed-elements.dfsbvefgew {
max-width: 100%;
}
.featured-post-image-container.mcs-feat-fill {
position: relative;
flex: 1 1 auto;
min-width: 0;
}
.mcs-feat-fill .mcs-feat-blur {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(26px) saturate(1.05) brightness(0.88);
transform: scale(1.15);
}
.mcs-feat-fill .featured-post-image.mcs-feat-contain {
position: relative;
object-fit: contain;
width: 100%;
height: 100%;
min-height: 0;
}
/* ---------- Scroll reveals (ported from the Webflow IX2 config) ---------- */
/* Spec extracted verbatim from export/site/js/webflow.js by
scripts/extract_ix2_manifest.mjs (see scripts/ix2-manifest.json):
`.section-contents` fades up 24px over 500ms ease-out at a 25% viewport
offset (index, brent-bellotte-md, contact-us, state pages, services); the
homepage `.diagram` staggers left/center/right children (a-12, ease-in-out).
Gated on html.mcs-anim (pre-paint script in layout.tsx) so crawlers and
no-JS visitors always see content, and on prefers-reduced-motion. The
rebuild dropped these when it stopped loading webflow.js — restoring for
parity with the live site (verified via motion-capture frame compare). */
@media (prefers-reduced-motion: no-preference) {
html.mcs-anim .section-contents {
opacity: 0;
transform: translate3d(0, 24px, 0);
transition:
opacity 0.5s cubic-bezier(0, 0, 0.58, 1),
transform 0.5s cubic-bezier(0, 0, 0.58, 1);
}
html.mcs-anim .section-contents.mcs-in {
opacity: 1;
transform: none;
}
html.mcs-anim .diagram .diagram-left,
html.mcs-anim .diagram .diagram-center,
html.mcs-anim .diagram .diagram-right {
opacity: 0;
transition:
opacity 0.5s cubic-bezier(0.42, 0, 0.58, 1),
transform 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}
html.mcs-anim .diagram .diagram-left { transform: translate3d(-24px, 0, 0); }
html.mcs-anim .diagram .diagram-center { transform: translate3d(0, 24px, 0); }
html.mcs-anim .diagram .diagram-right { transform: translate3d(24px, 0, 0); }
html.mcs-anim .diagram.mcs-in .diagram-left,
html.mcs-anim .diagram.mcs-in .diagram-center,
html.mcs-anim .diagram.mcs-in .diagram-right {
opacity: 1;
transform: none;
}
}
/* ---------- /best-cataract-surgeons: national finder map section --------- */
/* Framed locator panel under the hero (landing-locator pattern: heading +
count, search that hands off to /search, national clustered map). Sits on
the dark section; tokens stay in the brand world (navy + royal #3263e4). */
.mcs-natmap { margin-top: 56px; text-align: left; }
.mcs-natmap-frame {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 16px;
padding: 28px 28px 24px;
}
.mcs-natmap-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.mcs-natmap-title {
margin: 0 0 6px; color: #fff; font-size: 28px; line-height: 1.15;
letter-spacing: -0.01em;
}
.mcs-natmap-sub { margin: 0; color: rgba(255, 255, 255, 0.66); font-size: 15px; }
.mcs-natmap-count {
flex: none; color: #fff; background: rgba(50, 99, 228, 0.28);
border: 1px solid rgba(50, 99, 228, 0.55); border-radius: 999px;
padding: 7px 14px; font-size: 13px; letter-spacing: 0.02em; white-space: nowrap;
}
.mcs-natmap-search { display: flex; gap: 10px; margin-bottom: 10px; }
.mcs-natmap-input {
flex: 1; min-width: 0; height: 52px; padding: 0 18px; font-size: 16px;
color: var(--dark); background: #fff; border: 1px solid transparent;
border-radius: 10px;
}
.mcs-natmap-input:focus { outline: 2px solid #3263e4; outline-offset: 1px; }
.mcs-natmap-btn {
flex: none; height: 52px; padding: 0 28px; font-size: 16px; font-weight: 600;
letter-spacing: 0.02em; color: #fff; background: #3263e4; border: 0;
border-radius: 10px; cursor: pointer; transition: background 0.15s ease;
}
.mcs-natmap-btn:hover { background: #2b56c6; }
.mcs-natmap-geo {
background: none; border: 0; padding: 0; margin: 0 0 16px;
color: rgba(255, 255, 255, 0.75); font-size: 14px; cursor: pointer;
text-decoration: underline; text-underline-offset: 3px;
}
.mcs-natmap-geo:hover { color: #fff; }
.mcs-natmap-geo[disabled] { opacity: 0.6; cursor: default; }
/* Height lives on .mcs-map-panel — the in-flow MapPanel root (.mcs-map-canvas
inside it is position:absolute, so sizing the canvas can't grow the panel).
Three classes on purpose: the natmap root reuses .mcs-map-static for its
brand tokens, and styles.ts (injected inline in the BODY, i.e. after this
head stylesheet) sets `.mcs-map-static .mcs-map-panel { height: 340px }` at
equal specificity — source order made 340px win and clipped the map. */
.mcs-natmap .mcs-natmap-canvas .mcs-map-panel {
height: 560px;
border-color: rgba(255, 255, 255, 0.14);
}
.mcs-natmap-hint { margin: 12px 0 0; color: rgba(255, 255, 255, 0.6); font-size: 13px; }
.mcs-natmap-hint a { color: rgba(255, 255, 255, 0.85); text-decoration: underline; }
.mcs-bcs-intro { max-width: 560px; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) {
.mcs-natmap { margin-top: 40px; }
.mcs-natmap-frame { padding: 18px 16px 16px; }
.mcs-natmap-title { font-size: 22px; }
.mcs-natmap-search { flex-direction: column; }
/* `flex: 1` sets the flex-BASIS on the main axis — once the row becomes a
column that basis is the HEIGHT, collapsing the input to ~22px and beating
its own `height: 52px` (Michael 7/21: "search bar still looks bad"). */
.mcs-natmap-input { flex: none; width: 100%; height: 52px; }
.mcs-natmap-btn { width: 100%; }
/* Thumb-sized target for the geolocate link. */
.mcs-natmap-geo { min-height: 44px; margin-bottom: 8px; }
.mcs-natmap .mcs-natmap-canvas .mcs-map-panel { height: 420px; }
}
/* ---------- Sparse state pages: "Keep Looking" closing block ------------ */
/* States with 1-3 listed surgeons left the "Meet the Best…" grid mostly empty
(loop3 negative-space finding). The closing dark section adds national/ZIP
CTAs + neighboring-state links; these style the nearby-state chips (brand
royal on the navy band, mirroring the /find "Nearby States" chips). */
.mcs-state-nearby {
margin-top: 44px;
}
.mcs-state-nearby-chips {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-top: 14px;
}
.mcs-state-chip {
display: inline-block;
padding: 9px 18px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.28);
color: #fff;
font-size: 15px;
line-height: 1.2;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease;
}
.mcs-state-chip:hover,
.mcs-state-chip:focus-visible {
background: rgba(50, 99, 228, 0.28);
border-color: rgba(50, 99, 228, 0.6);
outline: none;
}
/* ---------- /best-cataract-surgeons hero: restore the dark section ------- */
/* The Webflow export set .section.bg-dark.border-top.on-state-selector to
rgba(8,38,42,0) — fully transparent — so this "dark hero" rendered white and
its white