MediaWiki:Common.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* --- BORDERCONNECT MODERN WIKI THEME (TEAL BRANDING) --- */
:root {
--bc-blue: #266065; /* BRAND COLOR: Teal */
--bc-blue-dark: #163a3d; /* DARKER SHADE: Deep Green/Slate */
--bc-accent: #eef5f6; /* Light background */
/* ... keep your other variables the same ... */
--bc-text: #2c3e50;
--bc-text-muted: #546e7a;
--bc-bg-page: #f4f7f9;
--bc-radius: 8px;
--bc-shadow: 0 4px 12px rgba(0,0,0,0.08);
--bc-shadow-hover: 0 10px 20px rgba(0,0,0,0.12);
}
/* Global Wrapper - Creates the "Surface" for cards to sit on */
.bc-wrap {
max-width: 1240px;
margin: 0 auto;
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
color: var(--bc-text);
line-height: 1.6;
background-color: var(--bc-bg-page); /* The light gray background you asked for */
padding: 30px;
border-radius: var(--bc-radius);
}
/* --- HERO SECTION --- */
.bc-hero {
/* The Gradient: Starts with Brand Color, flows to Dark Slate */
background: linear-gradient(120deg, var(--bc-blue) 0%, var(--bc-blue-dark) 100%);
color: white;
padding: 60px 30px;
text-align: center;
border-radius: var(--bc-radius);
margin-bottom: 40px;
/* Deep shadow + bottom border for 3D effect */
box-shadow: 0 10px 25px rgba(38, 96, 101, 0.25);
border-bottom: 6px solid rgba(0,0,0,0.15);
}
.bc-hero h1 {
font-size: 2.5rem;
font-weight: 700;
margin: 0 0 10px 0;
color: white;
border: none;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.bc-hero p {
font-size: 1.25rem;
opacity: 0.95;
margin-bottom: 30px;
font-weight: 400;
}
/* Meta Data (Article & Image Counts) */
.bc-hero .bc-meta {
font-size: 0.95rem;
opacity: 0.9;
margin-top: 25px;
color: #e0f2f1; /* Soft light teal for normal text */
}
/* MAKE LINKS VISIBLE */
.bc-hero .bc-meta a {
color: #ffffff !important; /* Pure white */
font-weight: 700; /* Bold */
text-decoration: underline;
text-underline-offset: 3px; /* Cleaner spacing for underline */
}
.bc-hero .bc-meta a:hover {
text-decoration: none;
opacity: 0.8;
}
/* --- HERO PILLS (Popular Articles) --- */
.bc-hero-pills {
display: flex;
flex-wrap: wrap;
/* Increased gap for better vertical and horizontal spacing */
gap: 16px;
justify-content: center;
max-width: 950px;
margin: 35px auto 0 auto; /* More space above the pill section */
line-height: 1.8; /* Prevents vertical crushing */
}
.bc-hero-pill {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3); /* Slightly brighter border */
color: white !important;
padding: 8px 20px; /* Slightly larger padding for a cleaner look */
border-radius: 50px; /* Fully rounded pill shape */
font-size: 0.95rem;
font-weight: 600;
text-decoration: none !important;
transition: all 0.2s ease;
backdrop-filter: blur(4px);
white-space: nowrap; /* Prevents text inside pills from wrapping weirdly */
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.bc-hero-pill:hover {
background: white;
color: #266065 !important;
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0,0,0,0.2);
border-color: white;
}
/* Hide accidental breaks in pill container */
.bc-hero-pills br {
display: none !important;
}
/* --- SEARCH BOX & BUTTON STYLING --- */
.bc-search-container {
max-width: 650px;
margin: 0 auto 10px auto;
display: flex; /* Aligns input and button side-by-side */
gap: 10px; /* Space between input and button */
justify-content: center;
align-items: center; /* Ensures vertical alignment */
}
/* The Search Input Field */
.bc-search-container input.mw-ui-input {
padding: 16px 24px;
border-radius: 50px;
border: 2px solid rgba(255,255,255,0.2);
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
font-size: 1.1rem;
width: 100%;
flex: 1; /* Takes up remaining space */
}
/* The Search Button - FORCE OVERRIDE */
/* Targets every possible MediaWiki button variation */
.bc-search-container .mw-ui-button,
.bc-search-container .mw-ui-progressive,
.bc-search-container input[type="submit"],
.bc-search-container button {
background-color: #266065 !important; /* BRAND COLOR */
color: white !important;
border: none !important;
border-radius: 50px !important; /* Matches the round input */
padding: 0 30px !important; /* Wider click area */
font-weight: 700 !important;
font-size: 1rem !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
text-shadow: none !important;
height: auto !important; /* Fixes rigid heights */
min-height: 54px !important; /* Matches input height */
}
/* Search Button Hover State */
.bc-search-container .mw-ui-button:hover,
.bc-search-container .mw-ui-progressive:hover,
.bc-search-container input[type="submit"]:hover,
.bc-search-container button:hover {
background-color: #163a3d !important; /* Darker Brand Color */
transform: translateY(-2px); /* Slight lift effect */
box-shadow: 0 6px 15px rgba(0,0,0,0.3) !important;
}
/* --- GRID SYSTEM --- */
.bc-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
margin-bottom: 30px;
}
.bc-2col {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
gap: 30px;
margin-bottom: 30px;
}
/* --- CARDS --- */
.bc-card {
background: white;
border: none;
border-top: 5px solid var(--bc-blue);
border-radius: var(--bc-radius);
padding: 30px;
height: 100%;
box-sizing: border-box;
box-shadow: var(--bc-shadow);
/* No transition needed since we removed the hover effect */
}
/* REMOVED: .bc-card:hover block so main cards stay static */
.bc-card h2 {
margin-top: 0;
font-size: 1.4rem;
font-weight: 700;
color: var(--bc-blue);
border-bottom: 2px solid var(--bc-accent);
padding-bottom: 12px;
margin-bottom: 20px;
}
.bc-subtle {
color: var(--bc-text-muted);
font-size: 1rem;
margin-bottom: 20px;
line-height: 1.5;
}
/* --- BUTTONS / PILLS (New User & Common Tasks) --- */
.bc-btngrid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.bc-btn {
display: block;
/* Light Teal Background (Tint of #266065) */
background: #eef6f7;
padding: 14px 18px;
border-radius: 6px;
text-decoration: none;
/* Dark Teal Text for Contrast */
color: #1b4d52;
font-weight: 600;
transition: all 0.2s ease;
border: 1px solid #dae8ea; /* Subtle border matching the tint */
border-left: 5px solid #266065; /* Strong Brand Accent */
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.bc-btn:hover {
/* Subtle darken on hover - No jarring color flip */
background: #e0eeef;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.08);
color: #0f2e32; /* Slightly darker text on hover */
border-left-color: #163a3d;
}
.bc-btn strong {
display: block;
color: #266065; /* Brand color for the header text */
font-size: 0.85rem;
margin-bottom: 3px;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 1;
}
.bc-btn span {
font-size: 1.05rem;
color: #2c3e50; /* Dark Slate for the main link text */
}
/* --- ALERTS & CALLOUTS --- */
/* "Did You Know" boxes */
.bc-did-you-know {
background: #fff8e1;
border-left: 5px solid #ffc107;
padding: 20px;
margin-top: 25px;
border-radius: 4px;
font-size: 0.95rem;
box-shadow: inset 0 0 10px rgba(0,0,0,0.02);
}
.bc-did-you-know h3 {
margin-top: 0;
color: #b78a02;
font-size: 0.9rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
}
/* Clean Lists */
.bc-cleanlist ul {
list-style: none;
margin: 0;
padding: 0;
}
.bc-cleanlist li {
padding: 10px 0;
border-bottom: 1px solid #f0f0f0;
font-size: 1.05rem;
}
.bc-cleanlist li:last-child {
border-bottom: none;
}
/* Links inside lists */
.bc-cleanlist a {
color: var(--bc-blue);
font-weight: 500;
text-decoration: none;
}
.bc-cleanlist a:hover {
text-decoration: underline;
color: var(--bc-blue-dark);
}
/* --- LINK GRID (FOOTER) --- */
.bc-linkgrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
}
.bc-linktile a {
display: flex;
align-items: center;
padding: 20px;
background: #ffffff;
border: 1px solid #eee;
border-radius: var(--bc-radius);
text-decoration: none;
color: var(--bc-text);
transition: all 0.2s;
box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}
.bc-linktile a:hover {
background: white;
border-color: var(--bc-blue);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.bc-linkicon {
font-size: 28px;
margin-right: 15px;
}
.bc-linktext {
display: flex;
flex-direction: column;
}
.bc-linktitle {
font-weight: 700;
color: var(--bc-blue);
font-size: 1.1rem;
}
.bc-linkdesc {
font-size: 0.85rem;
color: var(--bc-text-muted);
margin-top: 4px;
}
/* --- VECTOR SKIN OVERRIDES (Logo/Header fixes) --- */
.mw-logo-wordmark,
.mw-logo-tagline {
display: none !important;
}
.mw-logo a,
.mw-logo a * {
pointer-events: none !important;
cursor: default !important;
}
.vector-header {
background: #fff;
box-sizing: border-box !important;
}
.vector-header-container {
max-width: var(--width-layout) !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
padding-left: var(--padding-inline-page-container, 16px) !important;
padding-right: var(--padding-inline-page-container, 16px) !important;
box-sizing: border-box !important;
}
.mw-header {
height: 90px;
padding-top: 0 !important;
padding-bottom: 0 !important;
overflow: visible !important;
}
.mw-header,
.vector-header,
.vector-header-container {
min-height: unset !important;
}
.vector-header-start {
margin-left: 0 !important;
padding-left: 0 !important;
}
#mw-panel-button,
.vector-main-menu-dropdown {
margin-left: 0 !important;
}
.mw-logo {
display: flex;
align-items: center;
height: 100%;
}
.mw-logo img,
#p-logo img {
height: 135px !important;
width: auto;
max-height: none;
}
/* UPDATED: Force hide empty paragraphs, breaks, and MW empty elements */
.mw-parser-output > p:empty,
.mw-parser-output > p > br:only-child,
.mw-parser-output > p.mw-empty-elt {
display: none !important;
margin-bottom: 0 !important;
height: 0 !important;
}
/* UPDATED: Changed :first-child to :first-of-type */
/* This forces the Hero to pull to the top even if an invisible <p> is sitting above it */
.mw-parser-output > .bc-hero:first-of-type {
margin-top: 0 !important;
}
/* ============================================================
--- INFOBOX STYLING (Wikipedia Style + Teal Brand) ---
============================================================ */
/* 1. Base Infobox Container */
.infobox {
border: 1px solid #a2a9b1;
background-color: #f8f9fa;
color: #202122;
margin: 0.5em 0 0.5em 1em;
padding: 0.4em;
float: right;
clear: right;
font-size: 90%;
line-height: 1.5em;
width: 24em; /* Standard width */
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
/* 2. Captions (The Title "BorderConnect Inc.") */
.infobox caption {
font-size: 1.3em;
font-weight: bold;
padding: 0.5em;
text-align: center;
color: #266065; /* Your Brand Teal */
}
/* 3. Table Cells */
.infobox th,
.infobox td {
vertical-align: top;
text-align: left;
padding: 0.5em;
border-bottom: 1px solid #eaecf0; /* Subtle separator lines */
}
/* Remove bottom border from last row */
.infobox tr:last-child th,
.infobox tr:last-child td {
border-bottom: none;
}
/* 4. Headers (Left Column: "Type", "Industry", etc.) */
.infobox th {
background-color: #eef6f7; /* Your Light Brand Tint */
color: #1b4d52; /* Dark Teal Text */
font-weight: bold;
width: 35%; /* Consistent width */
border-radius: 4px 0 0 4px; /* Rounded left corners */
}
/* 5. Images */
.infobox img {
max-width: 100%;
height: auto;
border-radius: 4px;
display: block;
margin: 0 auto;
}
/* ============================================================
--- DARK MODE "HARD OVERRIDE" ---
This forces dark colors directly onto the elements.
============================================================ */
/* 1. FORCE VARIABLES (Just in case) */
html.skin-theme-clientpref-night {
--bc-blue: #4db6ac !important;
--bc-text: #e0e0e0 !important;
}
/* 2. MAIN PAGE BACKGROUND */
html.skin-theme-clientpref-night .bc-wrap {
background-color: #121212 !important; /* Pure Black Background */
color: #e0e0e0 !important;
border-color: #333 !important;
}
/* 3. CARD BACKGROUNDS */
html.skin-theme-clientpref-night .bc-card {
background-color: #1e1e1e !important; /* Dark Gray */
border: 1px solid #333 !important;
border-top: 5px solid #4db6ac !important; /* Bright Teal Top */
box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
color: #e0e0e0 !important;
}
/* 4. HEADERS INSIDE CARDS */
html.skin-theme-clientpref-night .bc-card h2 {
color: #4db6ac !important; /* Bright Teal */
border-bottom-color: #444 !important;
}
/* 5. BUTTONS (New User & Common Tasks) */
html.skin-theme-clientpref-night .bc-btn {
background-color: #263238 !important; /* Dark Blue-Gray */
border: 1px solid #37474f !important;
color: #e0f2f1 !important; /* Light Text */
}
html.skin-theme-clientpref-night .bc-btn:hover {
background-color: #37474f !important;
border-left-color: #4db6ac !important;
transform: translateY(-2px);
}
html.skin-theme-clientpref-night .bc-btn strong {
color: #4db6ac !important; /* Teal Header Text */
}
html.skin-theme-clientpref-night .bc-btn span {
color: #b0bec5 !important; /* Muted Description Text */
}
/* 6. HERO SECTION UPDATES (Darker & Deeper) */
html.skin-theme-clientpref-night .bc-hero {
/* Deep "Midnight" Gradient: Very Dark Slate -> Deep Teal */
background: linear-gradient(135deg, #0a181a 0%, #163a3d 100%) !important;
/* Strong Black Glow instead of light shadow */
box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
border-bottom: 6px solid rgba(0,0,0,0.5) !important;
}
html.skin-theme-clientpref-night .bc-hero h1,
html.skin-theme-clientpref-night .bc-hero p {
color: #e0f2f1 !important;
text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important; /* Stronger text shadow */
}
/* Fix the Search Input background */
html.skin-theme-clientpref-night .bc-search-container input.mw-ui-input {
background-color: #2c2c2c !important;
color: white !important;
border-color: #444 !important;
}
/* Fix the Pills (Glass effect lighter for dark mode) */
html.skin-theme-clientpref-night .bc-hero-pill {
background: rgba(255,255,255,0.1) !important;
border-color: rgba(255,255,255,0.2) !important;
color: #e0f2f1 !important;
}
html.skin-theme-clientpref-night .bc-hero-pill:hover {
background: #4db6ac !important;
color: #121212 !important; /* Black text on Teal button */
}
/* 7. FOOTER LINKS */
html.skin-theme-clientpref-night .bc-linktile a {
background-color: #1e1e1e !important;
border-color: #333 !important;
color: #e0e0e0 !important;
}
html.skin-theme-clientpref-night .bc-linktile a:hover {
background-color: #2d2d2d !important;
border-color: #4db6ac !important;
}
html.skin-theme-clientpref-night .bc-linktitle {
color: #4db6ac !important;
}
html.skin-theme-clientpref-night .bc-linkdesc {
color: #90a4ae !important;
}
/* 8. LIST ITEMS */
html.skin-theme-clientpref-night .bc-cleanlist li {
border-bottom-color: #333 !important;
}
html.skin-theme-clientpref-night .bc-cleanlist a {
color: #80cbc4 !important; /* Lighter Teal for links */
}
/* 9. PRO TIPS / DID YOU KNOW (Fixed Yellow -> Dark) */
html.skin-theme-clientpref-night .bc-did-you-know {
background-color: #1f1b14 !important; /* Very Dark Brown/Grey */
border-left: 5px solid #ffb300 !important; /* Keep Gold accent */
border: 1px solid #3e2723 !important;
color: #cfd8dc !important; /* Light Grey Text */
box-shadow: none !important;
}
html.skin-theme-clientpref-night .bc-did-you-know h3 {
color: #ffca28 !important; /* Bright Gold Header */
text-shadow: none !important;
}
html.skin-theme-clientpref-night .infobox {
background-color: #1e1e1e !important;
border-color: #444 !important;
color: #e0e0e0 !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
}
html.skin-theme-clientpref-night .infobox caption {
color: #4db6ac !important; /* Bright Teal Title */
}
html.skin-theme-clientpref-night .infobox th {
background-color: #263238 !important; /* Dark Slate Header Bg */
color: #80cbc4 !important; /* Light Teal Header Text */
border-bottom-color: #444 !important;
}
html.skin-theme-clientpref-night .infobox td {
color: #cfd8dc !important;
border-bottom-color: #444 !important;
}
/* ============================================================
--- SEARCH SUGGESTIONS DROPDOWN STYLING ---
Styles the "preview box" that appears when typing.
============================================================ */
/* 1. Base Dropdown Style (Light Mode) */
.suggestions {
background-color: white !important;
border: 1px solid #dcdcdc !important;
box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
border-radius: 0 0 20px 20px !important; /* Matches round search bar */
overflow: hidden !important;
z-index: 9999 !important; /* Ensure it sits on top of everything */
margin-top: 5px !important; /* Small gap below the bar */
/* REMOVED: left: auto / width: auto so JS can align it correctly */
min-width: 400px !important; /* Prevents it from being too skinny */
}
.suggestions-results {
border: none !important;
padding: 0 !important;
}
.suggestions-result {
color: #2c3e50 !important;
padding: 12px 20px !important;
font-size: 15px !important;
cursor: pointer;
line-height: 1.4;
}
/* Hover State (When user mouses over a suggestion) */
.suggestions-result-current,
.suggestions-result:hover {
background-color: #eef6f7 !important; /* Light Teal Tint */
color: #266065 !important; /* Brand Teal Text */
font-weight: 600 !important;
}
/* The "containing..." text at the bottom */
.suggestions-special {
background-color: #f8f9fa !important;
border-top: 1px solid #eee !important;
padding: 10px 20px !important;
color: #005696 !important;
font-size: 0.9em !important;
}
.suggestions-special:hover {
background-color: #eef6f7 !important;
}
/* 2. DARK MODE OVERRIDES */
html.skin-theme-clientpref-night .suggestions {
background-color: #2c2c2c !important; /* Dark Grey Bg */
border: 1px solid #444 !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
}
html.skin-theme-clientpref-night .suggestions-result {
color: #e0e0e0 !important;
}
/* Dark Mode Hover */
html.skin-theme-clientpref-night .suggestions-result-current,
html.skin-theme-clientpref-night .suggestions-result:hover {
background-color: #266065 !important; /* Brand Teal Highlight */
color: white !important;
}
html.skin-theme-clientpref-night .suggestions-special {
background-color: #1e1e1e !important;
border-top: 1px solid #333 !important;
color: #4db6ac !important; /* Bright Teal Text */
}
html.skin-theme-clientpref-night .suggestions-special:hover {
background-color: #37474f !important;
}
/* 3. HIGHLIGHT MATCHED TEXT */
/* This targets the bold text that matches what you typed */
.suggestions-result .special-query {
font-weight: bold !important;
color: #000 !important;
}
html.skin-theme-clientpref-night .suggestions-result .special-query {
color: #fff !important;
text-shadow: 0 0 10px rgba(255,255,255,0.2);
}
/* ============================================================
--- MOBILE OPTIMIZATIONS (FULL WIDTH & TRANSPARENT BG) ---
Fixes layout for phones & tablets (max-width: 768px)
============================================================ */
@media screen and (max-width: 768px) {
/* 1. Global Wrapper: Full Bleed + Transparent Background */
.bc-wrap {
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
border-radius: 0 !important;
margin: 0 !important;
border: none !important;
/* REMOVE BACKGROUND & SHADOW ON MOBILE */
background: transparent !important;
box-shadow: none !important;
}
/* 2. Fix the Grids (Stack vertically) */
.bc-grid,
.bc-2col,
.bc-btngrid,
.bc-linkgrid {
display: flex !important;
flex-direction: column !important;
gap: 15px !important;
}
/* 3. Hero Section: Full width & Compact */
.bc-hero {
padding: 40px 15px !important;
text-align: center !important;
border-radius: 0 !important;
margin-bottom: 20px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.bc-hero h1 {
font-size: 1.8rem !important;
line-height: 1.2 !important;
}
.bc-hero p {
font-size: 1rem !important;
margin-bottom: 20px !important;
}
/* 4. Search Bar Fixes */
.bc-search-container {
width: 100% !important;
padding: 0 10px !important;
box-sizing: border-box !important;
}
#heroSearchInput {
padding: 12px 90px 12px 20px !important;
font-size: 14px !important;
width: 100% !important;
}
.bc-search-container button {
padding: 0 15px !important;
font-size: 0.85rem !important;
right: 14px !important;
top: 4px !important;
bottom: 4px !important;
min-height: unset !important;
}
/* 5. Suggestions Dropdown */
.suggestions {
min-width: unset !important;
width: 95% !important;
left: 2.5% !important;
right: auto !important;
}
/* 6. Cards: Full Bleed Style */
.bc-card {
padding: 25px 20px !important;
border-radius: 0 !important;
border-left: none !important;
border-right: none !important;
/* Add a faint border to separate cards since wrapper bg is gone */
border-bottom: 1px solid rgba(0,0,0,0.05) !important;
box-shadow: none !important;
margin-bottom: 0 !important;
}
/* Remove bottom border from the very last card to look clean */
.bc-card:last-child {
border-bottom: none !important;
}
/* 7. Pills (Tighten spacing) */
.bc-hero-pills {
gap: 8px !important;
padding: 0 10px !important;
}
.bc-hero-pill {
font-size: 0.85rem !important;
padding: 6px 14px !important;
}
/* 8. Fix Video Embeds */
.embedvideo,
.mw-parser-output iframe,
.mw-parser-output object,
.mw-parser-output .center {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
}
.embedvideo .thumbinner,
.mw-parser-output .thumbinner {
width: 100% !important;
}
}
/* --- REMOVE EXTERNAL LINK ICONS FROM FOOTER --- */
.bc-linktile a.external {
background-image: none !important;
padding-right: 20px !important; /* Restores balanced padding (matches your padding: 20px) */
}
/* Remove external link icon inside the button */
.bc-promo-cta a.external {
background-image: none !important;
padding-right: 20px !important; /* Keep padding symmetric */
}
/* --- NATIVE AD / PROMO BANNER (Stable Container, Active Button) --- */
.bc-promo {
display: flex;
align-items: center;
/* 1. Subtle Brand Tint (Fades from Light Teal to White) */
background: linear-gradient(to right, #f1f8f9, #ffffff);
/* 2. Soft Teal Border */
border: 1px solid #dae8ea;
border-left: 6px solid #266065; /* Thicker Brand Accent */
border-radius: 8px;
padding: 18px 25px;
margin: 25px 0;
/* 3. Static Colored Shadow (Glows slightly with brand color) */
box-shadow: 0 4px 12px rgba(38, 96, 101, 0.08);
}
/* REMOVED: .bc-promo:hover block so the container never moves */
.bc-promo-icon {
font-size: 28px;
margin-right: 20px;
flex-shrink: 0;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.bc-promo-text {
flex-grow: 1;
color: #2c3e50;
font-size: 1.05rem;
margin-right: 25px;
line-height: 1.5;
}
/* The Button Container - RESET */
.bc-promo-cta {
background: transparent;
padding: 0;
border: none;
}
/* THE ACTUAL LINK BUTTON */
.bc-promo-cta a {
display: inline-block !important;
background-color: #266065 !important;
color: white !important;
padding: 12px 24px !important;
border-radius: 6px !important;
font-weight: 700 !important;
font-size: 0.95rem !important;
text-decoration: none !important;
transition: all 0.2s ease; /* Smooth animation for the button */
line-height: 1 !important;
border: none !important;
white-space: nowrap !important;
box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
}
/* Button Hover State - ONLY the button moves now */
.bc-promo-cta a:hover {
background-color: #163a3d !important; /* Darker Teal */
transform: translateY(-2px); /* Lifts up */
box-shadow: 0 6px 12px rgba(0,0,0,0.2) !important; /* Deeper shadow */
color: white !important;
text-decoration: none !important;
}
.bc-promo-cta a.external {
background-image: none !important;
padding-right: 24px !important;
}
/* --- DARK MODE ADJUSTMENTS --- */
html.skin-theme-clientpref-night .bc-promo {
background: linear-gradient(to right, #1a2628, #1e1e1e);
border-color: #333;
border-left-color: #4db6ac;
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
/* Removed Dark Mode Container Hover as well */
html.skin-theme-clientpref-night .bc-promo-text {
color: #e0e0e0;
}
html.skin-theme-clientpref-night .bc-promo-cta a {
background-color: #4db6ac !important;
color: #121212 !important;
}
html.skin-theme-clientpref-night .bc-promo-cta a:hover {
background-color: #80cbc4 !important;
}
/* 2. Remove MediaWiki's default container gap */
#siteNotice {
margin-bottom: 0 !important;
}
/* --- FIX SITENOTICE GAPS --- */
/* Hides the empty paragraph MediaWiki inserts automatically */
#siteNotice p {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Ensures the promo box itself doesn't have extra margin in the header */
#siteNotice .bc-promo {
margin: 0 0 10px 0 !important;
}
/* --- FIX SITENOTICE BUTTON VISIBILITY --- */
/* Target the button specifically inside the header to override skin defaults */
#siteNotice .bc-promo-cta a {
display: inline-block !important;
color: white !important;
background-color: #266065 !important;
padding: 12px 24px !important;
visibility: visible !important;
opacity: 1 !important;
text-decoration: none !important;
}
#siteNotice .bc-promo-cta a:hover {
background-color: #163a3d !important;
color: white !important;
}
/* --- APP STORE BUTTONS --- */
.bc-app-btns {
display: flex;
gap: 10px;
margin-top: 15px;
flex-wrap: wrap;
}
.bc-app-btn {
display: inline-flex !important;
align-items: center;
background-color: #266065; /* Brand Teal */
color: white !important;
text-decoration: none !important;
padding: 8px 16px; /* Compact padding */
border-radius: 4px;
font-size: 0.85rem;
font-weight: bold;
border: none;
transition: background 0.2s;
}
.bc-app-btn:hover {
background-color: #163a3d; /* Darker on hover */
color: white !important;
text-decoration: none !important;
}