/* ============================================================
Node Agency — Colors & Type
Production-faithful design tokens.
GROUND TRUTH: nodeagencyai/nodeagency-ai (agency site),
nodeagencyai/leadgenos-web (LeadGenOS),
nodeagencyai/aivisibility-web (AURA).
- Default: monochrome dark + warm-cream CTA (matches live site)
- Optional: warm-neutral colorway for product surfaces
- Optional: EMBER accent — RESERVED for carousels & editorial
marketing moments. Do NOT use Ember on product UI.
============================================================ */
/* ----------------------------------------------------------------
FONTS — production loads Inter + JetBrains Mono via next/font.
We mirror that with Google Fonts here. Space Grotesk is added
as a sibling for LeadGenOS-style product surfaces.
Satoshi remains available as an optional editorial display face.
---------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
/* Optional Satoshi (only loaded if files present in /fonts) */
@font-face {
font-family: "Satoshi";
src: url("./fonts/Satoshi-Regular.otf") format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Satoshi";
src: url("./fonts/Satoshi-Medium.otf") format("opentype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Satoshi";
src: url("./fonts/Satoshi-Bold.otf") format("opentype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Satoshi";
src: url("./fonts/Satoshi-BoldItalic.otf") format("opentype");
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Satoshi";
src: url("./fonts/Satoshi-BlackItalic.otf") format("opentype");
font-weight: 900;
font-style: italic;
font-display: swap;
}
/* ----------------------------------------------------------------
ROOT TOKENS — DARK (default; brand is dark-first)
Values pulled VERBATIM from production globals.css
---------------------------------------------------------------- */
:root {
/* ---- Surface ramp (cool-neutral, agency-site exact) ---- */
--node-base: #000000; /* canvas — pure black */
--node-section: #050505; /* section background, subtle lift */
--node-card: #0a0a0a; /* raised card */
--node-card-hover: #111114; /* card hover */
--node-border: #27272a; /* hairline */
--node-border-hover: #3f3f46; /* hairline on hover */
--node-text-muted: #71717a; /* tertiary text */
--node-text-secondary:#a1a1aa; /* secondary text */
--node-text-primary: #fafafa; /* primary text */
--node-cta-cream: #f8f5f0; /* warm-cream — primary CTA fill */
--node-cta-cream-hi: #faf7f3; /* CTA hover */
--node-white: #ffffff;
/* ---- Warm-neutral colorway (LeadGenOS variant) ----
Apply by setting [data-palette="warm"] on or section root */
--node-warm-base: #0d0d0c;
--node-warm-card: #1a1918;
--node-warm-elevated: #242321;
--node-warm-border: #2e2d2b;
--node-warm-text-primary:#f5f5f0;
--node-warm-text-muted: #a8a69f;
/* ---- EMBER — Editorial accent · CAROUSELS ONLY ----
Cadmium orange family. Reserved for marketing carousels, social,
and campaign work. Do NOT introduce on the product or main site. */
--node-ember-wash: #2A1A0E; /* warm near-black tint for backgrounds */
--node-ember-deep: #8A4A12; /* burnt — pressed, links on light */
--node-ember: #F28C28; /* base — primary accent */
--node-ember-soft: #F9B673; /* hover, secondary */
--node-ember-pale: #FBD9B0; /* tints, badges, low-contrast accents */
/* ---- Status (used quietly — Node is mostly monochrome) ---- */
--node-positive: #6FE7B0;
--node-warning: #F2C06B;
--node-negative: #F26B6B;
/* ---- Semantic surfaces ---- */
--bg-canvas: var(--node-base);
--bg-section: var(--node-section);
--bg-raised: var(--node-card);
--bg-hover: var(--node-card-hover);
--bg-inverse: var(--node-text-primary);
/* ---- Semantic foreground ---- */
--fg-1: var(--node-text-primary); /* primary */
--fg-2: var(--node-text-secondary); /* secondary */
--fg-3: var(--node-text-muted); /* tertiary / meta */
--fg-disabled: var(--node-border-hover);
--fg-inverse: var(--node-base);
/* On product surfaces fg-accent === fg-1 (monochrome).
On carousel/editorial surfaces it switches to ember (see below). */
--fg-accent: var(--node-text-primary);
--border-subtle: var(--node-border);
--border-strong: var(--node-border-hover);
--border-accent: var(--node-text-primary);
/* ---- CTA ----
Production CTA is the warm cream. Ember is NEVER the CTA on product. */
--cta-fill: var(--node-cta-cream);
--cta-fill-hi: var(--node-cta-cream-hi);
--cta-text: var(--node-base);
/* ---- Focus ring — soft, double-shadow (production .btn-ghost) ---- */
--focus-ring:
0 0 0 2px rgba(255, 255, 255, 0.2),
0 0 0 4px rgba(255, 255, 255, 0.1);
/* ---- Type families ---- */
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
--font-product: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif; /* LeadGenOS-style */
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-editorial: "Satoshi", "Inter", ui-sans-serif, system-ui, sans-serif; /* optional display face */
/* ---- Type scale ---- */
--fs-hero: clamp(2.25rem, 1.5rem + 3vw, 5.25rem); /* @kind other */
--fs-section: clamp(1.5rem, 1rem + 2vw, 3rem); /* @kind other */
--fs-display-2xl: clamp(56px, 9vw, 128px); /* @kind font */
--fs-display-xl: clamp(44px, 6.5vw, 88px); /* @kind font */
--fs-display-lg: clamp(36px, 5vw, 64px); /* @kind font */
--fs-h1: clamp(32px, 3.4vw, 48px); /* @kind font */
--fs-h2: clamp(26px, 2.6vw, 36px); /* @kind font */
--fs-h3: 22px; /* @kind font */
--fs-h4: 18px; /* @kind font */
--fs-body-lg: 18px; /* @kind font */
--fs-body: 16px; /* @kind font */
--fs-body-sm: 14px; /* @kind font */
--fs-caption: 12px; /* @kind font */
--fs-eyebrow: 11px; /* @kind font */
--lh-tight: 1.02; /* @kind font */
--lh-snug: 1.12; /* @kind font */
--lh-base: 1.5; /* @kind font */
--lh-loose: 1.65; /* @kind font */
--tracking-display: -0.03em; /* @kind font */
--tracking-heading: -0.02em; /* @kind font */
--tracking-body: -0.005em; /* @kind font */
--tracking-eyebrow: 0.05em; /* @kind font */
/* ---- Spacing (4px base) ---- */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
/* ---- Radius — production defaults to PILLS ---- */
--radius-0: 0px;
--radius-1: 2px;
--radius-2: 4px;
--radius-card: 12px; /* card-glass / dark cards: 0.75rem */
--radius-pill: 9999px; /* default for buttons, inputs, chips */
/* ---- Borders ---- */
--hairline: 1px solid var(--border-subtle);
--hairline-strong: 1px solid var(--border-strong);
/* ---- Shadows (used sparingly; elevation comes from surface tint) - */
--shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
--shadow-2: 0 8px 24px rgba(0,0,0,0.5);
--glow-ambient: 0 0 80px 40px rgba(60, 56, 48, 0.3);
--glow-primary: 0 0 60px 20px rgba(248, 245, 240, 0.08);
/* ---- Motion ---- */
--ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
--ease-emphatic: cubic-bezier(0.7, 0, 0.2, 1); /* @kind other */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
--dur-fast: 120ms; /* @kind other */
--dur-base: 200ms; /* @kind other */
--dur-slow: 420ms; /* @kind other */
/* ---- Layout ---- */
--maxw-prose: 64ch; /* @kind other */
--maxw-narrow: 880px; /* @kind other */
--maxw-wide: 1280px; /* @kind other */
--maxw-full: 1480px; /* @kind other */
/* ---- A11y ---- */
--touch-target-min: 44px; /* @kind spacing */
}
/* ----------------------------------------------------------------
WARM-NEUTRAL COLORWAY — LeadGenOS-style product surfaces.
Apply with [data-palette="warm"] on or any wrapper.
---------------------------------------------------------------- */
:root[data-palette="warm"],
[data-palette="warm"] {
--bg-canvas: var(--node-warm-base);
--bg-section: var(--node-warm-base);
--bg-raised: var(--node-warm-card);
--bg-hover: var(--node-warm-elevated);
--border-subtle:var(--node-warm-border);
--fg-1: var(--node-warm-text-primary);
--fg-3: var(--node-warm-text-muted);
}
/* ----------------------------------------------------------------
EDITORIAL / CAROUSEL CONTEXT — opt-in Ember accent.
Apply [data-context="editorial"] on a wrapper (e.g. carousel
slide root). Ember becomes accent, focus, and CTA glow.
PRODUCT UI MUST NOT SET THIS ATTRIBUTE.
---------------------------------------------------------------- */
[data-context="editorial"] {
--fg-accent: var(--node-ember);
--border-accent: var(--node-ember);
--focus-ring:
0 0 0 2px var(--node-base),
0 0 0 4px var(--node-ember);
}
[data-context="editorial"] ::selection {
background: var(--node-ember);
color: var(--node-base);
}
/* ----------------------------------------------------------------
LIGHT MODE — invert canvas (rare; mostly for print/case PDFs)
---------------------------------------------------------------- */
:root[data-theme="light"],
.theme-light {
--bg-canvas: #FFFFFF;
--bg-section: #FAFAF7;
--bg-raised: #FFFFFF;
--bg-hover: #F1F0EC;
--bg-inverse: var(--node-base);
--fg-1: var(--node-base);
--fg-2: #4A4A52;
--fg-3: #76767E;
--fg-disabled: #B5B5BC;
--fg-inverse: var(--node-text-primary);
--border-subtle: #E8E8E4;
--border-strong: #C4C4BE;
--focus-ring:
0 0 0 2px rgba(0, 0, 0, 0.15),
0 0 0 4px rgba(0, 0, 0, 0.06);
}
/* ----------------------------------------------------------------
BASE
---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg-canvas);
color: var(--fg-1);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-base);
letter-spacing: var(--tracking-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
::selection { background: rgba(255, 255, 255, 0.15); color: #ffffff; }
:root[data-theme="light"] ::selection { background: rgba(0, 0, 0, 0.12); color: #000; }
/* ----------------------------------------------------------------
GLOBAL NOISE GRAIN — production primitive.
Add class .surface-grain to (or any full-bleed wrapper)
to enable. Inline SVG fractal noise, fixed, mix-blend overlay.
---------------------------------------------------------------- */
.surface-grain { position: relative; }
.surface-grain::before {
content: '';
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
opacity: 0.05;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 200px 200px;
}
/* ----------------------------------------------------------------
SECTION DIVIDER — scroll-driven hairline reveal (production).
Use
or .
---------------------------------------------------------------- */
.section-divider {
height: 1px;
border: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
view-timeline-name: --divider;
view-timeline-axis: block;
animation-timeline: --divider;
animation-name: divider-reveal;
animation-fill-mode: both;
animation-range: entry 10% cover 30%;
}
@keyframes divider-reveal {
from { opacity: 0; transform: scaleX(0.8); }
to { opacity: 1; transform: scaleX(1); }
}
/* ----------------------------------------------------------------
PILL LABEL — production .pill-label primitive
Small, mono-cased eyebrow chip used as section label.
---------------------------------------------------------------- */
.pill-label {
display: inline-flex;
align-items: center;
padding: 0.375rem 1rem;
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--fg-3);
background-color: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-pill);
}
/* ----------------------------------------------------------------
BUTTONS — production .btn-primary / .btn-ghost
Pill shape, cream CTA, ghost outline. Press = scale(0.97).
---------------------------------------------------------------- */
.btn-primary, .btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.625rem 1.25rem;
font-family: var(--font-sans);
font-weight: 500;
font-size: 0.8125rem;
border-radius: var(--radius-pill);
min-height: var(--touch-target-min);
transition: all 200ms ease-out;
cursor: pointer;
border: 1px solid transparent;
-webkit-tap-highlight-color: transparent;
}
@media (min-width: 640px) {
.btn-primary, .btn-ghost {
padding: 0.75rem 1.5rem;
font-size: 0.875rem;
}
}
.btn-primary {
background-color: var(--cta-fill);
color: var(--cta-text);
}
.btn-primary:hover { background-color: var(--cta-fill-hi); transform: scale(1.02); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-ghost {
border-color: rgba(255, 255, 255, 0.2);
color: #fff;
background-color: transparent;
}
.btn-ghost:hover {
border-color: rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.05);
}
.btn-ghost:active {
transform: scale(0.97);
border-color: rgba(255, 255, 255, 0.5);
background-color: rgba(255, 255, 255, 0.1);
}
.btn-ghost:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* ----------------------------------------------------------------
GLASS CARD — production primitive (LeadGenOS .card-glass).
Use for atmospheric overlays, modals, product feature panels.
Do NOT use on case-study or hero cards (those stay solid hairline).
---------------------------------------------------------------- */
.card-glass {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-card);
transition: all 200ms ease;
}
.card-glass:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.12);
}
.card-dark {
background-color: var(--node-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card);
}
/* ----------------------------------------------------------------
SECTION PADDING — production .section-padding
---------------------------------------------------------------- */
.section-padding {
padding-top: 5rem;
padding-bottom: 5rem;
}
@media (min-width: 768px) { .section-padding { padding-top: 6.5rem; padding-bottom: 6.5rem; } }
@media (min-width: 1024px){ .section-padding { padding-top: 8rem; padding-bottom: 8rem; } }
/* ----------------------------------------------------------------
SEMANTIC TYPE — drop-in classes
---------------------------------------------------------------- */
.display-2xl, .h-display-2xl {
font-family: var(--font-display);
font-size: var(--fs-display-2xl);
font-weight: 700;
line-height: var(--lh-tight);
letter-spacing: var(--tracking-display);
text-wrap: balance;
}
.display-xl {
font-family: var(--font-display);
font-size: var(--fs-display-xl);
font-weight: 700;
line-height: var(--lh-tight);
letter-spacing: var(--tracking-display);
text-wrap: balance;
}
.display-lg {
font-family: var(--font-display);
font-size: var(--fs-display-lg);
font-weight: 700;
line-height: var(--lh-snug);
letter-spacing: var(--tracking-display);
text-wrap: balance;
}
.hero-title {
font-family: var(--font-display);
font-size: var(--fs-hero);
font-weight: 700;
line-height: var(--lh-snug);
letter-spacing: var(--tracking-display);
text-wrap: balance;
}
.section-title {
font-family: var(--font-display);
font-size: var(--fs-section);
font-weight: 700;
line-height: var(--lh-snug);
letter-spacing: var(--tracking-heading);
text-wrap: balance;
}
h1, .h1 {
font-family: var(--font-display);
font-size: var(--fs-h1);
font-weight: 700;
line-height: var(--lh-snug);
letter-spacing: var(--tracking-heading);
margin: 0;
text-wrap: balance;
}
h2, .h2 {
font-family: var(--font-display);
font-size: var(--fs-h2);
font-weight: 700;
line-height: var(--lh-snug);
letter-spacing: var(--tracking-heading);
margin: 0;
}
h3, .h3 {
font-family: var(--font-sans);
font-size: var(--fs-h3);
font-weight: 600;
line-height: 1.3;
letter-spacing: var(--tracking-heading);
margin: 0;
}
h4, .h4 {
font-family: var(--font-sans);
font-size: var(--fs-h4);
font-weight: 500;
line-height: 1.35;
margin: 0;
}
p, .body { font-size: var(--fs-body); line-height: var(--lh-base); margin: 0; }
.body-lg { font-size: var(--fs-body-lg); line-height: 1.55; }
.body-sm { font-size: var(--fs-body-sm); line-height: 1.5; }
.caption { font-size: var(--fs-caption); line-height: 1.4; color: var(--fg-3); }
/* "Eyebrow" — small, mono, tracked */
.eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow);
color: var(--fg-3);
}
code, pre, .mono {
font-family: var(--font-mono);
font-size: 0.92em;
font-feature-settings: "calt" 0;
}
code {
background: var(--bg-raised);
padding: 0.12em 0.4em;
border-radius: var(--radius-1);
border: 1px solid var(--border-subtle);
}
a { color: inherit; text-decoration: none; }
a.link {
color: var(--fg-1);
border-bottom: 1px solid currentColor;
transition: color var(--dur-fast) var(--ease-standard);
}
a.link:hover { color: var(--fg-accent); }
hr { border: 0; border-top: var(--hairline); margin: var(--space-8) 0; }
/* ----------------------------------------------------------------
EDITORIAL DISPLAY — italic moment, used in carousels & campaign work.
---------------------------------------------------------------- */
.serif-italic, .accent-italic {
font-style: italic;
font-weight: 900;
font-family: var(--font-editorial);
}
/* ----------------------------------------------------------------
REDUCED MOTION — production discipline
---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.btn-primary, .btn-ghost, .card-glass, .section-divider {
transition: none;
animation: none;
}
.btn-primary:hover, .btn-primary:active,
.btn-ghost:active { transform: none; }
}