/* =========================================================================
WCF Dark Mode — orionkit_one (wcf J3 site)
Client-side only (data-theme on via head script + localStorage).
No server variation -> CDN/GTranslate-safe (CloudFlare/GCore).
SCOPE: content canvas + #content area + content cards/tabs/forms/tables.
DELIBERATELY UNTOUCHED: header (.ok-header / .tm-*navbar* / toolbar) and
footer (.tm-footer / .ok-copyright) — they are already dark by design.
Light & dark BOTH get: page texture + raised content panels (textareas).
Dark additionally restyles text/links/tables/forms/tabs to a dark palette.
========================================================================= */
/* ---- light-mode tokens (defaults) -------------------------------------- */
:root{
--wcf-surface:#ffffff; /* white textareas */
--wcf-surface-2:#eef3f4;
--wcf-text:#2a2f36;
--wcf-heading:#1c2128;
--wcf-muted:#6b7a85;
--wcf-link:#0a6470;
--wcf-link-hover:#00B1BE;
--wcf-accent:#00B1BE;
--wcf-border:#dfe5ea;
--wcf-danger:#b23b3b;
--wcf-panel-shadow:0 2px 10px rgba(20,30,45,.12);
}
:root[data-theme="dark"]{
/* Tonal scale (canvas darkest -> surfaces lighter), sister-site #121620 base.
Footer is #333 (untouched) -> the raised surfaces give a clear step toward it. */
--wcf-bg:#121620; /* page canvas (matches web3 html base) */
--wcf-surface:#1c2532; /* article/content panels — clearly raised vs canvas */
--wcf-surface-2:#26313f; /* inner / hover / table head */
--wcf-text:#c7ced6; /* body text — softened, not pure white */
--wcf-heading:#a8c0e2; /* plain headings h1/h2 — light steel-blue 'ink', mirrors BM blue-black #08091e */
--wcf-heading-muted:#9fb4c8;/* sub-headings h3-h6/.page-header — lightened from #567190 */
--wcf-muted:#9aa7b1; /* secondary text */
--wcf-link:#1fa2d6; /* native link blue (body links + linked titles) */
--wcf-link-hover:#5cc6d6;
--wcf-accent:#00B1BE; /* brand cyan */
--wcf-border:#2c3848;
--wcf-danger:#ff9e94; /* legacy darkred note -> lighter on dark */
--wcf-panel-shadow:0 2px 12px rgba(0,0,0,.45);
}
/* ---- canvas: subtle baked texture on the BODY BACKGROUND ONLY -----------
A pre-faded STATIC tile (web3-like monochrome grain, baked into the image)
lives in the body background. NO overlay, NO opacity layer, NO filter.
Opaque elements — the header WhiteCloud image and the content panels —
sit ON TOP of the body, so they are NOT veiled or made restless.
The grain shows only in the real page background (gutters / gaps). */
/* Texture on the ROOT element: its background covers the ENTIRE canvas (full
scroll height), so it never stops below the first viewport (body may be
height:100%). body is transparent so the canvas shows in the gutters. */
:root{
background-color:#ffffff;
background-image:url("../images/wcf-bg-light.png");
background-repeat:repeat;
}
:root[data-theme="dark"]{
background-color:var(--wcf-bg);
background-image:url("../images/wcf-bg-dark.png");
}
body{ background:transparent !important; }
:root[data-theme="dark"] body{ color:var(--wcf-text); }
/* DM header banner: swap the inline white_cloud.jpg for the dark variant */
:root[data-theme="dark"] header.ok-header{ background-image:url("/images/site/white_cloud_dm.jpg") !important; }
/* ---- main content column transparent (texture shows behind panels) ------ */
/* BOTH modes (NOT header/footer) */
:root #content,
:root #content .uk-container,
:root #content .tab-content,
:root #content .rl_tabs .tab-content{
background-color:transparent;
}
:root[data-theme="dark"] #content{ color:var(--wcf-text); }
/* ---- raised content panels (the "textareas") — BOTH modes --------------- */
/* light = white panels, dark = navy panels; both lift off the textured bg */
:root #content .item-page,
:root #content .items-leading > .leading-0,
:root #content .uk-article,
:root #content .content-category,
:root #content .categories-list,
:root #content .page-search,
:root #content div.contact,
:root #content div.contact-category,
:root #content .uk-panel,
:root #content .uk-panel-box,
:root #content .ok-card,
:root #content .ok-card-content,
:root #content .panel{
background-color:var(--wcf-surface);
color:var(--wcf-text);
border:1px solid var(--wcf-border);
border-radius:8px;
box-shadow:var(--wcf-panel-shadow);
padding:18px 20px;
}
:root[data-theme="dark"] #content .djacc__header{
background-color:var(--wcf-surface-2);
color:var(--wcf-text);
border-color:var(--wcf-border);
}
/* div.quote = bootstrap quote box, hard-coded light #DAE3F3 -> glaring light box with light text in DM.
Darken to the blue-tinted inner surface (text stays the inherited --wcf-text, now readable). Background
only, no border (light original is borderless too) -> no toggle layout shift. */
:root[data-theme="dark"] #content div.quote{ background-color:var(--wcf-surface-2); }
/* ---- BTCPay donation widget (about-us/remember-god-s-benefits) — BOTH modes -
The bare amount field + currency select + slider + pay button floated on the
article panel with no container, so the white number field looked orphaned.
Frame the whole widget as a raised sub-card (surface-2 + hairline) and, in
dark mode, theme the hard-coded white amount field so it reads as an inset
field instead of a glaring white box on the navy panel. */
:root #content .btcpay-form{
background-color:var(--wcf-surface-2);
color:var(--wcf-text);
border:1px solid var(--wcf-border);
border-radius:10px;
padding:20px 26px;
}
:root #content .btcpay-form--block{
display:flex;
width:fit-content;
max-width:100%;
margin:10px auto;
}
/* amount field: hairline so it reads as a field on the card (both modes) */
:root #content .btcpay-input-price{
border:1px solid var(--wcf-border);
box-sizing:border-box;
}
:root[data-theme="dark"] #content .btcpay-input-price{
background-color:var(--wcf-surface);
color:var(--wcf-text);
}
/* ---- headings ----------------------------------------------------------- */
:root[data-theme="dark"] #content h1,
:root[data-theme="dark"] #content h2,
:root[data-theme="dark"] #content .uk-article-title{
color:var(--wcf-heading);
border-color:var(--wcf-border);
}
:root[data-theme="dark"] #content h3,
:root[data-theme="dark"] #content h4,
:root[data-theme="dark"] #content h5,
:root[data-theme="dark"] #content h6,
:root[data-theme="dark"] #content .page-header{
color:var(--wcf-heading-muted);
border-color:var(--wcf-border);
}
/* section/module titles (.page-header, e.g. "Must watch!") were too dark -> brighter */
:root[data-theme="dark"] #content .page-header,
:root[data-theme="dark"] .page-header{ color:#c4d4e6 !important; }
/* teal CTA buttons (.ok-card-button, bg #009688): white label, not the blue link colour */
:root[data-theme="dark"] .ok-card-button{ color:#ffffff !important; }
/* img.pull-* shadow: BM uses a grey shadow (light on white). On dark, grey reads
as a glow -> swap to a dark halo. SAME geometry (10/10/25) -> no layout shift.
.no-shadow opt-out is preserved. */
:root[data-theme="dark"] #content img.pull-right:not(.no-shadow),
:root[data-theme="dark"] #content img.pull-left:not(.no-shadow),
:root[data-theme="dark"] #content img.pull-center:not(.no-shadow){
box-shadow:10px 10px 25px rgba(0,0,0,.75) !important;
}
/* B/W images: invert in DM (white bg -> dark, black content -> light, readable, no white box).
uan-planet-symbols-{de,en,es} matched by src (all 3 langs at once); .dm-invert = reusable opt-in. */
:root[data-theme="dark"] #content img[src*="uan-planet-symbols"],
:root[data-theme="dark"] #content img.dm-invert{ filter:invert(1); }
/* Dedicated DM artwork: swap the light image for its "-dm.png" in dark mode via content:url()
(one rule per language version; -dm files are same 1000x203 -> no layout shift; no DB change). */
:root[data-theme="dark"] #content img[src*="tbw-unleavened-bread-learning-en"]{ content:url("/images/site/tbw-unleavened-bread-learning-en-dm.png"); }
:root[data-theme="dark"] #content img[src*="tbw-unleavened-bread-learning-de"]{ content:url("/images/site/tbw-unleavened-bread-learning-de-dm.png"); }
:root[data-theme="dark"] #content img[src*="tbw-unleavened-bread-learning-es"]{ content:url("/images/site/tbw-unleavened-bread-learning-es-dm.png"); }
/* Heavenly Masterpiece book page: each light cover .jpg has a transparent DM .png (same basename,
only .jpg->.png; same 624x704 / 750x714 dims -> no shift). Swap in DM via content:url(). 5 books x
en/de/es = 15. No DB change. */
:root[data-theme="dark"] #content img[src*="hm-book-cover-en"]{ content:url("/images/site/hm-book-cover-en.png"); }
:root[data-theme="dark"] #content img[src*="hm-book-cover-de"]{ content:url("/images/site/hm-book-cover-de.png"); }
:root[data-theme="dark"] #content img[src*="hm-book-cover-es"]{ content:url("/images/site/hm-book-cover-es.png"); }
:root[data-theme="dark"] #content img[src*="aot-book-cover-en"]{ content:url("/images/site/aot-book-cover-en.png"); }
:root[data-theme="dark"] #content img[src*="aot-book-cover-de"]{ content:url("/images/site/aot-book-cover-de.png"); }
:root[data-theme="dark"] #content img[src*="aot-book-cover-es"]{ content:url("/images/site/aot-book-cover-es.png"); }
:root[data-theme="dark"] #content img[src*="twr-book-HC-en"]{ content:url("/images/site/twr-book-HC-en.png"); }
:root[data-theme="dark"] #content img[src*="twr-book-HC-de"]{ content:url("/images/site/twr-book-HC-de.png"); }
:root[data-theme="dark"] #content img[src*="twr-book-HC-es"]{ content:url("/images/site/twr-book-HC-es.png"); }
:root[data-theme="dark"] #content img[src*="twr-book-GT-en"]{ content:url("/images/site/twr-book-GT-en.png"); }
:root[data-theme="dark"] #content img[src*="twr-book-GT-de"]{ content:url("/images/site/twr-book-GT-de.png"); }
:root[data-theme="dark"] #content img[src*="twr-book-GT-es"]{ content:url("/images/site/twr-book-GT-es.png"); }
:root[data-theme="dark"] #content img[src*="lc-book-cover-en"]{ content:url("/images/site/lc-book-cover-en.png"); }
:root[data-theme="dark"] #content img[src*="lc-book-cover-de"]{ content:url("/images/site/lc-book-cover-de.png"); }
:root[data-theme="dark"] #content img[src*="lc-book-cover-es"]{ content:url("/images/site/lc-book-cover-es.png"); }
/* Batch 2026-06 (Ray, image-actions.csv): transparent/opaque DM replacements. The replacement .png has a
different filename/extension than the light original, so per Ray's rule this is a DARK-MODE-ONLY swap
(light mode keeps the original .jpg/.gif untouched; no DB change). src-based, covers the referenced langs.
7ly-seals-old & 7ly-springfeasts were moved here OUT of the museum-frame list (Ray now ships transparent
PNGs for them). 3a_hsl_diagram is ALSO in the museum frame above + swaps to its padded -dm.png here. */
:root[data-theme="dark"] #content img[src*="3t-baphomet"]{ content:url("/images/site/3t-baphomet.png"); }
:root[data-theme="dark"] #content img[src*="bye-fleur-de-lys"]{ content:url("/images/site/bye-fleur-de-lys.png"); }
:root[data-theme="dark"] #content img[src*="important-icon"]{ content:url("/images/site/important-icon.png"); }
:root[data-theme="dark"] #content img[src*="hc1-formula1"]{ content:url("/images/site/hc1-formula1.png"); }
:root[data-theme="dark"] #content img[src*="hc2-formula-pyramid-inside-height"]{ content:url("/images/site/hc2-formula-pyramid-inside-height.png"); }
:root[data-theme="dark"] #content img[src*="hc2-formula-root3"]{ content:url("/images/site/hc2-formula-root3.png"); }
:root[data-theme="dark"] #content img[src*="3t-missile-lion"]{ content:url("/images/site/3t-missile-lion.png"); }
:root[data-theme="dark"] #content img[src*="Aquarius-Dreizack"]{ content:url("/images/site/Aquarius-Dreizack.png"); }
:root[data-theme="dark"] #content img[src*="sm-star-wht-en"]{ content:url("/images/site/sm-star-wht-en.png"); }
:root[data-theme="dark"] #content img[src*="sm-star-wht-de"]{ content:url("/images/site/sm-star-wht-de.png"); }
:root[data-theme="dark"] #content img[src*="sm-star-wht-es"]{ content:url("/images/site/sm-star-wht-es.png"); }
:root[data-theme="dark"] #content img[src*="3t-comparison-en"]{ content:url("/images/site/3t-comparison-en.png"); }
:root[data-theme="dark"] #content img[src*="3t-comparison-de"]{ content:url("/images/site/3t-comparison-de.png"); }
:root[data-theme="dark"] #content img[src*="3t-comparison-es"]{ content:url("/images/site/3t-comparison-es.png"); }
:root[data-theme="dark"] #content img[src*="3t-lion-snake-en"]{ content:url("/images/site/3t-lion-snake-en.png"); }
:root[data-theme="dark"] #content img[src*="3t-lion-snake-de"]{ content:url("/images/site/3t-lion-snake-de.png"); }
:root[data-theme="dark"] #content img[src*="3t-lion-snake-es"]{ content:url("/images/site/3t-lion-snake-es.png"); }
:root[data-theme="dark"] #content img[src*="3t-missile-en"]{ content:url("/images/site/3t-missile-en.png"); }
:root[data-theme="dark"] #content img[src*="3t-missile-de"]{ content:url("/images/site/3t-missile-de.png"); }
:root[data-theme="dark"] #content img[src*="3t-missile-es"]{ content:url("/images/site/3t-missile-es.png"); }
:root[data-theme="dark"] #content img[src*="3t-sodomy-law-en"]{ content:url("/images/site/3t-sodomy-law-en.png"); }
:root[data-theme="dark"] #content img[src*="3t-sodomy-law-de"]{ content:url("/images/site/3t-sodomy-law-de.png"); }
:root[data-theme="dark"] #content img[src*="3t-sodomy-law-es"]{ content:url("/images/site/3t-sodomy-law-es.png"); }
:root[data-theme="dark"] #content img[src*="7ly-hsl-periods-en"]{ content:url("/images/site/7ly-hsl-periods-en.png"); }
:root[data-theme="dark"] #content img[src*="7ly-hsl-periods-de"]{ content:url("/images/site/7ly-hsl-periods-de.png"); }
:root[data-theme="dark"] #content img[src*="7ly-hsl-periods-es"]{ content:url("/images/site/7ly-hsl-periods-es.png"); }
:root[data-theme="dark"] #content img[src*="7ly-shadow-en"]{ content:url("/images/site/7ly-shadow-en.png"); }
:root[data-theme="dark"] #content img[src*="7ly-shadow-de"]{ content:url("/images/site/7ly-shadow-de.png"); }
:root[data-theme="dark"] #content img[src*="7ly-shadow-es"]{ content:url("/images/site/7ly-shadow-es.png"); }
:root[data-theme="dark"] #content img[src*="7ly-seals-old-en"]{ content:url("/images/site/7ly-seals-old-en.png"); }
:root[data-theme="dark"] #content img[src*="7ly-seals-old-de"]{ content:url("/images/site/7ly-seals-old-de.png"); }
:root[data-theme="dark"] #content img[src*="7ly-seals-old-es"]{ content:url("/images/site/7ly-seals-old-es.png"); }
:root[data-theme="dark"] #content img[src*="7ly-springfeasts-en"]{ content:url("/images/site/7ly-springfeasts-en.png"); }
:root[data-theme="dark"] #content img[src*="7ly-springfeasts-de"]{ content:url("/images/site/7ly-springfeasts-de.png"); }
:root[data-theme="dark"] #content img[src*="7ly-springfeasts-es"]{ content:url("/images/site/7ly-springfeasts-es.png"); }
:root[data-theme="dark"] #content img[src*="3a_hsl_diagram-en"]{ content:url("/images/site/3a_hsl_diagram-en-dm.png"); }
:root[data-theme="dark"] #content img[src*="3a_hsl_diagram-de"]{ content:url("/images/site/3a_hsl_diagram-de-dm.png"); }
:root[data-theme="dark"] #content img[src*="3a_hsl_diagram-es"]{ content:url("/images/site/3a_hsl_diagram-es-dm.png"); }
/* how-daniel-{en,de,es}: a very old, historic movement diagram (transparent PNG, black ink) -> the
black text vanishes on the dark canvas in DM. Don't recolour the artefact; frame it like a museum
piece on a parchment mat so the ink stays readable. GEOMETRY (padding + border box) is applied in
BOTH modes so toggling never shifts the layout; the visible mat + wood COLOURS appear in DARK mode
only via the --museum-* vars -> in light mode the box stays but is transparent (invisible whitespace).
Beveled "ridge" frame instead of box-shadow (img.no-shadow forces shadow off
with !important). src-based, covers all langs. Works for transparent AND opaque artefacts: for a
transparent PNG the parchment shows THROUGH the ink; for an opaque jpg/png/gif it shows in the 16px
padding as a passe-partout mat around the image. Add more "museum" artefacts by basename. No DB change. */
/* Mat + wood colours live ONLY in the dark theme; the frame rules below fall back to `transparent`
when unset, so light mode renders the identical-size box as invisible whitespace (no toggle shift). */
:root[data-theme="dark"]{ --museum-mat:#f3eee2; --museum-frame:#a9854a #4a3520 #4a3520 #a9854a; }
:root #content img[src*="how-daniel"],
:root #content img[src*="7ly-timeline1"],
:root #content img[src*="7ly-max-and-mortiz"],
:root #content img[src*="7ly-feasts2016"],
:root #content img[src*="7ly-revchiasm"],
:root #content img[src*="7ly-carillonchiasm"],
:root #content img[src*="7ly-feasts2019"],
:root #content img[src*="7ly-rosetta"],
:root #content img[src*="7ly-1890"],
:root #content img[src*="7ly-cogwheels"],
:root #content img[src*="njl-atom"],
:root #content img[src*="3t-manticora"],
:root #content img[src*="7ly-hsl-7seasons"],
:root #content img[src*="7ly-hsl-7years"],
:root #content img[src*="7ly-hsl-arrow-change"],
:root #content img[src*="7ly-hsl-zoom-p1"],
:root #content img[src*="Aquarius-G20_mit_Schlange"],
:root #content img[src*="Aquarius-Signet_mit_Knoten"],
:root #content img[src*="3a_hsl_diagram"]{
background:var(--museum-mat,transparent); /* mat in DARK only; LM = identical box, transparent whitespace */
padding:16px;
/* 3D wooden frame via explicit per-side colours (light from top-left): top/left = lit warm wood,
right/bottom = dark BROWN shadow (not near-black). Value contrast carries the depth, colour-blind
safe. Order: top right bottom left. */
border:6px solid;
border-color:var(--museum-frame,transparent);
border-radius:2px;
max-width:100%;
box-sizing:border-box;
}
/* linked titles keep the native link blue (#1fa2d6), not the plain-heading neutral */
:root[data-theme="dark"] #content h1 a,
:root[data-theme="dark"] #content h2 a,
:root[data-theme="dark"] #content h3 a,
:root[data-theme="dark"] #content h4 a,
:root[data-theme="dark"] #content h5 a,
:root[data-theme="dark"] #content h6 a{ color:var(--wcf-link); }
/* legacy blue video titles (custom.css: color #0000FF) */
:root[data-theme="dark"] #content div.titlendesc h5{ color:var(--wcf-link); }
/* ---- links -------------------------------------------------------------- */
:root[data-theme="dark"] #content a,
:root[data-theme="dark"] #content a:visited{ color:var(--wcf-link); }
:root[data-theme="dark"] #content a:hover,
:root[data-theme="dark"] #content a:focus{ color:var(--wcf-link-hover); }
/* ---- muted / meta ------------------------------------------------------- */
:root[data-theme="dark"] #content .uk-text-muted,
:root[data-theme="dark"] #content .uk-article-meta,
:root[data-theme="dark"] #content small,
:root[data-theme="dark"] #content time{ color:var(--wcf-muted); }
/* ---- dividers / hr (custom.css .divider uses #DDD) ---------------------- */
:root[data-theme="dark"] #content hr,
:root[data-theme="dark"] #content .uk-article-divider{ border-color:var(--wcf-border); }
:root[data-theme="dark"] #content div.divider{
background-color:var(--wcf-border);
box-shadow:0 0 5px var(--wcf-border);
}
/* ---- tables ------------------------------------------------------------- */
:root[data-theme="dark"] #content table,
:root[data-theme="dark"] #content .uk-table{ color:var(--wcf-text); }
:root[data-theme="dark"] #content .uk-table th{ background-color:var(--wcf-surface-2); color:var(--wcf-heading); }
:root[data-theme="dark"] #content .uk-table td,
:root[data-theme="dark"] #content .uk-table th{ border-color:var(--wcf-border); }
:root[data-theme="dark"] #content .uk-table-striped tbody tr:nth-of-type(odd){ background-color:rgba(255,255,255,.03); }
/* .table-quote: hard-coded light-purple zebra (#c6b0d8/#cbc0e0), white th, #eee hover, light #ddd
borders -> dark. These tables sit INSIDE a div.quote (bg --wcf-surface-2 #26313f), so the zebra uses
the two DARKER tones (surface #1c2532 / canvas #121620) -> the table reads as a clearly darker inset
that lifts off the lighter quote. Hover "reaction" KEPT (#33414f, lighter than everything -> pops).
Outer table border + cell grid darkened (was light #ddd / white). tcollaps* media query = layout, untouched. */
:root[data-theme="dark"] #content table.table-quote{ border-color:var(--wcf-border); }
:root[data-theme="dark"] #content .table-quote tbody > tr:nth-child(odd) > td,
:root[data-theme="dark"] #content .table-quote tbody > tr:nth-child(odd) > th{ background-color:var(--wcf-surface) !important; }
:root[data-theme="dark"] #content .table-quote tbody > tr:nth-child(even) > td,
:root[data-theme="dark"] #content .table-quote tbody > tr:nth-child(even) > th{ background-color:var(--wcf-bg) !important; }
:root[data-theme="dark"] #content .table-quote th{ background-color:var(--wcf-surface) !important; color:var(--wcf-heading); }
:root[data-theme="dark"] #content .table-quote tbody tr:hover > td,
:root[data-theme="dark"] #content .table-quote tbody tr:hover > th{ background-color:#33414f !important; }
:root[data-theme="dark"] #content .table-quote td,
:root[data-theme="dark"] #content .table-quote th{ border-color:var(--wcf-border) !important; }
/* FONT (both modes): kill the Literata 19px reading-typo bleed in ALL article tables -> Quattrocento Sans.
Generic = every table covered at once (not chased per class). Selector list mirrors the Literata source
in localfonts.css (.item-page/.uk-article/.content-category/.items-leading/.category-desc) so it is exactly
co-extensive with the bleed and touches no UI/module tables. Size stays per-table: only .table-quote gets
the smaller 15px body / 17px heading below. */
:root #content .item-page table th, :root #content .item-page table td, :root #content .item-page table td p,
:root #content .uk-article table th, :root #content .uk-article table td, :root #content .uk-article table td p,
:root #content .content-category table th,:root #content .content-category table td,:root #content .content-category table td p,
:root #content .items-leading table th, :root #content .items-leading table td, :root #content .items-leading table td p,
:root #content .category-desc table th, :root #content .category-desc table td, :root #content .category-desc table td p{ font-family:'Quattrocento Sans',Arial,sans-serif !important; }
:root #content .table-quote td,
:root #content .table-quote td p{ font-size:15px !important; line-height:1.4 !important; }
:root #content .table-quote th{ font-size:17px !important; line-height:1.4 !important; }
/* FONT (both modes, GLOBAL not #content): the Bootstrap popover title is an
-> caught by the h1-h6 'Dancing Script' rule (uikit.css). The popover is appended to , outside
#content, so it needs an unscoped reset. Used by the category-table column-sort .hasPopover headers. */
.popover-title{ font-family:'Quattrocento Sans',Arial,sans-serif !important; }
/* COLOUR (DM only): the popover is hard-coded light (#f5f5f5 body / #e8e8e8 title / rgba arrows). In dark
it becomes a raised surface-2 panel with a --wcf-border frame; title one step darker (surface). Arrow
outer = border tone, inner :after fill = popover surface, recoloured per placement (top/right/bottom/left). */
:root[data-theme="dark"] .popover{
background-color:var(--wcf-surface-2) !important;
border-color:var(--wcf-border) !important;
color:var(--wcf-text) !important;
box-shadow:0 6px 16px rgba(0,0,0,.5) !important;
}
:root[data-theme="dark"] .popover-content{ color:var(--wcf-text) !important; }
:root[data-theme="dark"] .popover-title{
background-color:var(--wcf-surface) !important;
border-bottom-color:var(--wcf-border) !important;
color:var(--wcf-heading) !important;
}
:root[data-theme="dark"] .popover.top .arrow{ border-top-color:var(--wcf-border) !important; }
:root[data-theme="dark"] .popover.right .arrow{ border-right-color:var(--wcf-border) !important; }
:root[data-theme="dark"] .popover.bottom .arrow{ border-bottom-color:var(--wcf-border) !important; }
:root[data-theme="dark"] .popover.left .arrow{ border-left-color:var(--wcf-border) !important; }
:root[data-theme="dark"] .popover.top .arrow:after{ border-top-color:var(--wcf-surface-2) !important; }
:root[data-theme="dark"] .popover.right .arrow:after{ border-right-color:var(--wcf-surface-2) !important; }
:root[data-theme="dark"] .popover.bottom .arrow:after{ border-bottom-color:var(--wcf-surface-2) !important; }
:root[data-theme="dark"] .popover.left .arrow:after{ border-left-color:var(--wcf-surface-2) !important; }
/* Generic Bootstrap tables: .table-striped (#f5f5f5 odd zebra), .table-hover (#eee), .table-bordered
(#ddd grid + outer border) are all light -> dark. Generic so every such table is covered at once
(e.g. the table-leanyears chiasm tables), not chased one by one. These sit on the panel (not in a
quote), so odd rows = surface-2 (even stay transparent = panel, like BM only-odd striping). Hover
"reaction" KEPT (#33414f). table.category + .table-quote keep their own (more specific) rules; the
tcollaps380/430 responsive collapse (media queries) is layout -> untouched. */
:root[data-theme="dark"] #content table.table-bordered,
:root[data-theme="dark"] #content .table-bordered > tbody > tr > td,
:root[data-theme="dark"] #content .table-bordered > tbody > tr > th,
:root[data-theme="dark"] #content .table-bordered > thead > tr > th{ border-color:var(--wcf-border) !important; }
:root[data-theme="dark"] #content .table-striped tbody > tr:nth-child(odd) > td,
:root[data-theme="dark"] #content .table-striped tbody > tr:nth-child(odd) > th{ background-color:var(--wcf-surface-2) !important; }
:root[data-theme="dark"] #content .table-hover tbody tr:hover > td,
:root[data-theme="dark"] #content .table-hover tbody tr:hover > th{ background-color:#33414f !important; }
/* ---- forms -------------------------------------------------------------- */
:root[data-theme="dark"] #content input:not([type=submit]):not([type=button]),
:root[data-theme="dark"] #content textarea,
:root[data-theme="dark"] #content select,
:root[data-theme="dark"] #content .uk-input,
:root[data-theme="dark"] #content .uk-textarea,
:root[data-theme="dark"] #content .uk-select{
background-color:var(--wcf-surface);
color:var(--wcf-text);
border-color:var(--wcf-border);
}
:root[data-theme="dark"] #content ::placeholder{ color:var(--wcf-muted); }
/* ---- bootstrap .well (light #f5f5f5 inset box) -> dark inset, anywhere in content.
Used by the search limit-box AND the whole contact form (