/* Dark mode — class on . Toggle via theme Stimulus controller + head script. */
.dark {
color-scheme: dark;
}
.dark ::selection {
background-color: color-mix(in srgb, #1e40af 55%, transparent);
color: #f8fafc;
}
.dark body {
background-color: #0c0a09;
color: #e7e5e4;
}
/* —— Surfaces —— */
.dark .bg-white,
.dark .bg-white\/85,
.dark .bg-white\/80,
.dark .bg-white\/70 {
background-color: #1c1917 !important;
}
.dark .bg-stone-50,
.dark .bg-stone-50\/80,
.dark .bg-stone-50\/50 {
background-color: #0c0a09 !important;
}
/* Captions under case-study figures (not page-wide stone-50 surfaces) */
.dark .bg-stone-50\/90 {
background-color: #292524 !important;
}
.dark .bg-stone-100 {
background-color: #292524 !important;
}
.dark .bg-brand-50,
.dark .bg-brand-50\/80,
.dark .bg-brand-50\/30 {
background-color: rgb(30 58 138 / 0.25) !important;
}
.dark .bg-accent-50,
.dark .bg-accent-50\/35,
.dark .bg-accent-50\/60 {
background-color: rgb(154 52 18 / 0.2) !important;
}
.dark .bg-brand-100,
.dark .bg-brand-100\/50 {
background-color: rgb(30 64 175 / 0.35) !important;
}
.dark .bg-accent-100,
.dark .bg-accent-100\/50 {
background-color: rgb(154 52 18 / 0.25) !important;
}
/* Section gradients (homepage, history, footer) */
.dark section.bg-gradient-to-b {
background-image: linear-gradient(to bottom, #1e293b, #0c0a09) !important;
}
.dark #approach {
background-image: linear-gradient(to bottom, #0c0a09, rgb(30 58 138 / 0.2)) !important;
}
.dark footer.bg-gradient-to-b {
background-image: linear-gradient(to bottom, #1c1917, #0c0a09) !important;
}
.dark section.rounded-2xl.bg-gradient-to-br {
background-image: linear-gradient(to bottom right, rgb(30 58 138 / 0.2), #1c1917, rgb(154 52 18 / 0.12)) !important;
}
/* —— Typography —— */
.dark .text-stone-900 {
color: #fafaf9 !important;
}
.dark .text-stone-800 {
color: #e7e5e4 !important;
}
.dark .text-stone-700 {
color: #d6d3d1 !important;
}
.dark .text-stone-600 {
color: #a8a29e !important;
}
.dark .text-stone-500 {
color: #78716c !important;
}
.dark .text-brand-800 {
color: #93c5fd !important;
}
.dark .text-brand-700 {
color: #60a5fa !important;
}
.dark .text-accent-700,
.dark .text-accent-800 {
color: #fdba74 !important;
}
.dark .group:hover .group-hover\:text-brand-800 {
color: #bfdbfe !important;
}
/* —— Borders & rings —— */
.dark .border-stone-200,
.dark .border-stone-200\/80,
.dark .border-stone-300 {
border-color: #44403c !important;
}
.dark .border-stone-100,
.dark .border-stone-100 {
border-color: #292524 !important;
}
.dark .border-brand-200,
.dark .border-brand-200\/80 {
border-color: rgb(37 99 235 / 0.45) !important;
}
.dark .border-accent-100 {
border-color: rgb(234 88 12 / 0.35) !important;
}
.dark .ring-stone-100,
.dark .ring-stone-900\/5 {
--tw-ring-color: rgb(41 37 36 / 0.8) !important;
}
.dark .ring-brand-200\/80 {
--tw-ring-color: rgb(37 99 235 / 0.4) !important;
}
.dark .ring-accent-200\/80,
.dark .ring-accent-200\/40 {
--tw-ring-color: rgb(234 88 12 / 0.35) !important;
}
/* —— Chrome (header / menu) —— */
.dark header.sticky {
background-color: rgb(12 10 9 / 0.95) !important;
border-color: #292524 !important;
}
.dark .theme-toggle {
border-color: #57534e;
background-color: #292524;
color: #e7e5e4;
}
.dark .theme-toggle:hover {
border-color: #60a5fa;
background-color: rgb(30 58 138 / 0.45);
color: #93c5fd;
}
.dark .theme-toggle:focus-visible {
box-shadow: 0 0 0 2px #1c1917, 0 0 0 4px #60a5fa;
}
.dark .navbar-dropdown__panel {
border-color: #44403c;
background-color: #1c1917;
box-shadow: 0 10px 28px rgb(0 0 0 / 0.35), 0 0 0 1px rgb(41 37 36 / 0.8);
}
.dark .navbar-dropdown__toggle {
color: #a8a29e;
}
.dark .navbar-dropdown__toggle:hover {
background-color: #292524;
color: #93c5fd;
}
.dark .navbar-dropdown__item {
color: #d6d3d1;
}
.dark .navbar-dropdown__item:hover {
background-color: #292524;
color: #93c5fd;
}
.dark .navbar-dropdown__item--active {
background-color: rgb(30 58 138 / 0.35);
color: #93c5fd;
}
.dark .navbar-dropdown__mobile-list {
border-left-color: #44403c;
}
.dark details summary {
border-color: #44403c !important;
background-color: #1c1917 !important;
color: #e7e5e4 !important;
}
.dark details .absolute.rounded-xl.border {
border-color: #44403c !important;
background-color: #1c1917 !important;
}
.dark .hover\:bg-stone-50:hover {
background-color: #292524 !important;
}
.dark .hover\:border-brand-200:hover {
border-color: rgb(96 165 250 / 0.5) !important;
}
.dark .hover\:border-accent-300:hover {
border-color: rgb(251 146 60 / 0.5) !important;
}
.dark .hover\:bg-accent-50\/60:hover {
background-color: rgb(154 52 18 / 0.25) !important;
}
.dark .hover\:bg-white:hover {
background-color: #292524 !important;
}
/* —— Links —— */
.dark a.text-brand-700 {
color: #60a5fa !important;
}
.dark a.hover\:text-brand-700:hover,
.dark a.hover\:text-brand-800:hover {
color: #93c5fd !important;
}
.dark a.hover\:text-accent-800:hover {
color: #fdba74 !important;
}
/* —— History timeline —— */
.dark .contact-strip__feedback {
background-color: #2563eb;
}
.dark .contact-strip__feedback[data-state="error"] {
background-color: #57534e;
}
.dark .contact-strip__link {
color: #93c5fd;
}
.dark .contact-strip__copy {
border-color: #3b82f6;
background-color: rgb(30 58 138 / 0.35);
color: #93c5fd;
box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
}
.dark .contact-strip__copy:hover {
border-color: #60a5fa;
background-color: rgb(37 99 235 / 0.45);
color: #dbeafe;
box-shadow: 0 2px 8px rgb(37 99 235 / 0.35);
}
.dark .footer-since__trigger {
color: #a8a29e;
text-decoration-color: rgb(168 162 158 / 0.45);
}
.dark .footer-since__trigger:hover {
color: #93c5fd;
text-decoration-color: rgb(147 197 253 / 0.5);
}
.dark .footer-since__quip {
color: #fdba74;
}
.dark .footer-since__quip:not([hidden])::before {
color: #57534e;
}
.dark .social-links__label {
color: #a8a29e;
}
.dark .social-links__link {
border-color: #57534e;
background-color: #1c1917;
color: #d6d3d1;
}
.dark .social-links__link:hover {
border-color: #3b82f6;
background-color: rgb(30 58 138 / 0.35);
color: #bfdbfe;
}
.dark .sector-switcher__tab {
border-color: #57534e;
background-color: #1c1917;
color: #d6d3d1;
}
.dark .sector-switcher__tab:hover {
border-color: #3b82f6;
background-color: rgb(30 58 138 / 0.35);
color: #bfdbfe;
}
.dark .sector-switcher__tab--active {
border-color: #3b82f6;
background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
color: #f8fafc;
}
.dark .sector-switcher__tab--active:hover {
border-color: #60a5fa;
background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
color: #f8fafc;
}
.dark .sector-switcher__count {
color: #a8a29e;
}
.dark .case-study-card__quote {
border-left-color: #3b82f6;
background: linear-gradient(90deg, rgb(30 58 138 / 0.25) 0%, transparent 100%);
}
.dark .case-study-card__quote-text {
color: #d6d3d1;
}
.dark .case-study-card__quote-attribution {
color: #a8a29e;
}
.dark .document-print-actions {
color: #78716c;
}
.dark .document-print-actions__btn,
.dark .document-print-actions__link {
color: #a8a29e;
}
.dark .document-print-actions__btn:hover,
.dark .document-print-actions__btn:focus-visible,
.dark .document-print-actions__link:hover,
.dark .document-print-actions__link:focus-visible {
color: #93c5fd;
}
.dark .document-print-actions__sep {
color: #57534e;
}
.dark .meeting-prep__section {
border-color: #44403c;
background-color: #1c1917;
box-shadow: none;
}
.dark .meeting-prep__question {
color: #d6d3d1;
}
.dark .meeting-prep__check {
border-color: #57534e;
background-color: #292524;
}
.dark .meeting-prep__tip {
border-color: rgb(37 99 235 / 0.35);
background-color: rgb(30 58 138 / 0.2);
color: #d6d3d1;
}
.dark .case-study-explore__details {
border-color: #44403c;
background: linear-gradient(165deg, rgb(154 52 18 / 0.18) 0%, #1c1917 45%, #0c0a09 100%);
box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
}
.dark .case-study-explore__details[open] {
border-color: rgb(251 146 60 / 0.45);
}
.dark .case-study-explore__summary:hover {
background-color: rgb(154 52 18 / 0.15);
}
.dark .case-study-explore__summary-icon {
background: linear-gradient(145deg, rgb(154 52 18 / 0.45) 0%, rgb(124 45 18 / 0.2) 100%);
color: #fdba74;
}
.dark .case-study-explore__summary-label {
color: #fafaf9;
}
.dark .case-study-explore__summary-hint,
.dark .case-study-explore__footnote {
color: #a8a29e;
}
.dark .case-study-explore__chevron {
color: #fdba74;
}
.dark .case-study-explore__panel {
border-top-color: rgb(251 146 60 / 0.2);
}
.dark .case-study-explore__intro,
.dark .case-study-explore__list {
color: #d6d3d1;
}
.dark .case-study-explore__phase {
border-color: #57534e;
background-color: rgb(28 25 23 / 0.65);
}
.dark .case-study-explore__phase-title {
color: #93c5fd;
}
.dark .case-study-explore__footnote {
border-top-color: #44403c;
}
.dark .history-trust-stats {
border-color: #44403c;
background: linear-gradient(145deg, rgb(30 58 138 / 0.28) 0%, #1c1917 50%, #0c0a09 100%);
box-shadow: 0 1px 3px rgb(0 0 0 / 0.3), 0 10px 28px rgb(0 0 0 / 0.2);
}
@media (min-width: 640px) {
.dark .history-trust-stats__item:not(:last-child) {
border-right-color: rgb(59 130 246 / 0.2);
}
}
.dark .history-trust-stats__number {
color: #bfdbfe;
}
.dark .history-trust-stats__suffix {
color: #93c5fd;
}
.dark .history-trust-stats__label {
color: #fafaf9;
}
.dark .history-trust-stats__detail {
color: #a8a29e;
}
.dark .history-timeline::before {
background: linear-gradient(to bottom, #2563eb, #1e40af 45%, #44403c);
}
.dark .history-timeline__dot {
background-color: #1c1917;
border-color: #60a5fa;
}
.dark .history-timeline__content {
border-bottom-color: #44403c;
}
.dark .history-timeline__year {
color: #fdba74;
}
.dark .history-timeline__badge {
border-color: rgb(37 99 235 / 0.5);
background-color: rgb(30 58 138 / 0.35);
color: #93c5fd;
}
.dark .history-values__card {
border-color: #44403c;
background-color: #1c1917;
box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
}
.dark .history-values__card-title {
color: #fafaf9;
}
.dark .history-values__card-body {
color: #a8a29e;
}
/* —— Figure captions (case studies, image placeholders) —— */
.dark figure.bg-stone-100 figcaption {
background-color: #292524 !important;
border-top-color: #44403c !important;
color: #a8a29e !important;
}
.dark .case-study-screenshots-note {
color: #78716c !important;
}
/* —— Image placeholders —— */
.dark .border-dashed.border-stone-300,
.dark .border-dashed.border-stone-200 {
border-color: #57534e !important;
}
.dark .bg-gradient-to-br {
background-image: linear-gradient(to bottom right, rgb(30 58 138 / 0.15), #1c1917, rgb(154 52 18 / 0.08)) !important;
}
/* CTA band stays dark; ensure contrast on buttons */
.dark section.bg-brand-950 .border-white\/30 {
border-color: rgb(255 255 255 / 0.35);
}
.dark section.bg-brand-950 a.bg-white {
background-color: #fafaf9 !important;
color: #0f172a !important;
}
.dark section.bg-brand-950 a.bg-white:hover {
background-color: #eff6ff !important;
color: #1e3a8a !important;
}
/* —— Spreadsheet stress check —— */
.dark .spreadsheet-check {
border-color: #44403c;
background-color: #1c1917;
box-shadow: 0 4px 20px rgb(0 0 0 / 0.25);
}
.dark .spreadsheet-check__item {
border-color: #57534e;
background-color: #292524;
}
.dark .spreadsheet-check__item:has(.spreadsheet-check__input:checked) {
border-color: #3b82f6;
background-color: rgb(30 58 138 / 0.3);
}
.dark .spreadsheet-check__checkbox {
border-color: #78716c;
background-color: #1c1917;
}
.dark .spreadsheet-check__label {
color: #d6d3d1;
}
.dark .spreadsheet-check__result-panel {
border-color: #57534e;
background: linear-gradient(165deg, #292524 0%, rgb(30 58 138 / 0.2) 100%);
}
.dark .spreadsheet-check__result-panel[data-tier="high"] {
border-color: #3b82f6;
background: linear-gradient(165deg, rgb(30 58 138 / 0.35) 0%, #1c1917 100%);
}
.dark .spreadsheet-check__score {
color: #93c5fd;
}
.dark .spreadsheet-check__result-title {
color: #fafaf9;
}
.dark .spreadsheet-check__result-body {
color: #a8a29e;
}
.dark .spreadsheet-check__cta--secondary {
border-color: #57534e;
background-color: #292524;
color: #93c5fd;
}
.dark .spreadsheet-check__mailto {
color: #93c5fd;
}
.dark .spreadsheet-check__reset {
color: #a8a29e;
}
.dark .spreadsheet-check__reset:hover {
color: #bfdbfe;
}
/* —— Blog index —— */
.dark .blog-index__intro {
border-bottom-color: #44403c;
background: linear-gradient(180deg, rgb(30 58 138 / 0.2) 0%, rgb(12 10 9 / 0) 100%);
}
.dark .blog-index__count {
color: #a8a29e;
}
.dark .blog-index__rss-link {
border-color: #57534e;
background-color: #1c1917;
color: #93c5fd;
}
.dark .blog-index__rss-link:hover {
border-color: #3b82f6;
background-color: rgb(30 58 138 / 0.35);
color: #bfdbfe;
}
.dark .blog-index__rss-icon {
color: #60a5fa;
}
.dark .blog-index__rss-link:hover .blog-index__rss-icon {
color: #bfdbfe;
}
.dark .blog-index__count-filter {
color: #a8a29e;
}
.dark .blog-index__filters-panel {
border-color: #44403c;
background: linear-gradient(165deg, rgb(30 58 138 / 0.22) 0%, #1c1917 48%, #0c0a09 100%);
box-shadow: 0 1px 3px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.25);
}
.dark .blog-index__filters-status {
border-bottom-color: rgb(59 130 246 / 0.2);
background: rgb(30 58 138 / 0.25);
}
.dark .blog-index__filters-status-text {
color: #d6d3d1;
}
.dark .blog-index__filters-status-text strong {
color: #bfdbfe;
}
.dark .blog-index__filters-status-icon {
color: #60a5fa;
}
.dark .blog-index__filters-clear {
color: #93c5fd;
}
.dark .blog-index__filters-clear:hover {
color: #bfdbfe;
}
@media (min-width: 900px) {
.dark .blog-index__filter-group:first-child {
border-right-color: #44403c;
}
}
@media (max-width: 899px) {
.dark .blog-index__filter-group + .blog-index__filter-group {
border-top-color: #44403c;
}
}
.dark .blog-index__filter-icon {
background: linear-gradient(145deg, rgb(30 58 138 / 0.5) 0%, rgb(30 64 175 / 0.25) 100%);
color: #93c5fd;
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}
.dark .blog-index__filter-icon--category {
background: linear-gradient(145deg, rgb(154 52 18 / 0.45) 0%, rgb(124 45 18 / 0.2) 100%);
color: #fdba74;
}
.dark .blog-index__filter-title {
color: #fafaf9;
}
.dark .blog-index__filter-hint,
.dark .blog-index__archive-year-label {
color: #a8a29e;
}
.dark .blog-index__filter-pill {
border-color: #57534e;
background-color: rgb(28 25 23 / 0.65);
color: #d6d3d1;
box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
}
.dark .blog-index__filter-pill:hover {
border-color: #3b82f6;
background-color: rgb(30 58 138 / 0.35);
color: #bfdbfe;
}
.dark .blog-index__filter-pill--active {
border-color: #3b82f6;
background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
color: #f8fafc;
box-shadow: 0 2px 8px rgb(37 99 235 / 0.4);
}
.dark .blog-index__filter-pill--active:hover {
border-color: #60a5fa;
background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
color: #f8fafc;
}
.dark .blog-index__empty-link {
color: #93c5fd;
}
.dark .blog-index__empty-link:hover {
color: #bfdbfe;
}
.dark .blog-index__section-label {
color: #93c5fd;
}
.dark .blog-index__empty {
border-color: #44403c;
background-color: #1c1917;
}
.dark .blog-index__empty-title {
color: #fafaf9;
}
.dark .blog-index__empty-body {
color: #a8a29e;
}
.dark .blog-index__code {
background-color: #292524;
color: #e7e5e4;
}
.dark .blog-post__header,
.dark .blog-post__footer {
border-color: #44403c;
}
.dark .blog-post__title {
color: #fafaf9;
}
.dark .blog-prose .blog-video__embed {
border-color: #44403c;
}
.dark .blog-prose .blog-transcript {
border-top-color: #44403c;
}
.dark .blog-prose .blog-transcript > p {
color: #a8a29e;
}
.dark .blog-post__youtube-link a {
color: #93c5fd;
}
.dark .blog-post__figure {
border-color: #44403c;
background-color: #292524;
box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
}
.dark .legal-prose {
color: #a8a29e;
}
.dark .legal-prose__heading,
.dark .legal-prose__subheading {
color: #fafaf9;
}
.dark .legal-prose__address {
border-color: #44403c;
background-color: #292524;
color: #d6d3d1;
}
.dark .legal-prose__code {
background-color: #292524;
color: #d6d3d1;
}
.dark .legal-prose__table th,
.dark .legal-prose__table td {
border-color: #44403c;
}
.dark .legal-prose__table th {
background-color: #292524;
color: #fafaf9;
}
.dark .cookie-banner__inner {
border-color: #44403c;
background-color: #1c1917;
box-shadow: 0 10px 40px rgb(0 0 0 / 0.4);
}
.dark .cookie-banner__heading {
color: #fafaf9;
}
.dark .cookie-banner__text {
color: #a8a29e;
}
.dark .cookie-banner__link {
color: #93c5fd;
}
.dark .cookie-banner__button--secondary {
border-color: #57534e;
background-color: #292524;
color: #e7e5e4;
}
.dark .cookie-banner__button--secondary:hover {
background-color: #44403c;
}
.dark .blog-video__embed {
background-color: #292524;
}
.dark .youtube-embed__placeholder-text {
color: #a8a29e;
}
.dark .blog-card {
border-color: #44403c;
background-color: #1c1917;
box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
}
.dark .blog-card:hover {
border-color: #3b82f6;
box-shadow: 0 10px 24px rgb(0 0 0 / 0.35);
}
.dark .blog-card__image-link,
.dark .blog-card__placeholder-link {
background-color: #292524;
border-color: #44403c;
}
.dark .blog-card__placeholder {
background: linear-gradient(145deg, rgb(30 58 138 / 0.35) 0%, #292524 50%, #1c1917 100%);
}
.dark .blog-card__category {
background-color: #292524;
color: #d6d3d1;
}
.dark .blog-card__category:hover {
background-color: rgb(30 58 138 / 0.35);
color: #bfdbfe;
}
.dark .blog-card__title a {
color: #fafaf9;
}
.dark .blog-card__title a:hover {
color: #93c5fd;
}
.dark .blog-card__excerpt,
.dark .blog-card__meta {
color: #a8a29e;
}
.dark .blog-card__read-more,
.dark .blog-card__arrow {
color: #93c5fd;
}
.dark .blog-card__read-more:hover {
color: #bfdbfe;
}