/* ================================================================================= DCEL site chrome — cockpit/HUD frame for the whole site (dodgecheckenginelight.com) Phase 2-lite: header, nav, hero, archive cards, sidebar, footer → dark panel + CEL-amber, matching the .dcel article skin. READING SURFACES STAY LIGHT: single-post/page content boxes are untouched so ~112 legacy articles stay readable. Loaded site-wide by the dcel-skin plugin. Canonical source: drafts/dcel-skin/. NOTE: !important is used where Customizer "Additional CSS" (printed later in ) would otherwise win the cascade. ================================================================================= */ /* ---------- Self-hosted fonts (same files as the article skin; browser dedupes) ---------- */ @font-face{ font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap; src:url(../fonts/chakra-petch-600.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Chakra Petch";font-style:normal;font-weight:700;font-display:swap; src:url(../fonts/chakra-petch-700.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap; src:url(../fonts/ibm-plex-mono-600.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap; src:url(../fonts/barlow-400.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap; src:url(../fonts/barlow-600.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap; src:url(../fonts/barlow-700.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root{ --dcelc-bg:#070b12; --dcelc-panel:#0d1521; --dcelc-panel-2:#101a29; --dcelc-edge:#1d2a3d; --dcelc-edge-lit:rgba(255,181,46,.38); --dcelc-ink:#f2f6fc; --dcelc-body:#c3cfdf; --dcelc-muted:#7b8ca3; --dcelc-amber:#ffb52e; --dcelc-amber-hot:#ffd069; --dcelc-amber-deep:#ff8a00; --dcelc-display:"Chakra Petch","Barlow",sans-serif; --dcelc-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } /* ---------- Page canvas: dark cockpit deck; reading cards float on it like paper ---------- */ body{background-color:#0a0f17 !important;} .separate-containers .inside-article{border-radius:10px;} /* Archive/category/search title bar ("Category: RAM") — dark panel, not a white strip */ .page-header{ background: repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px), linear-gradient(170deg,var(--dcelc-panel-2),var(--dcelc-panel)) !important; border:1px solid var(--dcelc-edge); border-radius:10px; color:var(--dcelc-body) !important; } .page-header h1,.page-header .page-title{ color:var(--dcelc-ink) !important; font-family:var(--dcelc-display); text-transform:uppercase; letter-spacing:.03em; } .page-header a{color:var(--dcelc-amber) !important;} /* .dcel articles: the whole article box joins the dark panel (browsers with :has) */ .single .inside-article:has(.dcel){ background:linear-gradient(170deg,var(--dcelc-panel-2),var(--dcelc-panel)) !important; border:1px solid var(--dcelc-edge); } .single .inside-article:has(.dcel) .entry-title{color:var(--dcelc-ink) !important;} .single .inside-article:has(.dcel) .entry-meta, .single .inside-article:has(.dcel) .entry-meta a{color:var(--dcelc-muted) !important;} .single .inside-article:has(.dcel) .entry-header{border-left-color:var(--dcelc-amber);} /* ---------- Header: powered-on bezel ---------- */ .site-header{ position:relative; background: repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 4px), linear-gradient(165deg,var(--dcelc-panel-2),var(--dcelc-panel) 70%) !important; border-bottom:1px solid var(--dcelc-edge); } .site-header::before{ content:"";position:absolute;top:0;left:8%;right:8%;height:1px; background:linear-gradient(90deg,transparent,var(--dcelc-amber),transparent); opacity:.7; } .site-header .header-image, .navigation-branding img, .mobile-header-logo img{ border-radius:8px; border:1px solid var(--dcelc-edge); } .main-title a,.site-description{color:var(--dcelc-ink) !important;} /* ---------- Navigation (desktop, sticky clone, mobile header) ---------- */ .main-navigation, #site-navigation, #sticky-navigation, #mobile-header{ background:var(--dcelc-panel) !important; border-bottom:1px solid var(--dcelc-edge); } .main-navigation .main-nav ul li a, .main-navigation .menu-toggle, .main-navigation .mobile-bar-items a, .main-navigation button.menu-toggle{ color:var(--dcelc-body) !important; font-family:var(--dcelc-display); font-weight:600; letter-spacing:.05em; text-transform:uppercase; font-size:.92em; } .main-navigation .main-nav ul li a:hover, .main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li.sfHover > a{ color:var(--dcelc-amber-hot) !important; background:rgba(255,181,46,.07) !important; } .main-navigation .main-nav ul li.current-menu-item > a, .main-navigation .main-nav ul li.current-menu-ancestor > a{ color:var(--dcelc-amber) !important; box-shadow:inset 0 -2px 0 var(--dcelc-amber); } .main-navigation ul ul{ background:var(--dcelc-panel-2) !important; border:1px solid var(--dcelc-edge); box-shadow:0 18px 40px -22px rgba(0,0,0,.9); } .main-navigation ul ul li a{ color:var(--dcelc-body) !important; text-transform:none; letter-spacing:.02em; } .main-navigation ul ul li a:hover{color:var(--dcelc-amber-hot) !important;} .menu-toggle .mobile-menu, .menu-toggle .gp-icon{color:inherit;} .navigation-search input[type="search"], .navigation-search input[type="search"]:focus{ background:var(--dcelc-panel-2) !important; color:var(--dcelc-ink) !important; border:1px solid var(--dcelc-edge-lit); } /* slide-out / dropdown mobile menu, if used */ .slideout-navigation{background:var(--dcelc-panel) !important;} .slideout-navigation .main-nav ul li a{color:var(--dcelc-body) !important;} .slideout-overlay{background:rgba(7,11,18,.8) !important;} /* ---------- Homepage hero: primary readout panel ---------- */ .gb-container-hero{ position:relative; background: repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 4px), linear-gradient(rgba(120,160,220,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(120,160,220,.045) 1px,transparent 1px), radial-gradient(120% 90% at 50% 0%,var(--dcelc-panel-2) 0%,var(--dcelc-bg) 75%) !important; background-size:auto,44px 44px,44px 44px,auto !important; border:1px solid var(--dcelc-edge-lit); box-shadow:0 30px 70px -30px rgba(0,0,0,.7),inset 0 0 50px rgba(255,138,0,.04); overflow:hidden; } .gb-container-hero::before{ content:"";position:absolute;top:0;left:8%;right:8%;height:1px; background:linear-gradient(90deg,transparent,var(--dcelc-amber),transparent); opacity:.7; } .gb-container-hero h1{ font-family:var(--dcelc-display) !important; text-transform:uppercase; letter-spacing:.02em; color:var(--dcelc-ink) !important; } .gb-container-hero p{color:var(--dcelc-body) !important;} .gb-container-hero a{ font-family:var(--dcelc-display); font-weight:600; letter-spacing:.04em; background:linear-gradient(180deg,var(--dcelc-amber-hot),var(--dcelc-amber-deep)) !important; color:#10141c !important; border:1px solid var(--dcelc-amber-hot); border-radius:6px !important; box-shadow:0 0 22px rgba(255,138,0,.35); } .gb-container-hero a:hover{ background:linear-gradient(180deg,#ffe09a,var(--dcelc-amber)) !important; color:#10141c !important; } /* ---------- Category chips (homepage grid) ---------- */ .gb-grid-categories a{ background:var(--dcelc-panel) !important; color:var(--dcelc-amber) !important; border:1px solid var(--dcelc-edge-lit) !important; border-radius:6px !important; font-family:var(--dcelc-display); font-weight:600; letter-spacing:.05em; text-transform:uppercase; } .gb-grid-categories a:hover{ background:rgba(255,138,0,.14) !important; color:var(--dcelc-amber-hot) !important; } /* ---------- Archive / homepage post cards: instrument tiles ---------- */ .generate-columns .inside-article{ background: repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px), linear-gradient(170deg,var(--dcelc-panel-2),var(--dcelc-panel)) !important; border:1px solid var(--dcelc-edge) !important; border-radius:10px; box-shadow:inset 0 0 24px rgba(0,0,0,.4) !important; } .generate-columns .inside-article:hover{ border-color:var(--dcelc-edge-lit) !important; box-shadow:inset 0 0 24px rgba(0,0,0,.4),0 14px 30px -20px rgba(0,0,0,.8) !important; } .generate-columns .entry-title a{ color:var(--dcelc-ink) !important; font-family:var(--dcelc-display); font-weight:600; } .generate-columns .entry-title a:hover{color:var(--dcelc-amber-hot) !important;} .generate-columns .entry-meta, .generate-columns .entry-meta a, .generate-columns .entry-meta span{ color:var(--dcelc-muted) !important; font-family:var(--dcelc-mono); font-size:.78em; letter-spacing:.06em; } .generate-columns .entry-summary, .generate-columns .entry-summary p{color:var(--dcelc-body) !important;} .generate-columns .post-image img{border-radius:8px;border:1px solid var(--dcelc-edge);} .generate-columns .read-more.button, .read-more.button{ font-family:var(--dcelc-display); font-weight:600; letter-spacing:.04em; background:rgba(255,138,0,.07) !important; color:var(--dcelc-amber-hot) !important; border:1px solid rgba(255,181,46,.55) !important; border-radius:6px !important; } .generate-columns .read-more.button:hover, .read-more.button:hover{ background:rgba(255,138,0,.16) !important; color:var(--dcelc-amber-hot) !important; } /* ---------- Sidebar widgets: side instrument panels ---------- */ #right-sidebar .widget, .sidebar-widget{ background: repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px), linear-gradient(170deg,var(--dcelc-panel-2),var(--dcelc-panel)) !important; border:1px solid var(--dcelc-edge) !important; border-radius:10px !important; box-shadow:inset 0 0 24px rgba(0,0,0,.4) !important; } #right-sidebar .widget .widget-title, #right-sidebar .widget h2, #right-sidebar .widget h3, .sidebar-widget h3{ color:var(--dcelc-amber) !important; font-family:var(--dcelc-display); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.95em; } /* Section/widget title rails (moved from Additional CSS; amber works on both light & dark) */ .custom-title::after, #right-sidebar .widget h3::after{ content:''; display:block; height:3px; width:60px; margin:30px auto 40px; background-color:var(--dcelc-amber) !important; } @media (max-width:768px){ .custom-title::after, #right-sidebar .widget h3::after{margin:15px auto 20px;width:40px;} } #right-sidebar .widget, #right-sidebar .widget p, #right-sidebar .widget li{color:var(--dcelc-body) !important;} #right-sidebar .widget a, .sidebar-widget ul li a{color:var(--dcelc-body) !important;} #right-sidebar .widget a:hover, .sidebar-widget ul li a:hover{color:var(--dcelc-amber-hot) !important;} #sidebar-recent-post li{border-color:var(--dcelc-edge) !important;} /* ---------- Footer: lower console ---------- */ .site-footer{background:var(--dcelc-bg) !important;} .footer-widgets{ position:relative; background: repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 4px), linear-gradient(180deg,var(--dcelc-panel),var(--dcelc-bg)) !important; border-top:1px solid var(--dcelc-edge-lit); color:var(--dcelc-body) !important; } .footer-widgets .widget-title, .footer-widgets h2,.footer-widgets h3{ color:var(--dcelc-amber) !important; font-family:var(--dcelc-display); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.95em; } .footer-widgets,.footer-widgets p,.footer-widgets li{color:var(--dcelc-body);} .footer-widgets a{color:var(--dcelc-body) !important;} .footer-widgets a:hover{color:var(--dcelc-amber-hot) !important;} .site-info{ background:var(--dcelc-bg) !important; color:var(--dcelc-muted) !important; border-top:1px solid var(--dcelc-edge); } .site-info a{color:var(--dcelc-body) !important;} .site-info a:hover{color:var(--dcelc-amber-hot) !important;} /* ================================================================================= Pagination: scan-tool keypad (v5 — reworked; was a colour-only stub in chrome-4). Archive/homepage "Page 1 / 2 / →" was default GeneratePress: bare inline links, invisible dark-blue on the dark deck. Now: dark panel pills, amber current page, mono numerals, hover glow, centered, mobile-friendly. Pagination selectors ONLY. ================================================================================= */ /* GP prints legacy "Older posts"/"Newer posts" arrow links (.nav-previous/.nav-next) ALONGSIDE the numbered .nav-links — duplicate controls. Keep only the keypad. */ .paging-navigation .nav-previous, .paging-navigation .nav-next{display:none !important;} /* Keypad row: centered, wraps on small screens */ /* container: kill GP white card background (fix 2026-06-13) */ .paging-navigation, nav#nav-below, .archive .paging-navigation, .blog .paging-navigation{ background:transparent !important; border:0 !important; box-shadow:none !important; margin-top:10px; padding:18px 0 6px; } .paging-navigation .inside-navigation{background:transparent !important;border:0 !important;box-shadow:none !important;} .paging-navigation .nav-links{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; text-align:center; } /* Pills: dark panel keys with mono numerals */ .paging-navigation .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:42px; min-height:42px; padding:0 .85em; background:linear-gradient(170deg,var(--dcelc-panel-2),var(--dcelc-panel)) !important; color:var(--dcelc-body) !important; border:1px solid var(--dcelc-edge); border-radius:6px; font-family:var(--dcelc-mono); font-weight:600; font-size:.9em; letter-spacing:.04em; line-height:1; text-decoration:none; box-shadow:inset 0 0 12px rgba(0,0,0,.35); transition:color .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease; } .paging-navigation a.page-numbers:hover, .paging-navigation a.page-numbers:focus{ color:var(--dcelc-amber-hot) !important; border-color:var(--dcelc-edge-lit); background:rgba(255,138,0,.10) !important; box-shadow:inset 0 0 12px rgba(0,0,0,.35),0 0 14px rgba(255,181,46,.28); text-decoration:none; } /* Current page: lit amber key (CEL on) */ .paging-navigation .page-numbers.current{ background:linear-gradient(180deg,var(--dcelc-amber-hot),var(--dcelc-amber-deep)) !important; color:#10141c !important; border-color:var(--dcelc-amber-hot); box-shadow:0 0 18px rgba(255,138,0,.35); } /* Ellipsis: muted readout, no key chrome */ .paging-navigation .page-numbers.dots{ background:none !important; border:none; box-shadow:none; color:var(--dcelc-muted) !important; min-width:auto; padding:0 .25em; } /* Prev/Next keys: display-font labels, slightly wider */ .paging-navigation .page-numbers.prev, .paging-navigation .page-numbers.next{ font-family:var(--dcelc-display); text-transform:uppercase; letter-spacing:.06em; padding:0 1.1em; gap:.4em; /* flex eats the whitespace between the label and the →/← span */ } /* Small screens: tighter keys so the row wraps cleanly */ @media (max-width:600px){ .paging-navigation .nav-links{gap:6px;} .paging-navigation .page-numbers{min-width:38px;min-height:38px;padding:0 .6em;font-size:.85em;} .paging-navigation .page-numbers.prev, .paging-navigation .page-numbers.next{padding:0 .8em;} } /* ---------- Single post/page: title rail ties the light page to the panel ---------- */ .single .entry-header .entry-title, .page .entry-header .entry-title{ font-family:var(--dcelc-display); letter-spacing:.01em; } .single .entry-header{ border-left:3px solid var(--dcelc-amber); padding-left:.6em; } .single .entry-meta{ font-family:var(--dcelc-mono); font-size:.8em; letter-spacing:.05em; } /* ---------- GenerateBlocks buttons (e.g. homepage "Know More…") ---------- */ a.gb-button{ background:rgba(255,138,0,.07) !important; color:var(--dcelc-amber-hot) !important; border:1px solid rgba(255,181,46,.55) !important; border-radius:6px !important; font-family:var(--dcelc-display); font-weight:600; letter-spacing:.04em; } a.gb-button:hover{ background:rgba(255,138,0,.16) !important; color:var(--dcelc-amber-hot) !important; } /* ---------- Comments area ("Leave a Comment"): dark service-log panel ---------- */ .separate-containers .comments-area{ background: repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px), linear-gradient(170deg,var(--dcelc-panel-2),var(--dcelc-panel)) !important; border:1px solid var(--dcelc-edge); border-radius:10px; color:var(--dcelc-body) !important; } .comments-area .comments-title, .comments-area .comment-reply-title{ color:var(--dcelc-ink) !important; font-family:var(--dcelc-display); font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .comments-area p, .comments-area label, .comments-area .comment-body, .comments-area .comment-metadata a, .comments-area .logged-in-as{color:var(--dcelc-body) !important;} .comments-area a{color:var(--dcelc-amber) !important;} .comments-area a:hover{color:var(--dcelc-amber-hot) !important;} .comments-area .comment-form input[type="text"], .comments-area .comment-form input[type="email"], .comments-area .comment-form input[type="url"], .comments-area .comment-form textarea{ background:var(--dcelc-panel-2) !important; color:var(--dcelc-ink) !important; border:1px solid var(--dcelc-edge) !important; border-radius:6px; } .comments-area .comment-form input:focus, .comments-area .comment-form textarea:focus{border-color:var(--dcelc-edge-lit) !important;outline:none;} .comments-area input[type="submit"]{ background:linear-gradient(180deg,var(--dcelc-amber-hot),var(--dcelc-amber-deep)) !important; color:#10141c !important; border:1px solid var(--dcelc-amber-hot) !important; border-radius:6px !important; font-family:var(--dcelc-display); font-weight:600; letter-spacing:.04em; } .comments-area input[type="submit"]:hover{background:linear-gradient(180deg,#ffe09a,var(--dcelc-amber)) !important;} /* ---------- Back-to-top ---------- */ a.generate-back-to-top{ background:linear-gradient(180deg,var(--dcelc-amber-hot),var(--dcelc-amber-deep)) !important; color:#10141c !important; border-radius:6px; } /* ============================================================ Static pages (Privacy, Cookie, Contact, About, Terms) — 2026-06-13 The article skin (dcel-skin-2) is posts-only, so page content cards rendered as default-white GP. Darken them to match the cockpit theme. Scoped to body.page (singular pages only) — does NOT touch the blog/ archive post columns (.generate-columns) or the home index. ============================================================ */ .page .inside-article{ background:var(--dcelc-panel) !important; border:1px solid var(--dcelc-edge); box-shadow:0 18px 40px -28px rgba(0,0,0,.8); color:var(--dcelc-body); } .page .inside-article .entry-title{color:var(--dcelc-ink) !important;} .page .entry-header{border-left:3px solid var(--dcelc-amber);padding-left:.6em;} .page .entry-content{color:var(--dcelc-body);} .page .entry-content h2, .page .entry-content h3{ color:var(--dcelc-ink); font-family:var(--dcelc-display); letter-spacing:.01em; } .page .entry-content p, .page .entry-content li{color:var(--dcelc-body);} .page .entry-content strong{color:var(--dcelc-ink);} .page .entry-content a{color:var(--dcelc-amber-hot);} .page .entry-content a:hover{color:var(--dcelc-amber);text-decoration:underline;} .page .entry-content code{ background:rgba(255,181,46,.10); color:var(--dcelc-amber-hot); font-family:var(--dcelc-mono); padding:.1em .4em;border-radius:4px; } .page .entry-content table{width:100%;border-collapse:collapse;margin:1em 0;font-size:.95em;} .page .entry-content th, .page .entry-content td{border:1px solid var(--dcelc-edge);padding:.6em .7em;text-align:left;color:var(--dcelc-body);} .page .entry-content th{background:var(--dcelc-panel-2);color:var(--dcelc-ink);font-family:var(--dcelc-display);} .page .entry-content tr:nth-child(even) td{background:rgba(255,255,255,.02);} /* ============================================================ Legacy posts (not yet rebuilt to .dcel) — 2026-06-13 The article skin only darkens posts wrapped in .dcel, so the ~96 legacy Gutenberg posts rendered as a white content card on the dark site (an eyesore). Darken them to match, scoped with :not(:has(.dcel)) so rebuilt dcel posts, pages, and the blog/archive columns are untouched. ============================================================ */ .single .inside-article:not(:has(.dcel)){ background:linear-gradient(170deg,var(--dcelc-panel-2),var(--dcelc-panel)) !important; border:1px solid var(--dcelc-edge); color:var(--dcelc-body); } .single .inside-article:not(:has(.dcel)) .entry-title{color:var(--dcelc-ink) !important;} .single .inside-article:not(:has(.dcel)) .entry-header{border-left:3px solid var(--dcelc-amber);padding-left:.6em;} .single .inside-article:not(:has(.dcel)) .entry-meta, .single .inside-article:not(:has(.dcel)) .entry-meta a{color:var(--dcelc-muted) !important;} .single .inside-article:not(:has(.dcel)) .entry-content{color:var(--dcelc-body);} .single .inside-article:not(:has(.dcel)) .entry-content h2, .single .inside-article:not(:has(.dcel)) .entry-content h3, .single .inside-article:not(:has(.dcel)) .entry-content h4{ color:var(--dcelc-ink); font-family:var(--dcelc-display); letter-spacing:.01em; } .single .inside-article:not(:has(.dcel)) .entry-content p, .single .inside-article:not(:has(.dcel)) .entry-content li{color:var(--dcelc-body);} .single .inside-article:not(:has(.dcel)) .entry-content strong{color:var(--dcelc-ink);} .single .inside-article:not(:has(.dcel)) .entry-content a{color:var(--dcelc-amber-hot);} .single .inside-article:not(:has(.dcel)) .entry-content a:hover{color:var(--dcelc-amber);text-decoration:underline;} .single .inside-article:not(:has(.dcel)) .entry-content code{ background:rgba(255,181,46,.10);color:var(--dcelc-amber-hot); font-family:var(--dcelc-mono);padding:.1em .4em;border-radius:4px; } .single .inside-article:not(:has(.dcel)) .entry-content blockquote{ border-left:3px solid var(--dcelc-edge);color:var(--dcelc-muted);padding-left:1em; } /* legacy Gutenberg tables → dark */ .single .inside-article:not(:has(.dcel)) .entry-content table{width:100%;border-collapse:collapse;margin:1em 0;} .single .inside-article:not(:has(.dcel)) .entry-content th, .single .inside-article:not(:has(.dcel)) .entry-content td{ border:1px solid var(--dcelc-edge);padding:.6em .7em;text-align:left;color:var(--dcelc-body); } .single .inside-article:not(:has(.dcel)) .entry-content th{ background:var(--dcelc-panel-2);color:var(--dcelc-ink);font-family:var(--dcelc-display); } .single .inside-article:not(:has(.dcel)) .entry-content tr:nth-child(even) td{background:rgba(255,255,255,.02);} .single .inside-article:not(:has(.dcel)) .entry-content .wp-block-table{background:transparent !important;} /* ================================================================================= Dark-theme contrast / readability fixes — 2026-06-14 Found via a Playwright contrast audit (effective fg/bg WCAG ratio) across a dcel post, a legacy post, a static page and the homepage. These are text nodes the chrome + article skin did not reach, rendering dark-on-dark or light-on-light. (The homepage paginator "#fafafa band" some saw was just a stale chrome-5 cache, not a real bug — chrome-8 already makes .paging-navigation transparent.) ================================================================================= */ /* (1) kk Star Ratings "Rate this post" greet + legend. The widget renders at the END of .entry-content, OUTSIDE the .dcel wrapper, so it inherited GeneratePress's default near-black text (#212121) on the dark panel; the greet sits in .kksr-muted which also dims to opacity .5 → effectively invisible (~1.08:1). Force the skin body color and lift the muted opacity. Owner-reported. */ .single .kk-star-ratings .kksr-legend, .single .kk-star-ratings .kksr-legend *, .page .kk-star-ratings .kksr-legend, .page .kk-star-ratings .kksr-legend *{ color:var(--dcelc-body) !important; } .single .kk-star-ratings .kksr-muted, .page .kk-star-ratings .kksr-muted{opacity:.85 !important;} /* (2) Article body links inside .dcel posts. An old Customizer rule (.inside-article a{color:#1a73e8}) TIES .dcel a on specificity and wins on source order, so content links rendered default Google-blue — off-brand and only ~4.2:1 on the dark panel. Restore the skin amber; exclude the CTA buttons (.dcel-btn) so their own dark-on-amber styling stands. */ .inside-article .dcel a:not(.dcel-btn), .entry-content .dcel a:not(.dcel-btn){color:var(--dcelc-amber) !important;} .inside-article .dcel a:not(.dcel-btn):hover, .entry-content .dcel a:not(.dcel-btn):hover{color:var(--dcelc-amber-hot) !important;} /* (3) Legacy Gutenberg colored-background blocks. The "Need a Dodge Diagnostic Partner?" CTA (and similar) use has-pale-cyan-blue-background-color — present in ~42 legacy posts. The block keeps its own LIGHT palette background while the chrome-8 legacy rules force the text light → light-on-light (~1.05–1.5:1). Darken the block to a panel so it reads as an intentional callout. Scoped to legacy single posts + pages; dcel posts excluded. */ .single .inside-article:not(:has(.dcel)) .entry-content [class*="-background-color"], .page .entry-content [class*="-background-color"]{ background-color:var(--dcelc-panel-2) !important; border:1px solid var(--dcelc-edge); border-radius:10px; } /* (4) Active navigation item. GeneratePress paints li[class*="current-menu-"] > a with a blue #587cab background (off-theme blob + only ~2.7:1 against the light label). On a single post the post's category nav item enters this state. Drop the blue, use the amber underline style already used for current-menu-item/ancestor. */ .main-navigation .main-nav ul li[class*="current-menu-"] > a, .main-navigation .main-nav ul li[class*="current-post-"] > a{ background-color:transparent !important; color:var(--dcelc-amber) !important; box-shadow:inset 0 -2px 0 var(--dcelc-amber); }