MediaWiki:Bhcvectorbrand-css

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

  Bellingham Heritage Centre – Timeless skin branding (CSS-only)
  Applies ONLY when the Timeless skin is in use.
  ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@400;700&family=Satisfy&display=swap');

body.skin-timeless{

 /* Palette */
 --bhc-teal: rgb(130,156,149);
 --bhc-olive: rgb(165,174,121);
 --bhc-sand: rgb(228,186,149);

 /* Heritage text colour (per your site) */
 --bhc-maroon: rgb(93, 8, 58);

 --bhc-link: #005DB3;
 --bhc-text: #202020;

 /* Header now WHITE */
 --bhc-header-bg: #ffffff;
 --bhc-header-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;

 /* Readability */
 font-size: 18px;
 line-height: 1.65;

 overflow-x: hidden;

}

@media (max-width: 720px){

 body.skin-timeless{ font-size: 16.5px; }

}

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

  Global typography (content)
  --------------------------------------------------------- */

body.skin-timeless, body.skin-timeless .mw-body, body.skin-timeless .mw-parser-output{

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

}

body.skin-timeless a{ color: var(--bhc-link); } body.skin-timeless a:hover{ text-decoration: underline; }

body.skin-timeless .mw-parser-output h1, body.skin-timeless .mw-parser-output h2, body.skin-timeless .mw-parser-output h3{

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

}

body.skin-timeless .mw-parser-output h1{

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

}

body.skin-timeless .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.skin-timeless .mw-parser-output h3{

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

}

body.skin-timeless .mw-parser-output h4{

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

}

body.skin-timeless .mw-parser-output p{ margin: 0.75rem 0; }

body.skin-timeless .mw-parser-output ul, body.skin-timeless .mw-parser-output ol{ margin: 0.6rem 0 0.9rem 1.25rem; }

body.skin-timeless .mw-parser-output li{ margin: 0.2rem 0; }

body.skin-timeless #toc, body.skin-timeless .toc, body.skin-timeless .mw-normal-catlinks, body.skin-timeless .catlinks, body.skin-timeless .mw-editsection, body.skin-timeless .mw-editsection a, body.skin-timeless .mw-changeslist, body.skin-timeless .mw-footer{

 font-size: 0.95rem;

}

/* Optional accent class you can use in wiki content */ body.skin-timeless .bhc-script{ font-family: var(--bhc-accent-font); }

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

  HEADER: Timeless header full-width + WHITE background + bars
  ========================================================= */

body.skin-timeless #mw-header-container{

 background: var(--bhc-header-bg) !important;      /* white */
 border-top: 5px solid var(--bhc-olive) !important;
 border-bottom: 10px solid var(--bhc-sand) !important;

}

/* Make all header text dark by default */ body.skin-timeless #mw-header, body.skin-timeless #mw-header a{

 color: var(--bhc-header-text) !important;

}

/* Make header a flex row */ body.skin-timeless #mw-header{

 position: relative;
 display: flex;
 align-items: flex-start;
 gap: 16px;

 /* a bit more vertical room for the larger logo + strapline */
 padding-top: 14px;
 padding-bottom: 34px;

}

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

  Layout widths: make logo/title block wider, search narrower
  --------------------------------------------------------- */

body.skin-timeless #p-logo-text{

 flex: 1 1 auto;
 min-width: 640px;        /* ~50% wider than before */

}

body.skin-timeless #p-search{

 flex: 0 0 auto;
 width: 360px;            /* slightly narrower container */
 max-width: 34vw;
 margin-left: auto;

}

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

  SITE TITLE + LOGO at left (logo 50% bigger)
  Timeless uses: #p-logo-text a#p-banner
  --------------------------------------------------------- */

body.skin-timeless #p-logo-text{

 position: relative;

}

/* Bigger “logo + title” line */ body.skin-timeless #p-logo-text #p-banner{

 display: inline-block;
 text-decoration: none;

 /* Title styling per your site */
 font-family: var(--bhc-heading-font) !important;
 font-weight: 700;
 font-size: 40px;                 /* requested */
 letter-spacing: .01em;
 color: var(--bhc-maroon) !important;

 /* Logo (50% bigger than 56px -> 84px) */
 background-image: url(/resources/assets/BHClogo.jpg);
 background-repeat: no-repeat;
 background-position: left center;
 background-size: 84px 84px;

 padding-left: 104px;             /* 84 + ~20 gap */
 min-height: 84px;
 line-height: 84px;

}

/* If Timeless forces uppercase / long styles, relax wrapping */ body.skin-timeless #p-logo-text #p-banner.long{

 white-space: normal;

}

