Bento Grid - Free HTML/CSS UI Kit
A modern, Apple-inspired Bento Grid UI Kit featuring asymmetric mosaic tile layouts, electric violet and cyan gradients, glassmorphism effects, and rich feature showcase grids for SaaS and product marketing pages.
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
Space Black
#0A0A0F
Electric Violet
#7C3AED
Cyber Cyan
#06B6D4
Neon Emerald
#10B981
Snow White
#F8FAFC
Typography
Hero Sections
Asymmetric Feature Bento Hero
HTML
<section class="bnt-hero-centered">
<div class="bnt-hero-container">
<!-- Hero Header -->
<div class="bnt-hero-header">
<span class="bnt-badge bnt-badge-violet">Bento Grid Engine v2.0</span>
<h1 class="bnt-hero-title">Architecting the Future of <span class="bnt-text-gradient">SaaS Grid
Systems</span></h1>
<p class="bnt-hero-subtitle">Deploy highly optimized, gorgeous, interactive bento dashboard layouts in
seconds. Perfectly responsive, Apple-inspired aesthetics built for developer speed.</p>
<div class="bnt-hero-actions">
<a href="#" class="bnt-btn bnt-btn-primary bnt-btn-lg">
Build Your Grid
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
style="width:16px;height:16px;">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</a>
<a href="#" class="bnt-btn bnt-btn-outline bnt-btn-lg">View Components</a>
</div>
</div>
<!-- Asymmetric Bento Showcase Grid -->
<div class="bnt-hero-grid">
<!-- Large Interactive Showcase Tile -->
<div class="bnt-tile bnt-tile-glow bnt-hero-tile-large">
<div class="bnt-hero-tile-content">
<span class="bnt-badge bnt-badge-cyan">Core Engine</span>
<h3>High-Performance Rendering</h3>
<p>Engineered to deliver lightning-fast paint cycles. Utilizing CSS container queries for robust
modular scaling.</p>
</div>
<div class="bnt-hero-graphic-core">
<div class="bnt-core-circle"></div>
<div class="bnt-core-orbit">
<div class="bnt-core-satellite"></div>
</div>
</div>
</div>
<!-- Code Panel Tile -->
<div class="bnt-tile bnt-hero-tile-code">
<div class="bnt-tile-header-bar">
<div class="bnt-dot-group">
<span class="bnt-dot bnt-dot-red"></span>
<span class="bnt-dot bnt-dot-yellow"></span>
<span class="bnt-dot bnt-dot-green"></span>
</div>
<span class="bnt-tile-filename">grid-config.json</span>
</div>
<pre class="bnt-code-block"><code>{
<span class="bnt-code-key">"layout"</span>: <span class="bnt-code-val">"bento-mosaic"</span>,
<span class="bnt-code-key">"columns"</span>: <span class="bnt-code-val">12</span>,
<span class="bnt-code-key">"responsive"</span>: <span class="bnt-code-val">true</span>,
<span class="bnt-code-key">"glow"</span>: <span class="bnt-code-val">"electric-violet"</span>,
<span class="bnt-code-key">"animation"</span>: <span class="bnt-code-val">"micro-springs"</span>
}</code></pre>
</div>
<!-- Mini Metrics Meter -->
<div class="bnt-tile bnt-hero-tile-metrics">
<span class="bnt-badge bnt-badge-emerald">Speed</span>
<div class="bnt-metric-val">99<span class="bnt-metric-unit">ms</span></div>
<h4>LCP Paint Target</h4>
<div class="bnt-sparkline-mini">
<svg viewBox="0 0 100 30" class="bnt-sparkline-svg">
<path d="M0,25 Q15,10 30,22 T60,15 T90,20 L100,12" fill="none" stroke="var(--bnt-emerald)"
stroke-width="2.5" stroke-linecap="round"></path>
</svg>
</div>
</div>
<!-- Integration Cluster -->
<div class="bnt-tile bnt-hero-tile-integrations">
<h4>Native Connectors</h4>
<p>Plug into top tools.</p>
<div class="bnt-integration-icons">
<div class="bnt-int-icon" title="Slack">
<svg viewBox="0 0 24 24" fill="currentColor">
<path
d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.528 2.528 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.528 2.528 0 0 1 2.52-2.52 2.528 2.528 0 0 1 2.52 2.52v6.313A2.528 2.528 0 0 1 8.833 24a2.528 2.528 0 0 1-2.52-2.522v-6.313zM8.833 5.042a2.528 2.528 0 0 1-2.52-2.52A2.528 2.528 0 0 1 8.833 0a2.528 2.528 0 0 1 2.52 2.522v2.52H8.833zm0 1.271a2.528 2.528 0 0 1 2.52 2.52 2.528 2.528 0 0 1-2.52 2.52H2.522A2.528 2.528 0 0 1 0 8.833a2.528 2.528 0 0 1 2.522-2.52h6.311zM18.956 8.833a2.528 2.528 0 0 1 2.522-2.52A2.528 2.528 0 0 1 24 8.833a2.528 2.528 0 0 1-2.522 2.52h-2.522V8.833zm-1.262 0a2.528 2.528 0 0 1-2.52 2.52 2.528 2.528 0 0 1-2.522-2.52V2.522A2.528 2.528 0 0 1 15.174 0a2.528 2.528 0 0 1 2.52 2.522v6.311zM15.174 18.956a2.528 2.528 0 0 1 2.52 2.522A2.528 2.528 0 0 1 15.174 24a2.528 2.528 0 0 1-2.522-2.522v-2.522h2.522zm0-1.262a2.528 2.528 0 0 1-2.522-2.52 2.528 2.528 0 0 1 2.522-2.52h6.304A2.528 2.528 0 0 1 24 15.174a2.528 2.528 0 0 1-2.522 2.52h-6.304z" />
</svg>
</div>
<div class="bnt-int-icon" title="Stripe">
<svg viewBox="0 0 24 24" fill="currentColor">
<path
d="M13.479 9.883c-2.409-.604-3.179-1.056-3.179-1.963 0-.799.732-1.279 1.964-1.279 2.065 0 4.232.778 5.72 1.637l.84-5.233C17.34 2.195 15.286 1.5 12.62 1.5 7.38 1.5 4.03 4.2 4.03 8.353c0 4.05 2.764 5.574 6.807 6.604 2.283.574 3.027 1.107 3.027 2.027 0 .92-.787 1.441-2.26 1.441-2.073 0-4.796-.935-6.497-2.081L4.25 21.5c1.702 1.103 4.578 2 7.617 2 5.548 0 8.795-2.621 8.795-6.863-.002-4.225-2.856-5.763-7.183-6.754z" />
</svg>
</div>
<div class="bnt-int-icon" title="Figma">
<svg viewBox="0 0 24 24" fill="currentColor">
<path
d="M8.5 2A3.5 3.5 0 0 0 5 5.5 3.5 3.5 0 0 0 8.5 9H12V5.5A3.5 3.5 0 0 0 8.5 2zM12 9h-3.5A3.5 3.5 0 0 0 5 12.5 3.5 3.5 0 0 0 8.5 16H12V9zm0 7H8.5A3.5 3.5 0 0 0 5 19.5 3.5 3.5 0 0 0 8.5 23 3.5 3.5 0 0 0 12 19.5V16zm0-14h3.5A3.5 3.5 0 0 1 19 5.5 3.5 3.5 0 0 1 15.5 9H12V2zm3.5 7A3.5 3.5 0 0 1 19 12.5 3.5 3.5 0 0 1 15.5 16 3.5 3.5 0 0 1 12 12.5 3.5 3.5 0 0 1 15.5 9z" />
</svg>
</div>
</div>
</div>
</div>
</div>
</section>
CSS (Component Only)
/* Component: Asymmetric Feature Bento Hero */
/* NOTE: This component requires base.css to be included in your page. */
/* Asymmetric Feature Bento Hero */
.bnt-hero-centered {
padding: 6rem 2rem 8rem 2rem;
background-color: var(--bnt-bg);
display: flex;
justify-content: center;
overflow: hidden;
}
.bnt-hero-container {
max-width: 1100px;
width: 100%;
}
.bnt-hero-header {
text-align: center;
max-width: 800px;
margin: 0 auto 5rem auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.bnt-hero-title {
font-size: 3.5rem;
line-height: 1.15;
letter-spacing: -0.03em;
font-weight: 800;
}
.bnt-hero-subtitle {
font-size: 1.15rem;
color: var(--bnt-text-muted);
line-height: 1.6;
max-width: 680px;
margin: 0;
}
.bnt-hero-actions {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
/* Asymmetric Bento Grid */
.bnt-hero-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 160px;
gap: 1.5rem;
}
/* Tile Layouts */
.bnt-hero-tile-large {
grid-column: span 7;
grid-row: span 2;
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.bnt-hero-tile-content {
flex: 1;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.8rem;
}
.bnt-hero-tile-content h3 {
font-size: 1.6rem;
letter-spacing: -0.01em;
}
.bnt-hero-tile-content p {
font-size: 0.9rem;
line-height: 1.5;
}
/* Core Graphic */
.bnt-hero-graphic-core {
width: 200px;
height: 200px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bnt-core-circle {
width: 60px;
height: 60px;
background: var(--bnt-grad-primary);
border-radius: 50%;
filter: drop-shadow(0 0 25px var(--bnt-violet));
z-index: 1;
}
.bnt-core-orbit {
width: 140px;
height: 140px;
border: 1px dashed rgba(6, 182, 212, 0.25);
border-radius: 50%;
position: absolute;
animation: bnt-spin 12s linear infinite;
}
.bnt-core-satellite {
width: 12px;
height: 12px;
background-color: var(--bnt-cyan);
border-radius: 50%;
position: absolute;
top: -6px;
left: calc(50% - 6px);
box-shadow: 0 0 10px var(--bnt-cyan);
}
@keyframes bnt-spin {
100% { transform: rotate(360deg); }
}
/* Code Panel Tile */
.bnt-hero-tile-code {
grid-column: span 5;
grid-row: span 2;
background-color: #0d0d12;
border: 1px solid var(--bnt-border-strong);
padding: 1.5rem !important;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.bnt-tile-header-bar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.bnt-dot-group {
display: flex;
gap: 0.35rem;
}
.bnt-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.bnt-dot-red { background-color: #EF4444; }
.bnt-dot-yellow { background-color: #F59E0B; }
.bnt-dot-green { background-color: #10B981; }
.bnt-tile-filename {
font-family: var(--bnt-font-mono);
font-size: 0.75rem;
color: var(--bnt-text-light);
}
.bnt-code-block {
margin: 0;
font-family: var(--bnt-font-mono);
font-size: 0.85rem;
color: #e2e8f0;
line-height: 1.6;
overflow-x: auto;
}
.bnt-code-key { color: var(--bnt-cyan-light); }
.bnt-code-val { color: var(--bnt-violet-light); }
/* Metrics Tile */
.bnt-hero-tile-metrics {
grid-column: span 4;
grid-row: span 1;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.bnt-metric-val {
font-size: 1.75rem;
font-weight: 800;
color: var(--bnt-text);
font-family: var(--bnt-font-heading);
margin-top: 0;
line-height: 1.1;
}
.bnt-metric-unit {
font-size: 1rem;
color: var(--bnt-emerald);
margin-left: 0.15rem;
}
.bnt-hero-tile-metrics h4 {
font-size: 0.8rem;
color: var(--bnt-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.bnt-sparkline-mini {
margin-top: 0;
height: 24px;
width: 100%;
flex-shrink: 0;
}
.bnt-sparkline-svg {
width: 100%;
height: 100%;
}
/* Integrations Tile */
.bnt-hero-tile-integrations {
grid-column: span 8;
grid-row: span 1;
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.bnt-hero-tile-integrations h4 {
font-size: 1.1rem;
margin-bottom: 0.25rem;
}
.bnt-hero-tile-integrations p {
font-size: 0.85rem;
}
.bnt-integration-icons {
display: flex;
gap: 0.85rem;
}
.bnt-int-icon {
width: 44px;
height: 44px;
border-radius: var(--bnt-radius);
background-color: var(--bnt-surface-2);
border: 1px solid var(--bnt-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--bnt-text-muted);
transition: var(--bnt-transition);
}
.bnt-int-icon:hover {
color: var(--bnt-violet-light);
border-color: var(--bnt-violet);
background-color: var(--bnt-surface-3);
transform: translateY(-3px);
}
.bnt-int-icon svg {
width: 20px;
height: 20px;
}
/* Responsive Grid */
@media (max-width: 992px) {
.bnt-hero-tile-large { grid-column: span 12; }
.bnt-hero-tile-code { grid-column: span 12; }
.bnt-hero-tile-metrics { grid-column: span 5; }
.bnt-hero-tile-integrations { grid-column: span 7; }
}
@media (max-width: 768px) {
.bnt-hero-title { font-size: 2.5rem; }
.bnt-hero-grid { grid-auto-rows: min-content; gap: 1rem; }
.bnt-hero-tile-large, .bnt-hero-tile-code, .bnt-hero-tile-metrics, .bnt-hero-tile-integrations {
grid-column: span 12 !important;
grid-row: auto !important;
}
.bnt-hero-tile-large { flex-direction: column; align-items: flex-start; }
.bnt-hero-graphic-core { align-self: center; margin-top: 1rem; }
}
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=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
/* =========================================
Bento Grid Design System (bnt-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Space backgrounds */
--bnt-bg: #0A0A0F; /* Deep Space Black */
--bnt-surface: #111118; /* Dark Indigo Surface */
--bnt-surface-2: #1A1A27; /* Elevated Tile */
--bnt-surface-3: #22222F; /* Deep Tile */
/* Vibrant Brand Palette */
--bnt-violet: #7C3AED; /* Electric Violet */
--bnt-violet-light: #8B5CF6;
--bnt-violet-hover: #6D28D9;
--bnt-violet-muted: rgba(124, 58, 237, 0.12);
--bnt-violet-glow: rgba(124, 58, 237, 0.25);
--bnt-cyan: #06B6D4; /* Cyber Cyan */
--bnt-cyan-light: #22D3EE;
--bnt-cyan-muted: rgba(6, 182, 212, 0.12);
--bnt-emerald: #10B981; /* Neon Emerald */
--bnt-emerald-muted: rgba(16, 185, 129, 0.12);
--bnt-rose: #F43F5E; /* Alert Rose */
--bnt-rose-muted: rgba(244, 63, 94, 0.12);
--bnt-amber: #F59E0B;
--bnt-amber-muted: rgba(245, 158, 11, 0.12);
/* Gradients */
--bnt-grad-primary: linear-gradient(135deg, #7C3AED, #06B6D4);
--bnt-grad-warm: linear-gradient(135deg, #7C3AED, #F43F5E);
--bnt-grad-cool: linear-gradient(135deg, #06B6D4, #10B981);
--bnt-grad-subtle: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(6,182,212,0.08));
/* Text */
--bnt-text: #F8FAFC; /* Snow White */
--bnt-text-muted: #94A3B8; /* Slate 400 */
--bnt-text-light: #64748B; /* Slate 500 */
/* Borders */
--bnt-border: #1E1E2E;
--bnt-border-strong: #2D2D40;
--bnt-border-glow: rgba(124, 58, 237, 0.3);
/* Rounded Shapes */
--bnt-radius-sm: 6px;
--bnt-radius: 12px;
--bnt-radius-lg: 20px;
--bnt-radius-xl: 28px;
--bnt-radius-pill: 999px;
/* Fonts */
--bnt-font-heading: 'Plus Jakarta Sans', sans-serif;
--bnt-font-body: 'Inter', sans-serif;
--bnt-font-mono: 'DM Mono', monospace;
/* Shadows */
--bnt-shadow-sm: 0 2px 10px rgba(0,0,0,0.4);
--bnt-shadow: 0 8px 30px rgba(0,0,0,0.5);
--bnt-shadow-glow: 0 0 30px rgba(124, 58, 237, 0.15);
--bnt-shadow-cyan: 0 0 30px rgba(6, 182, 212, 0.1);
/* Transition */
--bnt-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--bnt-font-body);
color: var(--bnt-text);
background-color: var(--bnt-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Bento Base Tile ──────────── */
.bnt-tile {
background-color: var(--bnt-surface);
border: 1px solid var(--bnt-border);
border-radius: var(--bnt-radius-lg);
padding: 2rem;
transition: var(--bnt-transition);
position: relative;
overflow: hidden;
}
.bnt-tile:hover {
border-color: var(--bnt-border-strong);
transform: translateY(-2px);
box-shadow: var(--bnt-shadow-glow);
}
/* Gradient glow tile variant */
.bnt-tile-glow {
background: var(--bnt-grad-subtle);
border-color: var(--bnt-border-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--bnt-font-heading);
font-weight: 700;
margin: 0;
color: var(--bnt-text);
line-height: 1.2;
}
p {
font-family: var(--bnt-font-body);
color: var(--bnt-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.bnt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--bnt-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--bnt-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--bnt-transition);
white-space: nowrap;
user-select: none;
}
.bnt-btn-primary {
background: var(--bnt-grad-primary);
color: #fff;
border: none;
box-shadow: 0 4px 15px var(--bnt-violet-glow);
}
.bnt-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 8px 25px var(--bnt-violet-glow);
filter: brightness(1.1);
}
.bnt-btn-violet {
background-color: var(--bnt-violet);
color: #fff;
border-color: var(--bnt-violet);
}
.bnt-btn-violet:hover {
background-color: var(--bnt-violet-hover);
transform: translateY(-1px);
box-shadow: var(--bnt-shadow-glow);
}
.bnt-btn-outline {
background-color: transparent;
color: var(--bnt-text-muted);
border-color: var(--bnt-border-strong);
}
.bnt-btn-outline:hover {
background-color: var(--bnt-surface-2);
color: var(--bnt-text);
border-color: var(--bnt-violet);
}
.bnt-btn-ghost {
background-color: transparent;
color: var(--bnt-text-muted);
border-color: transparent;
}
.bnt-btn-ghost:hover {
background-color: var(--bnt-surface-2);
color: var(--bnt-text);
}
.bnt-btn-cyan {
background-color: var(--bnt-cyan);
color: #0A0A0F;
border-color: var(--bnt-cyan);
font-weight: 800;
}
.bnt-btn-cyan:hover {
background-color: var(--bnt-cyan-light);
transform: translateY(-1px);
box-shadow: var(--bnt-shadow-cyan);
}
.bnt-btn-sm { padding: 0.4rem 1rem; font-size: 0.8rem; border-radius: var(--bnt-radius-sm); }
.bnt-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--bnt-radius-lg); }
.bnt-btn-pill { border-radius: var(--bnt-radius-pill); }
.bnt-btn-block { width: 100%; }
.bnt-btn-icon { width: 42px; height: 42px; padding: 0; border-radius: var(--bnt-radius); }
/* ── Form Controls ────────────── */
.bnt-input {
width: 100%;
padding: 0.7rem 1.1rem;
border: 1px solid var(--bnt-border-strong);
border-radius: var(--bnt-radius);
font-family: var(--bnt-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--bnt-text);
background-color: var(--bnt-surface-2);
outline: none;
transition: var(--bnt-transition);
}
.bnt-input::placeholder { color: var(--bnt-text-light); }
.bnt-input:focus {
border-color: var(--bnt-violet);
box-shadow: 0 0 0 3px var(--bnt-violet-muted);
}
.bnt-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--bnt-font-heading);
font-weight: 600;
font-size: 0.75rem;
color: var(--bnt-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.bnt-select {
width: 100%;
padding: 0.7rem 1.1rem;
border: 1px solid var(--bnt-border-strong);
border-radius: var(--bnt-radius);
font-family: var(--bnt-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--bnt-text);
background-color: var(--bnt-surface-2);
outline: none;
transition: var(--bnt-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238B5CF6' stroke-width='2'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1.1rem center;
background-size: 1rem;
cursor: pointer;
}
.bnt-select:focus {
border-color: var(--bnt-violet);
box-shadow: 0 0 0 3px var(--bnt-violet-muted);
}
/* ── Badges ───────────────────── */
.bnt-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--bnt-radius-pill);
font-family: var(--bnt-font-heading);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.bnt-badge-violet { background-color: var(--bnt-violet-muted); color: var(--bnt-violet-light); border-color: rgba(124,58,237,0.2); }
.bnt-badge-cyan { background-color: var(--bnt-cyan-muted); color: var(--bnt-cyan); border-color: rgba(6,182,212,0.2); }
.bnt-badge-emerald { background-color: var(--bnt-emerald-muted); color: var(--bnt-emerald); border-color: rgba(16,185,129,0.2); }
.bnt-badge-rose { background-color: var(--bnt-rose-muted); color: var(--bnt-rose); border-color: rgba(244,63,94,0.2); }
.bnt-badge-amber { background-color: var(--bnt-amber-muted); color: var(--bnt-amber); border-color: rgba(245,158,11,0.2); }
.bnt-badge-default { background-color: var(--bnt-surface-3); color: var(--bnt-text-muted); border-color: var(--bnt-border-strong); }
/* ── Checkbox ─────────────────── */
.bnt-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.6rem;
cursor: pointer;
user-select: none;
}
.bnt-checkbox {
appearance: none;
width: 17px;
height: 17px;
border: 1px solid var(--bnt-border-strong);
border-radius: 5px;
background-color: var(--bnt-surface-2);
outline: none;
cursor: pointer;
transition: var(--bnt-transition);
position: relative;
flex-shrink: 0;
}
.bnt-checkbox:checked {
background: var(--bnt-grad-primary);
border-color: var(--bnt-violet);
}
.bnt-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 5px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.bnt-checkbox-label {
font-size: 0.85rem;
font-weight: 500;
color: var(--bnt-text-muted);
}
/* ── Divider ──────────────────── */
.bnt-divider { border: none; border-top: 1px solid var(--bnt-border); margin: 0; }
/* ── Gradient Text ────────────── */
.bnt-text-gradient {
background: var(--bnt-grad-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── Utilities ────────────────── */
.text-violet { color: var(--bnt-violet-light) !important; }
.text-cyan { color: var(--bnt-cyan) !important; }
.text-emerald { color: var(--bnt-emerald) !important; }
.text-muted { color: var(--bnt-text-muted) !important; }
/* --- COMPONENT STYLES --- */
/* Asymmetric Feature Bento Hero */
.bnt-hero-centered {
padding: 6rem 2rem 8rem 2rem;
background-color: var(--bnt-bg);
display: flex;
justify-content: center;
overflow: hidden;
}
.bnt-hero-container {
max-width: 1100px;
width: 100%;
}
.bnt-hero-header {
text-align: center;
max-width: 800px;
margin: 0 auto 5rem auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.bnt-hero-title {
font-size: 3.5rem;
line-height: 1.15;
letter-spacing: -0.03em;
font-weight: 800;
}
.bnt-hero-subtitle {
font-size: 1.15rem;
color: var(--bnt-text-muted);
line-height: 1.6;
max-width: 680px;
margin: 0;
}
.bnt-hero-actions {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
/* Asymmetric Bento Grid */
.bnt-hero-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 160px;
gap: 1.5rem;
}
/* Tile Layouts */
.bnt-hero-tile-large {
grid-column: span 7;
grid-row: span 2;
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.bnt-hero-tile-content {
flex: 1;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.8rem;
}
.bnt-hero-tile-content h3 {
font-size: 1.6rem;
letter-spacing: -0.01em;
}
.bnt-hero-tile-content p {
font-size: 0.9rem;
line-height: 1.5;
}
/* Core Graphic */
.bnt-hero-graphic-core {
width: 200px;
height: 200px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bnt-core-circle {
width: 60px;
height: 60px;
background: var(--bnt-grad-primary);
border-radius: 50%;
filter: drop-shadow(0 0 25px var(--bnt-violet));
z-index: 1;
}
.bnt-core-orbit {
width: 140px;
height: 140px;
border: 1px dashed rgba(6, 182, 212, 0.25);
border-radius: 50%;
position: absolute;
animation: bnt-spin 12s linear infinite;
}
.bnt-core-satellite {
width: 12px;
height: 12px;
background-color: var(--bnt-cyan);
border-radius: 50%;
position: absolute;
top: -6px;
left: calc(50% - 6px);
box-shadow: 0 0 10px var(--bnt-cyan);
}
@keyframes bnt-spin {
100% { transform: rotate(360deg); }
}
/* Code Panel Tile */
.bnt-hero-tile-code {
grid-column: span 5;
grid-row: span 2;
background-color: #0d0d12;
border: 1px solid var(--bnt-border-strong);
padding: 1.5rem !important;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.bnt-tile-header-bar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.bnt-dot-group {
display: flex;
gap: 0.35rem;
}
.bnt-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.bnt-dot-red { background-color: #EF4444; }
.bnt-dot-yellow { background-color: #F59E0B; }
.bnt-dot-green { background-color: #10B981; }
.bnt-tile-filename {
font-family: var(--bnt-font-mono);
font-size: 0.75rem;
color: var(--bnt-text-light);
}
.bnt-code-block {
margin: 0;
font-family: var(--bnt-font-mono);
font-size: 0.85rem;
color: #e2e8f0;
line-height: 1.6;
overflow-x: auto;
}
.bnt-code-key { color: var(--bnt-cyan-light); }
.bnt-code-val { color: var(--bnt-violet-light); }
/* Metrics Tile */
.bnt-hero-tile-metrics {
grid-column: span 4;
grid-row: span 1;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.bnt-metric-val {
font-size: 1.75rem;
font-weight: 800;
color: var(--bnt-text);
font-family: var(--bnt-font-heading);
margin-top: 0;
line-height: 1.1;
}
.bnt-metric-unit {
font-size: 1rem;
color: var(--bnt-emerald);
margin-left: 0.15rem;
}
.bnt-hero-tile-metrics h4 {
font-size: 0.8rem;
color: var(--bnt-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.bnt-sparkline-mini {
margin-top: 0;
height: 24px;
width: 100%;
flex-shrink: 0;
}
.bnt-sparkline-svg {
width: 100%;
height: 100%;
}
/* Integrations Tile */
.bnt-hero-tile-integrations {
grid-column: span 8;
grid-row: span 1;
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.bnt-hero-tile-integrations h4 {
font-size: 1.1rem;
margin-bottom: 0.25rem;
}
.bnt-hero-tile-integrations p {
font-size: 0.85rem;
}
.bnt-integration-icons {
display: flex;
gap: 0.85rem;
}
.bnt-int-icon {
width: 44px;
height: 44px;
border-radius: var(--bnt-radius);
background-color: var(--bnt-surface-2);
border: 1px solid var(--bnt-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--bnt-text-muted);
transition: var(--bnt-transition);
}
.bnt-int-icon:hover {
color: var(--bnt-violet-light);
border-color: var(--bnt-violet);
background-color: var(--bnt-surface-3);
transform: translateY(-3px);
}
.bnt-int-icon svg {
width: 20px;
height: 20px;
}
/* Responsive Grid */
@media (max-width: 992px) {
.bnt-hero-tile-large { grid-column: span 12; }
.bnt-hero-tile-code { grid-column: span 12; }
.bnt-hero-tile-metrics { grid-column: span 5; }
.bnt-hero-tile-integrations { grid-column: span 7; }
}
@media (max-width: 768px) {
.bnt-hero-title { font-size: 2.5rem; }
.bnt-hero-grid { grid-auto-rows: min-content; gap: 1rem; }
.bnt-hero-tile-large, .bnt-hero-tile-code, .bnt-hero-tile-metrics, .bnt-hero-tile-integrations {
grid-column: span 12 !important;
grid-row: auto !important;
}
.bnt-hero-tile-large { flex-direction: column; align-items: flex-start; }
.bnt-hero-graphic-core { align-self: center; margin-top: 1rem; }
}
Split Bento Spotlight
HTML
<section class="bnt-hero-split">
<div class="bnt-split-container">
<!-- Text/CTA Side -->
<div class="bnt-split-content">
<span class="bnt-badge bnt-badge-cyan">Spotlight Feature</span>
<h1 class="bnt-split-title">Unparalleled Visual <span class="bnt-text-gradient">Fidelity.</span></h1>
<p class="bnt-split-desc">Bring your application dashboards to life with Apple-style dynamic bento grids.
Deliver stunning light-absorbing dark themes combined with electric violet typography overlays.</p>
<div class="bnt-split-actions">
<a href="#" class="bnt-btn bnt-btn-primary">Get Started Now</a>
<a href="#" class="bnt-btn bnt-btn-ghost">
See Live Demo
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
style="width:13px;height:13px;">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</a>
</div>
</div>
<!-- Bento Spotlight Side -->
<div class="bnt-split-showcase">
<div class="bnt-split-grid">
<!-- Mini Stat Card -->
<div class="bnt-tile bnt-split-tile-stat">
<span class="bnt-badge bnt-badge-emerald">+24.8%</span>
<h4 class="bnt-split-stat-label">Active Nodes</h4>
<div class="bnt-split-stat-val">4,892</div>
<span class="bnt-split-stat-sub">vs last week</span>
</div>
<!-- Custom Checkbox Settings -->
<div class="bnt-tile bnt-split-tile-toggle">
<h4>Auto-Scale</h4>
<p class="text-muted">Dynamic clusters</p>
<label class="bnt-checkbox-wrapper" style="margin-top: 1rem;">
<input type="checkbox" class="bnt-checkbox" checked>
<span class="bnt-checkbox-label">Multi-region</span>
</label>
</div>
<!-- Radial Progress -->
<div class="bnt-tile bnt-split-tile-radial">
<div class="bnt-radial-container">
<svg class="bnt-radial-svg" viewBox="0 0 36 36">
<path class="bnt-radial-bg"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831">
</path>
<path class="bnt-radial-stroke" stroke-dasharray="78, 100"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831">
</path>
</svg>
<div class="bnt-radial-info">
<span class="bnt-radial-val">78%</span>
<span class="bnt-radial-lbl">Capacity</span>
</div>
</div>
</div>
<!-- Live Sparkline -->
<div class="bnt-tile bnt-tile-glow bnt-split-tile-spark">
<div class="bnt-spark-header">
<h4>System Load</h4>
<span class="bnt-pulse-dot"></span>
</div>
<div class="bnt-sparkline-large">
<svg viewBox="0 0 140 40" class="bnt-sparkline-svg">
<path d="M0,35 Q10,15 20,30 T40,25 T60,25 T80,28 T100,28 T120,11" fill="none"
stroke="var(--bnt-violet)" stroke-width="2" stroke-linecap="round"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
</section>
CSS (Component Only)
/* Component: Split Bento Spotlight */
/* NOTE: This component requires base.css to be included in your page. */
/* Split Bento Spotlight */
.bnt-hero-split {
padding: 6rem 2rem;
background-color: var(--bnt-bg);
display: flex;
justify-content: center;
overflow: hidden;
}
.bnt-split-container {
max-width: 1100px;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.bnt-split-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
.bnt-split-title {
font-size: 3.5rem;
line-height: 1.1;
font-weight: 800;
letter-spacing: -0.03em;
}
.bnt-split-desc {
font-size: 1.1rem;
line-height: 1.6;
color: var(--bnt-text-muted);
}
.bnt-split-actions {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
/* Bento Spotlight Side */
.bnt-split-showcase {
position: relative;
}
.bnt-split-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 150px;
gap: 1.25rem;
}
/* Grid Tiles mapping */
.bnt-split-tile-stat {
grid-column: span 1;
grid-row: span 1;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
.bnt-split-stat-label {
font-size: 0.8rem;
color: var(--bnt-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 0.25rem;
}
.bnt-split-stat-val {
font-size: 2rem;
font-weight: 800;
line-height: 1.2;
color: var(--bnt-text);
}
.bnt-split-stat-sub {
font-size: 0.75rem;
color: var(--bnt-text-light);
}
.bnt-split-tile-toggle {
grid-column: span 1;
grid-row: span 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.bnt-split-tile-toggle h4 { font-size: 1rem; }
.bnt-split-tile-toggle p { font-size: 0.8rem; }
.bnt-split-tile-radial {
grid-column: span 1;
grid-row: span 1;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem !important;
}
/* Radial SVG drawing */
.bnt-radial-container {
position: relative;
width: 100px;
height: 100px;
}
.bnt-radial-svg {
width: 100%;
height: 100%;
}
.bnt-radial-bg {
fill: none;
stroke: var(--bnt-surface-3);
stroke-width: 3.5;
}
.bnt-radial-stroke {
fill: none;
stroke: var(--bnt-cyan);
stroke-width: 3.5;
stroke-linecap: round;
animation: bnt-radial-progress 1.5s ease-out forwards;
}
.bnt-radial-info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
}
.bnt-radial-val {
font-size: 1.1rem;
font-weight: 800;
color: var(--bnt-text);
}
.bnt-radial-lbl {
font-size: 0.55rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bnt-text-light);
}
@keyframes bnt-radial-progress {
0% { stroke-dasharray: 0, 100; }
}
.bnt-split-tile-spark {
grid-column: span 1;
grid-row: span 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.bnt-spark-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.bnt-spark-header h4 {
font-size: 0.8rem;
color: var(--bnt-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.bnt-pulse-dot {
width: 8px;
height: 8px;
background-color: var(--bnt-violet-light);
border-radius: 50%;
box-shadow: 0 0 10px var(--bnt-violet);
animation: bnt-pulse 2s infinite;
}
@keyframes bnt-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.35); opacity: 0.4; }
}
.bnt-sparkline-large {
height: 60px;
width: 100%;
}
/* Responsive splits */
@media (max-width: 992px) {
.bnt-split-container {
grid-template-columns: 1fr;
gap: 3.5rem;
}
.bnt-split-content {
align-items: center;
text-align: center;
}
.bnt-split-actions {
justify-content: center;
}
}
@media (max-width: 768px) {
.bnt-split-title { font-size: 2.5rem; }
.bnt-split-grid { grid-auto-rows: min-content; gap: 1rem; }
.bnt-split-tile-stat, .bnt-split-tile-toggle, .bnt-split-tile-radial, .bnt-split-tile-spark {
grid-column: span 2 !important;
grid-row: auto !important;
padding: 1.5rem !important;
}
}
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=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
/* =========================================
Bento Grid Design System (bnt-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Space backgrounds */
--bnt-bg: #0A0A0F; /* Deep Space Black */
--bnt-surface: #111118; /* Dark Indigo Surface */
--bnt-surface-2: #1A1A27; /* Elevated Tile */
--bnt-surface-3: #22222F; /* Deep Tile */
/* Vibrant Brand Palette */
--bnt-violet: #7C3AED; /* Electric Violet */
--bnt-violet-light: #8B5CF6;
--bnt-violet-hover: #6D28D9;
--bnt-violet-muted: rgba(124, 58, 237, 0.12);
--bnt-violet-glow: rgba(124, 58, 237, 0.25);
--bnt-cyan: #06B6D4; /* Cyber Cyan */
--bnt-cyan-light: #22D3EE;
--bnt-cyan-muted: rgba(6, 182, 212, 0.12);
--bnt-emerald: #10B981; /* Neon Emerald */
--bnt-emerald-muted: rgba(16, 185, 129, 0.12);
--bnt-rose: #F43F5E; /* Alert Rose */
--bnt-rose-muted: rgba(244, 63, 94, 0.12);
--bnt-amber: #F59E0B;
--bnt-amber-muted: rgba(245, 158, 11, 0.12);
/* Gradients */
--bnt-grad-primary: linear-gradient(135deg, #7C3AED, #06B6D4);
--bnt-grad-warm: linear-gradient(135deg, #7C3AED, #F43F5E);
--bnt-grad-cool: linear-gradient(135deg, #06B6D4, #10B981);
--bnt-grad-subtle: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(6,182,212,0.08));
/* Text */
--bnt-text: #F8FAFC; /* Snow White */
--bnt-text-muted: #94A3B8; /* Slate 400 */
--bnt-text-light: #64748B; /* Slate 500 */
/* Borders */
--bnt-border: #1E1E2E;
--bnt-border-strong: #2D2D40;
--bnt-border-glow: rgba(124, 58, 237, 0.3);
/* Rounded Shapes */
--bnt-radius-sm: 6px;
--bnt-radius: 12px;
--bnt-radius-lg: 20px;
--bnt-radius-xl: 28px;
--bnt-radius-pill: 999px;
/* Fonts */
--bnt-font-heading: 'Plus Jakarta Sans', sans-serif;
--bnt-font-body: 'Inter', sans-serif;
--bnt-font-mono: 'DM Mono', monospace;
/* Shadows */
--bnt-shadow-sm: 0 2px 10px rgba(0,0,0,0.4);
--bnt-shadow: 0 8px 30px rgba(0,0,0,0.5);
--bnt-shadow-glow: 0 0 30px rgba(124, 58, 237, 0.15);
--bnt-shadow-cyan: 0 0 30px rgba(6, 182, 212, 0.1);
/* Transition */
--bnt-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--bnt-font-body);
color: var(--bnt-text);
background-color: var(--bnt-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Bento Base Tile ──────────── */
.bnt-tile {
background-color: var(--bnt-surface);
border: 1px solid var(--bnt-border);
border-radius: var(--bnt-radius-lg);
padding: 2rem;
transition: var(--bnt-transition);
position: relative;
overflow: hidden;
}
.bnt-tile:hover {
border-color: var(--bnt-border-strong);
transform: translateY(-2px);
box-shadow: var(--bnt-shadow-glow);
}
/* Gradient glow tile variant */
.bnt-tile-glow {
background: var(--bnt-grad-subtle);
border-color: var(--bnt-border-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--bnt-font-heading);
font-weight: 700;
margin: 0;
color: var(--bnt-text);
line-height: 1.2;
}
p {
font-family: var(--bnt-font-body);
color: var(--bnt-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.bnt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--bnt-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--bnt-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--bnt-transition);
white-space: nowrap;
user-select: none;
}
.bnt-btn-primary {
background: var(--bnt-grad-primary);
color: #fff;
border: none;
box-shadow: 0 4px 15px var(--bnt-violet-glow);
}
.bnt-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 8px 25px var(--bnt-violet-glow);
filter: brightness(1.1);
}
.bnt-btn-violet {
background-color: var(--bnt-violet);
color: #fff;
border-color: var(--bnt-violet);
}
.bnt-btn-violet:hover {
background-color: var(--bnt-violet-hover);
transform: translateY(-1px);
box-shadow: var(--bnt-shadow-glow);
}
.bnt-btn-outline {
background-color: transparent;
color: var(--bnt-text-muted);
border-color: var(--bnt-border-strong);
}
.bnt-btn-outline:hover {
background-color: var(--bnt-surface-2);
color: var(--bnt-text);
border-color: var(--bnt-violet);
}
.bnt-btn-ghost {
background-color: transparent;
color: var(--bnt-text-muted);
border-color: transparent;
}
.bnt-btn-ghost:hover {
background-color: var(--bnt-surface-2);
color: var(--bnt-text);
}
.bnt-btn-cyan {
background-color: var(--bnt-cyan);
color: #0A0A0F;
border-color: var(--bnt-cyan);
font-weight: 800;
}
.bnt-btn-cyan:hover {
background-color: var(--bnt-cyan-light);
transform: translateY(-1px);
box-shadow: var(--bnt-shadow-cyan);
}
.bnt-btn-sm { padding: 0.4rem 1rem; font-size: 0.8rem; border-radius: var(--bnt-radius-sm); }
.bnt-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--bnt-radius-lg); }
.bnt-btn-pill { border-radius: var(--bnt-radius-pill); }
.bnt-btn-block { width: 100%; }
.bnt-btn-icon { width: 42px; height: 42px; padding: 0; border-radius: var(--bnt-radius); }
/* ── Form Controls ────────────── */
.bnt-input {
width: 100%;
padding: 0.7rem 1.1rem;
border: 1px solid var(--bnt-border-strong);
border-radius: var(--bnt-radius);
font-family: var(--bnt-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--bnt-text);
background-color: var(--bnt-surface-2);
outline: none;
transition: var(--bnt-transition);
}
.bnt-input::placeholder { color: var(--bnt-text-light); }
.bnt-input:focus {
border-color: var(--bnt-violet);
box-shadow: 0 0 0 3px var(--bnt-violet-muted);
}
.bnt-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--bnt-font-heading);
font-weight: 600;
font-size: 0.75rem;
color: var(--bnt-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.bnt-select {
width: 100%;
padding: 0.7rem 1.1rem;
border: 1px solid var(--bnt-border-strong);
border-radius: var(--bnt-radius);
font-family: var(--bnt-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--bnt-text);
background-color: var(--bnt-surface-2);
outline: none;
transition: var(--bnt-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238B5CF6' stroke-width='2'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1.1rem center;
background-size: 1rem;
cursor: pointer;
}
.bnt-select:focus {
border-color: var(--bnt-violet);
box-shadow: 0 0 0 3px var(--bnt-violet-muted);
}
/* ── Badges ───────────────────── */
.bnt-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--bnt-radius-pill);
font-family: var(--bnt-font-heading);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.bnt-badge-violet { background-color: var(--bnt-violet-muted); color: var(--bnt-violet-light); border-color: rgba(124,58,237,0.2); }
.bnt-badge-cyan { background-color: var(--bnt-cyan-muted); color: var(--bnt-cyan); border-color: rgba(6,182,212,0.2); }
.bnt-badge-emerald { background-color: var(--bnt-emerald-muted); color: var(--bnt-emerald); border-color: rgba(16,185,129,0.2); }
.bnt-badge-rose { background-color: var(--bnt-rose-muted); color: var(--bnt-rose); border-color: rgba(244,63,94,0.2); }
.bnt-badge-amber { background-color: var(--bnt-amber-muted); color: var(--bnt-amber); border-color: rgba(245,158,11,0.2); }
.bnt-badge-default { background-color: var(--bnt-surface-3); color: var(--bnt-text-muted); border-color: var(--bnt-border-strong); }
/* ── Checkbox ─────────────────── */
.bnt-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.6rem;
cursor: pointer;
user-select: none;
}
.bnt-checkbox {
appearance: none;
width: 17px;
height: 17px;
border: 1px solid var(--bnt-border-strong);
border-radius: 5px;
background-color: var(--bnt-surface-2);
outline: none;
cursor: pointer;
transition: var(--bnt-transition);
position: relative;
flex-shrink: 0;
}
.bnt-checkbox:checked {
background: var(--bnt-grad-primary);
border-color: var(--bnt-violet);
}
.bnt-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 5px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.bnt-checkbox-label {
font-size: 0.85rem;
font-weight: 500;
color: var(--bnt-text-muted);
}
/* ── Divider ──────────────────── */
.bnt-divider { border: none; border-top: 1px solid var(--bnt-border); margin: 0; }
/* ── Gradient Text ────────────── */
.bnt-text-gradient {
background: var(--bnt-grad-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── Utilities ────────────────── */
.text-violet { color: var(--bnt-violet-light) !important; }
.text-cyan { color: var(--bnt-cyan) !important; }
.text-emerald { color: var(--bnt-emerald) !important; }
.text-muted { color: var(--bnt-text-muted) !important; }
/* --- COMPONENT STYLES --- */
/* Split Bento Spotlight */
.bnt-hero-split {
padding: 6rem 2rem;
background-color: var(--bnt-bg);
display: flex;
justify-content: center;
overflow: hidden;
}
.bnt-split-container {
max-width: 1100px;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.bnt-split-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
.bnt-split-title {
font-size: 3.5rem;
line-height: 1.1;
font-weight: 800;
letter-spacing: -0.03em;
}
.bnt-split-desc {
font-size: 1.1rem;
line-height: 1.6;
color: var(--bnt-text-muted);
}
.bnt-split-actions {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
/* Bento Spotlight Side */
.bnt-split-showcase {
position: relative;
}
.bnt-split-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 150px;
gap: 1.25rem;
}
/* Grid Tiles mapping */
.bnt-split-tile-stat {
grid-column: span 1;
grid-row: span 1;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
.bnt-split-stat-label {
font-size: 0.8rem;
color: var(--bnt-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 0.25rem;
}
.bnt-split-stat-val {
font-size: 2rem;
font-weight: 800;
line-height: 1.2;
color: var(--bnt-text);
}
.bnt-split-stat-sub {
font-size: 0.75rem;
color: var(--bnt-text-light);
}
.bnt-split-tile-toggle {
grid-column: span 1;
grid-row: span 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.bnt-split-tile-toggle h4 { font-size: 1rem; }
.bnt-split-tile-toggle p { font-size: 0.8rem; }
.bnt-split-tile-radial {
grid-column: span 1;
grid-row: span 1;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem !important;
}
/* Radial SVG drawing */
.bnt-radial-container {
position: relative;
width: 100px;
height: 100px;
}
.bnt-radial-svg {
width: 100%;
height: 100%;
}
.bnt-radial-bg {
fill: none;
stroke: var(--bnt-surface-3);
stroke-width: 3.5;
}
.bnt-radial-stroke {
fill: none;
stroke: var(--bnt-cyan);
stroke-width: 3.5;
stroke-linecap: round;
animation: bnt-radial-progress 1.5s ease-out forwards;
}
.bnt-radial-info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
}
.bnt-radial-val {
font-size: 1.1rem;
font-weight: 800;
color: var(--bnt-text);
}
.bnt-radial-lbl {
font-size: 0.55rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bnt-text-light);
}
@keyframes bnt-radial-progress {
0% { stroke-dasharray: 0, 100; }
}
.bnt-split-tile-spark {
grid-column: span 1;
grid-row: span 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.bnt-spark-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.bnt-spark-header h4 {
font-size: 0.8rem;
color: var(--bnt-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.bnt-pulse-dot {
width: 8px;
height: 8px;
background-color: var(--bnt-violet-light);
border-radius: 50%;
box-shadow: 0 0 10px var(--bnt-violet);
animation: bnt-pulse 2s infinite;
}
@keyframes bnt-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.35); opacity: 0.4; }
}
.bnt-sparkline-large {
height: 60px;
width: 100%;
}
/* Responsive splits */
@media (max-width: 992px) {
.bnt-split-container {
grid-template-columns: 1fr;
gap: 3.5rem;
}
.bnt-split-content {
align-items: center;
text-align: center;
}
.bnt-split-actions {
justify-content: center;
}
}
@media (max-width: 768px) {
.bnt-split-title { font-size: 2.5rem; }
.bnt-split-grid { grid-auto-rows: min-content; gap: 1rem; }
.bnt-split-tile-stat, .bnt-split-tile-toggle, .bnt-split-tile-radial, .bnt-split-tile-spark {
grid-column: span 2 !important;
grid-row: auto !important;
padding: 1.5rem !important;
}
}
Forms
Bento Access Portal
HTML
<div class="bnt-login-wrapper">
<div class="bnt-tile bnt-tile-glow bnt-login-card">
<!-- Brand / Header -->
<div class="bnt-login-header">
<div class="bnt-login-logo">
<span class="bnt-logo-mark">
<svg viewBox="0 0 24 24" fill="none" style="width:12px;height:12px;"><rect x="2" y="2" width="9" height="9" rx="2" fill="currentColor"></rect><rect x="13" y="2" width="9" height="9" rx="2" fill="currentColor" opacity="0.5"></rect><rect x="2" y="13" width="9" height="9" rx="2" fill="currentColor" opacity="0.5"></rect><rect x="13" y="13" width="9" height="9" rx="2" fill="currentColor" opacity="0.3"></rect></svg>
</span>
Bentō
</div>
<h2>Enter the Core</h2>
<p>Access your modular cloud space.</p>
</div>
<!-- Social Login Grid -->
<div class="bnt-social-grid">
<button class="bnt-btn bnt-btn-outline bnt-social-btn">
<svg viewBox="0 0 24 24" fill="currentColor" style="width:14px;height:14px;"><path d="M12.24 10.285V13.4h6.887c-.275 1.565-1.88 4.604-6.887 4.604-4.33 0-7.859-3.578-7.859-8s3.53-8 7.859-8c2.46 0 4.105 1.025 5.047 1.926l2.427-2.334C17.955 2.192 15.34 1 12.24 1 5.48 1 0 6.48 0 13s5.48 12 12.24 12c7.05 0 11.75-4.91 11.75-11.89 0-.8-.08-1.41-.18-1.825H12.24z"/></svg>
Google
</button>
<button class="bnt-btn bnt-btn-outline bnt-social-btn">
<svg viewBox="0 0 24 24" fill="currentColor" style="width:14px;height:14px;"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
GitHub
</button>
</div>
<div class="bnt-form-divider">
<span>or email gateway</span>
</div>
<!-- Form fields -->
<form class="bnt-login-form" onsubmit="event.preventDefault();">
<div class="bnt-form-field">
<label class="bnt-label" for="login-email">Portal Identity</label>
<input class="bnt-input" type="email" id="login-email" placeholder="[email protected]" required>
</div>
<div class="bnt-form-field">
<div class="bnt-form-label-row">
<label class="bnt-label" for="login-pass">Passcode</label>
<a href="#" class="bnt-form-link">Forgot Key?</a>
</div>
<input class="bnt-input" type="password" id="login-pass" placeholder="••••••••••••" required>
</div>
<!-- Remember me custom check -->
<div class="bnt-form-actions-row">
<label class="bnt-checkbox-wrapper">
<input type="checkbox" class="bnt-checkbox" id="login-rem">
<span class="bnt-checkbox-label">Authorize device</span>
</label>
</div>
<!-- Submit -->
<button type="submit" class="bnt-btn bnt-btn-primary bnt-btn-block" style="margin-top: 0.5rem;">
Establish Connection
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="width:13px;height:13px;"><polyline points="9 18 15 12 9 6"></polyline></svg>
</button>
</form>
</div>
</div>
CSS (Component Only)
/* Component: Bento Access Portal */
/* NOTE: This component requires base.css to be included in your page. */
/* Bento Access Portal */
.bnt-login-wrapper {
display: flex;
justify-content: center;
align-items: center;
padding: 3rem 1rem;
background-color: var(--bnt-bg);
}
.bnt-login-card {
max-width: 440px;
width: 100%;
padding: 3rem 2.5rem !important;
box-shadow: var(--bnt-shadow), 0 0 60px rgba(124,58,237,0.06) !important;
}
.bnt-login-header {
text-align: center;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.bnt-login-logo {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--bnt-font-heading);
font-size: 1.1rem;
font-weight: 800;
color: var(--bnt-text);
margin-bottom: 0.5rem;
}
.bnt-login-header h2 {
font-size: 1.8rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.2;
}
.bnt-login-header p {
font-size: 0.9rem;
color: var(--bnt-text-muted);
}
/* Social Grid */
.bnt-social-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1.5rem;
}
.bnt-social-btn {
font-size: 0.8rem;
font-weight: 700;
gap: 0.4rem;
}
/* Divider */
.bnt-form-divider {
display: flex;
align-items: center;
justify-content: center;
margin: 1.5rem 0;
position: relative;
}
.bnt-form-divider::before {
content: "";
position: absolute;
width: 100%;
height: 1px;
background-color: var(--bnt-border);
z-index: 1;
}
.bnt-form-divider span {
background-color: var(--bnt-surface);
padding: 0 1rem;
font-family: var(--bnt-font-body);
font-size: 0.75rem;
color: var(--bnt-text-light);
position: relative;
z-index: 2;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Fields */
.bnt-login-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.bnt-form-field {
display: flex;
flex-direction: column;
}
.bnt-form-label-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.bnt-form-link {
font-family: var(--bnt-font-heading);
font-size: 0.75rem;
color: var(--bnt-violet-light);
text-decoration: none;
font-weight: 600;
margin-bottom: 0.45rem;
transition: var(--bnt-transition);
}
.bnt-form-link:hover {
color: var(--bnt-text);
}
.bnt-form-actions-row {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0.25rem 0;
}
@media (max-width: 480px) {
.bnt-login-card {
padding: 2.25rem 1.5rem !important;
}
.bnt-social-grid {
grid-template-columns: 1fr;
}
}
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=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
/* =========================================
Bento Grid Design System (bnt-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Space backgrounds */
--bnt-bg: #0A0A0F; /* Deep Space Black */
--bnt-surface: #111118; /* Dark Indigo Surface */
--bnt-surface-2: #1A1A27; /* Elevated Tile */
--bnt-surface-3: #22222F; /* Deep Tile */
/* Vibrant Brand Palette */
--bnt-violet: #7C3AED; /* Electric Violet */
--bnt-violet-light: #8B5CF6;
--bnt-violet-hover: #6D28D9;
--bnt-violet-muted: rgba(124, 58, 237, 0.12);
--bnt-violet-glow: rgba(124, 58, 237, 0.25);
--bnt-cyan: #06B6D4; /* Cyber Cyan */
--bnt-cyan-light: #22D3EE;
--bnt-cyan-muted: rgba(6, 182, 212, 0.12);
--bnt-emerald: #10B981; /* Neon Emerald */
--bnt-emerald-muted: rgba(16, 185, 129, 0.12);
--bnt-rose: #F43F5E; /* Alert Rose */
--bnt-rose-muted: rgba(244, 63, 94, 0.12);
--bnt-amber: #F59E0B;
--bnt-amber-muted: rgba(245, 158, 11, 0.12);
/* Gradients */
--bnt-grad-primary: linear-gradient(135deg, #7C3AED, #06B6D4);
--bnt-grad-warm: linear-gradient(135deg, #7C3AED, #F43F5E);
--bnt-grad-cool: linear-gradient(135deg, #06B6D4, #10B981);
--bnt-grad-subtle: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(6,182,212,0.08));
/* Text */
--bnt-text: #F8FAFC; /* Snow White */
--bnt-text-muted: #94A3B8; /* Slate 400 */
--bnt-text-light: #64748B; /* Slate 500 */
/* Borders */
--bnt-border: #1E1E2E;
--bnt-border-strong: #2D2D40;
--bnt-border-glow: rgba(124, 58, 237, 0.3);
/* Rounded Shapes */
--bnt-radius-sm: 6px;
--bnt-radius: 12px;
--bnt-radius-lg: 20px;
--bnt-radius-xl: 28px;
--bnt-radius-pill: 999px;
/* Fonts */
--bnt-font-heading: 'Plus Jakarta Sans', sans-serif;
--bnt-font-body: 'Inter', sans-serif;
--bnt-font-mono: 'DM Mono', monospace;
/* Shadows */
--bnt-shadow-sm: 0 2px 10px rgba(0,0,0,0.4);
--bnt-shadow: 0 8px 30px rgba(0,0,0,0.5);
--bnt-shadow-glow: 0 0 30px rgba(124, 58, 237, 0.15);
--bnt-shadow-cyan: 0 0 30px rgba(6, 182, 212, 0.1);
/* Transition */
--bnt-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--bnt-font-body);
color: var(--bnt-text);
background-color: var(--bnt-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Bento Base Tile ──────────── */
.bnt-tile {
background-color: var(--bnt-surface);
border: 1px solid var(--bnt-border);
border-radius: var(--bnt-radius-lg);
padding: 2rem;
transition: var(--bnt-transition);
position: relative;
overflow: hidden;
}
.bnt-tile:hover {
border-color: var(--bnt-border-strong);
transform: translateY(-2px);
box-shadow: var(--bnt-shadow-glow);
}
/* Gradient glow tile variant */
.bnt-tile-glow {
background: var(--bnt-grad-subtle);
border-color: var(--bnt-border-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--bnt-font-heading);
font-weight: 700;
margin: 0;
color: var(--bnt-text);
line-height: 1.2;
}
p {
font-family: var(--bnt-font-body);
color: var(--bnt-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.bnt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--bnt-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--bnt-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--bnt-transition);
white-space: nowrap;
user-select: none;
}
.bnt-btn-primary {
background: var(--bnt-grad-primary);
color: #fff;
border: none;
box-shadow: 0 4px 15px var(--bnt-violet-glow);
}
.bnt-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 8px 25px var(--bnt-violet-glow);
filter: brightness(1.1);
}
.bnt-btn-violet {
background-color: var(--bnt-violet);
color: #fff;
border-color: var(--bnt-violet);
}
.bnt-btn-violet:hover {
background-color: var(--bnt-violet-hover);
transform: translateY(-1px);
box-shadow: var(--bnt-shadow-glow);
}
.bnt-btn-outline {
background-color: transparent;
color: var(--bnt-text-muted);
border-color: var(--bnt-border-strong);
}
.bnt-btn-outline:hover {
background-color: var(--bnt-surface-2);
color: var(--bnt-text);
border-color: var(--bnt-violet);
}
.bnt-btn-ghost {
background-color: transparent;
color: var(--bnt-text-muted);
border-color: transparent;
}
.bnt-btn-ghost:hover {
background-color: var(--bnt-surface-2);
color: var(--bnt-text);
}
.bnt-btn-cyan {
background-color: var(--bnt-cyan);
color: #0A0A0F;
border-color: var(--bnt-cyan);
font-weight: 800;
}
.bnt-btn-cyan:hover {
background-color: var(--bnt-cyan-light);
transform: translateY(-1px);
box-shadow: var(--bnt-shadow-cyan);
}
.bnt-btn-sm { padding: 0.4rem 1rem; font-size: 0.8rem; border-radius: var(--bnt-radius-sm); }
.bnt-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--bnt-radius-lg); }
.bnt-btn-pill { border-radius: var(--bnt-radius-pill); }
.bnt-btn-block { width: 100%; }
.bnt-btn-icon { width: 42px; height: 42px; padding: 0; border-radius: var(--bnt-radius); }
/* ── Form Controls ────────────── */
.bnt-input {
width: 100%;
padding: 0.7rem 1.1rem;
border: 1px solid var(--bnt-border-strong);
border-radius: var(--bnt-radius);
font-family: var(--bnt-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--bnt-text);
background-color: var(--bnt-surface-2);
outline: none;
transition: var(--bnt-transition);
}
.bnt-input::placeholder { color: var(--bnt-text-light); }
.bnt-input:focus {
border-color: var(--bnt-violet);
box-shadow: 0 0 0 3px var(--bnt-violet-muted);
}
.bnt-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--bnt-font-heading);
font-weight: 600;
font-size: 0.75rem;
color: var(--bnt-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.bnt-select {
width: 100%;
padding: 0.7rem 1.1rem;
border: 1px solid var(--bnt-border-strong);
border-radius: var(--bnt-radius);
font-family: var(--bnt-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--bnt-text);
background-color: var(--bnt-surface-2);
outline: none;
transition: var(--bnt-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238B5CF6' stroke-width='2'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1.1rem center;
background-size: 1rem;
cursor: pointer;
}
.bnt-select:focus {
border-color: var(--bnt-violet);
box-shadow: 0 0 0 3px var(--bnt-violet-muted);
}
/* ── Badges ───────────────────── */
.bnt-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--bnt-radius-pill);
font-family: var(--bnt-font-heading);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.bnt-badge-violet { background-color: var(--bnt-violet-muted); color: var(--bnt-violet-light); border-color: rgba(124,58,237,0.2); }
.bnt-badge-cyan { background-color: var(--bnt-cyan-muted); color: var(--bnt-cyan); border-color: rgba(6,182,212,0.2); }
.bnt-badge-emerald { background-color: var(--bnt-emerald-muted); color: var(--bnt-emerald); border-color: rgba(16,185,129,0.2); }
.bnt-badge-rose { background-color: var(--bnt-rose-muted); color: var(--bnt-rose); border-color: rgba(244,63,94,0.2); }
.bnt-badge-amber { background-color: var(--bnt-amber-muted); color: var(--bnt-amber); border-color: rgba(245,158,11,0.2); }
.bnt-badge-default { background-color: var(--bnt-surface-3); color: var(--bnt-text-muted); border-color: var(--bnt-border-strong); }
/* ── Checkbox ─────────────────── */
.bnt-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.6rem;
cursor: pointer;
user-select: none;
}
.bnt-checkbox {
appearance: none;
width: 17px;
height: 17px;
border: 1px solid var(--bnt-border-strong);
border-radius: 5px;
background-color: var(--bnt-surface-2);
outline: none;
cursor: pointer;
transition: var(--bnt-transition);
position: relative;
flex-shrink: 0;
}
.bnt-checkbox:checked {
background: var(--bnt-grad-primary);
border-color: var(--bnt-violet);
}
.bnt-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 5px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.bnt-checkbox-label {
font-size: 0.85rem;
font-weight: 500;
color: var(--bnt-text-muted);
}
/* ── Divider ──────────────────── */
.bnt-divider { border: none; border-top: 1px solid var(--bnt-border); margin: 0; }
/* ── Gradient Text ────────────── */
.bnt-text-gradient {
background: var(--bnt-grad-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── Utilities ────────────────── */
.text-violet { color: var(--bnt-violet-light) !important; }
.text-cyan { color: var(--bnt-cyan) !important; }
.text-emerald { color: var(--bnt-emerald) !important; }
.text-muted { color: var(--bnt-text-muted) !important; }
/* --- COMPONENT STYLES --- */
/* Bento Access Portal */
.bnt-login-wrapper {
display: flex;
justify-content: center;
align-items: center;
padding: 3rem 1rem;
background-color: var(--bnt-bg);
}
.bnt-login-card {
max-width: 440px;
width: 100%;
padding: 3rem 2.5rem !important;
box-shadow: var(--bnt-shadow), 0 0 60px rgba(124,58,237,0.06) !important;
}
.bnt-login-header {
text-align: center;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.bnt-login-logo {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--bnt-font-heading);
font-size: 1.1rem;
font-weight: 800;
color: var(--bnt-text);
margin-bottom: 0.5rem;
}
.bnt-login-header h2 {
font-size: 1.8rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.2;
}
.bnt-login-header p {
font-size: 0.9rem;
color: var(--bnt-text-muted);
}
/* Social Grid */
.bnt-social-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1.5rem;
}
.bnt-social-btn {
font-size: 0.8rem;
font-weight: 700;
gap: 0.4rem;
}
/* Divider */
.bnt-form-divider {
display: flex;
align-items: center;
justify-content: center;
margin: 1.5rem 0;
position: relative;
}
.bnt-form-divider::before {
content: "";
position: absolute;
width: 100%;
height: 1px;
background-color: var(--bnt-border);
z-index: 1;
}
.bnt-form-divider span {
background-color: var(--bnt-surface);
padding: 0 1rem;
font-family: var(--bnt-font-body);
font-size: 0.75rem;
color: var(--bnt-text-light);
position: relative;
z-index: 2;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Fields */
.bnt-login-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.bnt-form-field {
display: flex;
flex-direction: column;
}
.bnt-form-label-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.bnt-form-link {
font-family: var(--bnt-font-heading);
font-size: 0.75rem;
color: var(--bnt-violet-light);
text-decoration: none;
font-weight: 600;
margin-bottom: 0.45rem;
transition: var(--bnt-transition);
}
.bnt-form-link:hover {
color: var(--bnt-text);
}
.bnt-form-actions-row {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0.25rem 0;
}
@media (max-width: 480px) {
.bnt-login-card {
padding: 2.25rem 1.5rem !important;
}
.bnt-social-grid {
grid-template-columns: 1fr;
}
}
Workspace Configurator
HTML
<div class="bnt-settings-wrapper">
<div class="bnt-tile bnt-settings-panel">
<!-- Panel Header -->
<div class="bnt-panel-header">
<h3>Workspace Configuration</h3>
<p>Customize settings, deploy keys, and manage cluster resources.</p>
</div>
<hr class="bnt-divider">
<!-- Configuration Form -->
<form class="bnt-settings-form" onsubmit="event.preventDefault();">
<!-- Row 1: Profile -->
<div class="bnt-settings-group">
<span class="bnt-label">Administrator Identity</span>
<div class="bnt-profile-row">
<div class="bnt-profile-avatar">
<img src="https://i.pravatar.cc/100?img=3" alt="Admin Avatar">
<div class="bnt-avatar-overlay">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="width:16px;height:16px;"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
</div>
</div>
<div class="bnt-profile-inputs">
<div class="bnt-form-field">
<input class="bnt-input" type="text" value="Barney Rubble" placeholder="Full Name">
</div>
<div class="bnt-form-field">
<input class="bnt-input bnt-input-prefix-styled" type="text" value="[email protected]" placeholder="Email Address" disabled>
</div>
</div>
</div>
</div>
<!-- Row 2: API Keys -->
<div class="bnt-settings-group">
<span class="bnt-label">Secure Access Token</span>
<div class="bnt-api-key-box">
<div class="bnt-api-input-wrap">
<input class="bnt-input bnt-input-mono" type="text" value="bnt_live_83kfs928sl109s8f32skjdhf7" readonly>
<button class="bnt-btn bnt-btn-ghost bnt-btn-sm bnt-btn-icon" title="Copy Key" type="button">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="width:14px;height:14px;"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
</button>
</div>
<button class="bnt-btn bnt-btn-outline bnt-btn-sm" type="button">Regenerate</button>
</div>
</div>
<!-- Row 3: Preferences -->
<div class="bnt-settings-group">
<span class="bnt-label">Platform Preferences</span>
<div class="bnt-pref-grid">
<div class="bnt-form-field">
<label class="bnt-label" for="settings-region">Primary Core Cluster</label>
<select class="bnt-select" id="settings-region">
<option value="us-east">US East (N. Virginia)</option>
<option value="eu-west" selected>EU West (Ireland)</option>
<option value="ap-south">AP South (Singapore)</option>
</select>
</div>
<!-- Toggles -->
<div class="bnt-toggles-col">
<label class="bnt-checkbox-wrapper">
<input type="checkbox" class="bnt-checkbox" checked>
<div class="bnt-checkbox-text-col">
<span class="bnt-checkbox-label" style="color: var(--bnt-text);">Auto-Save Infrastructure</span>
<p class="text-muted" style="font-size: 0.75rem; margin: 0;">Sync state changes to cloud nodes.</p>
</div>
</label>
</div>
</div>
</div>
<hr class="bnt-divider">
<!-- Panel Footer -->
<div class="bnt-panel-footer">
<button class="bnt-btn bnt-btn-ghost" type="button">Discard</button>
<button class="bnt-btn bnt-btn-primary" type="submit">Deploy Changes</button>
</div>
</form>
</div>
</div>
CSS (Component Only)
/* Component: Workspace Configurator */
/* NOTE: This component requires base.css to be included in your page. */
/* Bento Workspace Configurator */
.bnt-settings-wrapper {
display: flex;
justify-content: center;
padding: 3rem 1rem;
background-color: var(--bnt-bg);
}
.bnt-settings-panel {
max-width: 640px;
width: 100%;
padding: 0 !important; /* Managed by internal spacing */
box-shadow: var(--bnt-shadow), 0 0 60px rgba(124,58,237,0.03);
overflow: hidden;
}
.bnt-panel-header {
padding: 2.25rem 2.25rem 1.75rem 2.25rem;
}
.bnt-panel-header h3 {
font-size: 1.4rem;
font-weight: 750;
letter-spacing: -0.02em;
margin-bottom: 0.4rem;
}
.bnt-panel-header p {
font-size: 0.9rem;
color: var(--bnt-text-muted);
}
.bnt-settings-form {
padding: 2rem 2.25rem 2.25rem 2.25rem;
display: flex;
flex-direction: column;
gap: 2.25rem;
}
.bnt-settings-group {
display: flex;
flex-direction: column;
gap: 0.9rem;
}
/* Avatar profile row */
.bnt-profile-row {
display: flex;
align-items: center;
gap: 1.75rem;
}
.bnt-profile-avatar {
position: relative;
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
border: 2px solid var(--bnt-border-strong);
flex-shrink: 0;
}
.bnt-profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bnt-avatar-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(10, 10, 15, 0.7);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: var(--bnt-transition);
}
.bnt-profile-avatar:hover .bnt-avatar-overlay {
opacity: 1;
}
.bnt-profile-inputs {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.bnt-input-prefix-styled:disabled {
background-color: var(--bnt-surface-3);
color: var(--bnt-text-light);
border-color: var(--bnt-border);
cursor: not-allowed;
}
/* Secure Token Access Box */
.bnt-api-key-box {
display: flex;
gap: 1rem;
align-items: center;
}
.bnt-api-input-wrap {
display: flex;
flex: 1;
background-color: var(--bnt-surface-2);
border: 1px solid var(--bnt-border-strong);
border-radius: var(--bnt-radius);
padding: 0.25rem 0.25rem 0.25rem 0;
align-items: center;
}
.bnt-api-input-wrap input.bnt-input-mono {
border: none !important;
background: transparent !important;
font-family: var(--bnt-font-mono) !important;
font-size: 0.85rem;
padding-left: 1.1rem;
box-shadow: none !important;
letter-spacing: -0.01em;
}
/* Platform Preferences and checkboxes */
.bnt-pref-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
align-items: flex-end;
}
.bnt-toggles-col {
display: flex;
flex-direction: column;
gap: 1rem;
padding-bottom: 0.6rem;
}
.bnt-checkbox-text-col {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
/* Panel Footer */
.bnt-panel-footer {
display: flex;
justify-content: flex-end;
gap: 1rem;
margin-top: 0.5rem;
}
@media (max-width: 600px) {
.bnt-panel-header {
padding: 1.75rem 1.5rem 1.25rem 1.5rem;
}
.bnt-settings-form {
padding: 1.5rem;
}
.bnt-profile-row {
flex-direction: column;
align-items: center;
gap: 1.25rem;
}
.bnt-profile-inputs {
width: 100%;
}
.bnt-api-key-box {
flex-direction: column;
align-items: stretch;
}
.bnt-pref-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.bnt-panel-footer {
flex-direction: column-reverse;
}
.bnt-panel-footer button {
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=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
/* =========================================
Bento Grid Design System (bnt-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Space backgrounds */
--bnt-bg: #0A0A0F; /* Deep Space Black */
--bnt-surface: #111118; /* Dark Indigo Surface */
--bnt-surface-2: #1A1A27; /* Elevated Tile */
--bnt-surface-3: #22222F; /* Deep Tile */
/* Vibrant Brand Palette */
--bnt-violet: #7C3AED; /* Electric Violet */
--bnt-violet-light: #8B5CF6;
--bnt-violet-hover: #6D28D9;
--bnt-violet-muted: rgba(124, 58, 237, 0.12);
--bnt-violet-glow: rgba(124, 58, 237, 0.25);
--bnt-cyan: #06B6D4; /* Cyber Cyan */
--bnt-cyan-light: #22D3EE;
--bnt-cyan-muted: rgba(6, 182, 212, 0.12);
--bnt-emerald: #10B981; /* Neon Emerald */
--bnt-emerald-muted: rgba(16, 185, 129, 0.12);
--bnt-rose: #F43F5E; /* Alert Rose */
--bnt-rose-muted: rgba(244, 63, 94, 0.12);
--bnt-amber: #F59E0B;
--bnt-amber-muted: rgba(245, 158, 11, 0.12);
/* Gradients */
--bnt-grad-primary: linear-gradient(135deg, #7C3AED, #06B6D4);
--bnt-grad-warm: linear-gradient(135deg, #7C3AED, #F43F5E);
--bnt-grad-cool: linear-gradient(135deg, #06B6D4, #10B981);
--bnt-grad-subtle: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(6,182,212,0.08));
/* Text */
--bnt-text: #F8FAFC; /* Snow White */
--bnt-text-muted: #94A3B8; /* Slate 400 */
--bnt-text-light: #64748B; /* Slate 500 */
/* Borders */
--bnt-border: #1E1E2E;
--bnt-border-strong: #2D2D40;
--bnt-border-glow: rgba(124, 58, 237, 0.3);
/* Rounded Shapes */
--bnt-radius-sm: 6px;
--bnt-radius: 12px;
--bnt-radius-lg: 20px;
--bnt-radius-xl: 28px;
--bnt-radius-pill: 999px;
/* Fonts */
--bnt-font-heading: 'Plus Jakarta Sans', sans-serif;
--bnt-font-body: 'Inter', sans-serif;
--bnt-font-mono: 'DM Mono', monospace;
/* Shadows */
--bnt-shadow-sm: 0 2px 10px rgba(0,0,0,0.4);
--bnt-shadow: 0 8px 30px rgba(0,0,0,0.5);
--bnt-shadow-glow: 0 0 30px rgba(124, 58, 237, 0.15);
--bnt-shadow-cyan: 0 0 30px rgba(6, 182, 212, 0.1);
/* Transition */
--bnt-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--bnt-font-body);
color: var(--bnt-text);
background-color: var(--bnt-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Bento Base Tile ──────────── */
.bnt-tile {
background-color: var(--bnt-surface);
border: 1px solid var(--bnt-border);
border-radius: var(--bnt-radius-lg);
padding: 2rem;
transition: var(--bnt-transition);
position: relative;
overflow: hidden;
}
.bnt-tile:hover {
border-color: var(--bnt-border-strong);
transform: translateY(-2px);
box-shadow: var(--bnt-shadow-glow);
}
/* Gradient glow tile variant */
.bnt-tile-glow {
background: var(--bnt-grad-subtle);
border-color: var(--bnt-border-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--bnt-font-heading);
font-weight: 700;
margin: 0;
color: var(--bnt-text);
line-height: 1.2;
}
p {
font-family: var(--bnt-font-body);
color: var(--bnt-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.bnt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--bnt-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--bnt-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--bnt-transition);
white-space: nowrap;
user-select: none;
}
.bnt-btn-primary {
background: var(--bnt-grad-primary);
color: #fff;
border: none;
box-shadow: 0 4px 15px var(--bnt-violet-glow);
}
.bnt-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 8px 25px var(--bnt-violet-glow);
filter: brightness(1.1);
}
.bnt-btn-violet {
background-color: var(--bnt-violet);
color: #fff;
border-color: var(--bnt-violet);
}
.bnt-btn-violet:hover {
background-color: var(--bnt-violet-hover);
transform: translateY(-1px);
box-shadow: var(--bnt-shadow-glow);
}
.bnt-btn-outline {
background-color: transparent;
color: var(--bnt-text-muted);
border-color: var(--bnt-border-strong);
}
.bnt-btn-outline:hover {
background-color: var(--bnt-surface-2);
color: var(--bnt-text);
border-color: var(--bnt-violet);
}
.bnt-btn-ghost {
background-color: transparent;
color: var(--bnt-text-muted);
border-color: transparent;
}
.bnt-btn-ghost:hover {
background-color: var(--bnt-surface-2);
color: var(--bnt-text);
}
.bnt-btn-cyan {
background-color: var(--bnt-cyan);
color: #0A0A0F;
border-color: var(--bnt-cyan);
font-weight: 800;
}
.bnt-btn-cyan:hover {
background-color: var(--bnt-cyan-light);
transform: translateY(-1px);
box-shadow: var(--bnt-shadow-cyan);
}
.bnt-btn-sm { padding: 0.4rem 1rem; font-size: 0.8rem; border-radius: var(--bnt-radius-sm); }
.bnt-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--bnt-radius-lg); }
.bnt-btn-pill { border-radius: var(--bnt-radius-pill); }
.bnt-btn-block { width: 100%; }
.bnt-btn-icon { width: 42px; height: 42px; padding: 0; border-radius: var(--bnt-radius); }
/* ── Form Controls ────────────── */
.bnt-input {
width: 100%;
padding: 0.7rem 1.1rem;
border: 1px solid var(--bnt-border-strong);
border-radius: var(--bnt-radius);
font-family: var(--bnt-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--bnt-text);
background-color: var(--bnt-surface-2);
outline: none;
transition: var(--bnt-transition);
}
.bnt-input::placeholder { color: var(--bnt-text-light); }
.bnt-input:focus {
border-color: var(--bnt-violet);
box-shadow: 0 0 0 3px var(--bnt-violet-muted);
}
.bnt-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--bnt-font-heading);
font-weight: 600;
font-size: 0.75rem;
color: var(--bnt-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.bnt-select {
width: 100%;
padding: 0.7rem 1.1rem;
border: 1px solid var(--bnt-border-strong);
border-radius: var(--bnt-radius);
font-family: var(--bnt-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--bnt-text);
background-color: var(--bnt-surface-2);
outline: none;
transition: var(--bnt-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238B5CF6' stroke-width='2'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1.1rem center;
background-size: 1rem;
cursor: pointer;
}
.bnt-select:focus {
border-color: var(--bnt-violet);
box-shadow: 0 0 0 3px var(--bnt-violet-muted);
}
/* ── Badges ───────────────────── */
.bnt-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--bnt-radius-pill);
font-family: var(--bnt-font-heading);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.bnt-badge-violet { background-color: var(--bnt-violet-muted); color: var(--bnt-violet-light); border-color: rgba(124,58,237,0.2); }
.bnt-badge-cyan { background-color: var(--bnt-cyan-muted); color: var(--bnt-cyan); border-color: rgba(6,182,212,0.2); }
.bnt-badge-emerald { background-color: var(--bnt-emerald-muted); color: var(--bnt-emerald); border-color: rgba(16,185,129,0.2); }
.bnt-badge-rose { background-color: var(--bnt-rose-muted); color: var(--bnt-rose); border-color: rgba(244,63,94,0.2); }
.bnt-badge-amber { background-color: var(--bnt-amber-muted); color: var(--bnt-amber); border-color: rgba(245,158,11,0.2); }
.bnt-badge-default { background-color: var(--bnt-surface-3); color: var(--bnt-text-muted); border-color: var(--bnt-border-strong); }
/* ── Checkbox ─────────────────── */
.bnt-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.6rem;
cursor: pointer;
user-select: none;
}
.bnt-checkbox {
appearance: none;
width: 17px;
height: 17px;
border: 1px solid var(--bnt-border-strong);
border-radius: 5px;
background-color: var(--bnt-surface-2);
outline: none;
cursor: pointer;
transition: var(--bnt-transition);
position: relative;
flex-shrink: 0;
}
.bnt-checkbox:checked {
background: var(--bnt-grad-primary);
border-color: var(--bnt-violet);
}
.bnt-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 5px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.bnt-checkbox-label {
font-size: 0.85rem;
font-weight: 500;
color: var(--bnt-text-muted);
}
/* ── Divider ──────────────────── */
.bnt-divider { border: none; border-top: 1px solid var(--bnt-border); margin: 0; }
/* ── Gradient Text ────────────── */
.bnt-text-gradient {
background: var(--bnt-grad-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── Utilities ────────────────── */
.text-violet { color: var(--bnt-violet-light) !important; }
.text-cyan { color: var(--bnt-cyan) !important; }
.text-emerald { color: var(--bnt-emerald) !important; }
.text-muted { color: var(--bnt-text-muted) !important; }
/* --- COMPONENT STYLES --- */
/* Bento Workspace Configurator */
.bnt-settings-wrapper {
display: flex;
justify-content: center;
padding: 3rem 1rem;
background-color: var(--bnt-bg);
}
.bnt-settings-panel {
max-width: 640px;
width: 100%;
padding: 0 !important; /* Managed by internal spacing */
box-shadow: var(--bnt-shadow), 0 0 60px rgba(124,58,237,0.03);
overflow: hidden;
}
.bnt-panel-header {
padding: 2.25rem 2.25rem 1.75rem 2.25rem;
}
.bnt-panel-header h3 {
font-size: 1.4rem;
font-weight: 750;
letter-spacing: -0.02em;
margin-bottom: 0.4rem;
}
.bnt-panel-header p {
font-size: 0.9rem;
color: var(--bnt-text-muted);
}
.bnt-settings-form {
padding: 2rem 2.25rem 2.25rem 2.25rem;
display: flex;
flex-direction: column;
gap: 2.25rem;
}
.bnt-settings-group {
display: flex;
flex-direction: column;
gap: 0.9rem;
}
/* Avatar profile row */
.bnt-profile-row {
display: flex;
align-items: center;
gap: 1.75rem;
}
.bnt-profile-avatar {
position: relative;
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
border: 2px solid var(--bnt-border-strong);
flex-shrink: 0;
}
.bnt-profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bnt-avatar-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(10, 10, 15, 0.7);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: var(--bnt-transition);
}
.bnt-profile-avatar:hover .bnt-avatar-overlay {
opacity: 1;
}
.bnt-profile-inputs {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.bnt-input-prefix-styled:disabled {
background-color: var(--bnt-surface-3);
color: var(--bnt-text-light);
border-color: var(--bnt-border);
cursor: not-allowed;
}
/* Secure Token Access Box */
.bnt-api-key-box {
display: flex;
gap: 1rem;
align-items: center;
}
.bnt-api-input-wrap {
display: flex;
flex: 1;
background-color: var(--bnt-surface-2);
border: 1px solid var(--bnt-border-strong);
border-radius: var(--bnt-radius);
padding: 0.25rem 0.25rem 0.25rem 0;
align-items: center;
}
.bnt-api-input-wrap input.bnt-input-mono {
border: none !important;
background: transparent !important;
font-family: var(--bnt-font-mono) !important;
font-size: 0.85rem;
padding-left: 1.1rem;
box-shadow: none !important;
letter-spacing: -0.01em;
}
/* Platform Preferences and checkboxes */
.bnt-pref-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
align-items: flex-end;
}
.bnt-toggles-col {
display: flex;
flex-direction: column;
gap: 1rem;
padding-bottom: 0.6rem;
}
.bnt-checkbox-text-col {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
/* Panel Footer */
.bnt-panel-footer {
display: flex;
justify-content: flex-end;
gap: 1rem;
margin-top: 0.5rem;
}
@media (max-width: 600px) {
.bnt-panel-header {
padding: 1.75rem 1.5rem 1.25rem 1.5rem;
}
.bnt-settings-form {
padding: 1.5rem;
}
.bnt-profile-row {
flex-direction: column;
align-items: center;
gap: 1.25rem;
}
.bnt-profile-inputs {
width: 100%;
}
.bnt-api-key-box {
flex-direction: column;
align-items: stretch;
}
.bnt-pref-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.bnt-panel-footer {
flex-direction: column-reverse;
}
.bnt-panel-footer button {
width: 100%;
}
}
Cards
Signature Feature Bento Grid
HTML
<div class="bnt-product-grid">
<!-- Tile A (Large, span 2 columns): Dynamic Engine Core -->
<div class="bnt-tile bnt-tile-glow bnt-product-tile-engine">
<div class="bnt-product-tile-header">
<span class="bnt-badge bnt-badge-violet">Feature Highlight</span>
<h3>Next-Gen Sync Engine</h3>
<p>Experience real-time sync with advanced websocket protocols. Light-speed cluster deployment with absolute
structural isolation.</p>
</div>
<div class="bnt-engine-animation">
<div class="bnt-engine-track"></div>
<div class="bnt-engine-node node-a"></div>
<div class="bnt-engine-node node-b"></div>
<div class="bnt-engine-node node-c"></div>
</div>
</div>
<!-- Tile B (Tall, span 1 column): Integration Cluster -->
<div class="bnt-tile bnt-product-tile-integrations">
<div class="bnt-product-tile-header">
<span class="bnt-badge bnt-badge-cyan">Native Link</span>
<h3>Ecosystem Connectors</h3>
</div>
<div class="bnt-connector-list">
<div class="bnt-connector-item">
<span class="bnt-conn-icon conn-slack">
<svg viewBox="0 0 24 24" fill="currentColor">
<path
d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.528 2.528 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.528 2.528 0 0 1 2.52-2.52 2.528 2.528 0 0 1 2.52 2.52v6.313A2.528 2.528 0 0 1 8.833 24a2.528 2.528 0 0 1-2.52-2.522v-6.313zM8.833 5.042a2.528 2.528 0 0 1-2.52-2.52A2.528 2.528 0 0 1 8.833 0a2.528 2.528 0 0 1 2.52 2.522v2.52H8.833zm0 1.271a2.528 2.528 0 0 1 2.52 2.52 2.528 2.528 0 0 1-2.52 2.52H2.522A2.528 2.528 0 0 1 0 8.833a2.528 2.528 0 0 1 2.522-2.52h6.311zM18.956 8.833a2.528 2.528 0 0 1 2.522-2.52A2.528 2.528 0 0 1 24 8.833a2.528 2.528 0 0 1-2.522 2.52h-2.522V8.833zm-1.262 0a2.528 2.528 0 0 1-2.52 2.52 2.528 2.528 0 0 1-2.522-2.52V2.522A2.528 2.528 0 0 1 15.174 0a2.528 2.528 0 0 1 2.52 2.522v6.311zM15.174 18.956a2.528 2.528 0 0 1 2.52 2.522A2.528 2.528 0 0 1 15.174 24a2.528 2.528 0 0 1-2.522-2.522v-2.522h2.522zm0-1.262a2.528 2.528 0 0 1-2.522-2.52 2.528 2.528 0 0 1 2.522-2.52h6.304A2.528 2.528 0 0 1 24 15.174a2.528 2.528 0 0 1-2.522 2.52h-6.304z" />
</svg>
</span>
<div class="bnt-conn-text">
<strong>Slack Hub</strong>
<span>Real-time channel alerts</span>
</div>
</div>
<div class="bnt-connector-item">
<span class="bnt-conn-icon conn-stripe">
<svg viewBox="0 0 24 24" fill="currentColor">
<path
d="M13.479 9.883c-2.409-.604-3.179-1.056-3.179-1.963 0-.799.732-1.279 1.964-1.279 2.065 0 4.232.778 5.72 1.637l.84-5.233C17.34 2.195 15.286 1.5 12.62 1.5 7.38 1.5 4.03 4.2 4.03 8.353c0 4.05 2.764 5.574 6.807 6.604 2.283.574 3.027 1.107 3.027 2.027 0 .92-.787 1.441-2.26 1.441-2.073 0-4.796-.935-6.497-2.081L4.25 21.5c1.702 1.103 4.578 2 7.617 2 5.548 0 8.795-2.621 8.795-6.863-.002-4.225-2.856-5.763-7.183-6.754z" />
</svg>
</span>
<div class="bnt-conn-text">
<strong>Stripe Terminal</strong>
<span>SaaS transactional rails</span>
</div>
</div>
<div class="bnt-connector-item">
<span class="bnt-conn-icon conn-github">
<svg viewBox="0 0 24 24" fill="currentColor">
<path
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
</svg>
</span>
<div class="bnt-conn-text">
<strong>GitHub Actions</strong>
<span>CI/CD compilation loops</span>
</div>
</div>
</div>
</div>
<!-- Tile C (Wide, span 2 columns): Developer Code Interface -->
<div class="bnt-tile bnt-product-tile-code">
<div class="bnt-product-tile-header">
<span class="bnt-badge bnt-badge-emerald">Developer-First</span>
<h3>Clean Code Customization</h3>
<p>Every Bento grid component features structural vanilla elements, easily customized, read and compiled.
</p>
</div>
<div class="bnt-product-code-mock">
<div class="bnt-tile-header-bar">
<div class="bnt-dot-group">
<span class="bnt-dot bnt-dot-red"></span>
<span class="bnt-dot bnt-dot-yellow"></span>
<span class="bnt-dot bnt-dot-green"></span>
</div>
<span class="bnt-tile-filename">component.html</span>
</div>
<pre class="bnt-code-block"><code><span class="bnt-code-tag"><div</span> <span class="bnt-code-attr">class</span>=<span class="bnt-code-str">"bnt-tile bnt-tile-glow"</span><span class="bnt-code-tag">></span>
<span class="bnt-code-tag"><h3></span>Active Clusters<span class="bnt-code-tag"></h3></span>
<span class="bnt-code-tag"><span</span> <span class="bnt-code-attr">class</span>=<span class="bnt-code-str">"text-cyan"</span><span class="bnt-code-tag">></span>Online<span class="bnt-code-tag"></span></span>
<span class="bnt-code-tag"></div></span></code></pre>
</div>
</div>
<!-- Tile D (Small, span 1 column): Security Vault -->
<div class="bnt-tile bnt-product-tile-vault">
<div class="bnt-vault-visual">
<div class="bnt-vault-shield">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
style="width:28px;height:28px;">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
</svg>
</div>
</div>
<div class="bnt-product-tile-header">
<h3>Enterprise Vault</h3>
<p>End-to-end client encryption protocols.</p>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Signature Feature Bento Grid */
/* NOTE: This component requires base.css to be included in your page. */
/* Signature Feature Bento Grid */
.bnt-product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 240px;
gap: 1.5rem;
background-color: var(--bnt-bg);
}
.bnt-product-tile-header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
z-index: 2;
}
.bnt-product-tile-header h3 {
font-size: 1.3rem;
letter-spacing: -0.01em;
color: var(--bnt-text);
}
.bnt-product-tile-header p {
font-size: 0.85rem;
line-height: 1.5;
}
/* Tile mappings */
.bnt-product-tile-engine {
grid-column: span 2;
grid-row: span 1;
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.bnt-engine-animation {
width: 140px;
height: 140px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bnt-engine-track {
width: 100px;
height: 100px;
border: 1px dashed var(--bnt-border-strong);
border-radius: 50%;
position: absolute;
}
.bnt-engine-node {
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
}
.node-a {
background-color: var(--bnt-violet-light);
box-shadow: 0 0 10px var(--bnt-violet);
top: 20px;
left: 20px;
animation: bnt-orbit-node 6s linear infinite;
}
.node-b {
background-color: var(--bnt-cyan);
box-shadow: 0 0 10px var(--bnt-cyan);
bottom: 20px;
right: 20px;
animation: bnt-orbit-node-rev 8s linear infinite;
}
.node-c {
background-color: var(--bnt-emerald);
box-shadow: 0 0 10px var(--bnt-emerald);
top: calc(50% - 5px);
left: calc(50% - 5px);
}
@keyframes bnt-orbit-node {
0% { transform: rotate(0deg) translate(50px) rotate(0deg); }
100% { transform: rotate(360deg) translate(50px) rotate(-360deg); }
}
@keyframes bnt-orbit-node-rev {
0% { transform: rotate(360deg) translate(50px) rotate(-360deg); }
100% { transform: rotate(0deg) translate(50px) rotate(0deg); }
}
.bnt-product-tile-integrations {
grid-column: span 1;
grid-row: span 2;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.bnt-connector-list {
display: flex;
flex-direction: column;
gap: 0.95rem;
}
.bnt-connector-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.65rem 0.85rem;
border-radius: var(--bnt-radius);
background-color: var(--bnt-surface-2);
border: 1px solid var(--bnt-border);
transition: var(--bnt-transition);
}
.bnt-connector-item:hover {
border-color: var(--bnt-border-strong);
background-color: var(--bnt-surface-3);
transform: translateX(2px);
}
.bnt-conn-icon {
width: 34px;
height: 34px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.conn-slack { background-color: var(--bnt-rose-muted); color: var(--bnt-rose); }
.conn-stripe { background-color: var(--bnt-violet-muted); color: var(--bnt-violet-light); }
.conn-github { background-color: var(--bnt-surface-3); color: var(--bnt-text); }
.bnt-conn-icon svg {
width: 16px;
height: 16px;
}
.bnt-conn-text {
display: flex;
flex-direction: column;
}
.bnt-conn-text strong {
font-size: 0.85rem;
color: var(--bnt-text);
}
.bnt-conn-text span {
font-size: 0.75rem;
color: var(--bnt-text-muted);
}
.bnt-product-tile-code {
grid-column: span 2;
grid-row: span 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.bnt-product-tile-code .bnt-product-tile-header {
flex: 1;
}
.bnt-product-code-mock {
flex: 1;
background-color: #0d0d12;
border: 1px solid var(--bnt-border-strong);
border-radius: var(--bnt-radius);
padding: 1.2rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
}
.bnt-code-tag { color: var(--bnt-violet-light); }
.bnt-code-attr { color: var(--bnt-cyan); }
.bnt-code-str { color: var(--bnt-emerald); }
.bnt-product-tile-vault {
grid-column: span 1;
grid-row: span 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.bnt-vault-visual {
width: 50px;
height: 50px;
border-radius: 12px;
background-color: var(--bnt-cyan-muted);
color: var(--bnt-cyan);
display: flex;
align-items: center;
justify-content: center;
}
/* Responsive grid layouts */
@media (max-width: 992px) {
.bnt-product-grid {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: auto;
}
.bnt-product-tile-engine, .bnt-product-tile-integrations, .bnt-product-tile-code, .bnt-product-tile-vault {
grid-column: span 2 !important;
grid-row: auto !important;
padding: 1.75rem !important;
}
.bnt-product-tile-engine { flex-direction: column; align-items: flex-start; gap: 1rem; }
.bnt-engine-animation { align-self: center; }
}
@media (max-width: 768px) {
.bnt-product-tile-code {
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
}
@media (max-width: 576px) {
.bnt-product-tile-engine, .bnt-product-tile-integrations, .bnt-product-tile-code, .bnt-product-tile-vault {
grid-column: span 2 !important;
}
}
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=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
/* =========================================
Bento Grid Design System (bnt-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Space backgrounds */
--bnt-bg: #0A0A0F; /* Deep Space Black */
--bnt-surface: #111118; /* Dark Indigo Surface */
--bnt-surface-2: #1A1A27; /* Elevated Tile */
--bnt-surface-3: #22222F; /* Deep Tile */
/* Vibrant Brand Palette */
--bnt-violet: #7C3AED; /* Electric Violet */
--bnt-violet-light: #8B5CF6;
--bnt-violet-hover: #6D28D9;
--bnt-violet-muted: rgba(124, 58, 237, 0.12);
--bnt-violet-glow: rgba(124, 58, 237, 0.25);
--bnt-cyan: #06B6D4; /* Cyber Cyan */
--bnt-cyan-light: #22D3EE;
--bnt-cyan-muted: rgba(6, 182, 212, 0.12);
--bnt-emerald: #10B981; /* Neon Emerald */
--bnt-emerald-muted: rgba(16, 185, 129, 0.12);
--bnt-rose: #F43F5E; /* Alert Rose */
--bnt-rose-muted: rgba(244, 63, 94, 0.12);
--bnt-amber: #F59E0B;
--bnt-amber-muted: rgba(245, 158, 11, 0.12);
/* Gradients */
--bnt-grad-primary: linear-gradient(135deg, #7C3AED, #06B6D4);
--bnt-grad-warm: linear-gradient(135deg, #7C3AED, #F43F5E);
--bnt-grad-cool: linear-gradient(135deg, #06B6D4, #10B981);
--bnt-grad-subtle: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(6,182,212,0.08));
/* Text */
--bnt-text: #F8FAFC; /* Snow White */
--bnt-text-muted: #94A3B8; /* Slate 400 */
--bnt-text-light: #64748B; /* Slate 500 */
/* Borders */
--bnt-border: #1E1E2E;
--bnt-border-strong: #2D2D40;
--bnt-border-glow: rgba(124, 58, 237, 0.3);
/* Rounded Shapes */
--bnt-radius-sm: 6px;
--bnt-radius: 12px;
--bnt-radius-lg: 20px;
--bnt-radius-xl: 28px;
--bnt-radius-pill: 999px;
/* Fonts */
--bnt-font-heading: 'Plus Jakarta Sans', sans-serif;
--bnt-font-body: 'Inter', sans-serif;
--bnt-font-mono: 'DM Mono', monospace;
/* Shadows */
--bnt-shadow-sm: 0 2px 10px rgba(0,0,0,0.4);
--bnt-shadow: 0 8px 30px rgba(0,0,0,0.5);
--bnt-shadow-glow: 0 0 30px rgba(124, 58, 237, 0.15);
--bnt-shadow-cyan: 0 0 30px rgba(6, 182, 212, 0.1);
/* Transition */
--bnt-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--bnt-font-body);
color: var(--bnt-text);
background-color: var(--bnt-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Bento Base Tile ──────────── */
.bnt-tile {
background-color: var(--bnt-surface);
border: 1px solid var(--bnt-border);
border-radius: var(--bnt-radius-lg);
padding: 2rem;
transition: var(--bnt-transition);
position: relative;
overflow: hidden;
}
.bnt-tile:hover {
border-color: var(--bnt-border-strong);
transform: translateY(-2px);
box-shadow: var(--bnt-shadow-glow);
}
/* Gradient glow tile variant */
.bnt-tile-glow {
background: var(--bnt-grad-subtle);
border-color: var(--bnt-border-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--bnt-font-heading);
font-weight: 700;
margin: 0;
color: var(--bnt-text);
line-height: 1.2;
}
p {
font-family: var(--bnt-font-body);
color: var(--bnt-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.bnt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--bnt-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--bnt-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--bnt-transition);
white-space: nowrap;
user-select: none;
}
.bnt-btn-primary {
background: var(--bnt-grad-primary);
color: #fff;
border: none;
box-shadow: 0 4px 15px var(--bnt-violet-glow);
}
.bnt-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 8px 25px var(--bnt-violet-glow);
filter: brightness(1.1);
}
.bnt-btn-violet {
background-color: var(--bnt-violet);
color: #fff;
border-color: var(--bnt-violet);
}
.bnt-btn-violet:hover {
background-color: var(--bnt-violet-hover);
transform: translateY(-1px);
box-shadow: var(--bnt-shadow-glow);
}
.bnt-btn-outline {
background-color: transparent;
color: var(--bnt-text-muted);
border-color: var(--bnt-border-strong);
}
.bnt-btn-outline:hover {
background-color: var(--bnt-surface-2);
color: var(--bnt-text);
border-color: var(--bnt-violet);
}
.bnt-btn-ghost {
background-color: transparent;
color: var(--bnt-text-muted);
border-color: transparent;
}
.bnt-btn-ghost:hover {
background-color: var(--bnt-surface-2);
color: var(--bnt-text);
}
.bnt-btn-cyan {
background-color: var(--bnt-cyan);
color: #0A0A0F;
border-color: var(--bnt-cyan);
font-weight: 800;
}
.bnt-btn-cyan:hover {
background-color: var(--bnt-cyan-light);
transform: translateY(-1px);
box-shadow: var(--bnt-shadow-cyan);
}
.bnt-btn-sm { padding: 0.4rem 1rem; font-size: 0.8rem; border-radius: var(--bnt-radius-sm); }
.bnt-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--bnt-radius-lg); }
.bnt-btn-pill { border-radius: var(--bnt-radius-pill); }
.bnt-btn-block { width: 100%; }
.bnt-btn-icon { width: 42px; height: 42px; padding: 0; border-radius: var(--bnt-radius); }
/* ── Form Controls ────────────── */
.bnt-input {
width: 100%;
padding: 0.7rem 1.1rem;
border: 1px solid var(--bnt-border-strong);
border-radius: var(--bnt-radius);
font-family: var(--bnt-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--bnt-text);
background-color: var(--bnt-surface-2);
outline: none;
transition: var(--bnt-transition);
}
.bnt-input::placeholder { color: var(--bnt-text-light); }
.bnt-input:focus {
border-color: var(--bnt-violet);
box-shadow: 0 0 0 3px var(--bnt-violet-muted);
}
.bnt-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--bnt-font-heading);
font-weight: 600;
font-size: 0.75rem;
color: var(--bnt-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.bnt-select {
width: 100%;
padding: 0.7rem 1.1rem;
border: 1px solid var(--bnt-border-strong);
border-radius: var(--bnt-radius);
font-family: var(--bnt-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--bnt-text);
background-color: var(--bnt-surface-2);
outline: none;
transition: var(--bnt-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238B5CF6' stroke-width='2'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1.1rem center;
background-size: 1rem;
cursor: pointer;
}
.bnt-select:focus {
border-color: var(--bnt-violet);
box-shadow: 0 0 0 3px var(--bnt-violet-muted);
}
/* ── Badges ───────────────────── */
.bnt-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--bnt-radius-pill);
font-family: var(--bnt-font-heading);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.bnt-badge-violet { background-color: var(--bnt-violet-muted); color: var(--bnt-violet-light); border-color: rgba(124,58,237,0.2); }
.bnt-badge-cyan { background-color: var(--bnt-cyan-muted); color: var(--bnt-cyan); border-color: rgba(6,182,212,0.2); }
.bnt-badge-emerald { background-color: var(--bnt-emerald-muted); color: var(--bnt-emerald); border-color: rgba(16,185,129,0.2); }
.bnt-badge-rose { background-color: var(--bnt-rose-muted); color: var(--bnt-rose); border-color: rgba(244,63,94,0.2); }
.bnt-badge-amber { background-color: var(--bnt-amber-muted); color: var(--bnt-amber); border-color: rgba(245,158,11,0.2); }
.bnt-badge-default { background-color: var(--bnt-surface-3); color: var(--bnt-text-muted); border-color: var(--bnt-border-strong); }
/* ── Checkbox ─────────────────── */
.bnt-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.6rem;
cursor: pointer;
user-select: none;
}
.bnt-checkbox {
appearance: none;
width: 17px;
height: 17px;
border: 1px solid var(--bnt-border-strong);
border-radius: 5px;
background-color: var(--bnt-surface-2);
outline: none;
cursor: pointer;
transition: var(--bnt-transition);
position: relative;
flex-shrink: 0;
}
.bnt-checkbox:checked {
background: var(--bnt-grad-primary);
border-color: var(--bnt-violet);
}
.bnt-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 5px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.bnt-checkbox-label {
font-size: 0.85rem;
font-weight: 500;
color: var(--bnt-text-muted);
}
/* ── Divider ──────────────────── */
.bnt-divider { border: none; border-top: 1px solid var(--bnt-border); margin: 0; }
/* ── Gradient Text ────────────── */
.bnt-text-gradient {
background: var(--bnt-grad-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── Utilities ────────────────── */
.text-violet { color: var(--bnt-violet-light) !important; }
.text-cyan { color: var(--bnt-cyan) !important; }
.text-emerald { color: var(--bnt-emerald) !important; }
.text-muted { color: var(--bnt-text-muted) !important; }
/* --- COMPONENT STYLES --- */
/* Signature Feature Bento Grid */
.bnt-product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 240px;
gap: 1.5rem;
background-color: var(--bnt-bg);
}
.bnt-product-tile-header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
z-index: 2;
}
.bnt-product-tile-header h3 {
font-size: 1.3rem;
letter-spacing: -0.01em;
color: var(--bnt-text);
}
.bnt-product-tile-header p {
font-size: 0.85rem;
line-height: 1.5;
}
/* Tile mappings */
.bnt-product-tile-engine {
grid-column: span 2;
grid-row: span 1;
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.bnt-engine-animation {
width: 140px;
height: 140px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bnt-engine-track {
width: 100px;
height: 100px;
border: 1px dashed var(--bnt-border-strong);
border-radius: 50%;
position: absolute;
}
.bnt-engine-node {
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
}
.node-a {
background-color: var(--bnt-violet-light);
box-shadow: 0 0 10px var(--bnt-violet);
top: 20px;
left: 20px;
animation: bnt-orbit-node 6s linear infinite;
}
.node-b {
background-color: var(--bnt-cyan);
box-shadow: 0 0 10px var(--bnt-cyan);
bottom: 20px;
right: 20px;
animation: bnt-orbit-node-rev 8s linear infinite;
}
.node-c {
background-color: var(--bnt-emerald);
box-shadow: 0 0 10px var(--bnt-emerald);
top: calc(50% - 5px);
left: calc(50% - 5px);
}
@keyframes bnt-orbit-node {
0% { transform: rotate(0deg) translate(50px) rotate(0deg); }
100% { transform: rotate(360deg) translate(50px) rotate(-360deg); }
}
@keyframes bnt-orbit-node-rev {
0% { transform: rotate(360deg) translate(50px) rotate(-360deg); }
100% { transform: rotate(0deg) translate(50px) rotate(0deg); }
}
.bnt-product-tile-integrations {
grid-column: span 1;
grid-row: span 2;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.bnt-connector-list {
display: flex;
flex-direction: column;
gap: 0.95rem;
}
.bnt-connector-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.65rem 0.85rem;
border-radius: var(--bnt-radius);
background-color: var(--bnt-surface-2);
border: 1px solid var(--bnt-border);
transition: var(--bnt-transition);
}
.bnt-connector-item:hover {
border-color: var(--bnt-border-strong);
background-color: var(--bnt-surface-3);
transform: translateX(2px);
}
.bnt-conn-icon {
width: 34px;
height: 34px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.conn-slack { background-color: var(--bnt-rose-muted); color: var(--bnt-rose); }
.conn-stripe { background-color: var(--bnt-violet-muted); color: var(--bnt-violet-light); }
.conn-github { background-color: var(--bnt-surface-3); color: var(--bnt-text); }
.bnt-conn-icon svg {
width: 16px;
height: 16px;
}
.bnt-conn-text {
display: flex;
flex-direction: column;
}
.bnt-conn-text strong {
font-size: 0.85rem;
color: var(--bnt-text);
}
.bnt-conn-text span {
font-size: 0.75rem;
color: var(--bnt-text-muted);
}
.bnt-product-tile-code {
grid-column: span 2;
grid-row: span 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.bnt-product-tile-code .bnt-product-tile-header {
flex: 1;
}
.bnt-product-code-mock {
flex: 1;
background-color: #0d0d12;
border: 1px solid var(--bnt-border-strong);
border-radius: var(--bnt-radius);
padding: 1.2rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
}
.bnt-code-tag { color: var(--bnt-violet-light); }
.bnt-code-attr { color: var(--bnt-cyan); }
.bnt-code-str { color: var(--bnt-emerald); }
.bnt-product-tile-vault {
grid-column: span 1;
grid-row: span 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.bnt-vault-visual {
width: 50px;
height: 50px;
border-radius: 12px;
background-color: var(--bnt-cyan-muted);
color: var(--bnt-cyan);
display: flex;
align-items: center;
justify-content: center;
}
/* Responsive grid layouts */
@media (max-width: 992px) {
.bnt-product-grid {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: auto;
}
.bnt-product-tile-engine, .bnt-product-tile-integrations, .bnt-product-tile-code, .bnt-product-tile-vault {
grid-column: span 2 !important;
grid-row: auto !important;
padding: 1.75rem !important;
}
.bnt-product-tile-engine { flex-direction: column; align-items: flex-start; gap: 1rem; }
.bnt-engine-animation { align-self: center; }
}
@media (max-width: 768px) {
.bnt-product-tile-code {
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
}
@media (max-width: 576px) {
.bnt-product-tile-engine, .bnt-product-tile-integrations, .bnt-product-tile-code, .bnt-product-tile-vault {
grid-column: span 2 !important;
}
}
Metrics Bento Dashboard
HTML
<div class="bnt-stats-grid">
<!-- Stat 1: Revenue -->
<div class="bnt-tile bnt-stat-card">
<div class="bnt-stat-header">
<h4>Monthly Recurring Rev</h4>
<span class="bnt-trend-badge trend-up">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
style="width:10px;height:10px;">
<polyline points="18 15 12 9 6 15"></polyline>
</svg>
18.4%
</span>
</div>
<div class="bnt-stat-value">$148,250</div>
<div class="bnt-stat-sparkline">
<svg viewBox="0 0 220 40" class="bnt-stat-spark-svg">
<path d="M0,30 Q20,15 40,28 T80,20 T120,23 T160,18 T200,18" fill="none" stroke="var(--bnt-emerald)"
stroke-width="2.5" stroke-linecap="round"></path>
</svg>
</div>
<div class="bnt-stat-desc">from $125,180 last month</div>
</div>
<!-- Stat 2: Active Core Nodes -->
<div class="bnt-tile bnt-tile-glow bnt-stat-card">
<div class="bnt-stat-header">
<h4>Live Compute Clusters</h4>
<span class="bnt-badge bnt-badge-cyan">Syncing</span>
</div>
<div class="bnt-stat-value">2,481<span class="bnt-stat-unit">/2.5k</span></div>
<div class="bnt-cluster-bar-wrap">
<div class="bnt-cluster-bar-fill" style="width: 92%;"></div>
</div>
<div class="bnt-stat-desc">System Load: 68% (optimal)</div>
</div>
<!-- Stat 3: Query Latency -->
<div class="bnt-tile bnt-stat-card">
<div class="bnt-stat-header">
<h4>Median Query Latency</h4>
<span class="bnt-trend-badge trend-down">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
style="width:10px;height:10px;">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
4.2%
</span>
</div>
<div class="bnt-stat-value">14.8<span class="bnt-stat-unit">ms</span></div>
<div class="bnt-stat-sparkline">
<svg viewBox="0 0 220 40" class="bnt-stat-spark-svg">
<path d="M0,15 Q30,30 60,10 T120,25 T180,8" fill="none" stroke="var(--bnt-violet-light)"
stroke-width="2.5" stroke-linecap="round"></path>
</svg>
</div>
<div class="bnt-stat-desc">Standard Dev: 1.2ms</div>
</div>
</div>
CSS (Component Only)
/* Component: Metrics Bento Dashboard */
/* NOTE: This component requires base.css to be included in your page. */
/* Metrics Bento Dashboard */
.bnt-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
background-color: var(--bnt-bg);
}
.bnt-stat-card {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1rem;
}
.bnt-stat-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.bnt-stat-header h4 {
font-size: 0.8rem;
color: var(--bnt-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Trend Badges */
.bnt-trend-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.55rem;
border-radius: var(--bnt-radius-pill);
font-family: var(--bnt-font-heading);
font-size: 0.7rem;
font-weight: 700;
}
.bnt-trend-badge.trend-up {
background-color: var(--bnt-emerald-muted);
color: var(--bnt-emerald);
}
.bnt-trend-badge.trend-down {
background-color: var(--bnt-rose-muted);
color: var(--bnt-rose);
}
.bnt-stat-value {
font-size: 2.25rem;
font-weight: 800;
line-height: 1.1;
color: var(--bnt-text);
letter-spacing: -0.02em;
}
.bnt-stat-unit {
font-size: 0.95rem;
color: var(--bnt-text-light);
margin-left: 0.2rem;
font-weight: 500;
}
.bnt-stat-desc {
font-size: 0.8rem;
color: var(--bnt-text-light);
}
/* Sparklines inside stat cards */
.bnt-stat-sparkline {
height: 40px;
width: 100%;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.bnt-stat-spark-svg {
width: 100%;
height: 100%;
}
/* Progress Cluster Bar */
.bnt-cluster-bar-wrap {
width: 100%;
height: 6px;
border-radius: var(--bnt-radius-pill);
background-color: var(--bnt-surface-3);
overflow: hidden;
margin-top: 1rem;
margin-bottom: 1rem;
}
.bnt-cluster-bar-fill {
height: 100%;
background: var(--bnt-grad-primary);
border-radius: var(--bnt-radius-pill);
box-shadow: 0 0 10px var(--bnt-violet);
}
@media (max-width: 576px) {
.bnt-stats-grid {
grid-template-columns: 1fr;
}
}
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=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
/* =========================================
Bento Grid Design System (bnt-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Space backgrounds */
--bnt-bg: #0A0A0F; /* Deep Space Black */
--bnt-surface: #111118; /* Dark Indigo Surface */
--bnt-surface-2: #1A1A27; /* Elevated Tile */
--bnt-surface-3: #22222F; /* Deep Tile */
/* Vibrant Brand Palette */
--bnt-violet: #7C3AED; /* Electric Violet */
--bnt-violet-light: #8B5CF6;
--bnt-violet-hover: #6D28D9;
--bnt-violet-muted: rgba(124, 58, 237, 0.12);
--bnt-violet-glow: rgba(124, 58, 237, 0.25);
--bnt-cyan: #06B6D4; /* Cyber Cyan */
--bnt-cyan-light: #22D3EE;
--bnt-cyan-muted: rgba(6, 182, 212, 0.12);
--bnt-emerald: #10B981; /* Neon Emerald */
--bnt-emerald-muted: rgba(16, 185, 129, 0.12);
--bnt-rose: #F43F5E; /* Alert Rose */
--bnt-rose-muted: rgba(244, 63, 94, 0.12);
--bnt-amber: #F59E0B;
--bnt-amber-muted: rgba(245, 158, 11, 0.12);
/* Gradients */
--bnt-grad-primary: linear-gradient(135deg, #7C3AED, #06B6D4);
--bnt-grad-warm: linear-gradient(135deg, #7C3AED, #F43F5E);
--bnt-grad-cool: linear-gradient(135deg, #06B6D4, #10B981);
--bnt-grad-subtle: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(6,182,212,0.08));
/* Text */
--bnt-text: #F8FAFC; /* Snow White */
--bnt-text-muted: #94A3B8; /* Slate 400 */
--bnt-text-light: #64748B; /* Slate 500 */
/* Borders */
--bnt-border: #1E1E2E;
--bnt-border-strong: #2D2D40;
--bnt-border-glow: rgba(124, 58, 237, 0.3);
/* Rounded Shapes */
--bnt-radius-sm: 6px;
--bnt-radius: 12px;
--bnt-radius-lg: 20px;
--bnt-radius-xl: 28px;
--bnt-radius-pill: 999px;
/* Fonts */
--bnt-font-heading: 'Plus Jakarta Sans', sans-serif;
--bnt-font-body: 'Inter', sans-serif;
--bnt-font-mono: 'DM Mono', monospace;
/* Shadows */
--bnt-shadow-sm: 0 2px 10px rgba(0,0,0,0.4);
--bnt-shadow: 0 8px 30px rgba(0,0,0,0.5);
--bnt-shadow-glow: 0 0 30px rgba(124, 58, 237, 0.15);
--bnt-shadow-cyan: 0 0 30px rgba(6, 182, 212, 0.1);
/* Transition */
--bnt-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--bnt-font-body);
color: var(--bnt-text);
background-color: var(--bnt-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Bento Base Tile ──────────── */
.bnt-tile {
background-color: var(--bnt-surface);
border: 1px solid var(--bnt-border);
border-radius: var(--bnt-radius-lg);
padding: 2rem;
transition: var(--bnt-transition);
position: relative;
overflow: hidden;
}
.bnt-tile:hover {
border-color: var(--bnt-border-strong);
transform: translateY(-2px);
box-shadow: var(--bnt-shadow-glow);
}
/* Gradient glow tile variant */
.bnt-tile-glow {
background: var(--bnt-grad-subtle);
border-color: var(--bnt-border-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--bnt-font-heading);
font-weight: 700;
margin: 0;
color: var(--bnt-text);
line-height: 1.2;
}
p {
font-family: var(--bnt-font-body);
color: var(--bnt-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.bnt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--bnt-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--bnt-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--bnt-transition);
white-space: nowrap;
user-select: none;
}
.bnt-btn-primary {
background: var(--bnt-grad-primary);
color: #fff;
border: none;
box-shadow: 0 4px 15px var(--bnt-violet-glow);
}
.bnt-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 8px 25px var(--bnt-violet-glow);
filter: brightness(1.1);
}
.bnt-btn-violet {
background-color: var(--bnt-violet);
color: #fff;
border-color: var(--bnt-violet);
}
.bnt-btn-violet:hover {
background-color: var(--bnt-violet-hover);
transform: translateY(-1px);
box-shadow: var(--bnt-shadow-glow);
}
.bnt-btn-outline {
background-color: transparent;
color: var(--bnt-text-muted);
border-color: var(--bnt-border-strong);
}
.bnt-btn-outline:hover {
background-color: var(--bnt-surface-2);
color: var(--bnt-text);
border-color: var(--bnt-violet);
}
.bnt-btn-ghost {
background-color: transparent;
color: var(--bnt-text-muted);
border-color: transparent;
}
.bnt-btn-ghost:hover {
background-color: var(--bnt-surface-2);
color: var(--bnt-text);
}
.bnt-btn-cyan {
background-color: var(--bnt-cyan);
color: #0A0A0F;
border-color: var(--bnt-cyan);
font-weight: 800;
}
.bnt-btn-cyan:hover {
background-color: var(--bnt-cyan-light);
transform: translateY(-1px);
box-shadow: var(--bnt-shadow-cyan);
}
.bnt-btn-sm { padding: 0.4rem 1rem; font-size: 0.8rem; border-radius: var(--bnt-radius-sm); }
.bnt-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--bnt-radius-lg); }
.bnt-btn-pill { border-radius: var(--bnt-radius-pill); }
.bnt-btn-block { width: 100%; }
.bnt-btn-icon { width: 42px; height: 42px; padding: 0; border-radius: var(--bnt-radius); }
/* ── Form Controls ────────────── */
.bnt-input {
width: 100%;
padding: 0.7rem 1.1rem;
border: 1px solid var(--bnt-border-strong);
border-radius: var(--bnt-radius);
font-family: var(--bnt-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--bnt-text);
background-color: var(--bnt-surface-2);
outline: none;
transition: var(--bnt-transition);
}
.bnt-input::placeholder { color: var(--bnt-text-light); }
.bnt-input:focus {
border-color: var(--bnt-violet);
box-shadow: 0 0 0 3px var(--bnt-violet-muted);
}
.bnt-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--bnt-font-heading);
font-weight: 600;
font-size: 0.75rem;
color: var(--bnt-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.bnt-select {
width: 100%;
padding: 0.7rem 1.1rem;
border: 1px solid var(--bnt-border-strong);
border-radius: var(--bnt-radius);
font-family: var(--bnt-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--bnt-text);
background-color: var(--bnt-surface-2);
outline: none;
transition: var(--bnt-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238B5CF6' stroke-width='2'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1.1rem center;
background-size: 1rem;
cursor: pointer;
}
.bnt-select:focus {
border-color: var(--bnt-violet);
box-shadow: 0 0 0 3px var(--bnt-violet-muted);
}
/* ── Badges ───────────────────── */
.bnt-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--bnt-radius-pill);
font-family: var(--bnt-font-heading);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.bnt-badge-violet { background-color: var(--bnt-violet-muted); color: var(--bnt-violet-light); border-color: rgba(124,58,237,0.2); }
.bnt-badge-cyan { background-color: var(--bnt-cyan-muted); color: var(--bnt-cyan); border-color: rgba(6,182,212,0.2); }
.bnt-badge-emerald { background-color: var(--bnt-emerald-muted); color: var(--bnt-emerald); border-color: rgba(16,185,129,0.2); }
.bnt-badge-rose { background-color: var(--bnt-rose-muted); color: var(--bnt-rose); border-color: rgba(244,63,94,0.2); }
.bnt-badge-amber { background-color: var(--bnt-amber-muted); color: var(--bnt-amber); border-color: rgba(245,158,11,0.2); }
.bnt-badge-default { background-color: var(--bnt-surface-3); color: var(--bnt-text-muted); border-color: var(--bnt-border-strong); }
/* ── Checkbox ─────────────────── */
.bnt-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.6rem;
cursor: pointer;
user-select: none;
}
.bnt-checkbox {
appearance: none;
width: 17px;
height: 17px;
border: 1px solid var(--bnt-border-strong);
border-radius: 5px;
background-color: var(--bnt-surface-2);
outline: none;
cursor: pointer;
transition: var(--bnt-transition);
position: relative;
flex-shrink: 0;
}
.bnt-checkbox:checked {
background: var(--bnt-grad-primary);
border-color: var(--bnt-violet);
}
.bnt-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 5px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.bnt-checkbox-label {
font-size: 0.85rem;
font-weight: 500;
color: var(--bnt-text-muted);
}
/* ── Divider ──────────────────── */
.bnt-divider { border: none; border-top: 1px solid var(--bnt-border); margin: 0; }
/* ── Gradient Text ────────────── */
.bnt-text-gradient {
background: var(--bnt-grad-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── Utilities ────────────────── */
.text-violet { color: var(--bnt-violet-light) !important; }
.text-cyan { color: var(--bnt-cyan) !important; }
.text-emerald { color: var(--bnt-emerald) !important; }
.text-muted { color: var(--bnt-text-muted) !important; }
/* --- COMPONENT STYLES --- */
/* Metrics Bento Dashboard */
.bnt-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
background-color: var(--bnt-bg);
}
.bnt-stat-card {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1rem;
}
.bnt-stat-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.bnt-stat-header h4 {
font-size: 0.8rem;
color: var(--bnt-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Trend Badges */
.bnt-trend-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.55rem;
border-radius: var(--bnt-radius-pill);
font-family: var(--bnt-font-heading);
font-size: 0.7rem;
font-weight: 700;
}
.bnt-trend-badge.trend-up {
background-color: var(--bnt-emerald-muted);
color: var(--bnt-emerald);
}
.bnt-trend-badge.trend-down {
background-color: var(--bnt-rose-muted);
color: var(--bnt-rose);
}
.bnt-stat-value {
font-size: 2.25rem;
font-weight: 800;
line-height: 1.1;
color: var(--bnt-text);
letter-spacing: -0.02em;
}
.bnt-stat-unit {
font-size: 0.95rem;
color: var(--bnt-text-light);
margin-left: 0.2rem;
font-weight: 500;
}
.bnt-stat-desc {
font-size: 0.8rem;
color: var(--bnt-text-light);
}
/* Sparklines inside stat cards */
.bnt-stat-sparkline {
height: 40px;
width: 100%;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.bnt-stat-spark-svg {
width: 100%;
height: 100%;
}
/* Progress Cluster Bar */
.bnt-cluster-bar-wrap {
width: 100%;
height: 6px;
border-radius: var(--bnt-radius-pill);
background-color: var(--bnt-surface-3);
overflow: hidden;
margin-top: 1rem;
margin-bottom: 1rem;
}
.bnt-cluster-bar-fill {
height: 100%;
background: var(--bnt-grad-primary);
border-radius: var(--bnt-radius-pill);
box-shadow: 0 0 10px var(--bnt-violet);
}
@media (max-width: 576px) {
.bnt-stats-grid {
grid-template-columns: 1fr;
}
}
Tables
Bento Plan Comparison Table
HTML
<div class="bnt-table-wrapper">
<div class="bnt-tile bnt-table-panel">
<div class="bnt-table-header">
<h3>Cluster Subscriptions</h3>
<p>Compare computing tiers, memory quotas, and active server capacity pools.</p>
</div>
<div class="bnt-table-container">
<table class="bnt-data-table">
<thead>
<tr>
<th class="bnt-table-feature-col">Platform Core</th>
<th>Sandbox</th>
<th class="bnt-highlight-th">Pro Node</th>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bnt-table-feature-col">Monthly Cost</td>
<td><strong class="text-muted">$0</strong></td>
<td class="bnt-highlight-td"><strong class="text-violet">$49/mo</strong></td>
<td><strong>Custom Quote</strong></td>
</tr>
<tr>
<td class="bnt-table-feature-col">Compute Limit</td>
<td>1 Shared CPU</td>
<td class="bnt-highlight-td">4 Dedicated vCPU</td>
<td>Unlimited Clusters</td>
</tr>
<tr>
<td class="bnt-table-feature-col">Memory Cache</td>
<td>512 MB</td>
<td class="bnt-highlight-td">8 GB ECC Ram</td>
<td>Dedicated Resource Pool</td>
</tr>
<tr>
<td class="bnt-table-feature-col">Automated SSL</td>
<td>
<span class="bnt-indicator-no">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" style="width:12px;height:12px;"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</span>
</td>
<td class="bnt-highlight-td">
<span class="bnt-indicator-yes">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" style="width:12px;height:12px;"><polyline points="20 6 9 17 4 12"></polyline></svg>
</span>
</td>
<td>
<span class="bnt-indicator-yes">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" style="width:12px;height:12px;"><polyline points="20 6 9 17 4 12"></polyline></svg>
</span>
</td>
</tr>
<tr>
<td class="bnt-table-feature-col">Platform SLA</td>
<td>None</td>
<td class="bnt-highlight-td">99.9% uptime</td>
<td>99.99% customized</td>
</tr>
<tr>
<td class="bnt-table-feature-col">Actions</td>
<td>
<a href="#" class="bnt-btn bnt-btn-outline bnt-btn-sm">Start Free</a>
</td>
<td class="bnt-highlight-td">
<a href="#" class="bnt-btn bnt-btn-primary bnt-btn-sm bnt-btn-glow-pulse">Deploy Pro</a>
</td>
<td>
<a href="#" class="bnt-btn bnt-btn-outline bnt-btn-sm">Contact Rep</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Bento Plan Comparison Table */
/* NOTE: This component requires base.css to be included in your page. */
/* Bento Plan Comparison Table */
.bnt-table-wrapper {
display: flex;
justify-content: center;
padding: 3rem 1rem;
background-color: var(--bnt-bg);
}
.bnt-table-panel {
max-width: 800px;
width: 100%;
padding: 0 !important;
overflow: hidden;
box-shadow: var(--bnt-shadow), 0 0 60px rgba(124,58,237,0.02);
}
.bnt-table-header {
padding: 2.25rem 2.25rem 1.75rem 2.25rem;
}
.bnt-table-header h3 {
font-size: 1.4rem;
font-weight: 750;
letter-spacing: -0.02em;
margin-bottom: 0.4rem;
}
.bnt-table-header p {
font-size: 0.9rem;
color: var(--bnt-text-muted);
}
.bnt-table-container {
overflow-x: auto;
width: 100%;
}
.bnt-data-table {
width: 100%;
border-collapse: collapse;
font-family: var(--bnt-font-body);
font-size: 0.9rem;
text-align: center;
}
/* Headers */
.bnt-data-table th {
font-family: var(--bnt-font-heading);
font-weight: 700;
color: var(--bnt-text-muted);
padding: 1.25rem 1rem;
border-bottom: 1px solid var(--bnt-border-strong);
background-color: var(--bnt-surface-2);
}
.bnt-data-table th.bnt-table-feature-col {
text-align: left;
padding-left: 2.25rem;
color: var(--bnt-text);
}
/* Highlight Column Headers */
.bnt-data-table th.bnt-highlight-th {
color: var(--bnt-violet-light);
background-color: rgba(124, 58, 237, 0.08);
border-bottom: 1px solid var(--bnt-violet-glow);
}
/* Cells */
.bnt-data-table td {
padding: 1.25rem 1rem;
border-bottom: 1px solid var(--bnt-border);
color: var(--bnt-text);
vertical-align: middle;
}
.bnt-data-table td.bnt-table-feature-col {
text-align: left;
padding-left: 2.25rem;
font-weight: 600;
color: var(--bnt-text-muted);
}
/* Highlight column cells */
.bnt-data-table td.bnt-highlight-td {
background-color: rgba(124, 58, 237, 0.04);
}
/* Indicator marks */
.bnt-indicator-yes, .bnt-indicator-no {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
}
.bnt-indicator-yes {
background-color: var(--bnt-emerald-muted);
color: var(--bnt-emerald);
}
.bnt-indicator-no {
background-color: var(--bnt-rose-muted);
color: var(--bnt-rose);
}
/* Clean row hovers */
.bnt-data-table tbody tr:hover td {
background-color: var(--bnt-surface-2);
}
.bnt-data-table tbody tr:hover td.bnt-highlight-td {
background-color: rgba(124, 58, 237, 0.08);
}
@media (max-width: 768px) {
.bnt-data-table th, .bnt-data-table td {
padding: 1rem 0.75rem;
font-size: 0.85rem;
}
.bnt-data-table th.bnt-table-feature-col, .bnt-data-table td.bnt-table-feature-col {
padding-left: 1.25rem;
}
}
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=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
/* =========================================
Bento Grid Design System (bnt-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Space backgrounds */
--bnt-bg: #0A0A0F; /* Deep Space Black */
--bnt-surface: #111118; /* Dark Indigo Surface */
--bnt-surface-2: #1A1A27; /* Elevated Tile */
--bnt-surface-3: #22222F; /* Deep Tile */
/* Vibrant Brand Palette */
--bnt-violet: #7C3AED; /* Electric Violet */
--bnt-violet-light: #8B5CF6;
--bnt-violet-hover: #6D28D9;
--bnt-violet-muted: rgba(124, 58, 237, 0.12);
--bnt-violet-glow: rgba(124, 58, 237, 0.25);
--bnt-cyan: #06B6D4; /* Cyber Cyan */
--bnt-cyan-light: #22D3EE;
--bnt-cyan-muted: rgba(6, 182, 212, 0.12);
--bnt-emerald: #10B981; /* Neon Emerald */
--bnt-emerald-muted: rgba(16, 185, 129, 0.12);
--bnt-rose: #F43F5E; /* Alert Rose */
--bnt-rose-muted: rgba(244, 63, 94, 0.12);
--bnt-amber: #F59E0B;
--bnt-amber-muted: rgba(245, 158, 11, 0.12);
/* Gradients */
--bnt-grad-primary: linear-gradient(135deg, #7C3AED, #06B6D4);
--bnt-grad-warm: linear-gradient(135deg, #7C3AED, #F43F5E);
--bnt-grad-cool: linear-gradient(135deg, #06B6D4, #10B981);
--bnt-grad-subtle: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(6,182,212,0.08));
/* Text */
--bnt-text: #F8FAFC; /* Snow White */
--bnt-text-muted: #94A3B8; /* Slate 400 */
--bnt-text-light: #64748B; /* Slate 500 */
/* Borders */
--bnt-border: #1E1E2E;
--bnt-border-strong: #2D2D40;
--bnt-border-glow: rgba(124, 58, 237, 0.3);
/* Rounded Shapes */
--bnt-radius-sm: 6px;
--bnt-radius: 12px;
--bnt-radius-lg: 20px;
--bnt-radius-xl: 28px;
--bnt-radius-pill: 999px;
/* Fonts */
--bnt-font-heading: 'Plus Jakarta Sans', sans-serif;
--bnt-font-body: 'Inter', sans-serif;
--bnt-font-mono: 'DM Mono', monospace;
/* Shadows */
--bnt-shadow-sm: 0 2px 10px rgba(0,0,0,0.4);
--bnt-shadow: 0 8px 30px rgba(0,0,0,0.5);
--bnt-shadow-glow: 0 0 30px rgba(124, 58, 237, 0.15);
--bnt-shadow-cyan: 0 0 30px rgba(6, 182, 212, 0.1);
/* Transition */
--bnt-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--bnt-font-body);
color: var(--bnt-text);
background-color: var(--bnt-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Bento Base Tile ──────────── */
.bnt-tile {
background-color: var(--bnt-surface);
border: 1px solid var(--bnt-border);
border-radius: var(--bnt-radius-lg);
padding: 2rem;
transition: var(--bnt-transition);
position: relative;
overflow: hidden;
}
.bnt-tile:hover {
border-color: var(--bnt-border-strong);
transform: translateY(-2px);
box-shadow: var(--bnt-shadow-glow);
}
/* Gradient glow tile variant */
.bnt-tile-glow {
background: var(--bnt-grad-subtle);
border-color: var(--bnt-border-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--bnt-font-heading);
font-weight: 700;
margin: 0;
color: var(--bnt-text);
line-height: 1.2;
}
p {
font-family: var(--bnt-font-body);
color: var(--bnt-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.bnt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--bnt-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--bnt-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--bnt-transition);
white-space: nowrap;
user-select: none;
}
.bnt-btn-primary {
background: var(--bnt-grad-primary);
color: #fff;
border: none;
box-shadow: 0 4px 15px var(--bnt-violet-glow);
}
.bnt-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 8px 25px var(--bnt-violet-glow);
filter: brightness(1.1);
}
.bnt-btn-violet {
background-color: var(--bnt-violet);
color: #fff;
border-color: var(--bnt-violet);
}
.bnt-btn-violet:hover {
background-color: var(--bnt-violet-hover);
transform: translateY(-1px);
box-shadow: var(--bnt-shadow-glow);
}
.bnt-btn-outline {
background-color: transparent;
color: var(--bnt-text-muted);
border-color: var(--bnt-border-strong);
}
.bnt-btn-outline:hover {
background-color: var(--bnt-surface-2);
color: var(--bnt-text);
border-color: var(--bnt-violet);
}
.bnt-btn-ghost {
background-color: transparent;
color: var(--bnt-text-muted);
border-color: transparent;
}
.bnt-btn-ghost:hover {
background-color: var(--bnt-surface-2);
color: var(--bnt-text);
}
.bnt-btn-cyan {
background-color: var(--bnt-cyan);
color: #0A0A0F;
border-color: var(--bnt-cyan);
font-weight: 800;
}
.bnt-btn-cyan:hover {
background-color: var(--bnt-cyan-light);
transform: translateY(-1px);
box-shadow: var(--bnt-shadow-cyan);
}
.bnt-btn-sm { padding: 0.4rem 1rem; font-size: 0.8rem; border-radius: var(--bnt-radius-sm); }
.bnt-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--bnt-radius-lg); }
.bnt-btn-pill { border-radius: var(--bnt-radius-pill); }
.bnt-btn-block { width: 100%; }
.bnt-btn-icon { width: 42px; height: 42px; padding: 0; border-radius: var(--bnt-radius); }
/* ── Form Controls ────────────── */
.bnt-input {
width: 100%;
padding: 0.7rem 1.1rem;
border: 1px solid var(--bnt-border-strong);
border-radius: var(--bnt-radius);
font-family: var(--bnt-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--bnt-text);
background-color: var(--bnt-surface-2);
outline: none;
transition: var(--bnt-transition);
}
.bnt-input::placeholder { color: var(--bnt-text-light); }
.bnt-input:focus {
border-color: var(--bnt-violet);
box-shadow: 0 0 0 3px var(--bnt-violet-muted);
}
.bnt-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--bnt-font-heading);
font-weight: 600;
font-size: 0.75rem;
color: var(--bnt-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.bnt-select {
width: 100%;
padding: 0.7rem 1.1rem;
border: 1px solid var(--bnt-border-strong);
border-radius: var(--bnt-radius);
font-family: var(--bnt-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--bnt-text);
background-color: var(--bnt-surface-2);
outline: none;
transition: var(--bnt-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238B5CF6' stroke-width='2'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1.1rem center;
background-size: 1rem;
cursor: pointer;
}
.bnt-select:focus {
border-color: var(--bnt-violet);
box-shadow: 0 0 0 3px var(--bnt-violet-muted);
}
/* ── Badges ───────────────────── */
.bnt-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--bnt-radius-pill);
font-family: var(--bnt-font-heading);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.bnt-badge-violet { background-color: var(--bnt-violet-muted); color: var(--bnt-violet-light); border-color: rgba(124,58,237,0.2); }
.bnt-badge-cyan { background-color: var(--bnt-cyan-muted); color: var(--bnt-cyan); border-color: rgba(6,182,212,0.2); }
.bnt-badge-emerald { background-color: var(--bnt-emerald-muted); color: var(--bnt-emerald); border-color: rgba(16,185,129,0.2); }
.bnt-badge-rose { background-color: var(--bnt-rose-muted); color: var(--bnt-rose); border-color: rgba(244,63,94,0.2); }
.bnt-badge-amber { background-color: var(--bnt-amber-muted); color: var(--bnt-amber); border-color: rgba(245,158,11,0.2); }
.bnt-badge-default { background-color: var(--bnt-surface-3); color: var(--bnt-text-muted); border-color: var(--bnt-border-strong); }
/* ── Checkbox ─────────────────── */
.bnt-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.6rem;
cursor: pointer;
user-select: none;
}
.bnt-checkbox {
appearance: none;
width: 17px;
height: 17px;
border: 1px solid var(--bnt-border-strong);
border-radius: 5px;
background-color: var(--bnt-surface-2);
outline: none;
cursor: pointer;
transition: var(--bnt-transition);
position: relative;
flex-shrink: 0;
}
.bnt-checkbox:checked {
background: var(--bnt-grad-primary);
border-color: var(--bnt-violet);
}
.bnt-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 5px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.bnt-checkbox-label {
font-size: 0.85rem;
font-weight: 500;
color: var(--bnt-text-muted);
}
/* ── Divider ──────────────────── */
.bnt-divider { border: none; border-top: 1px solid var(--bnt-border); margin: 0; }
/* ── Gradient Text ────────────── */
.bnt-text-gradient {
background: var(--bnt-grad-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── Utilities ────────────────── */
.text-violet { color: var(--bnt-violet-light) !important; }
.text-cyan { color: var(--bnt-cyan) !important; }
.text-emerald { color: var(--bnt-emerald) !important; }
.text-muted { color: var(--bnt-text-muted) !important; }
/* --- COMPONENT STYLES --- */
/* Bento Plan Comparison Table */
.bnt-table-wrapper {
display: flex;
justify-content: center;
padding: 3rem 1rem;
background-color: var(--bnt-bg);
}
.bnt-table-panel {
max-width: 800px;
width: 100%;
padding: 0 !important;
overflow: hidden;
box-shadow: var(--bnt-shadow), 0 0 60px rgba(124,58,237,0.02);
}
.bnt-table-header {
padding: 2.25rem 2.25rem 1.75rem 2.25rem;
}
.bnt-table-header h3 {
font-size: 1.4rem;
font-weight: 750;
letter-spacing: -0.02em;
margin-bottom: 0.4rem;
}
.bnt-table-header p {
font-size: 0.9rem;
color: var(--bnt-text-muted);
}
.bnt-table-container {
overflow-x: auto;
width: 100%;
}
.bnt-data-table {
width: 100%;
border-collapse: collapse;
font-family: var(--bnt-font-body);
font-size: 0.9rem;
text-align: center;
}
/* Headers */
.bnt-data-table th {
font-family: var(--bnt-font-heading);
font-weight: 700;
color: var(--bnt-text-muted);
padding: 1.25rem 1rem;
border-bottom: 1px solid var(--bnt-border-strong);
background-color: var(--bnt-surface-2);
}
.bnt-data-table th.bnt-table-feature-col {
text-align: left;
padding-left: 2.25rem;
color: var(--bnt-text);
}
/* Highlight Column Headers */
.bnt-data-table th.bnt-highlight-th {
color: var(--bnt-violet-light);
background-color: rgba(124, 58, 237, 0.08);
border-bottom: 1px solid var(--bnt-violet-glow);
}
/* Cells */
.bnt-data-table td {
padding: 1.25rem 1rem;
border-bottom: 1px solid var(--bnt-border);
color: var(--bnt-text);
vertical-align: middle;
}
.bnt-data-table td.bnt-table-feature-col {
text-align: left;
padding-left: 2.25rem;
font-weight: 600;
color: var(--bnt-text-muted);
}
/* Highlight column cells */
.bnt-data-table td.bnt-highlight-td {
background-color: rgba(124, 58, 237, 0.04);
}
/* Indicator marks */
.bnt-indicator-yes, .bnt-indicator-no {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
}
.bnt-indicator-yes {
background-color: var(--bnt-emerald-muted);
color: var(--bnt-emerald);
}
.bnt-indicator-no {
background-color: var(--bnt-rose-muted);
color: var(--bnt-rose);
}
/* Clean row hovers */
.bnt-data-table tbody tr:hover td {
background-color: var(--bnt-surface-2);
}
.bnt-data-table tbody tr:hover td.bnt-highlight-td {
background-color: rgba(124, 58, 237, 0.08);
}
@media (max-width: 768px) {
.bnt-data-table th, .bnt-data-table td {
padding: 1rem 0.75rem;
font-size: 0.85rem;
}
.bnt-data-table th.bnt-table-feature-col, .bnt-data-table td.bnt-table-feature-col {
padding-left: 1.25rem;
}
}
Lists
Bento Activity Feed
HTML
<div class="bnt-activity-wrapper">
<div class="bnt-tile bnt-activity-card">
<!-- Card Header -->
<div class="bnt-activity-header">
<h3>Infrastructure Feed</h3>
<span class="bnt-pulse-dot"></span>
</div>
<!-- Feed List items -->
<div class="bnt-feed-list">
<!-- Feed Item 1 -->
<div class="bnt-feed-item">
<div class="bnt-feed-avatar icon-circle-violet">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="width:14px;height:14px;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
</div>
<div class="bnt-feed-content">
<div class="bnt-feed-text">
<strong>Security Firewalls</strong> updated configuration pool globally to v3.2.1
</div>
<div class="bnt-feed-meta">
<span class="bnt-feed-time">12 mins ago</span>
<span class="bnt-feed-dot"></span>
<span class="bnt-feed-tag text-violet">System API</span>
</div>
</div>
</div>
<!-- Feed Item 2 -->
<div class="bnt-feed-item">
<div class="bnt-feed-avatar image-circle">
<img src="https://i.pravatar.cc/100?img=5" alt="User profile">
</div>
<div class="bnt-feed-content">
<div class="bnt-feed-text">
<strong>Jane Smith</strong> established connection to <code>eu-west-1</code> load-balancing cluster
</div>
<div class="bnt-feed-meta">
<span class="bnt-feed-time">45 mins ago</span>
<span class="bnt-feed-dot"></span>
<span class="bnt-feed-tag text-cyan">Admin Console</span>
</div>
</div>
</div>
<!-- Feed Item 3 -->
<div class="bnt-feed-item">
<div class="bnt-feed-avatar icon-circle-emerald">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="width:14px;height:14px;"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>
</div>
<div class="bnt-feed-content">
<div class="bnt-feed-text">
<strong>Database Replication</strong> optimization succeeded. Uptime score raised.
</div>
<div class="bnt-feed-meta">
<span class="bnt-feed-time">3 hours ago</span>
<span class="bnt-feed-dot"></span>
<span class="bnt-feed-tag text-emerald">Database core</span>
</div>
</div>
</div>
</div>
<!-- Footer view more -->
<a href="#" class="bnt-btn bnt-btn-outline bnt-btn-sm bnt-btn-block" style="margin-top: 1.5rem;">
Open Activity Dashboard
</a>
</div>
</div>
CSS (Component Only)
/* Component: Bento Activity Feed */
/* NOTE: This component requires base.css to be included in your page. */
/* Bento Activity Feed */
.bnt-activity-wrapper {
display: flex;
justify-content: center;
padding: 3rem 1rem;
background-color: var(--bnt-bg);
}
.bnt-activity-card {
max-width: 520px;
width: 100%;
box-shadow: var(--bnt-shadow), 0 0 60px rgba(124,58,237,0.02);
}
.bnt-activity-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.bnt-activity-header h3 {
font-size: 1.25rem;
font-weight: 750;
letter-spacing: -0.02em;
}
/* Feed lists */
.bnt-feed-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
position: relative;
}
.bnt-feed-list::before {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
left: 20px;
width: 1px;
background-color: var(--bnt-border-strong);
z-index: 1;
}
.bnt-feed-item {
display: flex;
gap: 1.15rem;
align-items: flex-start;
position: relative;
z-index: 2;
}
.bnt-feed-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid var(--bnt-border-strong);
}
.bnt-feed-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.icon-circle-violet { background-color: var(--bnt-violet-muted); color: var(--bnt-violet-light); }
.icon-circle-cyan { background-color: var(--bnt-cyan-muted); color: var(--bnt-cyan); }
.icon-circle-emerald { background-color: var(--bnt-emerald-muted); color: var(--bnt-emerald); }
.image-circle { background-color: var(--bnt-surface-2); }
.bnt-feed-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.3rem;
padding-top: 0.15rem;
}
.bnt-feed-text {
font-size: 0.875rem;
line-height: 1.5;
color: var(--bnt-text);
}
.bnt-feed-text code {
font-family: var(--bnt-font-mono);
background-color: var(--bnt-surface-2);
padding: 0.1rem 0.35rem;
border-radius: var(--bnt-radius-sm);
color: var(--bnt-cyan);
font-size: 0.8rem;
}
.bnt-feed-meta {
display: flex;
align-items: center;
gap: 0.5rem;
}
.bnt-feed-time {
font-size: 0.75rem;
color: var(--bnt-text-light);
}
.bnt-feed-dot {
width: 3px;
height: 3px;
background-color: var(--bnt-border-strong);
border-radius: 50%;
}
.bnt-feed-tag {
font-family: var(--bnt-font-heading);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
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=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
/* =========================================
Bento Grid Design System (bnt-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Space backgrounds */
--bnt-bg: #0A0A0F; /* Deep Space Black */
--bnt-surface: #111118; /* Dark Indigo Surface */
--bnt-surface-2: #1A1A27; /* Elevated Tile */
--bnt-surface-3: #22222F; /* Deep Tile */
/* Vibrant Brand Palette */
--bnt-violet: #7C3AED; /* Electric Violet */
--bnt-violet-light: #8B5CF6;
--bnt-violet-hover: #6D28D9;
--bnt-violet-muted: rgba(124, 58, 237, 0.12);
--bnt-violet-glow: rgba(124, 58, 237, 0.25);
--bnt-cyan: #06B6D4; /* Cyber Cyan */
--bnt-cyan-light: #22D3EE;
--bnt-cyan-muted: rgba(6, 182, 212, 0.12);
--bnt-emerald: #10B981; /* Neon Emerald */
--bnt-emerald-muted: rgba(16, 185, 129, 0.12);
--bnt-rose: #F43F5E; /* Alert Rose */
--bnt-rose-muted: rgba(244, 63, 94, 0.12);
--bnt-amber: #F59E0B;
--bnt-amber-muted: rgba(245, 158, 11, 0.12);
/* Gradients */
--bnt-grad-primary: linear-gradient(135deg, #7C3AED, #06B6D4);
--bnt-grad-warm: linear-gradient(135deg, #7C3AED, #F43F5E);
--bnt-grad-cool: linear-gradient(135deg, #06B6D4, #10B981);
--bnt-grad-subtle: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(6,182,212,0.08));
/* Text */
--bnt-text: #F8FAFC; /* Snow White */
--bnt-text-muted: #94A3B8; /* Slate 400 */
--bnt-text-light: #64748B; /* Slate 500 */
/* Borders */
--bnt-border: #1E1E2E;
--bnt-border-strong: #2D2D40;
--bnt-border-glow: rgba(124, 58, 237, 0.3);
/* Rounded Shapes */
--bnt-radius-sm: 6px;
--bnt-radius: 12px;
--bnt-radius-lg: 20px;
--bnt-radius-xl: 28px;
--bnt-radius-pill: 999px;
/* Fonts */
--bnt-font-heading: 'Plus Jakarta Sans', sans-serif;
--bnt-font-body: 'Inter', sans-serif;
--bnt-font-mono: 'DM Mono', monospace;
/* Shadows */
--bnt-shadow-sm: 0 2px 10px rgba(0,0,0,0.4);
--bnt-shadow: 0 8px 30px rgba(0,0,0,0.5);
--bnt-shadow-glow: 0 0 30px rgba(124, 58, 237, 0.15);
--bnt-shadow-cyan: 0 0 30px rgba(6, 182, 212, 0.1);
/* Transition */
--bnt-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--bnt-font-body);
color: var(--bnt-text);
background-color: var(--bnt-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Bento Base Tile ──────────── */
.bnt-tile {
background-color: var(--bnt-surface);
border: 1px solid var(--bnt-border);
border-radius: var(--bnt-radius-lg);
padding: 2rem;
transition: var(--bnt-transition);
position: relative;
overflow: hidden;
}
.bnt-tile:hover {
border-color: var(--bnt-border-strong);
transform: translateY(-2px);
box-shadow: var(--bnt-shadow-glow);
}
/* Gradient glow tile variant */
.bnt-tile-glow {
background: var(--bnt-grad-subtle);
border-color: var(--bnt-border-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--bnt-font-heading);
font-weight: 700;
margin: 0;
color: var(--bnt-text);
line-height: 1.2;
}
p {
font-family: var(--bnt-font-body);
color: var(--bnt-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.bnt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--bnt-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--bnt-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--bnt-transition);
white-space: nowrap;
user-select: none;
}
.bnt-btn-primary {
background: var(--bnt-grad-primary);
color: #fff;
border: none;
box-shadow: 0 4px 15px var(--bnt-violet-glow);
}
.bnt-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 8px 25px var(--bnt-violet-glow);
filter: brightness(1.1);
}
.bnt-btn-violet {
background-color: var(--bnt-violet);
color: #fff;
border-color: var(--bnt-violet);
}
.bnt-btn-violet:hover {
background-color: var(--bnt-violet-hover);
transform: translateY(-1px);
box-shadow: var(--bnt-shadow-glow);
}
.bnt-btn-outline {
background-color: transparent;
color: var(--bnt-text-muted);
border-color: var(--bnt-border-strong);
}
.bnt-btn-outline:hover {
background-color: var(--bnt-surface-2);
color: var(--bnt-text);
border-color: var(--bnt-violet);
}
.bnt-btn-ghost {
background-color: transparent;
color: var(--bnt-text-muted);
border-color: transparent;
}
.bnt-btn-ghost:hover {
background-color: var(--bnt-surface-2);
color: var(--bnt-text);
}
.bnt-btn-cyan {
background-color: var(--bnt-cyan);
color: #0A0A0F;
border-color: var(--bnt-cyan);
font-weight: 800;
}
.bnt-btn-cyan:hover {
background-color: var(--bnt-cyan-light);
transform: translateY(-1px);
box-shadow: var(--bnt-shadow-cyan);
}
.bnt-btn-sm { padding: 0.4rem 1rem; font-size: 0.8rem; border-radius: var(--bnt-radius-sm); }
.bnt-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--bnt-radius-lg); }
.bnt-btn-pill { border-radius: var(--bnt-radius-pill); }
.bnt-btn-block { width: 100%; }
.bnt-btn-icon { width: 42px; height: 42px; padding: 0; border-radius: var(--bnt-radius); }
/* ── Form Controls ────────────── */
.bnt-input {
width: 100%;
padding: 0.7rem 1.1rem;
border: 1px solid var(--bnt-border-strong);
border-radius: var(--bnt-radius);
font-family: var(--bnt-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--bnt-text);
background-color: var(--bnt-surface-2);
outline: none;
transition: var(--bnt-transition);
}
.bnt-input::placeholder { color: var(--bnt-text-light); }
.bnt-input:focus {
border-color: var(--bnt-violet);
box-shadow: 0 0 0 3px var(--bnt-violet-muted);
}
.bnt-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--bnt-font-heading);
font-weight: 600;
font-size: 0.75rem;
color: var(--bnt-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.bnt-select {
width: 100%;
padding: 0.7rem 1.1rem;
border: 1px solid var(--bnt-border-strong);
border-radius: var(--bnt-radius);
font-family: var(--bnt-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--bnt-text);
background-color: var(--bnt-surface-2);
outline: none;
transition: var(--bnt-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238B5CF6' stroke-width='2'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1.1rem center;
background-size: 1rem;
cursor: pointer;
}
.bnt-select:focus {
border-color: var(--bnt-violet);
box-shadow: 0 0 0 3px var(--bnt-violet-muted);
}
/* ── Badges ───────────────────── */
.bnt-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--bnt-radius-pill);
font-family: var(--bnt-font-heading);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.bnt-badge-violet { background-color: var(--bnt-violet-muted); color: var(--bnt-violet-light); border-color: rgba(124,58,237,0.2); }
.bnt-badge-cyan { background-color: var(--bnt-cyan-muted); color: var(--bnt-cyan); border-color: rgba(6,182,212,0.2); }
.bnt-badge-emerald { background-color: var(--bnt-emerald-muted); color: var(--bnt-emerald); border-color: rgba(16,185,129,0.2); }
.bnt-badge-rose { background-color: var(--bnt-rose-muted); color: var(--bnt-rose); border-color: rgba(244,63,94,0.2); }
.bnt-badge-amber { background-color: var(--bnt-amber-muted); color: var(--bnt-amber); border-color: rgba(245,158,11,0.2); }
.bnt-badge-default { background-color: var(--bnt-surface-3); color: var(--bnt-text-muted); border-color: var(--bnt-border-strong); }
/* ── Checkbox ─────────────────── */
.bnt-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.6rem;
cursor: pointer;
user-select: none;
}
.bnt-checkbox {
appearance: none;
width: 17px;
height: 17px;
border: 1px solid var(--bnt-border-strong);
border-radius: 5px;
background-color: var(--bnt-surface-2);
outline: none;
cursor: pointer;
transition: var(--bnt-transition);
position: relative;
flex-shrink: 0;
}
.bnt-checkbox:checked {
background: var(--bnt-grad-primary);
border-color: var(--bnt-violet);
}
.bnt-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 5px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.bnt-checkbox-label {
font-size: 0.85rem;
font-weight: 500;
color: var(--bnt-text-muted);
}
/* ── Divider ──────────────────── */
.bnt-divider { border: none; border-top: 1px solid var(--bnt-border); margin: 0; }
/* ── Gradient Text ────────────── */
.bnt-text-gradient {
background: var(--bnt-grad-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── Utilities ────────────────── */
.text-violet { color: var(--bnt-violet-light) !important; }
.text-cyan { color: var(--bnt-cyan) !important; }
.text-emerald { color: var(--bnt-emerald) !important; }
.text-muted { color: var(--bnt-text-muted) !important; }
/* --- COMPONENT STYLES --- */
/* Bento Activity Feed */
.bnt-activity-wrapper {
display: flex;
justify-content: center;
padding: 3rem 1rem;
background-color: var(--bnt-bg);
}
.bnt-activity-card {
max-width: 520px;
width: 100%;
box-shadow: var(--bnt-shadow), 0 0 60px rgba(124,58,237,0.02);
}
.bnt-activity-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.bnt-activity-header h3 {
font-size: 1.25rem;
font-weight: 750;
letter-spacing: -0.02em;
}
/* Feed lists */
.bnt-feed-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
position: relative;
}
.bnt-feed-list::before {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
left: 20px;
width: 1px;
background-color: var(--bnt-border-strong);
z-index: 1;
}
.bnt-feed-item {
display: flex;
gap: 1.15rem;
align-items: flex-start;
position: relative;
z-index: 2;
}
.bnt-feed-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid var(--bnt-border-strong);
}
.bnt-feed-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.icon-circle-violet { background-color: var(--bnt-violet-muted); color: var(--bnt-violet-light); }
.icon-circle-cyan { background-color: var(--bnt-cyan-muted); color: var(--bnt-cyan); }
.icon-circle-emerald { background-color: var(--bnt-emerald-muted); color: var(--bnt-emerald); }
.image-circle { background-color: var(--bnt-surface-2); }
.bnt-feed-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.3rem;
padding-top: 0.15rem;
}
.bnt-feed-text {
font-size: 0.875rem;
line-height: 1.5;
color: var(--bnt-text);
}
.bnt-feed-text code {
font-family: var(--bnt-font-mono);
background-color: var(--bnt-surface-2);
padding: 0.1rem 0.35rem;
border-radius: var(--bnt-radius-sm);
color: var(--bnt-cyan);
font-size: 0.8rem;
}
.bnt-feed-meta {
display: flex;
align-items: center;
gap: 0.5rem;
}
.bnt-feed-time {
font-size: 0.75rem;
color: var(--bnt-text-light);
}
.bnt-feed-dot {
width: 3px;
height: 3px;
background-color: var(--bnt-border-strong);
border-radius: 50%;
}
.bnt-feed-tag {
font-family: var(--bnt-font-heading);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
Modals
Bento Upgrade Unlock Modal
HTML
<div class="bnt-modal-overlay">
<div class="bnt-tile bnt-tile-glow bnt-modal-container">
<!-- Close Button -->
<button class="bnt-modal-close" title="Dismiss Modal" type="button">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
style="width:14px;height:14px;">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
<!-- Graphic -->
<div class="bnt-modal-visual">
<div class="bnt-modal-rocket">
<svg viewBox="0 0 90 90" fill="currentColor" style="width:32px;height:32px;">
<path
d="M 89.983 5.63 c -0.006 -0.267 -0.016 -0.534 -0.026 -0.802 c -0.011 -0.299 -0.02 -0.597 -0.036 -0.897 c -0.031 -0.602 -0.07 -1.207 -0.121 -1.814 c -0.081 -0.973 -0.854 -1.745 -1.827 -1.827 c -0.607 -0.051 -1.21 -0.089 -1.811 -0.121 c -0.305 -0.016 -0.607 -0.025 -0.909 -0.036 c -0.262 -0.009 -0.525 -0.02 -0.786 -0.025 c -0.437 -0.01 -0.871 -0.013 -1.304 -0.013 c -0.072 0 -0.145 0 -0.217 0.001 c -8.628 0.042 -16.548 2.16 -24.544 6.526 C 58.261 6.7 58.12 6.773 57.979 6.85 c -0.05 0.028 -0.099 0.052 -0.149 0.08 c -0.011 0.006 -0.02 0.016 -0.031 0.022 c -6.556 3.654 -13.101 8.811 -19.875 15.585 c -0.77 0.77 -1.523 1.55 -2.268 2.334 l -13.164 1.001 c -0.385 0.029 -0.753 0.169 -1.06 0.402 L 0.785 41.987 c -0.657 0.5 -0.94 1.352 -0.711 2.145 c 0.228 0.793 0.92 1.364 1.742 1.439 l 19.373 1.749 l 6.134 6.134 c -2.174 0.497 -4.389 1.715 -6.286 3.611 c -1.136 1.137 -2.048 2.411 -2.716 3.803 c -0.873 1.849 -2.79 6.61 -4.82 11.651 l -0.991 2.459 c -0.3 0.744 -0.127 1.595 0.441 2.162 c 0.382 0.383 0.894 0.586 1.415 0.586 c 0.251 0 0.505 -0.048 0.748 -0.146 l 2.547 -1.027 c 5 -2.014 9.723 -3.917 11.576 -4.79 c 1.38 -0.664 2.655 -1.576 3.79 -2.711 c 1.896 -1.896 3.113 -4.111 3.61 -6.285 l 5.952 5.952 l 1.749 19.372 c 0.074 0.822 0.646 1.514 1.439 1.742 c 0.183 0.053 0.369 0.078 0.553 0.078 c 0.614 0 1.207 -0.283 1.592 -0.789 l 15.711 -20.646 c 0.233 -0.307 0.373 -0.675 0.402 -1.06 l 0.971 -12.775 c 0.857 -0.811 1.706 -1.635 2.547 -2.475 c 6.779 -6.779 11.939 -13.327 15.594 -19.887 c 0.004 -0.007 0.01 -0.013 0.014 -0.02 c 0.018 -0.032 0.033 -0.063 0.051 -0.095 c 0.167 -0.301 0.326 -0.602 0.486 -0.904 c 4.207 -7.847 6.251 -15.635 6.295 -24.099 c 0.001 -0.083 0.001 -0.165 0.001 -0.248 C 89.996 6.488 89.993 6.06 89.983 5.63 z M 64.413 37.493 c -1.577 1.577 -3.675 2.447 -5.907 2.447 c -2.231 0 -4.329 -0.869 -5.907 -2.447 c -3.257 -3.258 -3.257 -8.557 0 -11.815 v 0 c 3.259 -3.257 8.559 -3.255 11.814 0 c 1.578 1.577 2.448 3.675 2.448 5.907 S 65.992 35.915 64.413 37.493 z" />
</svg>
</div>
<!-- Glow shadow -->
<div class="bnt-visual-glow"></div>
</div>
<!-- Copy -->
<div class="bnt-modal-content">
<h3>Unlock Pro Clusters</h3>
<p>Elevate your infrastructure limits. Activate hyper-performance nodes, real-time metrics dashboards, and
redundant backup systems.</p>
</div>
<!-- Bullet Highlights -->
<ul class="bnt-modal-bullet-list">
<li>
<span class="bnt-indicator-yes">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
style="width:10px;height:10px;">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</span>
Unlimited responsive custom grids
</li>
<li>
<span class="bnt-indicator-yes">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
style="width:10px;height:10px;">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</span>
Dedicated memory cache nodes (8GB ECC)
</li>
<li>
<span class="bnt-indicator-yes">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
style="width:10px;height:10px;">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</span>
99.9% compute service uptime SLA
</li>
</ul>
<!-- Action CTAs -->
<div class="bnt-modal-actions">
<button class="bnt-btn bnt-btn-primary bnt-btn-block bnt-btn-glow-pulse" type="button">
Upgrade Computing Node
</button>
<button class="bnt-btn bnt-btn-ghost bnt-btn-block" type="button">
Keep Sandbox Plan
</button>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Bento Upgrade Unlock Modal */
/* NOTE: This component requires base.css to be included in your page. */
/* Bento Upgrade Unlock Modal */
.bnt-modal-overlay {
position: relative;
width: 100%;
min-height: 500px;
padding: 3rem 1rem;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(10, 10, 15, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: var(--bnt-radius-lg);
border: 1px solid var(--bnt-border-strong);
}
.bnt-modal-container {
max-width: 440px;
width: 100%;
position: relative;
padding: 3.5rem 2.5rem 2.5rem 2.5rem !important;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-shadow: var(--bnt-shadow), 0 0 60px rgba(124,58,237,0.08) !important;
}
.bnt-modal-close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
background: transparent;
border: none;
color: var(--bnt-text-light);
cursor: pointer;
transition: var(--bnt-transition);
padding: 0.25rem;
}
.bnt-modal-close:hover {
color: var(--bnt-text);
}
/* Rocket Visual */
.bnt-modal-visual {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--bnt-violet-light);
background-color: var(--bnt-violet-muted);
border: 1px solid rgba(124, 58, 237, 0.25);
margin-bottom: 2rem;
position: relative;
animation: bnt-rocket-float 3s ease-in-out infinite;
}
.bnt-visual-glow {
position: absolute;
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(124,58,237,0.2) 0%, rgba(255,255,255,0) 70%);
z-index: -1;
}
@keyframes bnt-rocket-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
.bnt-modal-content {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 2rem;
}
.bnt-modal-content h3 {
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.bnt-modal-content p {
font-size: 0.875rem;
line-height: 1.5;
}
/* Checklist features */
.bnt-modal-bullet-list {
list-style: none;
padding: 0;
margin: 0 0 2rem 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
width: 100%;
text-align: left;
}
.bnt-modal-bullet-list li {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.85rem;
color: var(--bnt-text-muted);
}
.bnt-modal-bullet-list .bnt-indicator-yes {
flex-shrink: 0;
width: 18px;
height: 18px;
}
/* Modal Buttons Actions */
.bnt-modal-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
}
@media (max-width: 480px) {
.bnt-modal-container {
padding: 2.5rem 1.5rem 1.5rem 1.5rem !important;
}
}
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=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
/* =========================================
Bento Grid Design System (bnt-)
========================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Space backgrounds */
--bnt-bg: #0A0A0F; /* Deep Space Black */
--bnt-surface: #111118; /* Dark Indigo Surface */
--bnt-surface-2: #1A1A27; /* Elevated Tile */
--bnt-surface-3: #22222F; /* Deep Tile */
/* Vibrant Brand Palette */
--bnt-violet: #7C3AED; /* Electric Violet */
--bnt-violet-light: #8B5CF6;
--bnt-violet-hover: #6D28D9;
--bnt-violet-muted: rgba(124, 58, 237, 0.12);
--bnt-violet-glow: rgba(124, 58, 237, 0.25);
--bnt-cyan: #06B6D4; /* Cyber Cyan */
--bnt-cyan-light: #22D3EE;
--bnt-cyan-muted: rgba(6, 182, 212, 0.12);
--bnt-emerald: #10B981; /* Neon Emerald */
--bnt-emerald-muted: rgba(16, 185, 129, 0.12);
--bnt-rose: #F43F5E; /* Alert Rose */
--bnt-rose-muted: rgba(244, 63, 94, 0.12);
--bnt-amber: #F59E0B;
--bnt-amber-muted: rgba(245, 158, 11, 0.12);
/* Gradients */
--bnt-grad-primary: linear-gradient(135deg, #7C3AED, #06B6D4);
--bnt-grad-warm: linear-gradient(135deg, #7C3AED, #F43F5E);
--bnt-grad-cool: linear-gradient(135deg, #06B6D4, #10B981);
--bnt-grad-subtle: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(6,182,212,0.08));
/* Text */
--bnt-text: #F8FAFC; /* Snow White */
--bnt-text-muted: #94A3B8; /* Slate 400 */
--bnt-text-light: #64748B; /* Slate 500 */
/* Borders */
--bnt-border: #1E1E2E;
--bnt-border-strong: #2D2D40;
--bnt-border-glow: rgba(124, 58, 237, 0.3);
/* Rounded Shapes */
--bnt-radius-sm: 6px;
--bnt-radius: 12px;
--bnt-radius-lg: 20px;
--bnt-radius-xl: 28px;
--bnt-radius-pill: 999px;
/* Fonts */
--bnt-font-heading: 'Plus Jakarta Sans', sans-serif;
--bnt-font-body: 'Inter', sans-serif;
--bnt-font-mono: 'DM Mono', monospace;
/* Shadows */
--bnt-shadow-sm: 0 2px 10px rgba(0,0,0,0.4);
--bnt-shadow: 0 8px 30px rgba(0,0,0,0.5);
--bnt-shadow-glow: 0 0 30px rgba(124, 58, 237, 0.15);
--bnt-shadow-cyan: 0 0 30px rgba(6, 182, 212, 0.1);
/* Transition */
--bnt-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
margin: 0;
font-family: var(--bnt-font-body);
color: var(--bnt-text);
background-color: var(--bnt-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Bento Base Tile ──────────── */
.bnt-tile {
background-color: var(--bnt-surface);
border: 1px solid var(--bnt-border);
border-radius: var(--bnt-radius-lg);
padding: 2rem;
transition: var(--bnt-transition);
position: relative;
overflow: hidden;
}
.bnt-tile:hover {
border-color: var(--bnt-border-strong);
transform: translateY(-2px);
box-shadow: var(--bnt-shadow-glow);
}
/* Gradient glow tile variant */
.bnt-tile-glow {
background: var(--bnt-grad-subtle);
border-color: var(--bnt-border-glow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--bnt-font-heading);
font-weight: 700;
margin: 0;
color: var(--bnt-text);
line-height: 1.2;
}
p {
font-family: var(--bnt-font-body);
color: var(--bnt-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.bnt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
font-family: var(--bnt-font-heading);
font-size: 0.875rem;
font-weight: 700;
border-radius: var(--bnt-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--bnt-transition);
white-space: nowrap;
user-select: none;
}
.bnt-btn-primary {
background: var(--bnt-grad-primary);
color: #fff;
border: none;
box-shadow: 0 4px 15px var(--bnt-violet-glow);
}
.bnt-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 8px 25px var(--bnt-violet-glow);
filter: brightness(1.1);
}
.bnt-btn-violet {
background-color: var(--bnt-violet);
color: #fff;
border-color: var(--bnt-violet);
}
.bnt-btn-violet:hover {
background-color: var(--bnt-violet-hover);
transform: translateY(-1px);
box-shadow: var(--bnt-shadow-glow);
}
.bnt-btn-outline {
background-color: transparent;
color: var(--bnt-text-muted);
border-color: var(--bnt-border-strong);
}
.bnt-btn-outline:hover {
background-color: var(--bnt-surface-2);
color: var(--bnt-text);
border-color: var(--bnt-violet);
}
.bnt-btn-ghost {
background-color: transparent;
color: var(--bnt-text-muted);
border-color: transparent;
}
.bnt-btn-ghost:hover {
background-color: var(--bnt-surface-2);
color: var(--bnt-text);
}
.bnt-btn-cyan {
background-color: var(--bnt-cyan);
color: #0A0A0F;
border-color: var(--bnt-cyan);
font-weight: 800;
}
.bnt-btn-cyan:hover {
background-color: var(--bnt-cyan-light);
transform: translateY(-1px);
box-shadow: var(--bnt-shadow-cyan);
}
.bnt-btn-sm { padding: 0.4rem 1rem; font-size: 0.8rem; border-radius: var(--bnt-radius-sm); }
.bnt-btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--bnt-radius-lg); }
.bnt-btn-pill { border-radius: var(--bnt-radius-pill); }
.bnt-btn-block { width: 100%; }
.bnt-btn-icon { width: 42px; height: 42px; padding: 0; border-radius: var(--bnt-radius); }
/* ── Form Controls ────────────── */
.bnt-input {
width: 100%;
padding: 0.7rem 1.1rem;
border: 1px solid var(--bnt-border-strong);
border-radius: var(--bnt-radius);
font-family: var(--bnt-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--bnt-text);
background-color: var(--bnt-surface-2);
outline: none;
transition: var(--bnt-transition);
}
.bnt-input::placeholder { color: var(--bnt-text-light); }
.bnt-input:focus {
border-color: var(--bnt-violet);
box-shadow: 0 0 0 3px var(--bnt-violet-muted);
}
.bnt-label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--bnt-font-heading);
font-weight: 600;
font-size: 0.75rem;
color: var(--bnt-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.bnt-select {
width: 100%;
padding: 0.7rem 1.1rem;
border: 1px solid var(--bnt-border-strong);
border-radius: var(--bnt-radius);
font-family: var(--bnt-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--bnt-text);
background-color: var(--bnt-surface-2);
outline: none;
transition: var(--bnt-transition);
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238B5CF6' stroke-width='2'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 1.1rem center;
background-size: 1rem;
cursor: pointer;
}
.bnt-select:focus {
border-color: var(--bnt-violet);
box-shadow: 0 0 0 3px var(--bnt-violet-muted);
}
/* ── Badges ───────────────────── */
.bnt-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: var(--bnt-radius-pill);
font-family: var(--bnt-font-heading);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border: 1px solid transparent;
}
.bnt-badge-violet { background-color: var(--bnt-violet-muted); color: var(--bnt-violet-light); border-color: rgba(124,58,237,0.2); }
.bnt-badge-cyan { background-color: var(--bnt-cyan-muted); color: var(--bnt-cyan); border-color: rgba(6,182,212,0.2); }
.bnt-badge-emerald { background-color: var(--bnt-emerald-muted); color: var(--bnt-emerald); border-color: rgba(16,185,129,0.2); }
.bnt-badge-rose { background-color: var(--bnt-rose-muted); color: var(--bnt-rose); border-color: rgba(244,63,94,0.2); }
.bnt-badge-amber { background-color: var(--bnt-amber-muted); color: var(--bnt-amber); border-color: rgba(245,158,11,0.2); }
.bnt-badge-default { background-color: var(--bnt-surface-3); color: var(--bnt-text-muted); border-color: var(--bnt-border-strong); }
/* ── Checkbox ─────────────────── */
.bnt-checkbox-wrapper {
display: inline-flex;
align-items: center;
gap: 0.6rem;
cursor: pointer;
user-select: none;
}
.bnt-checkbox {
appearance: none;
width: 17px;
height: 17px;
border: 1px solid var(--bnt-border-strong);
border-radius: 5px;
background-color: var(--bnt-surface-2);
outline: none;
cursor: pointer;
transition: var(--bnt-transition);
position: relative;
flex-shrink: 0;
}
.bnt-checkbox:checked {
background: var(--bnt-grad-primary);
border-color: var(--bnt-violet);
}
.bnt-checkbox:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 5px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.bnt-checkbox-label {
font-size: 0.85rem;
font-weight: 500;
color: var(--bnt-text-muted);
}
/* ── Divider ──────────────────── */
.bnt-divider { border: none; border-top: 1px solid var(--bnt-border); margin: 0; }
/* ── Gradient Text ────────────── */
.bnt-text-gradient {
background: var(--bnt-grad-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── Utilities ────────────────── */
.text-violet { color: var(--bnt-violet-light) !important; }
.text-cyan { color: var(--bnt-cyan) !important; }
.text-emerald { color: var(--bnt-emerald) !important; }
.text-muted { color: var(--bnt-text-muted) !important; }
/* --- COMPONENT STYLES --- */
/* Bento Upgrade Unlock Modal */
.bnt-modal-overlay {
position: relative;
width: 100%;
min-height: 500px;
padding: 3rem 1rem;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(10, 10, 15, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: var(--bnt-radius-lg);
border: 1px solid var(--bnt-border-strong);
}
.bnt-modal-container {
max-width: 440px;
width: 100%;
position: relative;
padding: 3.5rem 2.5rem 2.5rem 2.5rem !important;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-shadow: var(--bnt-shadow), 0 0 60px rgba(124,58,237,0.08) !important;
}
.bnt-modal-close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
background: transparent;
border: none;
color: var(--bnt-text-light);
cursor: pointer;
transition: var(--bnt-transition);
padding: 0.25rem;
}
.bnt-modal-close:hover {
color: var(--bnt-text);
}
/* Rocket Visual */
.bnt-modal-visual {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--bnt-violet-light);
background-color: var(--bnt-violet-muted);
border: 1px solid rgba(124, 58, 237, 0.25);
margin-bottom: 2rem;
position: relative;
animation: bnt-rocket-float 3s ease-in-out infinite;
}
.bnt-visual-glow {
position: absolute;
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(124,58,237,0.2) 0%, rgba(255,255,255,0) 70%);
z-index: -1;
}
@keyframes bnt-rocket-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
.bnt-modal-content {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 2rem;
}
.bnt-modal-content h3 {
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.bnt-modal-content p {
font-size: 0.875rem;
line-height: 1.5;
}
/* Checklist features */
.bnt-modal-bullet-list {
list-style: none;
padding: 0;
margin: 0 0 2rem 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
width: 100%;
text-align: left;
}
.bnt-modal-bullet-list li {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.85rem;
color: var(--bnt-text-muted);
}
.bnt-modal-bullet-list .bnt-indicator-yes {
flex-shrink: 0;
width: 18px;
height: 18px;
}
/* Modal Buttons Actions */
.bnt-modal-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
}
@media (max-width: 480px) {
.bnt-modal-container {
padding: 2.5rem 1.5rem 1.5rem 1.5rem !important;
}
}