/* ── WP Career Board — global frontend styles ────────────────────────────── */ /* * Color bridge — ensures a good first-load on any theme, no config required. * * The hardcoded fallbacks (#2563eb etc.) are the plugin's brand defaults and * are used automatically on classic themes or any theme that does not define * matching wcb-* color slugs. * * Recommended override path (block themes / child themes): * Add a "wcb-primary" slug to your theme.json color palette and WordPress * will automatically recolor all WCB UI — no extra CSS needed. * * Example child theme.json: * { "settings": { "color": { "palette": [ * { "slug": "wcb-primary", "color": "#6d28d9" }, * { "slug": "wcb-primary-dark", "color": "#5b21b6" } * ] } } } * * Classic theme override: set --wcb-primary directly in :root. */ :root { /* Host-theme token adoption (Wbcom standard — see jetonomy docs/standards/host-theme-color-adoption.md). The accent adopts the ACTIVE theme's own brand token first so the plugin reads as native and follows the theme's dark mode for free, then WP theme.json presets, then the popular page-builder themes, then the plugin's hardcoded brand. Tokens are mutually exclusive per active theme, so order only sets precedence: BuddyX / BuddyX Pro 5.1+ -> --bx-color-accent Reign 8.0+ -> --reign-colors-theme BuddyNext -> --brand "primary"-slug themes -> --wp--preset--color--primary (TT3, classic) Astra -> --ast-global-color-0 Kadence -> --global-palette1 Blocksy -> --theme-palette-color-1 GeneratePress / "accent" -> --wp--preset--color--accent */ --wcb-primary: var( --bx-color-accent, var( --reign-colors-theme, var( --brand, var( --wp--preset--color--wcb-primary, var( --wp--preset--color--primary, var( --ast-global-color-0, var( --global-palette1, var( --theme-palette-color-1, var( --wp--preset--color--accent, #2563eb ) ) ) ) ) ) ) ) ); /* Darker shade for hover/active. Derived from whatever --wcb-primary resolves to so the hover state always tracks the adopted accent (a BuddyX red primary must not get a blue hover). Hex fallback first for browsers without color-mix(). */ --wcb-primary-dark: #1d4ed8; --wcb-primary-dark: color-mix( in srgb, var( --wcb-primary ) 85%, #000 ); --wcb-avatar-bg: var( --wp--preset--color--wcb-avatar-bg, #1e293b ); /* Surfaces + text — adopt BuddyX / BuddyX Pro's clean --bx-color-* and BuddyNext, then WP base/contrast presets, then a neutral default. Per the standard, non --bx- theme-specific surface/text tokens are NOT auto-adopted (too varied; risk of clashing with the plugin's card UI). */ --wcb-base: var( --bx-color-bg-elevated, var( --surface, var( --bg, var( --wp--preset--color--wcb-base, var( --wp--preset--color--base, #ffffff ) ) ) ) ); --wcb-contrast: var( --bx-color-fg, var( --text-1, var( --wp--preset--color--wcb-contrast, var( --wp--preset--color--contrast, #0f172a ) ) ) ); --wcb-muted: var( --bx-color-fg-muted, var( --text-2, var( --wp--preset--color--wcb-muted, #6b7280 ) ) ); --wcb-surface: var( --bx-color-bg, var( --canvas, var( --wp--preset--color--wcb-surface, #f1f5f9 ) ) ); --wcb-border: var( --bx-color-border, var( --line, var( --wp--preset--color--wcb-border, #e2e8f0 ) ) ); --wcb-featured: var( --wp--preset--color--wcb-featured, #f59e0b ); } /* * Dark-mode overrides. The same dark token values apply under every dark-mode * convention we support, so every WCB component using `var(--wcb-*)` re-colors * automatically: * - Reign / generic block themes that add `dark-mode` to . * - BuddyX / BuddyX Pro 5.1+ color modes, which set `data-bx-mode` on : * explicit dark -> html[data-bx-mode="dark"] * "auto" (follow system) -> prefers-color-scheme inside [data-bx-mode="auto"] * * The two declaration lists below are intentionally identical and MUST stay in * sync (the auto block lives in a media query, so it cannot share the selector). * Keep all dark-mode config here so it spans the core palette (frontend.css) and * the semantic palette (frontend-tokens.css) in one place. */ html.dark-mode, html[data-bx-mode="dark"], html[data-bn-theme="dark"], [data-theme="dark"] { /* Core palette. */ --wcb-base: #1e1f24; --wcb-contrast: #f1f5f9; --wcb-muted: #94a3b8; --wcb-surface: #2a2d36; --wcb-border: #3a3d46; --wcb-avatar-bg: #0f172a; /* Semantic palette (frontend-tokens.css). */ --wcb-bg-subtle: #16181d; --wcb-bg-hover: #2a2d36; --wcb-text-secondary: #cbd5e1; --wcb-text-tertiary: #94a3b8; /* Status tint backgrounds — keep readable against a dark card. */ --wcb-success-bg: rgba( 22, 163, 74, 0.22 ); --wcb-warning-bg: rgba( 217, 119, 6, 0.22 ); --wcb-danger-bg: rgba( 220, 38, 38, 0.22 ); --wcb-info-bg: rgba( 37, 99, 235, 0.22 ); /* Soft tints + the primary banner tint — translucent so tinted callouts (onboarding banner, form-success notice) read as a dark surface, not a light patch stuck in light mode. */ --wcb-success-bg-soft: rgba( 22, 163, 74, 0.15 ); --wcb-warning-bg-soft: rgba( 217, 119, 6, 0.15 ); --wcb-danger-bg-soft: rgba( 220, 38, 38, 0.15 ); --wcb-info-bg-soft: rgba( 37, 99, 235, 0.15 ); --wcb-primary-bg: rgba( 37, 99, 235, 0.18 ); --wcb-primary-border: rgba( 37, 99, 235, 0.40 ); /* Status foreground — lightened so text on the translucent tints stays legible (was dark-on-dark / invisible before). */ --wcb-success-fg: #4ade80; --wcb-warning-fg: #fbbf24; --wcb-danger-fg: #f87171; --wcb-info-fg: #93c5fd; } /* * BuddyX "auto" color mode follows the OS preference. Scoped strictly to * html[data-bx-mode="auto"] so themes without that attribute (Reign, classic * themes, the block editor) are never recolored by the visitor's OS setting. * Mirror of the dark token list above - keep both in sync. */ @media ( prefers-color-scheme: dark ) { html[data-bx-mode="auto"] { /* Core palette. */ --wcb-base: #1e1f24; --wcb-contrast: #f1f5f9; --wcb-muted: #94a3b8; --wcb-surface: #2a2d36; --wcb-border: #3a3d46; --wcb-avatar-bg: #0f172a; /* Semantic palette (frontend-tokens.css). */ --wcb-bg-subtle: #16181d; --wcb-bg-hover: #2a2d36; --wcb-text-secondary: #cbd5e1; --wcb-text-tertiary: #94a3b8; /* Status tint backgrounds — keep readable against a dark card. */ --wcb-success-bg: rgba( 22, 163, 74, 0.22 ); --wcb-warning-bg: rgba( 217, 119, 6, 0.22 ); --wcb-danger-bg: rgba( 220, 38, 38, 0.22 ); --wcb-info-bg: rgba( 37, 99, 235, 0.22 ); /* Soft tints + primary banner tint (mirror of the explicit-dark block). */ --wcb-success-bg-soft: rgba( 22, 163, 74, 0.15 ); --wcb-warning-bg-soft: rgba( 217, 119, 6, 0.15 ); --wcb-danger-bg-soft: rgba( 220, 38, 38, 0.15 ); --wcb-info-bg-soft: rgba( 37, 99, 235, 0.15 ); --wcb-primary-bg: rgba( 37, 99, 235, 0.18 ); --wcb-primary-border: rgba( 37, 99, 235, 0.40 ); /* Status foreground — lightened for legibility on the translucent tints. */ --wcb-success-fg: #4ade80; --wcb-warning-fg: #fbbf24; --wcb-danger-fg: #f87171; --wcb-info-fg: #93c5fd; } } /* Suppress the theme's page title on WCB app / archive pages. */ .wcb-page .entry-title, .wcb-page .page-title, .wcb-page h1.post-title, .wcb-page .wp-block-post-title { display: none !important; } /* Suppress the theme sidebar on WCB app / archive pages. */ .wcb-page #secondary, .wcb-page .widget-area, .wcb-page aside.sidebar, .wcb-page .sidebar-area, .wcb-page .site-sidebar, .wcb-page #sidebar { display: none !important; } /* ── Page heading — rendered inside listing blocks ───────────────────────── */ .wcb-page-heading { font-size: var(--wcb-text-2xl); font-weight: var( --wcb-font-bold, 700 ); color: var( --wcb-contrast, #0f172a ); margin: 0 0 var(--wcb-space-2xl); line-height: 1.2; }