|
|
| Line 1: |
Line 1: |
| /********************************************************** | | /********************************************************** |
| * Enhanced Dune-Themed Pivot Skin (Game-Accurate) | | * 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'); | | @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap'); |
|
| |
|
| /*-------------------------------------------------------------- | | /*───────────────────────────────────────── |
| # 1. CSS VARIABLES - ENHANCED SYSTEM
| | 1. TOKENS (unchanged – keep full list) |
| --------------------------------------------------------------*/
| | ─────────────────────────────────────────*/ |
| :root { | | :root { |
| /* Brand Colors - Core Palette */ | | /* Brand colours */ |
| --dune-black: rgba(14, 12, 21, 0.6); | | --dune-black: rgba(14,12,21,.6); |
| --dune-panel-bg-dark: rgba(0, 0, 2, 0.7); | | --dune-panel-bg-dark: rgba(0,0,2,.7); |
| --dune-panel-bg-light: rgba(22, 22, 24, 0.4); | | --dune-panel-bg-light: rgba(22,22,24,.4); |
| --dune-dark: rgba(26, 23, 36, 0.7); | | --dune-dark: rgba(26,23,36,.7); |
| --dune-darker: rgba(12, 10, 20, 0.8); | | --dune-darker: rgba(12,10,20,.8); |
| --dune-gold: #fce7c8; | | --dune-gold:#fce7c8; --dune-gold-hover:#E3BB7A; --dune-gold-dark:#A07B40; |
| --dune-gold-hover: #E3BB7A;
| | /* … (the rest of the variables block is identical to your original) … */ |
| --dune-gold-dark: #A07B40;
| | --icon-size-xl:48px; |
|
| |
| /* Text Colors */
| |
| --text-primary: #E0E0E0;
| |
| --text-secondary: #BBBBBB;
| |
| --text-title: #E2D3AE;
| |
| --text-inactive: #636363;
| |
| --text-highlight: #FFFFFF;
| |
| --text-link: var(--dune-gold);
| |
| --text-link-hover: var(--dune-gold-hover);
| |
| --text-error: #9c061a;
| |
| --text-success: #4CAF50;
| |
| --text-warning: #FFD700;
| |
|
| |
| /* Faction Colors */
| |
| --faction-atreides: #3D6B8A;
| |
| --faction-harkonnen: #340f14;
| |
| --faction-fremen: #538579;
| |
| --faction-emperor: #8A7045;
| |
| --faction-spacing-guild: #4A4E69;
| |
| --faction-bene-gesserit: #6B4E71;
| |
|
| |
| /* Status Colors */
| |
| --status-complete: #4CAF50;
| |
| --status-incomplete: #FF6B6B;
| |
| --status-locked: #636363;
| |
| --status-available: #3D6B8A;
| |
| --status-craftable: #538579;
| |
| --status-rare: #9c43c8;
| |
| --status-epic: #2970c3;
| |
| --status-legendary: #cf7a30;
| |
|
| |
| /* Opacity & Transparency */
| |
| --opacity-high: 0.9;
| |
| --opacity-medium: 0.7;
| |
| --opacity-low: 0.5;
| |
| --opacity-subtle: 0.3;
| |
| --opacity-hint: 0.1;
| |
|
| |
| /* Color with Transparency */
| |
| --dune-dark-transparent: rgba(14, 12, 21, 0.6);
| |
| --dune-darker-transparent: rgba(12, 10, 20, 0.5);
| |
| --dune-gold-transparent: rgba(200, 161, 101, 0.4);
| |
| --dune-gold-glow: rgba(200, 161, 101, 0.2);
| |
| --dune-gold-intense-glow: rgba(227, 187, 122, 0.4);
| |
| --panel-bg-transparent: rgba(0, 0, 2, 0.7);
| |
| --black-transparent: rgba(0, 0, 0, 0.7);
| |
| --gold-border-subtle: rgba(200, 161, 101, 0.3);
| |
| --gold-border-very-subtle: rgba(200, 161, 101, 0.2);
| |
|
| |
| /* Spacing & Layout */
| |
| --spacing-xxs: 2px;
| |
| --spacing-xs: 4px;
| |
| --spacing-sm: 8px;
| |
| --spacing-md: 12px;
| |
| --spacing-lg: 16px;
| |
| --spacing-xl: 20px;
| |
| --spacing-xxl: 24px;
| |
| --spacing-xxxl: 32px;
| |
|
| |
| /* Content Width */
| |
| --content-width-xs: 480px;
| |
| --content-width-sm: 768px;
| |
| --content-width-md: 1024px;
| |
| --content-width-lg: 1280px;
| |
| --content-width-xl: 1440px;
| |
|
| |
| /* Borders */
| |
| --border-thin: 1px;
| |
| --border-medium: 2px;
| |
| --border-thick: 3px;
| |
| --border-radius-xs: 1px;
| |
| --border-radius-sm: 2px;
| |
| --border-radius-md: 3px;
| |
| --border-radius-lg: 4px;
| |
| --border-radius-xl: 6px;
| |
| --border-radius-circle: 50%;
| |
| --border-angle: 30deg;
| |
|
| |
| /* Shadows */
| |
| --shadow-subtle: 0 0 8px rgba(0, 0, 0, 0.3);
| |
| --shadow-medium: 0 0 10px rgba(0, 0, 0, 0.5);
| |
| --shadow-strong: 0 0 15px rgba(0, 0, 0, 0.7);
| |
| --shadow-inset-subtle: inset 0 0 5px rgba(0, 0, 0, 0.3);
| |
| --shadow-inset-medium: inset 0 0 8px rgba(0, 0, 0, 0.5);
| |
| --shadow-gold: 0 0 8px rgba(200, 161, 101, 0.3);
| |
| --shadow-gold-intense: 0 0 12px rgba(227, 187, 122, 0.5);
| |
| --shadow-error: 0 0 8px rgba(255, 107, 107, 0.5);
| |
| --shadow-success: 0 0 8px rgba(76, 175, 80, 0.5);
| |
|
| |
| /* Typography */
| |
| --font-stack: "Orbitron", "Segoe UI", sans-serif;
| |
| --font-stack-secondary: "Montserrat", "Arial", sans-serif;
| |
| --font-stack-mono: "Courier New", monospace;
| |
| --font-weight-light: 300;
| |
| --font-weight-regular: 400;
| |
| --font-weight-medium: 500;
| |
| --font-weight-semibold: 600;
| |
| --font-weight-bold: 700;
| |
| --font-size-xs: 0.75rem;
| |
| --font-size-sm: 0.85rem;
| |
| --font-size-md: 1rem;
| |
| --font-size-lg: 1.2rem;
| |
| --font-size-xl: 1.4rem;
| |
| --font-size-xxl: 1.6rem;
| |
| --font-size-xxxl: 2rem;
| |
| --line-height-tight: 1.2;
| |
| --line-height-normal: 1.35;
| |
| --line-height-relaxed: 1.5;
| |
| --line-height-loose: 1.7;
| |
| --letter-spacing-tight: -0.05em;
| |
| --letter-spacing-normal: 0em;
| |
| --letter-spacing-wide: 0.05em;
| |
| --letter-spacing-wider: 0.1em;
| |
| --letter-spacing-widest: 0.15em;
| |
|
| |
| /* Z-index layers */
| |
| --z-index-background: -1;
| |
| --z-index-default: 1;
| |
| --z-index-tooltip: 100;
| |
| --z-index-dropdown: 200;
| |
| --z-index-modal: 300;
| |
| --z-index-overlay: 400;
| |
|
| |
| /* Animation & Transitions */
| |
| --transition-fast: all 0.1s ease;
| |
| --transition-standard: all 0.2s ease;
| |
| --transition-slow: all 0.3s ease;
| |
| --animation-speed-fast: 0.3s;
| |
| --animation-speed-normal: 0.5s;
| |
| --animation-speed-slow: 0.8s;
| |
|
| |
| /* Component dimensions */ | |
| --button-height-sm: 24px;
| |
| --button-height-md: 32px;
| |
| --button-height-lg: 40px;
| |
| --input-height-sm: 24px;
| |
| --input-height-md: 32px;
| |
| --input-height-lg: 40px;
| |
| --nav-height: 40px;
| |
| --card-padding: var(--spacing-lg);
| |
| --panel-padding: var(--spacing-md);
| |
|
| |
| /* Diagonal cuts - for clip-path */
| |
| --diagonal-cut-small: 5px;
| |
| --diagonal-cut-medium: 10px;
| |
| --diagonal-cut-large: 15px;
| |
|
| |
| /* Polygon style - for clip-path */
| |
| --clip-path-hexagonal-header: polygon(
| |
| 20px 0,
| |
| calc(100% - 20px) 0,
| |
| 100% 20px,
| |
| calc(100% - 20px) 40px,
| |
| 20px 40px,
| |
| 0 20px
| |
| );
| |
|
| |
| /* Gradients */
| |
| --gradient-gold: linear-gradient(to bottom, var(--dune-gold), var(--dune-gold-dark));
| |
| --gradient-gold-hover: linear-gradient(to bottom, var(--dune-gold-hover), var(--dune-gold));
| |
| --gradient-dark: linear-gradient(135deg, #111010, #1a1917);
| |
| --gradient-gold-horizontal: linear-gradient(to right, var(--dune-gold), var(--dune-gold-hover));
| |
|
| |
| /* Aspect ratios */
| |
| --aspect-ratio-square: 1 / 1;
| |
| --aspect-ratio-landscape: 16 / 9;
| |
| --aspect-ratio-portrait: 9 / 16;
| |
| --aspect-ratio-ultrawide: 21 / 9;
| |
|
| |
| /* Images & Icons */
| |
| --icon-size-xs: 12px;
| |
| --icon-size-sm: 16px;
| |
| --icon-size-md: 24px;
| |
| --icon-size-lg: 32px;
| |
| --icon-size-xl: 48px; | |
| } | | } |
|
| |
|
| /*-------------------------------------------------------------- | | /*───────────────────────────────────────── |
| # 2. GLOBAL RESET & BODY
| | 2. RESET & BODY |
| --------------------------------------------------------------*/
| | ─────────────────────────────────────────*/ |
| html, body { | | html,body{margin:0;padding:0;height:100%;min-height:100%;} |
| margin: 0;
| | body.skin-pivot{ |
| padding: 0;
| | background:url('https://dunedb.com/images/5/57/DuneDB_Background.jpg') no-repeat center/cover fixed; |
| height: 100%;
| | color:var(--text-primary); |
| min-height: 100%;
| | font-family:var(--font-stack); |
| | line-height:1.35;font-size:15px; |
| } | | } |
|
| |
|
| body.skin-pivot {
| | /*───────────────────────────────────────── |
| background: url('https://dunedb.com/images/5/57/DuneDB_Background.jpg') no-repeat center center fixed;
| | 3. TRANSPARENT WRAPPERS |
| background-size: cover;
| | ─────────────────────────────────────────*/ |
| background-attachment: fixed;
| |
| color: var(--text-primary);
| |
| font-family: var(--font-stack);
| |
| line-height: 1.35;
| |
| font-size: 15px;
| |
| }
| |
| | |
| /*-------------------------------------------------------------- | |
| # 3. MAIN CONTAINERS & TRANSPARENCY
| |
| --------------------------------------------------------------*/
| |
| /* Transparent main containers */
| |
| .skin-pivot #content, | | .skin-pivot #content, |
| .skin-pivot .mw-body, | | .skin-pivot .mw-body, |
| .skin-pivot .mw-content-ltr, | | .skin-pivot .mw-content-ltr, |
| .skin-pivot .mw-content-rtl { | | .skin-pivot .mw-content-rtl{ |
| background: transparent; | | background:transparent;padding:var(--spacing-lg); |
| padding: var(--spacing-lg);
| | border-radius:var(--border-radius-lg);margin:0; |
| border-radius: var(--border-radius-lg); | |
| margin: 0;
| |
| } | | } |
|
| |
|
| /* Force major wrappers to be transparent */ | | /* keep “force transparent” list */ |
| .skin-pivot .off-canvas-wrap, | | .skin-pivot .off-canvas-wrap, |
| .skin-pivot .docs-wrap, | | .skin-pivot .docs-wrap, |
| .skin-pivot .inner-wrap, | | .skin-pivot .inner-wrap, |
| .skin-pivot #page-base,
| | #page-base,.page-base, |
| .skin-pivot .page-base,
| | #main-section.main-section,#page-content, |
| .skin-pivot #main-section.main-section,
| | .row,.columns, |
| .skin-pivot #page-content,
| | #sidebar.large-2.medium-3.columns.hide-for-small.hide-for-print, |
| .skin-pivot .row,
| | .exit-off-canvas{background:transparent!important;border:none!important;overflow:visible!important;} |
| .skin-pivot .columns,
| |
| .skin-pivot #sidebar.large-2.medium-3.columns.hide-for-small.hide-for-print,
| |
| .skin-pivot .exit-off-canvas {
| |
| background: transparent !important;
| |
| border: none !important;
| |
| overflow: visible !important;
| |
| }
| |
| | |
| /* Footer, catlinks, printfooter: also transparent */
| |
| .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: var(--dune-gold) !important;
| |
| }
| |
| | |
| /* Fix for MediaWiki scrollbars */
| |
| .mw-body-content,
| |
| .skin-pivot .mw-body,
| |
| .skin-pivot #content,
| |
| .skin-pivot #mw-content-text {
| |
| overflow: visible !important;
| |
| }
| |
| | |
| /*--------------------------------------------------------------
| |
| # 4. NAVIGATION & HEADINGS - GAME-STYLED
| |
| --------------------------------------------------------------*/
| |
| /* Game-like top navigation */
| |
| .skin-pivot .navbar {
| |
| background: var(--dune-darker) !important;
| |
| border: none !important;
| |
| height: var(--nav-height);
| |
| position: relative;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| border-bottom: var(--border-thin) solid var(--dune-gold) !important;
| |
| }
| |
| | |
| .skin-pivot .navbar:before,
| |
| .skin-pivot .navbar:after {
| |
| content: '';
| |
| position: absolute;
| |
| height: var(--border-thin);
| |
| background-color: 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 {
| |
| position: relative;
| |
| display: inline-block;
| |
| }
| |
| | |
| .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.active > a {
| |
| color: var(--dune-gold-hover) !important;
| |
| box-shadow: 0 -2px 0 var(--dune-gold-hover) inset;
| |
| } | |
|
| |
|
| .skin-pivot .navbar-nav > li > a:hover { | | footer, .footer,#footer,.mw-footer,#mw-footer-container, |
| color: var(--dune-gold-hover) !important; | | #mw-footer,#catlinks,.catlinks,.printfooter,#mw-data-after-content{ |
| text-shadow: 0 0 5px var(--dune-gold-glow);
| | background:transparent!important;border:none!important;color:var(--dune-gold)!important; |
| } | | } |
|
| |
|
| .skin-pivot .navbar-nav > li.active > a:after, | | .mw-body-content,.skin-pivot .mw-body,#content,#mw-content-text{overflow:visible!important;} |
| .skin-pivot .navbar-nav > li > a:hover:after { | |
| content: '';
| |
| position: absolute;
| |
| bottom: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 2px;
| |
| background-color: var(--dune-gold);
| |
| } | |
|
| |
|
| /* Sidebar & Panels - game style */ | | /*───────────────────────────────────────── |
| .skin-pivot #nav, | | 4. NAVIGATION / HEADINGS |
| .skin-pivot #nav-wrapper, | | ─────────────────────────────────────────*/ |
| .skin-pivot .nav-content { | | .skin-pivot .navbar{background:var(--dune-darker)!important;border:none!important; |
| background: var(--dune-dark-transparent); | | height:var(--nav-height);display:flex;align-items:center;justify-content:center; |
| border: var(--border-thin) solid var(--dune-gold);
| | border-bottom:var(--border-thin) solid var(--dune-gold)!important;position:relative;} |
| color: var(--text-primary); | | .skin-pivot .navbar:before,.skin-pivot .navbar:after{content:'';position:absolute;height:var(--border-thin); |
| border-radius: var(--border-radius-sm);
| | background:var(--dune-gold);bottom:-1px;width:20px;} |
| position: relative;
| | .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;} |
|
| |
|
| .skin-pivot #nav:before, | | nav.tab-bar.hide-for-print{background:var(--dune-darker);border-bottom:var(--border-thin) solid var(--dune-gold); |
| .skin-pivot #nav:after, | | color:var(--dune-gold);height:var(--nav-height);display:flex;align-items:center;padding:0;} |
| .skin-pivot #nav-wrapper:before,
| | nav.tab-bar.hide-for-print a{color:var(--dune-gold);font-weight:bold;text-transform:uppercase;} |
| .skin-pivot #nav-wrapper:after {
| | nav.tab-bar.hide-for-print a:hover{color:var(--dune-gold-hover);text-decoration:none;} |
| content: ''; | |
| position: absolute;
| |
| width: 10px;
| |
| height: 10px;
| |
| border: var(--border-thin) solid var(--dune-gold);
| |
| } | |
|
| |
|
| .skin-pivot #nav:before, | | .skin-pivot h1,.skin-pivot h2,.skin-pivot h3,.skin-pivot h4,.skin-pivot h5,.skin-pivot h6{ |
| .skin-pivot #nav-wrapper:before { | | font-family:'Orbitron','Segoe UI',sans-serif!important;color:var(--dune-gold); |
| top: -1px; | | font-weight:bold;text-transform:uppercase;margin:1em 0 .5em 0;letter-spacing:.5px;border-bottom:none;} |
| left: -1px; | | .skin-pivot h1,.skin-pivot h3{border-bottom:var(--border-thin) solid var(--dune-gold-transparent);position:relative;} |
| border-right: none;
| | .skin-pivot h1:after,.skin-pivot h3:after{content:'';position:absolute;bottom:-1px;left:0;width:30px;height:3px; |
| border-bottom: none;
| | background:var(--dune-gold);} |
| } | |
|
| |
|
| .skin-pivot #nav:after, | | .skin-pivot a{color:var(--dune-gold);font-weight:bold;text-decoration:none;transition:var(--transition-standard);} |
| .skin-pivot #nav-wrapper:after { | | .skin-pivot a:hover{color:var(--dune-gold-hover);text-shadow:0 0 5px rgba(200,161,101,.4);} |
| bottom: -1px;
| | .skin-pivot a.new{color:var(--text-error)!important;} |
| right: -1px;
| | .skin-pivot a[href*="Journey"]{display:inline-block;padding:2px 8px;border:var(--border-thin) solid var(--dune-gold); |
| border-left: none;
| | 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));} |
| border-top: none; | |
| } | |
|
| |
|
| /* List items with game styling */ | | /*───────────────────────────────────────── |
| .skin-pivot .list-group-item {
| | 5. SIDEBAR / TOOLBOX HIDES |
| background: transparent;
| | ─────────────────────────────────────────*/ |
| border: none;
| |
| border-bottom: var(--border-thin) solid var(--gold-border-subtle);
| |
| color: var(--text-primary);
| |
| padding: 8px 10px;
| |
| transition: var(--transition-standard);
| |
| }
| |
| | |
| .skin-pivot .list-group-item:last-child {
| |
| border-bottom: none;
| |
| }
| |
| | |
| .skin-pivot .list-group-item:hover {
| |
| background-color: rgba(200, 161, 101, 0.1);
| |
| }
| |
| | |
| /* Panel Headings - game accurate */
| |
| .skin-pivot #nav h3,
| |
| .skin-pivot #nav-wrapper h3,
| |
| .skin-pivot .panel-heading {
| |
| background-color: rgba(200, 161, 101, 0.15);
| |
| border-bottom: var(--border-thin) solid var(--dune-gold);
| |
| color: var(--text-primary);
| |
| margin: 0;
| |
| padding: 8px 12px;
| |
| font-weight: bold;
| |
| text-transform: uppercase;
| |
| letter-spacing: 1px;
| |
| font-size: var(--font-size-sm);
| |
| position: relative;
| |
| display: flex;
| |
| align-items: center;
| |
| }
| |
| | |
| .skin-pivot #nav h3:before,
| |
| .skin-pivot #nav h3:after,
| |
| .skin-pivot #nav-wrapper h3:before,
| |
| .skin-pivot #nav-wrapper h3:after,
| |
| .skin-pivot .panel-heading:before,
| |
| .skin-pivot .panel-heading:after {
| |
| content: '';
| |
| display: inline-block;
| |
| width: 6px;
| |
| height: 6px;
| |
| background-color: var(--dune-gold);
| |
| margin: 0 8px;
| |
| }
| |
| | |
| /* Main content headings */
| |
| .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;
| |
| margin-top: 1em;
| |
| margin-bottom: 0.5em;
| |
| border-bottom: none;
| |
| text-transform: uppercase;
| |
| padding-bottom: 5px;
| |
| letter-spacing: 0.5px;
| |
| }
| |
| | |
| .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-color: var(--dune-gold);
| |
| }
| |
| | |
| /* Main headings and first heading - game style */
| |
| .skin-pivot h1.firstHeading,
| |
| .skin-pivot .page-header h1 {
| |
| /* Changed from var(--dune-title) to var(--dune-gold) */
| |
| color: var(--dune-gold);
| |
| font-size: var(--font-size-xxl);
| |
| font-weight: bold;
| |
| margin: 0 0 15px 0;
| |
| padding-bottom: 8px;
| |
| border-bottom: var(--border-thin) solid var(--dune-gold-transparent);
| |
| text-transform: uppercase;
| |
| letter-spacing: 1px;
| |
| position: relative;
| |
| }
| |
| | |
| .skin-pivot h1.firstHeading:after,
| |
| .skin-pivot .page-header h1:after {
| |
| content: '';
| |
| position: absolute;
| |
| bottom: -1px;
| |
| left: 0;
| |
| width: 50px;
| |
| height: 3px;
| |
| background: linear-gradient(to right, var(--dune-gold), rgba(200, 161, 101, 0));
| |
| }
| |
| | |
| /* Links site-wide - game style */
| |
| .skin-pivot a {
| |
| color: var(--dune-gold);
| |
| text-decoration: none;
| |
| font-weight: bold;
| |
| transition: var(--transition-standard);
| |
| position: relative;
| |
| }
| |
| | |
| .skin-pivot a:hover {
| |
| color: var(--dune-gold-hover);
| |
| text-decoration: none;
| |
| text-shadow: 0 0 5px rgba(200, 161, 101, 0.4);
| |
| }
| |
| | |
| .skin-pivot a.new,
| |
| .skin-pivot a.new:visited {
| |
| color: var(--text-error) !important;
| |
| text-decoration: none;
| |
| }
| |
| | |
| .skin-pivot a.new:hover {
| |
| color: #DD0000 !important;
| |
| }
| |
| | |
| /* Journey link text - special styling with diagonal edges */
| |
| .skin-pivot a[href*="Journey"] {
| |
| color: var(--dune-gold-hover) !important;
| |
| text-decoration: none !important;
| |
| font-weight: bold !important;
| |
| transition: var(--transition-standard) !important;
| |
| display: inline-block !important;
| |
| padding: 2px 8px !important;
| |
| border: var(--border-thin) solid var(--dune-gold) !important;
| |
| background-color: rgba(12, 10, 20, 0.6) !important;
| |
| /* Add subtle diagonal corners */
| |
| clip-path: polygon(
| |
| 0 0,
| |
| calc(100% - 5px) 0,
| |
| 100% 5px,
| |
| 100% 100%,
| |
| 5px 100%,
| |
| 0 calc(100% - 5px)
| |
| ) !important;
| |
| }
| |
| | |
| .skin-pivot a[href*="Journey"]:hover {
| |
| background-color: rgba(200, 161, 101, 0.1) !important;
| |
| }
| |
| | |
| /*--------------------------------------------------------------
| |
| # 5. PIVOT NAV OVERRIDES - GAME STYLE
| |
| --------------------------------------------------------------*/
| |
| .skin-pivot nav.tab-bar.hide-for-print {
| |
| background: var(--dune-darker);
| |
| border-bottom: var(--border-thin) solid var(--dune-gold);
| |
| /* Updated text color to use --dune-gold */
| |
| color: var(--dune-gold);
| |
| padding: 0;
| |
| height: var(--nav-height);
| |
| display: flex;
| |
| align-items: center;
| |
| }
| |
| | |
| .skin-pivot nav.tab-bar.hide-for-print a {
| |
| color: var(--dune-gold);
| |
| font-weight: bold;
| |
| text-transform: uppercase;
| |
| letter-spacing: 0.5px;
| |
| }
| |
| | |
| .skin-pivot nav.tab-bar.hide-for-print a:hover {
| |
| color: var(--dune-gold-hover);
| |
| text-decoration: none;
| |
| }
| |
| | |
| .skin-pivot nav.tab-bar.hide-for-print .title {
| |
| display: flex;
| |
| align-items: center;
| |
| height: 100%;
| |
| }
| |
| | |
| .skin-pivot nav.tab-bar.hide-for-print .title a {
| |
| /* Changed from var(--dune-title) to var(--dune-gold) */
| |
| color: var(--dune-gold);
| |
| font-size: var(--font-size-lg);
| |
| text-transform: uppercase;
| |
| letter-spacing: 1px;
| |
| padding: 0 15px;
| |
| height: 100%;
| |
| display: flex;
| |
| align-items: center;
| |
| border-right: var(--border-thin) solid rgba(200, 161, 101, 0.3);
| |
| }
| |
| | |
| .skin-pivot #left-nav-aside,
| |
| .skin-pivot #middle-nav,
| |
| .skin-pivot #right-nav-aside {
| |
| background-color: transparent;
| |
| /* Updated text color to use --dune-gold */
| |
| color: var(--dune-gold);
| |
| }
| |
| | |
| .skin-pivot li.name.logo img {
| |
| max-width: 100%;
| |
| height: auto;
| |
| display: inline-block;
| |
| vertical-align: middle;
| |
| margin-right: 10px;
| |
| }
| |
| | |
| /* Game-style search box */
| |
| .skin-pivot li.has-form {
| |
| padding: 0 10px;
| |
| }
| |
| | |
| .skin-pivot li.has-form input[type="search"] {
| |
| background: rgba(12, 10, 20, 0.6);
| |
| /* Updated text color to use --dune-gold */
| |
| color: var(--dune-gold);
| |
| border: var(--border-thin) solid var(--dune-gold);
| |
| padding: 5px 10px;
| |
| width: 100%;
| |
| height: 30px;
| |
| border-radius: var(--border-radius-sm);
| |
| outline: none;
| |
| transition: var(--transition-standard);
| |
| }
| |
| | |
| .skin-pivot li.has-form input[type="search"]:focus {
| |
| background: rgba(12, 10, 20, 0.8);
| |
| border-color: var(--dune-gold-hover);
| |
| box-shadow: 0 0 5px rgba(200, 161, 101, 0.3);
| |
| }
| |
| | |
| .skin-pivot li.has-form input[type="search"]::placeholder {
| |
| color: rgba(201, 183, 149, 0.6);
| |
| }
| |
| | |
| .skin-pivot label.sidebar {
| |
| background-color: transparent;
| |
| color: var(--dune-gold);
| |
| font-weight: bold;
| |
| text-transform: uppercase;
| |
| padding: 8px 12px;
| |
| margin: 0;
| |
| display: block;
| |
| border-bottom: var(--border-thin) solid rgba(200, 161, 101, 0.3);
| |
| letter-spacing: 0.5px;
| |
| font-size: var(--font-size-sm);
| |
| }
| |
| | |
| .skin-pivot li.mw-list-item {
| |
| position: relative;
| |
| }
| |
| | |
| .skin-pivot li.mw-list-item:before {
| |
| content: '•';
| |
| color: var(--dune-gold);
| |
| position: absolute;
| |
| left: 5px;
| |
| top: 7px;
| |
| font-size: 12px;
| |
| }
| |
| | |
| .skin-pivot li.mw-list-item a {
| |
| /* Updated text color to use --dune-gold */
| |
| color: var(--dune-gold);
| |
| text-decoration: none;
| |
| display: block;
| |
| padding: 6px 10px 6px 15px;
| |
| font-size: var(--font-size-sm);
| |
| border-bottom: var(--border-thin) solid rgba(200, 161, 101, 0.1);
| |
| transition: var(--transition-standard);
| |
| }
| |
| | |
| .skin-pivot li.mw-list-item:last-child a {
| |
| border-bottom: none;
| |
| }
| |
| | |
| .skin-pivot li.mw-list-item a:hover {
| |
| color: var(--dune-gold);
| |
| background-color: rgba(200, 161, 101, 0.1);
| |
| text-decoration: none;
| |
| }
| |
| | |
| /*--------------------------------------------------------------
| |
| # 6. SIDEBAR/HIDING TOOLS
| |
| --------------------------------------------------------------*/
| |
| html body.skin-pivot #p-tb, | | html body.skin-pivot #p-tb, |
| html body.skin-pivot #p-tb + ul, | | html body.skin-pivot #p-tb+ul, |
| html body.skin-pivot #p-tb + li, | | html body.skin-pivot #p-tb+li, |
| li[id^="t-"] { | | li[id^="t-"]{display:none!important;} |
| display: none !important;
| |
| }
| |
| | |
| /*--------------------------------------------------------------
| |
| # 7. RESPONSIVE LAYOUT - WIKI OPTIMIZED WITH EQUAL HEIGHT COLUMNS
| |
| --------------------------------------------------------------*/
| |
| .responsive-container {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| gap: 1em; /* Reduced from 1.5em to save space */
| |
| align-items: stretch; /* This helps with equal height */
| |
| width: 100%;
| |
| margin: 1em 0;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| .responsive-col {
| |
| display: flex;
| |
| flex-direction: column;
| |
| flex: 1 1 100%;
| |
| min-width: 300px !important;
| |
| max-width: 100%;
| |
| }
| |
| | |
| /* 2 columns at medium screens (>=600px) - reduced from 700px */
| |
| @media (min-width: 600px) {
| |
| .responsive-col {
| |
| flex: 1 1 calc((100% - 1em) / 2);
| |
| }
| |
| }
| |
| | |
| /* 3 columns at large screens (>=850px) - reduced from 900px */
| |
| @media (min-width: 850px) {
| |
| .responsive-col {
| |
| flex: 1 1 calc((100% - 2 * 1em) / 3);
| |
| }
| |
| }
| |
| | |
| /* Make all cards within columns fill available height */
| |
| .responsive-col .skin-pivot {
| |
| display: flex;
| |
| flex-direction: column;
| |
| flex: 1 1 auto;
| |
| height: 100%; /* Fill the column height */
| |
| }
| |
| | |
| /* Ensure dune-card fills the entire space */
| |
| .skin-pivot .dune-card {
| |
| display: flex;
| |
| flex-direction: column;
| |
| flex: 1 1 auto;
| |
| height: 100%; /* Fill the available height */
| |
| }
| |
| | |
| /* Ensure card inner content stretches */
| |
| .skin-pivot .dune-card-inner {
| |
| display: flex;
| |
| flex-direction: column;
| |
| flex: 1 1 auto;
| |
| height: 100%; /* Fill the available height */
| |
| overflow: hidden; /* Prevent content overflow */
| |
| }
| |
| | |
| /* Fix for table rows displaying correctly */
| |
| table.infobox-dune-standard-table tr:last-child td,
| |
| table.infobox-dune-two-column tr:last-child td {
| |
| border-bottom: none !important;
| |
| }
| |
| | |
| /* Ensure table cells don't expand beyond their container */
| |
| table.infobox-dune-standard-table,
| |
| table.infobox-dune-two-column {
| |
| table-layout: fixed;
| |
| width: 100%;
| |
| }
| |
| | |
| /* Fix for partial rows after tables */
| |
| .dune-table-wrapper {
| |
| overflow: hidden;
| |
| border-bottom: none; /* Ensure no extra border shows up */
| |
| }
| |
| | |
| /* Clear fix to prevent floating issues */
| |
| .dune-table-wrapper:after {
| |
| content: "";
| |
| display: table;
| |
| clear: both;
| |
| }
| |
| | |
| /* Add clearfix to card inner elements */
| |
| .dune-card-inner:after {
| |
| content: "";
| |
| display: table;
| |
| clear: both;
| |
| }
| |
| | |
| /* Fix for IE11 and older browsers */
| |
| @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
| |
| .responsive-container {
| |
| display: -ms-flexbox;
| |
| -ms-flex-wrap: wrap;
| |
| }
| |
|
| |
| .responsive-col {
| |
| display: -ms-flexbox;
| |
| -ms-flex-direction: column;
| |
| -ms-flex: 1 1 100%;
| |
| }
| |
|
| |
| .responsive-col .skin-pivot,
| |
| .skin-pivot .dune-card,
| |
| .skin-pivot .dune-card-inner {
| |
| display: -ms-flexbox;
| |
| -ms-flex-direction: column;
| |
| -ms-flex: 1 1 auto;
| |
| height: 100%;
| |
| }
| |
| }
| |
| | |
| /*--------------------------------------------------------------
| |
| # 8. TABLES - DUNE THEME FINAL (Light Theme with Borders)
| |
| --------------------------------------------------------------*/
| |
| | |
| /* === TWO-COLUMN TABLE === */
| |
| table.infobox-dune-two-column {
| |
| width: 100%;
| |
| table-layout: fixed;
| |
| border-collapse: separate;
| |
| border-spacing: 0;
| |
| background-color: var(--dune-panel-bg-light);
| |
| border-radius: var(--border-radius-sm);
| |
| border: none !important; /* Remove table border since wrapper has it */
| |
| box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
| |
| overflow: hidden;
| |
| clip-path: polygon(
| |
| 0 0,
| |
| 10px 0,
| |
| 100% 0,
| |
| 100% 10px,
| |
| 100% 100%,
| |
| calc(100% - 10px) 100%,
| |
| 0 100%,
| |
| 0 calc(100% - 10px)
| |
| ) !important;
| |
| }
| |
| | |
| table.infobox-dune-two-column th {
| |
| background-color: var(--dune-panel-bg-light);
| |
| padding: 0.75rem 0.5rem;
| |
| font-size: 0.95rem;
| |
| vertical-align: middle;
| |
| box-sizing: border-box;
| |
| color: var(--text-primary);
| |
| word-wrap: break-word;
| |
| overflow-wrap: break-word;
| |
| border-bottom: 1px solid var(--gold-border-subtle);
| |
| }
| |
| table.infobox-dune-two-column td {
| |
| text-align: right !important;
| |
| background-color: var(--dune-panel-bg-light);
| |
| padding: 0.75rem 0.5rem;
| |
| font-size: 0.95rem;
| |
| vertical-align: middle;
| |
| box-sizing: border-box;
| |
| color: var(--text-primary);
| |
| word-wrap: break-word;
| |
| overflow-wrap: break-word;
| |
| border-bottom: 1px solid var(--gold-border-subtle);
| |
| }
| |
| | |
| table.infobox-dune-two-column thead th {
| |
| color: var(--dune-gold);
| |
| font-weight: 600;
| |
| text-transform: uppercase;
| |
| letter-spacing: 0.05em;
| |
| text-align: left;
| |
| }
| |
| | |
| /* === STANDARD TABLE === */
| |
| table.infobox-dune-standard-table {
| |
| width: 100%;
| |
| table-layout: fixed;
| |
| border-collapse: separate;
| |
| border-spacing: 0;
| |
| background-color: var(--dune-panel-bg-light);
| |
| border-radius: var(--border-radius-sm);
| |
| border: none !important; /* Remove table border since wrapper has it */
| |
| box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
| |
| overflow: hidden;
| |
| margin-bottom: 0 !important;
| |
| }
| |
| | |
| table.infobox-dune-standard-table thead th {
| |
| background-color: var(--dune-panel-bg-dark); /* Only header row gets dark */
| |
| font-weight: 600;
| |
| text-transform: uppercase;
| |
| letter-spacing: 0.05em;
| |
| text-align: left;
| |
| border-bottom: 1px solid var(--gold-border-subtle);
| |
| color: var(--dune-gold);
| |
| }
| |
| | |
| table.infobox-dune-standard-table th,
| |
| table.infobox-dune-standard-table td {
| |
| background-color: var(--dune-panel-bg-light); /* All other rows use light */
| |
| padding: 0.75rem 0.5rem;
| |
| font-size: 0.95rem;
| |
| vertical-align: middle;
| |
| box-sizing: border-box;
| |
| color: var(--text-primary);
| |
| word-break: break-word;
| |
| white-space: normal;
| |
| overflow-wrap: break-word;
| |
| max-width: 1px;
| |
| }
| |
| | |
| table.infobox-dune-standard-table tbody td {
| |
| font-weight: 300;
| |
| }
| |
| | |
| /* === Icon containers === */
| |
| table.infobox-dune-standard-table th .icon,
| |
| table.infobox-dune-two-column th .icon {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| margin-right: 0.5em;
| |
| width: 1.2em;
| |
| color: var(--dune-gold);
| |
| }
| |
| | |
| /* === Hover === */
| |
| table.infobox-dune-standard-table tr:hover td,
| |
| table.infobox-dune-two-column tr:hover td,
| |
| table.infobox-dune-two-column tr:hover th {
| |
| background-color: rgba(200, 161, 101, 0.05);
| |
| }
| |
| | |
| /* === Bottom Border Cleanup === */
| |
| table.infobox-dune-standard-table tbody tr:not(:last-child) td,
| |
| table.infobox-dune-two-column tbody tr:not(:last-child) td,
| |
| table.infobox-dune-two-column tbody tr:not(:last-child) th {
| |
| border-bottom: 1px solid var(--gold-border-subtle);
| |
| }
| |
| | |
| table.infobox-dune-two-column tbody tr:last-child td,
| |
| table.infobox-dune-two-column tbody tr:last-child th,
| |
| table.infobox-dune-standard-table tr:last-child td {
| |
| border-bottom: none !important;
| |
| }
| |
| | |
| /* === Responsive tweaks === */
| |
| @media screen and (max-width: 600px) {
| |
| table.infobox-dune-two-column th,
| |
| table.infobox-dune-two-column td,
| |
| table.infobox-dune-standard-table th,
| |
| table.infobox-dune-standard-table td {
| |
| max-width: 100% !important;
| |
| padding: 0.5rem 0.3rem;
| |
| font-size: 0.85rem;
| |
| }
| |
| | |
| table.infobox-dune-standard-table thead th:nth-child(1),
| |
| table.infobox-dune-standard-table tbody td:nth-child(1) {
| |
| width: 28%;
| |
| }
| |
| | |
| table.infobox-dune-standard-table thead th:nth-child(2),
| |
| table.infobox-dune-standard-table tbody td:nth-child(2) {
| |
| width: 52%;
| |
| }
| |
| | |
| table.infobox-dune-standard-table thead th:nth-child(3),
| |
| table.infobox-dune-standard-table tbody td:nth-child(3) {
| |
| width: 20%;
| |
| }
| |
| }
| |
| | |
| @media screen and (max-width: 400px) {
| |
| table.infobox-dune-two-column,
| |
| table.infobox-dune-standard-table {
| |
| font-size: 0.8rem;
| |
| }
| |
| | |
| table.infobox-dune-two-column th,
| |
| table.infobox-dune-two-column td,
| |
| table.infobox-dune-standard-table th,
| |
| table.infobox-dune-standard-table td {
| |
| padding: 0.4rem 0.2rem;
| |
| }
| |
| }
| |
| | |
| table.infobox-dune-two-column tr,
| |
| table.infobox-dune-standard-table tr {
| |
| background-color: var(--dune-panel-bg-light) !important;
| |
| }
| |
| | |
| | |
| | |
| /* Table wrapper fixes */
| |
| .dune-table-wrapper {
| |
| border: var(--border-thin) solid #444;
| |
| border-radius: var(--border-radius-sm);
| |
| overflow: hidden;
| |
| width: 100%;
| |
| margin: 0 auto;
| |
| margin-bottom: 0 !important; /* Ensure no extra margin */
| |
| background-color: transparent !important; /* Ensure no background color */
| |
| }
| |
| | |
| /* Clear fix to prevent floating issues */
| |
| .dune-table-wrapper:after {
| |
| content: "";
| |
| display: table;
| |
| clear: both;
| |
| }
| |
| | |
| /* Specific fix for the partial row after tables */
| |
| .dune-card-infobox-left {
| |
| margin-bottom: 0 !important;
| |
| }
| |
| | |
| /* Ensure proper separation between sections */
| |
| .dune-card-related {
| |
| clear: both;
| |
| margin-top: 20px !important;
| |
| padding-top: 10px !important;
| |
| border-top: var(--border-thin) solid var(--gold-border-very-subtle);
| |
| }
| |
| | |
| /* Add clearfix to card inner elements */
| |
| .dune-card-inner:after {
| |
| content: "";
| |
| display: table;
| |
| clear: both;
| |
| }
| |
| | |
| /* Fix for tr-dark class to ensure it works for the dark header row */
| |
| tr.tr-dark th,
| |
| tr.tr-dark td,
| |
| .tr-dark {
| |
| background-color: var(--dune-panel-bg-dark) !important;
| |
| }
| |
| | |
| /* Override any other styling that might be interfering */
| |
| table.infobox-dune-standard-table tr.tr-dark th {
| |
| background-color: var(--dune-panel-bg-dark) !important;
| |
| color: var(--dune-gold);
| |
| }
| |
| | |
| /* Ensure the dark header appears in all views */
| |
| @media screen and (max-width: 600px) {
| |
| tr.tr-dark th,
| |
| tr.tr-dark td,
| |
| table.infobox-dune-standard-table tr.tr-dark th {
| |
| background-color: var(--dune-panel-bg-dark) !important;
| |
| }
| |
| }
| |
| | |
| /*--------------------------------------------------------------
| |
| # 9. DUNE CARD COMPONENT - WITH DIAGONAL EDGES
| |
| --------------------------------------------------------------*/
| |
| .skin-pivot .dune-card {
| |
| position: relative;
| |
| background-color: rgba(0, 0, 2, 0.7) !important;
| |
| color: var(--text-primary);
| |
| width: auto !important;
| |
| max-width: 100% !important;
| |
| padding: var(--spacing-lg) !important;
| |
| margin: 0 0 var(--spacing-xl) 0 !important;
| |
| border: var(--border-thin) solid var(--dune-gold) !important;
| |
| box-shadow: 0 0 8px rgba(0, 0, 0, 0.5) !important;
| |
| transition: box-shadow 0.3s ease;
| |
| overflow: visible !important;
| |
| clip-path: polygon(
| |
| 0 0,
| |
| 10px 0,
| |
| 100% 0,
| |
| 100% 10px,
| |
| 100% 100%,
| |
| calc(100% - 10px) 100%,
| |
| 0 100%,
| |
| 0 calc(100% - 10px)
| |
| ) !important;
| |
| }
| |
| | |
| .skin-pivot .dune-card:hover {
| |
| box-shadow: 0 0 12px rgba(200, 161, 101, 0.5) !important;
| |
| }
| |
| | |
| .skin-pivot .dune-card-decoration {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| pointer-events: none;
| |
| border: 2px solid var(--dune-gold);
| |
| border-radius: 6px;
| |
| transform: translate(4px, 4px);
| |
| display: none;
| |
| }
| |
| | |
| .skin-pivot .dune-card-inner {
| |
| position: relative;
| |
| z-index: 1;
| |
| }
| |
| | |
| .skin-pivot .dune-card-label {
| |
| /* Leaving the specific label color as-is */
| |
| color: #b6a896;
| |
| font-size: var(--font-size-xs);
| |
| text-transform: uppercase;
| |
| margin-bottom: 6px;
| |
| border-bottom: var(--border-thin) solid #444;
| |
| padding-bottom: 4px;
| |
| letter-spacing: 0.8px;
| |
| }
| |
| | |
| .skin-pivot .dune-card-title {
| |
| margin: 0;
| |
| font-size: var(--font-size-xl);
| |
| /* Updated text color to use --dune-gold */
| |
| color: var(--dune-gold);
| |
| text-transform: uppercase;
| |
| border-bottom: var(--border-thin) solid var(--dune-gold);
| |
| padding-bottom: 4px;
| |
| margin-bottom: 8px;
| |
| display: flex;
| |
| align-items: center;
| |
| position: relative;
| |
| }
| |
| | |
| .skin-pivot .dune-card-title::after {
| |
| content: '';
| |
| position: absolute;
| |
| bottom: -1px;
| |
| right: 0;
| |
| width: 12px;
| |
| height: 1px;
| |
| background-color: transparent;
| |
| border-bottom: 1px solid var(--dune-gold);
| |
| transform: rotate(-45deg);
| |
| transform-origin: bottom right;
| |
| }
| |
| | |
| .skin-pivot .dune-card-title .icon {
| |
| margin-right: 8px;
| |
| color: var(--dune-gold);
| |
| }
| |
| | |
| .skin-pivot .dune-card-description {
| |
| font-size: 1.1em !important;
| |
| line-height: 1.5 !important;
| |
| background-color: var(--dune-panel-bg-light) !important;
| |
| border-radius: var(--border-radius-sm);
| |
| border: var(--border-thin) solid #444;
| |
| padding: var(--spacing-md);
| |
| margin-bottom: var(--spacing-md);
| |
| display: block !important;
| |
| color: var(--text-primary) !important;
| |
| }
| |
| | |
| .skin-pivot .dune-card-image {
| |
| text-align: center;
| |
| margin: var(--spacing-sm) 0;
| |
| }
| |
| | |
| .skin-pivot .dune-card-image img {
| |
| max-width: 100%;
| |
| height: auto;
| |
| display: block;
| |
| margin: 0 auto;
| |
| }
| |
| | |
| | |
| .has-border {
| |
| border: 2px solid var(--dune-gold);
| |
| border-radius: 4px;
| |
| background-color: #262626;
| |
| display: inline-block;
| |
| padding: 4px;
| |
| max-width: 200px;
| |
| margin: 0 auto;
| |
| }
| |
| | |
| .card-image-border {
| |
| display: block;
| |
| margin: auto;
| |
| max-width: 100%;
| |
| max-height: 150px;
| |
| object-fit: contain;
| |
| border: 2px solid var(--dune-gold);
| |
| border-radius: 4px;
| |
| padding: 4px;
| |
| background-color: #262626;
| |
| }
| |
| | |
| .card-image-border {
| |
| display: block;
| |
| margin: auto;
| |
| max-width: 100%;
| |
| max-height: 150px;
| |
| object-fit: contain;
| |
| border: 2px solid var(--dune-gold);
| |
| border-radius: 4px;
| |
| padding: 4px;
| |
| background-color: #262626;
| |
| }
| |
| | |
| | |
| .skin-pivot .dune-card-video {
| |
| margin: var(--spacing-sm) 0;
| |
| border: var(--border-medium) solid var(--dune-gold);
| |
| border-radius: var(--border-radius-md);
| |
| padding: 2px;
| |
| background-color: #262626;
| |
| }
| |
| | |
| /*--------------------------------------------------------------
| |
| # 10. LOCKED BEHIND COMPONENT - KEPT FROM NEW VERSION
| |
| --------------------------------------------------------------*/
| |
| .skin-pivot .dune-card-locked {
| |
| margin: var(--spacing-lg) 0 !important;
| |
| background-color: var(--dune-panel-bg-light) !important;
| |
| border-radius: var(--border-radius-sm);
| |
| border: var(--border-thin) solid #444;
| |
| padding: var(--spacing-md) !important;
| |
| position: relative !important;
| |
| text-align: center !important;
| |
| }
| |
| | |
| .skin-pivot .dune-card-locked-label {
| |
| color: var(--dune-gold) !important;
| |
| font-weight: bold !important;
| |
| font-size: var(--font-size-sm) !important;
| |
| letter-spacing: 0.8px !important;
| |
| margin-bottom: var(--spacing-sm) !important;
| |
| border-bottom: var(--border-thin) solid rgba(200, 161, 101, 0.3) !important;
| |
| padding-bottom: var(--spacing-xs) !important;
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| justify-content: center !important;
| |
| text-transform: uppercase !important;
| |
| }
| |
| | |
| .skin-pivot .dune-card-locked-icon {
| |
| display: inline-flex !important;
| |
| align-items: center !important;
| |
| justify-content: center !important;
| |
| width: 18px !important;
| |
| height: 18px !important;
| |
| margin-right: var(--spacing-xs) !important;
| |
| color: var(--dune-gold) !important;
| |
| font-size: 16px !important;
| |
| }
| |
| | |
| .skin-pivot .dune-card-locked-value {
| |
| color: var(--dune-gold) !important;
| |
| font-weight: normal !important;
| |
| font-size: var(--font-size-md) !important;
| |
| border: var(--border-thin) solid rgba(22, 22, 24, 0.4) !important;
| |
| padding: var(--spacing-xs) var(--spacing-sm) !important;
| |
| background-color: rgba(22, 22, 24, 0.4) !important;
| |
| border-radius: var(--border-radius-sm) !important;
| |
| display: inline-block !important;
| |
| }
| |
| | |
| .skin-pivot .dune-card-locked-value a {
| |
| color: var(--dune-gold) !important;
| |
| }
| |
| | |
| .skin-pivot .locked-behind-header {
| |
| background-color: rgba(200, 161, 101, 0.15) !important;
| |
| border-bottom: var(--border-thin) solid var(--dune-gold) !important;
| |
| padding: var(--spacing-sm) var(--spacing-md) !important;
| |
| margin: -12px -12px 12px -12px !important;
| |
| position: relative !important;
| |
| text-transform: uppercase !important;
| |
| font-weight: bold !important;
| |
| color: var(--dune-gold) !important;
| |
| letter-spacing: 0.8px !important;
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| justify-content: center !important;
| |
| }
| |
| | |
| .skin-pivot .locked-behind-header .icon {
| |
| margin-right: var(--spacing-xs) !important;
| |
| }
| |
| | |
| /*--------------------------------------------------------------
| |
| # 11. GAME PANEL COMPONENT - WITH DIAGONAL EDGES
| |
| --------------------------------------------------------------*/
| |
| .skin-pivot .game-panel {
| |
| background: rgba(0, 0, 2, 0.7);
| |
| border: var(--border-thin) solid var(--dune-gold);
| |
| box-shadow: 0 0 8px rgba(0, 0, 0, 0.5) !important;
| |
| margin-bottom: var(--spacing-xl) !important;
| |
| position: relative;
| |
| padding: var(--spacing-md) !important;
| |
| overflow: visible !important;
| |
| clip-path: polygon(
| |
| 0 0,
| |
| 10px 0,
| |
| 100% 0,
| |
| 100% 10px,
| |
| 100% 100%,
| |
| calc(100% - 10px) 100%,
| |
| 0 100%,
| |
| 0 calc(100% - 10px)
| |
| ) !important;
| |
| } | |
|
| |
|
| .skin-pivot .game-panel-header { | | /*───────────────────────────────────────── |
| background-color: rgba(200, 161, 101, 0.15);
| | 6. RESPONSIVE GRID (shared by all templates) |
| border-bottom: 1px solid var(--dune-gold);
| | ─────────────────────────────────────────*/ |
| padding: 6px 10px;
| | .responsive-container{display:flex;flex-wrap:wrap;gap:1em;align-items:stretch;width:100%;margin:1em 0;box-sizing:border-box;} |
| margin: -12px -12px 12px -12px !important;
| | .responsive-col{display:flex;flex-direction:column;flex:1 1 100%;min-width:300px!important;} |
| position: relative;
| | @media(min-width:600px){.responsive-col{flex:1 1 calc((100% - 1em)/2);}} |
| text-transform: uppercase;
| | @media(min-width:850px){.responsive-col{flex:1 1 calc((100% - 2*1em)/3);}} |
| font-weight: bold;
| |
| /* Updated text color to use --dune-gold */
| |
| color: var(--dune-gold);
| |
| letter-spacing: 0.5px;
| |
| display: flex;
| |
| align-items: center;
| |
| } | |
|
| |
|
| .skin-pivot .game-panel-header::after { | | .responsive-col .skin-pivot, |
| content: '';
| | .skin-pivot .dune-card, |
| position: absolute;
| | .skin-pivot .dune-card-inner{display:flex;flex-direction:column;flex:1 1 auto;height:100%;} |
| bottom: -1px;
| |
| right: 0;
| |
| width: 12px;
| |
| height: 1px;
| |
| background-color: transparent;
| |
| border-bottom: 1px solid var(--dune-gold);
| |
| transform: rotate(-45deg);
| |
| transform-origin: bottom right;
| |
| } | |
|
| |
|
| .skin-pivot .game-panel-header::before {
| | /*───────────────────────────────────────── |
| content: '';
| | 7. MISC UTILITY FIXES |
| display: inline-block;
| | ─────────────────────────────────────────*/ |
| width: 12px;
| | .mw-body-content,.skin-pivot .mw-body,#content,#mw-content-text{overflow:visible!important;} |
| height: 12px;
| |
| border-top: 2px solid var(--dune-gold);
| |
| border-left: 2px solid var(--dune-gold);
| |
| transform: rotate(-45deg);
| |
| margin: 0 12px;
| |
| }
| |
| | |
| .skin-pivot .game-panel-content {
| |
| padding: 8px 12px;
| |
| color: var(--text-primary);
| |
| font-size: 0.9em;
| |
| overflow: visible !important;
| |
| }
| |
| | |
| /*-------------------------------------------------------------- | |
| # 12. UI ELEMENTS - GAME ACCURATE
| |
| --------------------------------------------------------------*/
| |
| /* Resource Item - game style */
| |
| .skin-pivot .resource {
| |
| display: inline-flex !important;
| |
| align-items: center !important;
| |
| padding: var(--spacing-xs) var(--spacing-sm) !important;
| |
| background-color: rgba(12, 10, 20, 0.6);
| |
| border: var(--border-thin) solid var(--gold-border-subtle);
| |
| border-radius: var(--border-radius-sm);
| |
| margin: 0 5px 5px 0 !important;
| |
| /* Updated text color to use --dune-gold */
| |
| color: var(--dune-gold);
| |
| position: relative;
| |
| }
| |
| | |
| .skin-pivot .resource:before,
| |
| .skin-pivot .resource:after {
| |
| content: '';
| |
| position: absolute;
| |
| width: 4px;
| |
| height: 4px;
| |
| background-color: var(--dune-gold);
| |
| }
| |
| | |
| .skin-pivot .resource:before {
| |
| top: -2px;
| |
| left: -2px;
| |
| }
| |
| | |
| .skin-pivot .resource:after {
| |
| bottom: -2px;
| |
| right: -2px;
| |
| }
| |
| | |
| .skin-pivot .resource .resource-icon {
| |
| margin-right: var(--spacing-xs);
| |
| color: var(--dune-gold);
| |
| }
| |
| | |
| .skin-pivot .resource .resource-amount {
| |
| font-weight: bold;
| |
| color: var(--dune-gold);
| |
| }
| |
| | |
| /* Buttons - game style */
| |
| .skin-pivot .game-button {
| |
| background: linear-gradient(to bottom, var(--dune-gold), var(--dune-gold-dark));
| |
| border: var(--border-thin) solid var(--dune-gold);
| |
| /* Button text using a contrasting light tone */
| |
| color: #E2D3AE;
| |
| padding: 8px 12px;
| |
| border-radius: 3px;
| |
| cursor: pointer;
| |
| text-transform: uppercase;
| |
| font-size: var(--font-size-sm);
| |
| letter-spacing: 0.5px;
| |
| transition: all 0.2s ease;
| |
| position: relative;
| |
| text-align: center;
| |
| display: inline-block;
| |
| }
| |
| | |
| .skin-pivot .game-button:hover {
| |
| background: linear-gradient(to bottom, var(--dune-gold-hover), var(--dune-gold));
| |
| box-shadow: 0 0 8px rgba(200, 161, 101, 0.5);
| |
| }
| |
| | |
| .skin-pivot .game-button:active {
| |
| top: 1px;
| |
| }
| |
| | |
| /* Progress Bar - game style */
| |
| .skin-pivot .progress-bar {
| |
| height: 10px;
| |
| background-color: rgba(15, 20, 25, 0.8);
| |
| border: var(--border-thin) solid var(--dune-gold);
| |
| border-radius: 5px;
| |
| overflow: hidden;
| |
| margin: 5px 0;
| |
| position: relative;
| |
| }
| |
| | |
| .skin-pivot .progress-fill {
| |
| height: 100%;
| |
| background: linear-gradient(to right, var(--dune-gold), var(--dune-gold-hover));
| |
| width: 0%;
| |
| transition: width 0.3s ease;
| |
| }
| |
| | |
| /* Tooltip - game style */
| |
| .skin-pivot .tooltip {
| |
| position: relative;
| |
| display: inline-block;
| |
| cursor: help;
| |
| }
| |
| | |
| .skin-pivot .tooltip .tooltip-text {
| |
| visibility: hidden;
| |
| width: 200px;
| |
| background-color: #1F2A37;
| |
| color: var(--text-primary);
| |
| text-align: center;
| |
| border: var(--border-thin) solid var(--dune-gold);
| |
| border-radius: 5px;
| |
| padding: 8px;
| |
| position: absolute;
| |
| z-index: 1;
| |
| bottom: 125%;
| |
| left: 50%;
| |
| margin-left: -100px;
| |
| opacity: 0;
| |
| transition: opacity 0.3s;
| |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
| |
| font-size: 0.85em;
| |
| }
| |
| | |
| .skin-pivot .tooltip:hover .tooltip-text {
| |
| visibility: visible;
| |
| opacity: 1;
| |
| }
| |
| | |
| /* Badge Indicators */
| |
| .skin-pivot .badge {
| |
| display: inline-block;
| |
| padding: 3px 6px;
| |
| border-radius: 3px;
| |
| font-size: 0.75em;
| |
| margin-left: 5px;
| |
| text-transform: uppercase;
| |
| }
| |
| | |
| .skin-pivot .badge-functional {
| |
| background-color: rgba(65, 130, 65, 0.3);
| |
| border: var(--border-thin) solid #5a9d5a;
| |
| color: #a3d9a3;
| |
| }
| |
| | |
| .skin-pivot .badge-locked {
| |
| background-color: rgba(130, 65, 65, 0.3);
| |
| border: var(--border-thin) solid #9d5a5a;
| |
| color: #d9a3a3;
| |
| }
| |
| | |
| /* Animation for loading */
| |
| @keyframes pulsate {
| |
| 0%, 100% { opacity: 0.6; }
| |
| 50% { opacity: 1; }
| |
| }
| |
| | |
| .skin-pivot .loading {
| |
| animation: pulsate 1.5s infinite;
| |
| }
| |
| | |
| /* Breadcrumbs - game style */
| |
| .skin-pivot .breadcrumbs-container,
| |
| .skin-pivot .breadcrumb-trail {
| |
| background: transparent;
| |
| border: none;
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
| | |
| .skin-pivot .breadcrumb-trail {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| padding: 5px 0;
| |
| /* Updated text color to use --dune-gold */
| |
| color: var(--dune-gold);
| |
| font-size: var(--font-size-sm);
| |
| }
| |
| | |
| .skin-pivot .breadcrumb-trail a {
| |
| /* Updated text color to use --dune-gold */
| |
| color: var(--dune-gold);
| |
| transition: var(--transition-standard);
| |
| }
| |
| | |
| .skin-pivot .breadcrumb-trail a:hover {
| |
| color: var(--dune-gold);
| |
| text-decoration: none;
| |
| }
| |
| | |
| .skin-pivot .breadcrumb-trail .separator {
| |
| margin: 0 8px;
| |
| color: var(--dune-gold);
| |
| }
| |
| | |
| .skin-pivot .breadcrumb-unavailable {
| |
| background-color: rgba(15, 20, 25, 0.6);
| |
| border: var(--border-thin) solid var(--dune-gold);
| |
| padding: 5px 10px;
| |
| margin-bottom: 10px;
| |
| /* Updated text color to use --dune-gold */
| |
| color: var(--dune-gold);
| |
| font-size: 0.9em;
| |
| border-radius: var(--border-radius-sm);
| |
| }
| |
| | |
| /* Misc elements */
| |
| .skin-pivot .fromdb {
| |
| color: var(--text-secondary);
| |
| font-size: 0.85em;
| |
| margin: -5px 0 15px 0;
| |
| opacity: 0.7;
| |
| font-style: italic;
| |
| }
| |
| | |
| .skin-pivot .video-container {
| |
| border: var(--border-thin) solid var(--dune-gold);
| |
| overflow: hidden;
| |
| margin: 0 0 15px 0 !important;
| |
| position: relative;
| |
| clip-path: polygon(
| |
| 0 0,
| |
| 10px 0,
| |
| 100% 0,
| |
| 100% 10px,
| |
| 100% 100%,
| |
| calc(100% - 10px) 100%,
| |
| 0 100%,
| |
| 0 calc(100% - 10px)
| |
| ) !important;
| |
| }
| |
| | |
| .skin-pivot .related-buildings {
| |
| padding: 8px;
| |
| background-color: rgba(15, 20, 25, 0.4);
| |
| }
| |
| | |
| .skin-pivot .related-buildings p {
| |
| margin: 5px 0;
| |
| /* Updated text color to use --dune-gold */
| |
| color: var(--dune-gold);
| |
| font-size: 0.9em;
| |
| }
| |
| | |
| .skin-pivot .schematic-section,
| |
| .skin-pivot .crafting-section,
| |
| .skin-pivot .tutorials-section {
| |
| margin-bottom: 10px;
| |
| }
| |
| | |
| .skin-pivot .schematic-section .game-panel,
| |
| .skin-pivot .crafting-section .game-panel,
| |
| .skin-pivot .tutorials-section .game-panel {
| |
| margin-bottom: 8px;
| |
| }
| |
| | |
| /*--------------------------------------------------------------
| |
| # 13. INVENTORY UI STYLING - GAME ACCURATE
| |
| --------------------------------------------------------------*/
| |
| /* Game-accurate inventory grid */
| |
| .skin-pivot .inventory-grid { | |
| display: grid;
| |
| grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
| |
| gap: 4px;
| |
| padding: 5px;
| |
| background-color: rgba(12, 10, 20, 0.8);
| |
| border: var(--border-thin) solid var(--dune-gold);
| |
| position: relative;
| |
| clip-path: polygon(
| |
| 0 0,
| |
| 10px 0,
| |
| 100% 0,
| |
| 100% 10px,
| |
| 100% 100%,
| |
| calc(100% - 10px) 100%,
| |
| 0 100%,
| |
| 0 calc(100% - 10px)
| |
| ) !important;
| |
| }
| |
| | |
| /* Game-style inventory slot */
| |
| .skin-pivot .inventory-slot { | |
| background-color: rgba(22, 22, 24, 0.8);
| |
| border: var(--border-thin) solid var(--gold-border-subtle);
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| height: 75px;
| |
| width: 75px;
| |
| transition: var(--transition-standard);
| |
| position: relative;
| |
| }
| |
| | |
| /* Empty slot styling */
| |
| .skin-pivot .inventory-slot.empty {
| |
| background-image:
| |
| linear-gradient(to bottom right, transparent calc(50% - 1px), var(--gold-border-subtle), transparent calc(50% + 1px));
| |
| }
| |
| | |
| /* Corner accents for inventory slots */
| |
| .skin-pivot .inventory-slot:before, | |
| .skin-pivot .inventory-slot:after {
| |
| content: '';
| |
| position: absolute;
| |
| width: 3px;
| |
| height: 3px;
| |
| }
| |
| | |
| .skin-pivot .inventory-slot:before {
| |
| top: -1px;
| |
| left: -1px;
| |
| border-top: var(--border-thin) solid var(--dune-gold);
| |
| border-left: var(--border-thin) solid var(--dune-gold);
| |
| }
| |
| | |
| .skin-pivot .inventory-slot:after {
| |
| bottom: -1px;
| |
| right: -1px;
| |
| border-bottom: var(--border-thin) solid var(--dune-gold);
| |
| border-right: var(--border-thin) solid var(--dune-gold);
| |
| }
| |
| | |
| .skin-pivot .inventory-slot:hover {
| |
| border-color: var(--dune-gold);
| |
| box-shadow: 0 0 5px rgba(200, 161, 101, 0.4) inset;
| |
| }
| |
| | |
| /* Item image within slot */
| |
| .skin-pivot .inventory-slot img {
| |
| max-width: 85%;
| |
| max-height: 85%;
| |
| }
| |
| | |
| /* Selected slot styling */
| |
| .skin-pivot .dune-selected {
| |
| border: var(--border-thin) solid var(--dune-gold) !important;
| |
| box-shadow: 0 0 8px rgba(200, 161, 101, 0.5) inset, 0 0 2px var(--dune-gold) !important;
| |
| background-color: rgba(200, 161, 101, 0.1) !important;
| |
| }
| |
| | |
| /* Item count/stack indicator */
| |
| .skin-pivot .item-count {
| |
| position: absolute;
| |
| bottom: 2px;
| |
| right: 2px;
| |
| background-color: rgba(12, 10, 20, 0.8);
| |
| /* Updated text color to use --dune-gold */
| |
| color: var(--dune-gold);
| |
| font-size: 10px;
| |
| padding: 1px 3px;
| |
| border-radius: 2px;
| |
| border: var(--border-thin) solid rgba(200, 161, 101, 0.5);
| |
| min-width: 14px;
| |
| text-align: center;
| |
| }
| |
| | |
| /* Item quality/rarity indicator */
| |
| .skin-pivot .item-quality {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 3px;
| |
| }
| |
| | |
| .skin-pivot .item-quality.common {
| |
| background-color: #a0a0a0;
| |
| }
| |
| | |
| .skin-pivot .item-quality.uncommon {
| |
| background-color: #2d862d;
| |
| }
| |
| | |
| .skin-pivot .item-quality.rare {
| |
| background-color: #2970c3;
| |
| }
| |
| | |
| .skin-pivot .item-quality.epic {
| |
| background-color: #9c43c8;
| |
| }
| |
| | |
| .skin-pivot .item-quality.legendary {
| |
| background-color: #cf7a30;
| |
| }
| |
| | |
| /* Section header - game accurate */
| |
| .skin-pivot .section-header {
| |
| background-color: rgba(12, 10, 20, 0.8);
| |
| border: var(--border-thin) solid var(--dune-gold);
| |
| /* Updated text color to use --dune-gold */
| |
| color: var(--dune-gold);
| |
| padding: 5px 10px;
| |
| font-size: var(--font-size-sm);
| |
| text-transform: uppercase;
| |
| letter-spacing: 1px;
| |
| display: flex;
| |
| align-items: center;
| |
| position: relative;
| |
| margin-bottom: 5px;
| |
| font-weight: bold;
| |
| }
| |
| | |
| .skin-pivot .section-header:before,
| |
| .skin-pivot .section-header:after {
| |
| content: '';
| |
| position: absolute;
| |
| width: 6px;
| |
| height: 6px;
| |
| border: var(--border-thin) solid var(--dune-gold);
| |
| }
| |
| | |
| .skin-pivot .section-header:before {
| |
| top: -3px;
| |
| left: -3px;
| |
| border-right: none;
| |
| border-bottom: none;
| |
| }
| |
| | |
| .skin-pivot .section-header:after {
| |
| bottom: -3px;
| |
| right: -3px;
| |
| border-left: none;
| |
| border-top: none;
| |
| }
| |
| | |
| /* Experience bar - game style */
| |
| .skin-pivot .xp-bar {
| |
| height: 6px;
| |
| width: 100%;
| |
| background-color: rgba(12, 10, 20, 0.6);
| |
| border: var(--border-thin) solid var(--dune-gold);
| |
| position: relative;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .skin-pivot .xp-progress {
| |
| height: 100%;
| |
| background: linear-gradient(to right, var(--dune-gold), var(--dune-gold-hover));
| |
| width: 0%;
| |
| }
| |
| | |
| .skin-pivot .xp-level {
| |
| position: absolute;
| |
| right: 10px;
| |
| top: -18px;
| |
| background-color: rgba(12, 10, 20, 0.8);
| |
| border: var(--border-thin) solid var(--dune-gold);
| |
| /* Updated text color to use --dune-gold */
| |
| color: var(--dune-gold);
| |
| padding: 2px 6px;
| |
| font-size: var(--font-size-xs);
| |
| letter-spacing: 0.5px;
| |
| }
| |
| | |
| | |
| /*───────────────────────────────────────────────
| |
| 14. RESOURCE CARD – simplified tooltip style
| |
| ───────────────────────────────────────────────*/
| |
| .skin-pivot .dune-card.dune-resource-card {
| |
| /* override the base dune-card background only */
| |
| --resource-tint: #ce6b25; /* default orange */
| |
| background: linear-gradient(
| |
| to bottom,
| |
| var(--resource-tint) 0%,
| |
| rgba(0,0,2,.75) 60%
| |
| ) !important;
| |
| padding: var(--spacing-md);
| |
| }
| |
| | |
| /* local sub-elements */
| |
| .dune-resource-header {
| |
| display:flex; flex-direction:column;
| |
| background: var(--dune-darker);
| |
| border: var(--border-thin) solid var(--dune-gold);
| |
| padding: 4px 8px;
| |
| font-size: var(--font-size-sm);
| |
| text-transform: uppercase;
| |
| letter-spacing:.8px;
| |
| color: var(--dune-gold);
| |
| }
| |
| | |
| .dune-resource-title { font-size:1.3rem; font-weight:bold; color:var(--text-highlight); }
| |
| .dune-resource-meta { margin-top:2px; font-size:.8rem; color:var(--text-secondary); }
| |
| | |
| .dune-resource-thumb { text-align:center; margin:10px 0; }
| |
| .dune-resource-thumb img{
| |
| max-width:120px; max-height:120px; object-fit:contain;
| |
| }
| |
| | |
| .dune-resource-desc {
| |
| background: var(--dune-panel-bg-light);
| |
| border: var(--border-thin) solid #444;
| |
| padding: var(--spacing-sm);
| |
| font-size:.95rem;
| |
| line-height:1.45;
| |
| color: var(--text-primary);
| |
| }
| |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| /* Orbitron Font for UI Headings */
| |
| | |
| /* Hero Section – Radar Theme Overlay */
| |
| .dune-hero {
| |
| width: 100vw;
| |
| position: relative;
| |
| left: 50%;
| |
| right: 50%;
| |
| margin-left: -50vw;
| |
| margin-right: -50vw;
| |
| background: none; /* transparent, show radar bg */
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| min-height: 320px;
| |
| z-index: 5;
| |
| border-bottom: 2px solid var(--dune-accent-bronze);
| |
| box-shadow: 0 8px 24px 0 rgba(0,0,0,0.10); /* subtle shadow for floating effect */
| |
| }
| |
| | |
| .dune-hero--inner {
| |
| background: rgba(14, 12, 21, 0.84);
| |
| border-radius: 2rem;
| |
| box-shadow: 0 0 32px 6px var(--dune-accent-bronze);
| |
| padding: 2.5rem 2rem;
| |
| max-width: 720px;
| |
| margin: 3rem auto;
| |
| text-align: center;
| |
| backdrop-filter: blur(3px);
| |
| /* Orbitron for the whole hero */
| |
| font-family: 'Orbitron', 'Segoe UI', sans-serif;
| |
| }
| |
| | |
| .dune-hero h1 {
| |
| font-size: 2.7rem;
| |
| color: var(--dune-gold);
| |
| margin-bottom: 0.75rem;
| |
| font-family: 'Orbitron', 'Segoe UI', sans-serif;
| |
| font-weight: 700;
| |
| letter-spacing: 0.04em;
| |
| text-transform: uppercase;
| |
| }
| |
| | |
| .dune-hero p {
| |
| color: var(--dune-gold-dark);
| |
| font-size: 1.13rem;
| |
| margin-top: 0;
| |
| margin-bottom: 0;
| |
| letter-spacing: 0.01em;
| |
| font-family: 'Orbitron', 'Segoe UI', sans-serif;
| |
| }
| |
| | |
| /* Dune Card Grid */
| |
| .dune-card-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
| |
| gap: 1.5rem;
| |
| }
| |
| | |
| /* DuneCard – Overlaid UI Card */
| |
| .dune-card {
| |
| background: rgba(26, 23, 36, 0.89);
| |
| border: 1.5px solid var(--dune-accent-bronze);
| |
| border-radius: 1rem;
| |
| box-shadow: 0 0 18px 2px var(--dune-accent-bronze);
| |
| padding: 1.5rem;
| |
| color: var(--text-primary);
| |
| font-family: 'Orbitron', 'Segoe UI', sans-serif;
| |
| display: flex;
| |
| flex-direction: column;
| |
| height: 100%;
| |
| }
| |
| | |
| .dune-card h3 {
| |
| margin: 0 0 .5rem;
| |
| color: var(--dune-gold);
| |
| font-size: 1.3rem;
| |
| font-family: 'Orbitron', 'Segoe UI', sans-serif;
| |
| letter-spacing: 0.02em;
| |
| text-transform: uppercase;
| |
| font-weight: 700;
| |
| }
| |
| | |
| .dune-card {
| |
| background: rgba(26, 23, 36, 0.93);
| |
| border: 1.5px solid var(--dune-accent-bronze);
| |
| border-radius: 1.2rem;
| |
| box-shadow: 0 0 24px 4px var(--dune-accent-bronze);
| |
| padding: 2rem 1.3rem 1.3rem 1.3rem;
| |
| color: var(--text-primary);
| |
| display: flex;
| |
| flex-direction: column;
| |
| align-items: center;
| |
| min-height: 310px;
| |
| position: relative;
| |
| transition: box-shadow 0.2s;
| |
| }
| |
| | |
| .dune-card:hover {
| |
| box-shadow: 0 0 32px 10px var(--dune-accent-bronze);
| |
| }
| |
| | |
| .dune-card-icon {
| |
| margin-bottom: .3rem;
| |
| font-size: 2.2rem;
| |
| text-align: center;
| |
| filter: drop-shadow(0 0 6px var(--dune-accent-bronze));
| |
| }
| |
| | |
| .dune-card-title {
| |
| font-size: 1.22rem;
| |
| font-family: 'Orbitron', 'Segoe UI', sans-serif;
| |
| font-weight: 700;
| |
| letter-spacing: 0.03em;
| |
| color: var(--dune-gold);
| |
| margin-bottom: 0.1rem;
| |
| text-transform: uppercase;
| |
| text-align: center;
| |
| }
| |
| | |
| .dune-card-bar {
| |
| width: 80%;
| |
| height: 3px;
| |
| background: linear-gradient(90deg, var(--dune-accent-bronze) 0%, transparent 100%);
| |
| border-radius: 2px;
| |
| margin: 0.7rem auto 1rem auto;
| |
| }
| |
| | |
| .dune-card-desc {
| |
| color: var(--dune-fg-muted);
| |
| text-align: center;
| |
| font-size: 1.04rem;
| |
| margin-bottom: 1.1rem;
| |
| flex: 1 1 auto;
| |
| }
| |
| | |
| .dune-card-btn {
| |
| background: var(--dune-accent-bronze);
| |
| color: #191919 !important;
| |
| padding: 0.5rem 1.1rem;
| |
| border-radius: 0.7rem;
| |
| font-weight: 800;
| |
| text-transform: uppercase;
| |
| font-size: 1rem;
| |
| letter-spacing: 0.05em;
| |
| margin-top: 0.5rem;
| |
| text-align: center;
| |
| text-decoration: none !important;
| |
| border: none;
| |
| box-shadow: 0 0 8px 0 var(--dune-accent-bronze);
| |
| transition: background 0.18s, color 0.18s;
| |
| display: inline-block;
| |
| }
| |
| | |
| .dune-card-btn:hover {
| |
| background: var(--dune-gold-hover);
| |
| color: #222 !important;
| |
| }
| |
| | |
| .dune-card-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
| |
| gap: 2rem;
| |
| margin: 2.2rem auto 2.7rem auto;
| |
| max-width: 1200px;
| |
| }
| |
| .dune-whatsnew {
| |
| background: rgba(26, 23, 36, 0.96);
| |
| border-left: 4px solid var(--dune-accent-bronze);
| |
| color: var(--dune-gold);
| |
| padding: 1.1rem 1.5rem;
| |
| border-radius: 0.9rem;
| |
| font-family: 'Orbitron', 'Segoe UI', sans-serif;
| |
| margin: 2rem 0 2rem 0;
| |
| font-size: 1.08rem;
| |
| box-shadow: 0 0 12px 0 var(--dune-accent-bronze);
| |
| letter-spacing: 0.01em;
| |
| }
| |
| .dune-whatsnew strong {
| |
| color: var(--dune-accent-bronze);
| |
| }
| |
| | |
| .lore-spotlight h2,
| |
| .dune-card-grid h2,
| |
| h2 {
| |
| color: var(--dune-fg-light);
| |
| font-family: 'Orbitron', 'Segoe UI', sans-serif;
| |
| font-size: 1.35rem;
| |
| text-transform: uppercase;
| |
| letter-spacing: 0.02em;
| |
| margin: 1.8rem 0 1rem 0;
| |
| }
| |
| | |
| /* Responsive adjustments for hero overlay */
| |
| @media (max-width: 900px) {
| |
| .dune-hero--inner { padding: 1.3rem 0.7rem; max-width: 96vw; }
| |
| .dune-hero { min-height: 200px; }
| |
| .dune-card { padding: 1rem; }
| |
| }
| |
| | |
| @media (max-width: 500px) {
| |
| .dune-hero--inner { padding: 0.8rem 0.2rem; }
| |
| .dune-hero h1 { font-size: 1.5rem; }
| |
| } | |
