/**********************************************************
* Template:ResourcePage/styles.css (stand-alone bundle)
* Dune Awakening — Resource Page
* v1.1 · 2025-05-26
**********************************************************/
/* ========================================================
SECTION 0 · SHARED BUILDING-PAGE RULES
(copied verbatim from Template:BuildingPage/styles.css)
======================================================== */
.responsive-container {
display:flex!important;
flex-wrap:wrap!important;
gap:24px!important;
width:100%!important;
max-width:none!important;
margin:0 auto 20px auto!important;
padding:0 20px!important;
box-sizing:border-box!important;
}
.responsive-col {
display:flex!important;
flex-direction:column!important;
flex:1 1 0!important;
min-width:0!important;
max-width:none!important;
}
/* Desktop: 3 columns */
@media (min-width:1200px){
.responsive-col{flex:1 1 calc(33.333% - 16px)!important}
}
/* Tablet: 2 columns */
@media (min-width:768px) and (max-width:1199px){
.responsive-col{flex:1 1 calc(50% - 12px)!important}
}
/* Mobile: 1 column */
@media (max-width:767px){
.responsive-col{flex:1 1 100%!important}
}
/* -------- DUNE CARD COMPONENTS -------- */
.dune-card{
background:linear-gradient(135deg,rgba(0,0,2,.85)0%,rgba(12,10,20,.85)100%);
color:#E0E0E0;
padding:0;
margin-bottom:20px!important;
border:2px solid rgba(252,231,200,.2);
position:relative;
overflow:hidden;
clip-path:polygon(0 20px,20px 0,calc(100% - 20px)0,100% 20px,100% calc(100% - 20px),calc(100% - 20px)100%,20px 100%,0 calc(100% - 20px));
box-shadow:0 0 30px rgba(0,0,0,.8),inset 0 0 30px rgba(252,231,200,.05);
display:flex;flex-direction:column;flex:1 0 auto;height:100%;
}
.dune-card-inner{padding:24px!important;position:relative;z-index:1}
.dune-card-decoration{
position:absolute;top:0;right:0;width:60px;height:60px;
background:linear-gradient(135deg,transparent 50%,rgba(252,231,200,.1)50%);
z-index:2;
}
.dune-card-decoration::before{
content:'';position:absolute;top:10px;right:10px;width:6px;height:6px;
background:#fce7c8;border-radius:50%;box-shadow:0 0 10px #fce7c8;opacity:.7;
}
/* Card Label */
.dune-card-label{
color:#E3BB7A;font-size:11px;text-transform:uppercase;margin-bottom:8px;
letter-spacing:2px;font-weight:700;display:inline-block;padding:4px 12px;
background:linear-gradient(90deg,rgba(252,231,200,.1)0%,transparent 100%);
border-left:3px solid #fce7c8;
}
/* Card Title */
.dune-card-title{
margin:0;font-size:24px!important;color:#fce7c8;text-transform:uppercase;
padding-bottom:12px;margin-bottom:16px;display:flex;align-items:center;
position:relative;font-weight:700;letter-spacing:1px;
text-shadow:0 0 20px rgba(252,231,200,.5);
}
.dune-card-title::after{
content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,transparent 0%,#fce7c8 20%,#E3BB7A 50%,#fce7c8 80%,transparent 100%);
}
.dune-card-title .icon{
margin-right:12px;font-size:28px;color:#fce7c8;
filter:drop-shadow(0 0 5px rgba(252,231,200,.7));
}
/* Card Description */
.dune-card-description{
font-size:18px!important;line-height:1.5!important;background:rgba(0,0,2,.8);
border:1px solid rgba(252,231,200,.2);padding:16px;margin-bottom:16px;
position:relative;overflow:hidden;
}
.dune-card-description::before,
.dune-card-description::after{
content:'';position:absolute;width:20px;height:20px;border:2px solid rgba(252,231,200,.3);
}
.dune-card-description::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.dune-card-description::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
/* Card Image */
.dune-card-image{text-align:center;margin:16px 0;position:relative}
.dune-card-image img{
max-width:260px!important;max-height:260px!important;width:100%;height:auto;
object-fit:contain;filter:drop-shadow(0 0 20px rgba(252,231,200,.3));
transition:.3s ease;
}
.dune-card-image:hover img{
transform:scale(1.05);filter:drop-shadow(0 0 30px rgba(252,231,200,.5));
}
/* ------ (rest of BuildingPage table & mobile rules copied unchanged) ------ */
/* ... full table styles, recipe formatting, mobile overrides ... */
/* ========================================================
SECTION 1 · RESOURCE-PAGE SPECIFICS
======================================================== */
/* Resource label override */
.dune-card-label{
background:linear-gradient(90deg,rgba(227,187,122,.1)0%,transparent 100%);
border-left:3px solid #E3BB7A;
}
/* Resource icon colors */
.dune-card-title .icon{
color:#E3BB7A;
filter:drop-shadow(0 0 5px rgba(227,187,122,.7));
}
/* -------- Crafting Section -------- */
.crafting-section{
margin-bottom:24px;padding:16px;background:rgba(0,0,2,.6);
border:1px solid rgba(252,231,200,.2);position:relative;
}
.dune-section-header{
color:#fce7c8;font-size:18px;font-weight:700;text-transform:uppercase;
margin:0 0 8px 0;padding-bottom:8px;border-bottom:2px solid rgba(252,231,200,.3);
letter-spacing:1px;
}
/* ... (all your crafting search / table / actions rules unchanged) ... */
/* -------- Recipe Popup -------- */
.recipe-popup-overlay{
position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);
/* backdrop-filter:blur(5px); <-- uncomment via booster if needed */
z-index:10000;display:flex;align-items:center;justify-content:center;
opacity:0;visibility:hidden;transition:.3s ease;
}
.recipe-popup-overlay.active{opacity:1;visibility:visible}
/* ... rest of popup rules unchanged ... */
/* ========================================================
SECTION 2 · UTILITIES & MOBILE
======================================================== */
/* Utility: hide elements on ≤768 px */
@media(max-width:768px){.hide-mobile{display:none}}
/* Example use:
<th class="hide-mobile">Mass</th>
<td class="hide-mobile">350 m³</td>
*/
/* Existing mobile tweaks from BuildingPage & Resource rules remain intact */
/* ========================================================
SECTION 3 · MISC
======================================================== */
.dune-card-description:empty{display:none}