's
~1em top margin and ~40px left padding, an unreset 's top margin
stacking with the explicit bottom margin below) -- that's what was
throwing off column alignment and adding extra gaps around the
legal-panel triggers. Reset only the specific elements that carry a
default browser margin/padding (not *, which would also strip the
.container rule's own margin/padding-inline below and re-break the
centering/side-padding of the whole footer). */
/* Floating "go to homepage" button -- present on every Resources/Insights
page (public and logged-in alike), including generated static resource
posts. Copied verbatim from the main site's .site-home-btn (site.css)
so it looks and sits identically everywhere; here it's a plain link
(no scroll-to-top case -- these pages are never "home") so it needs no
JS of its own. See public_footer.php / app_footer.php for the markup. */
.site-home-btn {
/* 31.5px, not a round 28/30px: at the page's natural resting scroll
position (all the way down), this centers the button vertically
between .footer-bottom's top border and the next line below it (the
first .legal-panel's top border) -- see site.css's matching comment,
which this mirrors exactly since both stylesheets share the same
footer structure/padding. */
position: fixed; left: 24px; bottom: 31.5px; z-index: 60;
width: 46px; height: 46px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(21,34,54,0.55);
border: 1px solid rgba(255,255,255,0.25);
backdrop-filter: blur(6px);
color: #fff; cursor: pointer;
opacity: 0.6; transition: opacity var(--dur), background var(--dur);
}
.site-home-btn:hover { opacity: 1; background: rgba(21,34,54,0.85); }
.site-home-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
/* Same clearance as site.css: the cookie banner sits at the same corner as
this button with a higher z-index, so it would otherwise hide it for
every first-time visitor -- --cookie-banner-h is set from JS
(initCookieBanner() in public_footer.php) to the banner's own actual
rendered height, which varies a lot by viewport width. */
body.has-cookie-banner .site-home-btn { bottom: calc(31.5px + var(--cookie-banner-h, 72.5px)); }
/* Cookie consent banner -- same markup/behaviour as the main site's
(site.css), styled with this module's own tokens/button classes. */
.cookie-banner {
position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 300;
background: var(--navy); border-top: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 -8px 32px rgba(0,0,0,0.3);
transform: translateY(110%); transition: transform 0.4s var(--ease);
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner-inner {
max-width: var(--max-w); margin-inline: auto;
padding: 1.2rem clamp(1.25rem, 4vw, 2.5rem);
display: flex; align-items: center; justify-content: space-between;
gap: 1.5rem; flex-wrap: wrap;
}
.cookie-text { font-size: 0.82rem; line-height: 1.55; color: rgba(246,242,235,0.7); max-width: 640px; }
.cookie-link {
background: none; border: none; padding: 0; margin: 0; cursor: pointer;
font: inherit; color: var(--emerald-glow); text-decoration: underline;
}
.cookie-actions { display: flex; gap: 0.7rem; flex-shrink: 0; }
/* Decline reuses .btn-outline, styled elsewhere in this module for white/
light card backgrounds (dark ink text). On this banner's dark navy
background that would render as near-black-on-navy -- effectively
invisible -- so it's overridden here to use light text/border instead. */
.cookie-banner .btn-outline {
color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.3);
}
.cookie-banner .btn-outline:hover {
background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.5);
}
.footer ul, .footer ol, .footer li, .footer p, .footer h1, .footer h2, .footer h3, .footer h4 { margin: 0; padding: 0; }
.footer { background: #080E18; padding-block: 3rem 1.6rem; }
.footer-cols { display: flex; gap: 2.4rem; border: none; }
.footer-cols > .footer-col { flex: 1 1 0; min-width: 0; border: none; }
.footer-brand { display: flex; align-items: flex-start; }
.footer-logo-img { height: 40px; width: auto; display: block; }
.footer-col-title { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(246,242,235,0.35); margin-block-end: 1rem; }
.footer-menu { display: flex; flex-direction: column; gap: 0.6rem; list-style: none; border: none; }
.footer-menu a { font-size: 0.83rem; color: rgba(246,242,235,0.55); transition: color var(--dur); }
.footer-menu a:hover { color: rgba(246,242,235,0.9); }
/* --- Footer Platforms/Insights flyout (opens right on desktop, expands
inline on mobile) -- copied verbatim from site.css's own copy of this
block (the badge+name+description "mega-menu"-lite treatment, matching
.nav-dropdown-* in the top nav above) so this footer (Insights/Resources/
Clients all share this stylesheet) behaves identically to the main
site's. Superseded a plain-link version of this block that predated that
redesign -- see .nav-dropdown-item above for the equivalent top-nav
history/rationale comments. --- */
.footer-menu li.footer-item-flyout { align-self: flex-start; position: relative; }
.footer-flyout-head { display: flex; align-items: center; gap: 0.25rem; }
.footer-flyout-head a { font-size: 0.83rem; color: rgba(246,242,235,0.55); transition: color var(--dur); }
.footer-flyout-head a:hover { color: rgba(246,242,235,0.9); }
.footer-flyout-toggle {
background: none; border: none; padding: 0.15rem; margin: 0; cursor: pointer; flex-shrink: 0;
color: rgba(246,242,235,0.4); display: flex; align-items: center; justify-content: center;
transition: color var(--dur);
}
.footer-flyout-toggle:hover, .footer-flyout-toggle[aria-expanded="true"] { color: rgba(246,242,235,0.85); }
.footer-flyout-toggle svg { width: 9px; height: 9px; transform: rotate(-90deg); transition: transform var(--dur) var(--ease); }
.footer-item-flyout:hover .footer-flyout-toggle svg,
.footer-item-flyout:focus-within .footer-flyout-toggle svg,
.footer-item-flyout.open .footer-flyout-toggle svg { transform: rotate(90deg); }
.footer-flyout-menu { list-style: none; max-height: 0; overflow: hidden; transition: max-height 0.32s var(--ease); }
.footer-item-flyout.open .footer-flyout-menu { max-height: 260px; margin-block-start: 0.5rem; }
.footer-flyout-menu li + li { margin-block-start: 0.5rem; }
.footer-flyout-menu a {
display: block; padding-inline-start: 0.9rem; font-size: 0.79rem;
color: rgba(246,242,235,0.45); border-inline-start: 2px solid rgba(246,242,235,0.14);
}
.footer-flyout-menu a:hover { color: rgba(246,242,235,0.85); border-inline-start-color: var(--emerald-glow); }
.footer-flyout-menu a[aria-current="page"] { color: var(--emerald-on-dark); border-inline-start-color: var(--emerald-glow); }
/* Badge/description/eyebrow/divider/arrow are the desktop flyout's richer
treatment (see the ≥721px block below) -- hidden here so the mobile
accordion keeps showing a plain name per row. .footer-flyout-copy
unwraps to a plain inline child so hiding .footer-flyout-desc leaves
just the name as the anchor's own text, matching the old markup. */
.footer-flyout-badge, .footer-flyout-desc, .footer-flyout-eyebrow, .footer-flyout-divider, .footer-flyout-arrow { display: none; }
.footer-flyout-copy { display: contents; }
/* Footer columns are still a row above 720px (see .footer-cols media rule
below) — fly the menu out to the right of "Platforms"/"Insights" instead
of stacking it below. */
@media (min-width: 721px) {
/* Anchored to the BOTTOM of the trigger, growing upward -- with 5-7 badge
rows this menu runs 350-500px tall, and the footer sits at the very
bottom of the page with nothing below it to grow into, so opening
downward would push most of it below the fold, out of reach of a
hover-only menu. ".footer .footer-flyout-menu", not just
".footer-flyout-menu": the ".footer ul, .footer li, ..." reset above
(one class + one type selector, see its own comment) otherwise
outweighs a plain ".footer-flyout-menu" (one class) and zeroes this
padding right back out, since .footer-flyout-menu IS a
-- same fix
as ".footer .footer-links" below. */
.footer .footer-flyout-menu {
position: absolute; left: 100%; bottom: -0.7rem;
transform: translateX(-6px);
width: 322px; max-height: none; overflow: visible;
background: linear-gradient(165deg, var(--navy) 0%, var(--navy-mid) 100%);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
padding: 0.6rem 0.5rem; margin: 0 !important;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity var(--dur) var(--ease), visibility var(--dur), transform var(--dur) var(--ease);
z-index: 50;
}
.footer-item-flyout:hover .footer-flyout-menu,
.footer-item-flyout:focus-within .footer-flyout-menu,
.footer-item-flyout.open .footer-flyout-menu {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateX(0);
/* .footer-item-flyout.open .footer-flyout-menu (the mobile accordion's
260px cap, set outside this media query) is just as specific as this
selector, so without repeating max-height here it would win the tie
and clamp this much taller desktop menu to 260px. */
max-height: none;
}
.footer-flyout-menu li + li { margin-block-start: 0.15rem; }
.footer-flyout-eyebrow {
display: block;
font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-lite);
padding: 0.5rem 0.7rem 0.65rem; margin-block-end: 0.15rem;
border-block-end: 1px solid rgba(255,255,255,0.08);
}
/* Extra ".footer-flyout-menu" ancestor prefix on these two rules isn't
decorative -- it's needed to outrank the pre-existing ".footer-flyout-menu
a" / "a:hover" rules above (which include the "a" type selector, making
them MORE specific than a bare ".footer-flyout-item" class would be,
regardless of source order), so display:flex/hover background actually
take effect instead of silently losing to the mobile anchor styles. */
.footer-flyout-menu .footer-flyout-item {
display: flex; align-items: center; gap: 0.8rem;
padding: 0.55rem 0.7rem; border-radius: calc(var(--radius) - 2px);
border-inline-start: none; padding-inline-start: 0.7rem;
text-align: left; white-space: normal;
transition: background var(--dur), transform var(--dur);
}
.footer-flyout-menu .footer-flyout-item:hover, .footer-flyout-menu .footer-flyout-item:focus-visible {
background: rgba(255,255,255,0.06); transform: translateX(2px);
}
.footer-flyout-badge {
display: flex; flex-shrink: 0; width: 38px; height: 38px; border-radius: 8px;
align-items: center; justify-content: center;
background: rgba(255,255,255,0.07);
font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
letter-spacing: 0.04em; color: rgba(255,255,255,0.55);
transition: background var(--dur), color var(--dur);
}
.footer-flyout-badge svg { width: 15px; height: 15px; }
.footer-flyout-item:hover .footer-flyout-badge { background: var(--emerald-lite); color: var(--emerald-on-dark); }
.footer-flyout-copy { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.footer-flyout-name {
font-family: var(--font-display); font-size: 0.9rem; font-weight: 600;
color: rgba(255,255,255,0.9); line-height: 1.25; white-space: nowrap;
transition: color var(--dur);
}
.footer-flyout-item:hover .footer-flyout-name { color: var(--white); }
.footer-flyout-desc {
display: block; font-size: 0.72rem; color: rgba(255,255,255,0.4); line-height: 1.3; white-space: nowrap;
}
.footer-flyout-item[aria-current="page"] .footer-flyout-name { color: var(--emerald-on-dark); }
.footer-flyout-item[aria-current="page"] .footer-flyout-badge { background: var(--emerald-lite); color: var(--emerald-on-dark); }
.footer-flyout-divider { display: block; height: 1px; background: rgba(255,255,255,0.08); margin: 0.4rem 0.7rem; }
.footer-flyout-item--all .footer-flyout-name { font-size: 0.82rem; font-weight: 500; color: rgba(255,255,255,0.72); }
.footer-flyout-item--all:hover .footer-flyout-name { color: var(--white); }
.footer-flyout-arrow {
display: block; width: 12px; height: 12px; flex-shrink: 0; margin-inline-start: auto;
color: rgba(255,255,255,0.3); transition: transform var(--dur), color var(--dur);
}
.footer-flyout-item--all:hover .footer-flyout-arrow { transform: translateX(3px); color: var(--emerald-on-dark); }
}
.footer-info p { font-size: 0.83rem; color: rgba(246,242,235,0.55); margin: 0 0 0.6rem; }
.footer-info p:last-child { margin-block-end: 0; }
.footer-info p strong { color: rgba(246,242,235,0.85); font-weight: 600; }
.footer-info a { color: rgba(246,242,235,0.55); transition: color var(--dur); }
.footer-info a:hover { color: rgba(246,242,235,0.9); }
/* padding-block (not padding-block-start) so the footer links/social icons
sit centered top-to-bottom between this rule's own top border and the
next element's top border directly below (the first .legal-panel, flush
against this element and showing its own 1px border even collapsed).
0.8rem top+bottom (not the original 1.6rem top-only) keeps the total
distance between the two lines the same as before this was made
symmetric -- see the matching comment in site.css's .footer-bottom. */
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-block-start: 2.4rem; padding-block: 0.8rem; border-block-start: 1px solid rgba(246,242,235,0.08); }
.footer-links { display: flex; gap: 1.6rem; list-style: none; flex-wrap: wrap; border: none; }
.footer-links a { font-size: 0.76rem; color: rgba(246,242,235,0.28); transition: color var(--dur); }
.footer-links a:hover { color: rgba(246,242,235,0.65); }
.footer-social { display: flex; gap: 1rem; }
/* The LinkedIn/Facebook marks are now full-color vector logos (their own
official badge colors baked into the SVG -- see /assets/logo/), not
currentColor line icons, so there's no color rule to apply here anymore;
only the same dim/brighten-on-hover treatment as before. */
.footer-social a { opacity: 0.82; transition: opacity var(--dur); display: flex; }
.footer-social a:hover { opacity: 1; }
.footer-social img { width: 19px; height: 19px; display: block; }
/* Same font, size and color as the top nav's own links (.blog-nav a) so
"Privacy Policy"/"Terms" read as part of the same site typography. */
.footer-legal-trigger { background: none; border: none; padding: 0; margin: 0; cursor: pointer; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 500; color: rgba(255,255,255,0.68); transition: color var(--dur); }
.footer-legal-trigger:hover, .footer-legal-trigger[aria-expanded="true"] { color: #fff; }
@media (max-width: 720px) { .footer-cols { flex-direction: column; gap: 2rem; } }
/* .site-home-btn floats at a fixed pixel offset from the viewport's left
edge (see above), not from .footer-bottom's own container, so as the
viewport narrows and .container's side inset shrinks toward its floor,
the Privacy Policy/Terms links end up underneath it -- see the matching,
more detailed comment in site.css for the exact math this mirrors. */
/* ".footer .footer-links", not just ".footer-links": the earlier
".footer ul, .footer li, ..." reset above (one class + one type
selector) otherwise outweighs a plain ".footer-links" (one class) and
silently wins the margin-inline-start back to 0. */
@media (max-width: 1300px) { .footer .footer-links { margin-inline-start: 60px; } }
/* Expandable legal panels */
.legal-panel { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); border-top: 1px solid rgba(255,255,255,0.06); }
.legal-panel.open { max-height: 1400px; border-top-color: rgba(255,255,255,0.1); }
.legal-panel-inner { padding-block: 2rem 1.4rem; max-width: 760px; }
.legal-panel-inner h4 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--parchment); margin-block-end: 0.9rem; }
.legal-panel-inner p { font-size: 0.82rem; line-height: 1.7; color: rgba(246,242,235,0.55); margin-block-end: 0.9rem; }
.legal-panel-inner a { color: var(--emerald-glow); text-decoration: underline; }
/* ============================================================ RESPONSIVE (blog + admin header)
The header nav (public "Main site / Insights / Author login" and the
logged-in "Write / Admin / Log out" bar) is a plain flex row with no
wrap, so on narrow phones it was overflowing instead of dropping to a
second line. Wrapping is enough here — these are short link lists,
not the full site nav, so a hamburger menu would be overkill. */
@media (max-width: 640px) {
.blog-header-inner,
.app-header .wrap {
flex-wrap: wrap;
row-gap: 0.6rem;
}
.blog-nav {
flex-wrap: wrap;
row-gap: 0.5rem;
width: 100%;
}
/* The "Insights" dropdown's 322px popup, centered under its trigger via
left:50%/translateX(-50%), would run off the left edge of a phone-width
viewport (.blog-nav has no hamburger-menu fallback to switch to
instead, unlike the main site's nav -- see the file header above) --
pin it to the nav's own left edge and cap its width to the viewport
instead of the trigger's position. */
.nav-dropdown-menu {
left: 0; transform: translate(0, -6px);
width: min(322px, calc(100vw - 2.5rem));
}
.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu,
.nav-item-dropdown.open .nav-dropdown-menu {
transform: translate(0, 0);
}
}
/* .site-home-btn floats at a constant screen position (left:24px,
bottom:31.5px) on every article/listing page regardless of scroll, which
only clears real content on wide viewports -- on phones and tablets it
ends up sitting on top of article text, PDF/case-study previews or card
content depending on scroll position. .blog-header is position:sticky
(see above), so the "Main site" link it carries stays reachable at every
scroll position without this floating duplicate -- but rather than hide
this one too, it's shrunk and tucked into the corner with a low idle
opacity (matching the same treatment in site.css), so it stays available
without competing with the content it can overlap. */
@media (max-width: 1024px) {
.site-home-btn {
width: 38px; height: 38px;
left: 12px; bottom: 12px;
opacity: 0.4;
}
.site-home-btn svg { width: 16px; height: 16px; }
.site-home-btn:active { opacity: 1; background: rgba(21,34,54,0.85); }
/* Same clearance logic as the rule above, just measured from this
breakpoint's own smaller base offset (12px, not 31.5px). */
body.has-cookie-banner .site-home-btn { bottom: calc(12px + var(--cookie-banner-h, 72.5px)); }
}
@media (max-width: 400px) {
.blog-nav { font-size: 0.82rem; gap: 0.55rem 0.85rem; }
}
/* ---- MedSync wordmark on the dark header/footer ---- */
.blog-logo-badge{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#f6f0e6}
.blog-logo-mark{font-family:'Playfair Display',Georgia,serif;font-size:1.3rem;font-weight:500;color:#12182b;line-height:1}
.blog-logo-dot{position:absolute;right:6px;bottom:6px;width:6px;height:6px;border-radius:50%;background:#f0653f}
.blog-logo-text{display:flex;flex-direction:column;line-height:1.1}
.blog-logo-name{font-family:'Playfair Display',Georgia,serif;font-size:1.1rem;font-weight:500;color:#fff}
.blog-logo-sub{font-size:.62rem;font-weight:600;letter-spacing:.18em;color:rgba(255,255,255,.7)}
.footer-brand .blog-logo{display:inline-flex}
/* MedSync: service names are longer than platform names -- widen the dropdown and anchor it to the nav's right edge so it never runs off-screen. */
@media (min-width: 641px) {
.nav-dropdown-menu { left: auto; right: -0.5rem; width: 380px; transform: translate(0, -6px); }
.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu,
.nav-item-dropdown.open .nav-dropdown-menu { transform: translate(0, 0); }
}
.blog-logo-text{gap:3px}
.blog-logo-sub{line-height:1}