Jump to content
🚛
Streamline your cross-border operation. From ACE & ACI eManifests to PARS tracking and U.S. In-Bond filing, BorderConnect is the fastest way to cross.
Start Free Trial

MediaWiki:Common.css: Difference between revisions

From BorderConnect Wiki
← Older editNewer edit →
No edit summary
Tag: Manual revert
Replaced content with "→============================================================ --- MOBILE OPTIMIZATIONS (FIXED SPACING) --- ============================================================: @media screen and (max-width: 768px) { →1. Global Wrapper: Full Bleed + Tightened Top Padding: .bc-wrap { padding: 10px 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; border-rad..."
Tags: Replaced Reverted
Line 1: Line 1:
/* --- 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;
}
/* --- 2-COLUMN LAYOUT --- */
.bc-2col {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 30px;
   
    /* NEW: This stops the cards from stretching to match height */
    align-items: flex-start;
}
/* Columns share space equally */
.bc-2col > .bc-card {
    flex: 1;
    min-width: 300px;
}
/* Mobile: Stack them properly on phones */
@media (max-width: 768px) {
    .bc-2col {
        grid-template-columns: 1fr !important;
    }
}
/* --- 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);
}
.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: flex !important;
    align-items: center !important;
    gap: 15px;                   
    text-align: left;
    padding: 12px 20px !important; 
    background-color: #fdfdfd;     
    border: 1px solid #e1e8eb;     
    border-radius: 6px;           
    margin-bottom: 10px;           
    transition: all 0.2s ease;     
}
/* Hover Effect: Card darkens slightly and border turns Teal */
.bc-btn:hover {
    background-color: #f4f9fa;     
    border-color: #b0c4c6;         
    transform: translateY(-1px);   
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    text-decoration: none;
    color: #0f2e32;
    border-left-color: #163a3d;
}
.bc-btn-icon {
    font-size: 28px;       
    color: #266065;
    line-height: 1;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}
.bc-btn-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.bc-btn strong {
    display: block;
    color: #266065;
    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;
}
/* --- 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;
}
/* 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;
}
/* 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) ---
  ============================================================ */
.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);
}
.infobox caption {
    font-size: 1.3em;
    font-weight: bold;
    padding: 0.5em;
    text-align: center;
    color: #266065; /* Your Brand Teal */
}
.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;
}
.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 */
}
.infobox img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
    margin: 0 auto;
}
/* ============================================================
  --- DARK MODE "HARD OVERRIDE" ---
  ============================================================ */
/* 1. FORCE VARIABLES */
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;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}
/* 3. CARD BACKGROUNDS */
html.skin-theme-clientpref-night .bc-card {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
    border-top: 5px solid #4db6ac !important;
    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;
    border-bottom-color: #444 !important;
}
/* 5. BUTTONS */
html.skin-theme-clientpref-night .bc-btn {
    background-color: #263238 !important;
    border: 1px solid #37474f !important;
    color: #e0f2f1 !important;
}
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;
}
html.skin-theme-clientpref-night .bc-btn span {
    color: #b0bec5 !important;
}
/* 6. HERO SECTION UPDATES */
html.skin-theme-clientpref-night .bc-hero {
    background: linear-gradient(135deg, #0a181a 0%, #163a3d 100%) !important;
    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;
}
html.skin-theme-clientpref-night .bc-search-container input.mw-ui-input {
    background-color: #2c2c2c !important;
    color: white !important;
    border-color: #444 !important;
}
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;
}
/* 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;
}
/* 9. PRO TIPS / DID YOU KNOW */
html.skin-theme-clientpref-night .bc-did-you-know {
    background-color: #1f1b14 !important;
    border-left: 5px solid #ffb300 !important;
    border: 1px solid #3e2723 !important;
    color: #cfd8dc !important;
    box-shadow: none !important;
}
html.skin-theme-clientpref-night .bc-did-you-know h3 {
    color: #ffca28 !important;
    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;
}
html.skin-theme-clientpref-night .infobox th {
    background-color: #263238 !important;
    color: #80cbc4 !important;           
    border-bottom-color: #444 !important;
}
html.skin-theme-clientpref-night .infobox td {
    color: #cfd8dc !important;
    border-bottom-color: #444 !important;
}
/* ============================================================
/* ============================================================
  --- SEARCH SUGGESTIONS DROPDOWN STYLING ---
   --- MOBILE OPTIMIZATIONS (FIXED SPACING) ---
  ============================================================ */
 
