MediaWiki:Pivot.css

/**********************************************************
 *  Pivot skin – core tokens  + chrome-only  (clean v2-2025-05-23)
 *  All template-specific styling has been moved to TemplateStyles.
 **********************************************************/
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap');

/*─────────────────────────────────────────
 1. TOKENS  (unchanged – keep full list)
─────────────────────────────────────────*/
:root {
  /* Brand colours */
  --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; --dune-gold-dark:#A07B40;
  /* … (the rest of the variables block is identical to your original) … */
  --icon-size-xl:48px;
}

/*─────────────────────────────────────────
 2. 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:var(--font-stack);
  line-height:1.35;font-size:15px;
}

/*─────────────────────────────────────────
 3. 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-lg);margin:0;
}

/* keep “force transparent” list */
.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;
}

.mw-body-content,.skin-pivot .mw-body,#content,#mw-content-text{overflow:visible!important;}

/*─────────────────────────────────────────
 4. NAVIGATION / 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;height:var(--border-thin);
  background:var(--dune-gold);bottom:-1px;width:20px;}
.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{display:inline-block;position:relative;}
.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 var(--dune-gold-glow);}
.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;}
nav.tab-bar.hide-for-print a:hover{color:var(--dune-gold-hover);text-decoration:none;}

.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;letter-spacing:.5px;border-bottom:none;}
.skin-pivot h1,.skin-pivot h3{border-bottom:var(--border-thin) solid var(--dune-gold-transparent);position:relative;}
.skin-pivot h1:after,.skin-pivot h3:after{content:'';position:absolute;bottom:-1px;left:0;width:30px;height:3px;
  background:var(--dune-gold);}

.skin-pivot a{color:var(--dune-gold);font-weight:bold;text-decoration:none;transition:var(--transition-standard);}
.skin-pivot a:hover{color:var(--dune-gold-hover);text-shadow:0 0 5px rgba(200,161,101,.4);}
.skin-pivot a.new{color:var(--text-error)!important;}
.skin-pivot a[href*="Journey"]{display:inline-block;padding:2px 8px;border:var(--border-thin) solid var(--dune-gold);
  background:rgba(12,10,20,.6);clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px));}

/*─────────────────────────────────────────
 5. SIDEBAR / TOOLBOX HIDES
─────────────────────────────────────────*/
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;}

/*─────────────────────────────────────────
 6. RESPONSIVE GRID  (shared by all templates)
─────────────────────────────────────────*/
.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!important;}
@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,
.skin-pivot .dune-card,
.skin-pivot .dune-card-inner{display:flex;flex-direction:column;flex:1 1 auto;height:100%;}

/*─────────────────────────────────────────
 7. MISC UTILITY FIXES
─────────────────────────────────────────*/
.mw-body-content,.skin-pivot .mw-body,#content,#mw-content-text{overflow:visible!important;}