MediaWiki:Bhcvectorbrand-css

/* =========================================================

  BHC Vector Brand – presentation layer
  Scoped to body.bhc-branding only
  Header is NON-STICKY and scrolls with the page
  ========================================================= */

root { --bhc-bar-height: 0px; }

/* Base */ body.bhc-branding{

 padding-top: 0;
 overflow-x: hidden;

}

/* ---------------------------------------------------------

  HEADER BAR (scrolls normally)
  --------------------------------------------------------- */

body.bhc-branding .bhc-sitebar{

 position: static;
 border-top: 5px solid rgb(165,174,121);
 border-bottom: 10px solid rgb(228,186,149);
 background: rgb(130,156,149);
 color: #fff;

}

body.bhc-branding .bhc-sitebar-inner{

 max-width: 1200px;
 margin: 0 auto;
 padding: 12px 16px;
 display: flex;
 align-items: center;
 gap: 12px;
 font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

}

body.bhc-branding .bhc-logo{

 width: 56px;
 height: 56px;
 background: url(/extensions/BHCVectorBrand/resources/images/bhc-logo.png) center/contain no-repeat;
 border-radius: 6px;

}

body.bhc-branding .bhc-title{

 font-size: 18px;
 letter-spacing: 1px;

}

body.bhc-branding .bhc-strapline{

 opacity: .95;
 margin-top: 2px;

}

body.bhc-branding .bhc-test-badge{

 margin-left: auto;
 background: rgba(0,0,0,.18);
 border: 1px solid rgba(255,255,255,.35);
 padding: 4px 10px;
 border-radius: 999px;
 font-size: 12px;
 letter-spacing: .06em;

}

/* ---------------------------------------------------------

  FOOTER
  --------------------------------------------------------- */

body.bhc-branding .bhc-footer{

 margin-top: 2.25rem;
 padding: 1.5rem 0;
 border-top: 6px solid rgb(228,186,149);
 background: #f6f6f6;
 color: #222;
 clear: both;
 width: 100%;

}

body.bhc-branding .bhc-footer-inner{

 max-width: 1200px;
 margin: 0 auto;
 padding: 0 16px;
 font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
 font-size: .95rem;
 line-height: 1.6;

}

/* ---------------------------------------------------------

  Vector sticky UI should sit BELOW the BHC header (only while visible)
  JS sets --bhc-bar-height to header height when header is on-screen, else 0
  --------------------------------------------------------- */

body.bhc-branding .vector-sticky-header, body.bhc-branding .vector-page-toolbar{

 top: var(--bhc-bar-height) !important;

}

/* Hide the original Vector search portlet/container now that we move the form */ body.bhc-branding #p-search, body.bhc-branding .vector-search-box, body.bhc-branding .vector-search-box-vue {

 display: none !important;

}

/* Make the moved search sit nicely on the right */ body.bhc-branding .bhc-search-slot {

 margin-left: auto;
 display: flex;
 align-items: center;
 gap: .5rem;

}

/* Basic styling for the moved search input */ body.bhc-branding .bhc-moved-search {

 display: flex;
 align-items: center;
 gap: .5rem;

}

body.bhc-branding .bhc-search-input {

 width: min(340px, 40vw);
 max-width: 100%;
 padding: .45rem .6rem;
 border-radius: 6px;
 border: 1px solid rgba(255,255,255,.45);
 background: rgba(255,255,255,.12);
 color: #fff;

}

body.bhc-branding .bhc-search-input::placeholder {

 color: rgba(255,255,255,.75);

}

/* If there’s a submit button, keep it subtle */ body.bhc-branding .bhc-search-submit {

 padding: .45rem .7rem;
 border-radius: 6px;
 border: 1px solid rgba(255,255,255,.35);
 background: rgba(0,0,0,.12);
 color: #fff;

}