MediaWiki:Pivot.css

/**********************************************************
 *  Pivot skin – lean core (v2 · 2025-05-23)
 *  All content-component rules now live in TemplateStyles.
 **********************************************************/
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap');

/*──────── TOKENS ───────*/
:root{
  /* brand */
  --dune-black:rgba(14,12,21,.6);
  --dune-panel-bg-dark:rgba(0,0,2,.7);
  --dune-panel-bg-light:rgba(22,22,24,.4);
  --dune-dark:rgba(26,23,36,.7);
  --dune-darker:rgba(12,10,20,.8);
  --dune-gold:#fce7c8; --dune-gold-hover:#E3BB7A;
  /* greys & states */
  --text-primary:#E0E0E0; --text-error:#9c061a;
  /* spacings */
  --spacing-xs:4px; --spacing-sm:8px; --spacing-md:12px;
  --spacing-lg:16px; --spacing-xl:20px;
  /* geometry */
  --border-thin:1px; --border-radius-sm:2px;
  --nav-height:40px; --border-angle:30deg;
}

/*──────── RESET & BODY ───────*/
html,body{margin:0;padding:0;height:100%;min-height:100%;}
body.skin-pivot{
  background:url('https://dunedb.com/images/5/57/DuneDB_Background.jpg') no-repeat center/cover fixed;
  color:var(--text-primary);
  font-family:'Orbitron','Segoe UI',sans-serif;
  line-height:1.35;font-size:15px;
}

/*──────── TRANSPARENT WRAPPERS ───────*/
.skin-pivot #content,
.skin-pivot .mw-body,
.skin-pivot .mw-content-ltr,
.skin-pivot .mw-content-rtl{
  background:transparent;padding:var(--spacing-lg);
  border-radius:var(--border-radius-sm);margin:0;
}
.skin-pivot .off-canvas-wrap,
.skin-pivot .docs-wrap,
.skin-pivot .inner-wrap,
#page-base,.page-base,#main-section.main-section,
#page-content,.row,.columns,
#sidebar.large-2.medium-3.columns.hide-for-small.hide-for-print,
.exit-off-canvas{background:transparent!important;border:none!important;overflow:visible!important;}

footer,.footer,#footer,.mw-footer,
#mw-footer-container,#mw-footer,#catlinks,.catlinks,
.printfooter,#mw-data-after-content{background:transparent!important;border:none!important;color:var(--dune-gold)!important;}

/*──────── NAV BAR & HEADINGS ───────*/
.skin-pivot .navbar{
  background:var(--dune-darker)!important;border:none!important;
  height:var(--nav-height);display:flex;align-items:center;justify-content:center;
  border-bottom:var(--border-thin) solid var(--dune-gold)!important;position:relative;}
.skin-pivot .navbar:before,.skin-pivot .navbar:after{
  content:'';position:absolute;bottom:-1px;width:20px;height:var(--border-thin);background:var(--dune-gold);}
.skin-pivot .navbar:before{left:20px;transform:skewX(var(--border-angle));}
.skin-pivot .navbar:after{right:20px;transform:skewX(calc(-1*var(--border-angle)));}

.skin-pivot .navbar-nav{display:flex;justify-content:center;width:100%;}
.skin-pivot .navbar-nav>li>a{
  color:var(--dune-gold)!important;font-weight:bold!important;text-transform:uppercase;
  letter-spacing:1px;padding:10px 15px;margin:0 5px;position:relative;text-align:center;}
.skin-pivot .navbar-nav>li>a:hover{color:var(--dune-gold-hover)!important;text-shadow:0 0 5px rgba(200,161,101,.4);}
.skin-pivot .navbar-nav>li.active>a{color:var(--dune-gold-hover)!important;box-shadow:0 -2px 0 var(--dune-gold-hover) inset;}

nav.tab-bar.hide-for-print{
  background:var(--dune-darker);border-bottom:var(--border-thin) solid var(--dune-gold);
  color:var(--dune-gold);height:var(--nav-height);display:flex;align-items:center;padding:0;}
nav.tab-bar.hide-for-print a{color:var(--dune-gold);font-weight:bold;text-transform:uppercase;letter-spacing:.5px;}
nav.tab-bar.hide-for-print a:hover{color:var(--dune-gold-hover);text-decoration:none;}

/* headings & links */
.skin-pivot h1,.skin-pivot h2,.skin-pivot h3,.skin-pivot h4,.skin-pivot h5,.skin-pivot h6{
  font-family:'Orbitron','Segoe UI',sans-serif!important;color:var(--dune-gold);
  font-weight:bold;text-transform:uppercase;margin:1em 0 .5em 0;}
.skin-pivot a{color:var(--dune-gold);font-weight:bold;text-decoration:none;}
.skin-pivot a:hover{color:var(--dune-gold-hover);} /* new-page red stays default */

/*──────── HIDE TOOLBOX ───────*/
html body.skin-pivot #p-tb,
html body.skin-pivot #p-tb+ul,
html body.skin-pivot #p-tb+li,
li[id^="t-"]{display:none!important;}

/*──────── SHARED RESPONSIVE GRID ───────*/
.responsive-container{display:flex;flex-wrap:wrap;gap:1em;align-items:stretch;width:100%;margin:1em 0;box-sizing:border-box;}
.responsive-col{display:flex;flex-direction:column;flex:1 1 100%;min-width:300px;}
@media(min-width:600px){.responsive-col{flex:1 1 calc((100% - 1em)/2);}}
@media(min-width:850px){.responsive-col{flex:1 1 calc((100% - 2*1em)/3);}}

.responsive-col .skin-pivot{display:flex;flex-direction:column;flex:1 1 auto;height:100%;}