Template:JourneyPage/styles.css

/* ====================================================================
   Template:JourneyPage/styles.css  ▸  Consolidated 2025‑05‑28
   --------------------------------------------------------------------
   • Duplicate selector blocks merged – the *last‑defined* values win.
   • Formatting normalised (sections + comments) for easier maintenance.
   • No visual rules intentionally removed; gradients, fonts, shadows intact.
   • Still MediaWiki‑safe (no CSS vars) – but keep an eye on font warnings.
   ==================================================================== */

/* ========== 1. BASE LAYOUT ================================================= */
.journey-main-container {
  display:flex; gap:12px; padding:12px 0; max-width:100%; margin:0 auto;
  font-family:'Rajdhani',sans-serif; position:relative; height:840px; min-height:740px;
  overflow:hidden; align-items:stretch; background:rgba(0,0,2,.3);
  border:2px solid rgba(252,231,200,.2);
}
.journey-main-container::before {
  content:''; inset:0; position:absolute;
  background-image:repeating-linear-gradient(45deg,transparent,transparent 35px,rgba(252,231,200,.01) 35px,rgba(252,231,200,.01) 70px);
  z-index:-1;
}

/* ========== 2. LEFT COLUMN – CATEGORIES =================================== */
.journey-categories {
  flex:0 0 60%; display:flex; flex-direction:column; gap:15px;
  overflow-y:auto; overflow-x:hidden; padding-right:10px; max-height:100%;
}