/* 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;
    overflow: hidden !important;
    z-index: 9999 !important;
    margin-top: 5px !important;
    min-width: 400px !important;
}
 
.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 */
.suggestions-result-current,
.suggestions-result:hover {
    background-color: #eef6f7 !important;
    color: #266065 !important;           
    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;
    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;
    color: white !important;
}
 
html.skin-theme-clientpref-night .suggestions-special {
    background-color: #1e1e1e !important;
    border-top: 1px solid #333 !important;
    color: #4db6ac !important;
}
 
html.skin-theme-clientpref-night .suggestions-special:hover {
    background-color: #37474f !important;
}
 
/* 3. HIGHLIGHT MATCHED TEXT */
.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) ---
   ============================================================ */
   ============================================================ */
@media screen and (max-width: 768px) {
@media screen and (max-width: 768px) {


     /* 1. Global Wrapper: Full Bleed + Transparent Background */
     /* 1. Global Wrapper: Full Bleed + Tightened Top Padding */
     .bc-wrap {
     .bc-wrap {
         padding: 0 !important;         
         padding: 10px 0 !important;         
         width: 100% !important;
         width: 100% !important;
         max-width: 100% !important;
         max-width: 100% !important;
Line 782: Line 17:
     }
     }


     /* 2. Fix the Grids (Stack vertically) */
     /* 2. Compact Table of Contents for Mobile */
     .bc-grid,  
    html body .mw-parser-output #toc,
    .bc-2col,  
    html body .vector-toc {
    .bc-btngrid,
        display: block !important;
    .bc-linkgrid {
        width: 95% !important;
        margin: 0 auto 10px auto !important; /* Center with minimal bottom gap */
        padding: 10px !important;
        box-sizing: border-box !important;
    }
 
    /* 3. Kill "Ghost Spacing" after TOC */
    /* Removes empty paragraphs or breaks MediaWiki often inserts after the TOC */
    .mw-parser-output > #toc + p,
    .mw-parser-output > .vector-toc + p,
    .mw-parser-output > #toc + br {
        display: none !important;
    }
 
    /* 4. Fix the Grids (Stack vertically) */
     .bc-grid, .bc-2col, .bc-btngrid, .bc-linkgrid {
         display: flex !important;
         display: flex !important;
         flex-direction: column !important;
         flex-direction: column !important;
Line 792: Line 42:
     }
     }


     /* 3. Hero Section: Full width & Compact */
     /* 5. Hero Section: Full width & Compact */
     .bc-hero {
     .bc-hero {
         padding: 40px 15px !important;
         padding: 40px 15px !important;
Line 802: Line 52:
     }
     }


     .bc-hero h1 {
     .bc-hero h1 { font-size: 1.8rem !important; line-height: 1.2 !important; }
        font-size: 1.8rem !important;
     .bc-hero p { font-size: 1rem !important; margin-bottom: 20px !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 */
     /* 6. Cards: Full Bleed Style */
Line 853: Line 66:
     }
     }
      
      
    .bc-card:last-child {
     /* 7. Screenshot Frame Mobile Fix */
        border-bottom: none !important;
    }
 
     /* 7. Pills */
    .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;
    }
   
    /* 9. PROMO BOX */
    .bc-promo {
        flex-direction: column !important;
        text-align: center !important;
        padding: 15px !important;   
        gap: 12px !important;       
        align-items: center !important;
        margin: 15px 0 !important;   
        border: 1px solid #dae8ea !important;
    }
 
    .bc-promo-icon {
        margin-right: 0 !important;
        font-size: 32px !important; 
        margin-bottom: 0 !important; 
    }
 
    .bc-promo-text {
        margin-right: 0 !important;
        margin-bottom: 0 !important; 
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
    }
 
    .bc-promo-cta {
        width: 100% !important;
        margin-top: 5px !important; 
    }
 
    .bc-promo-cta a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        padding: 10px !important;   
        font-size: 0.9rem !important;
    }
}
 
