/* ============================================================ eComma — design system (single source of truth) Colors = official brand (ecomma.co). Fonts = Space Grotesk / Inter / JetBrains Mono. Two themes: light (:root) + dark ([data-theme="dark"]). Load fonts in the HTML ; link this file once per page. ============================================================ */ /* ---------- THEME: LIGHT (default) ---------- */ :root{ --ink:#0f172a; --ink-soft:#4b5563; --ink-faint:#6b7280; --paper:#f6f9fc; --card:#ffffff; --line:#e5e7eb; --line-soft:#f3f4f6; --mix:#ffffff; --accent:#073877; --on-accent:#ffffff; --ring:rgba(87,202,251,.45); --mark-bg:#d6f0fb; --mark-fg:#073877; --pos:#17a673; --neg:#dc2626; --a0:#64748b; --a1:#0a4a9a; --a2:#0d9488; --a3:#7c3aed; --a4:#d97706; --a5:#db2777; --a6:#073877; --a7:#17a673; --a8:#ea580c; --a9:#9333ea; --radius:10px; } /* ---------- THEME: DARK (Carbon + eComma blue) ---------- */ [data-theme="dark"]{ --ink:#eef2f7; --ink-soft:#a7b0bd; --ink-faint:#6f7884; --paper:#080a0d; --card:#12161c; --line:#242b34; --line-soft:#191e25; --mix:#12161c; --accent:#57cafb; --on-accent:#062032; --ring:rgba(87,202,251,.40); --mark-bg:#57cafb; --mark-fg:#062032; --pos:#34d399; --neg:#f87171; --a0:#94a3b8; --a1:#4aa3ff; --a2:#2dd4bf; --a3:#a78bfa; --a4:#fbbf24; --a5:#f472b6; --a6:#57cafb; --a7:#34d399; --a8:#fb923c; --a9:#c084fc; --radius:10px; } /* ---------- base ---------- */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0; background:var(--paper); color:var(--ink); font-family:"Inter",system-ui,sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; transition:background .2s ease, color .2s ease} .wrap{max-width:1000px; margin:0 auto; padding:48px 24px 80px} .sheet{max-width:760px; margin:0 auto; padding:56px 28px 96px; line-height:1.65} /* ---------- typography / header ---------- */ header{margin-bottom:26px} .eyebrow{font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 10px} h1{font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:40px; letter-spacing:-.02em; margin:0 0 8px; line-height:1.05} h1 .dot{color:var(--accent)} .sub{font-size:16px; color:var(--ink-soft); margin:0 0 18px; max-width:62ch} .meta{display:flex; flex-wrap:wrap; gap:8px} .tag{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--ink-soft); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:5px 12px} h2{font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:15px; letter-spacing:.01em; margin:34px 0 14px; color:var(--ink); display:flex; align-items:center; gap:10px} h2::before{content:""; width:4px; height:16px; border-radius:2px; background:var(--accent)} /* ---------- stat bar ---------- */ .stats{display:flex; gap:0; margin:26px 0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden} .stat{flex:1; padding:16px 20px; border-right:1px solid var(--line-soft)} .stat:last-child{border-right:0} .stat .num{font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:26px; line-height:1} .stat .lbl{font-size:12.5px; color:var(--ink-faint); margin-top:4px} /* ---------- cards & KPIs ---------- */ .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px} .card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:0 1px 0 rgba(0,0,0,.02)} .card .k{font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint)} .card .v{font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:30px; line-height:1.1; margin:8px 0 6px} .chip{display:inline-flex; align-items:center; gap:4px; font-family:"JetBrains Mono",monospace; font-size:11.5px; font-weight:500; padding:2px 8px; border-radius:999px} .chip.up{color:var(--pos); background:color-mix(in srgb, var(--pos) 14%, var(--mix))} .chip.down{color:var(--neg); background:color-mix(in srgb, var(--neg) 14%, var(--mix))} .chip.flat{color:var(--ink-faint); background:var(--line-soft)} /* ---------- controls ---------- */ .row-controls{display:flex; flex-wrap:wrap; gap:10px; align-items:center} .btn{font-family:inherit; font-size:13.5px; font-weight:500; color:var(--ink-soft); background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:10px 16px; cursor:pointer; transition:border-color .15s, color .15s} .btn:hover{border-color:var(--ink-faint); color:var(--ink)} .btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--ring)} .btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent)} .btn.primary:hover{filter:brightness(1.06); color:var(--on-accent)} .input{flex:1; min-width:200px; padding:11px 14px; font-size:14.5px; font-family:inherit; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); color:var(--ink)} .input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)} /* ---------- status pills ---------- */ .pill{font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:500; border-radius:999px; padding:3px 10px} .pill.active{color:var(--on-accent); background:var(--accent)} .pill.ok{color:var(--pos); background:color-mix(in srgb, var(--pos) 15%, var(--mix))} .pill.warn{color:var(--a4); background:color-mix(in srgb, var(--a4) 16%, var(--mix))} .pill.idle{color:var(--ink-faint); background:var(--line-soft)} .pill.low{color:var(--neg); background:color-mix(in srgb, var(--neg) 14%, var(--mix))} .pill.p1{color:var(--neg); background:color-mix(in srgb, var(--neg) 14%, var(--mix))} .pill.p2{color:var(--a4); background:color-mix(in srgb, var(--a4) 16%, var(--mix))} .pill.p3{color:var(--ink-faint); background:var(--line-soft)} /* ---------- table ---------- */ table{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden} th,td{text-align:left; padding:11px 16px; font-size:13.5px; border-bottom:1px solid var(--line-soft)} th{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:500} tbody tr:last-child td{border-bottom:0} tbody tr:hover{background:var(--line-soft)} td.num{font-family:"JetBrains Mono",monospace; text-align:right; color:var(--ink-soft)} /* ---------- callout ---------- */ .callout{background:color-mix(in srgb, var(--accent) 7%, var(--card)); border:1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-left:3px solid var(--accent); border-radius:var(--radius); padding:16px 18px; font-size:14.5px; color:var(--ink-soft)} .callout b{color:var(--ink)} .callout .lbl{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0 0 6px} .callout p{margin:0; color:var(--ink-soft)} /* ---------- swatches ---------- */ .swatches{display:flex; flex-wrap:wrap; gap:10px} .sw{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-soft); font-family:"JetBrains Mono",monospace} .dot-sw{width:22px; height:22px; border-radius:6px; flex:0 0 auto; border:1px solid rgba(0,0,0,.06)} /* ---------- footer ---------- */ footer{margin-top:40px; font-size:12.5px; color:var(--ink-faint); text-align:center; font-family:"JetBrains Mono",monospace} /* ============ DASHBOARD ============ */ .kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin:24px 0} .kpi{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:0 1px 0 rgba(0,0,0,.02)} .kpi .k{font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint)} .kpi .v{font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:30px; line-height:1.1; margin:8px 0 6px} .panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin:18px 0} .panel h2{display:block; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:15px; margin:0 0 18px} .panel h2::before{display:none} .panel .hint{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-faint); font-weight:400} .chart{display:flex; align-items:flex-end; gap:14px; height:200px; padding-top:10px; border-bottom:1px solid var(--line); position:relative} .chart .grid-line{position:absolute; left:0; right:0; border-top:1px dashed var(--line-soft)} .bar-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; z-index:1} .bar{width:60%; max-width:46px; border-radius:6px 6px 0 0; background:var(--accent); transition:height .5s ease; min-height:3px} .bar-lbl{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-faint)} /* ============ DOCUMENT ============ */ .sheet h2{display:block; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:20px; letter-spacing:-.01em; margin:36px 0 12px; padding-top:6px} .sheet h2::before{display:none} .sheet h3{font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:15px; margin:24px 0 8px} .sheet p{font-size:15.5px; color:var(--ink); margin:0 0 14px} .sheet p.lead{font-size:17px; color:var(--ink-soft)} .sheet a{color:var(--accent)} .sheet ul,.sheet ol{font-size:15.5px; color:var(--ink); padding-left:22px; margin:0 0 14px} .sheet li{margin:6px 0} .sheet strong{font-weight:600} blockquote{margin:18px 0; padding:4px 0 4px 18px; border-left:3px solid var(--line); color:var(--ink-soft); font-size:16px; font-style:italic} .docmeta{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:0 0 30px} .docmeta div{padding:13px 16px; border-right:1px solid var(--line-soft)} .docmeta div:last-child{border-right:0} .docmeta .l{font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint)} .docmeta .d{font-size:13.5px; margin-top:3px} hr{border:0; border-top:1px solid var(--line); margin:34px 0} /* ============ WORKSPACE MAP (tree) ============ */ .toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 18px; position:sticky; top:0; z-index:5; background:var(--paper); padding:12px 0} .search{flex:1; min-width:220px; position:relative} .search svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--ink-faint)} .search input{width:100%; padding:11px 14px 11px 38px; font-size:14.5px; font-family:inherit; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); color:var(--ink)} .search input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)} .tree{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:8px 10px 14px; box-shadow:0 1px 0 rgba(0,0,0,.02)} .area{margin:10px 4px} .area-head{display:flex; align-items:center; gap:10px; cursor:pointer; padding:10px 8px; border-radius:8px; user-select:none} .area-head:hover{background:var(--line-soft)} .rail{width:4px; align-self:stretch; border-radius:2px; flex:0 0 auto} .code{font-family:"JetBrains Mono",monospace; font-weight:500; font-size:12.5px; padding:3px 8px; border-radius:6px; flex:0 0 auto; letter-spacing:.01em} .area-name{font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:18px; letter-spacing:-.01em} .area-note{font-size:13px; color:var(--ink-faint)} .yours{font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-accent); background:var(--accent); padding:3px 8px; border-radius:999px} .count{margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--ink-faint); flex:0 0 auto} .children{margin-left:18px; padding-left:14px; border-left:1px solid var(--line); overflow:hidden} .node.collapsed > .children{display:none} .row{display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:7px; cursor:default} .row.toggle{cursor:pointer} .row.toggle:hover{background:var(--line-soft)} .row:focus-visible{outline:none; box-shadow:0 0 0 2px var(--ring)} .chev{width:14px; height:14px; color:var(--ink-faint); flex:0 0 auto; transition:transform .18s} .node.collapsed > .row .chev{transform:rotate(-90deg)} .chev.hidden{visibility:hidden} .ic{width:16px; height:16px; flex:0 0 auto; color:var(--ink-faint)} .name{font-size:14.5px; color:var(--ink)} .name.file{color:var(--ink-soft)} .note{font-size:12.5px; color:var(--ink-faint); margin-left:2px} .note::before{content:"— "; color:var(--line)} mark{background:var(--mark-bg); color:var(--mark-fg); border-radius:3px; padding:0 1px} .hidden-node{display:none !important} .legend{margin-top:26px; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px} .lcard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px} .lcard h3{font-family:"Space Grotesk",sans-serif; font-size:14px; font-weight:600; margin:0 0 10px} .ltype{display:flex; gap:9px; font-size:13px; color:var(--ink-soft); margin:7px 0} .ltag{font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:500; color:var(--on-accent); border-radius:5px; padding:2px 7px; flex:0 0 auto; height:fit-content} /* ============ THEME TOGGLE ============ */ .theme-toggle{position:fixed; top:14px; right:14px; z-index:50; width:38px; height:38px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink-soft); font-size:15px; line-height:1; cursor:pointer; box-shadow:0 2px 10px rgba(2,6,23,.10); transition:color .15s, border-color .15s} .theme-toggle:hover{color:var(--accent); border-color:var(--accent)} /* ---------- responsive ---------- */ @media (max-width:620px){ h1{font-size:30px} .stats{flex-wrap:wrap} .stat{flex:1 1 50%} .area-note{display:none} } @media (prefers-reduced-motion:reduce){*{transition:none !important; scroll-behavior:auto}}