@noobsociety/nsds 0.1.0

package/tokens/base.css

@@ -0,0 +1,46 @@
+/* NoobSociety — Base resets and body defaults */
+*, *::before, *::after { box-sizing: border-box; }
+
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: var(--ns-header-h);
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: var(--ns-font-body);
+  font-size: var(--ns-text-base);
+  line-height: var(--ns-leading-relaxed);
+  color: var(--ns-ink);
+  background-color: var(--ns-bg-1);
+  background-image:
+    radial-gradient(ellipse 80% 55% at 88% 2%, rgba(249, 38, 114, 0.11), transparent 58%),
+    radial-gradient(ellipse 55% 45% at 8% 12%, rgba(174, 129, 255, 0.07), transparent 52%),
+    linear-gradient(180deg, var(--ns-bg-1) 0%, #1e1f1a 100%);
+  background-attachment: fixed;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+img { display: block; max-width: 100%; }
+a   { color: var(--ns-gold); text-decoration: none; transition: color var(--ns-transition-fast); }
+a:hover { color: var(--ns-gold-pale); }
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+:where(a, button, input, select, textarea, [tabindex]):focus-visible {
+  outline: 2px solid var(--ns-gold);
+  outline-offset: 3px;
+  box-shadow: 0 0 0 4px var(--ns-focus-ring);
+}
+
+::selection {
+  background: var(--ns-selection-bg);
+  color: var(--ns-ink);
+}

package/tokens/colors.css

@@ -0,0 +1,73 @@
+/* NoobSociety — Color tokens (Monokai dark) */
+:root {
+  /* ── Surfaces ─────────────────────────────────────────────── */
+  --ns-bg-0:      #1a1a16;   /* deepest — footer, sidebar */
+  --ns-bg-1:      #272822;   /* page base */
+  --ns-bg-2:      #32332b;   /* raised surfaces, icon slots */
+  --ns-glass:     rgba(30, 31, 26, 0.88);  /* card, header backdrop */
+  --ns-glass-2:   rgba(30, 31, 26, 0.60);  /* lighter glass */
+  --ns-glass-soft: rgba(30, 31, 26, 0.75); /* subtle card surface */
+
+  --ns-bg-0-rgb: 26 26 22;
+  --ns-bg-1-rgb: 39 40 34;
+  --ns-bg-2-rgb: 50 51 43;
+  --ns-glass-rgb: 30 31 26;
+
+  /* ── Borders ──────────────────────────────────────────────── */
+  --ns-line:        rgba(255, 255, 255, 0.12);
+  --ns-line-strong: rgba(255, 255, 255, 0.22);
+  --ns-line-soft:   rgba(255, 255, 255, 0.08);
+
+  /* ── Ink (text) ───────────────────────────────────────────── */
+  --ns-ink:       #f8f8f2;   /* primary text — Monokai foreground */
+  --ns-ink-dim:   #a8a28c;   /* secondary text */
+  --ns-ink-faint: #75715e;   /* placeholder, captions — Monokai comment */
+  --ns-ink-rgb:       248 248 242;
+  --ns-ink-dim-rgb:   168 162 140;
+  --ns-ink-faint-rgb: 117 113 94;
+
+  /* ── Brand yellow (gold) — primary accent ─────────────────── */
+  --ns-gold:        #e6db74;
+  --ns-gold-pale:   #f4f099;
+  --ns-gold-deep:   #cabb50;
+  --ns-gold-shadow: #b5a83f;
+  --ns-gold-btn-fg: #1c1c17; /* text on gold buttons */
+  --ns-gold-rgb:        230 219 116;
+  --ns-gold-pale-rgb:   244 240 153;
+  --ns-gold-deep-rgb:   202 187 80;
+  --ns-gold-shadow-rgb: 181 168 63;
+
+  /* ── Monokai semantic accents ─────────────────────────────── */
+  --ns-green:       #a6e22e;  /* "Holds" / success */
+  --ns-green-deep:  #7fb81e;
+  --ns-cyan:        #66d9e8;  /* "Planned" / info */
+  --ns-cyan-deep:   #5bc8d7;
+  --ns-orange:      #fd971f;  /* "Building" / in-progress */
+  --ns-orange-deep: #c96f00;
+  --ns-pink:        #f92672;  /* danger / highlight */
+  --ns-purple:      #ae81ff;  /* decorative */
+  --ns-green-rgb:       166 226 46;
+  --ns-green-deep-rgb:  127 184 30;
+  --ns-cyan-rgb:        102 217 232;
+  --ns-cyan-deep-rgb:   91 200 215;
+  --ns-orange-rgb:      253 151 31;
+  --ns-orange-deep-rgb: 201 111 0;
+  --ns-pink-rgb:        249 38 114;
+  --ns-purple-rgb:      174 129 255;
+
+  /* ── Semantic aliases ─────────────────────────────────────── */
+  --ns-surface-page:   var(--ns-bg-1);
+  --ns-surface-card:   var(--ns-glass);
+  --ns-surface-raised: var(--ns-bg-2);
+  --ns-text-primary:   var(--ns-ink);
+  --ns-text-secondary: var(--ns-ink-dim);
+  --ns-text-muted:     var(--ns-ink-faint);
+  --ns-accent:         var(--ns-gold);
+  --ns-accent-hover:   var(--ns-gold-pale);
+  --ns-status-holds:   var(--ns-green);
+  --ns-status-building: var(--ns-orange);
+  --ns-status-planned:  var(--ns-cyan);
+  --ns-status-later:    var(--ns-ink-faint);
+  --ns-focus-ring:      rgba(230, 219, 116, 0.35);
+  --ns-selection-bg:    rgba(249, 38, 114, 0.28);
+}

package/tokens/motion.css

@@ -0,0 +1,64 @@
+/* NoobSociety — Motion tokens & keyframes */
+:root {
+  /* ── Durations ────────────────────────────────────────────── */
+  --ns-dur-fast:    150ms;
+  --ns-dur-base:    200ms;
+  --ns-dur-slow:    400ms;
+  --ns-dur-xslow:   600ms;
+
+  /* ── Easings ──────────────────────────────────────────────── */
+  --ns-ease-out:    ease-out;
+  --ns-ease-in-out: ease-in-out;
+  --ns-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* ── Transitions (common shorthand) ──────────────────────── */
+  --ns-transition-fast: var(--ns-dur-fast) var(--ns-ease-out);
+  --ns-transition-base: var(--ns-dur-base) var(--ns-ease-out);
+}
+
+/* ── Keyframes ────────────────────────────────────────────────── */
+
+/* Character idle bob (with centered offset) */
+@keyframes ns-bob {
+  0%, 100% { transform: translateX(-50%) translateY(0); }
+  50%       { transform: translateX(-50%) translateY(-6px); }
+}
+
+/* Generic idle bob (no X offset) */
+@keyframes ns-bob-plain {
+  0%, 100% { transform: translateY(0); }
+  50%       { transform: translateY(-5px); }
+}
+
+/* Pixel text blink (e.g. "Press Start") */
+@keyframes ns-blink {
+  0%,  55% { opacity: 1; }
+  56%, 100% { opacity: 0; }
+}
+
+/* Star field twinkle */
+@keyframes ns-twinkle {
+  0%, 100% { opacity: 0.7; }
+  50%       { opacity: 0.35; }
+}
+
+/* Section arrow nudge */
+@keyframes ns-arrow {
+  0%, 100% { transform: translateX(-50%) translateY(0); }
+  50%       { transform: translateX(-50%) translateY(5px); }
+}
+
+/* Live pulse dot */
+@keyframes ns-live {
+  0%   { box-shadow: 0 0 0 0   rgba(166, 226, 46, 0.7); }
+  70%  { box-shadow: 0 0 0 7px rgba(166, 226, 46, 0);   }
+  100% { box-shadow: 0 0 0 0   rgba(166, 226, 46, 0);   }
+}
+
+/* Reduced motion: disable all ns animations */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation: none !important;
+    scroll-behavior: auto !important;
+  }
+}

