Vault Door

Top Product

Product Name: Placeholder Item

🔥 Featured item of the week

Product Analytics

Sales: 1,234

CTR: 5.6%

Drop Calendar

SunMonTueWedThuFriSat
56 7
Drop		 891011
121314 15
Drop		 161718

Vault Perks

Perk 1: Exclusive Q&A Access
Perk 2: Bonus Content
Perk 3: Merch Discounts

Status Tracker

Payout Progress:

Member Tier: Gold

/* --- Global Styles & Theme --- */ html, body { margin: 0; padding: 0; background: #0a0a0f; /* deep dark background for contrast */ color: #fff; font-family: sans-serif; height: 100%; } h3 { margin-top: 0; font-weight: 600; letter-spacing: 0.5px; /* Optionally add a subtle neon glow to section titles */ text-shadow: 0 0 5px rgba(255,255,255,0.2); } /* --- Vault Door Screen --- */ #vault-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #000; /* solid black to emphasize vault door */ transition: opacity 1s ease; z-index: 999; /* sit on top of dashboard */ } #vault-screen img.vault-door { max-width: 300px; width: 80%; height: auto; /* If needed, add a neon glow around the vault door image */ /* box-shadow: 0 0 20px #0ff; */ } #vault-screen .unlock-btn { margin-top: 1.5rem; padding: 0.75rem 1.5rem; font-size: 1rem; cursor: pointer; border: 2px solid #0ff; color: #0ff; background: transparent; border-radius: 5px; /* Neon glow effect on button */ box-shadow: 0 0 5px #0ff, 0 0 15px rgba(0,255,255,0.5); transition: box-shadow 0.3s; } #vault-screen .unlock-btn:hover { /* Intensify glow on hover */ box-shadow: 0 0 10px #0ff, 0 0 20px rgba(0,255,255,0.8); } #vault-screen.fade-out { opacity: 0; /* this class is added to fade out the vault screen */ } /* Hide dashboard by default (shown after unlock) */ #dashboard { display: none; padding: 1rem; } /* --- Dashboard Layout --- */ .dashboard-grid { /* Mobile-first: stack sections vertically */ display: flex; flex-direction: column; gap: 1.5rem; } /* Each dashboard section as a translucent “card” */ .dashboard-grid section { padding: 1rem; background: rgba(255,255,255,0.07); /* translucent panel (glass effect) */ border: 1px solid rgba(0,255,255,0.2); /* base border with neon tint */ border-radius: 8px; position: relative; /* Glow effect around panels (fainter by default) */ box-shadow: 0 0 10px rgba(0,255,255,0.1); } /* On hover, brighten the panel glow to make it dynamic */ .dashboard-grid section:hover { box-shadow: 0 0 15px rgba(0,255,255,0.3); } /* Larger screens: use CSS Grid for structured layout */ @media (min-width: 768px) { .dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto auto; grid-template-areas: "top analytics" "calendar analytics" "perks status"; gap: 1.5rem; align-items: start; } .top-product { grid-area: top; } .analytics { grid-area: analytics; } .calendar { grid-area: calendar; } .perks { grid-area: perks; } .status { grid-area: status; } } /* --- Top Product Widget Styles --- */ .top-product { /* Holographic rotating glow background */ overflow: hidden; /* contain the ::before element */ } .top-product::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 8px; z-index: -1; /* Conic gradient creates a multi-color ring (cyan to magenta) */ background: conic-gradient(from 0deg, #0ff, #f0f, #0ff); filter: blur(20px); opacity: 0.6; /* Rotate the gradient to create a swirling holographic effect */ animation: spin 10s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* --- Drop Calendar Styles --- */ .calendar { overflow-x: auto; } .drop-calendar { width: 100%; border-collapse: collapse; margin-top: 0.5rem; } .drop-calendar th, .drop-calendar td { border: 1px solid rgba(255,255,255,0.2); padding: 0.5rem; text-align: center; font-size: 0.9rem; } .drop-calendar thead th { background: rgba(255,255,255,0.1); } .drop-calendar td { background: rgba(255,255,255,0.05); color: #fff; position: relative; } .drop-calendar td:hover { background: rgba(255,255,255,0.15); } /* Highlight days with scheduled drops */ .drop-day { border: 1px solid #0ff; box-shadow: 0 0 10px rgba(0,255,255,0.5); } .drop-day span { color: #0ff; font-weight: bold; display: block; margin-top: 2px; font-size: 0.8rem; } /* --- Vault Perks Styles --- */ .perks { /* Use flex layout for perk cards */ display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-around; } .perk-card { flex: 1 1 30%; min-width: 150px; background: rgba(255,255,255,0.1); border: 1px solid magenta; border-radius: 5px; text-align: center; padding: 0.5rem; font-size: 0.9rem; /* Glowing magenta effect for perk cards */ box-shadow: 0 0 5px magenta; transition: box-shadow 0.3s; } .perk-card:hover { box-shadow: 0 0 15px magenta; } /* --- Status Tracker Styles --- */ .status { /* We can reuse base section styles; add any specific tweaks if needed */ } .status .progress-bar { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); border-radius: 5px; height: 10px; overflow: hidden; margin: 0.5rem 0; } .status .progress-fill { background: #0f0; /* green progress indicator */ width: 0%; height: 100%; box-shadow: 0 0 5px #0f0; } /* (The .progress-fill width will be set via inline style to reflect actual progress) */