/* --- REMOVE EXTERNAL LINK ICONS FROM FOOTER --- */
.bc-linktile a.external,
.bc-promo-cta a.external {
    background-image: none !important;
    padding-right: 20px !important;
}
 
/* --- NATIVE AD / PROMO BANNER --- */
.bc-promo {
    display: flex;
    align-items: center;
    background: linear-gradient(to right, #f1f8f9, #ffffff);
    border: 1px solid #dae8ea;
    border-left: 6px solid #266065;
    border-radius: 8px;
    padding: 18px 25px;
    margin: 25px 0;
    box-shadow: 0 4px 12px rgba(38, 96, 101, 0.08);
}
 
.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;
}
 
.bc-promo-cta {
    background: transparent;
    padding: 0;
    border: none;
}
 
.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;
    line-height: 1 !important;
    border: none !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
}
 
.bc-promo-cta a:hover {
    background-color: #163a3d !important;
    transform: translateY(-2px);         
    box-shadow: 0 6px 12px rgba(0,0,0,0.2) !important;
    color: white !important;
    text-decoration: none !important;
}
 
.bc-promo-cta a.external {
    background-image: none !important;
    padding-right: 24px !important;
}
 
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);
}
 
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; }
 
#siteNotice { margin-bottom: 0 !important; }
#siteNotice p { display: none !important; margin: 0 !important; padding: 0 !important; }
#siteNotice .bc-promo { margin: 0 0 10px 0 !important; }
 
#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;
}
 
/* --- UNBREAKABLE APP BUTTONS --- */
.bc-app-link {
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
}
 
.bc-app-link a.external {
    display: inline-block !important;
    background-color: #528b91 !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    background-image: none !important;
    padding-right: 16px !important;
    transition: background-color 0.2s ease;
}
 
.bc-app-link a.external:hover {
    background-color: #3e6b70 !important;
    text-decoration: none !important;
}
 
/* --- PRO TIP CONTAINER (Yellow Style) --- */
.bc-pro-tip {
    background-color: #fffbf2;     
    border-left: 6px solid #f0ad4e;
    padding: 20px;
    margin-top: 25px;
    border-radius: 0 8px 8px 0;   
    color: #2c3e50;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    font-size: 0.95rem;
    line-height: 1.5;
}
 
/* ============================================================
  --- WARNING TEMPLATE (MODERNIZED) ---
  ============================================================ */
 
/* Base Styles (Light Mode) for both Divs and Tables */
.bc-warning,
.bc-warning-table {
    background-color: #fff7ed !important; /* Soft orange/peach background */
    border-left: 5px solid #e67e22 !important; /* Bright orange border */
    width: 100%;
    box-sizing: border-box;
    border-collapse: separate;
    border-spacing: 0;
    margin: 18px 0 !important;
    border-radius: 8px !important; /* Modern rounded corners */
    box-shadow: 0 4px 10px rgba(230, 126, 34, 0.08) !important; /* Orange-tinted shadow */
    overflow: hidden; /* Ensures left border curves perfectly */
    border: 1px solid #fadbc1 !important; /* Subtle outer border */
    border-left-width: 5px !important; /* Restores thick accent line */
}
 
.bc-warning-table td {
    padding: 14px 18px !important;
}
 
.bc-warning {
    padding: 14px 18px !important; /* Padding for the div version */
}
 
