BigBro Know

MediaWiki:Common.css: Difference between revisions

← Older edit
Admin (talk | contribs)
Bureaucrats, Interface administrators, Administrators
9,027 edits
Add Choose Your Path card styles
No edit summary
 
(7 intermediate revisions by the same user not shown)
Line 546: Line 546:
}
}


/* ============================================
/* ===================================================================== */
  CHOOSE YOUR PATH — homepage wayfinding cards
/* FULL-BLEED LANDING — Homepage only                                    */
  ============================================ */
/* Hides Vector skin chrome so the custom landing renders edge-to-edge  */
.ax-path-section { margin: 4px 0 40px 0; }
/* like bigbro.men. The page's own fixed nav becomes the top bar.        */
.ax-path-head { text-align: center; margin-bottom: 26px; }
/* Scoped to body.page-Homepage — inner wiki articles are untouched.    */
.ax-path-head h2 {
/* ===================================================================== */
  font-size: 34px;
body.page-Homepage #mw-head,
  font-weight: 800;
body.page-Homepage #mw-head-base,
  color: #FF7900 !important;
body.page-Homepage #mw-page-base,
   border: none !important;
body.page-Homepage #mw-panel,
  margin: 0 0 14px 0;
body.page-Homepage #left-navigation,
  letter-spacing: 0.3px;
body.page-Homepage #right-navigation,
body.page-Homepage #p-logo,
body.page-Homepage .mw-indicators,
body.page-Homepage #siteSub,
body.page-Homepage #contentSub,
body.page-Homepage #contentSub2,
body.page-Homepage .mw-first-heading,
body.page-Homepage h1.firstHeading,
body.page-Homepage #jump-to-nav,
body.page-Homepage .mw-jump-link,
body.page-Homepage #footer,
body.page-Homepage #mw-footer,
body.page-Homepage .printfooter,
body.page-Homepage .catlinks,
body.page-Homepage #catlinks,
body.page-Homepage #mw-data-after-content,
body.page-Homepage #mw-navigation-heading {
   display: none !important;
}
}
.ax-path-head p {
 
   font-size: 15px;
/* Content area: full width, no skin offset, no padding/border */
   color: #999999;
body.page-Homepage,
   max-width: 600px;
body.page-Homepage #content,
   margin: 0 auto;
body.page-Homepage .mw-body,
   line-height: 1.65;
body.page-Homepage #mw-content,
body.page-Homepage #mw-content-text,
body.page-Homepage #bodyContent,
body.page-Homepage .mw-content-ltr,
body.page-Homepage .mw-parser-output {
   margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
   background: #0D0D0D !important;
   max-width: none !important;
  width: auto !important;
}
body.page-Homepage #content,
body.page-Homepage .mw-body {
   margin-left: 0 !important;
   box-shadow: none !important;
}
}
.ax-path-grid-3 {
/* Let the custom landing manage its own scroll/overflow */
  display: grid;
body.page-Homepage { overflow-x: hidden !important; }
  grid-template-columns: repeat(3, 1fr);
 
   gap: 16px;
/* Restore landing button / nav text colors (override global orange link rule) */
   margin-bottom: 16px;
/* Filled gradient buttons: dark ink (matches bigbro.men .btn-primary) */
body.page-Homepage .btn-p,
body.page-Homepage .btn-p:visited,
body.page-Homepage .hcp,
body.page-Homepage .hcp:visited,
body.page-Homepage .ab-cta,
body.page-Homepage .ab-cta:visited,
body.page-Homepage .nlb,
body.page-Homepage .lb.on,
body.page-Homepage .lb.on:visited,
body.page-Homepage_de .btn-p,
body.page-Homepage_de .btn-p:visited,
body.page-Homepage_de .hcp,
body.page-Homepage_de .hcp:visited,
body.page-Homepage_de .ab-cta,
body.page-Homepage_de .ab-cta:visited,
body.page-Homepage_de .nlb,
body.page-Homepage_de .lb.on,
body.page-Homepage_de .lb.on:visited,
body.page-Homepage_fr .btn-p,
body.page-Homepage_fr .btn-p:visited,
body.page-Homepage_fr .hcp,
body.page-Homepage_fr .hcp:visited,
body.page-Homepage_fr .ab-cta,
body.page-Homepage_fr .ab-cta:visited,
body.page-Homepage_fr .nlb,
body.page-Homepage_fr .lb.on,
body.page-Homepage_fr .lb.on:visited,
body.page-Homepage_es .btn-p,
body.page-Homepage_es .btn-p:visited,
body.page-Homepage_es .hcp,
body.page-Homepage_es .hcp:visited,
body.page-Homepage_es .ab-cta,
body.page-Homepage_es .ab-cta:visited,
body.page-Homepage_es .nlb,
body.page-Homepage_es .lb.on,
body.page-Homepage_es .lb.on:visited,
body.page-Homepage_pt .btn-p,
body.page-Homepage_pt .btn-p:visited,
body.page-Homepage_pt .hcp,
body.page-Homepage_pt .hcp:visited,
body.page-Homepage_pt .ab-cta,
body.page-Homepage_pt .ab-cta:visited,
body.page-Homepage_pt .nlb,
body.page-Homepage_pt .lb.on,
body.page-Homepage_pt .lb.on:visited {
   color: #0D0D0D !important;
   -webkit-text-fill-color: #0D0D0D !important;
}
}
.ax-path-grid-2 {
/* Ghost button + over-image labels stay light */
  display: grid;
body.page-Homepage .hcs,
  grid-template-columns: repeat(2, 1fr);
body.page-Homepage .hcs:visited,
   gap: 16px;
body.page-Homepage .tn,
body.page-Homepage_de .hcs,
body.page-Homepage_de .hcs:visited,
body.page-Homepage_de .tn,
body.page-Homepage_fr .hcs,
body.page-Homepage_fr .hcs:visited,
body.page-Homepage_fr .tn,
body.page-Homepage_es .hcs,
body.page-Homepage_es .hcs:visited,
body.page-Homepage_es .tn,
body.page-Homepage_pt .hcs,
body.page-Homepage_pt .hcs:visited,
body.page-Homepage_pt .tn {
  color: #ffffff !important;
   -webkit-text-fill-color: #ffffff !important;
}
}
.ax-path-card {
body.page-Homepage .nl,
  display: block;
body.page-Homepage .nl:visited,
  background: #161616;
body.page-Homepage .lb.av,
   border: 1px solid #2E2E2E;
body.page-Homepage .lb.av:visited {
   border-radius: 18px;
   color: #888888 !important;
  padding: 26px 26px 24px 26px;
   -webkit-text-fill-color: #888888 !important;
  text-decoration: none !important;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
}
.ax-path-card:hover {
body.page-Homepage .nl:hover,
  border-color: rgba(255,102,0,0.55);
body.page-Homepage .lb.av:hover { color: #ffffff !important; -webkit-text-fill-color:#ffffff !important; }
  box-shadow: 0 0 26px rgba(255,102,0,0.10);
body.page-Homepage .lb.dim { color: #333333 !important; -webkit-text-fill-color:#333333 !important; }
   transform: translateY(-2px);
/* Footer + section links inherit the design, not the global orange underline */
body.page-Homepage .fl a:hover { text-decoration: none !important; }
 
/* ===================================================================== */
/* FULL-BLEED LANDING — Homepage language subpages (DE, FR, ES, PT)      */
/* Identical to body.page-Homepage rules above                            */
/* ===================================================================== */
 
/* --- DE --- */
body.page-Homepage_de #mw-head,
body.page-Homepage_de #mw-head-base,
body.page-Homepage_de #mw-page-base,
body.page-Homepage_de #mw-panel,
body.page-Homepage_de #left-navigation,
body.page-Homepage_de #right-navigation,
body.page-Homepage_de #p-logo,
body.page-Homepage_de .mw-indicators,
body.page-Homepage_de #siteSub,
body.page-Homepage_de #contentSub,
body.page-Homepage_de #contentSub2,
body.page-Homepage_de .mw-first-heading,
body.page-Homepage_de h1.firstHeading,
body.page-Homepage_de #jump-to-nav,
body.page-Homepage_de .mw-jump-link,
body.page-Homepage_de #footer,
body.page-Homepage_de #mw-footer,
body.page-Homepage_de .printfooter,
body.page-Homepage_de .catlinks,
body.page-Homepage_de #catlinks,
body.page-Homepage_de #mw-data-after-content,
body.page-Homepage_de #mw-navigation-heading {
   display: none !important;
}
}
.ax-path-num {
 
   display: block;
body.page-Homepage_de,
   font-size: 12px;
body.page-Homepage_de #content,
   letter-spacing: 0.14em;
body.page-Homepage_de .mw-body,
   color: #5a5a5a;
body.page-Homepage_de #mw-content,
   font-weight: 600;
body.page-Homepage_de #mw-content-text,
   margin-bottom: 16px;
body.page-Homepage_de #bodyContent,
body.page-Homepage_de .mw-content-ltr,
body.page-Homepage_de .mw-parser-output {
   margin: 0 !important;
   padding: 0 !important;
   border: 0 !important;
   background: #0D0D0D !important;
   max-width: none !important;
   width: auto !important;
}
}
.ax-path-icon {
 
  display: inline-flex;
body.page-Homepage_de #content,
  width: 48px;
body.page-Homepage_de .mw-body {
  height: 48px;
   margin-left: 0 !important;
  border-radius: 13px;
   box-shadow: none !important;
  background: rgba(255,102,0,0.10);
  border: 1px solid rgba(255,102,0,0.28);
  align-items: center;
   justify-content: center;
   margin-bottom: 20px;
}
}
.ax-path-title {
 
   font-size: 19px;
body.page-Homepage_de { overflow-x: hidden !important; }
   font-weight: 700;
 
   color: #FFFFFF !important;
/* --- FR --- */
   margin-bottom: 10px;
body.page-Homepage_fr #mw-head,
   line-height: 1.25;
body.page-Homepage_fr #mw-head-base,
body.page-Homepage_fr #mw-page-base,
body.page-Homepage_fr #mw-panel,
body.page-Homepage_fr #left-navigation,
body.page-Homepage_fr #right-navigation,
body.page-Homepage_fr #p-logo,
body.page-Homepage_fr .mw-indicators,
body.page-Homepage_fr #siteSub,
body.page-Homepage_fr #contentSub,
body.page-Homepage_fr #contentSub2,
body.page-Homepage_fr .mw-first-heading,
body.page-Homepage_fr h1.firstHeading,
body.page-Homepage_fr #jump-to-nav,
body.page-Homepage_fr .mw-jump-link,
body.page-Homepage_fr #footer,
body.page-Homepage_fr #mw-footer,
body.page-Homepage_fr .printfooter,
body.page-Homepage_fr .catlinks,
body.page-Homepage_fr #catlinks,
body.page-Homepage_fr #mw-data-after-content,
body.page-Homepage_fr #mw-navigation-heading {
   display: none !important;
}
 
body.page-Homepage_fr,
body.page-Homepage_fr #content,
body.page-Homepage_fr .mw-body,
body.page-Homepage_fr #mw-content,
body.page-Homepage_fr #mw-content-text,
body.page-Homepage_fr #bodyContent,
body.page-Homepage_fr .mw-content-ltr,
body.page-Homepage_fr .mw-parser-output {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #0D0D0D !important;
   max-width: none !important;
   width: auto !important;
}
 
body.page-Homepage_fr #content,
body.page-Homepage_fr .mw-body {
  margin-left: 0 !important;
  box-shadow: none !important;
}
 
body.page-Homepage_fr { overflow-x: hidden !important; }
 
/* --- ES --- */
body.page-Homepage_es #mw-head,
body.page-Homepage_es #mw-head-base,
body.page-Homepage_es #mw-page-base,
body.page-Homepage_es #mw-panel,
body.page-Homepage_es #left-navigation,
body.page-Homepage_es #right-navigation,
body.page-Homepage_es #p-logo,
body.page-Homepage_es .mw-indicators,
body.page-Homepage_es #siteSub,
body.page-Homepage_es #contentSub,
body.page-Homepage_es #contentSub2,
body.page-Homepage_es .mw-first-heading,
body.page-Homepage_es h1.firstHeading,
body.page-Homepage_es #jump-to-nav,
body.page-Homepage_es .mw-jump-link,
body.page-Homepage_es #footer,
body.page-Homepage_es #mw-footer,
body.page-Homepage_es .printfooter,
body.page-Homepage_es .catlinks,
body.page-Homepage_es #catlinks,
body.page-Homepage_es #mw-data-after-content,
body.page-Homepage_es #mw-navigation-heading {
  display: none !important;
}
 
body.page-Homepage_es,
body.page-Homepage_es #content,
body.page-Homepage_es .mw-body,
body.page-Homepage_es #mw-content,
body.page-Homepage_es #mw-content-text,
body.page-Homepage_es #bodyContent,
body.page-Homepage_es .mw-content-ltr,
body.page-Homepage_es .mw-parser-output {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #0D0D0D !important;
  max-width: none !important;
  width: auto !important;
}
 
body.page-Homepage_es #content,
body.page-Homepage_es .mw-body {
   margin-left: 0 !important;
   box-shadow: none !important;
}
 
body.page-Homepage_es { overflow-x: hidden !important; }
 
/* --- PT --- */
body.page-Homepage_pt #mw-head,
body.page-Homepage_pt #mw-head-base,
body.page-Homepage_pt #mw-page-base,
body.page-Homepage_pt #mw-panel,
body.page-Homepage_pt #left-navigation,
body.page-Homepage_pt #right-navigation,
body.page-Homepage_pt #p-logo,
body.page-Homepage_pt .mw-indicators,
body.page-Homepage_pt #siteSub,
body.page-Homepage_pt #contentSub,
body.page-Homepage_pt #contentSub2,
body.page-Homepage_pt .mw-first-heading,
body.page-Homepage_pt h1.firstHeading,
body.page-Homepage_pt #jump-to-nav,
body.page-Homepage_pt .mw-jump-link,
body.page-Homepage_pt #footer,
body.page-Homepage_pt #mw-footer,
body.page-Homepage_pt .printfooter,
body.page-Homepage_pt .catlinks,
body.page-Homepage_pt #catlinks,
body.page-Homepage_pt #mw-data-after-content,
body.page-Homepage_pt #mw-navigation-heading {
  display: none !important;
}
}
.ax-path-desc {
 
   font-size: 14px;
body.page-Homepage_pt,
   line-height: 1.6;
body.page-Homepage_pt #content,
   color: #9a9a9a;
body.page-Homepage_pt .mw-body,
   margin-bottom: 18px;
body.page-Homepage_pt #mw-content,
body.page-Homepage_pt #mw-content-text,
body.page-Homepage_pt #bodyContent,
body.page-Homepage_pt .mw-content-ltr,
body.page-Homepage_pt .mw-parser-output {
   margin: 0 !important;
  padding: 0 !important;
   border: 0 !important;
   background: #0D0D0D !important;
   max-width: none !important;
  width: auto !important;
}
}
.ax-path-cta {
 
   font-size: 14px;
body.page-Homepage_pt #content,
   font-weight: 600;
body.page-Homepage_pt .mw-body {
  color: #FF7900 !important;
   margin-left: 0 !important;
   box-shadow: none !important;
}
}
.ax-path-card:hover .ax-path-cta { color: #FFA24A !important; }


/* Wide cards (bottom row) — horizontal layout */
body.page-Homepage_pt { overflow-x: hidden !important; }
.ax-path-card-wide {
 
   display: flex;
/* ===================================================================== */
   align-items: center;
/* Homepage section headings: white + no underline (article pages keep      */
  gap: 22px;
/* the global orange heading style).                                        */
/* ===================================================================== */
body.page-Homepage .mw-parser-output h1,
body.page-Homepage .mw-parser-output h2,
body.page-Homepage .mw-parser-output h3,
body.page-Homepage .mw-parser-output h4,
body.page-Homepage_de .mw-parser-output h1,
body.page-Homepage_de .mw-parser-output h2,
body.page-Homepage_de .mw-parser-output h3,
body.page-Homepage_de .mw-parser-output h4,
body.page-Homepage_fr .mw-parser-output h1,
body.page-Homepage_fr .mw-parser-output h2,
body.page-Homepage_fr .mw-parser-output h3,
body.page-Homepage_fr .mw-parser-output h4,
body.page-Homepage_es .mw-parser-output h1,
body.page-Homepage_es .mw-parser-output h2,
body.page-Homepage_es .mw-parser-output h3,
body.page-Homepage_es .mw-parser-output h4,
body.page-Homepage_pt .mw-parser-output h1,
body.page-Homepage_pt .mw-parser-output h2,
body.page-Homepage_pt .mw-parser-output h3,
body.page-Homepage_pt .mw-parser-output h4 {
   color: #FFFFFF !important;
   border-bottom: none !important;
}
}
.ax-path-card-wide .ax-path-num { margin-bottom: 0; }
.ax-path-card-wide .ax-path-icon { margin-bottom: 0; flex-shrink: 0; }
.ax-path-card-wide .ax-path-title { margin-bottom: 0; }
.ax-path-card-wide .ax-path-desc { margin-bottom: 0; }


@media (max-width: 900px) {
 
  .ax-path-grid-3, .ax-path-grid-2 { grid-template-columns: 1fr; }
/* BigBro logo size constraint */
  .ax-path-head h2 { font-size: 28px; }
div[style*="max-width:280px"] .mw-file-element {
  .ax-path-card-wide { flex-wrap: wrap; gap: 14px; }
    max-width: 280px !important;
  .ax-path-card-wide .ax-path-desc { flex-basis: 100%; }
    width: 100% !important;
    height: auto !important;
}
}
Retrieved from "https://know.bigbro.men/MediaWiki:Common.css"