/* ================================================================================= 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 keys ---------- */ .paging-navigation .page-numbers{ background:var(--dcelc-panel); color:var(--dcelc-body); border:1px solid var(--dcelc-edge); border-radius:6px; font-family:var(--dcelc-mono); font-weight:600; } .paging-navigation .page-numbers:hover{color:var(--dcelc-amber-hot);border-color:var(--dcelc-edge-lit);} .paging-navigation .page-numbers.current{ background:linear-gradient(180deg,var(--dcelc-amber-hot),var(--dcelc-amber-deep)); color:#10141c; border-color:var(--dcelc-amber-hot); } /* ---------- 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; }