/* =========================================================================
NOME BUCKETS — Brand Design System
Shared front-end framework for all NOME Buckets pages.
Spelling is ALWAYS N-O-M-E (never "gnome" / never "HOME").
The wordmark is REAL HTML TEXT (use .nb-wordmark), never an image.
Include once per page, in :
Core utility classes a page should reach for:
.nb-wordmark gold "NOME" + emerald "BUCKETS" gradient text
.nb-section vertical section rhythm / max-width wrap
.nb-card glassy premium card
.btn-play / .btn-rank the two CTAs
.nb-rank--vip|mvp|legend|titan tier accent colors
========================================================================= */
:root {
/* --- Base / surfaces --- */
--nb-bg: #13243B; /* deep slate-blue base */
--nb-bg-deep: #0d1a2a; /* darker pit */
--nb-bg-darker: #0a1422;
--nb-surface: rgba(255, 255, 255, 0.045);
--nb-surface-2: rgba(255, 255, 255, 0.07);
--nb-line: rgba(255, 255, 255, 0.13);
--nb-line-strong: rgba(255, 255, 255, 0.22);
/* --- Brand accents --- */
--nb-emerald: #2ECC71; /* primary accent */
--nb-emerald-2: #3BE07A;
--nb-emerald-dim: #1d9e54;
--nb-gold: #F4C430; /* premium accent */
--nb-gold-2: #FFD23F;
--nb-gold-dim: #c79a16;
/* --- Text --- */
--nb-text: #F5F7FA;
--nb-text-soft: #c3cede;
--nb-text-dim: #8a99ad;
/* --- Rank tiers --- */
--nb-vip: #3BE07A;
--nb-mvp: #33E0E0;
--nb-legend: #A24BFF;
--nb-titan: #FFD23F;
/* --- Glow / shadow --- */
--nb-glow-emerald: 0 0 0 1px rgba(46, 204, 113, .35), 0 18px 60px rgba(46, 204, 113, .18);
--nb-glow-gold: 0 0 0 1px rgba(244, 196, 48, .38), 0 18px 60px rgba(244, 196, 48, .20);
/* --- Type --- */
--nb-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--nb-font-display: 'Newsreader', 'Inter', Georgia, serif;
--nb-font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
/* --- Layout --- */
--nb-wrap: 1180px;
--nb-radius: 16px;
--nb-radius-sm: 10px;
}
/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
max-width: 100vw;
overflow-x: hidden;
}
body {
background:
radial-gradient(1200px 700px at 80% -10%, rgba(46, 204, 113, .12), transparent 60%),
radial-gradient(900px 600px at 0% 10%, rgba(244, 196, 48, .08), transparent 55%),
linear-gradient(180deg, var(--nb-bg) 0%, var(--nb-bg-deep) 60%, var(--nb-bg-darker) 100%);
background-attachment: fixed;
color: var(--nb-text);
font-family: var(--nb-font);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height: 100vh;
}
a { color: var(--nb-emerald-2); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg, video { max-width: 100%; display: block; }
/* ---------------------------------------------------------------- layout */
.nb-section {
width: min(var(--nb-wrap), calc(100% - 32px));
margin: 0 auto;
padding: 72px 0;
}
.nb-section--tight { padding: 40px 0; }
.nb-eyebrow {
display: inline-block;
font-family: var(--nb-font-mono);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--nb-emerald-2);
margin-bottom: 14px;
}
h1, h2, h3 { color: var(--nb-text); line-height: 1; margin: 0 0 .4em; }
.nb-display {
font-family: var(--nb-font-display);
font-weight: 400;
font-size: clamp(48px, 8vw, 104px);
line-height: .9;
letter-spacing: -.01em;
}
.nb-h2 {
font-family: var(--nb-font-display);
font-weight: 400;
font-size: clamp(30px, 4.4vw, 50px);
line-height: 1;
}
.nb-lede {
color: var(--nb-text-soft);
font-size: clamp(17px, 1.7vw, 21px);
line-height: 1.55;
max-width: 720px;
}
/* ------------------------------------------------------------- wordmark */
/* REAL TEXT wordmark — never an image. Usage:
NOME BUCKETS
The two child spans are optional; if omitted, the whole thing reads gold. */
.nb-wordmark {
display: inline-flex;
align-items: baseline;
gap: .28em;
font-family: var(--nb-font);
font-weight: 900;
letter-spacing: .01em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
}
.nb-wm-nome,
.nb-wm-buckets {
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .35));
}
.nb-wm-nome { background-image: linear-gradient(180deg, #FFE587 0%, var(--nb-gold) 55%, var(--nb-gold-dim) 100%); }
.nb-wm-buckets { background-image: linear-gradient(180deg, var(--nb-emerald-2) 0%, var(--nb-emerald) 55%, var(--nb-emerald-dim) 100%); }
/* big blocky hero treatment */
.nb-wordmark--hero {
font-size: clamp(46px, 9vw, 118px);
font-weight: 900;
letter-spacing: -.005em;
gap: .22em;
}
.nb-wordmark--hero .nb-wm-nome,
.nb-wordmark--hero .nb-wm-buckets {
text-shadow: none;
filter: drop-shadow(0 4px 24px rgba(0, 0, 0, .45));
}
/* ---------------------------------------------------------------- cards */
.nb-card {
position: relative;
border: 1px solid var(--nb-line);
background: var(--nb-surface);
backdrop-filter: blur(10px) saturate(1.1);
-webkit-backdrop-filter: blur(10px) saturate(1.1);
border-radius: var(--nb-radius);
padding: 22px;
box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.nb-card:hover {
transform: translateY(-3px);
border-color: var(--nb-line-strong);
box-shadow: 0 20px 60px rgba(0, 0, 0, .38);
}
.nb-card h3 { font-size: 18px; margin-bottom: 8px; }
.nb-card p { color: var(--nb-text-soft); font-size: 14px; line-height: 1.5; margin: 0; }
.nb-card-label {
font-family: var(--nb-font-mono);
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--nb-gold);
}
.nb-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
}
.nb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* ------------------------------------------------------------- mono code */
.nb-code {
font-family: var(--nb-font-mono);
background: rgba(0, 0, 0, .32);
border: 1px solid var(--nb-line);
border-radius: var(--nb-radius-sm);
color: var(--nb-text);
padding: 12px 14px;
font-size: clamp(14px, 1.7vw, 20px);
overflow-wrap: anywhere;
display: block;
}
/* --------------------------------------------------------------- pills */
.nb-pill {
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid var(--nb-line-strong);
background: var(--nb-surface-2);
border-radius: 999px;
padding: 8px 13px;
font-family: var(--nb-font-mono);
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--nb-text-soft);
}
.nb-pill--live {
border-color: rgba(46, 204, 113, .45);
color: var(--nb-emerald-2);
}
.nb-pill--live::before {
content: "";
width: 7px; height: 7px;
border-radius: 50%;
background: var(--nb-emerald-2);
box-shadow: 0 0 10px var(--nb-emerald-2);
animation: nbPulse 1.8s ease-in-out infinite;
}
@keyframes nbPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* ------------------------------------------------------------- buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
font-family: var(--nb-font);
font-weight: 700;
font-size: 15px;
letter-spacing: .01em;
padding: 14px 26px;
border-radius: 999px;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: transform .14s ease, box-shadow .18s ease, filter .18s ease;
white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--nb-text); outline-offset: 3px; }
/* Play Now — emerald */
.btn-play {
color: #06251a;
background: linear-gradient(180deg, var(--nb-emerald-2) 0%, var(--nb-emerald) 100%);
box-shadow: var(--nb-glow-emerald);
}
.btn-play:hover { filter: brightness(1.06); box-shadow: 0 0 0 1px rgba(46,204,113,.5), 0 22px 70px rgba(46,204,113,.32); }
/* Get a Rank — gold */
.btn-rank {
color: #2a1c00;
background: linear-gradient(180deg, var(--nb-gold-2) 0%, var(--nb-gold) 100%);
box-shadow: var(--nb-glow-gold);
}
.btn-rank:hover { filter: brightness(1.06); box-shadow: 0 0 0 1px rgba(244,196,48,.5), 0 22px 70px rgba(244,196,48,.34); }
/* Ghost / secondary */
.btn-ghost {
color: var(--nb-text);
background: var(--nb-surface-2);
border-color: var(--nb-line-strong);
}
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.nb-cta-row {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 26px;
}
/* --------------------------------------------------------- rank tiers */
.nb-rank {
position: relative;
border-radius: var(--nb-radius);
padding: 22px;
border: 1px solid var(--nb-line);
background: var(--nb-surface);
overflow: hidden;
}
.nb-rank::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--nb-tier, var(--nb-emerald));
}
.nb-rank .nb-rank-name {
font-family: var(--nb-font-display);
font-size: 26px;
color: var(--nb-tier, var(--nb-text));
margin-bottom: 4px;
}
.nb-rank--vip { --nb-tier: var(--nb-vip); box-shadow: 0 0 0 1px rgba(59,224,122,.18); }
.nb-rank--mvp { --nb-tier: var(--nb-mvp); box-shadow: 0 0 0 1px rgba(51,224,224,.18); }
.nb-rank--legend { --nb-tier: var(--nb-legend); box-shadow: 0 0 0 1px rgba(162,75,255,.20); }
.nb-rank--titan { --nb-tier: var(--nb-titan); box-shadow: 0 0 0 1px rgba(255,210,63,.20); }
.nb-tier-badge {
display: inline-block;
font-family: var(--nb-font-mono);
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
padding: 4px 9px;
border-radius: 999px;
color: var(--nb-tier, var(--nb-emerald));
border: 1px solid color-mix(in srgb, var(--nb-tier, var(--nb-emerald)) 50%, transparent);
background: color-mix(in srgb, var(--nb-tier, var(--nb-emerald)) 12%, transparent);
}
/* --------------------------------------------------------------- misc */
.nb-divider {
border: 0;
border-top: 1px solid var(--nb-line);
margin: 0;
}
.nb-muted { color: var(--nb-text-dim); }
.nb-center { text-align: center; }
.nb-center .nb-lede,
.nb-center .nb-cta-row { margin-left: auto; margin-right: auto; }
.nb-center .nb-cta-row { justify-content: center; }
/* ---------------------------------------------------------- responsive */
@media (max-width: 940px) {
.nb-grid--3, .nb-grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.nb-section { padding: 48px 0; width: calc(100% - 24px); }
.nb-grid--3, .nb-grid--4 { grid-template-columns: 1fr; }
.nb-cta-row .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}