/* * New Black — Design Tokens * Source of truth: newblack.lv production stylesheet (_variables.scss + Bootstrap 5 overrides). * Drop this file into any project and reference tokens via var(--nb-*). */ :root { /* ------------------------------------------------------------------ * Color — core palette * The palette is intentionally small. Black + white do the heavy * lifting; yellow is the *only* brand accent and should feel rare. * Red/green are reserved for functional states (error, success). * ------------------------------------------------------------------ */ --nb-color-black: #1A1A1A; /* primary text, primary surface on light bg */ --nb-color-dark: #5C5C5C; /* secondary text, muted copy */ --nb-color-gray: #DCDCDC; /* borders, dividers, subtle separators */ --nb-color-white: #FFFFFF; --nb-color-yellow: #FFF056; /* THE brand accent — underlines, highlights, CTA surface */ --nb-color-red: #EF2F2F; /* error / destructive only */ --nb-color-green: #21EC72; /* success only */ /* Opacity tokens — explicit in the Figma library as Opacity/*. * Use these for borders and dividers instead of hand-writing rgba values. * They're the "subtle line" that separates elements without adding visual weight. */ --nb-opacity-border-on-light: rgba(0, 0, 0, 0.1); /* Figma: Opacity/LightBorderDark — input borders, subtle dividers on light bg */ --nb-opacity-border-on-dark: rgba(255, 255, 255, 0.1); /* Figma: Opacity/WhiteOpacity10 — dividers on dark bg */ /* Section background surfaces (used across the site) * Each surface has a subtle noise-texture pattern overlaid on the base color — * the textures are what give the site its tactile, paper-like quality, don't skip them. * Apply textures via the .nb-surface-{light,dark,bright} utility classes defined below. * Texture url()s are intentionally NOT exposed as --nb-pattern-* custom properties — * see the note above .nb-surface-light for why. */ --nb-surface-light: #FBFBFB; /* default light section base color */ --nb-surface-dark: #111111; /* dark section base (near-black, slightly deeper than --nb-color-black) */ --nb-surface-bright: var(--nb-color-yellow); /* SPOTLIGHT surface — used 0 or 1 times per page to flag content that needs emphasis. Do NOT put this in the light/dark alternation cadence. */ /* Semantic aliases — prefer these in product code */ --nb-bg: var(--nb-color-white); --nb-fg: var(--nb-color-black); --nb-fg-muted: var(--nb-color-dark); --nb-border: var(--nb-color-gray); --nb-accent: var(--nb-color-yellow); --nb-link: var(--nb-color-red); /* inherited from Bootstrap base; prefer underlined black for inline links */ --nb-danger: var(--nb-color-red); --nb-success: var(--nb-color-green); /* List marker color — defaults to black on light backgrounds. * IMPORTANT: yellow bullets are unreadable on light backgrounds. The .nb-dark * override below flips this to yellow automatically when inside a dark section. */ --nb-list-marker: var(--nb-color-black); /* ------------------------------------------------------------------ * Typography * Inter is the system face. Indie Flower is the handwritten accent — * use *sparingly* for a single word, signature, or margin note. * Base weight is 500 (not 400) — this is a deliberate choice that * gives body copy a slightly more confident presence. * ------------------------------------------------------------------ */ --nb-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --nb-font-handwritten: "Indie Flower", "Comic Sans MS", cursive; --nb-font-weight-regular: 500; /* base body weight */ --nb-font-weight-semibold: 600; /* headings, buttons, nav */ --nb-font-weight-bold: 700; /* strong emphasis, nav items */ --nb-font-size-base: 1rem; /* 16px */ --nb-line-height-base: 1.5; /* Heading scale (mobile → desktop ranges; use the fluid/responsive variants in real UI) * Two "display" sizes sit above H1 for page titles that are meant to be huge. * In Figma they are named HEADING (160px) and H1 (90px) — reserve these for hero moments. * Tracking is uniformly ~-2% (≈ -0.02em) on headings; keep it consistent. */ --nb-font-size-display: 10rem; /* 160px — giant page titles ("Express brief", "Our work") */ --nb-font-size-hero: 5.625rem; /* 90px — page H1s inside content pages */ --nb-font-size-h1: 5.5rem; /* 88px — homepage hero, scales down to 26px on mobile */ --nb-font-size-h2: 3.5rem; /* 56px */ --nb-font-size-h3: 2rem; /* 32px — used for numbered section titles */ --nb-font-size-h4: 1.625rem; /* 26px */ --nb-font-size-h5: 1.25rem; /* 20px */ --nb-font-size-h6: 1.125rem; /* 18px */ /* Body text scale — named roles from the Figma library. * Each size has a canonical weight; stick to it for consistency. * - medium/semibold pair: confident callouts and labels * - regular weights on -small/-micro/-tiny: supporting copy, meta info */ --nb-font-size-body-medium: 1.25rem; /* 20px, weight 600 — Text-Medium: leading callouts, emphasized paragraphs */ --nb-font-size-body-small: 1.125rem; /* 18px, weight 500 — Text-Small: default body copy in rich content */ --nb-font-size-body-micro: 1rem; /* 16px, weight 500 — Text-Micro: base UI text, form hints */ --nb-font-size-body-tiny: 0.875rem; /* 14px, weight 500 — Text-Tiny: meta, captions, footer copy */ --nb-font-size-nav: 1.25rem; /* 20px, weight 700 — Nav-Item: top-nav links (note: Bold, not Semi Bold) */ --nb-line-height-heading: 1.2; --nb-line-height-display: 1.0; /* the giant display heading runs tight — 1.0, not 1.2 */ --nb-letter-spacing-heading: -0.02em; /* tight, confident headings (all sizes, not just big ones) */ /* ------------------------------------------------------------------ * Spacing scale (10px base — not 4/8px) * This is intentional: the site breathes on 10px rhythm. * ------------------------------------------------------------------ */ --nb-space-0: 0; --nb-space-1: 10px; --nb-space-2: 20px; --nb-space-3: 30px; --nb-space-4: 40px; --nb-space-5: 50px; --nb-space-6: 60px; --nb-space-8: 80px; --nb-space-10: 100px; --nb-grid-gutter: 40px; /* ------------------------------------------------------------------ * Radius * Buttons are *very* round (40px, essentially pill-shaped on normal text). * Cards and inputs stay soft but not pillowy. * ------------------------------------------------------------------ */ --nb-radius-sm: 4px; --nb-radius-md: 8px; --nb-radius-lg: 16px; --nb-radius-xl: 32px; --nb-radius-pill: 40px; /* buttons — the signature shape */ --nb-radius-full: 9999px; /* ------------------------------------------------------------------ * Buttons — primary spec (extracted from Bootstrap overrides) * ------------------------------------------------------------------ */ --nb-btn-padding-y: 14px; --nb-btn-padding-x: 28px; --nb-btn-font-size: 18px; --nb-btn-font-weight: 600; --nb-btn-radius: var(--nb-radius-pill); /* ------------------------------------------------------------------ * Breakpoints (min-width) * Note xxl is 1700px — this site is comfortable on very wide screens. * ------------------------------------------------------------------ */ --nb-bp-sm: 576px; --nb-bp-md: 768px; --nb-bp-lg: 992px; --nb-bp-xl: 1200px; --nb-bp-xxl: 1700px; /* ------------------------------------------------------------------ * Motion * ------------------------------------------------------------------ */ --nb-transition-fast: 0.15s ease-in; --nb-transition-base: 0.3s ease-in-out; --nb-transition-slow: 0.6s cubic-bezier(0.5, 1, 0.89, 1); /* ------------------------------------------------------------------ * Elevation — shadows are rarely used on the site; prefer borders. * Keep shadows subtle when needed. * ------------------------------------------------------------------ */ --nb-shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.06); --nb-shadow-md: 0 4px 12px rgba(26, 26, 26, 0.08); --nb-shadow-lg: 0 12px 32px rgba(26, 26, 26, 0.12); } /* Dark section override — apply .nb-dark to flip surface/foreground */ .nb-dark { --nb-bg: var(--nb-surface-dark); --nb-fg: var(--nb-color-white); --nb-fg-muted: #A0A0A0; --nb-border: rgba(255, 255, 255, 0.1); --nb-list-marker: var(--nb-color-yellow); /* yellow bullets read well on dark backgrounds */ } /* Bright (yellow) section — same idea */ .nb-bright { --nb-bg: var(--nb-surface-bright); --nb-fg: var(--nb-color-black); } /* ------------------------------------------------------------------ * Textured section backgrounds * These are the real "paper" sections from newblack.lv. The noise * texture is subtle but load-bearing — without it, the site feels * flat and generic. Always prefer the textured variant for hero / * landing sections; plain --nb-surface-* is fine for utility UI. * * NEVER extract the pattern url()s into a custom property (e.g. * --nb-pattern-light: url(...)). Browsers resolve url() at the site * where var() is consumed, not where the property is declared — so * a var-wrapped texture url consumed from an inline