/* ============================================================ NABUX STORE — Colors & Type Foundations Source of truth: NabuxAi/Nabux.Store → app/globals.css Dark premium digital marketplace. Neon-lime + cyan accents. Primary language: English. Also Arabic (RTL) & Persian. ============================================================ */ /* Inter is the brand typeface (used in app/globals.css font stack). */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Vazirmatn:wght@400;500;600;700;800;900&family=Tajawal:wght@400;500;700;800;900&display=swap'); :root { /* ---------- BASE COLORS (raw, from globals.css :root) ---------- */ --bg: #070a12; /* near-black navy — page background */ --panel: #101521; /* solid card / category chip surface */ --panel-soft: #151c2b; /* slightly lifted panel */ --text: #f8fafc; /* primary foreground */ --muted: #9aa6b2; /* secondary / supporting text */ --line: rgba(255, 255, 255, 0.10); /* hairline borders & dividers */ /* Brand accents */ --brand: #b7ff3c; /* neon lime — primary CTA, prices, eyebrows */ --brand-2: #00d4ff; /* electric cyan — secondary accent, category labels */ --danger: #ff4d7d; /* hot pink-red — discounts, disputes, destructive */ --on-brand: #07100a; /* near-black ink placed ON lime/cyan surfaces */ /* ---------- TRANSLUCENT SURFACE SCALE (glassmorphism) ---------- */ --surface-1: rgba(255, 255, 255, 0.06); /* panels, form cards, tables */ --surface-2: rgba(255, 255, 255, 0.07); /* default input fill */ --surface-3: rgba(255, 255, 255, 0.08); /* ghost button, sort chips */ --surface-4: rgba(255, 255, 255, 0.09); /* search box fill */ --surface-5: rgba(255, 255, 255, 0.12); /* hero panel top stop */ /* Tinted state surfaces */ --brand-tint: rgba(183, 255, 60, 0.12); /* status pill bg */ --brand-border: rgba(183, 255, 60, 0.35); /* card hover border */ --danger-tint: rgba(255, 77, 125, 0.14); /* danger button bg */ --danger-border: rgba(255, 77, 125, 0.35); /* danger button border */ /* ---------- SIGNATURE GRADIENTS ---------- */ /* Ambient page glow — applied to , two soft radial lights */ --page-glow: radial-gradient(circle at 20% 0%, rgba(183,255,60,.18), transparent 28%), radial-gradient(circle at 80% 10%, rgba(0,212,255,.14), transparent 26%); /* Diagonal lime→cyan brand gradient — logo mark, summary art, CTAs-as-fill */ --grad-brand: linear-gradient(135deg, var(--brand), var(--brand-2)); /* Product/media art tile — translucent brand gradient over a dark base */ --grad-art: linear-gradient(135deg, rgba(183,255,60,.28), rgba(0,212,255,.16)), #0b0f18; /* Hero glass panel fill — vertical white sheen */ --grad-glass: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)); /* ---------- TYPE: FAMILY ---------- */ --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* ---------- TYPE: WEIGHTS (this brand runs heavy) ---------- */ --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-cta: 750; /* button label weight */ --w-heavy: 800; /* eyebrows, section links */ --w-brand: 850; /* logo wordmark */ --w-black: 900; /* prices, big numerals */ /* ---------- TYPE: TRACKING ---------- */ --track-display: -.07em; /* hero h1 — very tight */ --track-head: -.04em; /* section h2 */ --track-eyebrow: .12em; /* uppercase eyebrow */ --track-label: .10em; /* category label */ /* ---------- RADII ---------- */ --r-sm: 12px; /* chips, logo mark, small tiles */ --r-md: 14px; /* buttons, inputs */ --r-lg: 16px; /* detail rows */ --r-xl: 18px; /* summary art */ --r-2xl: 22px; /* card art, search box */ --r-3xl: 26px; /* panels, form cards */ --r-card: 28px; /* product cards, seller table */ --r-hero: 34px; /* hero panel, product media */ --r-pill: 999px; /* badges, status pills */ /* ---------- SHADOWS ---------- */ --shadow-float: 0 24px 80px rgba(0, 0, 0, .35); /* hero panel lift */ /* ---------- BLUR ---------- */ --blur-bar: blur(20px); /* sticky topbar backdrop */ /* ---------- LAYOUT ---------- */ --page-pad-x: 5vw; /* horizontal page gutter used everywhere */ } /* ============================================================ SEMANTIC TYPE ROLES Apply as classes or copy the declarations into components. ============================================================ */ .nx-eyebrow { color: var(--brand); text-transform: uppercase; letter-spacing: var(--track-eyebrow); font-size: 12px; font-weight: var(--w-heavy); } .nx-h1 { font-size: clamp(44px, 6vw, 82px); line-height: .93; letter-spacing: var(--track-display); font-weight: var(--w-bold); margin: 12px 0 20px; } /* Product detail page hero is slightly smaller */ .nx-h1--product { font-size: clamp(40px, 5vw, 68px); } .nx-h2 { font-size: 34px; letter-spacing: var(--track-head); font-weight: var(--w-bold); margin: 0; } .nx-h3 { font-size: 22px; letter-spacing: -.03em; font-weight: var(--w-bold); } .nx-lead { /* hero / section intro paragraph */ color: var(--muted); font-size: 18px; line-height: 1.7; max-width: 760px; } .nx-body { color: var(--text); font-size: 16px; line-height: 1.6; } .nx-muted { color: var(--muted); line-height: 1.6; } .nx-label { /* category / kicker label */ color: var(--brand-2); font-size: 12px; text-transform: uppercase; letter-spacing: var(--track-label); font-weight: var(--w-heavy); } .nx-price { font-weight: var(--w-black); font-size: 24px; } .nx-price--lime { color: var(--brand); } .nx-meta { /* small supporting line under rows */ color: var(--muted); font-size: 14px; }