/* ========================================================================== US People Search - theme.css Light / dark theme for the new UI. Loads AFTER common.css (+ phone.css | email.css | legal.css) on every newUi page and is the only sheet that knows about dark mode. The legacy sheets never load it. How it works - Default = system. With no stored choice the page follows prefers-color-scheme. An explicit choice is data-theme="light"|"dark" on , set by templates/partials/theme-init.hbs (inline, before any stylesheet, so there is no flash) and toggled by /script/theme.js. - The two dark selectors below only flip `color-scheme`. Every token is declared ONCE, in :root, as light-dark(, ): the browser picks the side that matches the element's color-scheme. The light side of every pair is byte-for-byte the value common.css already sets, so light mode renders identically with or without this sheet. - Colours that common.css uses as BOTH text and background (--navy, --navy-dark, --red-dark) cannot simply be lightened for dark mode, so the rules further down re-point those backgrounds at dedicated fill tokens (--navy-fill, --band, --red-fill ...). In light mode those tokens resolve to the exact colour common.css used, so again nothing changes. - Browsers without light-dark() (Chrome < 123, Safari < 17.5, Firefox < 120) skip the whole @supports block: they get the unchanged light UI and the toggle is hidden (theme.js hides it too). Dark palette (WCAG AA measured, see the merge report): page #0f1520 · surface #151d29 · tint #1b2533 · tint-2 #182231 field #101823 · text #e6ebf1 · muted #9fb0c3 · muted-2 #93a4b7 navy text #a9bcd0 / #9fb4cb / #b9c9da · brand-blue text #93b8e0 navy fills #4a6a8c (hover #587797) · card band #2f4a63 · underline #849bb4 green #57c07a on #16301f · red #ff7b7b on #3a1b1f · red fill #b3262e skeleton #223042 -> #2c3b4f · hairlines rgba(255,255,255,.10/.16) ========================================================================== */ @supports (color: light-dark(#000, #fff)) { /* --- Scheme switch -------------------------------------------------- */ :root { color-scheme: light; } /* no stored choice: follow the OS */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23c9d5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E"); } } /* explicit choice (theme-init / theme.js) */ :root[data-theme="dark"] { color-scheme: dark; --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23c9d5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E"); } /* --- Tokens: light-dark(, ) ----- */ :root { /* brand (text usages) */ --navy: light-dark(#436280, #a9bcd0); --navy-2: light-dark(#516f90, #9fb4cb); --navy-3: light-dark(#587797, #9fb4cb); --navy-4: light-dark(#849bb4, #849bb4); --navy-dark: light-dark(#425b74, #b9c9da); --brand-blue: light-dark(#2D5B8D, #93b8e0); --red: light-dark(#F60610, #ff6b6b); --red-2: light-dark(#FF1F1F, #FF1F1F); --red-soft: light-dark(#E95A5A, #E95A5A); --red-dark: light-dark(#c62828, #ff7b7b); --red-mid: light-dark(#d9363e, #ff7b7b); --red-deep: light-dark(#a71d2a, #7f1a22); --white: light-dark(#ffffff, #ffffff); --magenta: light-dark(#c23e91, #c23e91); --magenta-2: light-dark(#a33c7d, #e08ac4); --grad-heading: linear-gradient(to right, light-dark(#436280, #a9bcd0), light-dark(#516f90, #9fb4cb), light-dark(#436280, #a9bcd0)); /* status */ --green: light-dark(#158a3c, #57c07a); --green-bg: light-dark(#e6f4ea, #16301f); --green-line: light-dark(#bfe3c9, #2b5a3a); --red-bg: light-dark(#fdecec, #3a1b1f); --red-line: light-dark(#f3b8b8, #6b2a30); --amber-bg: light-dark(#fff6e0, #3a2f14); /* surfaces */ --bg: light-dark(#f4f6f8, #0f1520); --surface: light-dark(#ffffff, #151d29); --tint: light-dark(#eef2f6, #1b2533); --tint-2: light-dark(#f7f9fb, #182231); --line: light-dark(#d9e0e7, rgba(255, 255, 255, 0.10)); --line-strong: light-dark(#c5cfd9, rgba(255, 255, 255, 0.16)); --text: light-dark(#2f3b46, #e6ebf1); --muted: light-dark(#6b7a89, #9fb0c3); --muted-2: light-dark(#8b98a5, #93a4b7); --skeleton-a: light-dark(#e6eaee, #223042); --skeleton-b: light-dark(#f3f5f7, #2c3b4f); --shadow-panel: 0 1px 2px light-dark(rgba(16, 24, 40, 0.06), rgba(0, 0, 0, 0.40)), 0 1px 3px light-dark(rgba(16, 24, 40, 0.04), rgba(0, 0, 0, 0.30)); --shadow-pop: 0 8px 24px light-dark(rgba(16, 24, 40, 0.14), rgba(0, 0, 0, 0.55)); /* fills: colours common.css paints as backgrounds (light side = the token it used there, so light mode is unchanged) */ --navy-fill: light-dark(#436280, #4a6a8c); /* search button, Contact Us, .btn-primary */ --navy-fill-hover: light-dark(#425b74, #587797); --band: light-dark(#436280, #2f4a63); /* result-card header band */ --nav-underline: light-dark(#436280, #849bb4); /* active tab underline */ --red-fill: light-dark(#c62828, #b3262e); /* confirmed-litigator strip */ --red-fill-edge: light-dark(#a71d2a, #7f1a22); --field: light-dark(#ffffff, #101823); /* text fields */ --field-focus: light-dark(#ffffff, #101823); /* #input:focus painted --white in common.css */ --footer-bg: light-dark(#ffffff, #0f1520); --icon-disc: light-dark(transparent, #dfe6ee); /* disc behind the navy PNG prompts */ --select-arrow: url(/icon/drop-down-arrow.svg); /* dark data-URI set in the scheme blocks */ /* report row (phone.css literals) */ --report-field-bg: light-dark(rgba(255, 255, 255, 0.376), #101823); --report-field-fg: light-dark(#587797, #a9bcd0); --report-field-line: light-dark(#b3b3b3a0, rgba(255, 255, 255, 0.16)); --report-placeholder: light-dark(#9494945b, rgba(147, 164, 183, 0.6)); --report-select-bg: light-dark(#F3F6F8, #101823); --report-focus-line: light-dark(#849bb4db, #849bb4); --report-focus-glow: light-dark(#849bb4c8, rgba(132, 155, 180, 0.6)); --report-btn-bg: light-dark(#fa2121c9, #c62828); --report-grad-1: light-dark(#487aabf3, #3a6390); --report-grad-2: light-dark(#487aabc7, #36608c); --report-grad-3: light-dark(#487aaba2, #34597f); /* toggle */ --toggle-fg: light-dark(#436280, #e6ebf1); --toggle-bg: light-dark(#ffffff, #151d29); --toggle-line: light-dark(#c5cfd9, rgba(255, 255, 255, 0.28)); } /* --- Backgrounds that common.css painted with a text token ----------- */ #submit, #submit:disabled:hover, #submit.disabled-btn:hover { background: var(--navy-fill); border-color: var(--navy-fill); } #submit:hover { background: var(--navy-fill-hover); border-color: var(--navy-fill-hover); } .contact-us, .btn-primary, button.btn-primary, a.btn-primary, input.btn-primary { background: var(--navy-fill); border-color: var(--navy-fill); } .contact-us:hover, .btn-primary:hover, button.btn-primary:hover, a.btn-primary:hover, input.btn-primary:hover { background: var(--navy-fill-hover); border-color: var(--navy-fill-hover); } .cx-basic { background: var(--band); } a.nav-link.active, a.nav-link[aria-current="page"] { border-bottom-color: var(--nav-underline); } #loader { border-top-color: var(--navy-fill); } .cx-card.litigator-confirmed .cx-litigator { background: var(--red-fill); border-bottom-color: var(--red-fill-edge); } footer { background: var(--footer-bg); } /* --- Fields ---------------------------------------------------------- */ #input { background: var(--field); } #input:focus, #input:focus-visible, label#num_wrap input:focus, label#email_wrap input:focus { background: var(--field-focus); } .form-stack .form-input, .form-stack .form-select, .form-stack .form-textarea, .form-stack input.form-input, .form-stack select.form-select, .form-stack textarea.form-textarea { background-color: var(--field); } .form-stack .form-select, .form-stack select.form-select { background-image: var(--select-arrow); } form.report input[type="text"], form.report select { color: var(--report-field-fg); background-color: var(--report-field-bg); border-color: var(--report-field-line); } form.report input[type="text"]::placeholder { color: var(--report-placeholder); } form.report select { background-image: var(--select-arrow); background-color: var(--report-select-bg); } form.report input[type="text"]:focus, form.report select:focus { border: 1px solid var(--report-focus-line) !important; box-shadow: 0 0 3px 0 var(--report-focus-glow) inset !important; } form.report .submit-label { background: var(--report-btn-bg); } form.report .submit-label::before { background-image: linear-gradient(to right, var(--report-grad-1), var(--report-grad-2), var(--report-grad-3)); } form.report .submit-label::after { background-image: linear-gradient(to left, var(--report-grad-1), var(--report-grad-2), var(--report-grad-3)); } /* --- Navy PNG prompts (user-not-found / sad-cloud) get a light disc --- */ #cx-not-found span, #cx-ie span { background: var(--icon-disc); box-shadow: 0 0 0 5px var(--icon-disc); border-radius: 50%; } /* --- Toggle ---------------------------------------------------------- */ .site-logo-container { position: relative; } .theme-toggle { position: absolute; top: 50%; right: var(--gutter); width: 40px; height: 40px; margin: 0; padding: 0; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; color: var(--toggle-fg); background: var(--toggle-bg); border: 1px solid var(--toggle-line); border-radius: 0; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease; } .theme-toggle:hover { background: var(--tint); border-color: var(--navy-4); } .theme-toggle:focus { outline: none; } .theme-toggle:focus-visible { outline: 2px solid var(--navy-4); outline-offset: -4px; } .theme-toggle svg { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; pointer-events: none; } /* the icon shows the CURRENT theme: sun in light, moon in dark */ .theme-icon-sun { color: light-dark(#436280, transparent); } .theme-icon-moon { color: light-dark(transparent, #e6ebf1); } .theme-toggle[hidden] { display: none; } } /* no light-dark(): light only, no control */ @supports not (color: light-dark(#000, #fff)) { .theme-toggle { display: none; } }