MediaWiki:Pivot.css

/**********************************************************
 *  Pivot skin – streamlined v2  (2025-05-23)
 *  Template-specific rules have been moved to TemplateStyles.
 **********************************************************/
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap');

/*─────────────────────────────────────────
 1 · DESIGN TOKENS  (full list, unchanged)
─────────────────────────────────────────*/
:root{
  /* Brand – core palette */
  --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;

  /* Text */
  --text-primary:#E0E0E0; --text-secondary:#BBBBBB;
  --text-title:#E2D3AE;  --text-inactive:#636363;
  --text-highlight:#FFFFFF; --text-error:#9c061a;

  /* Spacing */
  --spacing-xxs:2px; --spacing-xs:4px; --spacing-sm:8px; --spacing-md:12px;
  --spacing-lg:16px; --spacing-xl:20px; --spacing-xxl:24px;

  /* Borders & radius */
  --border-thin:1px;  --border-medium:2px;
  --border-radius-sm:2px; --border-radius-lg:4px; --border-angle:30deg;

  /* Shadows */
  --shadow-subtle:0 0 8px rgba(0,0,0,.3);
  --shadow-medium:0 0 10px rgba(0,0,0,.5);

  /* Typography */
  --font-stack:"Orbitron","Segoe UI",sans-serif;
  --font-size-sm:.85rem; --font-size-md:1rem; --font-size-xl:1.4rem;

  /* Layout */
  --nav-height:40px;
}

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

/*─────────────────────────────────────────
 4 · NAVIGATION / HEADINGS
─────────────────────────────────────────*/
/* Top navbar */
.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)));}

/* Navbar links */
.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;text-transform:uppercase;
  letter-spacing:1px;padding:10px 15px;margin:0 5px;position:relative;}
.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;}

/* Tab-bar (mobile) */
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;}

/* Headings & links */
.skin-pivot h1,.skin-pivot h2,.skin-pivot h3,.skin-pivot h4,.skin-pivot h5,.skin-pivot h6{
  font-family:var(--font-stack);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);}

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

/*─────────────────────────────────────────
 6 · SHARED RESPONSIVE GRID (used by many 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;}
@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%;}