/* ============================================================ PIPELINE LABS — DARK TOKENS (pl-dark.css) Rounds 1–4 locked 2026-09-06/07 with the owner: Ground B dark #0b0b0c ground · cream #efe6df text Accent B oxblood → red #3b0a17 → #7a1230 → #b8123f Type D Space Grotesk (UI + headlines) · Space Mono (chips, labels) Depth B Dimensional Layering + grain Radius A tight: chip 4 · tile 8 · card 12 · button 8 (no pills) Borders B alpha hairline 12% (18% on hover/active) Grain C 8% on the backdrop only Chrome B thin 6px bar behind the light card Scale A compact: h1 clamp(32–44) · h2 28 · sub 15 Casing C sentence case everywhere; NO uppercase; mono only for numbers / data values Numerals A Space Grotesk 28, tabular figures Density C explanatory: labels ≤ 6 words · subs ≤ 40 words · one clause of explanation per idea, spelled out Icons C duotone: 1.5px line in accent + 22% accent fill, inside a 30px tinted box Motion A snappy: 150–250 ms UI transitions, ease-out; narrative loops keep their own pace Glow C bloom on the orchid hub, the pulses, AND primary buttons (colored shadow); tiles carry a faint accent halo Reduced motion A freeze everything when prefers-reduced-motion is on: no animation, no transition, canvases draw one frame Rebrand by changing the --accent* block. Fonts load via the Google Fonts link in (see any draft page) or the @import below. Lift verbatim to capabilities/web-funnels/library/tokens/ when the first lego is extracted. ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap"); :root{ color-scheme:dark; /* ---- type ---- */ --sans:"Space Grotesk",system-ui,-apple-system,sans-serif; --mono:"Space Mono",ui-monospace,Menlo,monospace; --fs-eyebrow:13px; --fs-body:15px; --fs-lead:16px; --fs-h3:20px; --fs-h2:28px; --fs-h1:clamp(32px,3.4vw,44px); --fs-numeral:28px; --track-head:-.03em; --track-label:0; /* ---- surfaces (ground + 4 steps, ~+6 L each) ---- */ --surface-0:#0b0b0c; --surface-1:#101012; --surface-2:#161619; --surface-3:#1d1d21; --surface-4:#26262b; --ground-lift:radial-gradient(900px 640px at var(--gx,72%) var(--gy,48%), #17171a 0%, var(--surface-0) 70%); --surface-grad:linear-gradient(180deg, var(--surface-3), var(--surface-2)); --surface-grad-hi:linear-gradient(180deg, var(--surface-4), var(--surface-3)); /* ---- ink ---- */ --cream:#efe6df; --muted:#8f8a84; --dim:#5d5a56; /* ---- hairlines as alpha (edge light), never drawn lines ---- */ --hairline:rgba(255,255,255,.12); --hairline-2:rgba(255,255,255,.18); /* ---- light from the top ---- */ --edge-top:inset 0 1px 0 rgba(255,255,255,.07); --edge-top-hi:inset 0 1px 0 rgba(255,255,255,.12); --shade-bottom:inset 0 -1px 0 rgba(0,0,0,.55); --shade-well:inset 0 -14px 28px rgba(0,0,0,.28); --well:inset 0 1px 2px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.35); /* ---- elevation for a near-black ground (contact + ambient) ---- */ --elevation-1:0 1px 1px rgba(0,0,0,.50), 0 2px 6px rgba(0,0,0,.40); --elevation-2:0 2px 3px rgba(0,0,0,.50), 0 10px 24px rgba(0,0,0,.45); --elevation-3:0 4px 6px rgba(0,0,0,.50), 0 20px 48px rgba(0,0,0,.55); --elevation-4:0 8px 12px rgba(0,0,0,.50), 0 36px 90px rgba(0,0,0,.65); /* ---- accent: oxblood → red (B). Bloom is for the accent only ---- */ --accent:#7a1230; --accent-deep:#3b0a17; --accent-hi:#b8123f; --accent-rgb:122,18,48; --accent-hi-rgb:184,18,63; --accent-grad:linear-gradient(135deg, #3b0a17 0%, #7a1230 55%, #b8123f 100%); --bloom-sm:0 0 0 4px rgba(var(--accent-hi-rgb),.12), 0 0 18px rgba(var(--accent-hi-rgb),.35); --bloom-lg:0 0 0 6px rgba(var(--accent-hi-rgb),.14), 0 0 40px rgba(var(--accent-hi-rgb),.55), 0 0 90px rgba(var(--accent-hi-rgb),.22); --bloom-ambient:radial-gradient(180px 180px at var(--bx,50%) var(--by,50%), rgba(var(--accent-hi-rgb),.14), rgba(var(--accent-hi-rgb),0) 70%); /* ---- paper: the one light surface ---- */ --paper:#f3ede4; --paper-top:#f9f4ed; --paper-2:#e7dfd4; --ink:#151517; --ink-2:#6a655f; --ink-line:rgba(21,21,23,.09); --paper-grad:linear-gradient(180deg, var(--paper-top), var(--paper)); --edge-top-paper:inset 0 1px 0 rgba(255,255,255,.80); --elevation-paper-1:0 1px 2px rgba(21,21,23,.06); /* ---- window chrome bar (peeks above the one light surface) ---- */ --chrome:linear-gradient(180deg,#4d4d54,#323237); --chrome-h:6px; --chrome-inset:12px; /* ---- grain: one static tile, backdrop only, never over text ---- */ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .33 .33 .33 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); --grain-opacity:.08; /* ---- radius ladder (Round 2, A tight): inner = outer − gap; no pills ---- */ --r-chip:4px; --r-inner:6px; --r-tile:8px; --r-card:12px; --r-lead:12px; --r-paper:14px; --r-btn:8px; --r-pill:8px; /* ---- motion ---- */ --ease:cubic-bezier(.2,.9,.2,1); --t-fast:.15s; --t-base:.22s; --t-slow:.35s; /* motion A: snappy */ --halo:0 0 24px rgba(var(--accent-hi-rgb),.10); /* glow C: faint accent halo on tiles */ --maxw:1240px; } /* ---- base ---- */ *{box-sizing:border-box} html,body{margin:0;background:var(--surface-0);color:var(--cream);font-family:var(--sans);font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} h1,h2,h3{font-family:var(--sans);font-weight:600;letter-spacing:var(--track-head);line-height:1.05;margin:0} h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)} h1 em{display:block;font-style:normal;font-weight:400;opacity:.72} /* the second headline line: same face, lighter */ /* ---- primitives ---- */ /* connector: a translucent pipe, never a dashed line. On SVG paths: three strokes (body 10 / core 2.5 / lit core) — see hero draft */ .pl-pipe{position:relative;height:10px;border-radius:5px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035) 55%,rgba(0,0,0,.28));box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.35)} .pl-pipe::after{content:"";position:absolute;left:6px;right:6px;top:4px;height:2px;border-radius:1px;background:rgba(255,255,255,.13)} .pl-pulse{width:26px;height:10px;border-radius:5px;background:radial-gradient(ellipse at 50% 50%,rgba(239,230,223,.95),rgba(var(--accent-hi-rgb),.55) 45%,rgba(var(--accent-hi-rgb),0) 75%);box-shadow:0 0 16px 3px rgba(var(--accent-hi-rgb),.5)} .pl-grain{position:relative} .pl-grain::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--grain) 0 0/200px 200px repeat;opacity:var(--grain-opacity)} .pl-grain>*{position:relative;z-index:1} .pl-eyebrow{font:500 var(--fs-eyebrow)/1.3 var(--sans);letter-spacing:0;color:var(--muted);text-transform:none} /* casing C: sentence case, sans */ .pl-data{font-family:var(--mono);font-variant-numeric:tabular-nums} /* casing C: mono is for numbers and data values only */ .pl-chip{display:inline-flex;align-items:center;gap:7px;font:500 11px/1 var(--mono);letter-spacing:.02em;text-transform:none;background:rgba(var(--accent-hi-rgb),.14);color:#e0526f;border:1px solid rgba(var(--accent-hi-rgb),.45);border-radius:var(--r-chip);padding:6px 9px} .pl-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent-grad);color:#fff;border-radius:var(--r-btn);padding:13px 22px;font-weight:600;font-size:15px;box-shadow:0 12px 30px rgba(var(--accent-hi-rgb),.32),inset 0 1px 0 rgba(255,255,255,.18);transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)} .pl-btn:hover{transform:translateY(-1px);box-shadow:0 16px 36px rgba(var(--accent-hi-rgb),.42),inset 0 1px 0 rgba(255,255,255,.22)} .pl-card{background:var(--surface-grad);border:1px solid var(--hairline);border-radius:var(--r-tile);box-shadow:var(--edge-top),var(--elevation-1),var(--halo);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)} .pl-card:hover{border-color:var(--hairline-2);box-shadow:var(--edge-top-hi),var(--elevation-2),var(--halo);transform:translateY(-2px)} .pl-card--raised{box-shadow:var(--edge-top-hi),var(--elevation-2)} .pl-well{background:var(--surface-1);box-shadow:var(--well)} .pl-tile{padding:16px 16px 14px} .pl-tile .k{font-size:12.5px;color:var(--muted)} .pl-tile .n{font-size:var(--fs-numeral);font-weight:600;letter-spacing:-.035em;margin-top:10px;font-variant-numeric:tabular-nums} .pl-tile .m{font-size:11.5px;color:var(--muted);margin-top:4px} .pl-paper{background:var(--paper-grad);color:var(--ink);border-radius:var(--r-paper);box-shadow:var(--edge-top-paper),inset 0 -1px 0 rgba(0,0,0,.06),var(--elevation-4)} .pl-chrome{position:relative} .pl-chrome::before{content:"";position:absolute;left:var(--chrome-inset);right:var(--chrome-inset);top:calc(-1*var(--chrome-h));height:var(--chrome-h);border-radius:var(--chrome-h) var(--chrome-h) 0 0;background:var(--chrome);box-shadow:inset 0 1px 0 rgba(255,255,255,.10)} .pl-ico{width:30px;height:30px;display:inline-grid;place-items:center;color:var(--accent-hi);flex:none;border-radius:var(--r-inner);background:rgba(var(--accent-hi-rgb),.12);border:1px solid rgba(var(--accent-hi-rgb),.30)} /* icons C: duotone in a tinted box */ .pl-ico svg{width:18px;height:18px;fill:rgba(var(--accent-hi-rgb),.22);stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} @media (max-width:600px){:root{ --elevation-3:0 3px 5px rgba(0,0,0,.5), 0 14px 30px rgba(0,0,0,.55); --elevation-4:0 6px 10px rgba(0,0,0,.5), 0 20px 44px rgba(0,0,0,.60)}} /* reduced motion A: freeze everything. Pages must also check matchMedia('(prefers-reduced-motion: reduce)') and draw canvases once. */ @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* Complete assistive text without duplicating the visible animation. */ .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}