BorderConnect Wiki

MediaWiki:Common.css: Difference between revisions

← Older editNewer edit →
No edit summary
No edit summary
Line 57: Line 57:
     color: rgba(255,255,255,.85);
     color: rgba(255,255,255,.85);
     margin-top: 10px;
     margin-top: 10px;
}
/* ============================================================
  HERO polish: spacing + hierarchy
  ============================================================ */
.bc-hero {
    padding: 28px 28px 22px 28px; /* more breathing room */
}
.bc-hero h1 {
    font-size: 34px;
    line-height: 1.12;
    margin-bottom: 10px;
}
.bc-hero p {
    font-size: 16px;
    line-height: 1.55;
    margin-top: 2px;
    margin-bottom: 14px;
    max-width: 920px;
}
.bc-hero .bc-meta {
    margin-top: 10px;
    margin-bottom: 14px;
}
}


Line 63: Line 90:
   ============================================================ */
   ============================================================ */


/* Force all text inside the hero to be readable */
.bc-hero,
.bc-hero,
.bc-hero * {
.bc-hero * {
Line 69: Line 95:
}
}


/* Headline should be fully white */
.bc-hero h1,
.bc-hero h1,
.bc-hero h2,
.bc-hero h2,
Line 76: Line 101:
}
}


/* Make all links in the hero readable (no default purple/blue) */
.bc-hero a,
.bc-hero a,
.bc-hero a:visited {
.bc-hero a:visited {
Line 85: Line 109:
}
}


/* Hover/focus: slightly brighter so it feels interactive */
.bc-hero a:hover,
.bc-hero a:hover,
.bc-hero a:focus {
.bc-hero a:focus {
Line 92: Line 115:
}
}


/* If you have muted meta text in hero, keep it softer but still readable */
.bc-hero .bc-meta,
.bc-hero .bc-meta,
.bc-hero .bc-kicker {
.bc-hero .bc-kicker {
     color: rgba(255,255,255,.80) !important;
     color: rgba(255,255,255,.80) !important;
}
}


/* ============================================================
/* ============================================================
Line 106: Line 127:
     display: flex;
     display: flex;
     flex-wrap: wrap;
     flex-wrap: wrap;
     gap: 8px;
     gap: 10px;
     margin-top: 10px;
     margin-top: 10px;
}
}


.bc-pill {
.bc-pill {
     padding: 6px 10px;
     padding: 7px 12px;
     border-radius: 999px;
     border-radius: 999px;
     border: 1px solid rgba(255,255,255,.18);
     border: 1px solid rgba(255,255,255,.18);
     background: rgba(255,255,255,.10);
     background: rgba(255,255,255,.12);
     font-size: 13px;
     font-size: 13px;
     white-space: nowrap;
     white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
}


Line 125: Line 147:


.bc-pill:hover {
.bc-pill:hover {
     background: rgba(255,255,255,.16);
     background: rgba(255,255,255,.18);
     border-color: rgba(255,255,255,.22);
     border-color: rgba(255,255,255,.26);
}
}


Line 163: Line 185:
}
}


/* Typography inside cards */
.bc-card h2 {
.bc-card h2 {
     margin: 0 0 10px 0;
     margin: 0 0 10px 0;
Line 232: Line 253:
}
}


/* ACI – Blue */
.bc-accent-aci {
.bc-accent-aci {
     border-left: 6px solid #2563eb;
     border-left: 6px solid #2563eb;
     background: linear-gradient(
     background: linear-gradient(90deg, rgba(37,99,235,.04), rgba(255,255,255,0) 35%);
        90deg,
        rgba(37, 99, 235, 0.04),
        rgba(255,255,255,0) 35%
    );
}
}


/* ACE – Red */
.bc-accent-ace {
.bc-accent-ace {
     border-left: 6px solid #dc2626;
     border-left: 6px solid #dc2626;
     background: linear-gradient(
     background: linear-gradient(90deg, rgba(220,38,38,.04), rgba(255,255,255,0) 35%);
        90deg,
        rgba(220, 38, 38, 0.04),
        rgba(255,255,255,0) 35%
    );
}
}