package/tokens/spacing.css

@@ -0,0 +1,70 @@
+/* NoobSociety Design System — Spacing, layout & shape tokens
+   All values rem-based (1rem = 16px user default).
+   Fluid layout values use clamp() — min / preferred / max.         */
+
+:root {
+  /* ── Base scale (4px grid, expressed in rem) ──────────────────── */
+  --ns-space-1:   0.25rem;   /* 4px  */
+  --ns-space-2:   0.5rem;    /* 8px  */
+  --ns-space-3:   0.75rem;   /* 12px */
+  --ns-space-4:   1rem;      /* 16px */
+  --ns-space-5:   1.25rem;   /* 20px */
+  --ns-space-6:   1.5rem;    /* 24px */
+  --ns-space-7:   1.75rem;   /* 28px */
+  --ns-space-8:   2rem;      /* 32px */
+  --ns-space-10:  2.5rem;    /* 40px */
+  --ns-space-12:  3rem;      /* 48px */
+  --ns-space-14:  3.5rem;    /* 56px */
+  --ns-space-16:  4rem;      /* 64px */
+  --ns-space-20:  5rem;      /* 80px */
+  --ns-space-24:  5.75rem;   /* 92px */
+
+  /* ── Fluid layout tokens (viewport-responsive) ────────────────── */
+  /* Container side padding: 16px → 32px */
+  --ns-fluid-container:       clamp(1rem, 4vw, 2rem);
+  /* Section top padding: 40px → 64px */
+  --ns-fluid-section-top:     clamp(2.5rem, 8svh, 4rem);
+  /* Section bottom padding: 64px → 88px */
+  --ns-fluid-section-bottom:  clamp(4rem, 10svh, 5.5rem);
+  /* Card grid gap: 12px → 24px */
+  --ns-fluid-gap-cards:       clamp(0.75rem, 2vw, 1.5rem);
+  /* Card internal padding: 16px → 20px */
+  --ns-fluid-card-pad:        clamp(1rem, 2vw, 1.25rem);
+  /* Hero two-col gap: 24px → 48px */
+  --ns-fluid-hero-gap:        clamp(1.5rem, 4vw, 3rem);
+  /* Footer two-col gap: 32px → 48px */
+  --ns-fluid-footer-gap:      clamp(2rem, 5vw, 3rem);
+
+  /* ── Fixed layout ─────────────────────────────────────────────── */
+  --ns-container:     1080px;
+  --ns-header-h:      4rem;    /* 64px — sticky header */
+  --ns-section-min:   calc(100svh - var(--ns-header-h));
+
+  /* ── Radii ────────────────────────────────────────────────────── */
+  --ns-radius-sm:     0.25rem;  /* 4px  */
+  --ns-radius-md:     0.5rem;   /* 8px  */
+  --ns-radius-lg:     0.625rem; /* 10px */
+  --ns-radius-xl:     0.75rem;  /* 12px */
+  --ns-radius-full:   9999px;
+
+  /* ── Shadows ──────────────────────────────────────────────────── */
+  --ns-shadow-card-rest:  none;
+  --ns-shadow-card-hover: 0 1rem 2.125rem rgba(0, 0, 0, 0.38);
+  --ns-shadow-modal:      0 1.5rem 3.5rem rgba(0, 0, 0, 0.5);
+  --ns-shadow-btn:        0 0.1875rem 0 var(--ns-gold-shadow);
+  --ns-shadow-arrow:      0 0 0 0.25rem rgba(230, 219, 116, 0.12), 0 0.75rem 1.75rem rgba(0, 0, 0, 0.36);
+
+  /* ── Borders ──────────────────────────────────────────────────── */
+  --ns-border-card:        1px solid var(--ns-line);
+  --ns-border-card-strong: 1px solid var(--ns-line-strong);
+  --ns-border-gold:        2px solid var(--ns-gold-deep);
+
+  /* ── Blur ─────────────────────────────────────────────────────── */
+  --ns-blur-glass:  blur(8px);
+  --ns-blur-header: blur(12px);
+
+  /* ── Component sizing ──────────────────────────────────────────── */
+  --ns-icon-slot:    2.625rem; /* 42px */
+  --ns-icon-slot-sm: 1.625rem; /* 26px */
+  --ns-arrow-size:   2.125rem; /* 34px */
+}

