/* ===== HERMES / stockus.sekio.dev — design.css ===== Single source of truth for the design system (see web/DESIGN.md). Injected on EVERY page by sekio.js (appended last in ), so its :root tokens override each page's inline :root and the whole site renders against one palette/type/spacing scale. Also ships base component classes (card / kpi / tbl / tag / entry / dot / disc ...). Pure system fonts (GFW-safe). Loaded as assets/design.css. */ :root{ /* base ink */ --ink:#0a0b0e; --ink-1:#101216; --ink-2:#16181d; --ink-3:#1f222b; --ink-4:#2a2e39; /* text */ --paper:#f0efe9; --paper-2:#c9c8c2; --paper-dim:#c9c8c2; --sub:#8a8c93; --faint:#5a5d66; /* lines */ --line:rgba(240,239,233,0.08); --line-2:rgba(240,239,233,0.14); /* semantic / market */ --green:#26d07c; --green-hi:#4fd08c; --green-lo:#1b7a4e; --green-glow:rgba(38,208,124,0.16); --red:#ff4d4f; --red-hi:#ff6b6b; --amber:#e0b043; --blue:#4da3ff; --blue-glow:rgba(77,163,255,0.16); /* type */ --sans:'Inter','PingFang SC','Microsoft YaHei UI','Microsoft YaHei','Source Han Sans SC','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --num:'JetBrains Mono','SF Mono','DIN Alternate','Bahnschrift','Menlo',ui-monospace,'PingFang SC',sans-serif; --mono:var(--num); /* radius */ --r:10px; --r-lg:14px; } /* ---- base ---- */ .sk-body,body{background:var(--ink);color:var(--paper)} .num,.mono{font-family:var(--num);font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-0.01em} .g{color:var(--green-hi)!important}.r{color:var(--red)!important}.a{color:var(--amber)!important} .b{color:var(--blue)!important}.mut{color:var(--sub)!important}.pos{color:var(--green-hi)}.neg{color:var(--red)} .wrap{max-width:1280px;margin:0 auto;padding:0 28px} /* ---- eyebrow / heading ---- */ .eyebrow{font-family:var(--num);font-size:11px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--green-hi);margin-bottom:14px} .eyebrow .n{color:var(--faint);margin-right:9px} h1.page{font-size:clamp(26px,3.4vw,38px);font-weight:700;letter-spacing:-0.02em;line-height:1.12} h2.sec{font-size:clamp(19px,2.2vw,25px);font-weight:700;letter-spacing:-0.01em;margin-bottom:10px} .lead{color:var(--paper-2);font-size:14.5px;font-weight:500;max-width:720px;line-height:1.75} /* ---- card ---- */ .card{background:var(--ink-1);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;transition:border-color .2s cubic-bezier(.2,.8,.2,1),transform .2s cubic-bezier(.2,.8,.2,1)} .card:hover{border-color:var(--line-2);transform:translateY(-2px)} .card.tight{padding:16px 18px} .card.glow{box-shadow:inset 0 0 0 1px var(--blue-glow),0 0 40px -28px var(--blue)} .card h3{font-size:14px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;justify-content:space-between} .card .cap{font-family:var(--num);font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--sub);margin-bottom:16px} /* ---- kpi ---- */ .kpi{background:var(--ink-1);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px} .kpi .k{font-family:var(--num);font-size:10.5px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--sub);margin-bottom:9px;display:flex;align-items:center;gap:6px} .kpi .v{font-family:var(--num);font-variant-numeric:tabular-nums;font-size:26px;font-weight:700;line-height:1;letter-spacing:-0.01em} .kpi .s{font-family:var(--num);font-size:11.5px;font-weight:600;color:var(--faint);margin-top:7px} .kpi .s .pos{color:var(--green-hi)}.kpi .s .neg{color:var(--red)} /* ---- stat ---- */ .stat .k{font-family:var(--num);font-size:11px;font-weight:600;color:var(--sub);letter-spacing:0.04em;margin-bottom:7px} .stat .v{font-family:var(--num);font-size:26px;font-weight:700;line-height:1} .stat .s{font-family:var(--num);font-size:11px;font-weight:600;color:var(--faint);margin-top:6px} /* ---- data table ---- */ .tbl{width:100%;border-collapse:collapse;font-size:13.5px} .tbl th{font-family:var(--num);font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--sub);text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-2)} .tbl th.r,.tbl td.r{text-align:right} .tbl td{padding:13px 14px;border-bottom:1px solid var(--line);font-weight:600} .tbl tr:hover td{background:var(--ink-2)} .tbl td.tk{font-family:var(--num);font-weight:700} .tbl .pos{color:var(--green-hi)}.tbl .neg{color:var(--red)} /* ---- tag / chip / pill ---- */ .tag{display:inline-block;padding:3px 9px;border-radius:5px;font-family:var(--num);font-size:11px;font-weight:700;background:var(--ink-3);color:var(--paper-2)} .tag.live{background:rgba(224,176,67,0.16);color:var(--amber)} .tag.paper{background:rgba(224,176,67,0.14);color:var(--amber)} .tag.done{background:var(--green-glow);color:var(--green-hi)} .tag.info{background:var(--blue-glow);color:var(--blue)} .chip{display:inline-flex;align-items:baseline;gap:6px;padding:7px 12px;background:var(--ink-2);border:1px solid var(--line);border-radius:8px;font-family:var(--num);font-size:13px;font-weight:700;transition:.15s} .chip:hover{border-color:var(--green-lo)}.chip .s{font-size:10px;font-weight:600;color:var(--sub)} .pill{font-family:var(--num);font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;letter-spacing:.03em} .pill.warn{background:rgba(224,176,67,0.16);color:var(--amber)} .pill.ok{background:var(--green-glow);color:var(--green-hi)} .pill.info{background:var(--blue-glow);color:var(--blue)} /* ---- rating badge (8-tier) ---- */ .rb{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:7px;font-size:12.5px;font-weight:700;font-family:var(--sans);white-space:nowrap} .rb::before{content:'';width:7px;height:7px;border-radius:2px;background:currentColor} .rb-1{background:var(--green-glow);color:#5FE0A0}.rb-2{background:rgba(38,208,124,0.12);color:#4FD08C} .rb-3{background:var(--blue-glow);color:#7FB0E8}.rb-4{background:rgba(138,140,147,0.14);color:#AEB0B7} .rb-5{background:rgba(224,176,67,0.14);color:#F0B65A}.rb-6{background:rgba(224,128,58,0.15);color:#F09A4A} .rb-7{background:rgba(255,77,79,0.14);color:#F0786A}.rb-8{background:rgba(255,77,79,0.2);color:#FF8C7A} /* ---- status light ---- */ .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:sk-pulse 2.4s infinite;display:inline-block} .dot.warn{background:var(--amber);box-shadow:0 0 8px var(--amber)} .dot.off{background:var(--faint);box-shadow:none;animation:none} @keyframes sk-pulse{0%,100%{opacity:1}50%{opacity:.4}} /* ---- portal entry card ---- */ .entry{display:flex;flex-direction:column;gap:12px;background:var(--ink-1);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s,background .2s} .entry:hover{border-color:var(--blue);transform:translateY(-3px);background:var(--ink-2)} .entry .ico{width:34px;height:34px;border-radius:9px;background:var(--ink-2);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--blue)} .entry:hover .ico{color:var(--green-hi);border-color:var(--green-lo)} .entry .et{font-family:var(--num);font-size:15px;font-weight:700;letter-spacing:-0.01em} .entry .ed{font-size:12.5px;color:var(--sub);line-height:1.6;flex:1} .entry .em{font-family:var(--num);font-variant-numeric:tabular-nums;font-size:20px;font-weight:700;line-height:1} .entry .ego{font-family:var(--num);font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--sub);display:flex;align-items:center;gap:6px} .entry:hover .ego{color:var(--blue)} /* ---- disclaimer ---- */ .disc{background:var(--ink-1);border:1px solid var(--line);border-left:3px solid var(--green-lo);border-radius:0 var(--r) var(--r) 0;padding:18px 22px;font-size:13px;font-weight:500;color:var(--paper-2);line-height:1.8} .disc b{color:var(--paper);font-weight:700} /* ---- verify stamp ---- */ .stamp{display:inline-flex;align-items:center;gap:7px;font-family:var(--num);font-size:11.5px;font-weight:700;color:var(--green-hi);padding:5px 11px;border:1px solid var(--green-lo);border-radius:7px} /* ---- misc shared ---- */ .overflow-x{overflow-x:auto;-webkit-overflow-scrolling:touch} footer{padding:40px 0;margin-top:60px;border-top:1px solid var(--line)} .foot-meta{font-family:var(--num);font-size:11px;font-weight:600;color:var(--faint);line-height:1.8}