/*
* Dark theme. Active when has data-theme="dark" (set by the inline
* script in layouts/app.blade.php). Most of the site follows the --pxp* tokens
* redefined below; the rest of this file covers colors that aren't tokens.
*/
.pxp-root[data-theme="dark"] {
color-scheme: dark;
--pxpTextColor: #E6E9EE;
--pxpMainColor: #3D8FE0;
--pxpMainColorTransparent: rgba(61,143,224,0.1);
--pxpMainColorDark: #D5E6F8;
--pxpMainColorLight: #122335;
--pxpSecondaryColor: #33291A;
--pxpSecondaryColorLight: #211C14;
--pxpLightGrayColor: #2E3845;
--pxpDarkGrayColor: #8A94A0;
--pxpBodyBg: #0E1319;
--pxpSurface: #161D26;
--pxpSurfaceMuted: #1E2732;
--pxpSurfaceSubtle: #121920;
--pxpDivider: #26303C;
--pxpBorder: rgba(255,255,255,.16);
--pxpBorderStrong: rgba(255,255,255,.32);
--pxpDeepSurface: #0B2744;
--pxpTextInverse: #0E1319;
--pxpInk: 255,255,255;
--pxpBrandInk: #E6E9EE;
/* Bootstrap 5.3 dark palette, aligned with ours */
--bs-body-bg: var(--pxpBodyBg);
--bs-body-color: var(--pxpTextColor);
--bs-emphasis-color: #fff;
--bs-secondary-bg: var(--pxpSurfaceMuted);
--bs-tertiary-bg: var(--pxpSurface);
--bs-border-color: var(--pxpDivider);
--bs-link-color: var(--pxpMainColor);
--bs-link-color-rgb: 61,143,224;
}
.pxp-root[data-theme="dark"] body {
background-color: var(--pxpBodyBg);
}
/* Header / nav */
.pxp-root[data-theme="dark"] .pxp-header.pxp-is-sticky {
box-shadow: 0 1px 0 var(--pxpDivider);
}
.pxp-root[data-theme="dark"] .dropdown-menu {
background-color: var(--pxpSurface);
border: 1px solid var(--pxpDivider);
}
.pxp-root[data-theme="dark"] .pxp-nav .dropdown-menu .dropdown-item,
.pxp-root[data-theme="dark"] .dropdown-item {
color: var(--pxpTextColor);
}
.pxp-root[data-theme="dark"] .dropdown-item:hover,
.pxp-root[data-theme="dark"] .dropdown-item:focus {
background-color: var(--pxpSurfaceMuted);
}
.pxp-root[data-theme="dark"] .offcanvas {
background-color: var(--pxpSurface);
color: var(--pxpTextColor);
}
/* Forms */
.pxp-root[data-theme="dark"] .form-control,
.pxp-root[data-theme="dark"] .form-select,
.pxp-root[data-theme="dark"] .input-group-text {
background-color: var(--pxpSurface);
color: var(--pxpTextColor);
border-color: var(--pxpBorder);
}
.pxp-root[data-theme="dark"] .form-control::placeholder {
color: rgba(255,255,255,.4);
}
.pxp-root[data-theme="dark"] .form-check-input:not(:checked) {
background-color: var(--pxpSurfaceMuted);
border-color: var(--pxpBorder);
}
/* Company logos are made for white backgrounds — keep them on a light chip */
.pxp-root[data-theme="dark"] .pxp-jobs-card-2-company-logo:not(.pxp-logo-placeholder),
.pxp-root[data-theme="dark"] .pxp-single-job-cover-logo:not(.pxp-logo-placeholder),
.pxp-root[data-theme="dark"] .pxp-single-job-side-company-logo:not(.pxp-logo-placeholder) {
background-color: #fff;
}
/* Home hero decorative rings */
.pxp-root[data-theme="dark"] .pxp-hero-boxed-circular-outer { border-color: #1C3048; }
.pxp-root[data-theme="dark"] .pxp-hero-boxed-circular-outer-1,
.pxp-root[data-theme="dark"] .pxp-hero-boxed-circular-outer-2,
.pxp-root[data-theme="dark"] .pxp-hero-boxed-circular-outer-3 { background-color: #1C3048; }
.pxp-root[data-theme="dark"] .pxp-hero-boxed-circular-middle { border-color: #2A4460; }
.pxp-root[data-theme="dark"] .pxp-hero-boxed-circular-middle-1,
.pxp-root[data-theme="dark"] .pxp-hero-boxed-circular-middle-2,
.pxp-root[data-theme="dark"] .pxp-hero-boxed-circular-middle-3 { background-color: #2A4460; }
/* App store buttons are near-black; outline them so they don't melt into the page */
.pxp-root[data-theme="dark"] .pxp-store-btn {
box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
/* X / TikTok fill with a light brand color on hover, so their icon goes dark */
.pxp-root[data-theme="dark"] [style*="pxpBrandInk"] {
--pxpSocialOn: var(--pxpTextInverse);
}
/* Amber notes / chips (opportunity tag, CV tips, calculator notes) */
.pxp-root[data-theme="dark"] .pxp-tag-opportunity,
.pxp-root[data-theme="dark"] .pxp-cv-tip,
.pxp-root[data-theme="dark"] .pxp-cx-result-note {
background-color: rgba(201,121,27,.16);
color: #F0B86E;
}
.pxp-root[data-theme="dark"] .pxp-tag-opportunity .pxp-tag-icon { color: #F0B86E; }
.pxp-root[data-theme="dark"] .pxp-cv-counter-num.is-high { color: #F0B86E; }
.pxp-root[data-theme="dark"] .pxp-cv-icon-btn:hover { background-color: rgba(220,53,69,.18); }
/* Highlight spans in job descriptions and blog articles */
.pxp-root[data-theme="dark"] .article-content .hl-key { color: #8CC2F5; background: rgba(61,143,224,.16); }
.pxp-root[data-theme="dark"] .article-content .hl-location { color: #8CB8F5; background: rgba(23,92,211,.2); }
.pxp-root[data-theme="dark"] .job-description .hl-date,
.pxp-root[data-theme="dark"] .article-content .hl-date { color: #FDA29B; background: rgba(240,68,56,.14); }
.pxp-root[data-theme="dark"] .job-description .hl-benefit,
.pxp-root[data-theme="dark"] .article-content .hl-benefit { color: #75E0A7; background: rgba(23,178,106,.14); }
.pxp-root[data-theme="dark"] .job-description .hl-condition,
.pxp-root[data-theme="dark"] .article-content .hl-condition { color: #FEC84B; background: rgba(247,144,9,.14); }
/* Blog article boxes */
.pxp-root[data-theme="dark"] .article-content em { color: #B8BEC7; }
.pxp-root[data-theme="dark"] .article-content .box-tip .box-title { color: #F0B86E; }
.pxp-root[data-theme="dark"] .article-content .box-warning { background: rgba(240,68,56,.1); }
.pxp-root[data-theme="dark"] .article-content .box-warning .box-title { color: #FDA29B; }
.pxp-root[data-theme="dark"] .article-content tbody tr:nth-child(even) { background: rgba(255,255,255,.03); }
/* Theme toggle button (header + mobile menu) */
.pxp-theme-toggle .fa-sun-o { display: none; }
.pxp-root[data-theme="dark"] .pxp-theme-toggle .fa-sun-o { display: inline-block; }
.pxp-root[data-theme="dark"] .pxp-theme-toggle .fa-moon-o { display: none; }