/** * Vector Collective — site-wide brand stylesheet. * * Setup Runbook Addendum, Phase 17. Single source of truth for "does this * look like the rest of the site" — every plugin added in later addendum * phases (BuddyPress/21, resource library/22, myCred/23, Events * Calendar+Tickets/24) gets its override rules appended below in its own * clearly-labeled section, rather than fighting each plugin's default CSS * from scratch or scattering overrides across theme files. * * Tokens and base rules below are pulled directly from account.html / * login.html / join-widget.html (vc-checkout-endpoint/public/) — those are * already in production use, so these are the *actual* live brand values, * not a re-guess. Palette/type originally extracted from vector-collective.com * itself (computed styles: black bg, #00e0ff cyan accent, "Unica One" * headings, "DM Sans" body, sharp-to-near-sharp corners, outlined buttons). */ :root { --bg: #000; --surface: #0b0b0b; --border: #2a2a2a; --fg: #fff; --muted: #acacac; --cyan: #00e0ff; /* primary accent — links, active states, focus rings */ --purple: #6b21a8; /* secondary accent, used sparingly */ --good: #34d399; /* status: active */ --warn: #fbbf24; /* status: past due */ --bad: #f87171; /* status: canceled / error */ } body, input, button, select, textarea { font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } h1, h2, h3, h4 { font-family: "Unica One", sans-serif; font-weight: 400; letter-spacing: .5px; } a { color: var(--cyan); } /* Reusable outlined button — the pattern used everywhere on the checkout/ account surfaces (account.html #manage-btn, login.html #login-btn, etc.): transparent fill, 2px cyan border, sharp-ish corners, subtle cyan-tinted hover fill. Phase 20's Discord "Join" button is called out by name in the addendum as needing this exact style — giving it a real class here means later phases can write class="primary-btn" instead of re-declaring these properties by hand each time. */ .primary-btn { display: inline-block; padding: .7rem 1.5rem; border: 2px solid var(--cyan); border-radius: 2px; background: transparent; color: var(--fg); font-weight: 600; letter-spacing: .3px; cursor: pointer; font-size: .95rem; font-family: inherit; text-decoration: none; transition: background .15s ease; } .primary-btn:hover { background: rgba(0, 224, 255, .1); color: var(--fg); } .primary-btn:disabled { opacity: .6; cursor: default; } /* Small status/pill badges — the one place border-radius: 999px is used intentionally (see account.html .badge). Not for general UI corners. */ .badge { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; white-space: nowrap; } .badge.active { background: rgba(52, 211, 153, .15); color: var(--good); } .badge.inactive { background: rgba(255, 255, 255, .08); color: var(--muted); } .badge.past_due { background: rgba(251, 191, 36, .15); color: var(--warn); } .badge.canceled { background: rgba(248, 113, 113, .15); color: var(--bad); } /* ------------------------------------------------------------------------- * Conditional nav menu (Join / Account / Sign In). * * WordPress core already adds "logged-in" or "logged-out" to via * body_class() on every front-end request — no extra PHP hook needed. To * use: in Appearance > Menus, open each item's advanced settings (enable * "CSS Classes" under Screen Options if the field isn't visible) and add: * - "Join" -> CSS class vc-guest-only * - "Sign In" -> CSS class vc-guest-only (points at the new /login page, * see the [vc_login_embed] shortcode in vc-auth-bridge.php) * - "Account" -> CSS class vc-member-only * ---------------------------------------------------------------------- */ body.logged-in .vc-guest-only { display: none !important; } body.logged-out .vc-member-only { display: none !important; } /* ------------------------------------------------------------------------- * Phase 21 — BuddyPress (member directory + profiles). * * BuddyPress's default templates ship light card backgrounds, rounded * bootstrap-y buttons, and a default sans-serif — none of it matching the * rest of the site. This covers the directory list, profile pages, and * forms using BuddyPress's standard wrapper/class names. Some elements * (avatar borders, pagination, sub-nav tabs) are the usual holdouts the * addendum calls out — check the live directory + a member profile page * after activation and extend this block for anything still showing * default styling. * ---------------------------------------------------------------------- */ /* Header clearance. Confirmed live on vector-collective.com/members/, 2026-08-01: this theme's header (.elementor-location-header) is an absolutely-positioned overlay, ~179px tall on desktop, meant to float on top of each page's own hero image — every normal Elementor page is hand-built with enough top spacing in its first section to clear it. BuddyPress's directory/profile pages aren't Elementor-built, so their content starts flush at the top of the page and the header floats over it. This pushes BuddyPress's content area down by the header's real height instead. Scoped to body.buddypress so it can't affect any other (already-correct) page. The mobile value below is an estimate, not independently confirmed the way the desktop value was — check on an actual phone or a resized browser and adjust if the header still overlaps content at narrow widths. */ body.buddypress .page-content { padding-top: 190px; } @media (max-width: 767px) { body.buddypress .page-content { padding-top: 130px; /* estimate — verify on mobile and adjust */ } } #buddypress { background: var(--bg); color: var(--fg); font-family: "DM Sans", sans-serif; } #buddypress a { color: var(--cyan); } #buddypress a:hover { color: var(--fg); } /* General safety net for any elements), so lean on the belt-and-suspenders version rather than assume a plain override is enough. Worth a quick eyeball after uploading to confirm the "Order By" text is visible. */ #buddypress select { background: var(--bg) !important; color: var(--fg) !important; border: 1px solid var(--border) !important; border-radius: 2px; padding: .3rem .5rem; } /* Profile header — cover photo strip + avatar surround. Confirmed live on a member profile, 2026-08-01: BuddyPress's default #header-cover-image is a plain light-gray block (its "no cover photo uploaded" placeholder) that clashes hard with the dark theme. Once a real cover photo gets uploaded per-member this becomes background-image instead and these rules mostly stop mattering, but the dark fallback is worth keeping regardless for anyone who never sets one. */ #buddypress #header-cover-image { background-color: var(--surface); border-bottom: 1px solid var(--border); } #buddypress #item-header { background: var(--bg); } /* Directory + profile section tabs (All Members, My Profile, Settings...) */ #buddypress div.item-list-tabs { background: var(--surface); border: 1px solid var(--border); border-radius: 2px; } #buddypress div.item-list-tabs ul li a { color: var(--muted); font-family: "DM Sans", sans-serif; } #buddypress div.item-list-tabs ul li.selected a, #buddypress div.item-list-tabs ul li.current a { color: var(--cyan); font-weight: 600; } /* Member-account nav tabs (Profile / Notifications / Messages / Friends / Settings, its View / Edit / Change Profile Photo / Change Cover Image sub-nav, and the Base / Discord Activity profile-group pills on Edit Profile). Confirmed live, 2026-08-02: none of these three are actually wrapped in "div.item-list-tabs" (that selector only matches the directory's own tab bar) — their real markup is #object-nav/#subnav's
  • and ".button-tabs li.current", neither covered above. Each one's active ships with BP Nouveau's own light gray/white background (rgb(255,255,255) / rgb(237,237,237)) and no color override was ever applied to *background*, only to text color — so the active tab in every one of these bars renders as a bright box that clashes hard against the rest of the dark UI. !important since that background comes from a fairly specific BP Nouveau rule. */ #buddypress #object-nav li.current a, #buddypress #object-nav li.selected a, #buddypress #subnav li.current a, #buddypress #subnav li.selected a, #buddypress ul.button-tabs li.current a, #buddypress ul.button-tabs li.selected a { background: transparent !important; color: var(--cyan) !important; font-weight: 600; } /* Search/settings/profile-edit forms. NOTE: BuddyPress's actual edit-profile form is a
    , not a
    — an earlier pass here used "div.standard-form" for every rule after the background, which silently matched nothing on that form. That's exactly why radio/checkbox field option labels showed as unstyled (white-on-white) — confirmed live, 2026-08-01. Using the bare class selector below so it matches regardless of the wrapping element. */ #buddypress .standard-form { background: var(--surface); border: 1px solid var(--border); border-radius: 2px; padding: 1.25rem; } #buddypress .standard-form input[type="text"], #buddypress .standard-form input[type="search"], #buddypress .standard-form input[type="email"], #buddypress .standard-form input[type="password"], #buddypress .standard-form textarea, #buddypress .standard-form select { background: var(--bg); border: 1px solid var(--border); color: var(--fg); border-radius: 2px; } #buddypress .standard-form input:focus, #buddypress .standard-form textarea:focus, #buddypress .standard-form select:focus { border-color: var(--cyan); outline: none; box-shadow: 0 0 0 1px var(--cyan); } #buddypress .standard-form label { color: var(--muted); } /* Checkbox/radio fields (Community Roles, Discord Linked, etc.) render with the browser's default accent color (usually blue) since nothing here ever set one — minor, not illegible, just off-brand next to the cyan used everywhere else. */ #buddypress input[type="checkbox"], #buddypress input[type="radio"] { accent-color: var(--cyan); } /* Radio/checkbox option text specifically — BP Nouveau wraps each option in its own