.bc-warning-table p,
.bc-warning p {
    margin: 0 !important;
    color: #2c3e50 !important; /* Dark text for readability */
    font-size: 0.95rem;
    line-height: 1.6;
}
 
/* --- WARNING TEMPLATE DARK MODE FIX --- */
 
/* Case 1: Wiki manually set to Dark Mode */
html.skin-theme-clientpref-night .bc-warning,
html.skin-theme-clientpref-night .bc-warning-table {
    background-color: #2a1d15 !important;    /* Dark brown/orange Background */
    border-left-color: #d35400 !important;  /* Dark Orange Border */
    border-color: #3e271a !important;        /* Dark outer border */
    border-left-width: 5px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important; /* Deeper shadow */
}
 
html.skin-theme-clientpref-night .bc-warning p,
html.skin-theme-clientpref-night .bc-warning-table p {
    color: #e0e0e0 !important;              /* Off-white text */
}
 
/* Case 2: Wiki set to Auto + System is Dark */
@media (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .bc-warning,
    html.skin-theme-clientpref-os .bc-warning-table {
        background-color: #2a1d15 !important;
        border-left-color: #d35400 !important;
        border-color: #3e271a !important;
        border-left-width: 5px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    }
    html.skin-theme-clientpref-os .bc-warning p,
    html.skin-theme-clientpref-os .bc-warning-table p {
        color: #e0e0e0 !important;
    }
}
 
/* ============================================================
  --- NOTE TEMPLATE (MODERNIZED) ---
  ============================================================ */
 
/* Base Styles (Light Mode) */
.bc-note-table {
    background-color: #f4f7f9 !important; /* Soft match to your page background */
    border-left: 5px solid #78909c !important; /* Slate grey-blue border */
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 18px 0 !important;
    border-radius: 8px; /* Modern rounded corners */
    box-shadow: 0 4px 10px rgba(0,0,0,0.06); /* Soft shadow to make it pop */
    overflow: hidden; /* Ensures the left border curves perfectly with the corner */
    border: 1px solid #e1e8eb; /* Very subtle border to contain the background */
    border-left-width: 5px; /* Restores the thick accent line */
}
 
.bc-note-table td {
    padding: 14px 18px !important; /* Slightly more breathing room */
}
 
.bc-note-table p {
    margin: 0 !important;
    color: #2c3e50 !important; /* Matches your brand dark text */
    font-size: 0.95rem;
    line-height: 1.6;
}
 
/* --- NOTE TEMPLATE DARK MODE FIX --- */
 
/* Case 1: Wiki manually set to Dark Mode */
html.skin-theme-clientpref-night .bc-note-table {
    background-color: #2a2b2e !important;    /* Dark Charcoal Background */
    border-left-color: #6b7280 !important;  /* Steel Grey Border */
    border-color: #333 !important;          /* Dark outer border */
    border-left-width: 5px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important; /* Deeper shadow for dark mode */
}
 
html.skin-theme-clientpref-night .bc-note-table p {
    color: #e0e0e0 !important;              /* Off-white text */
}
 
/* Case 2: Wiki set to Auto + System is Dark */
@media (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .bc-note-table {
        background-color: #2a2b2e !important;
        border-left-color: #6b7280 !important;
        border-color: #333 !important;
        border-left-width: 5px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    }
    html.skin-theme-clientpref-os .bc-note-table p {
        color: #e0e0e0 !important;
    }
}
 
/* --- TIP TEMPLATE DARK MODE FIX --- */
 
/* Case 1: Wiki manually set to Dark Mode */
html.skin-theme-clientpref-night .bc-tip-table {
    background: #0c2d48 !important;    /* Dark Navy Background */
    color: #e0e0e0 !important;        /* Off-white text */
    border-left-color: #2b7cff !important; /* Keep the Bright Blue Border */
}
 
html.skin-theme-clientpref-night .bc-tip-table p {
    color: #e0e0e0 !important;
}
 
