dark.css

/* Night colours for olewave.com, from docs/day_night_plan.md.

   Every rule here applies under html[data-theme="dark"] only, so the day
   theme is untouched. The head script in layout1 and layout2 sets the
   attribute before the first paint, and the header's button switches it.

   The tokens hold the palette. The rules after them reach the colours the
   theme's style.css and overrides.css write by hand, about 1,300 of them,
   since neither file is rewritten. Contrast is measured against the
   surface each text sits on, 4.5:1 for text and 3:1 for large text. */

:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --olw-bg: #121214;     /* the page */
  --olw-bg-2: #1b1b1f;   /* cards, the header bar, menus */
  --olw-bg-3: #232328;   /* chips, stripes, hover */
  --olw-rule: #2e2e34;
  --olw-ink: #f2f2f2;    /* headings, 16.5:1 on the page */
  --olw-text: #e2e2e2;   /* reading text, 14.6:1 */
  --olw-text-2: #a3a3a3; /* labels and dates, 7.2:1 */
  --olw-link: #9b85ff;   /* the purple, lifted for text on dark, 6.1:1 */
}

/* The page */
[data-theme="dark"] body,
[data-theme="dark"] .page-wraper,
[data-theme="dark"] .page-content,
[data-theme="dark"] .bg-white { background-color: var(--olw-bg) !important; color: var(--olw-text); }
[data-theme="dark"] body { background-image: none; }
[data-theme="dark"] #loading-area { background-color: var(--olw-bg); }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--olw-ink); }
[data-theme="dark"] hr { border-color: var(--olw-rule); }
/* The theme sets bold text to black. At night it takes its paragraph's colour,
   and an inline colour on it still wins. */
[data-theme="dark"] .page-content strong,
[data-theme="dark"] .page-content b { color: inherit; }

