/* ============================================================
sempersolutus.com - sitewide fixes 2026-08-13
Applies to every page via in .
Fixes documented in sempersolutus-site-audit-2026-08-13.md.
Loaded LAST so it wins the cascade race.
============================================================ */
/* ------------------------------------------------------------
S4 - Token palette collapse.
Adds semantic gold + text tokens without overwriting existing ones.
------------------------------------------------------------ */
:root{
--gold-brand:#C5A045; /* decoration only (borders, icons, fills) */
--gold-on-dark:#E2C474; /* text gold on near-black. ~10:1 */
--gold-on-light:#8A6E26; /* text gold on white. 5.1:1, AA pass */
--gold-hover-dark:#F0D391;
--gold-hover-light:#725A1F;
--paper:#F5F7FB; /* text on dark */
--paper-muted:#C2C8D4;
--ink-primary:#111827; /* text on light */
--ink-muted:#4B5563;
--star-safe:#B8860B; /* stars on light bg. 3.4:1 AA non-text */
}
/* Scope: on the /veterans dark theme, semantic tokens flip. */
.nexus-program,.nexus-program-v2,.theme-dark{
--color-bg:#0A0A0A;
--color-text:#E8ECF2;
--color-text-muted:#C2C8D4;
--np-text-muted:#C2C8D4;
}
/* ------------------------------------------------------------
S1 - Scroll-reveal defect eliminated.
Force .fade-up to always be visible. Any legacy CSS or JS that
tries to hide it is overridden. Trading the fade-in animation
for guaranteed content visibility - the animation was already
unreliable per the audit.
------------------------------------------------------------ */
.fade-up,.fade-up.visible,html.js-reveal .fade-up,html.js-reveal .fade-up.visible{
opacity:1 !important;
transform:none !important;
transition:none !important;
visibility:visible !important;
}
/* ------------------------------------------------------------
S2 - Default-blue inline links.
Any without a class inside main content gets safe gold.
Two rules: light-background context, dark-background context.
------------------------------------------------------------ */
/* Light-background inline links */
main a:not([class]),
article a:not([class]),
.content-block a:not([class]),
.answer-capsule a:not([class]),
.faq-answer a:not([class]),
.condition-links a:not([class]),
.article-content a:not([class]){
color:#8A6E26;
text-decoration:underline;
text-underline-offset:2px;
text-decoration-thickness:1px;
transition:color .15s ease;
}
/* Condition-card links on /conditions/ - had default-blue and no underline */
a.condition-card,a.condition-card:visited{color:inherit !important;text-decoration:none;}
.condition-card *{color:inherit;}
.condition-card .condition-name,.condition-card h3,.condition-card .card-title{color:#111827 !important;}
.condition-card:hover .condition-name,.condition-card:hover h3,.condition-card:hover .card-title{color:#1A365D !important;}
/* Blog/article card links similar pattern */
a.article-card,a.blog-card,a.card-link{color:inherit !important;text-decoration:none;}
a.article-card *,a.blog-card *,a.card-link *{color:inherit;}
main a:not([class]):visited,
article a:not([class]):visited,
.content-block a:not([class]):visited,
.faq-answer a:not([class]):visited{color:#8A6E26;}
main a:not([class]):hover,
article a:not([class]):hover,
.content-block a:not([class]):hover,
.faq-answer a:not([class]):hover{color:#1A365D;}
/* Dark-background inline links */
.hero a:not([class]),
.np-section-alt a:not([class]),
.nexus-program main a:not([class]),
.nexus-program-v2 main a:not([class]),
.theme-dark a:not([class]),
.footer-note a:not([class]),
[class*="-dark"] a:not([class]){
color:#E2C474 !important;
text-decoration:underline;
text-underline-offset:3px;
text-decoration-thickness:1px;
}
.hero a:not([class]):visited,
.np-section-alt a:not([class]):visited,
.nexus-program main a:not([class]):visited{color:#E2C474 !important;}
.hero a:not([class]):hover,
.np-section-alt a:not([class]):hover,
.nexus-program main a:not([class]):hover{color:#F0D391 !important;}
/* ------------------------------------------------------------
S3 - Gold contrast repair on white/cream backgrounds.
Any element inheriting brand gold as TEXT gets the dark-gold
variant. Decorative gold on shapes/borders is unaffected.
------------------------------------------------------------ */
/* Category tags / chips / "Read more" links / eyebrow labels */
.tag,.article-tag,.category-tag,.category-pill,
.read-more,.article-read-more,.card-read-more,
.eyebrow,.section-label,.blog-tag,.blog-category{
color:#8A6E26;
}
/* Preserve gold-on-dark for elements INSIDE dark themes */
.nexus-program .tag,.nexus-program .article-tag,.nexus-program .category-tag,
.nexus-program .read-more,.nexus-program .section-label,
.nexus-program-v2 .tag,.nexus-program-v2 .article-tag,.nexus-program-v2 .category-tag,
.nexus-program-v2 .read-more,.nexus-program-v2 .section-label,
.theme-dark .tag,.theme-dark .read-more{color:#E2C474 !important;}
/* Star rows on light backgrounds - use safe gold that passes 3:1 */
.review-stars,.featured-review-stars,.gr-stars,.stars,.star-row{color:#B8860B;}
.nexus-program .review-stars,.nexus-program .featured-review-stars,.nexus-program .gr-stars,
.nexus-program-v2 .review-stars,.nexus-program-v2 .featured-review-stars,.nexus-program-v2 .gr-stars,
.theme-dark .review-stars,.theme-dark .featured-review-stars{color:#E2C474 !important;}
/* "Google Reviews" / "Get Started" / eyebrow labels using A8862E on cream */
.google-eyebrow,.eyebrow-gold,[class*="eyebrow"]{color:#8A6E26;}
/* ------------------------------------------------------------
S5 - One heading scale.
Applied globally so no page has a 300-weight h2 next to
a 800-weight one.
------------------------------------------------------------ */
h1,.h1,.hero-title{
font-size:clamp(2.25rem,1.2rem + 3vw,3.5rem) !important;
font-weight:700 !important;
line-height:1.1 !important;
color:#F5F7FB;
}
h2,.h2,.section-title{
font-size:clamp(1.75rem,1rem + 2vw,2.25rem) !important;
font-weight:600 !important;
line-height:1.2 !important;
}
h3,.h3,.card-title{
font-size:clamp(1.125rem,1rem + .5vw,1.5rem) !important;
font-weight:600 !important;
line-height:1.3 !important;
}
/* Light-page headings default to ink */
main h2,main h3,article h2,article h3,section:not(.hero):not([class*="dark"]):not([class*="np-section"]) h2,
section:not(.hero):not([class*="dark"]):not([class*="np-section"]) h3{color:#111827;}
/* Dark-page headings default to paper */
.nexus-program h2,.nexus-program h3,.nexus-program-v2 h2,.nexus-program-v2 h3,
.hero h2,.hero h3,.np-section-alt h2,.np-section-alt h3,.theme-dark h2,.theme-dark h3{color:#F5F7FB !important;}
/* ------------------------------------------------------------
S6 - Chip/tag components: inline-block, not full-width.
------------------------------------------------------------ */
.article-tag,.tag,.badge,.category-pill,.category-tag,.blog-tag,.blog-category,.chip{
display:inline-block !important;
width:auto !important;
padding:4px 12px !important;
border-radius:999px !important;
font-size:12px !important;
line-height:1.4 !important;
white-space:nowrap !important;
background:rgba(197,160,69,0.12) !important;
color:#8A6E26 !important;
}
.nexus-program .article-tag,.nexus-program .tag,.nexus-program .category-pill,.nexus-program .chip,
.nexus-program-v2 .article-tag,.nexus-program-v2 .tag,.nexus-program-v2 .category-pill,
.theme-dark .article-tag,.theme-dark .tag{
background:rgba(226,196,116,0.14) !important;
color:#E2C474 !important;
}
/* ------------------------------------------------------------
S9 - Type floor: no body copy below 14px anywhere.
Legal fine print keeps its own explicit smaller size.
------------------------------------------------------------ */
p,li,td,th,figcaption{font-size:max(1rem,14px);}
.article-content p,.card-text,.faq-answer p,.testimonial-text,.content-block p{
font-size:16px;
line-height:1.65;
}
.footer-compliance-disclaimer,.article-disclaimer,.legal-fine-print{font-size:12px;line-height:1.55;}
/* Tap targets: nav/button/link min height 44px per WCAG 2.5.5 */
.site-header nav a,.mobile-nav a,.btn,.footer-links a,.card a.card-link{
min-height:44px;
display:inline-flex;
align-items:center;
}
/* ------------------------------------------------------------
S3 followup - Star row on YouTube red label /reviews page.
------------------------------------------------------------ */
.yt-label,[class*="youtube"] .review-platform{color:#B91C1C;}
/* ------------------------------------------------------------
Layout hygiene - stats-row auto-fit, condition-grid safer.
Not blocking, but eliminates zero-column phantoms.
------------------------------------------------------------ */
.stats-row{grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important;}