MediaWiki:Pivot.css

/**********************************************************
 * DUNE-THEMED PIVOT SKIN — CLEANED & REFINED VERSION
 **********************************************************/

/* 1. GLOBAL RESET */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
}

/* 2. BACKGROUND IMAGE FULLSCREEN */
body.skin-pivot {
  background: url('https://dunedb.com/images/5/57/DuneDB_Background.jpg') no-repeat center center fixed;
  background-size: cover;
  background-attachment: fixed;
  color: #E0E0E0;
  font-family: "Orbitron", sans-serif;
}

/* 3. MAIN CONTENT TRANSPARENCY */
.skin-pivot #content,
.skin-pivot .mw-body,
.skin-pivot .mw-content-ltr,
.skin-pivot .mw-content-rtl,
.skin-pivot .off-canvas-wrap,
.skin-pivot .docs-wrap,
.skin-pivot .inner-wrap,
.skin-pivot #page-base,
.skin-pivot .page-base,
.skin-pivot #main-section.main-section,
.skin-pivot #page-content,
.skin-pivot .row,
.skin-pivot .columns,
.skin-pivot #sidebar.large-2.medium-3.columns.hide-for-small.hide-for-print,
.skin-pivot .exit-off-canvas,
.skin-pivot footer,
.skin-pivot .footer,
.skin-pivot #footer,
.skin-pivot .mw-footer,
.skin-pivot #mw-footer-container,
.skin-pivot #mw-footer,
.skin-pivot #catlinks,
.skin-pivot .catlinks,
.skin-pivot .printfooter,
.skin-pivot #mw-data-after-content {
  background: transparent !important;
  border: none !important;
  color: #E0E0E0;
}

/**********************************************************
 * NAVIGATION & HEADERS
 **********************************************************/
.skin-pivot .navbar,
.skin-pivot .navbar-default,
.skin-pivot .navbar-inverse,
.skin-pivot nav.tab-bar.hide-for-print {
  background: rgba(15, 20, 25, 0.9) !important;
  border: none;
  color: #E0E0E0;
  padding: 0.5em;
}
.skin-pivot nav.tab-bar.hide-for-print .title a {
  color: #E2D3AE;
  font-size: 1.2em;
  text-transform: uppercase;
}
.skin-pivot .navbar-nav > li > a,
.skin-pivot .dropdown-menu > li > a,
.skin-pivot nav.tab-bar.hide-for-print a {
  color: #C47F3A !important;
  font-weight: bold;
  text-decoration: none;
}
.skin-pivot .navbar-nav > li > a:hover,
.skin-pivot .dropdown-menu > li > a:hover,
.skin-pivot nav.tab-bar.hide-for-print a:hover {
  color: #E28D4F !important;
  text-decoration: underline;
}

/**********************************************************
 * TYPOGRAPHY & LINKS
 **********************************************************/
.skin-pivot h1, h2, h3, h4, h5, h6 {
  color: #E2D3AE;
  font-weight: bold;
  padding-bottom: 5px;
  margin-top: 1em;
  margin-bottom: 0.5em;
  border-bottom: none;
}
.skin-pivot h1,
.skin-pivot h3 {
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}
.skin-pivot a {
  color: #C47F3A;
  font-weight: bold;
  text-decoration: none;
}
.skin-pivot a:hover {
  color: #E28D4F;
  text-decoration: underline;
}
.skin-pivot a.new,
.skin-pivot a.new:visited {
  color: #BA0000 !important;
}
.skin-pivot a.new:hover {
  color: #DD0000 !important;
}

/**********************************************************
 * INFOPANELS, CARDS, BOXES — SHARED STYLING
 **********************************************************/