/* Case 2: Wiki set to Auto + System is Dark */
@media (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .bc-tip-table {
        background: #0c2d48 !important;
        color: #e0e0e0 !important;
        border-left-color: #2b7cff !important;
    }
    html.skin-theme-clientpref-os .bc-tip-table p {
        color: #e0e0e0 !important;
    }
}
 
/* --- NEW: CROSS-BORDER APP BANNER --- */
 
.bc-app-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(90deg, #002D40 0%, #004059 100%);
    border-left: 6px solid #005b7f;
    border-radius: 6px;
    padding: 16px 24px;
    margin: 20px 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    color: #ffffff;
    gap: 20px;
}
 
.bc-app-content {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}
 
.bc-app-icon {
    font-size: 24px;
    line-height: 1;
}
 
.bc-app-text {
    font-size: 15px;
    line-height: 1.4;
    color: #ffffff;
}
 
.bc-app-text strong {
    font-weight: 700;
    color: #ffffff;
}
 
.bc-store-container {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
 
@media (max-width: 768px) {
    .bc-app-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    .bc-store-container {
        width: 100%;
        justify-content: flex-start;
        margin-top: 10px;
    }
}
 
.bc-store-wrapper {
    display: inline-block;
    text-decoration: none !important;
}
 
.bc-store-wrapper a.external {
    background-image: none !important;
    padding-right: 0 !important;
    text-decoration: none !important;
    color: white !important;
}
 
.bc-store-btn {
    display: inline-flex !important;
    align-items: center;
    background-color: #0f1f24;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 5px;
    padding: 5px 12px;
    transition: transform 0.2s ease, opacity 0.2s;
    cursor: pointer;
    line-height: 1.2;
}
 
.bc-store-btn:hover {
    transform: translateY(-2px);
    background-color: #000;
    border-color: #fff;
    opacity: 0.9;
}
 
.bc-store-svg {
    width: 18px;
    height: 18px;
    fill: white;
    margin-right: 8px;
}
 
.bc-store-text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 8px;
}
 
.bc-store-text span:first-child {
    font-size: 9px;
    opacity: 0.8;
    font-weight: 400;
}
 
.bc-store-text span:last-child {
    font-size: 13px;
    font-weight: 700;
}
 
