/*! * VelocityEHS Help Center — Reskin * Loaded LAST via the vehs-reskin must-use plugin, so it overrides Docy, * Elementor, Max Mega Menu, Announcer, The Events Calendar, EazyDocs and * AJAX Search Pro — regardless of which theme is active. * File-level only — FTP mu-plugins/vehs-reskin.php + this file to staging, then live. * * Design tokens from the Adobe XD reskin: * #000000 black — header bar, primary buttons, content links, badges * #FFFFFF white — nav text, cards, text on dark * #2C3CBB blue — announcement/press/breadcrumb bars, card "VIEW" links, * search button, sidebar folder icons * #8FFF3E green — primary CTA (Live Training Calendar), links on dark bars * #F2F2F2 grey — hero/search band and section backgrounds * #E7E4DF warm — alternating rows on event listings * * Body + headings: proxima-nova-wide (Adobe Fonts kit aky6lov, same as ehs.com). * ============================================================================ * SECTION 1 — FOUNDATION (this file grows in labelled sections as we go) * ============================================================================ */ /* ---- 1a. Reskin palette tokens (referenced throughout the file) ---- */ :root { --rk-black: #000000; --rk-white: #ffffff; --rk-blue: #2C3CBB; --rk-blue-rgb: 44, 60, 187; --rk-green: #8FFF3E; --rk-grey: #F2F2F2; --rk-altrow: #E7E4DF; } /* ---- 1b. Retire the old teal ------------------------------------------------ * Docy paints its accent (links, buttons, doc borders, tag hovers, etc.) from * --brand_color and rgba(var(--brand_color_rgb), x). The site sets these to the * teal (#0E4A63) inline from theme options. Redefining them here — with * !important so it wins regardless of inline source order — flips the whole * base accent to black (XD Phase-1 misc edits #1 and #2). Elements that should * be blue or green are handled per-component in later sections. * -------------------------------------------------------------------------- */ :root { --brand_color: #000000 !important; --brand_color_rgb: 0, 0, 0 !important; } /* ---- 1c. Typography: Proxima Nova Wide everywhere (matches www.ehs.com) ----- * Body is weight 400 ("Proxima Nova regular" in the brief = wide @ 400). * !important because Docy applies its heading/body fonts from theme options. * Heading CASE (uppercase vs title case) is applied per-component later, since * the XD keeps some titles (e.g. card headlines) in title case. * -------------------------------------------------------------------------- */ /* Target real text containers only. NOT span/div/a/i — those often carry icon * fonts (Font Awesome, dashicons), and forcing Proxima onto them shows tofu * boxes instead of glyphs. body inherits to inline text without that risk. */ body, input, select, textarea, button, p, li, td, th, blockquote, figcaption, label { font-family: "proxima-nova-wide", sans-serif !important; } body { font-weight: 400; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: "proxima-nova-wide", sans-serif !important; font-weight: 600; } /* ============================================================================ * SECTION 2 — GLOBAL COLOR OVERRIDES (grounded in the rendered CSS) * The theme injects its palette + fonts inline in wp_head AFTER this file, and * the Customizer "Additional CSS" later still, so overrides here use !important * (and a little extra specificity) to win the cascade. * ============================================================================ */ /* ---- 2a. Remaining teal brand variables (theme default #0e4a63) ------------- * Besides --brand_color, the site paints accents from --secondary_color and * EazyDocs' --ezd_brand_color. Point the secondary accents at the reskin blue. */ :root { --secondary_color: #2C3CBB !important; --ezd_brand_color: #2C3CBB !important; } /* ---- 2b. Lock heading weight to 600 (theme sets 700 inline, no !important) -- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600 !important; } /* ---- 2c. Breadcrumb bar: teal -> royal blue (XD) --------------------------- * Theme option outputs .page_breadcrumb{background:#0e4a63!important}. Beat it * with one extra class of specificity + !important; links inside stay white. */ body .page_breadcrumb { background-color: var(--rk-blue) !important; } body .page_breadcrumb, body .page_breadcrumb a, body .page_breadcrumb .breadcrumb-item { color: #ffffff !important; } body .page_breadcrumb a:hover { text-decoration: underline !important; } /* ---- 2d. Retire the beige gradient -> flat #F2F2F2 (XD punch #3) ------------ * Scoped to the same page types the theme paints the #fff8eb->#e8f2f6 gradient * on, so we don't repaint pages that shouldn't change. */ body.blog .body_wrapper, body.topic .body_wrapper, body.search .body_wrapper, body.tag .body_wrapper, body.category .body_wrapper, body.bbpress .body_wrapper, body.single-post .body_wrapper, body .bg_color_gradient { background: var(--rk-grey) !important; } /* ============================================================================ * SECTION 3 — GLOBAL HEADER, NAV & ANNOUNCEMENT BAR (appears on every page) * Markup: