/* ============================================================ Jardon Bookkeeping — Contrast & Button Remediation v3 — selectors prefixed with `html` to bump specificity over the app's own rules. Load order in alone isn't enough. ============================================================ */ :root { --teal-brand: #2dc5cd; --mint-1: #dcf3ed; --mint-2: #b8e1d5; --ink: #1a2a5e; --ink-strong: #0a0a0a; --teal-text: #0c7d85; --text-muted: #595f66; --text-disabled: #767c83; --amber-text: #9a6a10; --red-text: #b91c1c; --btn-radius: 8px; } /* P0-1 · Morning-brief banner → navy */ html .morning-brief, html .morning-brief *, html .mb-greeting, html .mb-narrative, html .mb-highlight, html .mb-count, html .mb-dismiss, html #mbGreeting, html #mbNarrative, html #mbHighlight, html #mbDismiss, html #mbCount, html .morning-brief summary, html .morning-brief a { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; opacity: 1 !important; text-shadow: none !important; } html .mb-dismiss, html #mbDismiss { opacity: .85 !important; } /* P0-2 · Teal-fill buttons → navy text */ html .new-client-btn, html .wiz-action-btn, html button[style*="2dc5cd"], html button[style*="rgb(45, 197, 205)"], html button[style*="rgb(45,197,205)"], html .btn-teal, html .btn--teal { background: var(--teal-brand) !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; border: none !important; } /* P0-3 / P0-6 · Teal-as-text → darkened teal */ html .sb-home-hint, html .eyebrow, html [class*="eyebrow"], html .back-link, html #backToClients, html .col.active .center, html .col.active.center, html .onboarding-pct, html .onboarding-figure { color: var(--teal-text) !important; -webkit-text-fill-color: var(--teal-text) !important; } html [style*="color:#2dc5cd"], html [style*="color: #2dc5cd"], html [style*="color:rgb(45, 197, 205)"], html [style*="color:rgb(45,197,205)"] { color: var(--teal-text) !important; -webkit-text-fill-color: var(--teal-text) !important; } /* Marketing headline-accent spans */ html h1 span[style*="2dc5cd"], html h2 span[style*="2dc5cd"], html h1 span[style*="rgb(45, 197, 205)"], html h2 span[style*="rgb(45, 197, 205)"] { color: var(--teal-text) !important; -webkit-text-fill-color: var(--teal-text) !important; } /* Keep teal on dark backgrounds */ html .section-dark .eyebrow, html .section-dark h1 span, html .section-dark h2 span, html .hero-dark .eyebrow { color: var(--teal-brand) !important; -webkit-text-fill-color: var(--teal-brand) !important; } /* P0-4 · Muted grays → #595f66 */ html .section-label, html .sb-hint, html #jp-headline, html .text-muted, html .muted, html small.muted, html .small-muted, html .meta, html .timestamp, html .filing-meta { color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted) !important; } html [style*="color:#9aa0a6"], html [style*="color: #9aa0a6"], html [style*="color:#94a3b8"], html [style*="color: #94a3b8"], html [style*="color:#8a8a8a"], html [style*="color: #8a8a8a"], html [style*="color:rgb(154, 160, 166)"], html [style*="color: rgb(154, 160, 166)"], html [style*="color:rgb(148, 163, 184)"], html [style*="color: rgb(148, 163, 184)"], html [style*="color:rgb(138, 138, 138)"], html [style*="color: rgb(138, 138, 138)"] { color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted) !important; } /* P0-5 · Invisible controls */ html .star, html [class*="star"], html .rating button, html .rating .star { color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted) !important; } html .star.filled, html .star--filled, html .rating .star.active, html .rating .star[aria-checked="true"] { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; } html .page-prev, html .page-next, html .pagination button, html button:disabled, html [aria-disabled="true"], html .is-disabled { color: var(--text-disabled) !important; -webkit-text-fill-color: var(--text-disabled) !important; } /* P1-4 · Status pills */ html .pill-amber, html .badge-amber, html .status-medium, html [class*="amber"][class*="pill"], html [class*="amber"][class*="badge"] { color: var(--amber-text) !important; -webkit-text-fill-color: var(--amber-text) !important; } html .pill-red, html .badge-red, html .folder-red, html .status-red, html [class*="red"][class*="pill"], html [class*="red"][class*="badge"] { color: var(--red-text) !important; -webkit-text-fill-color: var(--red-text) !important; } /* Buttons: radius + weight normalization */ html button, html .btn, html .button, html input[type="button"], html input[type="submit"] { border-radius: var(--btn-radius) !important; font-weight: 600 !important; font-family: inherit !important; } html button[style*="background:#2dc5cd"] { color: var(--ink) !important; } html button.icon-btn, html button[class*="icon-"] { font-family: inherit !important; } /* Typography floor */ html small, html .small, html .text-xs, html .caption { font-size: 12px !important; } html kbd { color: var(--text-muted) !important; } /* Strip translucent-white text on light surfaces (banner ghost text) */ html [style*="color:rgba(255,255,255"], html [style*="color: rgba(255, 255, 255"] { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; } html .section-dark [style*="color:rgba(255,255,255"], html .hero-dark [style*="color:rgba(255,255,255"], html .btn-primary [style*="color:rgba(255,255,255"] { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* END jardon-contrast.css v3 */