MediaWiki:Bhcvectorbrand-css

/* BHC Vector Brand - presentation layer

  Scoped to body.bhc-branding so it only affects the branded preview.

• /

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

/* Current behaviour: sticky header (position:fixed) */ body.bhc-branding{padding-top:var(--bhc-bar-height);}

/* HEADER BAR */ body.bhc-branding .bhc-sitebar{

 position:fixed;
 top:0;left:0;right:0;
 z-index:9999;
 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;

}

/* Vector offsets for sticky header */ body.bhc-branding .vector-sticky-header, body.bhc-branding .vector-page-toolbar{

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

}

body.bhc-branding .vector-header-container, body.bhc-branding #mw-head{

 margin-top:var(--bhc-bar-height);

}

/* 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;

}

/* Your current “short page” tweak */ body.bhc-branding { overflow-x: hidden; } body.bhc-branding .mw-page-container {

 min-height: calc(100vh - var(--bhc-bar-height));

}