/* ════════════════════════════════════════════════════════════════════ MeshKore — design system (mc-ds) ──────────────────────────────────────────────────────────────────── ONE global layer, loaded after tailwind.css on every page (legacy + native). It does three things: 1. Tokens — palette, module accents, fonts, radii, the fixed-nav height (so heroes always clear the header). 2. A unified HERO system with three canonical formats: .mc-hero.f-statement title + sub (1) .mc-hero.f-action title + sub + input/prompt (2) .mc-hero.f-gateway title + sub + CTA buttons (3) 3. Shared primitives — eyebrow, gradient text, buttons, cards, pills, icon chips — so every page reads like one designer made it. Module accent is set on the hero (or a section) via .mod-* — it recolors the gradient, glow, eyebrow, focus ring and primary button. ════════════════════════════════════════════════════════════════════ */ :root { --mc-emerald:#34d399; --mc-sky:#38bdf8; --mc-violet:#a78bfa; --mc-amber:#fbbf24; --mc-pink:#f472b6; /* live accent (defaults to the network = emerald) */ --mc-accent: var(--mc-emerald); --mc-accent-2: var(--mc-sky); --mc-accent-rgb: 52,211,153; --mc-ink:#e8eef5; --mc-mut:#9aa7b6; --mc-dim:#62707f; --mc-line:rgba(255,255,255,.08); --mc-line-2:rgba(255,255,255,.14); --mc-card:rgba(255,255,255,.025); --mc-card-2:rgba(255,255,255,.045); --mc-font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --mc-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; --mc-r:14px; /* default radius */ --mc-nav-h:64px; /* mobile: only the top bar is fixed */ } @media (min-width:768px){ :root{ --mc-nav-h:112px; } } /* + contextual row */ /* ── module accents ────────────────────────────────────────────────── Two ways to apply: a .mod-* CLASS on a wrapper (native pages set it in markup), OR a [data-mod] attribute on that _nav.js stamps from the route — so every legacy page inherits its section's accent with zero markup edits. Network=emerald · Interop=sky · Tooling=violet · Engine=amber */ .mod-network, [data-mod="network"] { --mc-accent:#34d399; --mc-accent-2:#38bdf8; --mc-accent-rgb:52,211,153; } .mod-interop, [data-mod="interop"] { --mc-accent:#38bdf8; --mc-accent-2:#34d399; --mc-accent-rgb:56,189,248; } .mod-tooling, [data-mod="tooling"] { --mc-accent:#a78bfa; --mc-accent-2:#38bdf8; --mc-accent-rgb:167,139,250; } .mod-engine, [data-mod="engine"] { --mc-accent:#fbbf24; --mc-accent-2:#f472b6; --mc-accent-rgb:251,191,36; } .mod-supply { --mc-accent:#34d399; --mc-accent-2:#a78bfa; --mc-accent-rgb:52,211,153; } /* Unify the TWO legacy accent-text classes (.gradient-text on home/directory/ oracle, .grad on architect/standard) onto the live module accent — so the accent word recolors per section automatically and reads as one system. */ .gradient-text, .grad { background:linear-gradient(110deg,var(--mc-accent),var(--mc-accent-2)) !important; -webkit-background-clip:text !important;background-clip:text !important; -webkit-text-fill-color:transparent !important;color:transparent !important; } /* ── site-wide passive polish (improves even untouched pages) ─────── */ ::selection { background:rgba(var(--mc-accent-rgb),.25); color:#fff; } html { scroll-behavior:smooth; } * { scrollbar-color:rgba(255,255,255,.16) transparent; } *::-webkit-scrollbar { width:10px; height:10px; } *::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); border-radius:8px; border:2px solid transparent; background-clip:content-box; } *::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.26); background-clip:content-box; } :focus-visible { outline:2px solid rgba(var(--mc-accent-rgb),.6); outline-offset:2px; border-radius:4px; } /* ════════════ HERO SYSTEM ════════════ */ .mc-hero{ position:relative; max-width:var(--mc-hero-w,1280px); /* = Tailwind max-w-7xl, the site grid */ margin:0 auto; padding:calc(var(--mc-nav-h) + 40px) 24px 26px; /* px-6 to match every page */ color:var(--mc-ink); letter-spacing:-.01em; isolation:isolate; } .mc-hero.mc-center{ text-align:center; } .mc-hero.mc-center .mc-sub{ margin-left:auto; margin-right:auto; } .mc-hero.mc-center .mc-actions, .mc-hero.mc-center .mc-prompt{ justify-content:center; margin-left:auto; margin-right:auto; } /* ambient accent glow behind the title — the "crypto / modern dark" wash */ .mc-hero::before{ content:"";position:absolute;z-index:-1;left:50%;top:calc(var(--mc-nav-h) - 10px); width:min(820px,92%);height:340px;transform:translateX(-50%); background:radial-gradient(60% 60% at 50% 30%,rgba(var(--mc-accent-rgb),.16),transparent 70%); pointer-events:none;filter:blur(6px); } .mc-eyebrow{ display:inline-flex;align-items:center;gap:8px; font-family:var(--mc-mono);font-size:11.5px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--mc-accent); margin-bottom:16px; } .mc-eyebrow .dot{ width:6px;height:6px;border-radius:50%;background:var(--mc-accent); box-shadow:0 0 0 4px rgba(var(--mc-accent-rgb),.18); } .mc-h1{ font-family:var(--mc-font); font-size:clamp(32px,5.6vw,56px);line-height:1.04; letter-spacing:-.035em;font-weight:800;margin:0 0 16px;color:#fff; } .mc-h1 .mc-grad,.mc-grad{ background:linear-gradient(110deg,var(--mc-accent),var(--mc-accent-2)); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .mc-sub{ font-size:clamp(16.5px,2.2vw,20px);line-height:1.55;color:var(--mc-mut); max-width:680px;margin:0;font-weight:400; } .mc-sub strong{ color:var(--mc-ink);font-weight:600; } /* format 3 — gateway CTAs */ .mc-actions{ display:flex;flex-wrap:wrap;gap:12px;margin-top:30px; } .mc-btn{ display:inline-flex;align-items:center;gap:8px; padding:12px 22px;border-radius:12px;font-weight:600;font-size:15px; text-decoration:none;transition:transform .12s,filter .12s,border-color .12s,background .12s; cursor:pointer;white-space:nowrap; } .mc-btn svg{ width:16px;height:16px; } .mc-btn.p{ background:var(--mc-accent);color:#06140d;border:1px solid transparent; box-shadow:0 8px 30px -10px rgba(var(--mc-accent-rgb),.6); } .mc-btn.p:hover{ filter:brightness(1.07);transform:translateY(-1px); } .mc-btn.s{ background:var(--mc-card);color:var(--mc-ink);border:1px solid var(--mc-line-2); } .mc-btn.s:hover{ border-color:var(--mc-accent);transform:translateY(-1px); } /* format 2 — action / prompt box */ .mc-prompt{ display:flex;gap:10px;align-items:flex-end;width:100%;max-width:680px; margin:28px 0 0;background:var(--mc-card);border:1px solid var(--mc-line-2); border-radius:16px;padding:10px 10px 10px 16px; box-shadow:0 20px 60px -30px rgba(var(--mc-accent-rgb),.4); } .mc-prompt:focus-within{ border-color:rgba(var(--mc-accent-rgb),.55); } /* ════════════ shared primitives ════════════ */ .mc-card{ background:var(--mc-card);border:1px solid var(--mc-line); border-radius:var(--mc-r);padding:18px 20px; transition:border-color .15s,background .15s,transform .15s; } .mc-card:hover{ border-color:rgba(var(--mc-accent-rgb),.4);background:var(--mc-card-2);transform:translateY(-2px); } .mc-pill{ display:inline-flex;align-items:center;gap:7px;font-family:var(--mc-mono); font-size:11.5px;color:var(--mc-mut);padding:4px 11px;border-radius:999px; background:var(--mc-card);border:1px solid var(--mc-line); } /* silhouette icon chip — thin stroke over transparent, accent-tinted */ .mc-ico{ width:40px;height:40px;border-radius:11px;display:inline-flex; align-items:center;justify-content:center; background:rgba(var(--mc-accent-rgb),.08);border:1px solid rgba(var(--mc-accent-rgb),.22); color:var(--mc-accent); } .mc-ico svg{ width:20px;height:20px;stroke-width:1.6; } /* section eyebrow used mid-page (matches hero eyebrow but quieter) */ .mc-keyline{ height:1px;background:linear-gradient(90deg,transparent,var(--mc-line-2),transparent);border:0;margin:0; } /* ════════════ FOOTER ════════════ Self-contained CSS grid — does NOT depend on Tailwind utilities, because the site's tailwind.css is a PURGED static build and classes the old site never used (md:grid-cols-6, col-span-*) simply aren't in it → the grid collapsed. */ .mc-footer{ border-top:1px solid var(--mc-line);background:#0a0d12;color:var(--mc-mut); } .mc-footer .in{ max-width:1280px;margin:0 auto;padding:56px 24px 38px; } .mc-footer .top{ display:grid;grid-template-columns:minmax(230px,1.1fr) 3fr;gap:48px;align-items:start; } @media (max-width:820px){ .mc-footer .top{ grid-template-columns:1fr;gap:36px; } } .mc-footer .cols{ display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:30px 24px; } @media (max-width:820px){ .mc-footer .cols{ grid-template-columns:repeat(2,1fr);gap:28px; } } .mc-footer .brand-row{ display:inline-flex;align-items:center;gap:9px;margin-bottom:14px; } .mc-footer .brand-row .mk{ width:30px;height:30px;border-radius:9px;background:rgba(52,211,153,.16); display:inline-flex;align-items:center;justify-content:center;color:#34d399; } .mc-footer .brand-row .nm{ font-size:16px;font-weight:700;letter-spacing:-.01em;color:#fff; } .mc-footer .tag{ font-size:13px;line-height:1.6;color:var(--mc-dim);max-width:280px;margin:0 0 14px; } .mc-footer .social{ display:flex;gap:16px;font-size:13px; } .mc-footer .social a{ color:var(--mc-dim); } .mc-footer h4{ font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--mc-dim); font-weight:600;margin:0 0 14px; } .mc-footer .cols a{ display:block;color:var(--mc-mut);text-decoration:none;font-size:14px;padding:4px 0; } .mc-footer a:hover{ color:var(--mc-accent); } .mc-footer .bottom{ max-width:1280px;margin:0 auto;padding:18px 24px;border-top:1px solid var(--mc-line); display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:var(--mc-dim); } .mc-footer .bottom .lg{ display:flex;gap:18px; } /* glow-only helper — for LEGACY heroes that keep their own
nav clearance, so they want the ambient accent wash WITHOUT mc-hero's padding. Wrap the hero block in `.mod-* .mc-glow` and swap its h1/eyebrow/sub to mc-* */ .mc-glow{ position:relative;isolation:isolate; } .mc-glow::before{ content:"";position:absolute;z-index:-1;left:50%;top:-30px; width:min(840px,94%);height:330px;transform:translateX(-50%); background:radial-gradient(58% 58% at 50% 32%,rgba(var(--mc-accent-rgb),.15),transparent 70%); pointer-events:none;filter:blur(4px); }