/* Hide Timeless sidebar logo so we don’t double-brand */ body.skin-timeless #mw-site-navigation #p-logo{

 display: none !important;

}

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

  STRAPLINE (Option A): reuse #siteSub, position in header
  --------------------------------------------------------- */

body.skin-timeless #siteSub{

 position: absolute;

 /* Align under title start (104px = padding-left above) */
 left: 104px;
 top: 86px;

 margin: 0;
 padding: 0;

 font-family: var(--bhc-body-font);
 font-size: 18px;
 line-height: 1.25;
 font-style: normal;
 color: rgba(32,32,32,.78) !important;

 z-index: 2;
 pointer-events: none;

}

/* Prevent #siteSub reserving visible space in content area */ body.skin-timeless #bodyContentOuter #siteSub{

 height: 0;
 overflow: visible;

}

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

  SEARCH: make icon OUTSIDE the input (to the right)
  Timeless search is usually: #searchform > #simpleSearch > input + buttons
  ========================================================= */

/* Ensure the search area is positioned for the button */ body.skin-timeless #p-search #simpleSearch{

 position: relative;

}

/* Input: remove “in-field icon” spacing; keep clean white box */ body.skin-timeless #p-search input[type="search"], body.skin-timeless #p-search #searchInput{

 width: min(280px, 26vw);
 max-width: 100%;

 padding: .45rem .8rem;     /* no extra right padding now */
 border-radius: 10px;

 background: #fff !important;
 color: #202020 !important;
 caret-color: #202020 !important;

 border: 1px solid rgba(0,0,0,.18) !important;
 box-shadow: none !important;

 -webkit-appearance: none;
 appearance: none;

 float: right;

}

/* Placeholder */ body.skin-timeless #p-search input[type="search"]::placeholder, body.skin-timeless #p-search #searchInput::placeholder{

 color: rgba(0,0,0,.55) !important;

}

/* Hide any built-in WebKit search decorations */ body.skin-timeless #p-search input[type="search"]::-webkit-search-decoration, body.skin-timeless #p-search input[type="search"]::-webkit-search-cancel-button, body.skin-timeless #p-search input[type="search"]::-webkit-search-results-button, body.skin-timeless #p-search input[type="search"]::-webkit-search-results-decoration{

 -webkit-appearance: none;
 display: none;

}

/* Show ONE compact icon button to the right of the input (outside it) */ body.skin-timeless #p-search input#mw-searchButton, body.skin-timeless #p-search input#searchButton{

 position: absolute;
 top: 50%;
 right: 6px;
 transform: translateY(-50%);

 width: 38px;
 height: 38px;

 padding: 0;
 margin: 0;

 border-radius: 10px;
 border: 1px solid rgba(0,0,0,.18);
 background: #fff;

 cursor: pointer;

 /* hide any text on the button */
 text-indent: -9999px;
 overflow: hidden;

 /* simple inline SVG magnifier */
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M10 18a8 8 0 1 1 5.293-14.293A8 8 0 0 1 10 18m0-2a6 6 0 1 0-6-6a6 6 0 0 0 6 6m9.707 6.293l-5.1-5.1l1.414-1.414l5.1 5.1z'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: center;

}

/* If BOTH buttons exist, hide the “Go” one and keep “Search” */ body.skin-timeless #p-search input#searchButton{

 display: none !important;

}

/* Give the input room so the external button doesn't overlap it */ body.skin-timeless #p-search input[type="search"], body.skin-timeless #p-search #searchInput{

 margin-right: 46px; /* makes space for the icon button */

}

/* Label styling */ body.skin-timeless #p-search label{

 color: rgba(32,32,32,.75) !important;

}

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

  Personal dropdown: ensure text is black
  ========================================================= */

body.skin-timeless #personal, body.skin-timeless #personal a, body.skin-timeless #personal h2, body.skin-timeless #personal h3, body.skin-timeless #personal .mw-portlet, body.skin-timeless #personal .mw-portlet *{

 color: #202020 !important;

}

/* Dropdown panel background */ body.skin-timeless #personal .dropdown, body.skin-timeless #personal .mw-portlet-body{

 background: #fff !important;

}

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

  FOOTER: keep full width, adopt palette
  ========================================================= */

body.skin-timeless #mw-footer-container{

 border-top: 6px solid var(--bhc-sand);
 background: #f6f6f6;

}

body.skin-timeless #mw-footer{

 font-family: var(--bhc-body-font);
 color: #222;

}

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

  Spacing: push content down a bit further under the header
  ========================================================= */

body.skin-timeless #mw-content-container{

 padding-top: 1.9rem;   /* increased */

}