MediaWiki:Bhcvectorbrand-css

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

  BHC Vector Brand – presentation layer (Timeless-first)
  Scoped to body.bhc-branding only
  ========================================================= */

/* Google Fonts (if CSP blocks, fallbacks still apply) */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@400;700&family=Satisfy&display=swap');

root{

 --bhc-bar-height: 0px; /* set by JS */

}

body.bhc-branding{

 /* Palette */
 --bhc-teal: rgb(130,156,149);
 --bhc-olive: rgb(165,174,121);
 --bhc-sand: rgb(228,186,149);
 --bhc-maroon: #800020;
 --bhc-link: #005DB3;
 --bhc-text: #202020;

 /* Fonts */
 --bhc-body-font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
 --bhc-heading-font: "Roboto Condensed", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
 --bhc-accent-font: "Satisfy", cursive;

 overflow-x: hidden;
 font-size: 18px;
 line-height: 1.65;

}

@media (max-width: 720px){

 body.bhc-branding{ font-size: 16.5px; }

}

/* Body text */ body.bhc-branding, body.bhc-branding .mw-body, body.bhc-branding .mw-parser-output{

 font-family: var(--bhc-body-font);
 color: var(--bhc-text);

}

/* Links */ body.bhc-branding a{ color: var(--bhc-link); } body.bhc-branding a:hover{ text-decoration: underline; }

/* Headings */ body.bhc-branding .mw-parser-output h1, body.bhc-branding .mw-parser-output h2, body.bhc-branding .mw-parser-output h3{

 font-family: var(--bhc-heading-font);
 letter-spacing: .02em;
 color: var(--bhc-maroon);

}

body.bhc-branding .mw-parser-output h1{

 font-size: 2.05rem;
 line-height: 1.15;
 margin: 0.25rem 0 0.75rem;
 font-weight: 700;

}

body.bhc-branding .mw-parser-output h2{

 font-size: 1.55rem;
 line-height: 1.2;
 margin: 1.6rem 0 0.6rem;
 border-bottom: 3px solid var(--bhc-sand);
 padding-bottom: .25rem;

}

body.bhc-branding .mw-parser-output h3{

 font-size: 1.25rem;
 line-height: 1.25;
 margin: 1.2rem 0 0.45rem;

}

body.bhc-branding .mw-parser-output h4{

 font-size: 1.1rem;
 line-height: 1.3;

}

/* Paragraph rhythm */ body.bhc-branding .mw-parser-output p{ margin: 0.75rem 0; } body.bhc-branding .mw-parser-output ul, body.bhc-branding .mw-parser-output ol{ margin: 0.6rem 0 0.9rem 1.25rem; } body.bhc-branding .mw-parser-output li{ margin: 0.2rem 0; }

/* Small areas */ body.bhc-branding #toc, body.bhc-branding .toc, body.bhc-branding .mw-normal-catlinks, body.bhc-branding .catlinks, body.bhc-branding .mw-editsection, body.bhc-branding .mw-editsection a, body.bhc-branding .mw-changeslist, body.bhc-branding .mw-footer{

 font-size: 0.95rem;

}

/* Optional accent class for wiki content */ body.bhc-branding .bhc-script{ font-family: var(--bhc-accent-font); }

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

  HEADER BAR (non-sticky; scrolls normally)
  ========================================================= */

body.bhc-branding .bhc-sitebar{

 position: relative;
 z-index: 9999;

 margin: 0;
 width: 100%;

 border-top: 5px solid var(--bhc-olive);
 border-bottom: 10px solid var(--bhc-sand);
 background: var(--bhc-teal);
 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: var(--bhc-body-font);

}

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-family: var(--bhc-heading-font);
 font-size: 18px;
 letter-spacing: 1px;

}

body.bhc-branding .bhc-strapline{

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

}

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

 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;
 white-space: nowrap;

}

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

  SEARCH: moved into the BHC header
  (We hide Vector search in Vector only; Timeless uses different markup)
  ========================================================= */

body.bhc-branding.skin-vector .vector-search-box, body.bhc-branding.skin-vector .vector-search-box-vue{

 display: none !important;

}

body.bhc-branding .bhc-search-slot{

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

}

body.bhc-branding .bhc-search-slot + .bhc-test-badge{ margin-left: 12px; }

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); }

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;

}

/* Search input: ensure text is visible on the semi-transparent light background */ body.bhc-branding .bhc-search-input{

 color: #fff !important;
 caret-color: #fff !important;
 -webkit-text-fill-color: #fff !important; /* Safari/Chrome autofill quirks */

}

/* If the input is getting a forced background from the skin, keep it readable */ body.bhc-branding .bhc-search-input{

 background: rgba(255,255,255,.12) !important;
 border-color: rgba(255,255,255,.45) !important;

}

/* When browser autofill kicks in, stop it turning the text dark/odd */ body.bhc-branding .bhc-search-input:-webkit-autofill, body.bhc-branding .bhc-search-input:-webkit-autofill:hover, body.bhc-branding .bhc-search-input:-webkit-autofill:focus{

 -webkit-text-fill-color: #fff !important;
 transition: background-color 9999s ease-in-out 0s; /* suppress yellow autofill */

}

/* Make sure the search input text is visible even if Timeless styles win */ body.bhc-branding .bhc-sitebar .bhc-search-input, body.bhc-branding .bhc-sitebar .bhc-search-input:focus{

 color: #111 !important;
 caret-color: #111 !important;
 -webkit-text-fill-color: #111 !important;
 background: #fff !important;

}

/* Suggestions dropdown: keep above everything and don’t get clipped */ body.bhc-branding .bhc-sitebar { overflow: visible; } body.bhc-branding .suggestions { z-index: 99999 !important; }

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

  FOOTER
  ========================================================= */

body.bhc-branding .bhc-footer{

 margin-top: 2.25rem;
 padding: 1.5rem 0;
 border-top: 6px solid var(--bhc-sand);
 background: #f6f6f6;
 color: #222;
 width: 100%;

}

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

 max-width: 1200px;
 margin: 0 auto;
 padding: 0 16px;
 font-family: var(--bhc-body-font);
 font-size: .95rem;
 line-height: 1.6;

}

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

  Hide default site logo (BHC logo lives in the custom header)
  Scoped to branded mode only
  ========================================================= */

body.bhc-branding .mw-logo, body.bhc-branding .mw-wiki-logo, body.bhc-branding #p-logo, body.bhc-branding .vector-site-logo, body.bhc-branding .vector-header-start{

 display: none !important;

}