/* The header bar, its menus and the language picker */
[data-theme="dark"] .site-header .main-bar,
[data-theme="dark"] .is-fixed .main-bar { background: var(--olw-bg); }
[data-theme="dark"] .is-fixed .main-bar { background: rgba(18, 18, 20, 0.92); box-shadow: 0 1px 0 var(--olw-rule); }
[data-theme="dark"] .header-nav .nav > li > a { color: var(--olw-ink); }
[data-theme="dark"] .header-nav .nav > li > a:hover,
[data-theme="dark"] .header-nav .nav > li > a:focus,
[data-theme="dark"] .header-nav .nav > li.open > a,
[data-theme="dark"] .header-nav .nav > li:hover > a { color: var(--olw-link) !important; }
[data-theme="dark"] .header-nav .nav > li .sub-menu { background: var(--olw-bg-2); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
[data-theme="dark"] .header-nav .nav > li .sub-menu li a { color: var(--olw-text); }
[data-theme="dark"] .header-nav .nav > li .sub-menu li a:hover { color: var(--olw-link); }
[data-theme="dark"] .olw-lang-btn { color: var(--olw-ink); border-color: var(--olw-rule); }
[data-theme="dark"] .olw-lang-btn:hover,
[data-theme="dark"] .olw-lang-btn[aria-expanded="true"] { color: var(--olw-link); border-color: var(--olw-link); }
[data-theme="dark"] .olw-theme__btn { color: var(--olw-ink); border-color: var(--olw-rule); }
[data-theme="dark"] .olw-theme__btn:hover,
[data-theme="dark"] .olw-theme__btn:focus-visible,
[data-theme="dark"] .olw-theme__btn[aria-expanded="true"] { color: var(--olw-link); border-color: var(--olw-link); }
[data-theme="dark"] .olw-theme__menu { background: var(--olw-bg-2); border-color: var(--olw-rule); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
[data-theme="dark"] .olw-theme__menu button { color: var(--olw-text); }
[data-theme="dark"] .olw-theme__menu button:hover,
[data-theme="dark"] .olw-theme__menu button:focus-visible { background: var(--olw-bg-3); }
[data-theme="dark"] .olw-theme__menu button[aria-pressed="true"] { background: #5f3bff; color: #ffffff; }
[data-theme="dark"] .olw-lang-menu { background: var(--olw-bg-2); border-color: var(--olw-rule); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
[data-theme="dark"] .olw-lang-menu li { color: var(--olw-text); }
[data-theme="dark"] .olw-lang-menu li:hover { background: var(--olw-bg-3); }
[data-theme="dark"] .olw-lang-menu li[aria-selected="true"] { background: #5f3bff; color: #ffffff; }
[data-theme="dark"] .navbar-toggler span { background: var(--olw-ink); }
/* The swirl's day mark has white lines between its arms, which read as a white
   disc on the night page. The night mark has them clear. */
[data-theme="dark"] .site-header .logo-header a.olw-brand img.olw-brand__mark { display: none; }
[data-theme="dark"] .site-header .logo-header a.olw-brand img.olw-brand__mark--night { display: block; }

/* The CMS content's inline text colours, written by hand in the editor
   across the pages and posts, some of it rendered outside .page-content.
   Each keeps its hue at night and reaches 4.5:1 on the page. overrides.css darkens some of them for the day theme
   with the same attribute selectors, and these come later. */
[data-theme="dark"] [style*="color:#0A0A0A" i]:not([style*="background-color:#0A0A0A" i]),
[data-theme="dark"] [style*="color: #0A0A0A" i]:not([style*="background-color: #0A0A0A" i]),
[data-theme="dark"] [style*="color:#1a1a1a" i]:not([style*="background-color:#1a1a1a" i]),
[data-theme="dark"] [style*="color: #1a1a1a" i]:not([style*="background-color: #1a1a1a" i]),
[data-theme="dark"] [style*="color:#000000" i]:not([style*="background-color:#000000" i]),
[data-theme="dark"] [style*="color: #000000" i]:not([style*="background-color: #000000" i]),
[data-theme="dark"] [style*="color:#000" i]:not([style*="background-color:#000" i]),
[data-theme="dark"] [style*="color: #000" i]:not([style*="background-color: #000" i]) { color: var(--olw-ink) !important; }
[data-theme="dark"] [style*="color:#525252" i]:not([style*="background-color:#525252" i]),
[data-theme="dark"] [style*="color: #525252" i]:not([style*="background-color: #525252" i]),
[data-theme="dark"] [style*="color:#8A8A8A" i]:not([style*="background-color:#8A8A8A" i]),
[data-theme="dark"] [style*="color: #8A8A8A" i]:not([style*="background-color: #8A8A8A" i]) { color: var(--olw-text-2) !important; }
[data-theme="dark"] [style*="color:#9b59b6" i]:not([style*="background-color:#9b59b6" i]),
[data-theme="dark"] [style*="color: #9b59b6" i]:not([style*="background-color: #9b59b6" i]) { color: #c39bd8 !important; }
[data-theme="dark"] [style*="color:#e74c3c" i]:not([style*="background-color:#e74c3c" i]),
[data-theme="dark"] [style*="color: #e74c3c" i]:not([style*="background-color: #e74c3c" i]),
[data-theme="dark"] [style*="color:#c0392b" i]:not([style*="background-color:#c0392b" i]),
[data-theme="dark"] [style*="color: #c0392b" i]:not([style*="background-color: #c0392b" i]) { color: #ff8576 !important; }
[data-theme="dark"] [style*="color:#f39c12" i]:not([style*="background-color:#f39c12" i]),
[data-theme="dark"] [style*="color: #f39c12" i]:not([style*="background-color: #f39c12" i]) { color: #f5b041 !important; }
[data-theme="dark"] [style*="color:#16a085" i]:not([style*="background-color:#16a085" i]),
[data-theme="dark"] [style*="color: #16a085" i]:not([style*="background-color: #16a085" i]) { color: #3ccfae !important; }
[data-theme="dark"] [style*="color:#1E7FE3" i]:not([style*="background-color:#1E7FE3" i]),
[data-theme="dark"] [style*="color: #1E7FE3" i]:not([style*="background-color: #1E7FE3" i]),
[data-theme="dark"] [style*="color:#2980b9" i]:not([style*="background-color:#2980b9" i]),
[data-theme="dark"] [style*="color: #2980b9" i]:not([style*="background-color: #2980b9" i]) { color: #6eaaf2 !important; }
[data-theme="dark"] [style*="color:#2ecc71" i]:not([style*="background-color:#2ecc71" i]),
[data-theme="dark"] [style*="color: #2ecc71" i]:not([style*="background-color: #2ecc71" i]) { color: #5ee08e !important; }

/* Home. The feature boxes, the customer voices and their slider, whose
   rules live in the home page's own <style> blocks in the CMS. */
[data-theme="dark"] .icon-bx-wraper.style-7 { background: var(--olw-bg-2); border-color: var(--olw-rule); box-shadow: none; }
[data-theme="dark"] .testimonial-4 { background: var(--olw-bg-2); }
[data-theme="dark"] .customer-voices .t13-card { background: var(--olw-bg-2); border-color: var(--olw-rule); }
[data-theme="dark"] .customer-voices .t13-card:hover { border-color: var(--olw-text-2); }
[data-theme="dark"] .customer-voices .t13-role { color: var(--olw-ink); }
[data-theme="dark"] .customer-voices .t13-org { color: var(--olw-text-2); }
[data-theme="dark"] .customer-voices .swiper-slide-thumb-active .t13-card,
[data-theme="dark"] .customer-voices .swiper-slide-active .t13-card { background: #5f3bff; border-color: #5f3bff; }
[data-theme="dark"] .customer-voices .swiper-slide-thumb-active .t13-role,
[data-theme="dark"] .customer-voices .swiper-slide-active .t13-role { color: #ffffff; }
[data-theme="dark"] .customer-voices .swiper-slide-thumb-active .t13-org,
[data-theme="dark"] .customer-voices .swiper-slide-active .t13-org { color: rgba(255, 255, 255, .82); }
[data-theme="dark"] .customer-voices .swiper-pagination-bullet { background: var(--olw-ink); }
[data-theme="dark"] .customer-voices .olw-prev,
[data-theme="dark"] .customer-voices .olw-next { background: var(--olw-bg-2) !important; color: var(--olw-ink) !important; border-color: var(--olw-rule) !important; }
[data-theme="dark"] .customer-voices .testimonial-name,
[data-theme="dark"] .customer-voices .testimonial-name:before { color: #c39bd8 !important; }
[data-theme="dark"] .customer-voices .olw-prev:hover,
[data-theme="dark"] .customer-voices .olw-next:hover { background: var(--olw-ink) !important; color: var(--olw-bg) !important; border-color: var(--olw-ink) !important; }

/* The home cards, home-snippets.html. The playground picture keeps its
   light frame, since the screenshot inside it is drawn on white. */
[data-theme="dark"] .olw-snip__card { background: var(--olw-bg-2); border-color: var(--olw-rule); }
[data-theme="dark"] .olw-snip__title a { color: var(--olw-link); }
[data-theme="dark"] .olw-snip__track { background: var(--olw-bg-3); }
[data-theme="dark"] .olw-snip__by a { color: var(--olw-link); }
[data-theme="dark"] .olw-snip__shot { border-color: var(--olw-rule); }

/* Links and the brand purple as text. #5f3bff is 3.2:1 on the page, so text
   in it takes the lifted purple at night, while buttons keep #5f3bff behind
   white text. :where() keeps the first rule as weak as one class, so it
   beats the theme's bare a and loses to any link the theme styles with a
   class. The rules after it reach those. */
[data-theme="dark"] :where(.page-wraper a:not([class*="btn"])) { color: var(--olw-link); }
/* overrides.css colours content links with .page-content .container a, two
   classes and an element. This rule is exactly as strong and comes later, so
   it reaches the same links and no link that rule loses to. */
[data-theme="dark"] :where(.page-content) .container a,
[data-theme="dark"] .customer-voices a { color: var(--olw-link); }
[data-theme="dark"] .text-primary { color: var(--olw-link) !important; }
[data-theme="dark"] .post-date,
[data-theme="dark"] .post-date a,
[data-theme="dark"] .tagcloud a,
[data-theme="dark"] .cat-item a,
[data-theme="dark"] .widget li a,
[data-theme="dark"] .blog-card__title a,
[data-theme="dark"] .dlab-post-title .title a,
[data-theme="dark"] .blog-index__subnav a,
[data-theme="dark"] .blog-article__body a,
[data-theme="dark"] .blog-article__deck a,
[data-theme="dark"] .blog-article__author,
[data-theme="dark"] a.blog-article__eyebrow,
[data-theme="dark"] .blog-article__tags a,
[data-theme="dark"] .olign-page a,
[data-theme="dark"] .olign-eyebrow,
[data-theme="dark"] .olign-title__brand,
[data-theme="dark"] .olign-caveats__list li::before,
[data-theme="dark"] .olign-refs li::before,
[data-theme="dark"] .olw-announce__text strong,
[data-theme="dark"] .olw-announce__arrow,
[data-theme="dark"] .olw-steps__note a,
[data-theme="dark"] .contact-page a:not([class*="btn"]),
[data-theme="dark"] .fab-page .fab-page__overview a,
[data-theme="dark"] .fab-page .fab-page__back a,
[data-theme="dark"] .fab-page .fab-page__next a { color: var(--olw-link); }
[data-theme="dark"] .blog-card__title a:hover { color: var(--olw-ink); }
[data-theme="dark"] .fab-page .blog-article__meta a { color: var(--olw-ink); }

/* The eyebrows in the theme's purple #9b59b6, 4.0:1 on the page, lifted. */
[data-theme="dark"] .blog-article__eyebrow,
[data-theme="dark"] .blog-index__eyebrow { color: #c39bd8; }

/* The greys of dates, tags, bylines and labels, #525252, 2.4:1 on the page. */
[data-theme="dark"] .blog-article__meta,
[data-theme="dark"] .blog-index__pag-btn,
[data-theme="dark"] .blog-article__tag,
[data-theme="dark"] .blog-article__share a,
[data-theme="dark"] .blog-article__comments .reply a,
[data-theme="dark"] .blog-article__comments .comment-respond label { color: var(--olw-text-2); }
[data-theme="dark"] .blog-index__pag-btn:hover,
[data-theme="dark"] .blog-article__share a:hover { color: var(--olw-bg); background: var(--olw-ink); border-color: var(--olw-ink); }

/* Surfaces drawn white or near white by hand */
[data-theme="dark"] .blog-article__cta,
[data-theme="dark"] .olign-fabench,
[data-theme="dark"] .contact-page__process,
[data-theme="dark"] .contact-page__form,
[data-theme="dark"] .olw-steps__item { background: var(--olw-bg-2); border-color: var(--olw-rule); }
[data-theme="dark"] .blog-article__body th,
[data-theme="dark"] .blog-article__body code,
[data-theme="dark"] .olign-page code,
[data-theme="dark"] .olign-chart__caption code,
[data-theme="dark"] .blog-card__media,
[data-theme="dark"] .blog-article__hero { background: var(--olw-bg-3); }
[data-theme="dark"] .blog-article__body td,
[data-theme="dark"] .blog-article__body th { border-color: var(--olw-rule); }
[data-theme="dark"] .contact-page__form input,
[data-theme="dark"] .contact-page__form textarea,
[data-theme="dark"] .contact-page__form select,
[data-theme="dark"] .form-control { background: var(--olw-bg-3); border-color: var(--olw-rule); color: var(--olw-text); }
[data-theme="dark"] ::placeholder { color: var(--olw-text-2); }

/* Closer theme rules that the general ones above don't beat */
[data-theme="dark"] .post-date,
[data-theme="dark"] .post-date a,
[data-theme="dark"] .widget .title > a,
[data-theme="dark"] .dlab-post-title .title > a { color: var(--olw-link) !important; }
[data-theme="dark"] .blog-article__meta a.blog-article__author { color: var(--olw-link); }
[data-theme="dark"] .blog-article__body code,
[data-theme="dark"] .olign-page code,
[data-theme="dark"] .olign-chart__caption code { color: var(--olw-ink); }
[data-theme="dark"] .contact-page .contact-page__process p { color: var(--olw-text); }

/* Pictures drawn for a white page. The articles' pink circle (bg15.png) goes,
   and the footer drops its wave (bg4.png, set inline in footer.html) and its
   dot pattern for a plain near black, with a rule where the page meets it. */
[data-theme="dark"] .blog-article { background-image: none !important; }
[data-theme="dark"] .site-footer.style-2 { background-image: none !important; background-color: #0c0c0e; border-top: 1px solid var(--olw-rule); }
[data-theme="dark"] .site-footer.style-2::before { display: none; }
/* The day footer's 300px top pads room for the wave, which night drops. */
[data-theme="dark"] .site-footer.style-2 .footer-top { padding-top: 70px; }
[data-theme="dark"] .site-footer .footer-bottom { background-color: #0c0c0e; border-top: 1px solid var(--olw-rule); }