Vibrant Energy - Free HTML/CSS UI Kit
High-octane, electric neon components featuring glowing cyan, magenta, and deep indigo glassmorphic panels for modern creative tech platforms.
Download Full Kit (.zip)
Complete kit with all components & styles
Just need one component?
Download base.css and add the following line to your HTML:
<link rel="stylesheet" href="base.css">
Then grab a component below and add it to your HTML.
Color Palette
Electric Cyan
#00F0FF
Neon Pink
#FF007A
Vibrant Purple
#8B5CF6
Deep Space Indigo
#080515
Cyber Slate
#120E2C
Typography
Hero Sections
Electric Centered Hero
HTML
<section class="vb-hero-centered">
<div class="vb-hero-badge">
<span class="vb-badge-dot"></span>
Atelier Engine v4.0 is Live
</div>
<h1 class="vb-hero-title">
The Future is <span class="vb-gradient-text">Absolute Motion</span>.<br>
Curated in Neon Space.
</h1>
<p class="vb-hero-subtitle">Deploy high-performance visual clusters, hyper-interactive network modules, and beautiful neon-glowing components in seconds.</p>
<div class="vb-hero-actions">
<a href="#" class="vb-btn vb-btn-primary">Initialize Node</a>
<a href="#" class="vb-btn vb-btn-outline">Explore Codex</a>
</div>
<div class="vb-hero-canvas vb-surface">
<div class="vb-canvas-header">
<div class="vb-dots">
<span class="vb-dot red"></span>
<span class="vb-dot yellow"></span>
<span class="vb-dot green"></span>
</div>
<div class="vb-canvas-title">vibrant-shell-core --active</div>
</div>
<div class="vb-canvas-grid">
<div class="vb-canvas-left">
<div class="vb-metric-indicator glow-cyan">
<svg viewBox="0 0 24 24" width="36" height="36" stroke="var(--vb-primary)" stroke-width="2.5" fill="none"><polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"></polygon><polyline points="12 22 12 12 22 6"></polyline><polyline points="12 12 2 6"></polyline></svg>
<div class="vb-metric-text">
<h3>948.4 GB/s</h3>
<p>Spatial Bandwidth</p>
</div>
</div>
</div>
<div class="vb-canvas-right">
<div class="vb-code-line"><span class="c-purple">const</span> node = <span class="c-cyan">new</span> <span class="c-pink">AtelierNode</span>();</div>
<div class="vb-code-line"><span class="c-purple">await</span> node.<span class="c-cyan">initialize</span>({ glow: <span class="c-pink">true</span> });</div>
<div class="vb-code-line">console.<span class="c-cyan">log</span>(<span class="c-yellow">"Cluster ready"</span>);</div>
</div>
</div>
</div>
</section>
CSS (Component Only)
/* Component: Electric Centered Hero */
/* NOTE: This component requires base.css to be included in your page. */
.vb-hero-centered {
max-width: 1000px;
margin: 4rem auto;
padding: 0 2rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
/* Pulsing Badge */
.vb-hero-badge {
display: inline-flex;
align-items: center;
gap: 0.65rem;
padding: 0.5rem 1.25rem;
background-color: var(--vb-bg-muted);
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius-full);
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.75rem;
color: var(--vb-text);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.vb-badge-dot {
width: 8px;
height: 8px;
background-color: var(--vb-primary);
border-radius: 50%;
box-shadow: var(--vb-glow-cyan);
animation: vb-pulse 2s infinite;
}
@keyframes vb-pulse {
0% { transform: scale(0.9); opacity: 0.6; }
50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 12px var(--vb-primary); }
100% { transform: scale(0.9); opacity: 0.6; }
}
.vb-hero-title {
font-size: 4rem;
line-height: 1.15;
margin-bottom: 2rem;
max-width: 850px;
}
.vb-gradient-text {
background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.vb-hero-subtitle {
font-size: 1.15rem;
max-width: 650px;
margin-bottom: 3rem;
line-height: 1.7;
}
.vb-hero-actions {
display: flex;
gap: 1.5rem;
margin-bottom: 5rem;
}
/* Cyber Console Canvas */
.vb-hero-canvas {
width: 100%;
padding: 0 !important;
overflow: hidden;
background-color: #05030f !important;
border: 1px solid var(--vb-border) !important;
}
.vb-canvas-header {
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--vb-border);
display: flex;
align-items: center;
position: relative;
}
.vb-dots {
display: flex;
gap: 0.5rem;
}
.vb-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.vb-dot.red { background-color: var(--vb-accent); }
.vb-dot.yellow { background-color: #F59E0B; }
.vb-dot.green { background-color: var(--vb-primary); }
.vb-canvas-title {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: var(--vb-font-body);
font-size: 0.75rem;
font-weight: 700;
color: var(--vb-text-muted);
}
.vb-canvas-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 2rem;
padding: 2.5rem;
text-align: left;
}
.vb-canvas-left {
display: flex;
align-items: center;
}
.vb-metric-indicator {
display: flex;
align-items: center;
gap: 1.5rem;
background-color: var(--vb-bg-muted);
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius);
padding: 1.5rem 2rem;
width: 100%;
}
.vb-metric-text h3 {
font-size: 1.75rem;
color: var(--vb-primary);
margin-bottom: 0.25rem;
}
.vb-metric-text p {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.vb-canvas-right {
display: flex;
flex-direction: column;
justify-content: center;
font-family: monospace;
font-size: 0.85rem;
gap: 0.75rem;
background-color: rgba(0,0,0,0.2);
border: 1px solid var(--vb-border);
padding: 2rem;
border-radius: var(--vb-radius-sm);
}
.c-purple { color: #A78BFA; }
.c-cyan { color: var(--vb-primary); }
.c-pink { color: var(--vb-accent); }
.c-yellow { color: #F59E0B; }
@media (max-width: 768px) {
.vb-hero-title { font-size: 2.75rem; }
.vb-hero-actions { flex-direction: column; width: 100%; gap: 1rem; }
.vb-hero-actions .vb-btn { width: 100%; }
.vb-canvas-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--vb-bg: #080515; /* Deep cyber space */
--vb-bg-muted: #120E2C; /* Cyber Slate surface */
--vb-surface: #18133C; /* Elevated dark Indigo */
--vb-primary: #00F0FF; /* Luminous Electric Cyan */
--vb-secondary: #8B5CF6; /* Vibrant Purple */
--vb-accent: #FF007A; /* Neon Magenta Pink */
--vb-text: #FFFFFF;
--vb-text-muted: #A5A1C9; /* Muted Lavender/Gray */
--vb-text-light: #6A658E;
--vb-border: #282255; /* Electric purple border */
--vb-border-light: #3F367A;
--vb-radius: 14px;
--vb-radius-lg: 20px;
--vb-radius-sm: 8px;
--vb-radius-full: 9999px;
--vb-font-heading: 'Outfit', sans-serif;
--vb-font-body: 'Plus Jakarta Sans', sans-serif;
--vb-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
--vb-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
--vb-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
--vb-glow-cyan: 0 0 15px rgba(0, 240, 255, 0.35);
--vb-glow-pink: 0 0 15px rgba(255, 0, 122, 0.35);
}
body {
margin: 0;
font-family: var(--vb-font-body);
color: var(--vb-text);
background-color: var(--vb-bg);
-webkit-font-smoothing: antialiased;
}
/* Surface containers */
.vb-surface {
background-color: var(--vb-bg-muted);
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius);
padding: 2.5rem;
box-shadow: var(--vb-shadow);
transition: var(--vb-transition);
}
/* Global Logo */
.vb-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--vb-font-heading);
font-size: 1.1rem;
font-weight: 800;
letter-spacing: 0.05em;
color: var(--vb-text);
}
.vb-logo span {
background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.vb-logo-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-accent) 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
}
.vb-logo-icon-inner {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: var(--vb-bg);
color: var(--vb-text);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--vb-font-heading);
font-size: 0.95rem;
font-weight: 900;
}
/* Global Buttons */
.vb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 2rem;
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.05em;
text-transform: uppercase;
border: 1px solid transparent;
border-radius: var(--vb-radius-sm);
cursor: pointer;
text-decoration: none;
transition: var(--vb-transition);
gap: 0.5rem;
}
.vb-btn-primary {
background-color: var(--vb-primary);
color: var(--vb-bg);
border-color: var(--vb-primary);
box-shadow: 0 4px 15px rgba(0, 240, 255, 0.2);
}
.vb-btn-primary:hover {
background-color: var(--vb-accent);
border-color: var(--vb-accent);
color: var(--vb-text);
box-shadow: var(--vb-glow-pink);
transform: translateY(-2px);
}
.vb-btn-outline {
background-color: transparent;
color: var(--vb-primary);
border-color: var(--vb-primary);
}
.vb-btn-outline:hover {
background-color: var(--vb-primary);
color: var(--vb-bg);
box-shadow: var(--vb-glow-cyan);
transform: translateY(-2px);
}
.vb-btn-ghost {
background-color: transparent;
color: var(--vb-text-muted);
}
.vb-btn-ghost:hover {
background-color: rgba(255, 255, 255, 0.05);
color: var(--vb-text);
}
.vb-btn-circle {
width: 42px;
height: 42px;
padding: 0;
border-radius: 50% !important;
}
.vb-btn-block {
width: 100%;
}
/* Form Fields */
.vb-input {
width: 100%;
padding: 0.9rem 1.25rem;
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius-sm);
font-family: var(--vb-font-body);
font-size: 0.9rem;
color: var(--vb-text);
background-color: rgba(8, 5, 21, 0.5);
outline: none;
transition: var(--vb-transition);
}
.vb-input::placeholder {
color: var(--vb-text-light);
}
.vb-input:focus {
border-color: var(--vb-primary);
box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
background-color: rgba(8, 5, 21, 0.8);
}
.vb-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--vb-primary);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--vb-font-heading);
font-weight: 700;
margin: 0;
color: var(--vb-text);
line-height: 1.2;
}
p {
font-family: var(--vb-font-body);
font-weight: 400;
line-height: 1.6;
margin: 0;
color: var(--vb-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-cyan { color: var(--vb-primary) !important; }
.text-pink { color: var(--vb-accent) !important; }
.text-purple { color: var(--vb-secondary) !important; }
.text-muted { color: var(--vb-text-muted) !important; }
.bg-space { background-color: var(--vb-bg) !important; }
.bg-slate { background-color: var(--vb-bg-muted) !important; }
.bg-indigo { background-color: var(--vb-surface) !important; }
.glow-cyan { box-shadow: var(--vb-glow-cyan) !important; }
.glow-pink { box-shadow: var(--vb-glow-pink) !important; }
/* --- COMPONENT STYLES --- */
.vb-hero-centered {
max-width: 1000px;
margin: 4rem auto;
padding: 0 2rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
/* Pulsing Badge */
.vb-hero-badge {
display: inline-flex;
align-items: center;
gap: 0.65rem;
padding: 0.5rem 1.25rem;
background-color: var(--vb-bg-muted);
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius-full);
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.75rem;
color: var(--vb-text);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.vb-badge-dot {
width: 8px;
height: 8px;
background-color: var(--vb-primary);
border-radius: 50%;
box-shadow: var(--vb-glow-cyan);
animation: vb-pulse 2s infinite;
}
@keyframes vb-pulse {
0% { transform: scale(0.9); opacity: 0.6; }
50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 12px var(--vb-primary); }
100% { transform: scale(0.9); opacity: 0.6; }
}
.vb-hero-title {
font-size: 4rem;
line-height: 1.15;
margin-bottom: 2rem;
max-width: 850px;
}
.vb-gradient-text {
background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.vb-hero-subtitle {
font-size: 1.15rem;
max-width: 650px;
margin-bottom: 3rem;
line-height: 1.7;
}
.vb-hero-actions {
display: flex;
gap: 1.5rem;
margin-bottom: 5rem;
}
/* Cyber Console Canvas */
.vb-hero-canvas {
width: 100%;
padding: 0 !important;
overflow: hidden;
background-color: #05030f !important;
border: 1px solid var(--vb-border) !important;
}
.vb-canvas-header {
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--vb-border);
display: flex;
align-items: center;
position: relative;
}
.vb-dots {
display: flex;
gap: 0.5rem;
}
.vb-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.vb-dot.red { background-color: var(--vb-accent); }
.vb-dot.yellow { background-color: #F59E0B; }
.vb-dot.green { background-color: var(--vb-primary); }
.vb-canvas-title {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: var(--vb-font-body);
font-size: 0.75rem;
font-weight: 700;
color: var(--vb-text-muted);
}
.vb-canvas-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 2rem;
padding: 2.5rem;
text-align: left;
}
.vb-canvas-left {
display: flex;
align-items: center;
}
.vb-metric-indicator {
display: flex;
align-items: center;
gap: 1.5rem;
background-color: var(--vb-bg-muted);
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius);
padding: 1.5rem 2rem;
width: 100%;
}
.vb-metric-text h3 {
font-size: 1.75rem;
color: var(--vb-primary);
margin-bottom: 0.25rem;
}
.vb-metric-text p {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.vb-canvas-right {
display: flex;
flex-direction: column;
justify-content: center;
font-family: monospace;
font-size: 0.85rem;
gap: 0.75rem;
background-color: rgba(0,0,0,0.2);
border: 1px solid var(--vb-border);
padding: 2rem;
border-radius: var(--vb-radius-sm);
}
.c-purple { color: #A78BFA; }
.c-cyan { color: var(--vb-primary); }
.c-pink { color: var(--vb-accent); }
.c-yellow { color: #F59E0B; }
@media (max-width: 768px) {
.vb-hero-title { font-size: 2.75rem; }
.vb-hero-actions { flex-direction: column; width: 100%; gap: 1rem; }
.vb-hero-actions .vb-btn { width: 100%; }
.vb-canvas-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
Glowing Split Hero
HTML
<section class="vb-hero-split">
<div class="vb-split-grid">
<div class="vb-split-content">
<h1 class="vb-split-title">Luminous Data.<br><span class="vb-gradient-text">Frictionless Flow</span>.</h1>
<p class="vb-split-desc">A premium neon-glowing workspace designed to showcase high-fidelity interfaces, live stats streams, and modular grid components with extreme dynamic energy.</p>
<div class="vb-split-actions">
<a href="#" class="vb-btn vb-btn-primary">Connect Console</a>
<a href="#" class="vb-btn vb-btn-outline">Explore Clusters</a>
</div>
</div>
<div class="vb-split-visual">
<div class="vb-visual-main bg-slate">
<div class="vb-visual-header">
<span class="vb-visual-title">Active Node</span>
<span class="vb-badge bg-space text-cyan" style="border: 1px solid var(--vb-border); font-size: 0.65rem; font-weight: 700;">Live Feed</span>
</div>
<div class="vb-visual-metric text-cyan">94.8%</div>
<p class="vb-visual-desc">System stability index across active studio nodes.</p>
</div>
<div class="vb-visual-overlay bg-indigo glow-cyan">
<div class="vb-profile-card">
<div class="vb-profile-avatar">
<img src="https://i.pravatar.cc/100?img=33" alt="Avatar">
</div>
<div class="vb-profile-info">
<h4>Alex Moreau</h4>
<p class="text-cyan">Node Director</p>
</div>
</div>
</div>
<div class="vb-visual-dot glow-pink"></div>
</div>
</div>
</section>
CSS (Component Only)
/* Component: Glowing Split Hero */
/* NOTE: This component requires base.css to be included in your page. */
.vb-hero-split {
max-width: 1200px;
margin: 4rem auto;
padding: 0 2rem;
}
.vb-split-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 5rem;
align-items: center;
}
.vb-split-content {
text-align: left;
}
.vb-split-title {
font-size: 4rem;
line-height: 1.15;
margin-bottom: 2rem;
}
.vb-split-desc {
font-size: 1.15rem;
color: var(--vb-text-muted);
margin-bottom: 3rem;
line-height: 1.7;
}
.vb-split-actions {
display: flex;
gap: 1.5rem;
}
/* Staggered Glowing Overlapping Cards */
.vb-split-visual {
position: relative;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.vb-visual-main {
width: 310px;
padding: 1.75rem !important;
position: absolute;
top: 1.5rem;
left: 0.75rem;
z-index: 2;
transform: rotate(-3.5deg);
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius-lg);
box-shadow: var(--vb-shadow-lg);
}
.vb-visual-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.vb-visual-title {
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.85rem;
color: var(--vb-text);
}
.vb-badge {
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.7rem;
padding: 0.25rem 0.65rem;
border-radius: var(--vb-radius-full);
}
.vb-visual-metric {
font-family: var(--vb-font-heading);
font-weight: 800;
font-size: 3.5rem;
margin-bottom: 1rem;
line-height: 1;
}
.vb-visual-desc {
max-width: 58%;
font-size: 0.85rem;
line-height: 1.5;
}
.vb-visual-overlay {
width: 210px;
padding: 1.25rem !important;
position: absolute;
bottom: 1.5rem;
right: 0.75rem;
z-index: 3;
transform: rotate(2deg);
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius);
box-shadow: var(--vb-shadow-lg);
}
.vb-profile-card {
display: flex;
align-items: center;
gap: 0.85rem;
}
.vb-profile-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--vb-primary);
overflow: hidden;
flex-shrink: 0;
}
.vb-profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vb-profile-info h4 {
font-family: var(--vb-font-body);
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.15rem;
}
.vb-profile-info p {
font-size: 0.75rem;
margin: 0;
}
.vb-visual-dot {
width: 260px;
height: 260px;
border-radius: 50%;
background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-accent) 100%);
position: absolute;
top: -2rem;
right: -1rem;
z-index: 1;
opacity: 0.35;
filter: blur(60px);
}
@media (max-width: 900px) {
.vb-split-grid {
grid-template-columns: 1fr;
gap: 4rem;
text-align: center;
}
.vb-split-content {
display: flex;
flex-direction: column;
align-items: center;
}
.vb-split-actions {
justify-content: center;
}
.vb-split-visual {
max-width: 450px;
margin: 0 auto;
}
}
@media (max-width: 480px) {
.vb-split-title { font-size: 2.75rem; }
.vb-visual-main { width: 280px; left: 0; }
.vb-visual-overlay { width: 190px; right: 0; }
.vb-split-actions { flex-direction: column; width: 100%; gap: 1rem; }
.vb-split-actions .vb-btn { width: 100%; }
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--vb-bg: #080515; /* Deep cyber space */
--vb-bg-muted: #120E2C; /* Cyber Slate surface */
--vb-surface: #18133C; /* Elevated dark Indigo */
--vb-primary: #00F0FF; /* Luminous Electric Cyan */
--vb-secondary: #8B5CF6; /* Vibrant Purple */
--vb-accent: #FF007A; /* Neon Magenta Pink */
--vb-text: #FFFFFF;
--vb-text-muted: #A5A1C9; /* Muted Lavender/Gray */
--vb-text-light: #6A658E;
--vb-border: #282255; /* Electric purple border */
--vb-border-light: #3F367A;
--vb-radius: 14px;
--vb-radius-lg: 20px;
--vb-radius-sm: 8px;
--vb-radius-full: 9999px;
--vb-font-heading: 'Outfit', sans-serif;
--vb-font-body: 'Plus Jakarta Sans', sans-serif;
--vb-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
--vb-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
--vb-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
--vb-glow-cyan: 0 0 15px rgba(0, 240, 255, 0.35);
--vb-glow-pink: 0 0 15px rgba(255, 0, 122, 0.35);
}
body {
margin: 0;
font-family: var(--vb-font-body);
color: var(--vb-text);
background-color: var(--vb-bg);
-webkit-font-smoothing: antialiased;
}
/* Surface containers */
.vb-surface {
background-color: var(--vb-bg-muted);
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius);
padding: 2.5rem;
box-shadow: var(--vb-shadow);
transition: var(--vb-transition);
}
/* Global Logo */
.vb-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--vb-font-heading);
font-size: 1.1rem;
font-weight: 800;
letter-spacing: 0.05em;
color: var(--vb-text);
}
.vb-logo span {
background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.vb-logo-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-accent) 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
}
.vb-logo-icon-inner {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: var(--vb-bg);
color: var(--vb-text);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--vb-font-heading);
font-size: 0.95rem;
font-weight: 900;
}
/* Global Buttons */
.vb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 2rem;
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.05em;
text-transform: uppercase;
border: 1px solid transparent;
border-radius: var(--vb-radius-sm);
cursor: pointer;
text-decoration: none;
transition: var(--vb-transition);
gap: 0.5rem;
}
.vb-btn-primary {
background-color: var(--vb-primary);
color: var(--vb-bg);
border-color: var(--vb-primary);
box-shadow: 0 4px 15px rgba(0, 240, 255, 0.2);
}
.vb-btn-primary:hover {
background-color: var(--vb-accent);
border-color: var(--vb-accent);
color: var(--vb-text);
box-shadow: var(--vb-glow-pink);
transform: translateY(-2px);
}
.vb-btn-outline {
background-color: transparent;
color: var(--vb-primary);
border-color: var(--vb-primary);
}
.vb-btn-outline:hover {
background-color: var(--vb-primary);
color: var(--vb-bg);
box-shadow: var(--vb-glow-cyan);
transform: translateY(-2px);
}
.vb-btn-ghost {
background-color: transparent;
color: var(--vb-text-muted);
}
.vb-btn-ghost:hover {
background-color: rgba(255, 255, 255, 0.05);
color: var(--vb-text);
}
.vb-btn-circle {
width: 42px;
height: 42px;
padding: 0;
border-radius: 50% !important;
}
.vb-btn-block {
width: 100%;
}
/* Form Fields */
.vb-input {
width: 100%;
padding: 0.9rem 1.25rem;
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius-sm);
font-family: var(--vb-font-body);
font-size: 0.9rem;
color: var(--vb-text);
background-color: rgba(8, 5, 21, 0.5);
outline: none;
transition: var(--vb-transition);
}
.vb-input::placeholder {
color: var(--vb-text-light);
}
.vb-input:focus {
border-color: var(--vb-primary);
box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
background-color: rgba(8, 5, 21, 0.8);
}
.vb-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--vb-primary);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--vb-font-heading);
font-weight: 700;
margin: 0;
color: var(--vb-text);
line-height: 1.2;
}
p {
font-family: var(--vb-font-body);
font-weight: 400;
line-height: 1.6;
margin: 0;
color: var(--vb-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-cyan { color: var(--vb-primary) !important; }
.text-pink { color: var(--vb-accent) !important; }
.text-purple { color: var(--vb-secondary) !important; }
.text-muted { color: var(--vb-text-muted) !important; }
.bg-space { background-color: var(--vb-bg) !important; }
.bg-slate { background-color: var(--vb-bg-muted) !important; }
.bg-indigo { background-color: var(--vb-surface) !important; }
.glow-cyan { box-shadow: var(--vb-glow-cyan) !important; }
.glow-pink { box-shadow: var(--vb-glow-pink) !important; }
/* --- COMPONENT STYLES --- */
.vb-hero-split {
max-width: 1200px;
margin: 4rem auto;
padding: 0 2rem;
}
.vb-split-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 5rem;
align-items: center;
}
.vb-split-content {
text-align: left;
}
.vb-split-title {
font-size: 4rem;
line-height: 1.15;
margin-bottom: 2rem;
}
.vb-split-desc {
font-size: 1.15rem;
color: var(--vb-text-muted);
margin-bottom: 3rem;
line-height: 1.7;
}
.vb-split-actions {
display: flex;
gap: 1.5rem;
}
/* Staggered Glowing Overlapping Cards */
.vb-split-visual {
position: relative;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.vb-visual-main {
width: 310px;
padding: 1.75rem !important;
position: absolute;
top: 1.5rem;
left: 0.75rem;
z-index: 2;
transform: rotate(-3.5deg);
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius-lg);
box-shadow: var(--vb-shadow-lg);
}
.vb-visual-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.vb-visual-title {
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.85rem;
color: var(--vb-text);
}
.vb-badge {
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.7rem;
padding: 0.25rem 0.65rem;
border-radius: var(--vb-radius-full);
}
.vb-visual-metric {
font-family: var(--vb-font-heading);
font-weight: 800;
font-size: 3.5rem;
margin-bottom: 1rem;
line-height: 1;
}
.vb-visual-desc {
max-width: 58%;
font-size: 0.85rem;
line-height: 1.5;
}
.vb-visual-overlay {
width: 210px;
padding: 1.25rem !important;
position: absolute;
bottom: 1.5rem;
right: 0.75rem;
z-index: 3;
transform: rotate(2deg);
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius);
box-shadow: var(--vb-shadow-lg);
}
.vb-profile-card {
display: flex;
align-items: center;
gap: 0.85rem;
}
.vb-profile-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--vb-primary);
overflow: hidden;
flex-shrink: 0;
}
.vb-profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vb-profile-info h4 {
font-family: var(--vb-font-body);
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.15rem;
}
.vb-profile-info p {
font-size: 0.75rem;
margin: 0;
}
.vb-visual-dot {
width: 260px;
height: 260px;
border-radius: 50%;
background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-accent) 100%);
position: absolute;
top: -2rem;
right: -1rem;
z-index: 1;
opacity: 0.35;
filter: blur(60px);
}
@media (max-width: 900px) {
.vb-split-grid {
grid-template-columns: 1fr;
gap: 4rem;
text-align: center;
}
.vb-split-content {
display: flex;
flex-direction: column;
align-items: center;
}
.vb-split-actions {
justify-content: center;
}
.vb-split-visual {
max-width: 450px;
margin: 0 auto;
}
}
@media (max-width: 480px) {
.vb-split-title { font-size: 2.75rem; }
.vb-visual-main { width: 280px; left: 0; }
.vb-visual-overlay { width: 190px; right: 0; }
.vb-split-actions { flex-direction: column; width: 100%; gap: 1rem; }
.vb-split-actions .vb-btn { width: 100%; }
}
Forms
Electric Neon Login
HTML
<div class="vb-login-card vb-surface">
<div class="vb-login-header">
<h2>Enter Atelier</h2>
<p>Access your active neon creative workspace node.</p>
</div>
<form class="vb-login-form" onsubmit="return false;">
<div class="vb-form-group">
<label class="vb-label" for="login-email">Node Address</label>
<input type="email" id="login-email" class="vb-input" placeholder="[email protected]" required>
</div>
<div class="vb-form-group">
<label class="vb-label" for="login-password">Session Token</label>
<input type="password" id="login-password" class="vb-input" placeholder="••••••••" required>
</div>
<div class="vb-form-options">
<label class="vb-checkbox-container">
<input type="checkbox" checked>
<span class="vb-checkmark"></span>
<span class="vb-checkbox-label">Keep Node Active</span>
</label>
<a href="#" class="vb-forgot-link">Lost Token?</a>
</div>
<button type="submit" class="vb-btn vb-btn-primary vb-btn-block">Initialize Node</button>
</form>
<div class="vb-login-divider">
<span>or sign in via key</span>
</div>
<div class="vb-social-login">
<button class="vb-btn vb-btn-circle vb-btn-outline" aria-label="Sign in with Google">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12.24 10.285V13.4h6.887C18.2 15.614 15.645 18 12.24 18c-3.86 0-7-3.14-7-7s3.14-7 7-7c1.7 0 3.3.6 4.6 1.8l2.4-2.4C17.3 1.7 14.9 1 12.24 1c-5.5 0-10 4.5-10 10s4.5 10 10 10c5.8 0 9.8-4.1 9.8-10 0-.6 0-1.1-.1-1.7H12.24z"/></svg>
</button>
<button class="vb-btn vb-btn-circle vb-btn-outline" aria-label="Sign in with GitHub">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
</button>
</div>
</div>
CSS (Component Only)
/* Component: Electric Neon Login */
/* NOTE: This component requires base.css to be included in your page. */
.vb-login-card {
max-width: 440px;
margin: 2rem auto;
padding: 3.5rem 3rem !important;
}
.vb-login-header {
text-align: center;
margin-bottom: 2.5rem;
}
.vb-login-header h2 {
font-size: 2.25rem;
margin-bottom: 0.75rem;
}
.vb-login-header p {
font-size: 0.9rem;
color: var(--vb-text-muted);
}
.vb-login-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.vb-form-group {
display: flex;
flex-direction: column;
}
.vb-form-options {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
margin-bottom: 0.5rem;
}
/* Custom Glowing Checkbox */
.vb-checkbox-container {
display: flex;
align-items: center;
position: relative;
cursor: pointer;
user-select: none;
gap: 0.6rem;
font-weight: 700;
color: var(--vb-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.vb-checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.vb-checkmark {
width: 18px;
height: 18px;
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius-sm);
display: inline-block;
position: relative;
transition: var(--vb-transition);
}
.vb-checkbox-container:hover input ~ .vb-checkmark {
border-color: var(--vb-primary);
}
.vb-checkbox-container input:checked ~ .vb-checkmark {
background-color: var(--vb-primary);
border-color: var(--vb-primary);
box-shadow: var(--vb-glow-cyan);
}
.vb-checkmark:after {
content: "";
position: absolute;
display: none;
left: 6px;
top: 2px;
width: 4px;
height: 9px;
border: solid var(--vb-bg);
border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg);
}
.vb-checkbox-container input:checked ~ .vb-checkmark:after {
display: block;
}
.vb-forgot-link {
color: var(--vb-primary);
text-decoration: none;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: var(--vb-transition);
}
.vb-forgot-link:hover {
color: var(--vb-accent);
text-shadow: var(--vb-glow-pink);
}
/* Divider */
.vb-login-divider {
text-align: center;
margin: 2rem 0;
position: relative;
}
.vb-login-divider:before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background-color: var(--vb-border);
z-index: 1;
}
.vb-login-divider span {
background-color: var(--vb-bg-muted);
padding: 0 1rem;
font-size: 0.75rem;
font-weight: 700;
color: var(--vb-text-muted);
position: relative;
z-index: 2;
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* Socials */
.vb-social-login {
display: flex;
justify-content: center;
gap: 1rem;
}
.vb-social-login .vb-btn-circle svg {
display: block;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--vb-bg: #080515; /* Deep cyber space */
--vb-bg-muted: #120E2C; /* Cyber Slate surface */
--vb-surface: #18133C; /* Elevated dark Indigo */
--vb-primary: #00F0FF; /* Luminous Electric Cyan */
--vb-secondary: #8B5CF6; /* Vibrant Purple */
--vb-accent: #FF007A; /* Neon Magenta Pink */
--vb-text: #FFFFFF;
--vb-text-muted: #A5A1C9; /* Muted Lavender/Gray */
--vb-text-light: #6A658E;
--vb-border: #282255; /* Electric purple border */
--vb-border-light: #3F367A;
--vb-radius: 14px;
--vb-radius-lg: 20px;
--vb-radius-sm: 8px;
--vb-radius-full: 9999px;
--vb-font-heading: 'Outfit', sans-serif;
--vb-font-body: 'Plus Jakarta Sans', sans-serif;
--vb-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
--vb-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
--vb-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
--vb-glow-cyan: 0 0 15px rgba(0, 240, 255, 0.35);
--vb-glow-pink: 0 0 15px rgba(255, 0, 122, 0.35);
}
body {
margin: 0;
font-family: var(--vb-font-body);
color: var(--vb-text);
background-color: var(--vb-bg);
-webkit-font-smoothing: antialiased;
}
/* Surface containers */
.vb-surface {
background-color: var(--vb-bg-muted);
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius);
padding: 2.5rem;
box-shadow: var(--vb-shadow);
transition: var(--vb-transition);
}
/* Global Logo */
.vb-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--vb-font-heading);
font-size: 1.1rem;
font-weight: 800;
letter-spacing: 0.05em;
color: var(--vb-text);
}
.vb-logo span {
background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.vb-logo-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-accent) 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
}
.vb-logo-icon-inner {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: var(--vb-bg);
color: var(--vb-text);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--vb-font-heading);
font-size: 0.95rem;
font-weight: 900;
}
/* Global Buttons */
.vb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 2rem;
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.05em;
text-transform: uppercase;
border: 1px solid transparent;
border-radius: var(--vb-radius-sm);
cursor: pointer;
text-decoration: none;
transition: var(--vb-transition);
gap: 0.5rem;
}
.vb-btn-primary {
background-color: var(--vb-primary);
color: var(--vb-bg);
border-color: var(--vb-primary);
box-shadow: 0 4px 15px rgba(0, 240, 255, 0.2);
}
.vb-btn-primary:hover {
background-color: var(--vb-accent);
border-color: var(--vb-accent);
color: var(--vb-text);
box-shadow: var(--vb-glow-pink);
transform: translateY(-2px);
}
.vb-btn-outline {
background-color: transparent;
color: var(--vb-primary);
border-color: var(--vb-primary);
}
.vb-btn-outline:hover {
background-color: var(--vb-primary);
color: var(--vb-bg);
box-shadow: var(--vb-glow-cyan);
transform: translateY(-2px);
}
.vb-btn-ghost {
background-color: transparent;
color: var(--vb-text-muted);
}
.vb-btn-ghost:hover {
background-color: rgba(255, 255, 255, 0.05);
color: var(--vb-text);
}
.vb-btn-circle {
width: 42px;
height: 42px;
padding: 0;
border-radius: 50% !important;
}
.vb-btn-block {
width: 100%;
}
/* Form Fields */
.vb-input {
width: 100%;
padding: 0.9rem 1.25rem;
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius-sm);
font-family: var(--vb-font-body);
font-size: 0.9rem;
color: var(--vb-text);
background-color: rgba(8, 5, 21, 0.5);
outline: none;
transition: var(--vb-transition);
}
.vb-input::placeholder {
color: var(--vb-text-light);
}
.vb-input:focus {
border-color: var(--vb-primary);
box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
background-color: rgba(8, 5, 21, 0.8);
}
.vb-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--vb-primary);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--vb-font-heading);
font-weight: 700;
margin: 0;
color: var(--vb-text);
line-height: 1.2;
}
p {
font-family: var(--vb-font-body);
font-weight: 400;
line-height: 1.6;
margin: 0;
color: var(--vb-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-cyan { color: var(--vb-primary) !important; }
.text-pink { color: var(--vb-accent) !important; }
.text-purple { color: var(--vb-secondary) !important; }
.text-muted { color: var(--vb-text-muted) !important; }
.bg-space { background-color: var(--vb-bg) !important; }
.bg-slate { background-color: var(--vb-bg-muted) !important; }
.bg-indigo { background-color: var(--vb-surface) !important; }
.glow-cyan { box-shadow: var(--vb-glow-cyan) !important; }
.glow-pink { box-shadow: var(--vb-glow-pink) !important; }
/* --- COMPONENT STYLES --- */
.vb-login-card {
max-width: 440px;
margin: 2rem auto;
padding: 3.5rem 3rem !important;
}
.vb-login-header {
text-align: center;
margin-bottom: 2.5rem;
}
.vb-login-header h2 {
font-size: 2.25rem;
margin-bottom: 0.75rem;
}
.vb-login-header p {
font-size: 0.9rem;
color: var(--vb-text-muted);
}
.vb-login-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.vb-form-group {
display: flex;
flex-direction: column;
}
.vb-form-options {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
margin-bottom: 0.5rem;
}
/* Custom Glowing Checkbox */
.vb-checkbox-container {
display: flex;
align-items: center;
position: relative;
cursor: pointer;
user-select: none;
gap: 0.6rem;
font-weight: 700;
color: var(--vb-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.vb-checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.vb-checkmark {
width: 18px;
height: 18px;
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius-sm);
display: inline-block;
position: relative;
transition: var(--vb-transition);
}
.vb-checkbox-container:hover input ~ .vb-checkmark {
border-color: var(--vb-primary);
}
.vb-checkbox-container input:checked ~ .vb-checkmark {
background-color: var(--vb-primary);
border-color: var(--vb-primary);
box-shadow: var(--vb-glow-cyan);
}
.vb-checkmark:after {
content: "";
position: absolute;
display: none;
left: 6px;
top: 2px;
width: 4px;
height: 9px;
border: solid var(--vb-bg);
border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg);
}
.vb-checkbox-container input:checked ~ .vb-checkmark:after {
display: block;
}
.vb-forgot-link {
color: var(--vb-primary);
text-decoration: none;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: var(--vb-transition);
}
.vb-forgot-link:hover {
color: var(--vb-accent);
text-shadow: var(--vb-glow-pink);
}
/* Divider */
.vb-login-divider {
text-align: center;
margin: 2rem 0;
position: relative;
}
.vb-login-divider:before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background-color: var(--vb-border);
z-index: 1;
}
.vb-login-divider span {
background-color: var(--vb-bg-muted);
padding: 0 1rem;
font-size: 0.75rem;
font-weight: 700;
color: var(--vb-text-muted);
position: relative;
z-index: 2;
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* Socials */
.vb-social-login {
display: flex;
justify-content: center;
gap: 1rem;
}
.vb-social-login .vb-btn-circle svg {
display: block;
}
Cyber Settings Form
HTML
<div class="vb-settings-card vb-surface">
<div class="vb-settings-header">
<h3>Atelier Profile</h3>
<p class="vb-settings-subtitle">Manage public information and dynamic node preferences.</p>
</div>
<form class="vb-settings-form" onsubmit="return false;">
<div class="vb-form-row">
<div class="vb-form-group">
<label class="vb-label" for="settings-first">First Name</label>
<input type="text" id="settings-first" class="vb-input" value="Alex">
</div>
<div class="vb-form-group">
<label class="vb-label" for="settings-last">Last Name</label>
<input type="text" id="settings-last" class="vb-input" value="Moreau">
</div>
</div>
<div class="vb-form-group">
<label class="vb-label" for="settings-email">Node Address</label>
<input type="email" id="settings-email" class="vb-input" value="[email protected]">
</div>
<div class="vb-form-group">
<label class="vb-label" for="settings-bio">Biography</label>
<textarea id="settings-bio" class="vb-input vb-textarea" rows="4">Curator of high-performance spatial engines and dynamic network nodes. Formulated using Outfit and Plus Jakarta Sans.</textarea>
</div>
<hr class="vb-divider-line">
<div class="vb-toggle-group">
<div class="vb-toggle-text">
<h4>Dynamic Neon Highlights</h4>
<p>Inject rich energetic neon pink and cyan blur layers into background elements.</p>
</div>
<label class="vb-toggle">
<input type="checkbox" checked>
<span class="vb-slider"></span>
</label>
</div>
<div class="vb-settings-actions">
<button type="button" class="vb-btn vb-btn-outline">Reset Changes</button>
<button type="submit" class="vb-btn vb-btn-primary">Save Configurations</button>
</div>
</form>
</div>
CSS (Component Only)
/* Component: Cyber Settings Form */
/* NOTE: This component requires base.css to be included in your page. */
.vb-settings-card {
max-width: 600px;
margin: 2rem auto;
padding: 3.5rem 3rem !important;
}
.vb-settings-header {
margin-bottom: 2.5rem;
}
.vb-settings-header h3 {
font-size: 1.85rem;
margin-bottom: 0.5rem;
}
.vb-settings-subtitle {
font-size: 0.9rem;
color: var(--vb-text-muted);
}
.vb-settings-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.vb-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.vb-textarea {
resize: vertical;
min-height: 100px;
line-height: 1.6;
}
.vb-divider-line {
border: 0;
height: 1px;
background-color: var(--vb-border);
margin: 0.75rem 0;
}
/* Custom Glowing Toggle Switch */
.vb-toggle-group {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.vb-toggle-text h4 {
font-family: var(--vb-font-body);
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.25rem;
}
.vb-toggle-text p {
font-size: 0.8rem;
color: var(--vb-text-muted);
}
.vb-toggle {
position: relative;
display: inline-block;
width: 48px;
height: 26px;
flex-shrink: 0;
}
.vb-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.vb-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(8, 5, 21, 0.5);
border: 1px solid var(--vb-border);
border-radius: 34px;
transition: var(--vb-transition);
}
.vb-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: var(--vb-text-muted);
border-radius: 50%;
transition: var(--vb-transition);
}
.vb-toggle input:checked + .vb-slider {
background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-accent) 100%);
border-color: transparent;
box-shadow: 0 0 15px rgba(0, 240, 255, 0.35);
}
.vb-toggle input:checked + .vb-slider:before {
background-color: var(--vb-bg);
transform: translateX(22px);
}
.vb-settings-actions {
display: flex;
justify-content: flex-end;
gap: 1.5rem;
margin-top: 1rem;
}
@media (max-width: 600px) {
.vb-form-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.vb-settings-actions {
flex-direction: column-reverse;
align-items: stretch;
}
.vb-settings-actions .vb-btn {
width: 100%;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--vb-bg: #080515; /* Deep cyber space */
--vb-bg-muted: #120E2C; /* Cyber Slate surface */
--vb-surface: #18133C; /* Elevated dark Indigo */
--vb-primary: #00F0FF; /* Luminous Electric Cyan */
--vb-secondary: #8B5CF6; /* Vibrant Purple */
--vb-accent: #FF007A; /* Neon Magenta Pink */
--vb-text: #FFFFFF;
--vb-text-muted: #A5A1C9; /* Muted Lavender/Gray */
--vb-text-light: #6A658E;
--vb-border: #282255; /* Electric purple border */
--vb-border-light: #3F367A;
--vb-radius: 14px;
--vb-radius-lg: 20px;
--vb-radius-sm: 8px;
--vb-radius-full: 9999px;
--vb-font-heading: 'Outfit', sans-serif;
--vb-font-body: 'Plus Jakarta Sans', sans-serif;
--vb-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
--vb-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
--vb-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
--vb-glow-cyan: 0 0 15px rgba(0, 240, 255, 0.35);
--vb-glow-pink: 0 0 15px rgba(255, 0, 122, 0.35);
}
body {
margin: 0;
font-family: var(--vb-font-body);
color: var(--vb-text);
background-color: var(--vb-bg);
-webkit-font-smoothing: antialiased;
}
/* Surface containers */
.vb-surface {
background-color: var(--vb-bg-muted);
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius);
padding: 2.5rem;
box-shadow: var(--vb-shadow);
transition: var(--vb-transition);
}
/* Global Logo */
.vb-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--vb-font-heading);
font-size: 1.1rem;
font-weight: 800;
letter-spacing: 0.05em;
color: var(--vb-text);
}
.vb-logo span {
background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.vb-logo-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-accent) 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
}
.vb-logo-icon-inner {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: var(--vb-bg);
color: var(--vb-text);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--vb-font-heading);
font-size: 0.95rem;
font-weight: 900;
}
/* Global Buttons */
.vb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 2rem;
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.05em;
text-transform: uppercase;
border: 1px solid transparent;
border-radius: var(--vb-radius-sm);
cursor: pointer;
text-decoration: none;
transition: var(--vb-transition);
gap: 0.5rem;
}
.vb-btn-primary {
background-color: var(--vb-primary);
color: var(--vb-bg);
border-color: var(--vb-primary);
box-shadow: 0 4px 15px rgba(0, 240, 255, 0.2);
}
.vb-btn-primary:hover {
background-color: var(--vb-accent);
border-color: var(--vb-accent);
color: var(--vb-text);
box-shadow: var(--vb-glow-pink);
transform: translateY(-2px);
}
.vb-btn-outline {
background-color: transparent;
color: var(--vb-primary);
border-color: var(--vb-primary);
}
.vb-btn-outline:hover {
background-color: var(--vb-primary);
color: var(--vb-bg);
box-shadow: var(--vb-glow-cyan);
transform: translateY(-2px);
}
.vb-btn-ghost {
background-color: transparent;
color: var(--vb-text-muted);
}
.vb-btn-ghost:hover {
background-color: rgba(255, 255, 255, 0.05);
color: var(--vb-text);
}
.vb-btn-circle {
width: 42px;
height: 42px;
padding: 0;
border-radius: 50% !important;
}
.vb-btn-block {
width: 100%;
}
/* Form Fields */
.vb-input {
width: 100%;
padding: 0.9rem 1.25rem;
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius-sm);
font-family: var(--vb-font-body);
font-size: 0.9rem;
color: var(--vb-text);
background-color: rgba(8, 5, 21, 0.5);
outline: none;
transition: var(--vb-transition);
}
.vb-input::placeholder {
color: var(--vb-text-light);
}
.vb-input:focus {
border-color: var(--vb-primary);
box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
background-color: rgba(8, 5, 21, 0.8);
}
.vb-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--vb-primary);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--vb-font-heading);
font-weight: 700;
margin: 0;
color: var(--vb-text);
line-height: 1.2;
}
p {
font-family: var(--vb-font-body);
font-weight: 400;
line-height: 1.6;
margin: 0;
color: var(--vb-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-cyan { color: var(--vb-primary) !important; }
.text-pink { color: var(--vb-accent) !important; }
.text-purple { color: var(--vb-secondary) !important; }
.text-muted { color: var(--vb-text-muted) !important; }
.bg-space { background-color: var(--vb-bg) !important; }
.bg-slate { background-color: var(--vb-bg-muted) !important; }
.bg-indigo { background-color: var(--vb-surface) !important; }
.glow-cyan { box-shadow: var(--vb-glow-cyan) !important; }
.glow-pink { box-shadow: var(--vb-glow-pink) !important; }
/* --- COMPONENT STYLES --- */
.vb-settings-card {
max-width: 600px;
margin: 2rem auto;
padding: 3.5rem 3rem !important;
}
.vb-settings-header {
margin-bottom: 2.5rem;
}
.vb-settings-header h3 {
font-size: 1.85rem;
margin-bottom: 0.5rem;
}
.vb-settings-subtitle {
font-size: 0.9rem;
color: var(--vb-text-muted);
}
.vb-settings-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.vb-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.vb-textarea {
resize: vertical;
min-height: 100px;
line-height: 1.6;
}
.vb-divider-line {
border: 0;
height: 1px;
background-color: var(--vb-border);
margin: 0.75rem 0;
}
/* Custom Glowing Toggle Switch */
.vb-toggle-group {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.vb-toggle-text h4 {
font-family: var(--vb-font-body);
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.25rem;
}
.vb-toggle-text p {
font-size: 0.8rem;
color: var(--vb-text-muted);
}
.vb-toggle {
position: relative;
display: inline-block;
width: 48px;
height: 26px;
flex-shrink: 0;
}
.vb-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.vb-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(8, 5, 21, 0.5);
border: 1px solid var(--vb-border);
border-radius: 34px;
transition: var(--vb-transition);
}
.vb-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: var(--vb-text-muted);
border-radius: 50%;
transition: var(--vb-transition);
}
.vb-toggle input:checked + .vb-slider {
background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-accent) 100%);
border-color: transparent;
box-shadow: 0 0 15px rgba(0, 240, 255, 0.35);
}
.vb-toggle input:checked + .vb-slider:before {
background-color: var(--vb-bg);
transform: translateX(22px);
}
.vb-settings-actions {
display: flex;
justify-content: flex-end;
gap: 1.5rem;
margin-top: 1rem;
}
@media (max-width: 600px) {
.vb-form-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.vb-settings-actions {
flex-direction: column-reverse;
align-items: stretch;
}
.vb-settings-actions .vb-btn {
width: 100%;
}
}
Cards
Electric Stats Card
HTML
<div class="vb-stats-grid">
<div class="vb-stat-card vb-surface glow-cyan" style="border-color: rgba(0, 240, 255, 0.3);">
<div class="vb-stat-header">
<span class="vb-stat-title text-cyan">Cluster Nodes</span>
<div class="vb-stat-icon">
<svg viewBox="0 0 24 24" width="18" height="18" stroke="var(--vb-primary)" stroke-width="2.5" fill="none"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>
</div>
</div>
<div class="vb-stat-value">1,480</div>
<div class="vb-stat-footer">
<span class="vb-trend-indicator up">
<svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" stroke-width="3" fill="none"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
+12.4%
</span>
<span class="vb-trend-label">Active clusters</span>
</div>
</div>
<div class="vb-stat-card vb-surface glow-pink" style="border-color: rgba(255, 0, 122, 0.3);">
<div class="vb-stat-header">
<span class="vb-stat-title text-pink">Data Stream</span>
<div class="vb-stat-icon">
<svg viewBox="0 0 24 24" width="18" height="18" stroke="var(--vb-accent)" stroke-width="2.5" fill="none"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
</div>
</div>
<div class="vb-stat-value">94.8 GB/s</div>
<div class="vb-stat-footer">
<span class="vb-trend-indicator up">
<svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" stroke-width="3" fill="none"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
+8.2%
</span>
<span class="vb-trend-label">Stream velocity</span>
</div>
</div>
<div class="vb-stat-card vb-surface">
<div class="vb-stat-header">
<span class="vb-stat-title text-purple">Network Health</span>
<div class="vb-stat-icon">
<svg viewBox="0 0 24 24" width="18" height="18" stroke="var(--vb-secondary)" stroke-width="2.5" fill="none"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
</div>
</div>
<div class="vb-stat-value">99.98%</div>
<div class="vb-stat-footer">
<span class="vb-trend-indicator up" style="color: var(--vb-secondary);">
<svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" stroke-width="3" fill="none"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
Optimal
</span>
<span class="vb-trend-label">Node uptime status</span>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Electric Stats Card */
/* NOTE: This component requires base.css to be included in your page. */
.vb-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.vb-stat-card {
display: flex;
flex-direction: column;
padding: 2.25rem !important;
}
.vb-stat-card:hover {
transform: translateY(-6px);
}
.vb-stat-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.vb-stat-title {
font-family: var(--vb-font-body);
font-weight: 800;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.vb-stat-icon {
display: flex;
align-items: center;
justify-content: center;
}
.vb-stat-value {
font-family: var(--vb-font-heading);
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 1rem;
line-height: 1;
}
.vb-stat-footer {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.75rem;
}
.vb-trend-indicator {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-weight: 700;
}
.vb-trend-indicator.up {
color: var(--vb-primary);
}
.vb-trend-label {
color: var(--vb-text-muted);
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--vb-bg: #080515; /* Deep cyber space */
--vb-bg-muted: #120E2C; /* Cyber Slate surface */
--vb-surface: #18133C; /* Elevated dark Indigo */
--vb-primary: #00F0FF; /* Luminous Electric Cyan */
--vb-secondary: #8B5CF6; /* Vibrant Purple */
--vb-accent: #FF007A; /* Neon Magenta Pink */
--vb-text: #FFFFFF;
--vb-text-muted: #A5A1C9; /* Muted Lavender/Gray */
--vb-text-light: #6A658E;
--vb-border: #282255; /* Electric purple border */
--vb-border-light: #3F367A;
--vb-radius: 14px;
--vb-radius-lg: 20px;
--vb-radius-sm: 8px;
--vb-radius-full: 9999px;
--vb-font-heading: 'Outfit', sans-serif;
--vb-font-body: 'Plus Jakarta Sans', sans-serif;
--vb-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
--vb-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
--vb-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
--vb-glow-cyan: 0 0 15px rgba(0, 240, 255, 0.35);
--vb-glow-pink: 0 0 15px rgba(255, 0, 122, 0.35);
}
body {
margin: 0;
font-family: var(--vb-font-body);
color: var(--vb-text);
background-color: var(--vb-bg);
-webkit-font-smoothing: antialiased;
}
/* Surface containers */
.vb-surface {
background-color: var(--vb-bg-muted);
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius);
padding: 2.5rem;
box-shadow: var(--vb-shadow);
transition: var(--vb-transition);
}
/* Global Logo */
.vb-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--vb-font-heading);
font-size: 1.1rem;
font-weight: 800;
letter-spacing: 0.05em;
color: var(--vb-text);
}
.vb-logo span {
background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.vb-logo-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-accent) 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
}
.vb-logo-icon-inner {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: var(--vb-bg);
color: var(--vb-text);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--vb-font-heading);
font-size: 0.95rem;
font-weight: 900;
}
/* Global Buttons */
.vb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 2rem;
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.05em;
text-transform: uppercase;
border: 1px solid transparent;
border-radius: var(--vb-radius-sm);
cursor: pointer;
text-decoration: none;
transition: var(--vb-transition);
gap: 0.5rem;
}
.vb-btn-primary {
background-color: var(--vb-primary);
color: var(--vb-bg);
border-color: var(--vb-primary);
box-shadow: 0 4px 15px rgba(0, 240, 255, 0.2);
}
.vb-btn-primary:hover {
background-color: var(--vb-accent);
border-color: var(--vb-accent);
color: var(--vb-text);
box-shadow: var(--vb-glow-pink);
transform: translateY(-2px);
}
.vb-btn-outline {
background-color: transparent;
color: var(--vb-primary);
border-color: var(--vb-primary);
}
.vb-btn-outline:hover {
background-color: var(--vb-primary);
color: var(--vb-bg);
box-shadow: var(--vb-glow-cyan);
transform: translateY(-2px);
}
.vb-btn-ghost {
background-color: transparent;
color: var(--vb-text-muted);
}
.vb-btn-ghost:hover {
background-color: rgba(255, 255, 255, 0.05);
color: var(--vb-text);
}
.vb-btn-circle {
width: 42px;
height: 42px;
padding: 0;
border-radius: 50% !important;
}
.vb-btn-block {
width: 100%;
}
/* Form Fields */
.vb-input {
width: 100%;
padding: 0.9rem 1.25rem;
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius-sm);
font-family: var(--vb-font-body);
font-size: 0.9rem;
color: var(--vb-text);
background-color: rgba(8, 5, 21, 0.5);
outline: none;
transition: var(--vb-transition);
}
.vb-input::placeholder {
color: var(--vb-text-light);
}
.vb-input:focus {
border-color: var(--vb-primary);
box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
background-color: rgba(8, 5, 21, 0.8);
}
.vb-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--vb-primary);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--vb-font-heading);
font-weight: 700;
margin: 0;
color: var(--vb-text);
line-height: 1.2;
}
p {
font-family: var(--vb-font-body);
font-weight: 400;
line-height: 1.6;
margin: 0;
color: var(--vb-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-cyan { color: var(--vb-primary) !important; }
.text-pink { color: var(--vb-accent) !important; }
.text-purple { color: var(--vb-secondary) !important; }
.text-muted { color: var(--vb-text-muted) !important; }
.bg-space { background-color: var(--vb-bg) !important; }
.bg-slate { background-color: var(--vb-bg-muted) !important; }
.bg-indigo { background-color: var(--vb-surface) !important; }
.glow-cyan { box-shadow: var(--vb-glow-cyan) !important; }
.glow-pink { box-shadow: var(--vb-glow-pink) !important; }
/* --- COMPONENT STYLES --- */
.vb-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.vb-stat-card {
display: flex;
flex-direction: column;
padding: 2.25rem !important;
}
.vb-stat-card:hover {
transform: translateY(-6px);
}
.vb-stat-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.vb-stat-title {
font-family: var(--vb-font-body);
font-weight: 800;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.vb-stat-icon {
display: flex;
align-items: center;
justify-content: center;
}
.vb-stat-value {
font-family: var(--vb-font-heading);
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 1rem;
line-height: 1;
}
.vb-stat-footer {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.75rem;
}
.vb-trend-indicator {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-weight: 700;
}
.vb-trend-indicator.up {
color: var(--vb-primary);
}
.vb-trend-label {
color: var(--vb-text-muted);
}
Glowing Pricing Tier
HTML
<div class="vb-pricing-card vb-surface glow-pink">
<div class="vb-pricing-header">
<h3 class="vb-pricing-title">Atelier Resident</h3>
<p class="vb-pricing-desc">Hyper-interactive spatial assets designed for active developers.</p>
<div class="vb-pricing-price">
<span class="vb-currency">$</span>
<span class="vb-amount text-pink">89</span>
<span class="vb-period">/mo</span>
</div>
</div>
<div class="vb-pricing-features">
<ul>
<li>
<div class="vb-glow-bullet bg-cyan glow-cyan"></div>
Infinite Curated Workspaces
</li>
<li>
<div class="vb-glow-bullet bg-cyan glow-cyan"></div>
Studio Spatial Subdomains
</li>
<li>
<div class="vb-glow-bullet bg-cyan glow-cyan"></div>
100% Volumetric Control
</li>
<li class="vb-feature-disabled">
<div class="vb-glow-bullet bg-muted"></div>
Personal Curation Director
</li>
</ul>
</div>
<div class="vb-pricing-footer">
<button class="vb-btn vb-btn-primary vb-btn-block">Initialize Atelier</button>
</div>
</div>
CSS (Component Only)
/* Component: Glowing Pricing Tier */
/* NOTE: This component requires base.css to be included in your page. */
.vb-pricing-card {
max-width: 380px;
margin: 2rem auto;
padding: 3.5rem 2.5rem 2.5rem;
position: relative;
border-color: rgba(255, 0, 122, 0.3) !important;
}
.vb-pricing-header {
text-align: center;
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--vb-border);
}
.vb-pricing-title {
font-size: 1.85rem;
margin-bottom: 0.5rem;
}
.vb-pricing-desc {
font-size: 0.85rem;
color: var(--vb-text-muted);
margin-bottom: 2rem;
line-height: 1.6;
}
.vb-pricing-price {
display: flex;
align-items: flex-end;
justify-content: center;
color: var(--vb-text);
}
.vb-currency {
font-family: var(--vb-font-heading);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.4rem;
margin-right: 0.2rem;
color: var(--vb-accent);
}
.vb-amount {
font-family: var(--vb-font-heading);
font-size: 3.75rem;
font-weight: 800;
line-height: 1;
text-shadow: 0 0 15px rgba(255, 0, 122, 0.3);
}
.vb-period {
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--vb-text-light);
margin-bottom: 0.4rem;
margin-left: 0.2rem;
}
.vb-pricing-features ul {
list-style: none;
padding: 0;
margin: 0 0 2.5rem 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.vb-pricing-features li {
display: flex;
align-items: center;
gap: 0.85rem;
font-size: 0.9rem;
color: var(--vb-text);
font-weight: 500;
}
.vb-glow-bullet {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.vb-glow-bullet.bg-cyan { background-color: var(--vb-primary); }
.vb-glow-bullet.bg-muted { background-color: var(--vb-text-light); opacity: 0.4; }
.vb-feature-disabled {
color: var(--vb-text-light) !important;
text-decoration: line-through;
opacity: 0.6;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--vb-bg: #080515; /* Deep cyber space */
--vb-bg-muted: #120E2C; /* Cyber Slate surface */
--vb-surface: #18133C; /* Elevated dark Indigo */
--vb-primary: #00F0FF; /* Luminous Electric Cyan */
--vb-secondary: #8B5CF6; /* Vibrant Purple */
--vb-accent: #FF007A; /* Neon Magenta Pink */
--vb-text: #FFFFFF;
--vb-text-muted: #A5A1C9; /* Muted Lavender/Gray */
--vb-text-light: #6A658E;
--vb-border: #282255; /* Electric purple border */
--vb-border-light: #3F367A;
--vb-radius: 14px;
--vb-radius-lg: 20px;
--vb-radius-sm: 8px;
--vb-radius-full: 9999px;
--vb-font-heading: 'Outfit', sans-serif;
--vb-font-body: 'Plus Jakarta Sans', sans-serif;
--vb-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
--vb-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
--vb-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
--vb-glow-cyan: 0 0 15px rgba(0, 240, 255, 0.35);
--vb-glow-pink: 0 0 15px rgba(255, 0, 122, 0.35);
}
body {
margin: 0;
font-family: var(--vb-font-body);
color: var(--vb-text);
background-color: var(--vb-bg);
-webkit-font-smoothing: antialiased;
}
/* Surface containers */
.vb-surface {
background-color: var(--vb-bg-muted);
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius);
padding: 2.5rem;
box-shadow: var(--vb-shadow);
transition: var(--vb-transition);
}
/* Global Logo */
.vb-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--vb-font-heading);
font-size: 1.1rem;
font-weight: 800;
letter-spacing: 0.05em;
color: var(--vb-text);
}
.vb-logo span {
background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.vb-logo-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-accent) 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
}
.vb-logo-icon-inner {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: var(--vb-bg);
color: var(--vb-text);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--vb-font-heading);
font-size: 0.95rem;
font-weight: 900;
}
/* Global Buttons */
.vb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 2rem;
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.05em;
text-transform: uppercase;
border: 1px solid transparent;
border-radius: var(--vb-radius-sm);
cursor: pointer;
text-decoration: none;
transition: var(--vb-transition);
gap: 0.5rem;
}
.vb-btn-primary {
background-color: var(--vb-primary);
color: var(--vb-bg);
border-color: var(--vb-primary);
box-shadow: 0 4px 15px rgba(0, 240, 255, 0.2);
}
.vb-btn-primary:hover {
background-color: var(--vb-accent);
border-color: var(--vb-accent);
color: var(--vb-text);
box-shadow: var(--vb-glow-pink);
transform: translateY(-2px);
}
.vb-btn-outline {
background-color: transparent;
color: var(--vb-primary);
border-color: var(--vb-primary);
}
.vb-btn-outline:hover {
background-color: var(--vb-primary);
color: var(--vb-bg);
box-shadow: var(--vb-glow-cyan);
transform: translateY(-2px);
}
.vb-btn-ghost {
background-color: transparent;
color: var(--vb-text-muted);
}
.vb-btn-ghost:hover {
background-color: rgba(255, 255, 255, 0.05);
color: var(--vb-text);
}
.vb-btn-circle {
width: 42px;
height: 42px;
padding: 0;
border-radius: 50% !important;
}
.vb-btn-block {
width: 100%;
}
/* Form Fields */
.vb-input {
width: 100%;
padding: 0.9rem 1.25rem;
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius-sm);
font-family: var(--vb-font-body);
font-size: 0.9rem;
color: var(--vb-text);
background-color: rgba(8, 5, 21, 0.5);
outline: none;
transition: var(--vb-transition);
}
.vb-input::placeholder {
color: var(--vb-text-light);
}
.vb-input:focus {
border-color: var(--vb-primary);
box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
background-color: rgba(8, 5, 21, 0.8);
}
.vb-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--vb-primary);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--vb-font-heading);
font-weight: 700;
margin: 0;
color: var(--vb-text);
line-height: 1.2;
}
p {
font-family: var(--vb-font-body);
font-weight: 400;
line-height: 1.6;
margin: 0;
color: var(--vb-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-cyan { color: var(--vb-primary) !important; }
.text-pink { color: var(--vb-accent) !important; }
.text-purple { color: var(--vb-secondary) !important; }
.text-muted { color: var(--vb-text-muted) !important; }
.bg-space { background-color: var(--vb-bg) !important; }
.bg-slate { background-color: var(--vb-bg-muted) !important; }
.bg-indigo { background-color: var(--vb-surface) !important; }
.glow-cyan { box-shadow: var(--vb-glow-cyan) !important; }
.glow-pink { box-shadow: var(--vb-glow-pink) !important; }
/* --- COMPONENT STYLES --- */
.vb-pricing-card {
max-width: 380px;
margin: 2rem auto;
padding: 3.5rem 2.5rem 2.5rem;
position: relative;
border-color: rgba(255, 0, 122, 0.3) !important;
}
.vb-pricing-header {
text-align: center;
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--vb-border);
}
.vb-pricing-title {
font-size: 1.85rem;
margin-bottom: 0.5rem;
}
.vb-pricing-desc {
font-size: 0.85rem;
color: var(--vb-text-muted);
margin-bottom: 2rem;
line-height: 1.6;
}
.vb-pricing-price {
display: flex;
align-items: flex-end;
justify-content: center;
color: var(--vb-text);
}
.vb-currency {
font-family: var(--vb-font-heading);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.4rem;
margin-right: 0.2rem;
color: var(--vb-accent);
}
.vb-amount {
font-family: var(--vb-font-heading);
font-size: 3.75rem;
font-weight: 800;
line-height: 1;
text-shadow: 0 0 15px rgba(255, 0, 122, 0.3);
}
.vb-period {
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--vb-text-light);
margin-bottom: 0.4rem;
margin-left: 0.2rem;
}
.vb-pricing-features ul {
list-style: none;
padding: 0;
margin: 0 0 2.5rem 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.vb-pricing-features li {
display: flex;
align-items: center;
gap: 0.85rem;
font-size: 0.9rem;
color: var(--vb-text);
font-weight: 500;
}
.vb-glow-bullet {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.vb-glow-bullet.bg-cyan { background-color: var(--vb-primary); }
.vb-glow-bullet.bg-muted { background-color: var(--vb-text-light); opacity: 0.4; }
.vb-feature-disabled {
color: var(--vb-text-light) !important;
text-decoration: line-through;
opacity: 0.6;
}
Tables
Luminous Data Table
HTML
<div class="vb-table-wrapper vb-surface glow-cyan" style="border-color: rgba(0, 240, 255, 0.2);">
<div class="vb-table-header">
<h3>Atelier Cluster catalog</h3>
<button class="vb-btn vb-btn-outline" style="padding: 0.5rem 1.5rem; font-size: 0.7rem;">Export Sheet</button>
</div>
<div class="vb-table-container">
<table class="vb-table">
<thead>
<tr>
<th>Ledger ID</th>
<th>Artist / Curator</th>
<th>Date Curated</th>
<th>Focal Scale</th>
<th>Spatial Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>#AT-9021</td>
<td>
<div class="vb-table-user">
<div class="vb-table-avatar">MC</div>
<span>Michael Chen</span>
</div>
</td>
<td>18 May 2026</td>
<td class="text-cyan">12,500 PX</td>
<td><span class="vb-status status-active">ACTIVE</span></td>
</tr>
<tr>
<td>#AT-9022</td>
<td>
<div class="vb-table-user">
<div class="vb-table-avatar" style="border-color: var(--vb-accent);">CD</div>
<span>Clara Dupont</span>
</div>
</td>
<td>18 May 2026</td>
<td class="text-cyan">2,800 PX</td>
<td><span class="vb-status status-pending">PENDING</span></td>
</tr>
<tr>
<td>#AT-9023</td>
<td>
<div class="vb-table-user">
<div class="vb-table-avatar">DS</div>
<span>David Smith</span>
</div>
</td>
<td>17 May 2026</td>
<td class="text-cyan">9,450 PX</td>
<td><span class="vb-status status-active">ACTIVE</span></td>
</tr>
<tr>
<td>#AT-9024</td>
<td>
<div class="vb-table-user">
<div class="vb-table-avatar" style="border-color: var(--vb-secondary);">ED</div>
<span>Emily Davis</span>
</div>
</td>
<td>16 May 2026</td>
<td class="text-cyan">1,200 PX</td>
<td><span class="vb-status status-inactive">ARCHIVED</span></td>
</tr>
</tbody>
</table>
</div>
<div class="vb-table-pagination">
<span class="text-muted" style="font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;">Showing 1 to 4 of 48 records</span>
<div class="vb-pagination-controls">
<button class="vb-btn vb-btn-ghost" disabled style="padding: 0.4rem 1rem; font-size: 0.7rem;">Prev</button>
<button class="vb-btn vb-btn-primary" style="padding: 0.4rem 1rem; font-size: 0.7rem; min-width: 32px; height: 32px;">1</button>
<button class="vb-btn vb-btn-ghost" style="padding: 0.4rem 1rem; font-size: 0.7rem; min-width: 32px; height: 32px;">2</button>
<button class="vb-btn vb-btn-ghost" style="padding: 0.4rem 1rem; font-size: 0.7rem; min-width: 32px; height: 32px;">3</button>
<button class="vb-btn vb-btn-ghost" style="padding: 0.4rem 1rem; font-size: 0.7rem;">Next</button>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Luminous Data Table */
/* NOTE: This component requires base.css to be included in your page. */
.vb-table-wrapper {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0 !important;
overflow: hidden;
}
.vb-table-header {
padding: 2rem 2.5rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--vb-border);
background-color: rgba(18, 14, 44, 0.4);
}
.vb-table-header h3 {
margin: 0;
font-size: 1.5rem;
}
.vb-table-container {
width: 100%;
overflow-x: auto;
}
.vb-table {
width: 100%;
border-collapse: collapse;
min-width: 700px;
}
.vb-table th {
text-align: left;
padding: 1.25rem 2.5rem;
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.75rem;
color: var(--vb-text);
background-color: #0d0a20;
text-transform: uppercase;
letter-spacing: 0.1em;
border-bottom: 1px solid var(--vb-border);
}
.vb-table td {
padding: 1.25rem 2.5rem;
font-size: 0.85rem;
border-bottom: 1px solid var(--vb-border);
color: var(--vb-text);
vertical-align: middle;
background-color: var(--vb-bg-muted);
font-weight: 500;
transition: var(--vb-transition);
}
.vb-table tbody tr:last-child td {
border-bottom: none;
}
.vb-table tbody tr:hover td {
background-color: var(--vb-surface);
}
.vb-table-user {
display: flex;
align-items: center;
gap: 0.85rem;
}
.vb-table-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--vb-bg);
border: 2px solid var(--vb-primary);
color: var(--vb-text);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 800;
flex-shrink: 0;
}
.vb-status {
padding: 0.25rem 0.75rem;
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.65rem;
letter-spacing: 0.1em;
border-radius: var(--vb-radius-full);
display: inline-block;
}
.status-active {
background-color: rgba(0, 240, 255, 0.1);
color: var(--vb-primary);
border: 1px solid rgba(0, 240, 255, 0.3);
}
.status-pending {
background-color: rgba(255, 0, 122, 0.1);
color: var(--vb-accent);
border: 1px solid rgba(255, 0, 122, 0.3);
}
.status-inactive {
background-color: rgba(255, 255, 255, 0.05);
color: var(--vb-text-muted);
border: 1px solid var(--vb-border);
}
.vb-table-pagination {
padding: 1.75rem 2.5rem;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--vb-border);
background-color: rgba(18, 14, 44, 0.4);
}
.vb-pagination-controls {
display: flex;
gap: 0.5rem;
align-items: center;
}
@media (max-width: 768px) {
.vb-table-header { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.vb-table-pagination { flex-direction: column; gap: 1.25rem; text-align: center; }
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--vb-bg: #080515; /* Deep cyber space */
--vb-bg-muted: #120E2C; /* Cyber Slate surface */
--vb-surface: #18133C; /* Elevated dark Indigo */
--vb-primary: #00F0FF; /* Luminous Electric Cyan */
--vb-secondary: #8B5CF6; /* Vibrant Purple */
--vb-accent: #FF007A; /* Neon Magenta Pink */
--vb-text: #FFFFFF;
--vb-text-muted: #A5A1C9; /* Muted Lavender/Gray */
--vb-text-light: #6A658E;
--vb-border: #282255; /* Electric purple border */
--vb-border-light: #3F367A;
--vb-radius: 14px;
--vb-radius-lg: 20px;
--vb-radius-sm: 8px;
--vb-radius-full: 9999px;
--vb-font-heading: 'Outfit', sans-serif;
--vb-font-body: 'Plus Jakarta Sans', sans-serif;
--vb-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
--vb-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
--vb-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
--vb-glow-cyan: 0 0 15px rgba(0, 240, 255, 0.35);
--vb-glow-pink: 0 0 15px rgba(255, 0, 122, 0.35);
}
body {
margin: 0;
font-family: var(--vb-font-body);
color: var(--vb-text);
background-color: var(--vb-bg);
-webkit-font-smoothing: antialiased;
}
/* Surface containers */
.vb-surface {
background-color: var(--vb-bg-muted);
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius);
padding: 2.5rem;
box-shadow: var(--vb-shadow);
transition: var(--vb-transition);
}
/* Global Logo */
.vb-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--vb-font-heading);
font-size: 1.1rem;
font-weight: 800;
letter-spacing: 0.05em;
color: var(--vb-text);
}
.vb-logo span {
background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.vb-logo-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-accent) 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
}
.vb-logo-icon-inner {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: var(--vb-bg);
color: var(--vb-text);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--vb-font-heading);
font-size: 0.95rem;
font-weight: 900;
}
/* Global Buttons */
.vb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 2rem;
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.05em;
text-transform: uppercase;
border: 1px solid transparent;
border-radius: var(--vb-radius-sm);
cursor: pointer;
text-decoration: none;
transition: var(--vb-transition);
gap: 0.5rem;
}
.vb-btn-primary {
background-color: var(--vb-primary);
color: var(--vb-bg);
border-color: var(--vb-primary);
box-shadow: 0 4px 15px rgba(0, 240, 255, 0.2);
}
.vb-btn-primary:hover {
background-color: var(--vb-accent);
border-color: var(--vb-accent);
color: var(--vb-text);
box-shadow: var(--vb-glow-pink);
transform: translateY(-2px);
}
.vb-btn-outline {
background-color: transparent;
color: var(--vb-primary);
border-color: var(--vb-primary);
}
.vb-btn-outline:hover {
background-color: var(--vb-primary);
color: var(--vb-bg);
box-shadow: var(--vb-glow-cyan);
transform: translateY(-2px);
}
.vb-btn-ghost {
background-color: transparent;
color: var(--vb-text-muted);
}
.vb-btn-ghost:hover {
background-color: rgba(255, 255, 255, 0.05);
color: var(--vb-text);
}
.vb-btn-circle {
width: 42px;
height: 42px;
padding: 0;
border-radius: 50% !important;
}
.vb-btn-block {
width: 100%;
}
/* Form Fields */
.vb-input {
width: 100%;
padding: 0.9rem 1.25rem;
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius-sm);
font-family: var(--vb-font-body);
font-size: 0.9rem;
color: var(--vb-text);
background-color: rgba(8, 5, 21, 0.5);
outline: none;
transition: var(--vb-transition);
}
.vb-input::placeholder {
color: var(--vb-text-light);
}
.vb-input:focus {
border-color: var(--vb-primary);
box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
background-color: rgba(8, 5, 21, 0.8);
}
.vb-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--vb-primary);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--vb-font-heading);
font-weight: 700;
margin: 0;
color: var(--vb-text);
line-height: 1.2;
}
p {
font-family: var(--vb-font-body);
font-weight: 400;
line-height: 1.6;
margin: 0;
color: var(--vb-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-cyan { color: var(--vb-primary) !important; }
.text-pink { color: var(--vb-accent) !important; }
.text-purple { color: var(--vb-secondary) !important; }
.text-muted { color: var(--vb-text-muted) !important; }
.bg-space { background-color: var(--vb-bg) !important; }
.bg-slate { background-color: var(--vb-bg-muted) !important; }
.bg-indigo { background-color: var(--vb-surface) !important; }
.glow-cyan { box-shadow: var(--vb-glow-cyan) !important; }
.glow-pink { box-shadow: var(--vb-glow-pink) !important; }
/* --- COMPONENT STYLES --- */
.vb-table-wrapper {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0 !important;
overflow: hidden;
}
.vb-table-header {
padding: 2rem 2.5rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--vb-border);
background-color: rgba(18, 14, 44, 0.4);
}
.vb-table-header h3 {
margin: 0;
font-size: 1.5rem;
}
.vb-table-container {
width: 100%;
overflow-x: auto;
}
.vb-table {
width: 100%;
border-collapse: collapse;
min-width: 700px;
}
.vb-table th {
text-align: left;
padding: 1.25rem 2.5rem;
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.75rem;
color: var(--vb-text);
background-color: #0d0a20;
text-transform: uppercase;
letter-spacing: 0.1em;
border-bottom: 1px solid var(--vb-border);
}
.vb-table td {
padding: 1.25rem 2.5rem;
font-size: 0.85rem;
border-bottom: 1px solid var(--vb-border);
color: var(--vb-text);
vertical-align: middle;
background-color: var(--vb-bg-muted);
font-weight: 500;
transition: var(--vb-transition);
}
.vb-table tbody tr:last-child td {
border-bottom: none;
}
.vb-table tbody tr:hover td {
background-color: var(--vb-surface);
}
.vb-table-user {
display: flex;
align-items: center;
gap: 0.85rem;
}
.vb-table-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--vb-bg);
border: 2px solid var(--vb-primary);
color: var(--vb-text);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 800;
flex-shrink: 0;
}
.vb-status {
padding: 0.25rem 0.75rem;
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.65rem;
letter-spacing: 0.1em;
border-radius: var(--vb-radius-full);
display: inline-block;
}
.status-active {
background-color: rgba(0, 240, 255, 0.1);
color: var(--vb-primary);
border: 1px solid rgba(0, 240, 255, 0.3);
}
.status-pending {
background-color: rgba(255, 0, 122, 0.1);
color: var(--vb-accent);
border: 1px solid rgba(255, 0, 122, 0.3);
}
.status-inactive {
background-color: rgba(255, 255, 255, 0.05);
color: var(--vb-text-muted);
border: 1px solid var(--vb-border);
}
.vb-table-pagination {
padding: 1.75rem 2.5rem;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--vb-border);
background-color: rgba(18, 14, 44, 0.4);
}
.vb-pagination-controls {
display: flex;
gap: 0.5rem;
align-items: center;
}
@media (max-width: 768px) {
.vb-table-header { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.vb-table-pagination { flex-direction: column; gap: 1.25rem; text-align: center; }
}
Lists
Cyber Activity Feed
HTML
<div class="vb-feed-card vb-surface glow-pink" style="border-color: rgba(255, 0, 122, 0.2);">
<div class="vb-feed-header">
<h3>Atelier Cluster Feed</h3>
<span class="vb-badge bg-space text-pink" style="border: 1px solid rgba(255, 0, 122, 0.3);">4 Updates</span>
</div>
<ul class="vb-feed-list">
<!-- Item 1: Unread -->
<li class="vb-feed-item vb-unread">
<div class="vb-feed-avatar">
<span>SJ</span>
</div>
<div class="vb-feed-content">
<p><strong>Sarah Jenkins</strong> pushed node updates to <span class="vb-feed-highlight">Negative Space / No. 04</span>.</p>
<span class="vb-feed-time">2 hours ago</span>
</div>
<div class="vb-unread-marker bg-pink glow-pink"></div>
</li>
<!-- Item 2: Read -->
<li class="vb-feed-item">
<div class="vb-feed-avatar" style="border-color: var(--vb-primary);">
<span>MC</span>
</div>
<div class="vb-feed-content">
<p><strong>Michael Chen</strong> completed cluster sequence <span class="vb-feed-highlight">Curation Codex N°12</span>.</p>
<span class="vb-feed-time">5 hours ago</span>
</div>
</li>
<!-- Item 3: Unread -->
<li class="vb-feed-item vb-unread">
<div class="vb-feed-avatar">
<span>DM</span>
</div>
<div class="vb-feed-content">
<p><strong>David Moreau</strong> initialized a new gallery workspace <span class="vb-feed-highlight">Stark Architecture</span>.</p>
<span class="vb-feed-time">Yesterday</span>
</div>
<div class="vb-unread-marker bg-pink glow-pink"></div>
</li>
</ul>
</div>
CSS (Component Only)
/* Component: Cyber Activity Feed */
/* NOTE: This component requires base.css to be included in your page. */
.vb-feed-card {
max-width: 500px;
margin: 2rem auto;
padding: 2.5rem 2.25rem !important;
}
.vb-feed-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.vb-feed-header h3 {
font-size: 1.5rem;
}
.vb-feed-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.vb-feed-item {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1rem;
border: 1px solid transparent;
border-radius: var(--vb-radius-sm);
transition: var(--vb-transition);
position: relative;
}
.vb-feed-item:hover {
background-color: var(--vb-surface);
border-color: var(--vb-border);
}
.vb-feed-item.vb-unread {
background-color: rgba(255, 0, 122, 0.03);
border-color: rgba(255, 0, 122, 0.1);
}
.vb-feed-avatar {
width: 36px;
height: 36px;
background-color: var(--vb-bg);
color: var(--vb-text);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--vb-font-body);
font-size: 0.75rem;
font-weight: 800;
border-radius: 50%;
border: 2px solid var(--vb-accent);
flex-shrink: 0;
}
.vb-feed-content {
flex: 1;
}
.vb-feed-content p {
font-size: 0.85rem;
color: var(--vb-text-muted);
line-height: 1.6;
margin-bottom: 0.25rem;
}
.vb-feed-content strong {
color: var(--vb-text);
}
.vb-feed-highlight {
font-weight: 700;
color: var(--vb-primary);
background-color: rgba(0, 240, 255, 0.05);
border: 1px solid rgba(0, 240, 255, 0.1);
padding: 0.15rem 0.4rem;
font-size: 0.8rem;
border-radius: 4px;
}
.vb-feed-time {
font-size: 0.7rem;
color: var(--vb-text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
}
.vb-unread-marker {
width: 8px;
height: 8px;
border-radius: 50%;
margin-left: 0.5rem;
flex-shrink: 0;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--vb-bg: #080515; /* Deep cyber space */
--vb-bg-muted: #120E2C; /* Cyber Slate surface */
--vb-surface: #18133C; /* Elevated dark Indigo */
--vb-primary: #00F0FF; /* Luminous Electric Cyan */
--vb-secondary: #8B5CF6; /* Vibrant Purple */
--vb-accent: #FF007A; /* Neon Magenta Pink */
--vb-text: #FFFFFF;
--vb-text-muted: #A5A1C9; /* Muted Lavender/Gray */
--vb-text-light: #6A658E;
--vb-border: #282255; /* Electric purple border */
--vb-border-light: #3F367A;
--vb-radius: 14px;
--vb-radius-lg: 20px;
--vb-radius-sm: 8px;
--vb-radius-full: 9999px;
--vb-font-heading: 'Outfit', sans-serif;
--vb-font-body: 'Plus Jakarta Sans', sans-serif;
--vb-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
--vb-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
--vb-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
--vb-glow-cyan: 0 0 15px rgba(0, 240, 255, 0.35);
--vb-glow-pink: 0 0 15px rgba(255, 0, 122, 0.35);
}
body {
margin: 0;
font-family: var(--vb-font-body);
color: var(--vb-text);
background-color: var(--vb-bg);
-webkit-font-smoothing: antialiased;
}
/* Surface containers */
.vb-surface {
background-color: var(--vb-bg-muted);
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius);
padding: 2.5rem;
box-shadow: var(--vb-shadow);
transition: var(--vb-transition);
}
/* Global Logo */
.vb-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--vb-font-heading);
font-size: 1.1rem;
font-weight: 800;
letter-spacing: 0.05em;
color: var(--vb-text);
}
.vb-logo span {
background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.vb-logo-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-accent) 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
}
.vb-logo-icon-inner {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: var(--vb-bg);
color: var(--vb-text);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--vb-font-heading);
font-size: 0.95rem;
font-weight: 900;
}
/* Global Buttons */
.vb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 2rem;
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.05em;
text-transform: uppercase;
border: 1px solid transparent;
border-radius: var(--vb-radius-sm);
cursor: pointer;
text-decoration: none;
transition: var(--vb-transition);
gap: 0.5rem;
}
.vb-btn-primary {
background-color: var(--vb-primary);
color: var(--vb-bg);
border-color: var(--vb-primary);
box-shadow: 0 4px 15px rgba(0, 240, 255, 0.2);
}
.vb-btn-primary:hover {
background-color: var(--vb-accent);
border-color: var(--vb-accent);
color: var(--vb-text);
box-shadow: var(--vb-glow-pink);
transform: translateY(-2px);
}
.vb-btn-outline {
background-color: transparent;
color: var(--vb-primary);
border-color: var(--vb-primary);
}
.vb-btn-outline:hover {
background-color: var(--vb-primary);
color: var(--vb-bg);
box-shadow: var(--vb-glow-cyan);
transform: translateY(-2px);
}
.vb-btn-ghost {
background-color: transparent;
color: var(--vb-text-muted);
}
.vb-btn-ghost:hover {
background-color: rgba(255, 255, 255, 0.05);
color: var(--vb-text);
}
.vb-btn-circle {
width: 42px;
height: 42px;
padding: 0;
border-radius: 50% !important;
}
.vb-btn-block {
width: 100%;
}
/* Form Fields */
.vb-input {
width: 100%;
padding: 0.9rem 1.25rem;
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius-sm);
font-family: var(--vb-font-body);
font-size: 0.9rem;
color: var(--vb-text);
background-color: rgba(8, 5, 21, 0.5);
outline: none;
transition: var(--vb-transition);
}
.vb-input::placeholder {
color: var(--vb-text-light);
}
.vb-input:focus {
border-color: var(--vb-primary);
box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
background-color: rgba(8, 5, 21, 0.8);
}
.vb-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--vb-primary);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--vb-font-heading);
font-weight: 700;
margin: 0;
color: var(--vb-text);
line-height: 1.2;
}
p {
font-family: var(--vb-font-body);
font-weight: 400;
line-height: 1.6;
margin: 0;
color: var(--vb-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-cyan { color: var(--vb-primary) !important; }
.text-pink { color: var(--vb-accent) !important; }
.text-purple { color: var(--vb-secondary) !important; }
.text-muted { color: var(--vb-text-muted) !important; }
.bg-space { background-color: var(--vb-bg) !important; }
.bg-slate { background-color: var(--vb-bg-muted) !important; }
.bg-indigo { background-color: var(--vb-surface) !important; }
.glow-cyan { box-shadow: var(--vb-glow-cyan) !important; }
.glow-pink { box-shadow: var(--vb-glow-pink) !important; }
/* --- COMPONENT STYLES --- */
.vb-feed-card {
max-width: 500px;
margin: 2rem auto;
padding: 2.5rem 2.25rem !important;
}
.vb-feed-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.vb-feed-header h3 {
font-size: 1.5rem;
}
.vb-feed-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.vb-feed-item {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1rem;
border: 1px solid transparent;
border-radius: var(--vb-radius-sm);
transition: var(--vb-transition);
position: relative;
}
.vb-feed-item:hover {
background-color: var(--vb-surface);
border-color: var(--vb-border);
}
.vb-feed-item.vb-unread {
background-color: rgba(255, 0, 122, 0.03);
border-color: rgba(255, 0, 122, 0.1);
}
.vb-feed-avatar {
width: 36px;
height: 36px;
background-color: var(--vb-bg);
color: var(--vb-text);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--vb-font-body);
font-size: 0.75rem;
font-weight: 800;
border-radius: 50%;
border: 2px solid var(--vb-accent);
flex-shrink: 0;
}
.vb-feed-content {
flex: 1;
}
.vb-feed-content p {
font-size: 0.85rem;
color: var(--vb-text-muted);
line-height: 1.6;
margin-bottom: 0.25rem;
}
.vb-feed-content strong {
color: var(--vb-text);
}
.vb-feed-highlight {
font-weight: 700;
color: var(--vb-primary);
background-color: rgba(0, 240, 255, 0.05);
border: 1px solid rgba(0, 240, 255, 0.1);
padding: 0.15rem 0.4rem;
font-size: 0.8rem;
border-radius: 4px;
}
.vb-feed-time {
font-size: 0.7rem;
color: var(--vb-text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
}
.vb-unread-marker {
width: 8px;
height: 8px;
border-radius: 50%;
margin-left: 0.5rem;
flex-shrink: 0;
}
Modals
Glowing Confirm Overlay
HTML
<div class="vb-modal-overlay">
<div class="vb-modal vb-surface glow-pink" style="border-color: rgba(255, 0, 122, 0.35);">
<div class="vb-modal-icon glow-cyan">
<svg viewBox="0 0 24 24" width="22" height="22" stroke="var(--vb-primary)" stroke-width="2.5" fill="none"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
</div>
<div class="vb-modal-body">
<h3>Wipe Spatial Cache?</h3>
<p>This action will wipe the local spatial database for the 'Stark Editorial' atelier workspace. All local configurations and curation layers will be permanently lost.</p>
</div>
<div class="vb-modal-actions">
<button class="vb-btn vb-btn-outline">Cancel Action</button>
<button class="vb-btn vb-btn-primary vb-btn-pink">Wipe Cache</button>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Glowing Confirm Overlay */
/* NOTE: This component requires base.css to be included in your page. */
.vb-modal-overlay {
width: 100%;
min-height: 400px;
background: rgba(8, 5, 21, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
border-radius: var(--vb-radius);
border: 1px solid var(--vb-border);
}
.vb-modal {
max-width: 450px;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: var(--vb-shadow-lg);
padding: 3rem !important;
}
.vb-modal-icon {
width: 52px;
height: 52px;
border-radius: 50%;
background-color: var(--vb-bg);
border: 2px solid var(--vb-primary);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
}
.vb-modal-body {
margin-bottom: 2.5rem;
}
.vb-modal-body h3 {
font-size: 1.65rem;
margin-bottom: 0.75rem;
}
.vb-modal-body p {
font-size: 0.9rem;
color: var(--vb-text-muted);
line-height: 1.6;
}
.vb-modal-actions {
display: flex;
gap: 1.25rem;
width: 100%;
justify-content: center;
}
.vb-modal-actions .vb-btn {
flex: 1;
white-space: nowrap;
}
@media (max-width: 480px) {
.vb-modal-actions {
flex-direction: column-reverse;
align-items: stretch;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--vb-bg: #080515; /* Deep cyber space */
--vb-bg-muted: #120E2C; /* Cyber Slate surface */
--vb-surface: #18133C; /* Elevated dark Indigo */
--vb-primary: #00F0FF; /* Luminous Electric Cyan */
--vb-secondary: #8B5CF6; /* Vibrant Purple */
--vb-accent: #FF007A; /* Neon Magenta Pink */
--vb-text: #FFFFFF;
--vb-text-muted: #A5A1C9; /* Muted Lavender/Gray */
--vb-text-light: #6A658E;
--vb-border: #282255; /* Electric purple border */
--vb-border-light: #3F367A;
--vb-radius: 14px;
--vb-radius-lg: 20px;
--vb-radius-sm: 8px;
--vb-radius-full: 9999px;
--vb-font-heading: 'Outfit', sans-serif;
--vb-font-body: 'Plus Jakarta Sans', sans-serif;
--vb-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
--vb-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
--vb-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
--vb-glow-cyan: 0 0 15px rgba(0, 240, 255, 0.35);
--vb-glow-pink: 0 0 15px rgba(255, 0, 122, 0.35);
}
body {
margin: 0;
font-family: var(--vb-font-body);
color: var(--vb-text);
background-color: var(--vb-bg);
-webkit-font-smoothing: antialiased;
}
/* Surface containers */
.vb-surface {
background-color: var(--vb-bg-muted);
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius);
padding: 2.5rem;
box-shadow: var(--vb-shadow);
transition: var(--vb-transition);
}
/* Global Logo */
.vb-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--vb-font-heading);
font-size: 1.1rem;
font-weight: 800;
letter-spacing: 0.05em;
color: var(--vb-text);
}
.vb-logo span {
background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.vb-logo-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-accent) 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
}
.vb-logo-icon-inner {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: var(--vb-bg);
color: var(--vb-text);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--vb-font-heading);
font-size: 0.95rem;
font-weight: 900;
}
/* Global Buttons */
.vb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 2rem;
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.05em;
text-transform: uppercase;
border: 1px solid transparent;
border-radius: var(--vb-radius-sm);
cursor: pointer;
text-decoration: none;
transition: var(--vb-transition);
gap: 0.5rem;
}
.vb-btn-primary {
background-color: var(--vb-primary);
color: var(--vb-bg);
border-color: var(--vb-primary);
box-shadow: 0 4px 15px rgba(0, 240, 255, 0.2);
}
.vb-btn-primary:hover {
background-color: var(--vb-accent);
border-color: var(--vb-accent);
color: var(--vb-text);
box-shadow: var(--vb-glow-pink);
transform: translateY(-2px);
}
.vb-btn-outline {
background-color: transparent;
color: var(--vb-primary);
border-color: var(--vb-primary);
}
.vb-btn-outline:hover {
background-color: var(--vb-primary);
color: var(--vb-bg);
box-shadow: var(--vb-glow-cyan);
transform: translateY(-2px);
}
.vb-btn-ghost {
background-color: transparent;
color: var(--vb-text-muted);
}
.vb-btn-ghost:hover {
background-color: rgba(255, 255, 255, 0.05);
color: var(--vb-text);
}
.vb-btn-circle {
width: 42px;
height: 42px;
padding: 0;
border-radius: 50% !important;
}
.vb-btn-block {
width: 100%;
}
/* Form Fields */
.vb-input {
width: 100%;
padding: 0.9rem 1.25rem;
border: 1px solid var(--vb-border);
border-radius: var(--vb-radius-sm);
font-family: var(--vb-font-body);
font-size: 0.9rem;
color: var(--vb-text);
background-color: rgba(8, 5, 21, 0.5);
outline: none;
transition: var(--vb-transition);
}
.vb-input::placeholder {
color: var(--vb-text-light);
}
.vb-input:focus {
border-color: var(--vb-primary);
box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
background-color: rgba(8, 5, 21, 0.8);
}
.vb-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--vb-font-body);
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--vb-primary);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--vb-font-heading);
font-weight: 700;
margin: 0;
color: var(--vb-text);
line-height: 1.2;
}
p {
font-family: var(--vb-font-body);
font-weight: 400;
line-height: 1.6;
margin: 0;
color: var(--vb-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-cyan { color: var(--vb-primary) !important; }
.text-pink { color: var(--vb-accent) !important; }
.text-purple { color: var(--vb-secondary) !important; }
.text-muted { color: var(--vb-text-muted) !important; }
.bg-space { background-color: var(--vb-bg) !important; }
.bg-slate { background-color: var(--vb-bg-muted) !important; }
.bg-indigo { background-color: var(--vb-surface) !important; }
.glow-cyan { box-shadow: var(--vb-glow-cyan) !important; }
.glow-pink { box-shadow: var(--vb-glow-pink) !important; }
/* --- COMPONENT STYLES --- */
.vb-modal-overlay {
width: 100%;
min-height: 400px;
background: rgba(8, 5, 21, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
border-radius: var(--vb-radius);
border: 1px solid var(--vb-border);
}
.vb-modal {
max-width: 450px;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: var(--vb-shadow-lg);
padding: 3rem !important;
}
.vb-modal-icon {
width: 52px;
height: 52px;
border-radius: 50%;
background-color: var(--vb-bg);
border: 2px solid var(--vb-primary);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
}
.vb-modal-body {
margin-bottom: 2.5rem;
}
.vb-modal-body h3 {
font-size: 1.65rem;
margin-bottom: 0.75rem;
}
.vb-modal-body p {
font-size: 0.9rem;
color: var(--vb-text-muted);
line-height: 1.6;
}
.vb-modal-actions {
display: flex;
gap: 1.25rem;
width: 100%;
justify-content: center;
}
.vb-modal-actions .vb-btn {
flex: 1;
white-space: nowrap;
}
@media (max-width: 480px) {
.vb-modal-actions {
flex-direction: column-reverse;
align-items: stretch;
}
}