/* ── 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 { --wcb-primary: var( --wp--preset--color--wcb-primary, #2563eb ); --wcb-primary-dark: var( --wp--preset--color--wcb-primary-dark, #1d4ed8 ); --wcb-avatar-bg: var( --wp--preset--color--wcb-avatar-bg, #1e293b ); --wcb-base: var( --wp--preset--color--wcb-base, #ffffff ); --wcb-contrast: var( --wp--preset--color--wcb-contrast, #0f172a ); --wcb-muted: var( --wp--preset--color--wcb-muted, #6b7280 ); --wcb-surface: var( --wp--preset--color--wcb-surface, #f1f5f9 ); --wcb-border: 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"] { /* 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 ); } /* * 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 ); } } /* 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; }