.skin-pivot .dune-infobox,
.skin-pivot table.infobox-dune,
.skin-pivot .dune-card,
.skin-pivot .game-panel {
  background-color: #000002 !important;
  color: #E2D3AE !important;
  border: 1px solid #C47F3A;
  border-radius: 6px;
  box-shadow:
    0 0 0 1px #0a0a0a,
    0 0 0 2px #C47F3A,
    0 0 8px rgba(0, 0, 0, 0.4);
  margin: 20px 0;
  padding: 16px;
  position: relative;
  background-image:
    linear-gradient(rgba(20, 30, 40, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 30, 40, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: -1px -1px;
}

/**********************************************************
 * INNER CELLS/STATS/ROWS
 **********************************************************/
.skin-pivot .dune-infobox-description,
.skin-pivot .dune-infobox-stats td,
.skin-pivot .dune-infobox-stats th,
.skin-pivot table.infobox-dune td,
.skin-pivot table.infobox-dune th,
.skin-pivot .dune-card-description,
.skin-pivot .game-table td,
.skin-pivot .game-table th {
  background-color: #161618 !important;
  color: #E2D3AE !important;
  border: 1px solid #333 !important;
  position: relative;
}

/**********************************************************
 * HEADERS & TITLES WITH ACCENTS
 **********************************************************/
.skin-pivot .game-panel-header,
.skin-pivot .dune-infobox-title,
.skin-pivot .dune-card-title {
  border-bottom: 1px solid #C47F3A;
  color: #E2D3AE;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Header corner accents */
.skin-pivot .game-panel-header::before,
.skin-pivot .game-panel-header::after,
.skin-pivot .dune-infobox-title::before,
.skin-pivot .dune-infobox-title::after,
.skin-pivot .dune-card-title::before,
.skin-pivot .dune-card-title::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #C47F3A;
  top: 50%;
  transform: translateY(-50%);
}
.skin-pivot .game-panel-header::before,
.skin-pivot .dune-infobox-title::before,
.skin-pivot .dune-card-title::before {
  left: -25px;
}
.skin-pivot .game-panel-header::after,
.skin-pivot .dune-infobox-title::after,
.skin-pivot .dune-card-title::after {
  right: -25px;
}

/**********************************************************
 * HOVER EFFECTS
 **********************************************************/
.skin-pivot .dune-infobox:hover,
.skin-pivot table.infobox-dune:hover,
.skin-pivot .dune-card:hover,
.skin-pivot .game-panel:hover {
  box-shadow:
    0 0 0 1px #0a0a0a,
    0 0 0 2px #C47F3A,
    0 0 12px rgba(226, 141, 79, 0.4);
  transition: box-shadow 0.3s ease;
}

/**********************************************************
 * EMPHASIS / STRONG TAG
 **********************************************************/
.skin-pivot table.infobox-dune td strong,
.skin-pivot .dune-infobox strong,
.skin-pivot .dune-card strong {
  color: #E28D4F;
  text-shadow: 0 0 3px rgba(226, 141, 79, 0.3);
}

/**********************************************************
 * RESPONSIVE GRID
 **********************************************************/
.responsive-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;
  width: 100%;
  margin: 20px 0;
  box-sizing: border-box;
}
.responsive-col {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  min-width: 350px;
}
@media screen and (min-width: 700px) {
  .responsive-col {
    width: calc(50% - 10px);
  }
}
@media screen and (min-width: 1100px) {
  .responsive-col {
    width: calc(33.333% - 13.33px);
  }
}
.responsive-col > *:last-child {
  margin-bottom: 0 !important;
}

/**********************************************************
 * MISCELLANEOUS ENHANCEMENTS
 **********************************************************/
.skin-pivot .tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
}
.skin-pivot .tooltip .tooltip-text {
  visibility: hidden;
  width: 200px;
  background-color: #1F2A37;
  color: #E0E0E0;
  text-align: center;
  border: 1px solid #C47F3A;
  border-radius: 5px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -100px;
  opacity: 0;
  transition: opacity 0.3s;
}
.skin-pivot .tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}
.skin-pivot .loading {
  animation: pulsate 1.5s infinite;
}
@keyframes pulsate {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}