/* * BuddyX token application layer * * Applies the --bx-color-* tokens (defined by inc/Tokens/Component.php) to * the standard theme selectors. Loaded after global.css so it overrides * any hardcoded values that pre-date the token system. * * This file should ONLY contain `var(--bx-color-X)` references. Hardcoded * hex values are forbidden here. When you want to change a color globally, * update the token in inc/Tokens/Component.php — never edit this file. * * The tokens swap to dark values when [data-bx-mode="dark"] is set on * , so this same file drives both light and dark modes. */ /* ----- Page surfaces ----- * Master 5.0.x left .site, .site-main, .entry-content, .hentry, #secondary * etc. transparent — body BG showed through. Phase 4 originally added * card-style BGs to those surfaces, but on directory pages with sidebars * the layered cards exposed empty colored regions when content didn't fill * a column (white patch under the member loop, gray patch under sparse * sidebars, double-border on nested comment cards). Reverted to master * behavior: only html/body get a token-driven BG; everything else inherits. */ html, body { background-color: var(--bx-color-bg, #ffffff); color: var(--bx-color-fg, #505050); } /* ----- Boxed layout (body.layout-boxed) ----- * Customizer ▸ Site Layout ▸ "Boxed" wraps the main `.site` container in * a constrained, elevated card with the body BG visible at left/right * margins. This makes `content_background_color` (token --bx-color-bg-page) * a visible setting again — it paints the inner card; `body_background_color` * (token --bx-color-bg) shows in the outer area around the box. * * `max-width` is emitted by the customizer's `site_container_width` output * (see General_Fields.php) so the customer's chosen width drives the box. * Full-bleed elements like the sub-header (which use `width:100vw + negative * margin` per commit eb98d11) intentionally remain viewport-spanning even * inside the box — matches the modern theme convention (Astra/GP/etc.). */ body.layout-boxed .site { margin-left: auto; margin-right: auto; background-color: var(--bx-color-bg-page, #ffffff); box-shadow: 0 0 30px rgba(0, 0, 0, 0.08); position: relative; } @media (max-width: 640px) { /* On phones the boxed shadow + margin reads as visual noise; flatten * to a full-width content area so mobile users get a clean read. */ body.layout-boxed .site { max-width: 100%; box-shadow: none; } } /* ----- Header ----- */ .site-header, .site-header-section { background-color: var(--bx-color-header-bg, #ffffff); } .site-title, .site-title a, .site-title a:visited { color: var(--bx-color-site-title, var(--bx-color-fg, #111111)); } .site-title a:hover, .site-title a:focus { color: var(--bx-color-site-title-hover, var(--bx-color-accent, #ef5455)); } .site-description { color: var(--bx-color-site-tagline, var(--bx-color-fg, #757575)); } /* Primary nav */ .main-navigation a, .main-navigation ul li a { color: var(--bx-color-menu-fg, var(--bx-color-fg, #111111)); } .main-navigation a:hover, .main-navigation li.current-menu-item > a, .main-navigation li.current_page_item > a { color: var(--bx-color-menu-hover, var(--bx-color-accent, #ef5455)); } /* ----- Sub-header ----- */ .site-sub-header, .page-header { color: var(--bx-color-subheader-fg, var(--bx-color-fg, inherit)); } /* ----- Headings ----- */ h1, .h1 { color: var(--bx-color-h1, var(--bx-color-fg, #111111)); } h2, .h2 { color: var(--bx-color-h2, var(--bx-color-fg, #111111)); } h3, .h3 { color: var(--bx-color-h3, var(--bx-color-fg, #111111)); } h4, .h4 { color: var(--bx-color-h4, var(--bx-color-fg, #111111)); } h5, .h5 { color: var(--bx-color-h5, var(--bx-color-fg, #111111)); } h6, .h6 { color: var(--bx-color-h6, var(--bx-color-fg, #111111)); } /* ----- Body links ----- * `:not(.wp-element-button):not(.wp-block-button__link):not(.button)` * keeps button-as-anchor elements (WP block buttons, pattern CTAs, BP * action buttons) from inheriting the body link color. Without this * exclusion, the .entry-content a rule (specificity 0,2,0) overrides * the button rule below (0,1,0) and renders Email-us / Buy-Now etc. * with link color on top of the brand BG → unreadable. * * Selector scope is intentionally limited to `.entry-content` and * `.comment-content`. An earlier unscoped `p a:not(...)` selector was * dropped because BuddyX renders the masthead site title as * `

` (see template-parts/header/branding.php), * which the unscoped `p a:not(...)` rule (specificity 0,3,2) was * overriding the customer's `site_title_color` (selector * `.site-title a`, specificity 0,1,1). All single/page templates * already wrap post content in `.entry-content`, so the scoped rule * still covers paragraph-nested links inside post bodies. */ .entry-content a:not(.wp-element-button):not(.wp-block-button__link):not(.button), .comment-content a:not(.wp-element-button):not(.wp-block-button__link):not(.button) { color: var(--bx-color-link, var(--bx-color-accent, #111111)); /* WCAG 1.4.1 Use of Color: links must be distinguishable from * surrounding text without relying on color alone. Body-content * links get an underline; per-context CSS can override (e.g. * pattern CTAs that already have visual chrome). */ text-decoration: underline; text-underline-offset: 2px; } /* Post meta category + tag links — underlined to pass link-in-text-block * even when the saved customer color happens to match surrounding text. */ .post-meta-category__link, .post-meta-tag__link, .tags-list a, .tag-links a { text-decoration: underline; text-underline-offset: 2px; } .entry-content a:not(.wp-element-button):not(.wp-block-button__link):not(.button):hover, .entry-content a:not(.wp-element-button):not(.wp-block-button__link):not(.button):focus, .comment-content a:not(.wp-element-button):not(.wp-block-button__link):not(.button):hover, .comment-content a:not(.wp-element-button):not(.wp-block-button__link):not(.button):focus { color: var(--bx-color-link-hover, var(--bx-color-accent, #ef5455)); } /* ----- Buttons ----- * Note: `.button` is intentionally NOT in this selector list. WP and * BuddyPress use `.button` for many low-emphasis links (notification * dropdown footer, BP friend buttons, etc.) that should NOT inherit the * customer's brand button color. Per-context stylesheets already scope * `.button` correctly (woocommerce.css, platform.css, _comments.css). * This rule covers only canonical button elements + WP block buttons. * * Also excluded: header chrome buttons (color-mode toggle, menu-toggle, * search-icon) — they're navigation icons, not primary actions. * * Also excluded: WooCommerce block components ([class*="wc-block-"]) — * Cart/Checkout/Mini-Cart block buttons (quantity stepper, remove-item) * ship their own styling; the brand-button fill broke their layout. */ button:not([class*="wp-"]):not([class*="customize-"]):not([class*="wc-block-"]):not(.bx-color-mode-toggle__btn):not(.menu-toggle):not(.menu-close):not(.datepicker button):not([class*="tribe-events"]), input[type="button"], input[type="submit"], .wp-block-button__link { background-color: var(--bx-color-button-bg, var(--bx-color-accent, #ef5455)); color: var(--bx-color-button-fg, #ffffff); border-color: var(--bx-color-button-border, var(--bx-color-accent, #ef5455)); } button:not([class*="wp-"]):not([class*="customize-"]):not([class*="wc-block-"]):not(.bx-color-mode-toggle__btn):not(.menu-toggle):not(.menu-close):not(.datepicker button):not([class*="tribe-events"]):hover, input[type="button"]:hover, input[type="submit"]:hover, .wp-block-button__link:hover { background-color: var(--bx-color-button-bg-hover, var(--bx-color-accent, #ef5455)); color: var(--bx-color-button-fg-hover, #ffffff); border-color: var(--bx-color-button-border-hover, var(--bx-color-accent, #ef5455)); } /* ----- Footer ----- */ .site-footer, .site-footer-wrapper, .footer-widgets { background-color: var(--bx-color-footer-bg, var(--bx-color-bg, #ffffff)); color: var(--bx-color-footer-fg, var(--bx-color-fg, #505050)); } .site-footer .widget-title, .footer-widgets .widget-title { color: var(--bx-color-footer-title, var(--bx-color-h2, #111111)); } .site-footer a, .footer-widgets a { color: var(--bx-color-footer-link, var(--bx-color-link, #111111)); } .site-footer a:hover, .footer-widgets a:hover { color: var(--bx-color-footer-link-hover, var(--bx-color-link-hover, #ef5455)); } /* ----- Copyright ----- * `.site-info` is the canonical wrapper rendered by template-parts/footer/info.php * (.site-copyright / .copyright-section are kept for back-compat with theme * variants that may use them). The `.site-footer` ancestor is added to the * link selectors to bump specificity over the `.site-footer a` rule above * (both are 0,1,1) so `site_copyright_links_color` wins independently from * `site_footer_links_color`. */ .site-info, .site-copyright, .copyright-section { background-color: var(--bx-color-copyright-bg, var(--bx-color-footer-bg, #ffffff)); color: var(--bx-color-copyright-fg, var(--bx-color-footer-fg, #505050)); border-color: var(--bx-color-copyright-border, transparent); } .site-footer .site-info a, .site-info a, .site-copyright a, .copyright-section a { color: var(--bx-color-copyright-link, var(--bx-color-link, #111111)); /* Underline to distinguish links from surrounding copyright text * without relying on color alone (WCAG 1.4.1 — Use of Color). */ text-decoration: underline; text-underline-offset: 2px; } .site-footer .site-info a:hover, .site-info a:hover, .site-copyright a:hover, .copyright-section a:hover { color: var(--bx-color-copyright-link-hover, var(--bx-color-link-hover, #ef5455)); } /* ----- Active menu state — accessible distinguisher ----- * Per-WCAG 1.4.3 AA, body text needs a 4.5:1 contrast ratio. The default * accent #ef5455 only has 3.87:1 against white — fails. Rather than * darken the brand accent globally (would break customer expectations), * keep the active state TEXT in the standard menu fg (high contrast) and * use the brand accent as a thick UNDERLINE for "you are here" emphasis. * Bold weight adds a third non-color cue (WCAG 1.4.1 — Use of Color). */ .main-navigation ul li.current-menu-item > a, .main-navigation ul li.current_page_item > a, .main-navigation ul li.current-menu-ancestor > a { color: var(--bx-color-menu-fg, var(--bx-color-fg, #1a1a1a)); font-weight: 600; text-decoration: underline; text-decoration-color: var(--bx-color-menu-active, var(--bx-color-accent, #ef5455)); text-decoration-thickness: 2px; text-underline-offset: 4px; } /* ----- Inputs / forms ----- */ /* Note: tokens chosen to match 5.0.x master cascade — input BG follows * box_background_color (via bg-elevated) and input border follows * site_copyright_border_color (via copyright-border). Semantic decoupling * (separate input-bg / input-border tokens) moved to 5.2.x backlog so * existing customer color customizations stay visually unchanged. */ input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { background-color: var(--bx-color-bg-elevated, #ffffff); color: var(--bx-color-fg, #111111); border-color: var(--bx-color-copyright-border, #c3c4c7); border-radius: var(--bx-radius-form, 4px); } /* ----- Borders / dividers ----- */ hr { border-color: var(--bx-color-copyright-border, #e8e8e8); } /* ----- Dark-mode overrides for Output_Builder hardcoded defaults ----- * The Background Control's `background_setting` field defaults * `background-color` to `rgba(255,255,255,0.8)` (Footer_Fields.php) and * `site_copyright_border_color` defaults to `#e8e8e8`. Output_Builder * emits these literal hex / rgba values into the inline `