/* ========== 3. SECTION WRAPPER ============================================ */
.journey-section {
  background:linear-gradient(135deg,rgba(0,0,2,.9) 0%,rgba(12,10,20,.9) 100%);
  border:2px solid rgba(252,231,200,.2); box-shadow:inset 0 0 20px rgba(0,0,0,.5),0 2px 10px rgba(0,0,0,.8);
  padding:15px; position:relative; overflow:hidden; transition:.3s; flex-shrink:0;
}
.journey-section::before { content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent 0%,#fce7c8 50%,transparent 100%); opacity:.3; }
.journey-section:hover { border-color:rgba(252,231,200,.4); box-shadow:inset 0 0 30px rgba(252,231,200,.05),0 2px 20px rgba(252,231,200,.1); }

/* SECTION HEADER */
.journey-section-header {
  display:flex; align-items:center; gap:12px; margin:8px 0 15px; padding:12px 0;
  border-bottom:1px solid rgba(252,231,200,.2);
}
.section-icon { width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  font-size:24px; color:#E3BB7A; text-shadow:0 0 10px rgba(227,187,122,.5); }
.section-icon img { width:100%; height:100%; object-fit:contain; }
.section-title { font-family:'Orbitron',sans-serif; font-size:18px; font-weight:700; text-transform:uppercase;
  letter-spacing:2px; color:#fce7c8; text-shadow:0 0 15px rgba(252,231,200,.4); margin:0; line-height:1; }

/* ========== 4. GRID + CARD ================================================= */
.journey-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
@media(min-width:1200px){ .journey-grid{ grid-template-columns:repeat(5,1fr);} }

/* CARD */
.journey-card {
  background:linear-gradient(135deg,rgba(0,0,2,.8) 0%,rgba(12,10,20,.8) 100%);
  border:2px solid rgba(252,231,200,.2); cursor:pointer; transition:.3s; position:relative; overflow:hidden; height:130px;
}
.journey-card::before { content:''; inset:-2px; position:absolute; background:linear-gradient(45deg,transparent 30%,#fce7c8 50%,transparent 70%); opacity:0; transition:opacity .3s; z-index:-1; }
.journey-card:hover { transform:translateY(-2px); border-color:#fce7c8; box-shadow:0 5px 20px rgba(252,231,200,.2),inset 0 0 20px rgba(252,231,200,.05); }
.journey-card:hover::before { opacity:.3; }
.journey-card.active { border-color:#a855f7; box-shadow:0 0 30px rgba(168,85,247,.4),inset 0 0 20px rgba(168,85,247,.1); }
.journey-card.completed { opacity:.7; }
.journey-card.completed::after { content:'✓'; position:absolute; top:5px; right:8px; color:#fce7c8; font-size:20px; font-weight:bold; text-shadow:0 0 10px rgba(252,231,200,.5); }

/* CARD INNER */
.journey-card-inner { padding:12px; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; position:relative; text-align:center; }
.journey-card-inner::before { content:''; position:absolute; bottom:0; left:0; right:0; height:55px;
  background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.6) 15%,rgba(0,0,0,.85) 50%,rgba(0,0,0,.95) 100%); z-index:1; }

.journey-icon { width:48px; height:48px; margin:0 auto 8px; background:radial-gradient(circle,rgba(252,231,200,.1) 0%,transparent 70%);
  border:1px solid rgba(252,231,200,.2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; color:#E3BB7A; position:relative; }
.journey-icon::after { content:''; position:absolute; top:50%; left:50%; width:100%; height:100%; background:radial-gradient(circle,rgba(252,231,200,.2) 0%,transparent 50%);
  transform:translate(-50%,-50%) scale(0); transition:transform .3s; }
.journey-card:hover .journey-icon::after { transform:translate(-50%,-50%) scale(1.5); }

.journey-name { position:relative; z-index:2; font-size:13px; font-weight:700; color:#fff; letter-spacing:.5px; line-height:1.2; text-transform:uppercase; margin-bottom:4px; }
.journey-tier { position:relative; z-index:2; font-size:12px; font-weight:600; color:#fce7c8; letter-spacing:1.2px; text-transform:uppercase; }

/* Background variants */
.journey-card.has-background, .journey-card.has-icon { background-size:cover; background-position:center; background-repeat:no-repeat; }
.journey-card.has-background::before, .journey-card.has-icon::after { content:''; inset:0; position:absolute;
  background:linear-gradient(to bottom,rgba(0,0,0,.3) 0%,rgba(0,0,0,.7) 70%,rgba(0,0,0,.9) 100%); z-index:1; }
.journey-card.has-icon:hover::after { background:linear-gradient(to bottom,rgba(0,0,0,.2) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.8) 100%); }
.journey-card.has-background .journey-icon, .journey-card.has-icon .journey-icon { display:none; }

.journey-bg-source { display:none !important; }

/* ========== 5. RIGHT PANEL – DETAILS ====================================== */
.journey-details-panel {
  flex:0 0 calc(40% - 20px); background:linear-gradient(135deg,rgba(0,0,2,.95) 0%,rgba(12,10,20,.95) 100%);
  border:2px solid rgba(252,231,200,.2); box-shadow:inset 0 0 30px rgba(0,0,0,.5),0 2px 20px rgba(0,0,0,.8);
  padding:12px; display:flex; flex-direction:column; gap:10px; max-height:100%; overflow:hidden;
}
#journeyDetailsPanel, .journey-details-panel { padding-top:12px !important; margin-top:0 !important; }

.journey-details-header { display:flex; align-items:center; gap:12px; border-bottom:1px solid rgba(252,231,200,.2); padding-bottom:10px; position:relative; }
.journey-tier-badge { width:40px; height:40px; background:linear-gradient(135deg,#a855f7 0%,rgba(168,85,247,.6) 100%); border:2px solid #fce7c8; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tier-number { font-family:'Orbitron',sans-serif; font-size:20px; font-weight:700; color:#fff; text-shadow:0 0 10px rgba(255,255,255,.5); }
.journey-title { flex:1; font-family:'Orbitron',sans-serif; font-size:16px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#fce7c8; line-height:1.2; text-shadow:0 0 15px rgba(252,231,200,.4); }
.completion-status { position:absolute; top:0; right:0; font-size:12px; color:#E3BB7A; font-weight:600; letter-spacing:1px; text-transform:uppercase; }

.journey-description { background:rgba(0,0,2,.6); border:1px solid rgba(252,231,200,.2); padding:10px; font-size:13px; line-height:1.4; color:#E0E0E0; transition:max-height .3s; overflow:hidden; }
.journey-description.collapsed { max-height:42px; }
.description-toggle { position:absolute; bottom:2px; right:4px; background:rgba(0,0,2,.9); border:1px solid rgba(252,231,200,.2); color:#E3BB7A; font-size:11px; padding:3px 10px; text-transform:uppercase; cursor:pointer; }
.description-toggle:hover { border-color:#fce7c8; color:#fce7c8; }

.journey-rewards { background:linear-gradient(135deg,rgba(227,187,122,.1) 0%,rgba(252,231,200,.05) 100%); border:1px solid rgba(252,231,200,.2); padding:13px 8px 8px; }
.rewards-header { font-family:'Orbitron',sans-serif; font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#E3BB7A; margin-bottom:6px; }
.xp-icon { background:linear-gradient(135deg,#E3BB7A 0%,#fce7c8 100%); color:#0a0a0a; padding:5px 12px; font-family:'Orbitron',sans-serif; font-weight:700; text-transform:uppercase; }
.xp-amount { font-family:'Orbitron',sans-serif; font-size:22px; font-weight:700; color:#fce7c8; text-shadow:0 0 10px rgba(252,231,200,.5); }

.journey-objectives { background:rgba(0,0,2,.6); border:1px solid rgba(252,231,200,.2); padding:17px 12px 12px; flex:1 1 auto; max-height:530px; display:flex; flex-direction:column; overflow:hidden; }