/* In-Bond – Purple */
.bc-accent-ib {
.bc-accent-ib {
     border-left: 6px solid #7c3aed;
     border-left: 6px solid #7c3aed;
     background: linear-gradient(
     background: linear-gradient(90deg, rgba(124,58,237,.04), rgba(255,255,255,0) 35%);
        90deg,
        rgba(124, 58, 237, 0.04),
        rgba(255,255,255,0) 35%
    );
}
}


/* Onboarding – Amber */
.bc-accent-onboard {
.bc-accent-onboard {
     border-left: 6px solid #f59e0b;
     border-left: 6px solid #f59e0b;
     background: linear-gradient(
     background: linear-gradient(90deg, rgba(245,158,11,.05), rgba(255,255,255,0) 35%);
        90deg,
        rgba(245, 158, 11, 0.05),
        rgba(255,255,255,0) 35%
    );
}
}


/* Reference – Slate */
.bc-accent-ref {
.bc-accent-ref {
     border-left: 6px solid #334155;
     border-left: 6px solid #334155;
     background: linear-gradient(
     background: linear-gradient(90deg, rgba(51,65,85,.035), rgba(255,255,255,0) 35%);
        90deg,
        rgba(51, 65, 85, 0.035),
        rgba(255,255,255,0) 35%
    );
}
}


/* Soft / General – Teal */
.bc-accent-soft {
.bc-accent-soft {
     border-left: 6px solid #0f766e;
     border-left: 6px solid #0f766e;
     background: linear-gradient(
     background: linear-gradient(90deg, rgba(15,118,110,.04), rgba(255,255,255,0) 35%);
        90deg,
        rgba(15, 118, 110, 0.04),
        rgba(255,255,255,0) 35%
    );
}
}


Line 296: Line 287:
   ============================================================ */
   ============================================================ */


/* Hide site name text */
.mw-logo-wordmark,
.mw-logo-wordmark,
.mw-logo-tagline {
.mw-logo-tagline {
Line 302: Line 292:
}
}


/* Disable logo click */
.mw-logo a,
.mw-logo a,
.mw-logo a * {
.mw-logo a * {
Line 309: Line 298:
}
}


/* Keep header bar normal flow */
.vector-header {
.vector-header {
     background: #fff;
     background: #fff;
Line 317: Line 305:
}
}


/* Constrain header content to same width as layout */
.vector-header-container {
.vector-header-container {
     max-width: var(--width-layout) !important;
     max-width: var(--width-layout) !important;
Line 326: Line 313:
}
}


/* Tight header height */
.mw-header {
.mw-header {
     height: 90px;
     height: 90px;
Line 334: Line 320:
}
}


/* Remove min-height inflation */
.mw-header,
.mw-header,
.vector-header,
.vector-header,
Line 341: Line 326:
}
}


/* Center logo vertically */
.mw-logo {
.mw-logo {
     display: flex;
     display: flex;
Line 348: Line 332:
}
}


/* Large logo */
.mw-logo img {
.mw-logo img {
     height: 135px !important;
     height: 135px !important;
Line 355: Line 338:
}
}


/* Legacy Vector fallback */
#p-logo img {
#p-logo img {
     height: 135px !important;
     height: 135px !important;
Line 372: Line 354:


html.skin-theme-clientpref-night .bc-card[class*="bc-accent-"] {
html.skin-theme-clientpref-night .bc-card[class*="bc-accent-"] {
     background: linear-gradient(
     background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(0,0,0,0) 35%);
        90deg,
        rgba(255,255,255,0.04),
        rgba(0,0,0,0) 35%
    );
}
}


Line 390: Line 368:
   ============================================================ */
   ============================================================ */


/* Kill empty paragraphs and lone <br> before the hero */
.mw-parser-output > p:empty,
.mw-parser-output > p:empty,
.mw-parser-output > p > br:only-child {
.mw-parser-output > p > br:only-child {
Line 396: Line 373:
}
}


/* Ensure hero sits flush */
.mw-parser-output > .bc-hero:first-child {
.mw-parser-output > .bc-hero:first-child {
     margin-top: 0 !important;
     margin-top: 0 !important;
}
}
Retrieved from "https://wiki.borderconnect.com/index.php?title=MediaWiki:Common.css"