/* ── Neobrutalism UI kit tokens (uiCookies) — identical in every set ─────────────
Thick ink borders, hard offset shadows and flat saturated fills on cream paper.
Change a token and the whole kit follows; the border and shadow recipes below are built from them. */
:root{
--nb-paper:#fff6e0; /* page background, cream */
--nb-surface:#ffffff; /* card, field and button faces */
--nb-ink:#111111; /* text, 17.5:1 on paper */
--nb-muted:#454036; /* secondary text, 9.6:1 on paper */
--nb-line:#111111; /* border colour */
--nb-bw:3px; /* border width */
--nb-shadow-x:4px; /* hard shadow offset; pressed controls move this far into it */
--nb-shadow-y:4px;
--nb-shadow-color:#111111;
--nb-radius:12px; /* cards and panels */
--nb-radius-sm:8px; /* buttons and fields */
--nb-focus:#1d4ed8; /* dashed focus outline, 6.2:1 on paper, never the shadow */
--nb-on-fill:#111111; /* text on every palette fill below, 6.8:1 or more */
--nb-on-fill-muted:#2b2822;/* secondary text on fills, 5.2:1 or more */
--nb-lemon:#ffe14d;--nb-pink:#ff90d0;--nb-cyan:#62e2e8;--nb-lime:#b6f36a;
--nb-orange:#ffa94d;--nb-violet:#b9a3ff;--nb-red:#ff6b6b;
--nb-blue:#2448e0;--nb-on-blue:#ffffff; /* the only fill that takes white text, 6.8:1 */
--nb-danger:#b42318; /* destructive text, 6.1:1 on paper */
--nb-font:"Space Grotesk","Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
--nb-font-display:"Archivo Black","Arial Black","Helvetica Neue",Arial,sans-serif;
}
/* Dark brutalism: data-nb="dark" on any wrapper, or a checked .nb-theme-input inside a [data-nb] element.
:is() is a forgiving list, so browsers without :has() still apply data-nb="dark". Fills keep dark text. */
[data-nb]:is([data-nb="dark"],:has(.nb-theme-input:checked)){
--nb-paper:#17150f;--nb-surface:#25221b;--nb-ink:#fbf3dc;--nb-muted:#d6ccb2;--nb-line:#fbf3dc;
--nb-shadow-color:#fbf3dc;--nb-focus:#8db4ff;--nb-danger:#ff9b8f;color-scheme:dark}
/* More contrast requested: secondary text turns full ink */
@media (prefers-contrast:more){:root,[data-nb]:is([data-nb],:has(.nb-theme-input:checked)){--nb-muted:var(--nb-ink);--nb-on-fill-muted:var(--nb-on-fill)}}
:root,[data-nb]{
--nb-border:var(--nb-bw) solid var(--nb-line);
--nb-shadow:var(--nb-shadow-x) var(--nb-shadow-y) 0 0 var(--nb-shadow-color);
--nb-shadow-sm:calc(var(--nb-shadow-x)*.5) calc(var(--nb-shadow-y)*.5) 0 0 var(--nb-shadow-color);
--nb-shadow-lg:calc(var(--nb-shadow-x)*1.75) calc(var(--nb-shadow-y)*1.75) 0 0 var(--nb-shadow-color);
--nb-shadow-hover:calc(var(--nb-shadow-x) + 2px) calc(var(--nb-shadow-y) + 2px) 0 0 var(--nb-shadow-color);
--nb-press:var(--nb-shadow-x) var(--nb-shadow-y); /* translate for a pressed control */
--nb-press-sm:calc(var(--nb-shadow-x)*.5) calc(var(--nb-shadow-y)*.5); /* …for one with the small shadow */
}
[data-nb]{background:var(--nb-paper);color:var(--nb-ink);font-family:var(--nb-font)}
/* Components */
:where([class*="nb-"]),:where([class*="nb-"])::before,:where([class*="nb-"])::after{box-sizing:border-box}
.nb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nb-ico{width:20px;height:20px;flex:none}
.nb-display{font-family:var(--nb-font-display);font-weight:900;letter-spacing:-.01em;line-height:1.05}
.nb-link{color:inherit;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.nb-link:hover{text-decoration-thickness:4px}
.nb-link:focus-visible{outline:3px dashed var(--nb-focus);outline-offset:3px;border-radius:2px}
/* Buttons: a face, a thick border and a hard shadow. Hover lifts it, pressing moves it into its shadow */
.nb-btn{--nb-fill:var(--nb-surface);--nb-text:var(--nb-ink);
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:.6rem 1.2rem;
border:var(--nb-border);border-radius:var(--nb-radius-sm);background:var(--nb-fill);color:var(--nb-text);
font:700 1rem/1.2 var(--nb-font);text-decoration:none;cursor:pointer;box-shadow:var(--nb-shadow);
transition:translate .12s,box-shadow .12s}
.nb-btn:hover{translate:-2px -2px;box-shadow:var(--nb-shadow-hover)}
.nb-btn:active{translate:var(--nb-press);box-shadow:none}
.nb-btn:focus-visible{outline:3px dashed var(--nb-focus);outline-offset:5px}
.nb-btn--lemon{--nb-fill:var(--nb-lemon);--nb-text:var(--nb-on-fill)}
.nb-btn--pink{--nb-fill:var(--nb-pink);--nb-text:var(--nb-on-fill)}
.nb-btn--cyan{--nb-fill:var(--nb-cyan);--nb-text:var(--nb-on-fill)}
.nb-btn--lime{--nb-fill:var(--nb-lime);--nb-text:var(--nb-on-fill)}
.nb-btn--red{--nb-fill:var(--nb-red);--nb-text:var(--nb-on-fill)}
.nb-btn--blue{--nb-fill:var(--nb-blue);--nb-text:var(--nb-on-blue)}
.nb-btn--ink{--nb-fill:var(--nb-ink);--nb-text:var(--nb-paper)}
.nb-btn--sm{min-height:38px;padding:.4rem .85rem;font-size:.875rem}
.nb-btn--lg{min-height:56px;padding:.8rem 1.6rem;font-size:1.15rem}
.nb-btn--block{width:100%}
.nb-btn--icon{width:48px;height:48px;min-height:0;padding:0}
.nb-btn--icon-sm{width:38px;height:38px;box-shadow:var(--nb-shadow-sm)}
.nb-btn--icon-sm:hover{box-shadow:var(--nb-shadow)}
.nb-btn--icon-sm:active{translate:var(--nb-press-sm)}
.nb-btn--round{border-radius:50%}
.nb-btn:disabled{--nb-fill:var(--nb-paper);--nb-text:var(--nb-muted);border-style:dashed;box-shadow:none;translate:none;cursor:not-allowed}
/* Card: a white panel, the thick border and the large hard shadow. Fill variants keep dark text */
.nb-card{position:relative;padding:1.4rem;border:var(--nb-border);border-radius:var(--nb-radius);background:var(--nb-surface);color:var(--nb-ink);box-shadow:var(--nb-shadow-lg);font-family:var(--nb-font)}
.nb-card h2,.nb-card h3,.nb-card p{margin:0}
.nb-card--lemon,.nb-card--pink,.nb-card--cyan,.nb-card--lime,.nb-card--orange,.nb-card--violet{--nb-muted:var(--nb-on-fill-muted);color:var(--nb-on-fill)}
.nb-card--lemon{background:var(--nb-lemon)}.nb-card--pink{background:var(--nb-pink)}.nb-card--cyan{background:var(--nb-cyan)}
.nb-card--lime{background:var(--nb-lime)}.nb-card--orange{background:var(--nb-orange)}.nb-card--violet{background:var(--nb-violet)}
/* Stickers: tilted labels that sit on or over a card */
.nb-sticker{display:inline-flex;align-items:center;gap:.35rem;width:max-content;padding:.3rem .7rem;border:var(--nb-border);border-radius:999px;
background:var(--nb-lemon);color:var(--nb-on-fill);font:800 .75rem/1.1 var(--nb-font);letter-spacing:.06em;text-transform:uppercase;box-shadow:var(--nb-shadow-sm);rotate:-4deg}
.nb-sticker .nb-ico{width:14px;height:14px}
.nb-sticker--pink{background:var(--nb-pink)}.nb-sticker--cyan{background:var(--nb-cyan)}.nb-sticker--lime{background:var(--nb-lime)}
.nb-sticker--orange{background:var(--nb-orange)}.nb-sticker--violet{background:var(--nb-violet)}
.nb-sticker--right{rotate:5deg}
.nb-sticker--corner{position:absolute;top:-16px;right:14px;z-index:2}
.nb-sticker--square{border-radius:4px}
/* Starburst sticker: two clipped layers, ink behind and colour on top */
.nb-burst{position:relative;display:grid;place-items:center;width:104px;aspect-ratio:1;padding:18px;color:var(--nb-on-fill);text-align:center;
font:900 .78rem/1.05 var(--nb-font);letter-spacing:.02em;text-transform:uppercase;rotate:12deg}
.nb-burst::before,.nb-burst::after{content:"";position:absolute;clip-path:polygon(50% 0%,59.1% 16.1%,75% 6.7%,74.8% 25.2%,93.3% 25%,83.9% 40.9%,100% 50%,83.9% 59.1%,93.3% 75%,74.8% 74.8%,75% 93.3%,59.1% 83.9%,50% 100%,40.9% 83.9%,25% 93.3%,25.2% 74.8%,6.7% 75%,16.1% 59.1%,0% 50%,16.1% 40.9%,6.7% 25%,25.2% 25.2%,25% 6.7%,40.9% 16.1%)}
.nb-burst::before{inset:0;background:var(--nb-line)}
.nb-burst::after{inset:5px;background:var(--nb-burst,var(--nb-lemon))}
.nb-burst--pink{--nb-burst:var(--nb-pink)}.nb-burst--cyan{--nb-burst:var(--nb-cyan)}.nb-burst--lime{--nb-burst:var(--nb-lime)}
.nb-burst>span{position:relative;z-index:1}
/* Layout helpers */
.nb-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.nb-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}
.nb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:28px;align-items:start}
.nb-stack{display:grid;gap:1.25rem}
/* Content card: cover art, a sticker, a title and a named link */
.nb-cover{position:relative;display:block;height:160px;margin:-1.4rem -1.4rem 1.2rem;border-bottom:var(--nb-border);border-radius:calc(var(--nb-radius) - var(--nb-bw)) calc(var(--nb-radius) - var(--nb-bw)) 0 0;overflow:hidden;background:var(--nb-cyan)}
.nb-cover svg{display:block;width:100%;height:100%}
.nb-meta{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin:.9rem 0 1.1rem!important;font-size:.85rem;font-weight:600;color:var(--nb-muted)}
.nb-card__title{font-size:1.35rem;line-height:1.2}
.nb-card__text{margin-top:.55rem!important;color:var(--nb-muted)}
/* Stat cards: a label, a big figure, and the change written in words beside its arrow */
.nb-stat{display:grid;gap:.35rem}
.nb-stat__top{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.nb-stat__label{font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.nb-stat__icon{display:grid;place-items:center;width:40px;height:40px;border:var(--nb-bw) solid currentColor;border-radius:50%}
.nb-stat__value{font-size:2.3rem}
.nb-stat__delta{display:flex;align-items:center;gap:.35rem;font-size:.88rem;font-weight:700;color:var(--nb-muted)}
.nb-stat__delta .nb-ico{width:16px;height:16px}
/* Profile card */
.nb-profile{text-align:center}
.nb-avatar{display:grid;place-items:center;width:88px;height:88px;margin:0 auto .9rem;border:var(--nb-border);border-radius:50%;background:var(--nb-pink);color:var(--nb-on-fill);
font:900 1.8rem/1 var(--nb-font-display);box-shadow:var(--nb-shadow)}
.nb-profile__handle{margin-top:.15rem!important;font-weight:600;color:var(--nb-muted)}
.nb-profile__bio{margin:.8rem 0 1rem!important}
.nb-dl{display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 1.2rem;border:var(--nb-border);border-radius:var(--nb-radius-sm);overflow:hidden}
.nb-dl div{padding:.6rem .3rem;background:var(--nb-paper)}
.nb-dl div+div{border-left:var(--nb-border)}
.nb-dl dt{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--nb-muted)}
.nb-dl dd{margin:0;font:900 1.2rem/1.2 var(--nb-font-display)}
.nb-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
/* Pricing cards: the featured plan is lemon with a sticker; each line says Included or Not included */
.nb-price__name{font-size:.85rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.nb-price__amount{margin:.4rem 0 .2rem!important;font-size:2.8rem}
.nb-price__amount small{font:700 1rem/1 var(--nb-font);letter-spacing:0}
.nb-price__note{color:var(--nb-muted)}
.nb-feats{display:grid;gap:.6rem;margin:1.2rem 0 1.4rem;padding:1rem 0 0;border-top:var(--nb-border);list-style:none}
.nb-feats li{display:flex;align-items:flex-start;gap:.6rem;font-weight:600}
.nb-feats .nb-ico{width:22px;height:22px;padding:2px;border:2px solid var(--nb-line);border-radius:50%;background:var(--nb-lime);color:var(--nb-on-fill)}
.nb-feats .is-off{color:var(--nb-muted);text-decoration:line-through}
.nb-feats .is-off .nb-ico{background:var(--nb-paper);color:var(--nb-ink)}
@media (prefers-reduced-motion:reduce){[class*="nb-"],[class*="nb-"]::before,[class*="nb-"]::after{transition:none!important;animation:none!important}}
/* ── Neobrutalism UI kit tokens (uiCookies) — identical in every set ─────────────
Thick ink borders, hard offset shadows and flat saturated fills on cream paper.
Change a token and the whole kit follows; the border and shadow recipes below are built from them. */
:root{
--nb-paper:#fff6e0; /* page background, cream */
--nb-surface:#ffffff; /* card, field and button faces */
--nb-ink:#111111; /* text, 17.5:1 on paper */
--nb-muted:#454036; /* secondary text, 9.6:1 on paper */
--nb-line:#111111; /* border colour */
--nb-bw:3px; /* border width */
--nb-shadow-x:4px; /* hard shadow offset; pressed controls move this far into it */
--nb-shadow-y:4px;
--nb-shadow-color:#111111;
--nb-radius:12px; /* cards and panels */
--nb-radius-sm:8px; /* buttons and fields */
--nb-focus:#1d4ed8; /* dashed focus outline, 6.2:1 on paper, never the shadow */
--nb-on-fill:#111111; /* text on every palette fill below, 6.8:1 or more */
--nb-on-fill-muted:#2b2822;/* secondary text on fills, 5.2:1 or more */
--nb-lemon:#ffe14d;--nb-pink:#ff90d0;--nb-cyan:#62e2e8;--nb-lime:#b6f36a;
--nb-orange:#ffa94d;--nb-violet:#b9a3ff;--nb-red:#ff6b6b;
--nb-blue:#2448e0;--nb-on-blue:#ffffff; /* the only fill that takes white text, 6.8:1 */
--nb-danger:#b42318; /* destructive text, 6.1:1 on paper */
--nb-font:"Space Grotesk","Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
--nb-font-display:"Archivo Black","Arial Black","Helvetica Neue",Arial,sans-serif;
}
/* Dark brutalism: data-nb="dark" on any wrapper, or a checked .nb-theme-input inside a [data-nb] element.
:is() is a forgiving list, so browsers without :has() still apply data-nb="dark". Fills keep dark text. */
[data-nb]:is([data-nb="dark"],:has(.nb-theme-input:checked)){
--nb-paper:#17150f;--nb-surface:#25221b;--nb-ink:#fbf3dc;--nb-muted:#d6ccb2;--nb-line:#fbf3dc;
--nb-shadow-color:#fbf3dc;--nb-focus:#8db4ff;--nb-danger:#ff9b8f;color-scheme:dark}
/* More contrast requested: secondary text turns full ink */
@media (prefers-contrast:more){:root,[data-nb]:is([data-nb],:has(.nb-theme-input:checked)){--nb-muted:var(--nb-ink);--nb-on-fill-muted:var(--nb-on-fill)}}
:root,[data-nb]{
--nb-border:var(--nb-bw) solid var(--nb-line);
--nb-shadow:var(--nb-shadow-x) var(--nb-shadow-y) 0 0 var(--nb-shadow-color);
--nb-shadow-sm:calc(var(--nb-shadow-x)*.5) calc(var(--nb-shadow-y)*.5) 0 0 var(--nb-shadow-color);
--nb-shadow-lg:calc(var(--nb-shadow-x)*1.75) calc(var(--nb-shadow-y)*1.75) 0 0 var(--nb-shadow-color);
--nb-shadow-hover:calc(var(--nb-shadow-x) + 2px) calc(var(--nb-shadow-y) + 2px) 0 0 var(--nb-shadow-color);
--nb-press:var(--nb-shadow-x) var(--nb-shadow-y); /* translate for a pressed control */
--nb-press-sm:calc(var(--nb-shadow-x)*.5) calc(var(--nb-shadow-y)*.5); /* …for one with the small shadow */
}
[data-nb]{background:var(--nb-paper);color:var(--nb-ink);font-family:var(--nb-font)}
/* Bootstrap's own variables mapped onto the kit tokens */
:root,[data-nb]{--bs-body-bg:var(--nb-paper);--bs-body-color:var(--nb-ink);--bs-body-font-family:var(--nb-font);--bs-emphasis-color:var(--nb-ink);
--bs-heading-color:var(--nb-ink);--bs-secondary-color:var(--nb-muted);--bs-tertiary-color:var(--nb-muted);
--bs-border-color:var(--nb-line);--bs-border-width:var(--nb-bw);--bs-border-radius:var(--nb-radius-sm);--bs-border-radius-lg:var(--nb-radius);
--bs-focus-ring-color:var(--nb-focus)}
/* Components */
.nb-ico{width:20px;height:20px;flex:none}
.nb-display{font-family:var(--nb-font-display);font-weight:900;letter-spacing:-.01em;line-height:1.05}
.nb-link{color:inherit;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.nb-link:hover{color:inherit;text-decoration-thickness:4px}
.nb-link:focus-visible{outline:3px dashed var(--nb-focus);outline-offset:3px;border-radius:2px}
/* Buttons: Bootstrap .btn with a .btn-nb variant set through --bs-btn-* variables.
Hover lifts it, pressing (or a checked .btn-check) moves it into its shadow */
.btn-nb{--nb-fill:var(--nb-surface);--nb-text:var(--nb-ink);--nb-btn-shadow:var(--nb-shadow);
--bs-btn-padding-x:1.2rem;--bs-btn-padding-y:.6rem;--bs-btn-font-family:var(--nb-font);--bs-btn-font-size:1rem;--bs-btn-font-weight:700;--bs-btn-line-height:1.2;
--bs-btn-border-width:var(--nb-bw);--bs-btn-border-radius:var(--nb-radius-sm);
--bs-btn-bg:var(--nb-fill);--bs-btn-color:var(--nb-text);--bs-btn-border-color:var(--nb-line);
--bs-btn-hover-bg:var(--nb-fill);--bs-btn-hover-color:var(--nb-text);--bs-btn-hover-border-color:var(--nb-line);
--bs-btn-active-bg:var(--nb-fill);--bs-btn-active-color:var(--nb-text);--bs-btn-active-border-color:var(--nb-line);
--bs-btn-disabled-bg:var(--nb-paper);--bs-btn-disabled-color:var(--nb-muted);--bs-btn-disabled-border-color:var(--nb-line);--bs-btn-disabled-opacity:1;
--bs-btn-focus-box-shadow:var(--nb-btn-shadow);
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;box-shadow:var(--nb-btn-shadow);transition:translate .12s,box-shadow .12s}
.btn-nb:hover{translate:-2px -2px;--nb-btn-shadow:var(--nb-shadow-hover)}
.btn-nb:active{translate:var(--nb-press);--nb-btn-shadow:none}
.btn-nb:focus-visible,.btn-check:focus-visible+.btn-nb{outline:3px dashed var(--nb-focus);outline-offset:5px;box-shadow:var(--nb-btn-shadow)}
.btn-nb-lemon{--nb-fill:var(--nb-lemon);--nb-text:var(--nb-on-fill)}
.btn-nb-pink{--nb-fill:var(--nb-pink);--nb-text:var(--nb-on-fill)}
.btn-nb-cyan{--nb-fill:var(--nb-cyan);--nb-text:var(--nb-on-fill)}
.btn-nb-lime{--nb-fill:var(--nb-lime);--nb-text:var(--nb-on-fill)}
.btn-nb-red{--nb-fill:var(--nb-red);--nb-text:var(--nb-on-fill)}
.btn-nb-blue{--nb-fill:var(--nb-blue);--nb-text:var(--nb-on-blue)}
.btn-nb-ink{--nb-fill:var(--nb-ink);--nb-text:var(--nb-paper)}
.btn-nb.btn-sm{--bs-btn-padding-x:.85rem;--bs-btn-padding-y:.4rem;--bs-btn-font-size:.875rem;--bs-btn-border-radius:var(--nb-radius-sm);min-height:38px}
.btn-nb.btn-lg{--bs-btn-padding-x:1.6rem;--bs-btn-padding-y:.8rem;--bs-btn-font-size:1.15rem;--bs-btn-border-radius:var(--nb-radius-sm);min-height:56px}
.btn-nb-icon{--bs-btn-padding-x:0;--bs-btn-padding-y:0;width:48px;height:48px;min-height:0}
.btn-nb-icon-sm{width:38px;height:38px;--nb-btn-shadow:var(--nb-shadow-sm)}
.btn-nb-icon-sm:hover{--nb-btn-shadow:var(--nb-shadow)}
.btn-nb-icon-sm:active{translate:var(--nb-press-sm)}
.btn-nb.rounded-circle{border-radius:50%}
.btn-nb:disabled{border-style:dashed;--nb-btn-shadow:none;translate:none}
/* Card: Bootstrap .card restyled through --bs-card-*; fill variants keep dark text */
.card.nb-card{--bs-card-bg:var(--nb-surface);--bs-card-color:var(--nb-ink);--bs-card-border-color:var(--nb-line);--bs-card-border-width:var(--nb-bw);
--bs-card-border-radius:var(--nb-radius);--bs-card-inner-border-radius:calc(var(--nb-radius) - var(--nb-bw));--bs-card-spacer-x:1.4rem;--bs-card-spacer-y:1.4rem;
--bs-card-cap-bg:transparent;box-shadow:var(--nb-shadow-lg);font-family:var(--nb-font)}
.nb-card h2,.nb-card h3,.nb-card p{margin:0}
.card.nb-card-lemon,.card.nb-card-pink,.card.nb-card-cyan,.card.nb-card-lime,.card.nb-card-orange,.card.nb-card-violet{--nb-muted:var(--nb-on-fill-muted);--bs-card-color:var(--nb-on-fill);--bs-heading-color:var(--nb-on-fill)}
.card.nb-card-lemon{--bs-card-bg:var(--nb-lemon)}.card.nb-card-pink{--bs-card-bg:var(--nb-pink)}.card.nb-card-cyan{--bs-card-bg:var(--nb-cyan)}
.card.nb-card-lime{--bs-card-bg:var(--nb-lime)}.card.nb-card-orange{--bs-card-bg:var(--nb-orange)}.card.nb-card-violet{--bs-card-bg:var(--nb-violet)}
/* Stickers: tilted .badge labels that sit on or over a card */
.badge.nb-sticker{--bs-badge-padding-x:.7rem;--bs-badge-padding-y:.3rem;--bs-badge-font-size:.75rem;--bs-badge-font-weight:800;--bs-badge-color:var(--nb-on-fill);--bs-badge-border-radius:999px;
display:inline-flex;align-items:center;gap:.35rem;width:max-content;border:var(--nb-border);background:var(--nb-lemon);font-family:var(--nb-font);line-height:1.1;letter-spacing:.06em;text-transform:uppercase;box-shadow:var(--nb-shadow-sm);rotate:-4deg}
.nb-sticker .nb-ico{width:14px;height:14px}
.badge.nb-sticker-pink{background:var(--nb-pink)}.badge.nb-sticker-cyan{background:var(--nb-cyan)}.badge.nb-sticker-lime{background:var(--nb-lime)}
.badge.nb-sticker-orange{background:var(--nb-orange)}.badge.nb-sticker-violet{background:var(--nb-violet)}
.nb-sticker-right{rotate:5deg}
.nb-sticker-corner{position:absolute;top:-16px;right:14px;z-index:2}
.badge.nb-sticker-square{--bs-badge-border-radius:4px}
/* Starburst sticker: two clipped layers, ink behind and colour on top */
.nb-burst{position:relative;display:grid;place-items:center;width:104px;aspect-ratio:1;padding:18px;color:var(--nb-on-fill);text-align:center;
font:900 .78rem/1.05 var(--nb-font);letter-spacing:.02em;text-transform:uppercase;rotate:12deg}
.nb-burst::before,.nb-burst::after{content:"";position:absolute;clip-path:polygon(50% 0%,59.1% 16.1%,75% 6.7%,74.8% 25.2%,93.3% 25%,83.9% 40.9%,100% 50%,83.9% 59.1%,93.3% 75%,74.8% 74.8%,75% 93.3%,59.1% 83.9%,50% 100%,40.9% 83.9%,25% 93.3%,25.2% 74.8%,6.7% 75%,16.1% 59.1%,0% 50%,16.1% 40.9%,6.7% 25%,25.2% 25.2%,25% 6.7%,40.9% 16.1%)}
.nb-burst::before{inset:0;background:var(--nb-line)}
.nb-burst::after{inset:5px;background:var(--nb-burst,var(--nb-lemon))}
.nb-burst-pink{--nb-burst:var(--nb-pink)}.nb-burst-cyan{--nb-burst:var(--nb-cyan)}.nb-burst-lime{--nb-burst:var(--nb-lime)}
.nb-burst>span{position:relative;z-index:1}
.nb-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.nb-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}
.nb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:28px;align-items:start}
.nb-stack{display:grid;gap:1.25rem}
/* Content card: cover art, a sticker, a title and a named link */
.nb-cover{position:relative;display:block;height:160px;margin:-1.4rem -1.4rem 1.2rem;border-bottom:var(--nb-border);border-radius:calc(var(--nb-radius) - var(--nb-bw)) calc(var(--nb-radius) - var(--nb-bw)) 0 0;overflow:hidden;background:var(--nb-cyan)}
.nb-cover svg{display:block;width:100%;height:100%}
.nb-meta{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin:.9rem 0 1.1rem!important;font-size:.85rem;font-weight:600;color:var(--nb-muted)}
.nb-card__title{font-size:1.35rem;line-height:1.2}
.nb-card__text{margin-top:.55rem!important;color:var(--nb-muted)}
/* Stat cards: a label, a big figure, and the change written in words beside its arrow */
.nb-stat{display:grid;gap:.35rem}
.nb-stat__top{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.nb-stat__label{font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.nb-stat__icon{display:grid;place-items:center;width:40px;height:40px;border:var(--nb-bw) solid currentColor;border-radius:50%}
.nb-stat__value{font-size:2.3rem}
.nb-stat__delta{display:flex;align-items:center;gap:.35rem;font-size:.88rem;font-weight:700;color:var(--nb-muted)}
.nb-stat__delta .nb-ico{width:16px;height:16px}
/* Profile card */
.nb-profile{text-align:center}
.nb-avatar{display:grid;place-items:center;width:88px;height:88px;margin:0 auto .9rem;border:var(--nb-border);border-radius:50%;background:var(--nb-pink);color:var(--nb-on-fill);
font:900 1.8rem/1 var(--nb-font-display);box-shadow:var(--nb-shadow)}
.nb-profile__handle{margin-top:.15rem!important;font-weight:600;color:var(--nb-muted)}
.nb-profile__bio{margin:.8rem 0 1rem!important}
.nb-dl{display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 1.2rem;border:var(--nb-border);border-radius:var(--nb-radius-sm);overflow:hidden}
.nb-dl div{padding:.6rem .3rem;background:var(--nb-paper)}
.nb-dl div+div{border-left:var(--nb-border)}
.nb-dl dt{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--nb-muted)}
.nb-dl dd{margin:0;font:900 1.2rem/1.2 var(--nb-font-display)}
.nb-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
/* Pricing cards: the featured plan is lemon with a sticker; each line says Included or Not included */
.nb-price__name{font-size:.85rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.nb-price__amount{margin:.4rem 0 .2rem!important;font-size:2.8rem}
.nb-price__amount small{font:700 1rem/1 var(--nb-font);letter-spacing:0}
.nb-price__note{color:var(--nb-muted)}
.nb-feats{display:grid;gap:.6rem;margin:1.2rem 0 1.4rem;padding:1rem 0 0;border-top:var(--nb-border);list-style:none}
.nb-feats li{display:flex;align-items:flex-start;gap:.6rem;font-weight:600}
.nb-feats .nb-ico{width:22px;height:22px;padding:2px;border:2px solid var(--nb-line);border-radius:50%;background:var(--nb-lime);color:var(--nb-on-fill)}
.nb-feats .is-off{color:var(--nb-muted);text-decoration:line-through}
.nb-feats .is-off .nb-ico{background:var(--nb-paper);color:var(--nb-ink)}
@media (prefers-reduced-motion:reduce){[class*="nb-"],[class*="nb-"]::before,[class*="nb-"]::after{transition:none!important;animation:none!important}}
/* ── Neobrutalism UI kit tokens (uiCookies) — identical in every set ─────────────
Thick ink borders, hard offset shadows and flat saturated fills on cream paper.
Change a token and the whole kit follows; the border and shadow recipes below are built from them. */
:root{
--nb-paper:#fff6e0; /* page background, cream */
--nb-surface:#ffffff; /* card, field and button faces */
--nb-ink:#111111; /* text, 17.5:1 on paper */
--nb-muted:#454036; /* secondary text, 9.6:1 on paper */
--nb-line:#111111; /* border colour */
--nb-bw:3px; /* border width */
--nb-shadow-x:4px; /* hard shadow offset; pressed controls move this far into it */
--nb-shadow-y:4px;
--nb-shadow-color:#111111;
--nb-radius:12px; /* cards and panels */
--nb-radius-sm:8px; /* buttons and fields */
--nb-focus:#1d4ed8; /* dashed focus outline, 6.2:1 on paper, never the shadow */
--nb-on-fill:#111111; /* text on every palette fill below, 6.8:1 or more */
--nb-on-fill-muted:#2b2822;/* secondary text on fills, 5.2:1 or more */
--nb-lemon:#ffe14d;--nb-pink:#ff90d0;--nb-cyan:#62e2e8;--nb-lime:#b6f36a;
--nb-orange:#ffa94d;--nb-violet:#b9a3ff;--nb-red:#ff6b6b;
--nb-blue:#2448e0;--nb-on-blue:#ffffff; /* the only fill that takes white text, 6.8:1 */
--nb-danger:#b42318; /* destructive text, 6.1:1 on paper */
--nb-font:"Space Grotesk","Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
--nb-font-display:"Archivo Black","Arial Black","Helvetica Neue",Arial,sans-serif;
}
/* Dark brutalism: data-nb="dark" on any wrapper, or a checked .nb-theme-input inside a [data-nb] element.
:is() is a forgiving list, so browsers without :has() still apply data-nb="dark". Fills keep dark text. */
[data-nb]:is([data-nb="dark"],:has(.nb-theme-input:checked)){
--nb-paper:#17150f;--nb-surface:#25221b;--nb-ink:#fbf3dc;--nb-muted:#d6ccb2;--nb-line:#fbf3dc;
--nb-shadow-color:#fbf3dc;--nb-focus:#8db4ff;--nb-danger:#ff9b8f;color-scheme:dark}
/* More contrast requested: secondary text turns full ink */
@media (prefers-contrast:more){:root,[data-nb]:is([data-nb],:has(.nb-theme-input:checked)){--nb-muted:var(--nb-ink);--nb-on-fill-muted:var(--nb-on-fill)}}
:root,[data-nb]{
--nb-border:var(--nb-bw) solid var(--nb-line);
--nb-shadow:var(--nb-shadow-x) var(--nb-shadow-y) 0 0 var(--nb-shadow-color);
--nb-shadow-sm:calc(var(--nb-shadow-x)*.5) calc(var(--nb-shadow-y)*.5) 0 0 var(--nb-shadow-color);
--nb-shadow-lg:calc(var(--nb-shadow-x)*1.75) calc(var(--nb-shadow-y)*1.75) 0 0 var(--nb-shadow-color);
--nb-shadow-hover:calc(var(--nb-shadow-x) + 2px) calc(var(--nb-shadow-y) + 2px) 0 0 var(--nb-shadow-color);
--nb-press:var(--nb-shadow-x) var(--nb-shadow-y); /* translate for a pressed control */
--nb-press-sm:calc(var(--nb-shadow-x)*.5) calc(var(--nb-shadow-y)*.5); /* …for one with the small shadow */
}
[data-nb]{background:var(--nb-paper);color:var(--nb-ink);font-family:var(--nb-font)}
/* The tokens above, exposed as Tailwind utilities: bg-nb-paper, bg-nb-lemon, text-nb-ink, border-nb-line,
shadow-nb, shadow-nb-sm, shadow-nb-lg, rounded-nb, rounded-nb-sm, font-nb, font-nb-display, outline-nb-focus… */
@theme inline {
--color-nb-paper: var(--nb-paper); --color-nb-surface: var(--nb-surface); --color-nb-ink: var(--nb-ink);
--color-nb-muted: var(--nb-muted); --color-nb-line: var(--nb-line); --color-nb-focus: var(--nb-focus);
--color-nb-on-fill: var(--nb-on-fill); --color-nb-on-fill-muted: var(--nb-on-fill-muted);
--color-nb-lemon: var(--nb-lemon); --color-nb-pink: var(--nb-pink); --color-nb-cyan: var(--nb-cyan); --color-nb-lime: var(--nb-lime);
--color-nb-orange: var(--nb-orange); --color-nb-violet: var(--nb-violet); --color-nb-red: var(--nb-red);
--color-nb-blue: var(--nb-blue); --color-nb-on-blue: var(--nb-on-blue); --color-nb-danger: var(--nb-danger);
--shadow-nb: var(--nb-shadow); --shadow-nb-sm: var(--nb-shadow-sm); --shadow-nb-lg: var(--nb-shadow-lg); --shadow-nb-hover: var(--nb-shadow-hover);
--radius-nb: var(--nb-radius); --radius-nb-sm: var(--nb-radius-sm);
--font-nb: var(--nb-font); --font-nb-display: var(--nb-font-display);
}
/* Starburst sticker outline (Tailwind has no clip-path utility) */
@utility clip-nb-burst {
clip-path: polygon(50% 0%,59.1% 16.1%,75% 6.7%,74.8% 25.2%,93.3% 25%,83.9% 40.9%,100% 50%,83.9% 59.1%,93.3% 75%,74.8% 74.8%,75% 93.3%,59.1% 83.9%,50% 100%,40.9% 83.9%,25% 93.3%,25.2% 74.8%,6.7% 75%,16.1% 59.1%,0% 50%,16.1% 40.9%,6.7% 25%,25.2% 25.2%,25% 6.7%,40.9% 16.1%);
}
About this set
Four kinds of card and a sheet of stickers in one loud style. Stat cards fill lemon, pink and cyan and show subscribers, revenue and open rate with a big black figure and a change written in words beside its arrow, such as Up 8.2% this month. A content card sets geometric cover art drawn in inline SVG above a tilted Episode 42 sticker, a title, an excerpt, the listening time and date, and a Listen now button whose hidden text names the episode. A profile card has initials in a round avatar with its own shadow, a Top creator sticker, a short bio, three stats in a boxed description list and Follow and Message actions. Three pricing cards compare free, supporter and studio plans; the featured plan is lemon with a Most popular sticker and each feature line says Included or Not included to screen readers. Last comes a row of pill and square stickers and two starburst badges cut with clip-path. Use the stat cards on dashboards, the content card for articles or episodes, and the pricing cards on an upgrade page. Every card shares the border, the large hard shadow and the radius from the –nb-* tokens.
What’s included
Stat cards whose change is written in words
Content card with inline SVG cover art and a named link
Profile card with stats as a description list
Pricing cards with a sticker and Included or Not included labels
Pill, square and starburst stickers
Accessibility
Headings, lists and a description list give the cards structure. The cover art and avatar are decorative and hidden from screen readers, the Listen now link includes the episode title in hidden text, and the icon-only message button has an aria-label. Buttons and links show a 3px dashed focus outline. Dark text on every fill reaches 6.8:1 or more, and transitions stop under prefers-reduced-motion.
Customise it
Change the --nb-* tokens for the border, shadow, radius and palette. In Bootstrap the cards are .card.nb-card with --bs-card-* mapped to the tokens and fill classes such as .nb-card-lemon; in Tailwind use bg-nb-lemon, shadow-nb-lg and rounded-nb, and the clip-nb-burst utility for the starburst.