/* --- DARK MODE: APP BANNER OVERRIDES --- */
html.skin-theme-clientpref-night .bc-app-banner {
    background: linear-gradient(90deg, #002D40 0%, #004059 100%) !important;
    border-left-color: #4db6ac !important;
    border-top: 1px solid #333 !important;
    border-right: 1px solid #333 !important;
    border-bottom: 1px solid #333 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important;
}
 
html.skin-theme-clientpref-night .bc-app-text,
html.skin-theme-clientpref-night .bc-app-text strong {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
 
html.skin-theme-clientpref-night .bc-store-btn {
    background-color: #000000 !important;
    border-color: #266065 !important;
    color: #ffffff !important;
}
 
html.skin-theme-clientpref-night .bc-store-btn:hover {
    background-color: #111 !important;
    border-color: #4db6ac !important;
}
 
/* --- NEW: ARTICLE SPECIFIC STYLES --- */
 
/* 1. Article Hero */
.bc-article-hero {
    background: linear-gradient(to right, #f4f7f9, #eef5f6);
    padding: 30px;
    margin-bottom: 30px;
    border-radius: 8px;
}
 
.bc-article-hero h1 {
    margin-top: 0;
    color: #266065;
    font-size: 2.2rem;
    font-weight: 700;
    border: none;
}
 
.bc-article-hero p {
    font-size: 1.15rem;
    color: #546e7a;
    max-width: 800px;
    margin-bottom: 15px;
}
 
.bc-article-meta {
    display: flex;
    gap: 15px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #78909c;
}
 
.bc-article-pill {
    background: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    border: 1px solid #cfd8dc;
    display: inline-block;
}
 
.bc-article-pill i {
    margin-right: 6px;
    color: #266065;
}
 
/* Dark Mode Fixes for Article Hero */
html.skin-theme-clientpref-night .bc-article-hero {
    background: #1e1e1e !important;
}
html.skin-theme-clientpref-night .bc-article-hero h1 {
    color: #4db6ac !important;
}
html.skin-theme-clientpref-night .bc-article-hero p,
html.skin-theme-clientpref-night .bc-article-meta {
    color: #b0bec5 !important;
}
html.skin-theme-clientpref-night .bc-article-pill {
    background: #263238 !important;
    border-color: #37474f !important;
}
html.skin-theme-clientpref-night .bc-article-pill i {
    color: #4db6ac !important;
}
 
/* 2. Screenshot Container */
.bc-screenshot {
    display: block;
    margin: 25px auto;
    border: 1px solid #e1e8eb;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    max-width: 100%;
    height: auto;
}
 
/* 3. Step Number Circle */
.bc-step-circle {
    display: inline-block;
    width: 28px;
    height: 28px;
    background: #266065;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    font-weight: bold;
    margin-right: 10px;
}
 
/* --- FIX VIDEO PLAYBACK INSIDE GRID CARDS --- */
.bc-card .embedvideo {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    z-index: 10 !important;
}
 
.bc-card .embedvideo iframe,
.bc-card .embedvideo object {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
}
 
/* --- VIDEO MODAL STYLES --- */
 
/* The Trigger Container */
.bc-video-trigger {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 56.25%;
    background: #000;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
 
.bc-video-trigger:hover {
    transform: scale(1.02);
}
 
/* The Thumbnail Image */
.bc-video-trigger img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: opacity 0.3s;
}
 
.bc-video-trigger:hover img {
    opacity: 0.6;
}
 
/* The Play Icon */
.bc-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    color: white;
    z-index: 10;
    pointer-events: none;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
 
/* --- THE MODAL OVERLAY --- */
.bc-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
}
 
.bc-modal-overlay.active {
    display: flex;
}
 
.bc-modal-content {
    position: relative;
    width: 90%;
    max-width: 1000px;
    aspect-ratio: 16 / 9;
    background: black;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
}
 
.bc-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 40px;
    cursor: pointer;
    line-height: 1;
}
 
/* --- Video Caption Style --- */
.bc-video-caption {
    margin-top: 15px;
    text-align: center;
    font-family: sans-serif !important;
    font-size: 1rem;
    color: #333;
    line-height: 1.5;
    white-space: normal !important;
    border: none !important;
    background: transparent !important;
}
 
.bc-video-caption strong {
    color: #266065;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    margin-right: 6px;
}
 
/* --- Floated Video --- */
.bc-float-video {
    float: right;
    width: 45%;           
    min-width: 320px;     
    margin-left: 40px;   
    margin-bottom: 20px; 
}
 
@media (max-width: 850px) {
    .bc-float-video {
        float: none;
        width: 100%;
        margin-left: 0;
        margin-bottom: 30px;
    }
}
 
/* ============================================================
  --- JS-DRIVEN TOC STYLING ---
  ============================================================ */
 
html body .mw-parser-output #toc,
html body .vector-toc {
    display: inline-block !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 200px !important;
    max-width: 350px !important;
    border-radius: 12px !important;
    padding: 12px 15px !important;
    margin-bottom: 25px !important;
    font-family: 'Segoe UI', Roboto, sans-serif !important;
    transition: all 0.3s ease !important;
}
 
/* 2. DEFAULT LIGHT MODE */
html body .mw-parser-output #toc,
html body .vector-toc {
    background-color: #ffffff !important;
    border: 1px solid #e1e8eb !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}
 
html body .mw-parser-output #toctitle h2,
html body .vector-toc-title {
    color: #266065 !important;
    border-bottom: 2px solid #eef5f6 !important;
}
 
html body .mw-parser-output #toc a,
html body .vector-toc-link {
    color: #546e7a !important;
}
 
/* 3. FORCED DARK MODE */
html body .mw-parser-output #toc.force-dark-mode,
html body .vector-toc.force-dark-mode {
    background-color: #1e1e1e !important;
    border: 1px solid #333333 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
}
 
html body .mw-parser-output #toc.force-dark-mode #toctitle h2,
html body .vector-toc.force-dark-mode .vector-toc-title {
    color: #4db6ac !important;
    border-bottom-color: #333333 !important;
}
 
html body .mw-parser-output #toc.force-dark-mode a,
html body .vector-toc.force-dark-mode .vector-toc-link {
    color: #e0e0e0 !important;
}
 
html body .mw-parser-output #toc.force-dark-mode a:hover,
html body .vector-toc.force-dark-mode .vector-toc-link:hover {
    background-color: #263238 !important;
    color: #80cbc4 !important;
}
 
/* Hides the custom text used for Page Previews */
.bc-preview-text {
    display: none !important;
}
 
/* --- FEATURED CARD COMPONENTS --- */
.bc-screenshot-frame {
    box-shadow: var(--bc-shadow) !important;
    border-radius: var(--bc-radius) !important;
    overflow: hidden !important;
    border: 1px solid #e1e8eb !important;
    background: #fff !important;
    line-height: 0 !important;
}
 
/* Dark Mode Support */
html.skin-theme-clientpref-night .bc-screenshot-frame {
    border-color: #333 !important;
    background: #1e1e1e !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
}
 
/* Mobile: Stack the image and text on small screens */
@media screen and (max-width: 768px) {
     .bc-screenshot-frame {
     .bc-screenshot-frame {
         float: none !important;
         float: none !important;
Line 1,683: Line 75:


/* ============================================================
/* ============================================================
   --- FEATURED CARD COMPONENT (LIGHT & DARK) ---
   --- IMAGE & INTERACTIVE ELEMENTS ---
   ============================================================ */
   ============================================================ */


/* 1. Base Screenshot Frame Improvements */
/* Interactive Dimming for Dark Mode */
.bc-screenshot-frame {
    box-shadow: var(--bc-shadow) !important;
    border-radius: var(--bc-radius) !important;
    overflow: hidden !important;
    border: 1px solid #e1e8eb !important;
    background: #fff !important;
    line-height: 0 !important;
}
 
/* 2. Featured Card specific overrides for Dark Mode */
html.skin-theme-clientpref-night .bc-featured-card {
    /* Reset the background and border for Dark Mode */
    background: linear-gradient(135deg, #0d1a1b 0%, #121212 100%) !important;
    border: 1px solid #2a3d40 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.8) !important;
}
 
/* 3. Fix Text Visibility inside Featured Card in Dark Mode */
html.skin-theme-clientpref-night .bc-featured-card h2,
html.skin-theme-clientpref-night .bc-featured-card h2 i {
    color: #4db6ac !important; /* Bright Teal Header */
}
 
html.skin-theme-clientpref-night .bc-featured-card p,
html.skin-theme-clientpref-night .bc-featured-card .bc-subtle {
    color: #cfd8dc !important; /* Off-white / Light Grey Text */
}
 
/* 4. Fix the "Read More" link color in Dark Mode */
html.skin-theme-clientpref-night .bc-featured-card a span {
    color: #4db6ac !important;
    text-decoration: underline !important;
}
 
/* 5. Improve Screenshot visibility in Dark Mode */
html.skin-theme-clientpref-night .bc-screenshot-frame {
    background: #000 !important;
    border-color: #444 !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.9) !important;
}
 
/* 6. Mobile: Stack the image and text on small screens */
@media screen and (max-width: 768px) {
    .bc-screenshot-frame {
        float: none !important;
        margin: 0 0 20px 0 !important;
        width: 100% !important;
    }
}
 
/* If you want to keep the line but make it much darker/subtle instead of invisible: */
html.skin-theme-clientpref-night .mw-parser-output h2 {
    border-bottom: 1px solid #333 !important;
}
 
/* --- BULLETPROOF INTERACTIVE DIMMING FOR DARK MODE --- */
 
/* 1. Target the actual IMG tag inside any thumb or our custom frame */
html.skin-theme-clientpref-night .thumbimage,
html.skin-theme-clientpref-night .thumbimage,
html.skin-theme-clientpref-night .bc-screenshot-frame img,
html.skin-theme-clientpref-night .bc-screenshot-frame img,
Line 1,752: Line 86:
}
}


/* 2. Restore brightness when hovering over the image OR its container */
html.skin-theme-clientpref-night .thumbimage:hover,
html.skin-theme-clientpref-night .thumbimage:hover,
html.skin-theme-clientpref-night .bc-screenshot-frame:hover img,
html.skin-theme-clientpref-night .bc-screenshot-frame:hover img,
html.skin-theme-clientpref-night .bc-card img:hover {
html.skin-theme-clientpref-night .bc-card img:hover {
     filter: brightness(1) contrast(1) !important;
     filter: brightness(1) contrast(1) !important;
}
/* Final cleanup for H2 headers in Dark Mode */
html.skin-theme-clientpref-night .mw-parser-output h2 {
    border-bottom: 1px solid #333 !important;
}
}

Revision as of 11:36, 12 February 2026

/* ============================================================
   --- MOBILE OPTIMIZATIONS (FIXED SPACING) ---
   ============================================================ */
@media screen and (max-width: 768px) {

    /* 1. Global Wrapper: Full Bleed + Tightened Top Padding */
    .bc-wrap {
        padding: 10px 0 !important;        
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important; 
        box-shadow: none !important;
    }

    /* 2. Compact Table of Contents for Mobile */
    html body .mw-parser-output #toc,
    html body .vector-toc {
        display: block !important;
        width: 95% !important;
        margin: 0 auto 10px auto !important; /* Center with minimal bottom gap */
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    /* 3. Kill "Ghost Spacing" after TOC */
    /* Removes empty paragraphs or breaks MediaWiki often inserts after the TOC */
    .mw-parser-output > #toc + p,
    .mw-parser-output > .vector-toc + p,
    .mw-parser-output > #toc + br {
        display: none !important;
    }

    /* 4. Fix the Grids (Stack vertically) */
    .bc-grid, .bc-2col, .bc-btngrid, .bc-linkgrid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;        
    }

    /* 5. 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; }

    /* 6. Cards: Full Bleed Style */
    .bc-card {
        padding: 25px 20px !important;
        border-radius: 0 !important; 
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(0,0,0,0.05) !important; 
        box-shadow: none !important; 
        margin-bottom: 0 !important;
    }
    
    /* 7. Screenshot Frame Mobile Fix */
    .bc-screenshot-frame {
        float: none !important;
        margin: 0 0 20px 0 !important;
        width: 100% !important;
    }
}

/* ============================================================
   --- IMAGE & INTERACTIVE ELEMENTS ---
   ============================================================ */

/* Interactive Dimming for Dark Mode */
html.skin-theme-clientpref-night .thumbimage,
html.skin-theme-clientpref-night .bc-screenshot-frame img,
html.skin-theme-clientpref-night .bc-card img {
    filter: brightness(0.7) contrast(1.1) !important;
    transition: filter 0.3s ease !important;
}

html.skin-theme-clientpref-night .thumbimage:hover,
html.skin-theme-clientpref-night .bc-screenshot-frame:hover img,
html.skin-theme-clientpref-night .bc-card img:hover {
    filter: brightness(1) contrast(1) !important;
}

/* Final cleanup for H2 headers in Dark Mode */
html.skin-theme-clientpref-night .mw-parser-output h2 {
    border-bottom: 1px solid #333 !important;
}
Retrieved from "https://wiki.borderconnect.com/index.php?title=MediaWiki:Common.css&oldid=3376"