package/tokens/typography.css

@@ -0,0 +1,43 @@
+/* NoobSociety — Typography tokens */
+:root {
+  /* ── Font families ────────────────────────────────────────── */
+  --ns-font-body:  'Inter', system-ui, sans-serif;
+  --ns-font-pixel: 'Press Start 2P', system-ui, sans-serif;
+
+  /* ── Type scale ───────────────────────────────────────────── */
+  --ns-text-xs:   0.75rem;   /* 12px */
+  --ns-text-sm:   0.875rem;  /* 14px */
+  --ns-text-base: 1rem;      /* 16px */
+  --ns-text-lg:   1.125rem;  /* 18px */
+  --ns-text-xl:   1.25rem;   /* 20px */
+  --ns-text-2xl:  1.5rem;    /* 24px */
+  --ns-text-3xl:  1.875rem;  /* 30px */
+  --ns-text-4xl:  2.25rem;   /* 36px */
+
+  /* ── Pixel font scale ─────────────────────────────────────── */
+  --ns-pixel-2xs: 7px;
+  --ns-pixel-xs:  8px;
+  --ns-pixel-sm:  9px;
+  --ns-pixel-base: 11px;
+  --ns-pixel-md:  12px;
+  --ns-pixel-lg:  13px;
+  --ns-pixel-xl:  1.6rem;    /* hero accent title */
+  --ns-pixel-2xl: clamp(2rem, 1rem + 3vw, 3.5rem);  /* hero title */
+  --ns-title-section: clamp(1.8rem, 1rem + 2vw, 2.4rem);
+
+  /* ── Line heights ─────────────────────────────────────────── */
+  --ns-leading-tight:  1.08;
+  --ns-leading-snug:   1.35;
+  --ns-leading-normal: 1.45;
+  --ns-leading-relaxed: 1.6;
+  --ns-leading-pixel:  1.5;  /* for Press Start 2P */
+
+  /* ── Font weights ─────────────────────────────────────────── */
+  --ns-weight-normal:   400;
+  --ns-weight-medium:   500;
+  --ns-weight-semibold: 600;
+  --ns-weight-bold:     700;
+
+  /* ── Section eyebrow ─────────────────────────────────────────*/
+  /* font: 700 13px/1 var(--ns-font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--ns-gold) */
+}