/* ========================================================================== Dark / light mode ========================================================================== Two things live in this file: 1. the toggle controls themselves (desktop icon button, mobile drawer row with its switch), and 2. the dark colour layer for the whole blog. Why it is written as an override layer instead of a theme rewrite ----------------------------------------------------------------- `style.css` is a webpack + Tailwind build artifact and the theme cannot be rebuilt (no node_modules), so the palette is baked into it as literal rgb() values. Every rule below is therefore scoped under `html.dark-mode` and only ever *adds*: with the class absent the blog renders exactly as it did before this file existed, byte for byte. That also means the prefix always raises specificity above the rule it replaces, so load order against style.css, mega-menu.css and stories.css does not matter. The palette is not invented. The values are the semantic design tokens of arzinja.info itself (`.dark-mode,[data-theme=dark]` in its stylesheet), so a reader moving between the exchange and the blog sees one surface colour, one text colour and one green. Names below map to the site's token names. Colours are kept as bare `R G B` triples and consumed through `rgb(var(--x) / var(--tw-bg-opacity, 1))`, so Tailwind's own opacity utilities (bg-opacity-50 and friends) keep working on top of them. ========================================================================== */ html.dark-mode { /* Surfaces */ --arz-c-body: 10 10 10; /* page (backgroundColor-body) */ --arz-c-block: 23 23 23; /* cards, header, panels (block/main/nav/elevated) */ --arz-c-over: 38 38 38; /* chip raised on a card (over) */ --arz-c-over-strong: 51 51 51; /* pressed / selected row */ /* Lines */ --arz-c-border: 38 38 38; /* hairline (borderColor-main) */ --arz-c-border-strong: 64 64 64; /* visible border (borderColor-base) */ /* Text ramp — the theme's gray-100..900 inverted onto these */ --arz-c-title: 229 229 229; /* headings (textColor-title) */ --arz-c-title-strong: 245 245 245; --arz-c-text: 212 212 212; /* body (textColor-main) */ --arz-c-muted: 163 163 163; --arz-c-caption: 115 115 115; /* captions (textColor-caption) */ --arz-c-faint: 82 82 82; /* placeholders (textColor-placeholder) */ --arz-c-fainter: 64 64 64; /* Brand — the exchange lifts its green in the dark so it keeps contrast */ --arz-c-primary: 51 229 174; /* backgroundColor-primary-fill (dark) */ --arz-c-primary-strong: 84 234 187; /* textColor-primary (dark) */ --arz-c-primary-tint: 12 42 34; /* faint green wash on a dark card */ /* Status washes — the -50 tints re-cut for a dark surface */ --arz-c-danger-tint: 42 20 22; --arz-c-success-tint: 14 42 26; --arz-c-warning-tint: 43 37 16; --arz-c-info-tint: 16 34 46; color-scheme: dark; background-color: rgb(var(--arz-c-body)); } /* The theme sets its default text colour on , so that is where it has to be replaced — a body rule would lose to it. */ html.dark-mode { color: rgb(var(--arz-c-text) / var(--tw-text-opacity, 1)); } /* ========================================================================== 1. The controls ========================================================================== */ /* Desktop icon button ---------------------------------------------------- The glyph is the site's own: azico-Sun-OutLined / azico-Moon-OutLined are already in the theme's icon font (\e98c / \e98d) and are the same two icons arzinja.info renders in its header, so nothing had to be redrawn or imported. The chrome is the blog's, matching the search control it sits beside — a 40x40 rounded box rather than the exchange's bare icon, which would read as unfinished next to a bordered neighbour. */ .arz-theme-toggle { display: none; /* the drawer carries it under 1024px */ align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid #b6b9cc; /* gray-200, as the search box */ border-radius: 0.5rem; background: transparent; box-shadow: 0px 3px 15px 0px rgba(55, 59, 79, 0.03); color: #686d87; /* gray-500 */ cursor: pointer; transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out; -webkit-appearance: none; appearance: none; } @media (min-width: 1024px) { .arz-theme-toggle { display: inline-flex; } } .arz-theme-toggle:hover { border-color: #33e5ae; /* primary-400, as the search box */ color: #33e5ae; } .arz-theme-toggle:focus-visible { outline: 2px solid #00cb8c; outline-offset: 2px; } .arz-theme-toggle__icon { font-size: 1.25rem; /* 20px, the exchange's icon size */ line-height: 1; } /* Only one of the two glyphs is in the flow at a time. Both ship in the markup so the swap is a class change on with no reflow and no second request — and so the button is correct in the very first painted frame, before the script has run. */ .arz-theme-toggle__icon--sun { display: none; } html.dark-mode .arz-theme-toggle__icon--moon { display: none; } html.dark-mode .arz-theme-toggle__icon--sun { display: inline-block; } html.dark-mode .arz-theme-toggle { border-color: rgb(var(--arz-c-border-strong)); box-shadow: none; color: rgb(var(--arz-c-text)); } html.dark-mode .arz-theme-toggle:hover { border-color: rgb(var(--arz-c-primary)); color: rgb(var(--arz-c-primary)); } html.dark-mode .arz-theme-toggle:focus-visible { outline-color: rgb(var(--arz-c-primary)); } /* Mobile drawer row ------------------------------------------------------ Last item of the burger menu, laid out exactly like the exchange's: leading moon icon, label pushed to the far side, switch at the end. */ .arz-theme-row { display: flex; align-items: center; gap: 0; width: 100%; padding: 1rem; border-block-start: 1px solid #f2f4fa; /* gray-50 */ background: none; color: #686d87; /* gray-500 */ font: inherit; text-align: start; cursor: pointer; -webkit-appearance: none; appearance: none; border-inline: 0; border-block-end: 0; } .arz-theme-row:focus-visible { outline: 2px solid #00cb8c; outline-offset: -2px; } .arz-theme-row__icon { flex-shrink: 0; font-size: 1rem; /* 16px, as the exchange */ line-height: 1; } .arz-theme-row__label { margin-inline-start: 0.75rem; margin-inline-end: auto; color: #373b4f; /* gray-700 */ font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; } /* The switch: 36x20 track, 16px knob inset 2px, sliding 16px. Off is an outlined pill with a grey knob, on is the brand green with a white knob — the exchange's Switch component at size "m". */ .arz-theme-row__switch { position: relative; flex-shrink: 0; width: 36px; height: 20px; border: 1px solid #b6b9cc; /* gray-200 */ border-radius: 9999px; background-color: transparent; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; } .arz-theme-row__knob { position: absolute; inset-block-start: 50%; left: 2px; /* physical: the knob travels left-to-right in both directions, as it does on the exchange in RTL */ width: 16px; height: 16px; border-radius: 9999px; background-color: #d3d6e3; /* gray-100 */ transform: translateY(-50%); transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out; } /* Making room for it. The drawer is a flex column (set in the markup), and the sections list has to become the part that gives, otherwise it keeps the `max-height: calc(100vh - 88px)` it was given when it was the last thing in the drawer and pushes the row off the bottom of the screen. Not a dark-mode rule — the row is there in both themes — but it ships with the row, so it lives beside it. */ #burgerMenu .arz-mega-mobile { flex: 1 1 auto; min-height: 0; max-height: none; } #burgerMenu .arz-theme-row { flex-shrink: 0; } html.dark-mode .arz-theme-row { border-block-start-color: rgb(var(--arz-c-border)); color: rgb(var(--arz-c-text)); } html.dark-mode .arz-theme-row__label { color: rgb(var(--arz-c-title)); } html.dark-mode .arz-theme-row__switch { border-color: transparent; background-color: rgb(var(--arz-c-primary)); } html.dark-mode .arz-theme-row__knob { background-color: #000; /* backgroundColor-base-shape-base-white, which is black in the dark theme */ transform: translateY(-50%) translateX(16px); } /* Reduced motion: the switch still moves — it is the only feedback that the control fired — but nothing eases. */ @media (prefers-reduced-motion: reduce) { .arz-theme-toggle, .arz-theme-row__switch, .arz-theme-row__knob { transition-duration: 0.01ms; } } /* ========================================================================== 2. The dark colour layer ========================================================================== Everything below is `html.dark-mode` scoped. Grouped by the file whose colours it replaces. ========================================================================== */ /* -- style.css: backgrounds ---------------------------------------------- */ html.dark-mode .bg-white { background-color: rgb(var(--arz-c-block) / var(--tw-bg-opacity, 1)); } html.dark-mode .bg-gray-50, html.dark-mode .hover\:bg-gray-50:hover { background-color: rgb(var(--arz-c-over) / var(--tw-bg-opacity, 1)); } html.dark-mode .bg-gray-100, html.dark-mode .hover\:bg-gray-100:hover { background-color: rgb(var(--arz-c-over-strong) / var(--tw-bg-opacity, 1)); } html.dark-mode .bg-gray-500 { background-color: rgb(var(--arz-c-faint) / var(--tw-bg-opacity, 1)); } html.dark-mode .bg-gray-700, html.dark-mode .hover\:bg-gray-600:hover { background-color: rgb(var(--arz-c-over) / var(--tw-bg-opacity, 1)); } /* The page and the footer are the one place `bg-gray-50` means "the page behind everything" rather than "a chip on a card", so they are pulled back out to the darkest surface. #content wins on specificity by its id; the footer needs the extra class. */ html.dark-mode #content.bg-gray-50, html.dark-mode .site-footer.bg-gray-50 { background-color: rgb(var(--arz-c-body) / var(--tw-bg-opacity, 1)); } /* Status washes */ html.dark-mode .bg-danger-50 { background-color: rgb(var(--arz-c-danger-tint) / var(--tw-bg-opacity, 1)); } html.dark-mode .bg-success-50 { background-color: rgb(var(--arz-c-success-tint) / var(--tw-bg-opacity, 1)); } html.dark-mode .bg-warning-50 { background-color: rgb(var(--arz-c-warning-tint) / var(--tw-bg-opacity, 1)); } html.dark-mode .bg-info-50 { background-color: rgb(var(--arz-c-info-tint) / var(--tw-bg-opacity, 1)); } html.dark-mode .bg-primary-50 { background-color: rgb(var(--arz-c-primary-tint) / var(--tw-bg-opacity, 1)); } /* bg-primary-500 / bg-danger-500 / bg-success-500 / bg-warning-500 are solid brand and status fills and are deliberately left alone: they are legible on either surface and changing them would break the pairing with the .text-white that always sits on them. */ /* -- style.css: borders --------------------------------------------------- */ html.dark-mode .border-gray-50, html.dark-mode .border-gray-100 { border-color: rgb(var(--arz-c-border) / var(--tw-border-opacity, 1)); } html.dark-mode .border-gray-200 { border-color: rgb(var(--arz-c-border-strong) / var(--tw-border-opacity, 1)); } html.dark-mode .border-gray-400, html.dark-mode .border-gray-500, html.dark-mode .hover\:border-gray-600:hover { border-color: rgb(var(--arz-c-faint) / var(--tw-border-opacity, 1)); } /* Tailwind's preflight paints every element's default border colour — gray-200 here — so anything carrying a bare `border` utility with no colour beside it picks it up. It has to be replaced at the same `*` specificity the preflight uses, which means it also outranks every single-class border utility that loads before it. So each of those is re-asserted underneath at html.dark-mode specificity; the list below is every border colour class the build actually emitted. Adding a border utility to the markup later means adding it here too, or it will silently come out the hairline colour. */ html.dark-mode *, html.dark-mode *::before, html.dark-mode *::after { border-color: rgb(var(--arz-c-border)); } /* An inactive tab is `border border-transparent` — it holds the space the active tab's border will take. Losing the transparent puts a box around every tab in the row. */ html.dark-mode .border-transparent { border-color: transparent; } html.dark-mode .border-primary-200 { border-color: rgb(var(--arz-c-primary-strong) / var(--tw-border-opacity, 1)); } html.dark-mode .border-primary-500 { border-color: rgb(var(--arz-c-primary) / var(--tw-border-opacity, 1)); } html.dark-mode .hover\:border-primary-400:hover, html.dark-mode .hover\:border-primary-600:hover { border-color: rgb(var(--arz-c-primary) / var(--tw-border-opacity, 1)); } /* -- style.css: text ramp ------------------------------------------------- gray-100 (faintest) .. gray-900 (strongest) inverted: on a dark surface the faint end goes darker and the strong end goes brighter. */ html.dark-mode .text-gray-900 { color: rgb(var(--arz-c-title-strong) / var(--tw-text-opacity, 1)); } html.dark-mode .text-gray-800, html.dark-mode .text-gray-700 { color: rgb(var(--arz-c-title) / var(--tw-text-opacity, 1)); } html.dark-mode .text-gray-600 { color: rgb(var(--arz-c-text) / var(--tw-text-opacity, 1)); } html.dark-mode .text-gray-500, html.dark-mode .hover\:text-gray-500:hover { color: rgb(var(--arz-c-muted) / var(--tw-text-opacity, 1)); } html.dark-mode .text-gray-400, html.dark-mode .text-gray-300 { color: rgb(var(--arz-c-caption) / var(--tw-text-opacity, 1)); } html.dark-mode .text-gray-200 { color: rgb(var(--arz-c-faint) / var(--tw-text-opacity, 1)); } html.dark-mode .text-gray-100 { color: rgb(var(--arz-c-fainter) / var(--tw-text-opacity, 1)); } /* Brand and status text lift so they stay readable on black */ html.dark-mode .text-primary-600, html.dark-mode .hover\:text-primary-600:hover { color: rgb(var(--arz-c-primary) / var(--tw-text-opacity, 1)); } html.dark-mode .text-primary-700 { color: rgb(var(--arz-c-primary-strong) / var(--tw-text-opacity, 1)); } html.dark-mode .text-danger-700 { color: rgb(255 101 124 / var(--tw-text-opacity, 1)); /* danger-300 */ } html.dark-mode .text-warning-600 { color: rgb(255 207 51 / var(--tw-text-opacity, 1)); /* warning-400 */ } html.dark-mode .text-money-green-200 { color: rgb(96 145 146 / var(--tw-text-opacity, 1)); /* money-green-300 */ } /* text-primary-500, text-danger-500, text-warning-500, text-info-500 and text-white already clear 4.5:1 on the dark surfaces and are left alone. */ /* -- style.css: hand-written component rules ------------------------------ */ html.dark-mode input::placeholder, html.dark-mode textarea::placeholder { color: rgb(var(--arz-c-faint)); } html.dark-mode input, html.dark-mode textarea, html.dark-mode select { background-color: transparent; color: rgb(var(--arz-c-text)); } /* Decorative page and footer artwork — same shapes, dark twins. */ html.dark-mode body:not(.error404) .site-content { background-image: url(../images/bg-dark.svg); } html.dark-mode .error-container, html.dark-mode body:not(.error404) .site-footer { background-image: url(../images/footer_bg-dark.svg); } html.dark-mode .breadcrumb { color: rgb(var(--arz-c-caption) / var(--tw-text-opacity, 1)); } html.dark-mode .breadcrumb span a { color: rgb(var(--arz-c-caption) / var(--tw-text-opacity, 1)); } html.dark-mode .breadcrumb span span { color: rgb(var(--arz-c-primary) / var(--tw-text-opacity, 1)); } html.dark-mode .footer-menus ul li a { color: rgb(var(--arz-c-text) / var(--tw-text-opacity, 1)); } html.dark-mode .footer-menus ul li a:hover { color: rgb(var(--arz-c-primary) / var(--tw-text-opacity, 1)); } html.dark-mode .accordion-content h1, html.dark-mode .accordion-content h2, html.dark-mode .accordion-content h3, html.dark-mode .accordion-content h4, html.dark-mode .accordion-content h5, html.dark-mode .accordion-content h6, html.dark-mode .entry-content h1, html.dark-mode .entry-content h2, html.dark-mode .entry-content h3, html.dark-mode .entry-content h4, html.dark-mode .entry-content h5, html.dark-mode .entry-content h6 { color: rgb(var(--arz-c-title) / var(--tw-text-opacity, 1)); } html.dark-mode .accordion-content a, html.dark-mode .entry-content a { color: rgb(var(--arz-c-primary) / var(--tw-text-opacity, 1)); } html.dark-mode .accordion-content a:hover, html.dark-mode .entry-content a:hover { color: rgb(var(--arz-c-primary-strong) / var(--tw-text-opacity, 1)); } /* Article furniture the compiled sheet leaves on the default text colour */ html.dark-mode .entry-content blockquote, html.dark-mode .entry-content th, html.dark-mode .entry-content td { border-color: rgb(var(--arz-c-border)); } html.dark-mode .entry-content code, html.dark-mode .entry-content pre { background-color: rgb(var(--arz-c-over)); color: rgb(var(--arz-c-title)); } html.dark-mode .entry-content hr { border-color: rgb(var(--arz-c-border)); } html.dark-mode .pagination a { color: rgb(var(--arz-c-text) / var(--tw-text-opacity, 1)); } html.dark-mode .pagination a:hover, html.dark-mode .pagination a:hover .azico-Left-OutLined, html.dark-mode .pagination a:hover .azico-Right-OutLined { color: rgb(var(--arz-c-primary) / var(--tw-text-opacity, 1)); } html.dark-mode #events-container.loading::before { background-color: rgb(var(--arz-c-body) / var(--tw-bg-opacity, 1)); } html.dark-mode [data-tooltip]::after { background-color: rgb(var(--arz-c-over-strong) / var(--tw-bg-opacity, 1)); color: rgb(var(--arz-c-title-strong)); } html.dark-mode [data-tooltip]::before { border-top-color: rgb(var(--arz-c-over-strong)); } html.dark-mode .accordion .accordion-item.active .azico-ChartUp-OutLined, html.dark-mode .accordion .accordion-item.active .azico-Up-OutLined, html.dark-mode .accordion .accordion-item.active .accordion-title { color: rgb(var(--arz-c-primary) / var(--tw-text-opacity, 1)); } html.dark-mode .accordion .accordion-item.active .accordion-title:hover { background-color: rgb(var(--arz-c-primary-tint) / var(--tw-bg-opacity, 1)); color: rgb(var(--arz-c-primary) / var(--tw-text-opacity, 1)); } html.dark-mode .drop-down.open ul li.selected { background-color: rgb(var(--arz-c-over-strong) / var(--tw-bg-opacity, 1)); } html.dark-mode .spinner { border-color: rgb(var(--arz-c-border-strong) / var(--tw-border-opacity, 1)); border-top-color: rgb(var(--arz-c-title) / var(--tw-border-opacity, 1)); } /* The legacy hand-built header nav. Nothing renders it since the mega menu took over, but it is still in the stylesheet and still styled, so it is covered rather than left as a light patch waiting to reappear. */ html.dark-mode #menu-header > li > a { color: rgb(var(--arz-c-text) / var(--tw-text-opacity, 1)); } html.dark-mode #menu-header > li:hover > a { background-color: rgb(var(--arz-c-over) / var(--tw-bg-opacity, 1)); } html.dark-mode #menu-header > li > ul { background-color: rgb(var(--arz-c-block) / var(--tw-bg-opacity, 1)); box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.6); } html.dark-mode #menu-header > li > ul li a { color: rgb(var(--arz-c-title) / var(--tw-text-opacity, 1)); } html.dark-mode #menu-header > li > ul li a:hover { background-color: rgb(var(--arz-c-over) / var(--tw-bg-opacity, 1)); } html.dark-mode #menu-header > li > ul li.divider { border-color: rgb(var(--arz-c-border) / var(--tw-border-opacity, 1)); } html.dark-mode #burgerMenu ul#menu-mobile > li { border-color: rgb(var(--arz-c-border) / var(--tw-border-opacity, 1)); } html.dark-mode #burgerMenu ul#menu-mobile > li > a, html.dark-mode #burgerMenu ul#menu-mobile > li ul li:not(.has-icon)::before { color: rgb(var(--arz-c-text) / var(--tw-text-opacity, 1)); } /* Ajax Search Pro result dropdown */ html.dark-mode div#ajaxsearchprores1_1.asp_r.vertical, html.dark-mode div#ajaxsearchprores4_1.asp_r.vertical { background-color: rgb(var(--arz-c-block)); box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.6); } html.dark-mode div#ajaxsearchprores1_1.asp_r.vertical .results .item::after, html.dark-mode div#ajaxsearchprores4_1.asp_r.vertical .results .item::after { background-color: rgb(var(--arz-c-border) / var(--tw-bg-opacity, 1)); } html.dark-mode div#ajaxsearchprores1_1.asp_r.vertical .results .item .asp_content a.asp_res_url, html.dark-mode div#ajaxsearchprores4_1.asp_r.vertical .results .item .asp_content a.asp_res_url { color: rgb(var(--arz-c-title) / var(--tw-text-opacity, 1)); } html.dark-mode div#ajaxsearchprores1_1.asp_r.vertical .asp_nores, html.dark-mode div#ajaxsearchprores4_1.asp_r.vertical .asp_nores { background-color: rgb(var(--arz-c-warning-tint) / var(--tw-bg-opacity, 1)); } /* Cards keep a shadow in the light theme; on black a shadow reads as nothing, so the elevation is carried by a hairline instead. */ html.dark-mode .shadow, html.dark-mode .shadow-md { --tw-shadow: 0 0 0 1px rgb(var(--arz-c-border)); --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color); } /* -- mega-menu.css -------------------------------------------------------- */ html.dark-mode .arz-mega__link, html.dark-mode .arz-mega__item--bare .arz-mega__toggle, html.dark-mode .arz-mega__entry, html.dark-mode .arz-mega__post, html.dark-mode .arz-mega-mobile__summary, html.dark-mode .arz-mega-mobile__list a { color: rgb(var(--arz-c-title)); } html.dark-mode .arz-mega__toggle, html.dark-mode .arz-mega__col-title, html.dark-mode .arz-mega__symbol, html.dark-mode .arz-mega__post-date, html.dark-mode .arz-mega-mobile__summary svg, html.dark-mode .arz-mega-mobile__group-title { color: rgb(var(--arz-c-caption)); } html.dark-mode .arz-mega__item:hover .arz-mega__link, html.dark-mode .arz-mega__item:focus-within .arz-mega__link, html.dark-mode .arz-mega__item:hover .arz-mega__toggle, html.dark-mode .arz-mega__item:focus-within .arz-mega__toggle { background-color: rgb(var(--arz-c-over)); color: rgb(var(--arz-c-primary)); } html.dark-mode .arz-mega__item--bare:hover .arz-mega__toggle, html.dark-mode .arz-mega__item--bare:focus-within .arz-mega__toggle, html.dark-mode .arz-mega__cta, html.dark-mode .arz-mega-mobile__all { color: rgb(var(--arz-c-primary)); } html.dark-mode .arz-mega__link:focus-visible, html.dark-mode .arz-mega__toggle:focus-visible, html.dark-mode .arz-mega-mobile__summary:focus-visible { outline-color: rgb(var(--arz-c-primary)); } html.dark-mode .arz-mega__panel { border-color: rgb(var(--arz-c-border)); background: rgb(var(--arz-c-block)); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65); } html.dark-mode .arz-mega__entry:hover, html.dark-mode .arz-mega__entry:focus-visible, html.dark-mode .arz-mega__post:hover, html.dark-mode .arz-mega__post:focus-visible, html.dark-mode .arz-mega-mobile__list a:hover, html.dark-mode .arz-mega-mobile__list a:focus-visible { background-color: rgb(var(--arz-c-over)); } html.dark-mode .arz-mega__entry:hover, html.dark-mode .arz-mega__entry:focus-visible { color: rgb(var(--arz-c-primary)); } html.dark-mode .arz-mega__count, html.dark-mode .arz-mega-mobile__count { background: rgb(var(--arz-c-over)); color: rgb(var(--arz-c-caption)); } html.dark-mode .arz-mega__col { border-inline-start-color: rgb(var(--arz-c-border)); } html.dark-mode .arz-mega__foot { border-block-start-color: rgb(var(--arz-c-border)); } html.dark-mode .arz-mega-mobile__section { border-block-end-color: rgb(var(--arz-c-border)); } /* -- stories.css ---------------------------------------------------------- Only the circle row needs anything. The fullscreen viewer is already dark by design and is identical in both themes — which is correct: a story is full-bleed artwork on black either way. */ html.dark-mode .arz-stories { --arz-story-ring-seen: #3a3a3a; } html.dark-mode .arz-stories__avatar { background: rgb(var(--arz-c-block)); } html.dark-mode .arz-stories__avatar img { background: rgb(var(--arz-c-over)); } html.dark-mode .arz-stories__caption { color: rgb(var(--arz-c-text)); } html.dark-mode .arz-stories__nav { border-color: rgba(255, 255, 255, 0.14); background: rgb(var(--arz-c-over)); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); color: rgb(var(--arz-c-title)); } /* -- category-learn-crypto.php ------------------------------------------- One category has a hand-built landing template carrying its own inline