/* Template:JourneyPage/styles.css – MediaWiki‑sanitized variant (no custom fonts, no rgba in border‑color)
Date: 2025‑05‑28 */
/* =========== CORE LAYOUT =========== */
.journey-main-container {
display: flex;
gap: 12px;
padding: 12px 0;
max-width: 100%;
margin: 0 auto;
font-family: sans-serif;
position: relative;
height: 840px;
min-height: 740px;
overflow: hidden;
align-items: stretch;
background: rgba(0,0,2,.3);
border: 2px solid #c8b38f; /* #fce7c8 @ 60 % */
}
.journey-main-container::before {
content: '';
position: absolute; inset: 0;
background-image: repeating-linear-gradient(45deg,transparent,transparent 35px,rgba(252,231,200,.01) 35px,rgba(252,231,200,.01) 70px);
z-index: -1;
}
/* =========== CATEGORIES COLUMN =========== */
.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%;
}
/* =========== SECTION CARD WRAPPER =========== */
.journey-section {
background: linear-gradient(135deg, rgba(0,0,2,.9) 0%, rgba(12,10,20,.9) 100%);
border: 2px solid #c8b38f;
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: all .3s ease;
flex-shrink: 0;
}
.journey-section:hover { border-color: #fce7c8; }
.journey-section-header {
display: flex;
align-items: center;
gap: 12px;
margin: 8px 0 15px;
padding: 12px 0;
border-bottom: 1px solid #c8b38f;
}
.section-title {
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: #fce7c8;
font-family: sans-serif;
}
.section-icon { width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; color:#E3BB7A; font-size:24px; }
.section-icon img { width:100%; height:100%; object-fit:contain; }
/* =========== GRID =========== */
.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);} }
/* =========== JOURNEY CARD =========== */
.journey-card {
background: linear-gradient(135deg, rgba(0,0,2,.8) 0%, rgba(12,10,20,.8) 100%);
border: 2px solid #c8b38f;
cursor: pointer;
transition: all .3s ease;
position: relative;
overflow: hidden;
height: 130px;
}
.journey-card:hover { border-color:#fce7c8; }
.journey-card.active { border-color:#a855f7; }
.journey-card.completed { opacity:.7; }
.journey-card.completed::after { content:'✓'; position:absolute; top:5px; right:8px; color:#fce7c8; font-size:20px; font-weight:bold; }
.journey-card-inner { padding:12px; text-align:center; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; position:relative; }
.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%); }
.journey-name { font-size:13px; font-weight:700; color:#fff; line-height:1.2; letter-spacing:.5px; text-transform:uppercase; margin-bottom:4px; }
.journey-tier { font-size:12px; color:#fce7c8; letter-spacing:1.2px; text-transform:uppercase; }
/* hide icon when bg present */
.journey-card.has-background .journey-icon { display:none; }
/* =========== DETAILS PANEL (RIGHT) =========== */
.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 #c8b38f;
box-shadow: inset 0 0 30px rgba(0,0,0,.5), 0 2px 20px rgba(0,0,0,.8);
padding:12px 12px 0;
display:flex; flex-direction:column; gap:10px;
max-height:100%; overflow:hidden;
}
.journey-details-header { display:flex; align-items:center; gap:12px; border-bottom:1px solid #c8b38f; padding-bottom:10px; }
.journey-title { flex:1; font-size:16px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#fce7c8; font-family:sans-serif; }
.completion-status { font-size:12px; color:#E3BB7A; position:absolute; top:0; right:0; text-transform:uppercase; }
/* description */
.journey-description { background:rgba(0,0,2,.6); border:1px solid #c8b38f; padding:10px; font-size:13px; line-height:1.4; color:#E0E0E0; transition:max-height .3s ease; overflow:hidden; }
.journey-description.collapsed { max-height:42px; }
.description-toggle { position:absolute; bottom:2px; right:4px; background:rgba(0,0,2,.8); border:1px solid #c8b38f; color:#E3BB7A; font-size:11px; padding:3px 10px; text-transform:uppercase; cursor:pointer; }
.description-toggle:hover { border-color:#fce7c8; color:#fce7c8; }
/* rewards */
.journey-rewards { background:linear-gradient(135deg, rgba(227,187,122,.1) 0%, rgba(252,231,200,.05) 100%); border:1px solid #c8b38f; padding:13px 8px 8px; }
.rewards-header { font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#E3BB7A; font-family:sans-serif; margin-bottom:6px; }
.xp-icon { background:linear-gradient(135deg,#E3BB7A 0%,#fce7c8 100%); color:#0a0a0a; padding:5px 12px; font-weight:700; text-transform:uppercase; }
.xp-amount { font-size:22px; font-weight:700; color:#fce7c8; }
/* objectives */
.journey-objectives { background:rgba(0,0,2,.6); border:1px solid #c8b38f; padding:17px 12px 12px; flex:1 1 auto; max-height:530px; display:flex; flex-direction:column; overflow:hidden; }
.objectives-header { font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#E3BB7A; margin-bottom:10px; font-family:sans-serif; }
.objectives-list { overflow-y:auto; overflow-x:hidden; padding-right:10px; flex:1 1 auto; }
.objective-item { margin-bottom:15px; padding-bottom:15px; border-bottom:1px solid #c8b38f; }
.objective-item:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.objective-header { display:flex; align-items:center; gap:12px; margin-bottom:10px; cursor:pointer; }
.objective-icon { width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#a855f7 0%,rgba(168,85,247,.6) 100%); border:1px solid #fce7c8; color:#fff; font-size:16px; font-weight:700; }
.objective-title { flex:1; font-size:15px; font-weight:600; letter-spacing:.5px; color:#fce7c8; text-transform:uppercase; padding-right:50px; }
.objective-progress { font-size:13px; font-weight:600; color:#E3BB7A; }
.objective-progress.completed { color:#fce7c8; }
/* tasks */
.task-item { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:14px; color:#E0E0E0; }
.task-checkbox { width:18px; height:18px; border:2px solid #c8b38f; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.task-checkbox.completed { background:#E3BB7A; border-color:#fce7c8; }
.task-checkbox.completed::after { content:'✓'; color:#0a0a0a; font-size:12px; font-weight:bold; }
.task-description { flex:1; }
.task-qty { font-size:13px; font-weight:600; color:#E3BB7A; text-transform:uppercase; }
/* actions */
.journey-actions { display:flex; justify-content:center; gap:1.2rem; margin:5px 0 0; }
.action-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:160px; padding:12px 16px; background:linear-gradient(135deg, rgba(0,0,2,.8) 0%, rgba(12,10,20,.8) 100%); border:2px solid #c8b38f; color:#fce7c8; font-family:sans-serif; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:1px; cursor:pointer; transition:all .3s ease; }
.action-button:disabled { opacity:.5; cursor:not-allowed; }
/* popup overlay */