/* ═══════════════════════════════════════════════════════════════ Site-wide CSS overrides Loads on every page using layouts/partials/main.blade.php. This file has two responsibilities — kept together because there is no other shared editable stylesheet on legacy pages (styles.min.css is compiled, homepage.css only loads on /): 1. Global palette tokens (the :root block below). These apply in BOTH light and dark mode. The file name "dark-mode" understates its scope — it's also the site-wide token registry. 2. Dark-mode overrides scoped to .dark on (the header toggle adds/removes the class). ═══════════════════════════════════════════════════════════════ */ /* Global palette tokens — used in light AND dark mode. */ :root { --hp-navy: #1A1A2E; --hp-navy-light: #252540; --hp-cream: #FAF8F4; --hp-gold: #B8960C; --hp-gold-light: #D4AF37; --hp-surface: #FFFFFF; } /* ─── Helper classes (light + dark) ───────────────────────────── */ .hp-bg-surface { background-color: var(--hp-surface); } .dark .hp-bg-surface { background-color: var(--hp-navy) !important; } /* ─── hp-subnav* base rules (currently undefined) ─────────────── */ .hp-subnav { background: #ffffff; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .hp-subnav-inner { max-width: 1280px; margin: 0 auto; padding: 8px 24px; } .hp-subnav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; } .hp-subnav-list li { margin: 0; } .hp-subnav-list a { display: inline-block; padding: 6px 4px; color: #4b5563; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease; } .hp-subnav-list a:hover { color: var(--hp-gold); } @media (max-width: 768px) { .hp-subnav-inner { padding: 8px 12px; } .hp-subnav-list { gap: 4px 14px; } .hp-subnav-list a { font-size: 13px; } } /* ─── DARK MODE ───────────────────────────────────────────────── */ .dark body { background: var(--hp-navy); color: var(--hp-cream); } .dark .hp-subnav { background: var(--hp-navy); border-bottom-color: rgba(255, 255, 255, 0.07); } .dark .hp-subnav-list a { color: rgba(255, 255, 255, 0.6); } .dark .hp-subnav-list a:hover { color: var(--hp-gold-light); } /* Bootstrap utility overrides (Bootstrap 5 ships these with !important so dark variants must too — scoped to .dark only) */ .dark .bg-primary { background-color: var(--hp-navy-light) !important; } .dark .bg-light { background-color: var(--hp-navy-light) !important; } .dark .bg-dark { background-color: var(--hp-navy) !important; } .dark .bg-white { background-color: var(--hp-navy) !important; } .dark .text-dark { color: var(--hp-cream) !important; } .dark .text-light { color: rgba(255, 255, 255, 0.65) !important; } .dark .text-white { color: var(--hp-cream) !important; } .dark .text-muted { color: rgba(255, 255, 255, 0.45) !important; } .dark .text-primary { color: var(--hp-gold-light) !important; } .dark .text-secondary { color: rgba(255, 255, 255, 0.55) !important; } .dark a { color: var(--hp-gold-light); } .dark a:hover { color: var(--hp-gold); } .dark .nav-link { color: rgba(255, 255, 255, 0.7) !important; } .dark .nav-link:hover { color: var(--hp-cream) !important; } .dark hr { border-top-color: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.07); } .dark .border, .dark .border-top, .dark .border-bottom, .dark .border-start, .dark .border-end { border-color: rgba(255, 255, 255, 0.1) !important; } .dark .form-control { background-color: var(--hp-navy-light); color: var(--hp-cream); border-color: rgba(255, 255, 255, 0.18); } /* In dark mode the input border must be visible at all times, even when the markup uses Bootstrap's .border-0 utility. */ .dark .form-control, .dark .form-control.border-0 { border: 1px solid rgba(255, 255, 255, 0.18) !important; } .dark .form-control::placeholder { color: rgba(255, 255, 255, 0.4); } .dark .form-control:focus { background-color: var(--hp-navy-light); color: var(--hp-cream); border-color: var(--hp-gold); box-shadow: 0 0 0 0.2rem rgba(184, 150, 12, 0.25); } /* Read-only "plain text" inputs used in share boxes (article + writer pages) inherit their parent surface colour. */ .dark .form-control-plaintext { color: var(--hp-cream); } .dark .card { background-color: var(--hp-navy-light); border-color: rgba(255, 255, 255, 0.07); } .dark .card-body, .dark .card-title, .dark .card-text { color: var(--hp-cream); } .dark .btn-primary { background-color: var(--hp-gold); border-color: var(--hp-gold); color: var(--hp-navy); } .dark .btn-primary:hover { background-color: var(--hp-gold-light); border-color: var(--hp-gold-light); color: var(--hp-navy); } .dark .btn-outline-primary { color: var(--hp-gold-light); border-color: var(--hp-gold-light); } .dark .btn-outline-primary:hover { background-color: var(--hp-gold); border-color: var(--hp-gold); color: var(--hp-navy); } .dark .table { color: var(--hp-cream); } .dark .table-bordered, .dark .table> :not(caption)>*>* { border-color: rgba(255, 255, 255, 0.07); } .dark .searchbox-title { color: var(--hp-gold-light) !important; } /* Custom utility used across writer / article share boxes and the article table-of-contents widget. Defined in styles.min.css as #F6F6F6. */ .dark .bg-extra-light { background-color: var(--hp-navy-light) !important; color: var(--hp-cream); } /* Article table-of-contents (فهرس) — make the panel clearly visible in dark mode at all times, not only when a child element is hovered. */ .dark #article-toc { background-color: var(--hp-navy-light) !important; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; padding: 12px 16px; } .dark #article-toc .text-primary { color: var(--hp-gold-light) !important; } .dark #article-toc li a, .dark #article-toc a.text-dark { color: rgba(255, 255, 255, 0.75) !important; } .dark #article-toc li a:hover { color: var(--hp-gold-light) !important; } /* ─── User Dashboard (pages/user-dashboard.blade.php) ───────── The .ud-* classes use a light palette by default; flip the text colours and card surfaces for dark mode. */ /* Score overview was navy-on-navy in dark mode and disappeared into the body. Lift it onto navy-light with a subtle border so it reads as a card. */ .dark .ud-score-overview { background: var(--hp-navy-light); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); } .dark .ud-greeting { color: var(--hp-cream); } .dark .ud-subtitle { color: rgba(255, 255, 255, 0.55); } .dark .ud-improvement { background: rgba(22, 163, 74, 0.12); border-color: rgba(22, 163, 74, 0.3); } .dark .ud-improvement-text { color: rgba(187, 247, 208, 0.85); } .dark .ud-card { background: var(--hp-navy-light); border-color: rgba(255, 255, 255, 0.07); } .dark .ud-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); } .dark .ud-card h3 { color: var(--hp-cream); } .dark .ud-card p { color: rgba(255, 255, 255, 0.55); } .dark .ud-path-progress-bar { background: rgba(255, 255, 255, 0.06); } .dark .ud-path-progress-label { color: var(--hp-cream); } .dark .ud-path-unit.locked { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.3); } .dark .ud-sim-scenario { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.07); } .dark .ud-sim-scenario-title { color: var(--hp-cream); } .dark .ud-sim-score { color: rgba(255, 255, 255, 0.45); } .dark .ud-coach-preview { background: rgba(255, 255, 255, 0.04); } .dark .ud-coach-msg { color: rgba(255, 255, 255, 0.65); } .dark .ud-insight-item { background: rgba(255, 255, 255, 0.04); } .dark .ud-insight-num { color: var(--hp-cream); } .dark .ud-insight-label { color: rgba(255, 255, 255, 0.55); } .dark .ud-insight-neutral { color: rgba(255, 255, 255, 0.4); } .dark .ud-article-item { background: rgba(255, 255, 255, 0.04); } .dark .ud-article-item:hover { background: rgba(255, 255, 255, 0.07); } .dark .ud-article-thumb { background: rgba(255, 255, 255, 0.06); } .dark .ud-article-info h4 { color: var(--hp-cream); } .dark .ud-article-info span { color: rgba(255, 255, 255, 0.45); } /* ─── Assessment Show (pages/assessments/show.blade.php) ────── The hero card is already dark by design. Flip the section labels, dimension tags, and breadcrumb-current colours. */ /* Hero card was navy-on-navy in dark mode and disappeared into the body. Lift it onto navy-light with a subtle border so it reads as a card. */ .dark .ua-hero { background: var(--hp-navy-light); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); } .dark .ua-breadcrumb-current { color: rgba(255, 255, 255, 0.55); } .dark .ua-breadcrumb-sep { color: rgba(255, 255, 255, 0.35); } .dark .ua-section-label { color: var(--hp-cream); } .dark .ua-section-count { color: rgba(255, 255, 255, 0.45); } .dark .ua-dim-tag { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.75); border-color: rgba(255, 255, 255, 0.1); } .dark .ua-count-num { color: var(--hp-cream); } /* ─── Profile Page (pages/profile.blade.php) ────────────────── The .profile-page namespace uses light surfaces with dark text. In dark mode the data values (#1F2937) were invisible on navy, and the hover background (#F5F5F5) flipped to light-on-light which hid the .text-muted reading-time line. */ /* Lift the main card so it stops blending into the body. */ .dark .profile-page .profile-card { background: var(--hp-navy-light); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); } .dark .profile-page .info-section, .dark .profile-page .reading-history-card, .dark .profile-page .newsletter-card { background: var(--hp-navy-light); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); } /* Make the data values readable without needing a hover. */ .dark .profile-page .data-value, .dark .profile-page .name-value { color: var(--hp-cream); } .dark .profile-page .data-label { color: rgba(255, 255, 255, 0.6); } .dark .profile-page .section-title { border-bottom-color: rgba(255, 255, 255, 0.08); } /* Replace light-gray hover backgrounds with a subtle dark tint so light text stays readable on hover (was bg-#F5F5F5 cancelling .text-muted = white in dark mode). */ .dark .profile-page .data-item:hover, .dark .profile-page .location-item:hover { background: rgba(255, 255, 255, 0.05); } .dark .profile-page .location-item { border-bottom-color: rgba(255, 255, 255, 0.06); } /* Reading-history list item hover — same fix; keep the meta line (read-percentage + reading-time) visible after hover. */ .dark .profile-page .reading-history-item:hover { background-color: rgba(255, 255, 255, 0.05); } .dark .profile-page .reading-history-item h6 a { color: var(--hp-cream) !important; } .dark .profile-page .reading-history-item:hover h6 a { color: var(--hp-gold-light) !important; } /* Stat cards on the reading-history block — Bootstrap .card with inline white shadows. Lift onto navy-light. */ .dark .profile-page .reading-stat-card { background: var(--hp-navy-light) !important; } /* Section dividers + borders inside the profile. */ .dark .profile-page hr { border-top-color: rgba(255, 255, 255, 0.08); } .dark .profile-page .border-start, .dark .profile-page .border-end, .dark .profile-page .border-top, .dark .profile-page .border-bottom { border-color: rgba(255, 255, 255, 0.08) !important; } /* Gender badge — light pastel pills don't read well on navy. */ .dark .profile-page .gender-male { background: rgba(37, 99, 235, 0.18); color: #93C5FD; } .dark .profile-page .gender-female { background: rgba(220, 38, 38, 0.18); color: #FCA5A5; } .dark .profile-page .experience-number { background: rgba(184, 150, 12, 0.18); } /* Profile edit page (pages/profile/edit.blade.php) — same treatment as the view page. The .form-section blocks were #F5F5F5 in light mode which kept light text invisible in dark mode. */ .dark .profile-page .profile-edit-card { background: var(--hp-navy-light); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); } .dark .profile-page .form-section { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); } .dark .profile-page .form-label { color: var(--hp-cream); } /* Bootstrap .form-select needs its own dark variant — the global .form-control rule doesn't reach it (separate Bootstrap class with its own bg + arrow svg). The gender / country / city dropdowns were rendering as white pills on the dark form. */ .dark .form-select { background-color: var(--hp-navy-light); color: var(--hp-cream); border-color: rgba(255, 255, 255, 0.18); } .dark .form-select option { background-color: var(--hp-navy-light); color: var(--hp-cream); } .dark .form-select:focus { border-color: var(--hp-gold); box-shadow: 0 0 0 0.2rem rgba(184, 150, 12, 0.25); } /* Validation feedback + alerts that appear above the form. */ .dark .alert-success { background: rgba(22, 163, 74, 0.12); border-color: rgba(22, 163, 74, 0.3); color: rgba(187, 247, 208, 0.9); } .dark .alert-danger { background: rgba(220, 38, 38, 0.12); border-color: rgba(220, 38, 38, 0.3); color: #FCA5A5; } .dark .alert-light { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); color: var(--hp-cream); } /* QR / Barcode generator (tools/qrcode.blade.php) — qr.png and barcode.png are pure black icons that vanish on a navy bg. Invert them in dark mode so they render as light icons. */ .dark .generator-radio img { filter: invert(1) brightness(0.95); } /* Current-date tool (tools/datetoday.blade.php) — table rows use inline pastel backgrounds (#cdf4dd / #f0f0f0 / #e6e6e6) that read as bright stripes in dark mode. Override with !important since they're inline styles. The first row (today) keeps a green tint to preserve the "highlight" semantic. */ .dark .tools-datetoday tr { background: rgba(255, 255, 255, 0.04) !important; color: var(--hp-cream); } .dark .tools-datetoday tr:first-child { background: rgba(22, 163, 74, 0.15) !important; } .dark .tools-datetoday td { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .dark .tools-datetoday .calculate-age { background-color: var(--hp-navy-light) !important; border-color: rgba(252, 165, 165, 0.5) !important; color: #FCA5A5 !important; } .dark .tools-datetoday .calculate-age:hover { background-color: rgba(252, 165, 165, 0.12) !important; } /* Mobile hamburger toggle in the header partial — defined inline as color: var(--hp-navy) which is invisible on the dark nav. The header partial only declares .dark variants for the menu drawer, not for the toggle SVG itself */ .dark .hp-mobile-toggle { color: var(--hp-cream); } .dark .hp-mobile-toggle:hover { color: var(--hp-gold-light); } /* ─── Plans page (pages/plans.blade.php) ────────────────────── plans.css explicitly scopes its tokens to .up-plans-page so the page does not auto-react to the dark toggle. Re-introduce dark variants per element here so it matches the rest of the site. Some palette tokens (like --color-navy, used as the ribbon text colour and feature-limit pill colour) are reused outside their "primary text" semantic — overriding individual rules is safer than swapping the variables wholesale. */ .dark .up-plans-page { background: var(--hp-navy); color: var(--hp-cream); } .dark .up-plans-page .hp-plans-hero__title { color: var(--hp-cream); } .dark .up-plans-page .hp-plans-hero__subtitle { color: rgba(255, 255, 255, 0.65); } .dark .up-plans-page .hp-plan-card { background: var(--hp-navy-light); border-color: rgba(255, 255, 255, 0.08); } .dark .up-plans-page .hp-plan-card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); border-color: rgba(212, 175, 55, 0.45); } .dark .up-plans-page .hp-plan-card--featured { background: linear-gradient(180deg, rgba(184, 150, 12, 0.10) 0%, var(--hp-navy-light) 45%); border-color: var(--hp-gold); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45); } .dark .up-plans-page .hp-plan-card--featured:hover { box-shadow: 0 24px 56px rgba(184, 150, 12, 0.25); } .dark .up-plans-page .hp-plan-card__name, .dark .up-plans-page .hp-plan-card__price-amount, .dark .up-plans-page .hp-plan-card__desc strong { color: var(--hp-cream); } .dark .up-plans-page .hp-plan-card__price { border-bottom-color: rgba(255, 255, 255, 0.1); } .dark .up-plans-page .hp-plan-card__price-fraction, .dark .up-plans-page .hp-plan-card__price-suffix { color: rgba(255, 255, 255, 0.55); } .dark .up-plans-page .hp-plan-card__desc { color: rgba(255, 255, 255, 0.7); } .dark .up-plans-page .hp-plan-feature { color: rgba(255, 255, 255, 0.85); } .dark .up-plans-page .hp-plan-feature__limit { background: rgba(255, 255, 255, 0.08); color: var(--hp-cream); } .dark .up-plans-page .hp-plan-feature__limit--unlimited { background: rgba(16, 185, 129, 0.18); color: #6EE7B7; } /* Default CTA was navy bg with white text — on a navy-light card in dark mode the contrast is too soft. Swap to a frosted neutral button; featured CTA keeps its gold gradient. */ .dark .up-plans-page .hp-plan-card__cta { background: rgba(255, 255, 255, 0.08); color: var(--hp-cream); border-color: rgba(255, 255, 255, 0.12); } .dark .up-plans-page .hp-plan-card__cta:hover { background: rgba(255, 255, 255, 0.14); color: var(--hp-cream); } .dark .up-plans-page .hp-plan-card--featured .hp-plan-card__cta { color: var(--hp-navy); } .dark .up-plans-page .hp-plans-empty { color: rgba(255, 255, 255, 0.55); } .dark .up-plans-page .hp-plans-empty__icon { color: rgba(255, 255, 255, 0.35); } .dark .up-plans-page .hp-plans-assurance { color: rgba(255, 255, 255, 0.65); } /* ─── Assessment Detailed Report (pages/assessments/detailed-report.blade.php) The .ur-hero is already dark by design. Everything below it (.dr-*) uses bright pastel cards (cream/green/orange) that don't fit dark mode — flip surfaces to navy-light with translucent accent tints. */ .dark .dr-recommendation-card { background: linear-gradient(135deg, rgba(184, 150, 12, 0.10) 0%, rgba(184, 150, 12, 0.05) 100%); border-color: rgba(184, 150, 12, 0.3); } .dark .dr-rec-title { color: var(--hp-gold-light); } .dark .dr-rec-text { color: rgba(255, 255, 255, 0.75); } /* Strengths / weaknesses cards — keep the green/orange semantic but tint over a dark surface so they read on navy. */ .dark .dr-strengths { background: linear-gradient(135deg, rgba(16, 185, 129, 0.10) 0%, rgba(16, 185, 129, 0.05) 100%); border-color: rgba(16, 185, 129, 0.3); } .dark .dr-weaknesses { background: linear-gradient(135deg, rgba(249, 115, 22, 0.10) 0%, rgba(249, 115, 22, 0.05) 100%); border-color: rgba(249, 115, 22, 0.3); } .dark .dr-sw-title { color: var(--hp-cream); } .dark .dr-sw-item { background: rgba(255, 255, 255, 0.04); } .dark .dr-sw-name { color: rgba(255, 255, 255, 0.85); } .dark .dr-sw-score.high { background: rgba(16, 185, 129, 0.18); color: #6EE7B7; } .dark .dr-sw-score.low { background: rgba(249, 115, 22, 0.18); color: #FDBA74; } /* Dimension section — main container card */ .dark .dr-dimension-section { background: var(--hp-navy-light); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); } .dark .dr-dim-name { color: var(--hp-cream); } .dark .dr-dim-score.high { background: rgba(16, 185, 129, 0.18); color: #6EE7B7; } .dark .dr-dim-score.mid { background: rgba(184, 150, 12, 0.18); color: var(--hp-gold-light); } .dark .dr-dim-score.low { background: rgba(220, 38, 38, 0.18); color: #FCA5A5; } .dark .dr-dim-rec { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.65); border-inline-start-color: rgba(255, 255, 255, 0.15); } /* Questions breakdown section */ .dark .dr-questions { border-top-color: rgba(255, 255, 255, 0.08); } .dark .dr-questions-title { color: rgba(255, 255, 255, 0.55); } .dark .dr-question-row { border-bottom-color: rgba(255, 255, 255, 0.05); } .dark .dr-q-number { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.75); } .dark .dr-q-text { color: var(--hp-cream); } .dark .dr-q-label { color: rgba(255, 255, 255, 0.5); } .dark .dr-q-value { color: rgba(255, 255, 255, 0.8); } .dark .dr-q-answer-row.dr-best { color: #6EE7B7; } .dark .dr-q-points.full { background: rgba(16, 185, 129, 0.18); color: #6EE7B7; } .dark .dr-q-points.partial { background: rgba(184, 150, 12, 0.18); color: var(--hp-gold-light); } .dark .dr-q-points.zero { background: rgba(220, 38, 38, 0.18); color: #FCA5A5; } .dark .dr-q-feedback { background: rgba(37, 99, 235, 0.10); } .dark .dr-q-feedback p { color: rgba(255, 255, 255, 0.8); } .dark .dr-q-essay-label { color: rgba(255, 255, 255, 0.55); } .dark .dr-q-essay-text { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.85); } /* ─── Detailed-report purchase card + modal (pages/assessments/partials/report-card.blade.php) */ .dark .dr-purchase-card { background: linear-gradient(135deg, var(--hp-navy-light) 0%, rgba(184, 150, 12, 0.06) 100%); border-color: rgba(255, 255, 255, 0.08); } .dark .dr-purchase-title { color: var(--hp-cream); } .dark .dr-purchase-desc { color: rgba(255, 255, 255, 0.65); } .dark .dr-success-msg { background: rgba(16, 185, 129, 0.12); color: #6EE7B7; border-color: rgba(16, 185, 129, 0.3); } .dark .dr-error-msg { background: rgba(220, 38, 38, 0.12); color: #FCA5A5; border-color: rgba(220, 38, 38, 0.3); } /* Modal — overlay already uses rgba(0,0,0,0.5) which works in both modes; the inner panel was pure white. */ .dark .dr-modal { background: var(--hp-navy-light); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); } .dark .dr-modal-title { color: var(--hp-cream); } .dark .dr-modal-desc { color: rgba(255, 255, 255, 0.65); } /* ─── Results page dimension cards (pages/assessments/results.blade.php) .ur-dim was a white card with light gray border + light gray progress track. Flip to navy-light card with translucent inner track so the gradient fills (.high/.mid/.low) keep their semantic colour. */ .dark .ur-dim { background: var(--hp-navy-light); border-color: rgba(255, 255, 255, 0.08); } .dark .ur-dim:hover { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); } .dark .ur-dim-name { color: var(--hp-cream); } .dark .ur-dim-val.high { color: #6EE7B7; } .dark .ur-dim-val.mid { color: var(--hp-gold-light); } .dark .ur-dim-val.low { color: #FCA5A5; } .dark .ur-dim-bar { background: rgba(255, 255, 255, 0.06); } /* Empty state on the results page */ .dark .ua-empty, .dark .ua-empty-text { color: rgba(255, 255, 255, 0.55); } /* ─── Assessments index page (pages/assessments/index.blade.php) */ .dark .ua-title { color: var(--hp-cream); } .dark .ua-subtitle { color: rgba(255, 255, 255, 0.6); } /* Stats bar */ .dark .ua-stat { background: var(--hp-navy-light); border-color: rgba(255, 255, 255, 0.08); } .dark .ua-stat:hover { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); } .dark .ua-stat-icon.green { background: rgba(16, 185, 129, 0.18); } .dark .ua-stat-icon.amber { background: rgba(217, 119, 6, 0.18); } .dark .ua-stat-num { color: var(--hp-cream); } .dark .ua-stat-label { color: rgba(255, 255, 255, 0.55); } /* Assessment cards */ .dark .ua-card { background: var(--hp-navy-light); border-color: rgba(255, 255, 255, 0.08); } .dark .ua-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); border-color: rgba(212, 175, 55, 0.4); } .dark .ua-card-name { color: var(--hp-cream); } .dark .ua-card-type { background: rgba(184, 150, 12, 0.18); color: var(--hp-gold-light); } .dark .ua-card-dimension { color: rgba(255, 255, 255, 0.55); } /* Question counts row */ .dark .ua-count-text { color: rgba(255, 255, 255, 0.7); } .dark .ua-count-sep { background: rgba(255, 255, 255, 0.1); } /* Total dot was navy on a navy-light card — bump to gold so all three count types stay visually distinct. */ .dark .ua-count-dot.total { background: var(--hp-gold-light); } /* Status badges — keep semantic colours but tint over dark */ .dark .ua-status.not-started { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.55); } .dark .ua-status.in-progress { background: rgba(217, 119, 6, 0.18); color: #FBBF24; } .dark .ua-status.completed { background: rgba(22, 163, 74, 0.18); color: #6EE7B7; } .dark .ua-status.abandoned { background: rgba(220, 38, 38, 0.18); color: #FCA5A5; } /* Buttons */ .dark .ua-btn.retake { background: rgba(255, 255, 255, 0.06); color: var(--hp-cream); border-color: rgba(255, 255, 255, 0.15); } .dark .ua-btn.retake:hover { border-color: var(--hp-gold); color: var(--hp-cream); } .dark .ua-btn.resume { background: rgba(217, 119, 6, 0.18); color: #FBBF24; border-color: rgba(217, 119, 6, 0.35); } .dark .ua-btn.resume:hover { background: rgba(217, 119, 6, 0.28); color: #FBBF24; } /* Score display */ .dark .ua-card-score-max { color: rgba(255, 255, 255, 0.45); } /* Empty state */ .dark .ua-empty { background: var(--hp-navy-light); border-color: rgba(255, 255, 255, 0.08); } .dark .ua-empty-title { color: var(--hp-cream); } /* Articles latest-list page (resources/views/articles/latest.blade.php) — the title is an wrapping an

. Without an explicit hover override, the global .dark a:hover rule shifts it to var(--hp-gold) (a darker gold) which reads as "going dark" on hover. Pin the link + the inner h2 to cream in all states. */ .dark a.text-dark, .dark a.text-dark:hover, .dark a.text-dark:focus, .dark a.text-dark h2, .dark a.text-dark:hover h2, .dark a.text-dark:focus h2 { color: var(--hp-cream) !important; } /* Bootstrap pagination — used site-wide via vendor.pagination.bootstrap-5 (saved articles, latest articles, search results, reading history…). Default light styling is white bg + blue text + gray border, all of which clash with navy. Flip surfaces to navy-light + gold accents. */ .dark .pagination .page-link { background-color: var(--hp-navy-light); color: var(--hp-cream); border-color: rgba(255, 255, 255, 0.1); } .dark .pagination .page-link:hover { background-color: rgba(255, 255, 255, 0.06); color: var(--hp-gold-light); border-color: rgba(255, 255, 255, 0.18); } .dark .pagination .page-link:focus { background-color: rgba(255, 255, 255, 0.06); color: var(--hp-gold-light); box-shadow: 0 0 0 0.2rem rgba(184, 150, 12, 0.25); } .dark .pagination .page-item.active .page-link { background-color: var(--hp-gold); border-color: var(--hp-gold); color: var(--hp-navy); } .dark .pagination .page-item.disabled .page-link { background-color: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.08); } /* ─── Mockup-profile assessment grid (sections/mp-assessment-grid.blade.php and other mp-* sections on the profile page). The .mp-* namespace uses light cards with dark text by default — flip surfaces to navy-light, text to cream, accent pills to translucent tints. */ .dark .mp-card { background: var(--hp-navy-light); border-color: rgba(255, 255, 255, 0.08); } .dark .mp-card h3 { color: var(--hp-cream); } /* Dimensions list */ .dark .mp-dim-name { color: rgba(255, 255, 255, 0.65); } .dark .mp-dim-bar { background: rgba(255, 255, 255, 0.06); } .dark .mp-dim-val { color: var(--hp-cream); } /* Comparison rows */ .dark .mp-comparison-row { border-bottom-color: rgba(255, 255, 255, 0.06); } .dark .mp-comparison-label { color: rgba(255, 255, 255, 0.6); } .dark .mp-comparison-new { color: var(--hp-cream); } .dark .mp-comparison-old { color: rgba(255, 255, 255, 0.35); } /* Paths progress */ .dark .mp-path-item { border-bottom-color: rgba(255, 255, 255, 0.06); } .dark .mp-path-item-name { color: var(--hp-cream); } .dark .mp-status-active { background: rgba(37, 99, 235, 0.18); color: #93C5FD; } .dark .mp-status-done { background: rgba(22, 163, 74, 0.18); color: #6EE7B7; } .dark .mp-path-item-bar { background: rgba(255, 255, 255, 0.06); } .dark .mp-path-item-meta { color: rgba(255, 255, 255, 0.4); } /* Simulator stats + items */ .dark .mp-sim-stat { background: rgba(255, 255, 255, 0.04); } .dark .mp-sim-stat-num { color: var(--hp-cream); } .dark .mp-sim-stat-label { color: rgba(255, 255, 255, 0.5); } .dark .mp-sim-item { background: rgba(255, 255, 255, 0.04); } .dark .mp-sim-item-name { color: var(--hp-cream); } .dark .mp-sim-item-score.high { color: #6EE7B7; } .dark .mp-sim-item-score.mid { color: var(--hp-gold-light); } /* Certificates */ .dark .mp-cert-item { background: rgba(255, 255, 255, 0.04); } .dark .mp-cert-name { color: var(--hp-cream); } .dark .mp-cert-date { color: rgba(255, 255, 255, 0.45); } .dark .mp-cert-badge { background: rgba(22, 163, 74, 0.18); color: #6EE7B7; } /* Newsletter promo strip (sections/newsletter-management.blade.php) — in light mode it's a peach #ffd384 panel with a gold gradient button. In dark mode swap them: gold panel + peach button. Text inside stays dark navy for contrast against both the gold section bg and the peach button bg. */ .dark .newsletter-promo { background-color: var(--hp-gold) !important; } .dark .newsletter-promo .text-dark { color: var(--hp-navy) !important; } .dark .newsletter-promo .btn-primary { background: #ffd384 !important; border-color: #ffd384 !important; color: var(--hp-navy) !important; } .dark .newsletter-promo .btn-primary:hover { background: #fbb964 !important; border-color: #fbb964 !important; color: var(--hp-navy) !important; } /* Article comments (sections/comments-list.blade.php + sections/comments-comment.blade.php). The list wrapper has inline background-color: #f8f9fa and each comment box has inline border: 1px solid #e9ecef — both invisible in light mode but stick out as a white frame around the dark cards in dark mode. */ .dark .comments-container { background-color: transparent !important; } .dark .comment-box { border-color: rgba(255, 255, 255, 0.08) !important; }