/* * Octave brand overrides for the Bricsys Forum. * * @font-face declarations and :root design tokens live in fonts.css (loaded * via the customFont.url font pipeline on every page type). This file holds * component-level overrides and is loaded: * • Legacy pages → LegacyAssetModel::addCssFile("custom.css") * • SPA pages → BricsysSEOPlugin::pageRenderBefore_handler() */ /* Global typography baseline across routed views and overlays. */ body, #app, #modals, #messages { font-family: var(--brx-font-sans) !important; } #app :where( p, a, li, label, legend, dd, dt, th, td, small, strong, em, blockquote, input, select, textarea, button, option, h3, h4, h5, h6, .heading-3, .heading-4, .heading-5, .heading-6, .Button, .NavButton, [class*="typographyStyles-"], [class*="titleBarStyles-"], [class*="titleBarNavStyles-"] ), #modals :where( p, a, li, label, legend, dd, dt, th, td, small, strong, em, blockquote, input, select, textarea, button, option, h3, h4, h5, h6, .heading-3, .heading-4, .heading-5, .heading-6, .Button, .NavButton, [class*="typographyStyles-"] ), #messages :where( p, a, li, label, legend, dd, dt, th, td, small, strong, em, blockquote, input, select, textarea, button, option, h3, h4, h5, h6, .heading-3, .heading-4, .heading-5, .heading-6, .Button, .NavButton, [class*="typographyStyles-"] ) { font-family: var(--brx-font-sans) !important; } #app input::placeholder, #app textarea::placeholder, #modals input::placeholder, #modals textarea::placeholder, #messages input::placeholder, #messages textarea::placeholder { font-family: var(--brx-font-sans) !important; } h1, h2, #app h1, #app h2, #modals h1, #modals h2, #messages h1, #messages h2, .heading-1, .heading-2, [class*="typographyStyles-pageTitle"], [class*="typographyStyles-largeTitle"], [class*="Banner-styles-title"], [role="heading"][aria-level="1"], [role="heading"][aria-level="2"] { font-family: var(--brx-font-display) !important; } .titleBar, .titleBar a, [class*="titleBarStyles-"], [class*="titleBarNavStyles-"] { font-family: var(--brx-font-sans) !important; } /* * Primary buttons on light backgrounds (Octave blue). * Covers: * - React "New Discussion" link: a[role="button"][href*="/post/discussion"] * - Legacy form submits: .Button.Primary (Post Discussion, Save, etc.) * - Dashboard/admin buttons: .btn.btn-primary (moderation, import, modals) * - Emotion primary buttons: [class*="button-primary-styleHelperButtonGenerator"] * * Excludes .Handle (split-button dropdown toggle) to avoid overriding the * handle's layout/icon styling (e.g. New Discussion split button). * * No ancestor scoping — legacy pages render outside #app (MasterView.twig * bodyContent branch), and the class patterns are specific enough to avoid * false positives. * * The Emotion selectors are global but do not collide with dark-surface * components because: * - TitleBar auth buttons use "titleBarStyles-" class patterns, not * "button-primary-", and are styled by later #titleBar rules. * - Banner search buttons use "Banner-styles-" / "button-standard-" * patterns, not "button-primary-". * - FilterPanel submit uses "button-standard-" with a scoped ancestor. */ a[role="button"][href*="/post/discussion"], .Button.Primary:not(.Handle), .btn.btn-primary, button[class*="button-primary-styleHelperButtonGenerator"], a[class*="button-primary-styleHelperButtonGenerator"] { background-color: var(--brx-btn-light-primary-500) !important; border-color: var(--brx-btn-light-primary-500) !important; border-width: 1px !important; border-style: solid !important; border-radius: 8px !important; color: var(--brx-neutral-7) !important; font-family: var(--brx-font-sans) !important; font-weight: 600 !important; box-shadow: none !important; transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease; } /* Keep the pill shape only for the "New Discussion" CTA. */ a[role="button"][href*="/post/discussion"] { border-radius: 999px !important; } a[role="button"][href*="/post/discussion"]:hover, .Button.Primary:not(.Handle):hover, .btn.btn-primary:hover, button[class*="button-primary-styleHelperButtonGenerator"]:hover, a[class*="button-primary-styleHelperButtonGenerator"]:hover { background-color: var(--brx-btn-light-primary-600) !important; border-color: var(--brx-btn-light-primary-600) !important; color: var(--brx-neutral-7) !important; } a[role="button"][href*="/post/discussion"]:active, .Button.Primary:not(.Handle):active, .btn.btn-primary:active, button[class*="button-primary-styleHelperButtonGenerator"]:active, a[class*="button-primary-styleHelperButtonGenerator"]:active { background-color: var(--brx-btn-light-primary-700) !important; border-color: var(--brx-btn-light-primary-500) !important; color: var(--brx-neutral-7) !important; } a[role="button"][href*="/post/discussion"]:focus-visible, .Button.Primary:not(.Handle):focus-visible, .btn.btn-primary:focus-visible, button[class*="button-primary-styleHelperButtonGenerator"]:focus-visible, a[class*="button-primary-styleHelperButtonGenerator"]:focus-visible { background-color: var(--brx-btn-light-primary-700) !important; border-color: var(--brx-btn-light-primary-focus) !important; box-shadow: 0 0 0 2px var(--brx-neutral-7), 0 0 0 4px var(--brx-btn-light-primary-focus) !important; } a[role="button"][href*="/post/discussion"][aria-disabled="true"], .Button.Primary:not(.Handle):disabled, .Button.Primary:not(.Handle)[aria-disabled="true"], .Button.Primary:not(.Handle).disabled, .btn.btn-primary:disabled, .btn.btn-primary[aria-disabled="true"], .btn.btn-primary.disabled, button[class*="button-primary-styleHelperButtonGenerator"]:disabled, button[class*="button-primary-styleHelperButtonGenerator"][aria-disabled="true"], a[class*="button-primary-styleHelperButtonGenerator"][aria-disabled="true"] { background-color: var(--brx-btn-light-disabled-bg) !important; border-color: var(--brx-btn-light-disabled-bg) !important; color: var(--brx-btn-light-disabled-fg) !important; box-shadow: none !important; pointer-events: none !important; } /* Light-background CTA auth buttons (Welcome panel). */ [class*="CallToAction-styles-root"] a[role="button"][href*="/entry/signin"] { background-color: var(--brx-btn-light-primary-500) !important; border: 1px solid var(--brx-btn-light-primary-500) !important; border-radius: 8px !important; color: var(--brx-neutral-7) !important; font-family: var(--brx-font-sans) !important; font-weight: 600 !important; } [class*="CallToAction-styles-root"] a[role="button"][href*="/entry/signin"]:hover, [class*="CallToAction-styles-root"] a[role="button"][href*="/entry/signin"]:active { background-color: var(--brx-btn-light-primary-600) !important; border-color: var(--brx-btn-light-primary-600) !important; color: var(--brx-neutral-7) !important; } [class*="CallToAction-styles-root"] a[role="button"][href*="/entry/signin"]:focus-visible { background-color: var(--brx-btn-light-primary-700) !important; border-color: var(--brx-btn-light-primary-focus) !important; box-shadow: 0 0 0 2px var(--brx-neutral-7), 0 0 0 4px var(--brx-btn-light-primary-focus) !important; color: var(--brx-neutral-7) !important; } [class*="CallToAction-styles-root"] a[role="button"][href*="/entry/signin"][aria-disabled="true"] { background-color: var(--brx-btn-light-disabled-bg) !important; border-color: var(--brx-btn-light-disabled-bg) !important; color: var(--brx-btn-light-disabled-fg) !important; box-shadow: none !important; } [class*="CallToAction-styles-root"] a[role="button"][href*="/entry/register"] { background-color: var(--brx-neutral-7) !important; border: 1px solid var(--brx-btn-light-primary-500) !important; border-radius: 8px !important; color: var(--brx-btn-light-primary-500) !important; font-family: var(--brx-font-sans) !important; font-weight: 600 !important; } [class*="CallToAction-styles-root"] a[role="button"][href*="/entry/register"]:hover, [class*="CallToAction-styles-root"] a[role="button"][href*="/entry/register"]:active { background-color: var(--brx-btn-light-primary-600) !important; border-color: var(--brx-btn-light-primary-600) !important; color: var(--brx-neutral-7) !important; } [class*="CallToAction-styles-root"] a[role="button"][href*="/entry/register"]:focus-visible { background-color: var(--brx-btn-light-primary-700) !important; border-color: var(--brx-btn-light-primary-focus) !important; box-shadow: 0 0 0 2px var(--brx-neutral-7), 0 0 0 4px var(--brx-btn-light-primary-focus) !important; color: var(--brx-neutral-7) !important; } [class*="CallToAction-styles-root"] a[role="button"][href*="/entry/register"][aria-disabled="true"] { background-color: var(--brx-btn-light-disabled-bg) !important; border-color: var(--brx-btn-light-disabled-bg) !important; color: var(--brx-btn-light-disabled-fg) !important; box-shadow: none !important; } /* * Search page (SPA route) overrides. * On data-driven pages the framework injects Emotion CSS that sets font-family * directly on elements, bypassing inheritance from #app. The selectors below * target Emotion class-name patterns so the Octave fonts win everywhere. * * NOTE: [class*="..."] selectors matching Emotion style labels are FRAGILE. * They depend on build-time label strings in SearchBar.tsx, SearchPage, * searchResultStyles, filterPanelStyles etc. If Vanilla renames these labels * the selectors silently stop matching. Verify after Vanilla upgrades. */ /* Search bar and result list fonts. */ #app [class*="searchBar-"], #app [class*="searchBar__"], #app [class*="SearchBar-"], #app [class*="searchResult"], #app [class*="searchPage"], #app [class*="filterPanel"], #app [class*="searchMiscellaneous"], #app [class*="searchInFilter"], #app [class*="searchDomain"], #app [class*="SearchDomain"], #app [class*="SearchFilter"], #app [class*="dateRange"] { font-family: var(--brx-font-sans) !important; } /* * Search page headings (result titles, section headings). * Selectors target specific Vanilla class patterns rather than bare * [class*="title"] to avoid matching unrelated utility classes. */ #app [class*="searchResult"] h1, #app [class*="searchResult"] h2, #app [class*="searchResult"] h3, #app [class*="searchResult"] [class*="searchResult-title"], #app [class*="searchResult"] [class*="SearchResultTitle"], #app [class*="searchBar-"] h1, #app [class*="searchBar-"] h2 { font-family: var(--brx-font-display) !important; } /* * Search bar input side radius (left segment in withButton/withoutScope mode). * Apply to all wrapper layers that can visually clip/paint the field. */ [class*="SearchBar-styles-content"].withButton.withoutScope, [class*="SearchBar-styles-main"].withButton.withoutScope, [class*="SearchBar-styles-valueContainer"].withButton.withoutScope, [class*="SearchBar-styles-compoundValueContainer"].withButton.withoutScope, [class*="searchBar-valueContainer"].suggestedTextInput-inputText.withButton.withoutScope { border-top-left-radius: 8px !important; border-bottom-left-radius: 8px !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } [class*="SearchBar-styles-content"].withButton.withoutScope, [class*="SearchBar-styles-main"].withButton.withoutScope, [class*="searchBar-valueContainer"].suggestedTextInput-inputText.withButton.withoutScope { overflow: hidden !important; } [class*="searchBar-valueContainer"].suggestedTextInput-inputText.withButton.withoutScope .searchBar__control, [class*="searchBar-valueContainer"].suggestedTextInput-inputText.withButton.withoutScope .searchBar__value-container { border-top-left-radius: 8px !important; border-bottom-left-radius: 8px !important; } /* * Banner search button (dark background — landing page hero). * Selector: class contains "Banner-styles" to scope to the dark hero only. */ button[type="submit"][class*="Banner-styles-searchButton"] { background-color: var(--brx-btn-dark-primary-500) !important; border-color: var(--brx-btn-dark-primary-500) !important; border-width: 1px !important; border-style: solid !important; border-radius: 0 8px 8px 0 !important; color: var(--brx-neutral-1) !important; font-family: var(--brx-font-sans) !important; font-weight: 600 !important; box-shadow: none !important; } button[type="submit"][class*="Banner-styles-searchButton"]:hover { background-color: var(--brx-btn-dark-primary-600) !important; border-color: var(--brx-btn-dark-primary-500) !important; color: var(--brx-neutral-1) !important; } button[type="submit"][class*="Banner-styles-searchButton"]:active { background-color: var(--brx-btn-dark-primary-700) !important; border-color: var(--brx-btn-dark-primary-500) !important; color: var(--brx-neutral-1) !important; } button[type="submit"][class*="Banner-styles-searchButton"]:focus-visible { background-color: var(--brx-neutral-7) !important; border-color: var(--brx-btn-dark-primary-focus) !important; box-shadow: 0 0 0 2px var(--brx-neutral-1), 0 0 0 4px var(--brx-btn-dark-primary-focus) !important; } button[type="submit"][class*="Banner-styles-searchButton"]:disabled, button[type="submit"][class*="Banner-styles-searchButton"][aria-disabled="true"] { background-color: var(--brx-btn-dark-disabled-bg) !important; border-color: var(--brx-btn-dark-disabled-bg) !important; color: var(--brx-btn-dark-disabled-fg) !important; box-shadow: none !important; } /* * Search page submit button (light/white background — /search route). * Uses :not([class*="Banner-styles"]) to avoid matching the dark-bg banner. */ button[type="submit"][class*="SearchBar-styles-submitButton"]:not([class*="Banner-styles"]), button[type="submit"][id^="searchBar-"][id$="-searchButton"]:not([class*="Banner-styles"]) { background-color: var(--brx-btn-light-primary-500) !important; border-color: var(--brx-btn-light-primary-500) !important; border-width: 1px !important; border-style: solid !important; border-radius: 0 8px 8px 0 !important; color: var(--brx-neutral-7) !important; font-family: var(--brx-font-sans) !important; font-weight: 600 !important; box-shadow: none !important; } button[type="submit"][class*="SearchBar-styles-submitButton"]:not([class*="Banner-styles"]):hover, button[type="submit"][id^="searchBar-"][id$="-searchButton"]:not([class*="Banner-styles"]):hover { background-color: var(--brx-btn-light-primary-600) !important; border-color: var(--brx-btn-light-primary-600) !important; color: var(--brx-neutral-7) !important; } button[type="submit"][class*="SearchBar-styles-submitButton"]:not([class*="Banner-styles"]):active, button[type="submit"][id^="searchBar-"][id$="-searchButton"]:not([class*="Banner-styles"]):active { background-color: var(--brx-btn-light-primary-700) !important; border-color: var(--brx-btn-light-primary-500) !important; color: var(--brx-neutral-7) !important; } button[type="submit"][class*="SearchBar-styles-submitButton"]:not([class*="Banner-styles"]):focus-visible, button[type="submit"][id^="searchBar-"][id$="-searchButton"]:not([class*="Banner-styles"]):focus-visible { background-color: var(--brx-btn-light-primary-700) !important; border-color: var(--brx-btn-light-primary-focus) !important; box-shadow: 0 0 0 2px var(--brx-neutral-7), 0 0 0 4px var(--brx-btn-light-primary-focus) !important; } button[type="submit"][class*="SearchBar-styles-submitButton"]:not([class*="Banner-styles"]):disabled, button[type="submit"][class*="SearchBar-styles-submitButton"]:not([class*="Banner-styles"])[aria-disabled="true"], button[type="submit"][id^="searchBar-"][id$="-searchButton"]:not([class*="Banner-styles"]):disabled, button[type="submit"][id^="searchBar-"][id$="-searchButton"]:not([class*="Banner-styles"])[aria-disabled="true"] { background-color: var(--brx-btn-light-disabled-bg) !important; border-color: var(--brx-btn-light-disabled-bg) !important; color: var(--brx-btn-light-disabled-fg) !important; box-shadow: none !important; } /* Search filter-panel submit button. */ main [class*="filterPanel-body"] button[type="submit"][class*="button-standard-styleHelperButtonGenerator-buttonClass"] { background-color: var(--brx-btn-light-primary-500) !important; border: 1px solid var(--brx-btn-light-primary-500) !important; border-radius: 8px !important; color: var(--brx-neutral-7) !important; font-family: var(--brx-font-sans) !important; font-weight: 600 !important; } main [class*="filterPanel-body"] button[type="submit"][class*="button-standard-styleHelperButtonGenerator-buttonClass"]:hover { background-color: var(--brx-btn-light-primary-600) !important; border-color: var(--brx-btn-light-primary-600) !important; } main [class*="filterPanel-body"] button[type="submit"][class*="button-standard-styleHelperButtonGenerator-buttonClass"]:active { background-color: var(--brx-btn-light-primary-700) !important; border-color: var(--brx-btn-light-primary-500) !important; } main [class*="filterPanel-body"] button[type="submit"][class*="button-standard-styleHelperButtonGenerator-buttonClass"]:focus-visible { border-color: var(--brx-btn-light-primary-focus) !important; box-shadow: 0 0 0 2px var(--brx-neutral-7), 0 0 0 4px var(--brx-btn-light-primary-focus) !important; } /* * Secondary / outline buttons on light backgrounds. * * Octave guideline: blue border + blue text (default) → black fill (hover) * → black fill + blue border (pressed) → blue focus ring (focus-visible). * * Targets: * - Emotion outline buttons: [class*="button-outline-styleHelperButtonGenerator"] * - Legacy .Button (Save Draft, Cancel, etc.) * - Dashboard/admin secondaries: .btn.btn-secondary (modals, button groups) * * These do not collide with dark-surface or context-specific rules because: * - Banner / filterPanel submit buttons use "button-standard-" or ID-based * selectors, so the "button-outline-" class pattern never matches them. * - TitleBar buttons use "titleBarStyles-" class patterns and are styled * by later, higher-specificity #titleBar rules. * - CallToAction buttons are styled by href-based selectors. * * Legacy .Button selectors are restricted to interactive elements (a, button, * input) to avoid matching
wrapper containers, and * exclude .Danger to preserve destructive-action semantics and .Handle to * avoid overriding split-button dropdown toggle styling. * * No ancestor scoping — legacy pages render outside #app. */ /* --- Emotion outline buttons on light backgrounds --- */ button[class*="button-outline-styleHelperButtonGenerator"], a[class*="button-outline-styleHelperButtonGenerator"] { background-color: transparent !important; border: 1px solid var(--brx-btn-light-primary-500) !important; border-radius: 8px !important; color: var(--brx-btn-light-primary-500) !important; font-family: var(--brx-font-sans) !important; font-weight: 600 !important; box-shadow: none !important; } button[class*="button-outline-styleHelperButtonGenerator"]:hover, a[class*="button-outline-styleHelperButtonGenerator"]:hover { background-color: var(--brx-btn-light-primary-600) !important; border-color: var(--brx-btn-light-primary-600) !important; color: var(--brx-neutral-7) !important; } button[class*="button-outline-styleHelperButtonGenerator"]:active, a[class*="button-outline-styleHelperButtonGenerator"]:active { background-color: var(--brx-btn-light-primary-700) !important; border-color: var(--brx-btn-light-primary-500) !important; color: var(--brx-neutral-7) !important; } button[class*="button-outline-styleHelperButtonGenerator"]:focus-visible, a[class*="button-outline-styleHelperButtonGenerator"]:focus-visible { background-color: transparent !important; border-color: var(--brx-btn-light-primary-focus) !important; box-shadow: 0 0 0 2px var(--brx-neutral-7), 0 0 0 4px var(--brx-btn-light-primary-focus) !important; color: var(--brx-btn-light-primary-500) !important; } button[class*="button-outline-styleHelperButtonGenerator"]:disabled, button[class*="button-outline-styleHelperButtonGenerator"][aria-disabled="true"], a[class*="button-outline-styleHelperButtonGenerator"][aria-disabled="true"] { background-color: transparent !important; border-color: var(--brx-btn-light-disabled-bg) !important; color: var(--brx-btn-light-disabled-fg) !important; box-shadow: none !important; } /* * Legacy .Button (Save Draft, Cancel, etc.) * * Restricted to interactive elements (a, button, input) to avoid matching *
wrapper containers (e.g. update.twig, prerequisites.php). * Excludes .Danger to preserve destructive-action semantics. * Excludes .Handle to avoid overriding split-button dropdown handles. */ a.Button:not(.Primary):not(.Danger):not(.Handle):not([href*="/post/discussion"]), button.Button:not(.Primary):not(.Danger):not(.Handle), input.Button:not(.Primary):not(.Danger):not(.Handle), .btn.btn-secondary { background-color: transparent !important; border: 1px solid var(--brx-btn-light-primary-500) !important; border-radius: 8px !important; color: var(--brx-btn-light-primary-500) !important; font-family: var(--brx-font-sans) !important; font-weight: 600 !important; box-shadow: none !important; } a.Button:not(.Primary):not(.Danger):not(.Handle):not([href*="/post/discussion"]):hover, button.Button:not(.Primary):not(.Danger):not(.Handle):hover, input.Button:not(.Primary):not(.Danger):not(.Handle):hover, .btn.btn-secondary:hover { background-color: var(--brx-btn-light-primary-600) !important; border-color: var(--brx-btn-light-primary-600) !important; color: var(--brx-neutral-7) !important; } a.Button:not(.Primary):not(.Danger):not(.Handle):not([href*="/post/discussion"]):active, button.Button:not(.Primary):not(.Danger):not(.Handle):active, input.Button:not(.Primary):not(.Danger):not(.Handle):active, .btn.btn-secondary:active { background-color: var(--brx-btn-light-primary-700) !important; border-color: var(--brx-btn-light-primary-500) !important; color: var(--brx-neutral-7) !important; } a.Button:not(.Primary):not(.Danger):not(.Handle):not([href*="/post/discussion"]):focus-visible, button.Button:not(.Primary):not(.Danger):not(.Handle):focus-visible, input.Button:not(.Primary):not(.Danger):not(.Handle):focus-visible, .btn.btn-secondary:focus-visible { background-color: transparent !important; border-color: var(--brx-btn-light-primary-focus) !important; box-shadow: 0 0 0 2px var(--brx-neutral-7), 0 0 0 4px var(--brx-btn-light-primary-focus) !important; color: var(--brx-btn-light-primary-500) !important; } /* Active / selected state (e.g. dashboard filter toggles like plugins.php). */ .btn.btn-secondary.active { background-color: var(--brx-btn-light-primary-600) !important; border-color: var(--brx-btn-light-primary-600) !important; color: var(--brx-neutral-7) !important; box-shadow: none !important; } a.Button:not(.Primary):not(.Danger):not(.Handle):not([href*="/post/discussion"]):disabled, a.Button:not(.Primary):not(.Danger):not(.Handle):not([href*="/post/discussion"])[aria-disabled="true"], a.Button:not(.Primary):not(.Danger):not(.Handle):not([href*="/post/discussion"]).disabled, button.Button:not(.Primary):not(.Danger):not(.Handle):disabled, button.Button:not(.Primary):not(.Danger):not(.Handle)[aria-disabled="true"], input.Button:not(.Primary):not(.Danger):not(.Handle):disabled, input.Button:not(.Primary):not(.Danger):not(.Handle)[aria-disabled="true"], .btn.btn-secondary:disabled, .btn.btn-secondary[aria-disabled="true"], .btn.btn-secondary.disabled { background-color: transparent !important; border-color: var(--brx-btn-light-disabled-bg) !important; color: var(--brx-btn-light-disabled-fg) !important; box-shadow: none !important; } /* Compact search "Cancel" control on the dark title bar. */ #titleBar button[type="button"][aria-controls^="compactSearch-"][aria-label="Cancel"], #titleBar button[type="button"][aria-controls^="compactSearch-"][title="Cancel"], .titleBar button[type="button"][aria-controls^="compactSearch-"][aria-label="Cancel"], .titleBar button[type="button"][aria-controls^="compactSearch-"][title="Cancel"] { background-color: transparent !important; border: 1px solid var(--brx-btn-dark-primary-500) !important; border-radius: 8px !important; color: var(--brx-btn-dark-primary-500) !important; font-family: var(--brx-font-sans) !important; font-weight: 600 !important; box-shadow: none !important; } #titleBar button[type="button"][aria-controls^="compactSearch-"][aria-label="Cancel"] .meBox-buttonContent, #titleBar button[type="button"][aria-controls^="compactSearch-"][title="Cancel"] .meBox-buttonContent, .titleBar button[type="button"][aria-controls^="compactSearch-"][aria-label="Cancel"] .meBox-buttonContent, .titleBar button[type="button"][aria-controls^="compactSearch-"][title="Cancel"] .meBox-buttonContent { color: var(--brx-btn-dark-primary-500) !important; font-family: var(--brx-font-sans) !important; font-weight: inherit !important; } #titleBar button[type="button"][aria-controls^="compactSearch-"][aria-label="Cancel"]:hover, #titleBar button[type="button"][aria-controls^="compactSearch-"][title="Cancel"]:hover, .titleBar button[type="button"][aria-controls^="compactSearch-"][aria-label="Cancel"]:hover, .titleBar button[type="button"][aria-controls^="compactSearch-"][title="Cancel"]:hover { background-color: var(--brx-neutral-7) !important; border-color: var(--brx-neutral-7) !important; color: var(--brx-neutral-1) !important; } #titleBar button[type="button"][aria-controls^="compactSearch-"][aria-label="Cancel"]:active, #titleBar button[type="button"][aria-controls^="compactSearch-"][title="Cancel"]:active, .titleBar button[type="button"][aria-controls^="compactSearch-"][aria-label="Cancel"]:active, .titleBar button[type="button"][aria-controls^="compactSearch-"][title="Cancel"]:active { background-color: var(--brx-neutral-7) !important; border-color: var(--brx-btn-dark-primary-500) !important; color: var(--brx-neutral-1) !important; } #titleBar button[type="button"][aria-controls^="compactSearch-"][aria-label="Cancel"]:hover .meBox-buttonContent, #titleBar button[type="button"][aria-controls^="compactSearch-"][title="Cancel"]:hover .meBox-buttonContent, .titleBar button[type="button"][aria-controls^="compactSearch-"][aria-label="Cancel"]:hover .meBox-buttonContent, .titleBar button[type="button"][aria-controls^="compactSearch-"][title="Cancel"]:hover .meBox-buttonContent, #titleBar button[type="button"][aria-controls^="compactSearch-"][aria-label="Cancel"]:active .meBox-buttonContent, #titleBar button[type="button"][aria-controls^="compactSearch-"][title="Cancel"]:active .meBox-buttonContent, .titleBar button[type="button"][aria-controls^="compactSearch-"][aria-label="Cancel"]:active .meBox-buttonContent, .titleBar button[type="button"][aria-controls^="compactSearch-"][title="Cancel"]:active .meBox-buttonContent { color: var(--brx-neutral-1) !important; } #titleBar button[type="button"][aria-controls^="compactSearch-"][aria-label="Cancel"]:focus-visible, #titleBar button[type="button"][aria-controls^="compactSearch-"][title="Cancel"]:focus-visible, .titleBar button[type="button"][aria-controls^="compactSearch-"][aria-label="Cancel"]:focus-visible, .titleBar button[type="button"][aria-controls^="compactSearch-"][title="Cancel"]:focus-visible { background-color: var(--brx-neutral-7) !important; border-color: var(--brx-btn-dark-primary-focus) !important; box-shadow: 0 0 0 2px var(--brx-neutral-1), 0 0 0 4px var(--brx-btn-dark-primary-focus) !important; } #titleBar button[type="button"][aria-controls^="compactSearch-"][aria-label="Cancel"]:focus-visible .meBox-buttonContent, #titleBar button[type="button"][aria-controls^="compactSearch-"][title="Cancel"]:focus-visible .meBox-buttonContent, .titleBar button[type="button"][aria-controls^="compactSearch-"][aria-label="Cancel"]:focus-visible .meBox-buttonContent, .titleBar button[type="button"][aria-controls^="compactSearch-"][title="Cancel"]:focus-visible .meBox-buttonContent { color: var(--brx-neutral-1) !important; } @media (prefers-reduced-motion: reduce) { #titleBar button[type="button"][aria-controls^="compactSearch-"][aria-label="Cancel"], #titleBar button[type="button"][aria-controls^="compactSearch-"][title="Cancel"], .titleBar button[type="button"][aria-controls^="compactSearch-"][aria-label="Cancel"], .titleBar button[type="button"][aria-controls^="compactSearch-"][title="Cancel"] { transition: none !important; } } /* * Title bar guest auth buttons on dark background. * Emotion's "&&" / "&&&" patterns boost specificity to (0,2,0) / (0,3,0). * We use #titleBar (ID = 1,0,0) plus descendants + attribute selectors, plus * !important, which wins unconditionally. * * The [class*="titleBarStyles-..."] selectors are FRAGILE fallbacks. They * match Emotion style-label substrings generated at build time by * titleBarStyles.ts. If Vanilla renames or removes those labels the * selectors silently stop matching — the href-based selectors above are the * durable primaries. Grep for "titleBarStyles-signIn" and * "titleBarStyles-register" in titleBarStyles.ts to verify after upgrades. */ #titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/signin"], #titleBar .titleBar-nav a[role="menulink"][href*="/entry/signin"], #titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/register"], #titleBar .titleBar-nav a[role="menulink"][href*="/entry/register"], .titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/signin"], .titleBar .titleBar-nav a[role="menulink"][href*="/entry/signin"], .titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/register"], .titleBar .titleBar-nav a[role="menulink"][href*="/entry/register"], #titleBar a[class*="titleBarStyles-signIn"][class*="titleBarStyles-guestButton"], #titleBar a[class*="titleBarStyles-register"][class*="titleBarStyles-guestButton"] { border-radius: 8px !important; border-style: solid !important; border-width: 1px !important; box-shadow: none !important; font-family: var(--brx-font-sans) !important; font-weight: 600 !important; line-height: 1.15 !important; text-decoration: none !important; } #titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/signin"] .linkContentClassName, #titleBar .titleBar-nav a[role="menulink"][href*="/entry/signin"] .linkContentClassName, #titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/register"] .linkContentClassName, #titleBar .titleBar-nav a[role="menulink"][href*="/entry/register"] .linkContentClassName, .titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/signin"] .linkContentClassName, .titleBar .titleBar-nav a[role="menulink"][href*="/entry/signin"] .linkContentClassName, .titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/register"] .linkContentClassName, .titleBar .titleBar-nav a[role="menulink"][href*="/entry/register"] .linkContentClassName, #titleBar a[class*="titleBarStyles-signIn"] .linkContentClassName, #titleBar a[class*="titleBarStyles-register"] .linkContentClassName { color: inherit !important; font-family: var(--brx-font-sans) !important; font-weight: inherit !important; line-height: inherit !important; } #titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/signin"], #titleBar .titleBar-nav a[role="menulink"][href*="/entry/signin"], .titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/signin"], .titleBar .titleBar-nav a[role="menulink"][href*="/entry/signin"], #titleBar a[class*="titleBarStyles-signIn"][class*="titleBarStyles-guestButton"] { background-color: var(--brx-btn-dark-primary-500) !important; border: 1px solid var(--brx-btn-dark-primary-500) !important; color: var(--brx-neutral-1) !important; } #titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/signin"] .linkContentClassName, #titleBar .titleBar-nav a[role="menulink"][href*="/entry/signin"] .linkContentClassName, .titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/signin"] .linkContentClassName, .titleBar .titleBar-nav a[role="menulink"][href*="/entry/signin"] .linkContentClassName, #titleBar a[class*="titleBarStyles-signIn"] .linkContentClassName { color: var(--brx-neutral-1) !important; } #titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/signin"]:hover, #titleBar .titleBar-nav a[role="menulink"][href*="/entry/signin"]:hover, .titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/signin"]:hover, .titleBar .titleBar-nav a[role="menulink"][href*="/entry/signin"]:hover, #titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/signin"]:active, #titleBar .titleBar-nav a[role="menulink"][href*="/entry/signin"]:active, .titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/signin"]:active, .titleBar .titleBar-nav a[role="menulink"][href*="/entry/signin"]:active, #titleBar a[class*="titleBarStyles-signIn"][class*="titleBarStyles-guestButton"]:hover, #titleBar a[class*="titleBarStyles-signIn"][class*="titleBarStyles-guestButton"]:active { background-color: var(--brx-neutral-7) !important; border-color: var(--brx-btn-dark-primary-500) !important; color: var(--brx-neutral-1) !important; } #titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/signin"]:hover .linkContentClassName, #titleBar .titleBar-nav a[role="menulink"][href*="/entry/signin"]:hover .linkContentClassName, .titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/signin"]:hover .linkContentClassName, .titleBar .titleBar-nav a[role="menulink"][href*="/entry/signin"]:hover .linkContentClassName, #titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/signin"]:active .linkContentClassName, #titleBar .titleBar-nav a[role="menulink"][href*="/entry/signin"]:active .linkContentClassName, .titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/signin"]:active .linkContentClassName, .titleBar .titleBar-nav a[role="menulink"][href*="/entry/signin"]:active .linkContentClassName, #titleBar a[class*="titleBarStyles-signIn"]:hover .linkContentClassName, #titleBar a[class*="titleBarStyles-signIn"]:active .linkContentClassName { color: var(--brx-neutral-1) !important; } #titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/signin"]:focus-visible, #titleBar .titleBar-nav a[role="menulink"][href*="/entry/signin"]:focus-visible, .titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/signin"]:focus-visible, .titleBar .titleBar-nav a[role="menulink"][href*="/entry/signin"]:focus-visible, #titleBar a[class*="titleBarStyles-signIn"][class*="titleBarStyles-guestButton"]:focus-visible { background-color: var(--brx-neutral-7) !important; border-color: var(--brx-btn-dark-primary-focus) !important; box-shadow: 0 0 0 2px var(--brx-neutral-1), 0 0 0 4px var(--brx-btn-dark-primary-focus) !important; } #titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/signin"]:focus-visible .linkContentClassName, #titleBar .titleBar-nav a[role="menulink"][href*="/entry/signin"]:focus-visible .linkContentClassName, .titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/signin"]:focus-visible .linkContentClassName, .titleBar .titleBar-nav a[role="menulink"][href*="/entry/signin"]:focus-visible .linkContentClassName, #titleBar a[class*="titleBarStyles-signIn"]:focus-visible .linkContentClassName { color: var(--brx-neutral-1) !important; } #titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/register"], #titleBar .titleBar-nav a[role="menulink"][href*="/entry/register"], .titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/register"], .titleBar .titleBar-nav a[role="menulink"][href*="/entry/register"], #titleBar a[class*="titleBarStyles-register"][class*="titleBarStyles-guestButton"] { background-color: transparent !important; border: 1px solid var(--brx-btn-dark-primary-500) !important; color: var(--brx-btn-dark-primary-500) !important; } #titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/register"] .linkContentClassName, #titleBar .titleBar-nav a[role="menulink"][href*="/entry/register"] .linkContentClassName, .titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/register"] .linkContentClassName, .titleBar .titleBar-nav a[role="menulink"][href*="/entry/register"] .linkContentClassName, #titleBar a[class*="titleBarStyles-register"] .linkContentClassName { color: var(--brx-btn-dark-primary-500) !important; } #titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/register"]:hover, #titleBar .titleBar-nav a[role="menulink"][href*="/entry/register"]:hover, .titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/register"]:hover, .titleBar .titleBar-nav a[role="menulink"][href*="/entry/register"]:hover, #titleBar a[class*="titleBarStyles-register"][class*="titleBarStyles-guestButton"]:hover { background-color: var(--brx-neutral-7) !important; border-color: var(--brx-neutral-7) !important; color: var(--brx-neutral-1) !important; } #titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/register"]:active, #titleBar .titleBar-nav a[role="menulink"][href*="/entry/register"]:active, .titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/register"]:active, .titleBar .titleBar-nav a[role="menulink"][href*="/entry/register"]:active, #titleBar a[class*="titleBarStyles-register"][class*="titleBarStyles-guestButton"]:active { background-color: var(--brx-neutral-7) !important; border-color: var(--brx-btn-dark-primary-500) !important; color: var(--brx-neutral-1) !important; } #titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/register"]:hover .linkContentClassName, #titleBar .titleBar-nav a[role="menulink"][href*="/entry/register"]:hover .linkContentClassName, .titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/register"]:hover .linkContentClassName, .titleBar .titleBar-nav a[role="menulink"][href*="/entry/register"]:hover .linkContentClassName, #titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/register"]:active .linkContentClassName, #titleBar .titleBar-nav a[role="menulink"][href*="/entry/register"]:active .linkContentClassName, .titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/register"]:active .linkContentClassName, .titleBar .titleBar-nav a[role="menulink"][href*="/entry/register"]:active .linkContentClassName, #titleBar a[class*="titleBarStyles-register"]:hover .linkContentClassName, #titleBar a[class*="titleBarStyles-register"]:active .linkContentClassName { color: var(--brx-neutral-1) !important; } #titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/register"]:focus-visible, #titleBar .titleBar-nav a[role="menulink"][href*="/entry/register"]:focus-visible, .titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/register"]:focus-visible, .titleBar .titleBar-nav a[role="menulink"][href*="/entry/register"]:focus-visible, #titleBar a[class*="titleBarStyles-register"][class*="titleBarStyles-guestButton"]:focus-visible { background-color: var(--brx-neutral-7) !important; border-color: var(--brx-btn-dark-primary-focus) !important; box-shadow: 0 0 0 2px var(--brx-neutral-1), 0 0 0 4px var(--brx-btn-dark-primary-focus) !important; } #titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/register"]:focus-visible .linkContentClassName, #titleBar .titleBar-nav a[role="menulink"][href*="/entry/register"]:focus-visible .linkContentClassName, .titleBar .titleBar-guestNav a[role="menulink"][href*="/entry/register"]:focus-visible .linkContentClassName, .titleBar .titleBar-nav a[role="menulink"][href*="/entry/register"]:focus-visible .linkContentClassName, #titleBar a[class*="titleBarStyles-register"]:focus-visible .linkContentClassName { color: var(--brx-neutral-1) !important; } /* Footer styles are defined in assets/footer.twig (rendered inside #themeFooter shadow root). */