/* ============================================================================
cover-parity.css — Eccentryx app ⇄ cover brand parity (loaded LAST).
Ground truth (probed live, not from static styles.css): the app already
renders clinical — clinical-override.css wins over the dark styles.css base,
so body is near-white, text is dark, the accent is #2563EB brand-blue, and
headings are Playfair. This file closes the LAST two gaps to the cover, with
zero risk of inverting an already-light surface:
1. The element still carries the dark base background (#1a1a1a). Body
is light, so the dark root BLEEDS through below short pages and on
overscroll — a dark band under a clinical-white app. Repaint the root.
2. The app's clinical white is #fbfbfd (clinical-override's shade); the cover
is exactly #F6FBFF. Align to the cover's --bg for true one-brand parity.
Reversible: delete this file + its . No markup touched, no token
inverted — only the root background and the exact white shade move.
========================================================================== */
html {
background: #F6FBFF !important; /* was #1a1a1a — kills the dark root bleed */
}
html:has(body[data-current-page="home"]) {
background: var(--bg-alt, #050508) !important; /* dark home must not expose a white stable-scrollbar gutter */
}
body {
background: #F6FBFF !important; /* exact cover --bg (app rendered #fbfbfd) */
}
:root {
--bg: #F6FBFF !important;
--rep-paper: #F6FBFF !important;
}
/* Readiness ring — the cover's signature gauge, ported onto the app's daily
readiness check-in. The number sits inside a circular fill that tracks the
live intensity %. Decorative (aria-hidden); the % text carries the value.
pathLength=100 makes the JS wiring exact (offset = 100 - pct). */
.readiness-gauge {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 132px;
height: 132px;
}
.readiness-gauge .readiness-output-pct {
position: relative;
z-index: 1;
margin: 0 !important;
}
.readiness-ring {
position: absolute;
inset: 0;
width: 132px;
height: 132px;
transform: rotate(-90deg);
}
.readiness-ring-track { stroke: #E2ECF5; stroke-width: 8; }
.readiness-ring-fill { stroke: #2563EB; stroke-width: 8; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
/* fill animates when readiness changes (load + slider); snaps under reduce */
.readiness-ring-fill { transition: stroke-dashoffset .6s cubic-bezier(.22, .61, .36, 1); }
}
/* ============================================================================
GYM MODE POLISH — additive focus cues for the dark floor cockpit. Folded here
(not a new ) to respect the css-link-budget perf ratchet. The cards keep
their site-consistent hard-offset shadow (styles.css !important) untouched —
overriding it would break brand consistency and lose to !important anyway.
This ONLY adds a focal accent spine + a scannability hover, both purely
additive. Anchored on #gymModeShell (id specificity). Reversible: delete block.
The HUD legibility fix lives at its source (inline styles in index.html).
========================================================================== */
/* Accent spine on the "DO THIS NOW" primary card so the eye lands there first. */
#gymModeShell .gym-mode-primary { position: relative; }
#gymModeShell .gym-mode-primary::before {
content: "";
position: absolute;
left: 0;
top: 14px;
bottom: 14px;
width: 3px;
border-radius: 3px;
background: linear-gradient(180deg, #2563EB, rgba(91, 157, 255, 0.5));
}
/* Plan-checklist rows get a subtle brand-tinted hover for scannability. */
@media (prefers-reduced-motion: no-preference) {
#gymModeShell .gym-mode-plan-checklist > * { transition: background-color 0.15s ease; }
}
#gymModeShell .gym-mode-plan-checklist > *:hover {
background-color: rgba(37, 99, 235, 0.07);
}
/* ============================================================================
GYM TRIO ELEVATION — the LAST SET / NEXT TARGET / REST centerpiece (the three
.gym-mode-card in .gym-mode-grid). Authorized gym-mode beauty pass: replace the
flat hard 6px-offset shadow with soft layered depth + a top catch-light, refine
the radius to the cockpit's 14px glass rhythm, and give a clean ink hairline so
the light cards read as crafted, not flat. The NEXT TARGET card (.gym-mode-primary)
becomes the SINGLE focal fixation: a pure brand-blue (#60a5fa ramp) glass gradient
— single-accent per the beauty thesis (the prior blue->indigo ramp leaked a second
hue) — restored here with a brand-blue border + blue-tinted lift. Scoped to the grid so
no other cockpit card changes. !important is required to win styles.css's
!important card rules. Light bg + dark child text stays AA. Reversible: delete. */
#gymModeShell .gym-mode-grid .gym-mode-card {
border-radius: 14px !important;
border: 1px solid rgba(16, 23, 42, 0.10) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.85),
0 1px 2px rgba(16, 23, 42, 0.05),
0 12px 30px rgba(16, 23, 42, 0.10) !important;
}
/* NEXT TARGET — the one card the eye should land on: restore the focal gradient,
brand-blue border, and a blue-tinted elevation. The accent spine (above) rides
its left edge. */
#gymModeShell .gym-mode-grid .gym-mode-primary {
border-color: rgba(96, 165, 250, 0.50) !important;
background-color: rgba(255, 255, 255, 0.94) !important;
background-image: linear-gradient(135deg, rgba(96, 165, 250, 0.16), rgba(96, 165, 250, 0.05)) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.90),
0 2px 6px rgba(37, 99, 235, 0.10),
0 16px 40px rgba(37, 99, 235, 0.18) !important;
}
/* Gym checklist scroll affordance: a contained, brand-blue scrollbar plus soft
top/bottom scroll shadows. Uses background-attachment local/scroll so the
edge cue appears only when rows can move; no extra markup and no new link. */
#gymModeShell .gym-mode-plan-checklist {
scrollbar-gutter: stable both-edges;
scrollbar-width: thin;
scrollbar-color: #60a5fa rgba(15, 23, 42, 0.28);
overscroll-behavior: contain;
background:
linear-gradient(to bottom, rgba(22, 33, 60, 0.96), rgba(22, 33, 60, 0)) top / 100% 24px no-repeat local,
linear-gradient(to top, rgba(22, 33, 60, 0.96), rgba(22, 33, 60, 0)) bottom / 100% 24px no-repeat local,
radial-gradient(farthest-side at 50% 0, rgba(96, 165, 250, 0.28), rgba(96, 165, 250, 0)) top / 100% 14px no-repeat scroll,
radial-gradient(farthest-side at 50% 100%, rgba(96, 165, 250, 0.28), rgba(96, 165, 250, 0)) bottom / 100% 14px no-repeat scroll;
background-attachment: local, local, scroll, scroll;
}
#gymModeShell .gym-mode-plan-checklist::-webkit-scrollbar {
width: 10px;
}
#gymModeShell .gym-mode-plan-checklist::-webkit-scrollbar-track {
background: rgba(15, 23, 42, 0.28);
border-radius: 999px;
}
#gymModeShell .gym-mode-plan-checklist::-webkit-scrollbar-thumb {
border: 2px solid rgba(15, 23, 42, 0.28);
border-radius: 999px;
background: linear-gradient(180deg, #60a5fa, #2563eb);
}
/* ============================================================================
SINGLE-ACCENT TOKEN NORMALIZATION -- reversible brand-parity slice.
Render probe confirmed the base accent-warm/accent-glow/purple aliases leak
gold and purple into plan/gym/tools/atlas. Keep light cards on the darker
brand-blue for AA; keep dark home/cockpit chrome on the lighter blue ramp.
Reversible: delete this block and restore the cache key.
========================================================================== */
:root {
--accent-warm: #2563eb !important;
--accent-glow: #2563eb !important;
--purple: #2563eb !important;
--purple-light: #2563eb !important;
--purple-glow: #2563eb !important;
--red: #2563eb !important;
--red-light: #2563eb !important;
--red-glow: #2563eb !important;
}
body[data-current-page="home"],
#gymModeShell,
.gym-mode-shell,
.topnav,
.sidebar {
--accent-warm: #60a5fa !important;
--accent-glow: #60a5fa !important;
--purple: #60a5fa !important;
--purple-light: #60a5fa !important;
--purple-glow: #60a5fa !important;
--red: #60a5fa !important;
--red-light: #60a5fa !important;
--red-glow: #60a5fa !important;
}
/* Section dividers: remove the rendered gold center stop from the full-width
page separator while preserving the existing blue edge glow. */
.section + .section::before {
background: linear-gradient(
90deg,
transparent,
rgba(96, 165, 250, 0.42) 35%,
rgba(37, 99, 235, 0.50) 50%,
rgba(96, 165, 250, 0.42) 65%,
transparent
) !important;
}
/* Home ambient wash: replace retired lime with the brand-blue ramp while keeping
the home route dark. */
body[data-current-page="home"] #home.home-intro {
background:
radial-gradient(ellipse 60% 50% at 20% 0%, rgba(96, 165, 250, 0.12) 0, transparent),
radial-gradient(ellipse 60% 50% at 80% 10%, rgba(37, 99, 235, 0.12) 0, transparent),
var(--bg-alt) !important;
}
/* Render-probed literal accent cleanup. These selectors had hard-coded cyan,
lime, red, purple, or gold after token normalization. */
[data-accent] .hud-marker,
.hud-marker {
color: #2563eb !important;
text-shadow: 0 0 16px rgba(37, 99, 235, 0.22) !important;
}
.hud-marker::before,
.hud-marker::after {
background: #60a5fa !important;
}
body[data-current-page="home"] .pathway-atpcp {
background: #2563eb !important;
color: #ffffff !important;
box-shadow: 0 12px 30px rgba(37, 99, 235, 0.28) !important;
}
body[data-current-page="home"] .pathway-glycolytic {
color: #60a5fa !important;
border-color: rgba(96, 165, 250, 0.45) !important;
box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.20) !important;
}
body[data-current-page="home"] .market-founder-mark,
body[data-current-page="home"] .market-founder-mark::before,
body[data-current-page="home"] .market-founder-mark::after {
border-color: rgba(96, 165, 250, 0.42) !important;
}
#assistantToggle.assistant-toggle {
background: linear-gradient(135deg, #2563eb, #60a5fa) !important;
box-shadow: 0 12px 30px rgba(37, 99, 235, 0.24) !important;
}
.section-tools .tool-card::after,
body[data-current-page="gym"] .gym-mode-card::after {
background: linear-gradient(135deg, rgba(96, 165, 250, 0.12), transparent 42%) !important;
}
.section-tools .tool-signal-grid span,
.section-tools .tool-card-tagline,
.section-tools .tool-feature-line,
.section-tools .tool-foot,
.section-tools .too-unit,
.section-tools .trd-milestone,
.section-tools .tools-foot {
color: #60a5fa !important;
}
.section-tools .tools-filter-btn.active,
.section-tools .tools-filter-btn[aria-pressed="true"] {
background: rgba(96, 165, 250, 0.18) !important;
border-color: rgba(96, 165, 250, 0.44) !important;
color: #0f172a !important;
}
#atlas .atlas-card,
#atlasVisualReceipt {
border-color: rgba(96, 165, 250, 0.32) !important;
}
#atlas .atlas-visual-shell[data-visual-status],
#atlas .atlas-visual-shell[data-visual-status="exercise-avatar"],
#atlas .atlas-visual-shell[data-visual-status="anatomy"] {
border-color: rgba(96, 165, 250, 0.45) !important;
background:
linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(37, 99, 235, 0.06)),
rgba(255, 255, 255, 0.02) !important;
}
#atlas .atlas-visual-shell[data-visual-status="exercise-avatar"]::before,
#atlas .atlas-visual-shell[data-visual-status="exercise-avatar"] .atlas-visual-caption-min,
#atlas .atlas-visual-shell[data-visual-status="anatomy"] .atlas-visual-caption-min {
border-color: rgba(96, 165, 250, 0.50) !important;
}
#atlas .metabolic-tag,
#atlas .metabolic-tag.metabolic-glycolytic,
#atlas .metabolic-tag.metabolic-aerobic {
color: #2563eb !important;
border-color: rgba(96, 165, 250, 0.36) !important;
background: rgba(96, 165, 250, 0.14) !important;
}
#gymModeShell .gym-mode-readiness li.ready-ok::before,
#gymModeShell .gym-mode-readiness li.ready-warn::before {
background: #60a5fa !important;
box-shadow: 0 0 18px rgba(96, 165, 250, 0.42) !important;
}
#gymModeShell #gymModeCommandNext {
background-color: rgba(96, 165, 250, 0.12) !important;
border-color: rgba(96, 165, 250, 0.34) !important;
}
#gymModeShell .mp-track {
background: linear-gradient(90deg, #60a5fa, #2563eb) !important;
}
#hudState {
color: #60a5fa !important;
}
/* Render-probed accent cleanup v2. Remaining leaks were hard-coded cyan, teal,
purple, red, lime, gold, and green accents that survived token normalization. */
[data-page="demo"] .quiz-opt,
[data-page] .quiz-opt,
.quiz-opt {
border-color: rgba(96, 165, 250, 0.30) !important;
}
[data-page="demo"] .quiz-opt:hover,
[data-page="demo"] .quiz-opt:focus-visible,
[data-page="demo"] .quiz-opt.active,
[data-page="demo"] .quiz-opt.selected,
[data-page="demo"] .quiz-opt[aria-selected="true"],
[data-page] .quiz-opt.active,
[data-page] .quiz-opt.selected,
[data-page] .quiz-opt[aria-selected="true"] {
border-color: rgba(96, 165, 250, 0.72) !important;
background: linear-gradient(180deg, rgba(96, 165, 250, 0.18), rgba(96, 165, 250, 0.08)) !important;
}
#streakDots .ss-dot.today {
outline-color: rgba(96, 165, 250, 0.50) !important;
}
#sidebarAccount .sidebar-account-cta {
background: linear-gradient(135deg, rgba(96, 165, 250, 0.16), rgba(37, 99, 235, 0.10)) !important;
border-color: rgba(96, 165, 250, 0.34) !important;
box-shadow: 0 8px 22px rgba(37, 99, 235, 0.14) !important;
}
body[data-current-page="home"] .market-trust-list > div::before {
border-color: rgba(96, 165, 250, 0.34) !important;
}
body[data-current-page="home"] .market-final-primary.pathway-atpcp,
body[data-current-page="home"] .market-final-primary.pathway-atpcp::after {
color: #ffffff !important;
}
body[data-current-page="home"] .market-final-primary.pathway-atpcp {
background: linear-gradient(135deg, #2563eb, #60a5fa) !important;
border-color: rgba(96, 165, 250, 0.42) !important;
box-shadow: 0 12px 30px rgba(37, 99, 235, 0.28) !important;
}
body[data-current-page="home"] .market-final-secondary.pathway-glycolytic,
body[data-current-page="home"] .market-final-secondary.pathway-glycolytic::after {
color: #60a5fa !important;
}
body[data-current-page="home"] .market-final-secondary.pathway-glycolytic {
border-color: rgba(96, 165, 250, 0.45) !important;
box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.20) !important;
}
body[data-current-page="home"] #home > .home-frame.gym-mode-shell,
body[data-current-page="gym"] #gymModeShell {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 20px 70px rgba(37, 99, 235, 0.12),
0 0 0 1px rgba(96, 165, 250, 0.18) !important;
}
#gymModeShell .gym-mode-readiness li {
border-color: rgba(96, 165, 250, 0.16) !important;
}
#gymModeContextStrip .gym-mode-label,
#gymModeShell .gym-mode-label,
#gymModeShell .mp-labels span {
color: #60a5fa !important;
}
#gymModeContextReset {
color: #0f172a !important;
background: rgba(96, 165, 250, 0.20) !important;
border-color: rgba(96, 165, 250, 0.34) !important;
}
#hudHRBar,
#hudCNSBar,
#hudLactateBar {
background: #60a5fa !important;
box-shadow: 0 0 8px rgba(96, 165, 250, 0.55) !important;
}
#tools #trOut {
background: linear-gradient(180deg, rgba(246, 251, 255, 0.98), rgba(96, 165, 250, 0.08)) !important;
border-color: rgba(96, 165, 250, 0.22) !important;
border-left-color: rgba(96, 165, 250, 0.78) !important;
}
#tools #trVerdict {
color: #2563eb !important;
background: rgba(96, 165, 250, 0.12) !important;
border-color: rgba(96, 165, 250, 0.28) !important;
}
.section-tools .nutri-phase.active,
.section-tools .nutri-phase[aria-pressed="true"],
.section-tools .nutri-activity.active {
border-color: rgba(96, 165, 250, 0.72) !important;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16) !important;
}
.section-tools .macro-fat,
.section-tools .macro-out .macro-fat {
background: rgba(96, 165, 250, 0.10) !important;
border-color: rgba(96, 165, 250, 0.24) !important;
}
#atlasVisualReceipt > span {
border-color: rgba(96, 165, 250, 0.16) !important;
}
/* ============================================================================
SINGLE-ACCENT RESIDUAL BLUE-SHADE NORMALIZATION -- reversible render-probed
slice. The computed-color probe still found legacy blue tints from
clinical-override, aesthetic-premium, and inline public links:
#5b8def / #9ec5ff / #9ecbff / #3b82f6 / #4f7ee8 / #1d4ed8 / #6ea8ff.
Keep dark cockpit/nav surfaces intact; retone only painted accent text,
strokes, borders, and translucent chips onto the sourced brand ramp.
Reversible: delete this block.
========================================================================== */
:root {
--blue-light: #60a5fa !important;
--text-label: #60a5fa !important;
--rep-cyan: #60a5fa !important;
}
.brand-mark svg,
.sidebar-brand-mark svg,
.brand-mark svg path,
.sidebar-brand-mark svg path {
color: #60a5fa !important;
stroke: #60a5fa !important;
}
#sidebar .sidebar-mode-label,
#sidebar .sa-glyph,
#sidebar .ss-label,
#sidebar .sb-glyph,
#sidebar #streakGraceNum {
color: #60a5fa !important;
-webkit-text-fill-color: #60a5fa !important;
}
#sidebar .sidebar-mode-label,
#sidebar .sidebar-foot-line {
color: #f6fbff !important;
-webkit-text-fill-color: #f6fbff !important;
}
#sidebar summary,
#sidebar a.active,
#sidebar a[aria-current="page"] {
background: rgba(96, 165, 250, 0.12) !important;
}
#backToTop.back-to-top,
#backToTop.back-to-top svg,
#backToTop.back-to-top path {
color: #60a5fa !important;
stroke: #60a5fa !important;
}
[data-page].page-active {
outline-color: #60a5fa !important;
}
body[data-current-page="home"] #home a[href="/free_mode"],
body[data-current-page="home"] #home a[href="/weak-link-report"],
body[data-current-page="home"] .home-proof-strip strong,
body[data-current-page="home"] .market-loop-summary b,
body[data-current-page="home"] .market-stage-number,
body[data-current-page="home"] .market-stage-action,
body[data-current-page="home"] .market-pricing-anchor strong,
body[data-current-page="home"] .anchor-badge {
color: #60a5fa !important;
-webkit-text-fill-color: #60a5fa !important;
}
body[data-current-page="home"] #home a[href="/free_mode"],
body[data-current-page="home"] #home a[href="/weak-link-report"] {
border-bottom-color: rgba(96, 165, 250, 0.40) !important;
}
body[data-current-page="home"] .home-proof-strip,
body[data-current-page="home"] .market-pricing-anchor,
body[data-current-page="home"] .anchor-badge {
border-color: rgba(96, 165, 250, 0.38) !important;
}
#quiz .hero-section-label,
#tools strong,
#tools #tempoDisplay,
#atlas strong {
color: #2563eb !important;
-webkit-text-fill-color: #2563eb !important;
}
#tools li,
#tools .macro-carbs,
#tools .macro-out .macro-carbs {
border-left-color: rgba(37, 99, 235, 0.70) !important;
}
#gymModeShell .hero-section-label,
#gymModeShell [style*="#6ea8ff"] {
color: #60a5fa !important;
-webkit-text-fill-color: #60a5fa !important;
}
#atlas .metabolic-tag,
#atlas .metabolic-tag.metabolic-atp,
#atlas .metabolic-tag.metabolic-glycolytic,
#atlas .metabolic-tag.metabolic-aerobic {
box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.30) !important;
}
#atlas .atlas-visual-shell {
box-shadow:
inset 0 0 0 1px rgba(96, 165, 250, 0.12),
0 12px 28px rgba(37, 99, 235, 0.10) !important;
}
#atlas .atlas-visual-caption-min {
color: #0f172a !important;
background: rgba(246, 251, 255, 0.94) !important;
border-color: rgba(96, 165, 250, 0.24) !important;
}
#atlas .atlas-visual-caption-min span {
color: #334155 !important;
}
/* Render-probed accent cleanup v3. Final visible leaks were progress dots,
atlas active-control borders, low-alpha home funnel chrome, and WebKit text fill. */
.quiz-dot {
background: rgba(96, 165, 250, 0.18) !important;
}
#gymModePlanChecklist > .gym-mode-plan-empty,
#gymModeShell .gym-mode-plan-empty {
border-color: rgba(96, 165, 250, 0.20) !important;
}
#atlas .atlas-filter.active,
#atlas .atlas-filter[aria-pressed="true"],
#atlas .atlas-view-btn.active,
#atlas .atlas-view-btn[aria-pressed="true"],
.section-atlas .atlas-filter.active,
.section-atlas .atlas-filter[aria-pressed="true"],
.section-atlas .atlas-view-btn.active,
.section-atlas .atlas-view-btn[aria-pressed="true"] {
border-color: rgba(96, 165, 250, 0.72) !important;
}
body[data-current-page="home"] .market-product-proof,
body[data-current-page="home"] .market-trust-receipt,
body[data-current-page="home"] .market-final-cta {
background:
linear-gradient(rgba(96, 165, 250, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(96, 165, 250, 0.045) 1px, transparent 1px),
#11131a !important;
}
body[data-current-page="home"] .market-trust-list > div {
border-top-color: rgba(96, 165, 250, 0.14) !important;
}
body[data-current-page="home"] .market-final-facts li {
border-color: rgba(96, 165, 250, 0.14) !important;
}
body[data-current-page="home"] .market-final-primary.pathway-atpcp,
body[data-current-page="home"] .market-final-primary.pathway-atpcp::after {
-webkit-text-fill-color: #ffffff !important;
}
body[data-current-page="home"] .market-final-secondary.pathway-glycolytic,
body[data-current-page="home"] .market-final-secondary.pathway-glycolytic::after {
-webkit-text-fill-color: #60a5fa !important;
}
/* Render-probed accent cleanup v4: final gym notes/trial-log cyan border. */
#gymModeShell .gym-mode-notes,
#gymModeTrialLog {
border-color: rgba(96, 165, 250, 0.18) !important;
}
/* Prevent stale purple from appearing as a transition frame in the final CTAs. */
body[data-current-page="home"] #home .market-final-actions > a.market-final-primary.pathway-atpcp,
body[data-current-page="home"] #home .market-final-actions > a.market-final-secondary.pathway-glycolytic {
transition-property: background, border-color, box-shadow, transform, -webkit-text-fill-color !important;
}