/**********************************************************
* Journeys Page Styles
* (Extends Dune Awakening Theme)
**********************************************************/
/* ================================================
JOURNEYS PAGE CONTAINER & LAYOUT
================================================ */
.journeys-page-container {
display: flex;
gap: 20px; /* Space between card area and sidebar */
padding: 20px; /* Replaced var(--content-padding) */
width: 100%;
box-sizing: border-box;
}
/* ... (other styles for .journeys-main-content, .journeys-sidebar remain the same) ... */
/* ================================================
JOURNEYS TABS (Top of main content)
================================================ */
/* ... (.journeys-tabs remains the same) ... */
.journeys-tab {
font-family: 'Orbitron', sans-serif;
font-size: 1.1rem; /* Replaced var(--font-size-lg) */
color: rgba(252, 231, 200, 0.7);
text-transform: uppercase;
padding: 8px 20px;
cursor: pointer;
border: 2px solid transparent;
border-bottom: none;
position: relative;
transition: all 0.3s ease;
background-color: rgba(12,10,20,.5);
}
.journeys-tab:hover {
color: #fce7c8; /* var(--color-primary) */
background-color: rgba(252, 231, 200, 0.1);
}
.journeys-tab.active {
color: #fce7c8; /* var(--color-primary) */
font-weight: 700;
background-color: rgba(0,0,2,.85); /* var(--color-bg-dark) */
border-color: rgba(252, 231, 200, 0.4); /* Replaced var(--color-border-hover) */
border-bottom: none;
box-shadow: 0 -3px 10px rgba(252, 231, 200, 0.1);
}
/* ================================================
JOURNEY CARD GRID & GROUPS
================================================ */
/* ... (.journey-card-grid remains the same) ... */
.journey-section-label {
font-family: 'Orbitron', sans-serif;
font-size: 0.85rem; /* Replaced var(--font-size-md) */
color: #E3BB7A; /* var(--color-secondary) */
text-transform: uppercase;
letter-spacing: 2px;
padding: 10px 0;
margin: 15px 0;
text-align: left;
border-bottom: 1px solid rgba(252, 231, 200, 0.2); /* var(--color-border) */
border-top: 1px solid rgba(252, 231, 200, 0.2); /* var(--color-border) */
}
/* ================================================
INDIVIDUAL JOURNEY CARD
================================================ */
.journey-card {
width: 100%; /* Take full width of grid cell */
/* aspect-ratio: 3 / 4; /* REMOVED due to TemplateStyles incompatibility */
max-width: 180px; /* Max width to control size */
height: 240px; /* ADDED: (180px * 4 / 3) to maintain 3/4 ratio with max-width */
/* OR use min-height based on your grid's minmax column width if preferred, e.g. min-height: 200px for 150px wide cards */
background-color: #08070d;
position: relative;
cursor: pointer;
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
display: flex;
align-items: center;
justify-content: center;
}
.journey-card:hover:not(.locked) {
transform: scale(1.03);
box-shadow: 0 0 25px rgba(252, 231, 200, 0.3);
}
.journey-card.active-journey:not(.locked) .journey-card-border-outer {
border-color: #fce7c8; /* Replaced var(--color-primary) */
box-shadow: 0 0 15px #fce7c8; /* var(--color-primary) */
}
.journey-card-border-outer {
width: calc(100% - 4px);
height: calc(100% - 4px);
border: 1px solid #E3BB7A; /* var(--color-secondary) */
padding: 2px;
background-clip: padding-box;
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}
.journey-card-border-inner {
width: 100%;
height: 100%;
border: 1px solid rgba(252, 231, 200, 0.2); /* var(--color-border) */
background-color: #100e17;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* ... (image wrapper styles) ... */
.journey-card-title-container {
background-color: rgba(10, 8, 16, 0.85);
border-top: 1px solid rgba(252, 231, 200, 0.2); /* var(--color-border) */
padding: 8px 10px;
text-align: center;
min-height: 38px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.journey-card-title-text {
font-family: 'Rajdhani', sans-serif;
font-size: 0.75rem; /* Replaced var(--font-size-sm) */
color: #fce7c8; /* var(--color-primary) */
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ... (Locked and Empty States for Journey Cards - ensure variables are replaced if used there for colors/borders) ... */
.journey-card.locked .journey-card-border-outer {
border-color: rgba(100,100,100,0.4); /* Literal value, no var() here originally */
}
.journey-card.locked .journey-card-border-inner {
border-color: rgba(100,100,100,0.2); /* Literal value */
}
.journey-card.locked .journey-card-title-text {
color: rgba(252, 231, 200, 0.4); /* Literal value */
}
/* ================================================
JOURNEY DETAILS SIDEBAR CARD
================================================ */
.journey-details-card {
background: linear-gradient(135deg, rgba(0,0,2,.85) 0%, rgba(12,10,20,.85) 100%); /* Replaced var(--color-bg-dark) and var(--color-bg-darker) */
color: #E0E0E0; /* var(--color-text) */
border: 2px solid rgba(252, 231, 200, 0.2); /* var(--color-border) */
/* ... clip-path and other styles ... */
height: 100%;
display: flex;
flex-direction: column;
}
.journey-details-content {
padding: 20px;
overflow-y: auto;
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 18px;
}
.selected-journey-title {
font-family: 'Orbitron', sans-serif;
font-size: 1.3rem; /* Replaced var(--font-size-xl) */
color: #fce7c8; /* var(--color-primary) */
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
text-shadow: 0 0 10px rgba(252, 231, 200, 0.4);
}
.selected-journey-progress .progress-text {
font-size: 0.65rem; /* Replaced var(--font-size-xs) */
color: #E3BB7A; /* var(--color-secondary) */
text-transform: uppercase;
letter-spacing: 1px;
display: block;
margin-bottom: 5px;
}
.progress-bar-container {
width: 100%;
height: 8px;
background-color: rgba(0,0,2,.8);
border: 1px solid rgba(252, 231, 200, 0.2); /* var(--color-border) */
padding: 1px;
}
.progress-bar-fill {
height: 100%;
background: #E3BB7A; /* var(--color-secondary) */
box-shadow: 0 0 8px #E3BB7A; /* var(--color-secondary) */
transition: width 0.5s ease-in-out;
}
.selected-journey-description p {
font-size: 0.85rem; /* Replaced var(--font-size-md) */
line-height: 1.6;
color: #E0E0E0; /* var(--color-text) */
}
.details-section-title {
font-family: 'Orbitron', sans-serif;
font-size: 0.75rem; /* Replaced var(--font-size-sm) */
color: #E3BB7A; /* var(--color-secondary) */
text-transform: uppercase;
letter-spacing: 1.5px;
border-bottom: 1px solid rgba(252, 231, 200, 0.2); /* var(--color-border) */
padding-bottom: 6px;
margin-bottom: 10px;
}
/* Objectives List */
.objective-item {
display: flex;
align-items: flex-start;
font-size: 0.85rem; /* Replaced var(--font-size-md) */
color: #E0E0E0; /* var(--color-text) */
margin-bottom: 10px;
padding-left: 5px;
}
.objective-status-icon {
margin-right: 10px;
font-family: 'Arial', sans-serif;
font-size: 1.1em; /* This was not a variable, should be fine */
color: #E3BB7A; /* var(--color-secondary) */
line-height: 1.3;
}
/* ... (.objective-item.complete/incomplete icon styles) ... */
.objective-meta {
margin-left: 8px;
color: #E3BB7A; /* var(--color-secondary) */
font-size: 0.75rem; /* Replaced var(--font-size-sm) */
}
.objective-subtext {
display: block;
font-size: 0.65rem; /* Replaced var(--font-size-xs) */
color: rgba(224, 224, 224, 0.7);
padding-left: 22px;
}
/* Reward Text */
.reward-text {
font-size: 0.85rem; /* Replaced var(--font-size-md) */
color: #fce7c8; /* var(--color-primary) */
font-weight: 600;
}
/* Track Button */
.selected-journey-actions {
margin-top: auto;
padding-top: 15px;
border-top: 1px solid rgba(252, 231, 200, 0.2); /* var(--color-border) */
}
.journey-track-button {
background: linear-gradient(180deg, rgba(227, 187, 122, 0.15) 0%, rgba(252, 231, 200, 0.1) 100%);
border: 2px solid #E3BB7A; /* var(--color-secondary) */
color: #fce7c8; /* var(--color-primary) */
font-family: 'Orbitron', sans-serif;
font-size: 1.1rem; /* Replaced var(--font-size-lg) */
/* ... other styles ... */
}
.journey-track-button:hover {
background: linear-gradient(180deg, rgba(227, 187, 122, 0.25) 0%, rgba(252, 231, 200, 0.2) 100%);
border-color: #fce7c8; /* var(--color-primary) */
box-shadow: 0 0 15px rgba(252, 231, 200, 0.4);
color: #fff;
}
.track-button-keybind {
display: inline-block;
border: 1px solid #fce7c8; /* var(--color-primary) */
padding: 2px 6px;
margin-right: 8px;
font-size: 0.85rem; /* Replaced var(--font-size-md) */
border-radius: 3px;
background-color: rgba(0,0,0,0.3);
}
/* ================================================
RESPONSIVE ADJUSTMENTS (Journeys Page)
================================================ */
@media (max-width: 992px) { /* Tablet and below */
/* ... */
}
@media (max-width: 768px) { /* Mobile */
.journeys-tabs {
/* font-size: var(--font-size-md); /* Example: If you had vars here, replace them */
font-size: 0.85rem; /* Replaced var(--font-size-md) */
}
/* ... */
.journey-card-title-text {
font-size: 0.7rem; /* Literal value */
}
.selected-journey-title {
font-size: 1.1rem; /* Replaced var(--font-size-lg) */
}
.objective-item, .selected-journey-description p, .reward-text {
font-size: 0.75rem; /* Replaced var(--font-size-sm) */
}
}