- still rendered the browser's decimal marker beside it, so each step
read "1. 1 Patient Evaluation". Keep the badge.
========================================================================= */
ol.step-list{list-style:none !important;}
/* =========================================================================
28. VIDEO CARDS — no lift on hover
========================================================================= */
.em-vthumb:hover,.em-vcard:hover{box-shadow:none !important;}
.site-widgets .video-card:hover{box-shadow:none !important;transform:none !important;}
.em-vthumb{cursor:pointer;}
/* =========================================================================
29. TYPE SCALE AUDIT — the last few roles off the About pages' ramp
-------------------------------------------------------------------------
The database-driven pages were brought onto the ramp in their own files
(content-templates.css, imported-page.css). What is left are the handful
of per-family drifts that have no single owner:
role About was where
------------------------------------------------------------------
silo heading 25.6/600 25.5/700 scvh-*-2026 pages
FAQ heading 21/600 25.5/700 disease pages (section.faq,
which section 24's rule, keyed
to section.topic, did not reach)
video strip h2 24/700 32/600 .vt-section (the admin-placed
patient-video strip)
page title 48/600 46/600 disease hero (.hero-banner h1)
A census of every h2/h3 on a disease page found its section headings
already at 21/600, so only these are touched.
Home keeps its own 30/700 section headings: that is a landing-page
heading, not the in-page section heading this ramp governs, and it is
already the same size as About's 30.4px "Continue Exploring".
========================================================================= */
.topic-silo h2{font-weight:600;}
section.faq > h2,.faq-section > h2{font-size:clamp(18px,2.1vw,21px);font-weight:600;}
.vt-section h2{font-size:clamp(19px,2.1vw,24px);font-weight:600;}
.hero-banner h1{font-size:clamp(32px,3.6vw,48px);}
/* =========================================================================
30. "RELATED VIDEOS" STRIP — blend into the page
-------------------------------------------------------------------------
.site-widgets (the "Watch / Related Videos" strip) was a raised white card:
paper-raised fill, 1px border, 20px radius, soft shadow and a gold top
stripe (.site-widgets:before). Against the cream page it read as a hard-
edged panel, unlike the "Articles You May Interest" block right below it,
which sits flat on the page. Flatten it to match — the video thumbnails
inside keep their own surfaces, so the section still reads as a group.
Applied here so it covers every family (disease, About, science, ...).
========================================================================= */
.site-widgets{
background:transparent !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
padding-left:0 !important;
padding-right:0 !important;
overflow:visible !important;
}
.site-widgets::before{display:none !important;}
/* =========================================================================
31. STICKY SIDEBAR — don't let the page root trap it
-------------------------------------------------------------------------
Each page root (.scci-*-2026 / .scvh-*-2026) carries `overflow-x:hidden`.
When one axis is `hidden` the other computes to `auto`, so the root becomes
a scroll container — and a scroll container is the nearest scrollport for
any `position:sticky` inside it. The two-column guides' sticky left nav
(.topicnav-side, top:18px) was therefore sticking relative to the root,
which fits its content and never scrolls, so the nav just scrolled away and
left the left column empty below it.
`overflow-x:clip` stops horizontal overflow exactly as `hidden` did but does
NOT establish a scroll container, so sticky resolves against the viewport
again. (html/body already clip horizontally site-wide, so this root rule was
redundant to begin with.) The clip only matches the page roots — no child
element on these pages uses a `-2026` class.
========================================================================= */
[class*="-2026"]{ overflow-x:clip !important; }
/* Belt-and-braces: the sticky nav itself, in case a future ancestor clips. */
.topicnav-side{ align-self:start; }
/* =========================================================================
32. EXIT-INTENT MODAL — real close button + tidy layout
-------------------------------------------------------------------------
The markup never carried a close control (core.js looked for one that
wasn't there) and the heading had no .exit-modal-title class, so the card
rendered without a way out and with default heading styling. The button is
now in the markup; this makes it a proper 32px icon target, centres the
cross, and lays the two action buttons out as a tidy row that wraps.
========================================================================= */
.exit-modal-close{
display:flex !important;align-items:center;justify-content:center;
width:34px;height:34px;font-size:22px;line-height:1;z-index:2;
transition:background .15s ease,transform .15s ease;
}
.exit-modal-close svg{width:17px;height:17px;}
.exit-modal-close:hover{background:var(--pine-deep);color:#fff;transform:rotate(90deg);}
.exit-modal-tag{display:inline-block;}
/* The two action buttons go full width and stack, consistently on every page.
The imported markup is inconsistent — some pages wrap them in
.exit-modal-actions, others in a bare inline-flex
— so this targets the
buttons by their card ancestor and forces a 100% basis, which makes them fill
the row and wrap onto their own lines regardless of the wrapper. */
.exit-modal-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;}
.exit-modal-card .btn{flex:1 1 100%;width:100%;box-sizing:border-box;justify-content:center;white-space:nowrap;}
/* =========================================================================
32b. "NOT THE RIGHT CONDITION? — JUMP TO …" BOX — removed site-wide
-------------------------------------------------------------------------
The imported top-of-page condition-switch card (.topic-controls-row, which
only ever holds the .prevnext "Jump to …" link) is baked into every disease
and content page's intro HTML. It is hidden here rather than stripped from
each page's stored markup, so it disappears everywhere at once.
========================================================================= */
.topic-controls-row{display:none !important;}
/* =========================================================================
33. PATIENT-REVIEW TAB BAR — blend with the page
-------------------------------------------------------------------------
.tab-nav-wrap was a near-white sticky bar (rgba(255,255,255,.96)) sitting
on the cream page as a hard white slab. It stays sticky (so it still masks
content scrolling under it) but now in the page's own paper colour with a
hairline instead of a white block.
========================================================================= */
.tab-nav-wrap{
background:#FBF8F0 !important;
border-bottom:1px solid rgba(199,160,107,0.28) !important;
}
/* =========================================================================
34. CTA BUTTONS ON DARK BANDS — clear, opposite colours
-------------------------------------------------------------------------
On the dark navy bands (.ready-band, .final-cta, .access-cta) the buttons
lost their contrast: .cta-primary came through as navy-on-navy and
.cta-secondary as white-on-white — both invisible. Force a high-contrast
pair: the primary a solid light fill with navy text, the secondary an
outline in white. WhatsApp keeps its green. !important because the page
files re-declare these at high specificity.
========================================================================= */
.ready-band .cta-primary,
.final-cta .cta-primary,
.access-cta .cta-primary{
background:#FFFFFF !important;
background-image:none !important;
color:var(--pine-deep,#0B2244) !important;
border:1px solid #FFFFFF !important;
}
.ready-band .cta-primary:hover,
.final-cta .cta-primary:hover,
.access-cta .cta-primary:hover{
background:var(--pine-pale,#E7F0FC) !important;
border-color:var(--pine-pale,#E7F0FC) !important;
}
.ready-band .cta-secondary,
.final-cta .cta-secondary,
.access-cta .cta-secondary{
background:transparent !important;
background-image:none !important;
color:#FFFFFF !important;
border:1.5px solid rgba(255,255,255,0.55) !important;
}
.ready-band .cta-secondary:hover,
.final-cta .cta-secondary:hover,
.access-cta .cta-secondary:hover{
background:rgba(255,255,255,0.12) !important;
border-color:#FFFFFF !important;color:#FFFFFF !important;
}
/* =========================================================================
35. "ABOUT THIS GUIDE" FOOTNOTE — blend the slab
-------------------------------------------------------------------------
.em-disclaimer painted a blue-to-white gradient (#E7F0FC -> #fff) that read
as an out-of-palette panel against the cream page. Make it a quiet footnote:
no fill, a hairline on top, muted text.
========================================================================= */
.em-disclaimer{
background:transparent !important;
background-image:none !important;
border:0 !important;
border-top:1px solid rgba(199,160,107,0.28) !important;
border-radius:0 !important;
box-shadow:none !important;
}
/* =========================================================================
36. BUTTON FILLS — survive the page roots' `a{background:none}` reset
-------------------------------------------------------------------------
Several page roots carry `.. a{background:none}` (specificity
0,2,1), which wipes the fill off every anchor-based button — so .btn-primary
rendered as white text on nothing (invisible on light bands, e.g. the
"Want a result like the patients above?" mid-CTA). These are global button
components meant to look identical everywhere, so re-assert their fills.
========================================================================= */
a.btn-primary{
background:linear-gradient(135deg,#1571DE,var(--pine,#0F62C5) 55%,#0A3F86) !important;
color:#FFFFFF !important;
}
a.btn-whatsapp{ background:#25D366 !important; color:#FFFFFF !important; }
a.btn-gold{
background:linear-gradient(135deg,#B08750,#8F6845 50%,#6E4A2E) !important;
color:#FFFFFF !important;
}
a.btn-white{ background:#FFFFFF !important; }
/* ...except on a light CTA band, where a white fill on a white band makes the
button (and its white label) vanish. Keep the band's intended navy fill. */
.cta-band--light a.btn-white{ background:var(--pine-deep,#0B2244) !important; color:#FFFFFF !important; }
/* =========================================================================
37. EXPLORE-MORE STRIPS — home-page card design
-------------------------------------------------------------------------
"Articles You May Interest" / "Recent Posts" now use the home .blog-card
(via the post-card partial). The video strip reuses .blog-card too, with
the thumbnail wrapped in .em-vthumb for the play overlay — make that
wrapper behave like the card's own image area.
========================================================================= */
.em-block + .em-block{margin-top:clamp(36px,4vw,56px);}
.blog-card .em-vthumb{position:relative;display:block;overflow:hidden;}
.blog-card .em-vthumb .em-play{
position:absolute;top:50%;left:50%;right:auto !important;bottom:auto !important;margin:0 !important;transform:translate(-50%,-50%);
width:54px;height:54px;border-radius:50%;
background:rgba(255,255,255,0.92);color:var(--pine-deep,#0B2244);
display:flex;align-items:center;justify-content:center;
box-shadow:0 6px 18px rgba(11,34,68,0.28);transition:transform .18s ease,background .18s ease;
}
.blog-card .em-vthumb .em-play svg{width:22px;height:22px;margin-left:2px;}
.blog-card.em-vcard:hover .em-vthumb .em-play{transform:translate(-50%,-50%) scale(1.08);background:#fff;}
.blog-card.em-vcard .blog-card-body h3 a{color:inherit;}
/* Video cards share the article card's white surface so the strip reads as one set. */
.blog-card.em-vcard{background:var(--paper-raised,#fff) !important;border:1px solid var(--line,#E7DFC9) !important;}
.blog-card.em-vcard .blog-card-body{padding:18px 20px;}
.blog-card.em-vcard .blog-card-body h3{font-size:15.5px;line-height:1.35;margin:0;}
/* =========================================================================
UNIFIED BREADCRUMB — one pill on every page
-------------------------------------------------------------------------
Every page kind renders the trail through partials/breadcrumb.blade.php as
.site-crumbs (hero pages add .hx-crumbs, the rest .site-crumbs--plain).
Per-page CSS styles .hx-root .hx-crumbs at a higher specificity and even
recolours it for dark heroes, so the shared look is pinned with !important
here (this file loads last). Indigo pill, circular home button, chevron
separators, white text — the same on static, disease, content and blog
pages.
========================================================================= */
.site-crumbs{
display:inline-flex !important;
align-items:center;
flex-wrap:wrap;
gap:4px 10px;
max-width:100%;
margin:5px 0 !important;
padding:8px 20px 8px 8px !important;
background:linear-gradient(135deg,var(--pine,#0F62C5) 0%,#0E58B0 50%,var(--pine-deep,#0B2244) 100%) !important;
border:0 !important;
border-radius:999px !important;
box-shadow:0 14px 30px -14px rgba(15,98,197,.55),inset 0 1px 0 rgba(255,255,255,.14) !important;
color:#fff !important;
font-family:var(--font-heading,"Montserrat",sans-serif) !important;
letter-spacing:.005em !important;
line-height:1 !important;
width:auto !important;
}
.site-crumbs a,
.site-crumbs .hx-cur,
.site-crumbs .site-crumbs__text{
color:#fff !important;
text-decoration:none !important;
font-size:15px !important;
font-weight:600 !important;
border:0 !important;
opacity:1 !important;
}
.site-crumbs a{transition:color .15s ease;}
.site-crumbs a:hover{color:var(--pine-pale,#E7F0FC) !important;text-decoration:underline !important;text-underline-offset:3px;}
.site-crumbs .hx-cur{font-weight:700 !important;}
/* Chevron separators (SVG injected by the partial) */
.site-crumbs .hx-sep{
display:inline-flex !important;
align-items:center;
opacity:1 !important;
color:rgba(255,255,255,.78) !important;
}
.site-crumbs .hx-sep svg{width:13px;height:13px;display:block;}
/* Circular home button */
.site-crumbs .crumb-home{
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
width:36px;height:36px;
border-radius:50% !important;
background:rgba(255,255,255,.20) !important;
color:#fff !important;
border:0 !important;
transition:background .15s ease,transform .15s ease;
}
.site-crumbs .crumb-home:hover{background:rgba(255,255,255,.32) !important;transform:translateY(-1px);text-decoration:none !important;}
.site-crumbs .crumb-home svg{width:19px;height:19px;display:block;}
@media (max-width:720px){
.site-crumbs{padding:6px 14px 6px 6px !important;gap:3px 7px;}
.site-crumbs a,.site-crumbs .hx-cur,.site-crumbs .site-crumbs__text{font-size:13.5px !important;}
.site-crumbs .crumb-home{width:30px;height:30px;}
.site-crumbs .crumb-home svg{width:16px;height:16px;}
}
/* On a phone a long trail (Home › Diseases Treated › Neurological Disorders ›
Spinal Muscular Atrophy) wraps onto two or three lines. At that point the
999px pill radius turns the left edge into a big semicircle that crowds the
wrapped text, so below 600px the breadcrumb becomes a tidy rounded box with
even padding on every side, the lines left-aligned and comfortably spaced. */
@media (max-width:600px){
.site-crumbs{
display:flex !important;
align-items:center;
border-radius:16px !important;
padding:10px 14px !important;
gap:4px 8px;
row-gap:7px;
line-height:1.15 !important;
}
.site-crumbs a,.site-crumbs .hx-cur,.site-crumbs .site-crumbs__text{font-size:13px !important;}
.site-crumbs .crumb-home{width:28px;height:28px;}
.site-crumbs .crumb-home svg{width:15px;height:15px;}
.site-crumbs .hx-sep svg{width:12px;height:12px;}
}
/* =========================================================================
FINAL CTA — white heading, with a gap after the buttons only
-------------------------------------------------------------------------
A generic dark h2 colour was overriding the white the dark-navy CTA
expects, so force white. The section otherwise keeps its original spacing;
the only extra breathing room is between the buttons and the trust panel.
========================================================================= */
.final-cta h2{ color:#fff !important; }
.final-cta-actions{ margin-bottom:26px; }
/* =========================================================================
FOOTER "MORE INFO" GRID — match the home page on every page
-------------------------------------------------------------------------
The shared footer's "More Info" tile block (.fbm-groups) is laid out as a
grid in core.css, but ~122 per-page CSS bundles still carry an older
.fbm-groups{display:flex} rule that loads after core.css and overrode it,
so the box rendered as a ragged flex-wrap on those pages while the home
page (which loads no per-page bundle) kept the clean grid. internal-polish
is the last stylesheet, so re-assert the grid here for all pages.
========================================================================= */
.fbm-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:7px 10px;align-items:stretch;}
@media (max-width:700px){ .fbm-groups{grid-template-columns:repeat(auto-fill,minmax(175px,1fr));} }
@media (max-width:480px){ .fbm-groups{grid-template-columns:1fr;} }
/* =========================================================================
.topic-body — use the full card width. Overrides the 700px reading-width
cap on body text (brain-injury.css) so content spans the card at 100%.
========================================================================= */
.topic-body,
.topic-body p,
.topic-body li,
.topic-body h3{max-width:100%;}
/* =========================================================================
Empty stats strip — some imported pages carry a leftover
with no cards,
which renders as an empty white panel under the "On this page" bar. Hide it
when the grid has no stat cards; a populated strip is unaffected.
========================================================================= */
.stat-strip:has(> .stat-grid:empty){display:none;}
/* =========================================================================
Category / nav / footer badge chips — show the 2-letter initials (like a
Google "no photo" avatar) instead of the repeated SCCI logo mark. The
initials are already in the markup (e.g. "ND", "OS"); core.css and the
per-page CSS had painted scci-mark.png over them and hid the text. This
loads last, so it wins over both. Colours mirror the original per-state
styling (light pine chips flip to white on a dark active/hover fill; the
footer's gold chips flip to navy on hover).
========================================================================= */
.rail-mono,.mega-index-mono,.tb-mono,.atab-mono,.fbm-mono,.fp-mono{
background-image:none !important;
text-indent:0 !important;
font-size:11px !important;
}
.rail-mono,.mega-index-mono,.tb-mono,.atab-mono{ color:var(--pine-deep) !important; }
.mega-rail-btn.is-active .rail-mono,
.mega-rail-btn:hover .rail-mono,
.mega-overview-tiles .mega-rail-btn:hover .rail-mono,
.mega-index a:hover .mega-index-mono,
.mega-panel.has-rail a.mega-sub:hover .mega-index-mono,
.mega-panel.has-rail .mega-group-grid > a:hover .mega-index-mono,
.tab-btn:hover .tb-mono,.tab-btn.active .tb-mono,
.about-tab-btn:hover .atab-mono,.about-tab-btn.active .atab-mono{ color:#fff !important; }
/* Footer badge chips: dark initials on the gold chip so they're readable
(gold-on-gold was invisible). Lock the chip fill opaque in both states. */
.fbm-mono,.fp-mono{ background-color:#E7CE9A !important; color:#0B2244 !important; font-size:10.5px !important; }
.fbm-card:hover .fbm-mono,.fp-card:hover .fp-mono{ background-color:#E7CE9A !important; color:#0B2244 !important; }
/* =========================================================================
Mega-menu "Browse by category" overview tiles — two fixes:
1) the initials chips were transparent here (a high-specificity leftover in
core.css hid them), so the light-blue squares looked empty; show them.
2) a little breathing room above the "Browse by category" heading.
========================================================================= */
.mega-overview-tiles .mega-rail-btn .rail-mono{ color:var(--pine-deep) !important; }
.mega-overview-tiles .mega-rail-btn:hover .rail-mono,
.mega-overview-tiles .mega-rail-btn.is-active .rail-mono{ color:#fff !important; }
.mega-overview-tiles-head{ margin-top:22px !important; }
/* =========================================================================
PATIENT GUIDE SERVICE CARDS — pin to four per row
-------------------------------------------------------------------------
The imported page lays its .pg-cards grid out with auto-fill
(repeat(auto-fill, minmax(230px, 1fr))), which lands on five across on a
wide screen. Pin it to an even four per row to match the rest of the site's
card grids. !important is needed because the source rule lives in an inline