From 6c088f8d3ab317ee5a64d78f637a50c6b2439cab Mon Sep 17 00:00:00 2001 From: evans777max Date: Thu, 16 Jul 2026 16:35:23 +0800 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=E5=85=A8=E7=AB=99=E6=B8=B8?= =?UTF-8?q?=E6=88=8F=E5=8C=96=E4=BA=A4=E4=BA=92=20+=20UI=20=E9=AB=98?= =?UTF-8?q?=E7=BA=A7=E6=84=9F=E9=87=8D=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 洞察区「数据猜猜看」：从真实 DIGEST 数据随机抽题，3选1判断+结果评级+最佳成绩持久化 - 方案库「任务挑战」：正确使用 TK_TASKS，时间线路径+Skill组合+完成打卡记录 - 全局 toast 通知系统：路线进度到站/挑战完成即时反馈 - 模块分层配色（信号淡蓝/方案库淡紫/工作台淡绿）、卡片鼠标追光、排版细节 - 移动端汉堡菜单、按压反馈、滚动导航阴影 - 词典知识图谱：可交互星系图（拖拽/缩放/点击/搜索/已探索追踪） - 信号区横向卡片流、方案库 Bento 网格、案例区杂志布局 （本地 fable-opt/ 工作副本与备份已加入 .gitignore） --- .gitignore | 4 + TrueNorth.html | 1318 +++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 1261 insertions(+), 61 deletions(-) diff --git a/.gitignore b/.gitignore index 92b8218..9506819 100644 --- a/.gitignore +++ b/.gitignore @@ -26,3 +26,7 @@ Thumbs.db # 根目录聊天导出（私有） Kiro聊天记录_* + +# 本地优化工作副本与版本备份（不进仓库） +fable-opt/ +fable-opt-backups/ diff --git a/TrueNorth.html b/TrueNorth.html index 6d06b92..3a36bdf 100644 --- a/TrueNorth.html +++ b/TrueNorth.html @@ -21,6 +21,9 @@ --black:#000; --radius:22px; --ease:cubic-bezier(.22,.61,.36,1); + --bg-signal: #f0f7ff; + --bg-toolkit: #f7f5ff; + --bg-workbench: #f5faf7; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @@ -52,6 +55,24 @@ .navlinks a:hover{color:var(--ink)} .navlinks a.active{color:var(--ink);font-weight:600} @media(max-width:680px){.navlinks{display:none}} +.nav-burger{display:none;width:36px;height:36px;border:none;background:none;cursor:pointer; + position:relative;-webkit-tap-highlight-color:transparent} +.nav-burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px; + position:absolute;left:8px;transition:.3s var(--ease)} +.nav-burger span:nth-child(1){top:11px} +.nav-burger span:nth-child(2){top:17px} +.nav-burger span:nth-child(3){top:23px} +.nav-burger.open span:nth-child(1){transform:rotate(45deg);top:17px} +.nav-burger.open span:nth-child(2){opacity:0} +.nav-burger.open span:nth-child(3){transform:rotate(-45deg);top:17px} +@media(max-width:680px){ + .nav-burger{display:block} + .navlinks.open{display:flex;position:fixed;top:52px;left:0;right:0;bottom:0; + background:var(--bg);flex-direction:column;padding:32px 24px;gap:0;z-index:999; + overflow-y:auto;animation:fadeIn .25s var(--ease)} + .navlinks.open a{font-size:18px;font-weight:600;padding:16px 0;border-bottom:1px solid var(--line)} +} +@keyframes fadeIn{from{opacity:0}to{opacity:1}} /* ===== reveal ===== */ .reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease)} @@ -99,11 +120,14 @@ section{padding:110px 0;position:relative} .sec-dark{background:#000;color:#f5f5f7} .sec-grey{background:#eceef2} +#signals{background:var(--bg-signal)} +#toolkit{background:var(--bg-toolkit)} +#workbench{background:var(--bg-workbench)} /* 模块分隔：浅色区之间加发丝线，强化层次 */ section:not(.sec-dark){border-top:1px solid rgba(0,0,0,.07)} .eyebrow{font-size:14px;font-weight:600;letter-spacing:.4px;text-transform:uppercase} -.h2{font-size:clamp(32px,5vw,56px);font-weight:700;letter-spacing:-.025em;line-height:1.08;margin:12px 0 18px} -.lead{font-size:clamp(17px,2.2vw,21px);color:var(--ink2);max-width:720px;line-height:1.55;font-weight:400} +.h2{font-size:clamp(32px,5vw,56px);font-weight:700;letter-spacing:-.025em;line-height:1.08;margin:12px 0 18px;text-wrap:balance} +.lead{font-size:clamp(17px,2.2vw,21px);color:var(--ink2);max-width:720px;line-height:1.55;font-weight:400;text-wrap:pretty} .sec-dark .lead{color:#a1a1a6} /* ===== 模块折叠 ===== */ @@ -175,6 +199,11 @@ .card .srclink{font-size:13px;font-weight:600;color:var(--ink3);padding:5px 12px;border:1px solid var(--line); border-radius:980px;transition:.25s var(--ease)} .card .srclink:hover{color:var(--ink);border-color:var(--ink3);background:var(--bg2)} +.card::before{content:'';position:absolute;inset:0;border-radius:inherit;opacity:0; + transition:opacity .3s var(--ease);pointer-events:none;z-index:1; + background:radial-gradient(600px circle at var(--mouse-x,50%) var(--mouse-y,50%), + rgba(0,113,227,.06),transparent 60%)} +.card:hover::before{opacity:1} /* ===== CURATED FEED ===== */ .feedgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:20px} @@ -199,6 +228,11 @@ .feedcard .srclink{font-size:13px;font-weight:600;color:var(--ink3);padding:5px 12px;border:1px solid var(--line); border-radius:980px;transition:.25s var(--ease)} .feedcard .srclink:hover{color:var(--ink);border-color:var(--ink3);background:var(--bg2)} +.feedcard::before{content:'';position:absolute;inset:0;border-radius:inherit;opacity:0; + transition:opacity .3s var(--ease);pointer-events:none;z-index:1; + background:radial-gradient(600px circle at var(--mouse-x,50%) var(--mouse-y,50%), + rgba(0,113,227,.06),transparent 60%)} +.feedcard:hover::before{opacity:1} @media(max-width:760px){.feedgrid{grid-template-columns:1fr}} /* ===== AI 方案库 ===== */ @@ -225,6 +259,11 @@ @media(max-width:760px){.tkgrid{grid-template-columns:1fr}} .tkbadge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:980px; background:linear-gradient(110deg,#5b8def,#a78bfa);color:#fff;margin-left:auto} +.tkcard::before{content:'';position:absolute;inset:0;border-radius:inherit;opacity:0; + transition:opacity .3s var(--ease);pointer-events:none;z-index:1; + background:radial-gradient(600px circle at var(--mouse-x,50%) var(--mouse-y,50%), + rgba(0,113,227,.06),transparent 60%)} +.tkcard:hover::before{opacity:1} /* ===== AI 信号雷达 ===== */ .sigupd{display:inline-block;margin-left:8px;font-size:13px;font-weight:600;color:var(--c-trend)} @@ -254,11 +293,16 @@ .sigcard .siggo .arr{transition:transform .3s var(--ease)} .sigcard:hover .siggo .arr{transform:translateX(4px)} @media(max-width:760px){.siggrid{grid-template-columns:1fr}} +.sigcard::before{content:'';position:absolute;inset:0;border-radius:inherit;opacity:0; + transition:opacity .3s var(--ease);pointer-events:none;z-index:1; + background:radial-gradient(600px circle at var(--mouse-x,50%) var(--mouse-y,50%), + rgba(0,113,227,.06),transparent 60%)} +.sigcard:hover::before{opacity:1} /* ===== Synthesis / charts on home ===== */ .statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:50px} .stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:30px 24px;text-align:center} -.sec-dark .stat .num{font-size:clamp(38px,5vw,58px);font-weight:700;letter-spacing:-.03em; +.sec-dark .stat .num{font-size:clamp(38px,5vw,58px);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums; background:linear-gradient(120deg,#5b8def,#a78bfa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .stat .lab{font-size:14px;color:#a1a1a6;margin-top:8px;line-height:1.4} @media(max-width:760px){.statrow{grid-template-columns:1fr 1fr}} @@ -896,6 +940,15 @@ .job .tags{margin-top:12px;display:flex;flex-wrap:wrap;gap:7px} .job .tags span{font-size:12px;background:rgba(255,255,255,.07);padding:4px 10px;border-radius:980px;color:#a1a1a6} +/* ===== card press / active states ===== */ +.card:active{transform:scale(.98);transition:transform .1s} +.feedcard:active{transform:scale(.98);transition:transform .1s} +.tkcard:active{transform:scale(.98);transition:transform .1s} +.sigcard:active{transform:scale(.97);transition:transform .1s} + +/* ===== nav scroll shadow ===== */ +nav.scrolled{box-shadow:0 1px 12px rgba(0,0,0,.08)} + footer{background:#000;color:#86868b;padding:60px 0;font-size:13px;line-height:1.7;text-align:center} footer a{color:#a1a1a6} @@ -1219,6 +1272,14 @@ .sr-t{font-size:14px;color:var(--ink);font-weight:600} .sr-s{font-size:12.5px;color:var(--ink2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} @media(max-width:680px){.searchov-panel{margin-top:6vh;width:94vw}.navsearch{padding:4px 9px}} +/* ===== 场景工作台 tabs ===== */ +.wb-tabs{display:flex;gap:8px;margin:28px 0 30px;flex-wrap:wrap} +.wb-tab{font-size:14px;font-weight:600;padding:10px 20px;border-radius:980px;border:1px solid var(--line); + background:#fff;color:var(--ink2);cursor:pointer;transition:.25s var(--ease)} +.wb-tab:hover{border-color:var(--ink3);color:var(--ink)} +.wb-tab.active{background:var(--ink);color:#fff;border-color:var(--ink)} +.wb-panel{animation:fadeIn .3s var(--ease)} + /* ===== 论文工作台 ===== */ .paper-stages{margin-top:34px;display:flex;flex-direction:column;gap:26px} .paper-sh{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:14px;padding-left:12px;border-left:3px solid var(--c-method)} @@ -1263,6 +1324,241 @@ .gk-chip{font-size:12px;color:#3b6ca8;background:rgba(59,108,168,.1);border:1px solid rgba(59,108,168,.22);border-radius:980px;padding:4px 12px;cursor:pointer;transition:all .15s var(--ease)} .gk-chip:hover{background:#3b6ca8;color:#fff;border-color:#3b6ca8} @media(max-width:680px){.gk-types{grid-template-columns:1fr}.gk-goal,.gk-block{padding-left:0}} +/* ===== Knowledge Graph Overlay ===== */ +.kgraph-btn{font-size:13px;font-weight:600;padding:9px 16px;border-radius:980px;border:1px solid var(--line); + background:#fff;color:var(--ink);cursor:pointer;transition:.25s var(--ease)} +.kgraph-btn:hover{border-color:var(--ink3);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08)} +.kgraph-ov{position:fixed;inset:0;z-index:2000;display:none;flex-direction:column;background:#07070d} +.kgraph-ov.open{display:flex;animation:deckIn .4s var(--ease)} +.kgraph-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 24px; + border-bottom:1px solid rgba(255,255,255,.08);flex:none;background:rgba(10,10,18,.7)} +.kgraph-title{font-size:15px;font-weight:800;color:#f5f5f7} +.kgraph-search{flex:1;max-width:320px;position:relative} +.kgraph-search input{width:100%;font-size:13px;padding:9px 14px 9px 32px;border-radius:980px; + border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#f5f5f7; + outline:none;transition:.25s var(--ease);font-family:inherit} +.kgraph-search input::placeholder{color:#6e6e78} +.kgraph-search input:focus{border-color:rgba(91,141,239,.5);background:rgba(255,255,255,.09)} +.kgraph-search .si{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#6e6e78;font-size:13px;pointer-events:none} +.kgraph-close{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.12); + background:rgba(255,255,255,.06);color:#f5f5f7;cursor:pointer;font-size:17px; + display:flex;align-items:center;justify-content:center;transition:.2s var(--ease);flex:none} +.kgraph-close:hover{background:rgba(255,255,255,.12);transform:rotate(90deg)} +.kgraph-canvas{flex:1;min-height:0;position:relative;overflow:hidden} +.kgraph-canvas canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab} +.kgraph-legend{position:absolute;bottom:16px;left:16px;display:flex;gap:12px;flex-wrap:wrap; + font-size:11px;color:rgba(255,255,255,.5)} +.kgraph-legend span{display:inline-flex;align-items:center;gap:5px;font-weight:600} +.kgraph-legend span::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--lc);box-shadow:0 0 6px var(--lc)} +.kgraph-hint{position:absolute;top:12px;left:50%;transform:translateX(-50%);font-size:11px; + color:rgba(255,255,255,.35);background:rgba(0,0,0,.5);padding:5px 14px;border-radius:980px;pointer-events:none} +.kgraph-info{position:absolute;top:14px;right:14px;width:min(300px,calc(100vw - 28px));max-height:calc(100% - 80px); + overflow-y:auto;background:rgba(18,18,24,.92);border:1px solid rgba(255,255,255,.1);border-radius:16px; + padding:18px 20px;backdrop-filter:blur(12px);box-shadow:0 12px 40px rgba(0,0,0,.4);z-index:3} +.kgraph-info .kgi-cat{font-size:11px;font-weight:700;letter-spacing:.04em;margin-bottom:4px} +.kgraph-info .kgi-t{font-size:18px;font-weight:800;color:#f5f5f7} +.kgraph-info .kgi-cn{font-size:13px;color:rgba(255,255,255,.5);font-weight:600;margin-left:8px} +.kgraph-info .kgi-e{font-size:13px;color:rgba(255,255,255,.65);line-height:1.6;margin-top:10px} +.kgraph-info .kgi-rell{font-size:11px;font-weight:700;color:rgba(255,255,255,.35);margin-top:14px} +.kgraph-info .kgi-rel{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} +.kgraph-info .kgi-chip{font-size:12px;font-weight:600;padding:4px 12px;border-radius:980px;cursor:pointer; + background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.7);transition:.2s var(--ease)} +.kgraph-info .kgi-chip:hover{border-color:rgba(91,141,239,.6);color:#5b8def} +.kgraph-info .kgi-go{margin-top:14px;display:inline-block;font-size:12px;font-weight:600;color:#5b8def; + padding:6px 14px;border:1px solid rgba(91,141,239,.3);border-radius:980px;transition:.2s var(--ease)} +.kgraph-info .kgi-go:hover{background:rgba(91,141,239,.12)} +.kgraph-info .kgi-close{position:absolute;top:10px;right:12px;border:none;background:rgba(255,255,255,.06); + font-size:13px;color:rgba(255,255,255,.5);cursor:pointer;width:24px;height:24px;border-radius:50%; + display:flex;align-items:center;justify-content:center} +.kgraph-info .kgi-close:hover{background:rgba(255,255,255,.12)} +/* ===== Hero search + chips ===== */ +.hero-search{position:relative;max-width:520px;width:100%;margin:28px auto 0} +.hero-search input{width:100%;font-size:15px;padding:14px 18px 14px 44px;border-radius:980px; + border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#f5f5f7; + font-family:inherit;outline:none;cursor:pointer;transition:.3s var(--ease);backdrop-filter:blur(8px)} +.hero-search input::placeholder{color:rgba(255,255,255,.4)} +.hero-search input:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.1)} +.hero-search .hsi{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.4);font-size:16px;pointer-events:none} +.hero-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px} +.hchip{font-size:13px;font-weight:500;padding:7px 16px;border-radius:980px; + border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.7);cursor:pointer;transition:.25s var(--ease)} +.hchip:hover{border-color:rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.08)} +@media(max-width:480px){.hero-chips{gap:6px}.hchip{font-size:12px;padding:6px 12px}} +/* ===== Role-based quick path ===== */ +.role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px} +.role-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;cursor:pointer; + transition:.25s var(--ease);display:flex;align-items:flex-start;gap:14px} +.role-card:hover{border-color:var(--blue);box-shadow:0 8px 20px rgba(0,0,0,.06);transform:translateY(-3px)} +.role-card .rc-icon{font-size:24px;flex:none;line-height:1} +.role-card .rc-body{flex:1} +.role-card .rc-name{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:4px} +.role-card .rc-desc{font-size:13px;color:var(--ink2);line-height:1.5} +.role-card .rc-path{font-size:12px;font-weight:600;color:var(--blue);margin-top:8px} +@media(max-width:560px){.role-grid{grid-template-columns:1fr}} + +/* ═══════════════════════════════════════════════════════════════════════ + PREMIUM OUTER MODULE ENHANCEMENTS + Appended — do NOT modify any existing rules above + ═══════════════════════════════════════════════════════════════════════ */ + +/* 1. Eyebrow gets a subtle underline accent */ +.eyebrow::after{content:'';display:block;width:32px;height:2px;margin-top:8px; + background:linear-gradient(90deg,var(--blue),var(--c-method));border-radius:2px;opacity:.6} + +/* 2. Card glass overlay on hover */ +.card:hover::after,.feedcard:hover::after,.tkcard:hover::after{content:'';position:absolute;inset:0; + border-radius:inherit;background:linear-gradient(160deg,rgba(255,255,255,.06),transparent 60%); + pointer-events:none;z-index:1} + +/* 3. Signal card inner glow */ +.sigcard::after{content:'';position:absolute;top:0;left:0;width:3px;height:100%; + background:linear-gradient(to bottom,var(--sc),transparent 80%);border-radius:3px 0 0 3px; + opacity:0;transition:opacity .3s var(--ease)} +.sigcard:hover::after{opacity:1} + +/* 4. Route nodes depth */ +.route-node{position:relative;overflow:hidden} +.route-node::before{content:'';position:absolute;top:0;right:0;width:120px;height:120px; + border-radius:50%;background:var(--rc);opacity:.04;filter:blur(40px);pointer-events:none} +.route-node:hover::before{opacity:.1;transform:scale(1.5)} + +/* 5. Section transition — soft gradient fade divider */ +section:not(.sec-dark)::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%); + width:min(800px,80%);height:1px; + background:linear-gradient(90deg,transparent,rgba(0,0,0,.08) 20%,rgba(0,0,0,.08) 80%,transparent); + pointer-events:none} + +/* 6. Stat numbers in dark section — enhanced glow */ +.sec-dark .stat{position:relative;overflow:hidden} +.sec-dark .stat::before{content:'';position:absolute;inset:-20%; + background:radial-gradient(circle at 50% 120%,rgba(91,141,239,.08),transparent 70%);pointer-events:none} + +/* 7. Takeaway cards — numbered accent glow */ +.ta .tn{position:relative} +.ta .tn::after{content:'';position:absolute;inset:-8px;border-radius:50%; + background:linear-gradient(120deg,var(--c-org),var(--c-method));opacity:.08;filter:blur(12px);z-index:-1} + +/* 8. H2 heading — subtle shimmer on scroll-reveal */ +.h2.in{position:relative} +.h2.in::after{content:'';position:absolute;top:0;left:-10%;width:120%;height:100%; + background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.15) 50%,transparent 70%); + background-size:200% 100%;animation:h2shimmer 2s ease forwards;pointer-events:none; + -webkit-background-clip:text;background-clip:text;mix-blend-mode:overlay;opacity:0} +@keyframes h2shimmer{0%{opacity:.8;background-position:200% 0}100%{opacity:0;background-position:-200% 0}} + +/* 9. Footer premium feel */ +footer{background:linear-gradient(to bottom,var(--bg),#eceef2);border-top:none} + +/* ===== Signals: horizontal scroll carousel ===== */ +.siggrid{display:flex!important;grid-template-columns:unset!important; + overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin-top:38px; + padding-bottom:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none} +.siggrid::-webkit-scrollbar{display:none} +.siggrid .sigcard{flex:none;width:min(340px,80vw);scroll-snap-align:start; + border-radius:16px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)} +.siggrid .sigcard:first-child{margin-left:0} +/* Carousel fade edges */ +#signals .wrap{position:relative} +#signals .wrap::after{content:'';position:absolute;top:0;right:0;bottom:0;width:80px; + background:linear-gradient(to right,transparent,var(--bg-signal,var(--bg)));pointer-events:none;z-index:2} +@media(max-width:680px){ + .siggrid .sigcard{width:85vw} + #signals .wrap::after{width:40px} +} +/* Carousel nav arrows */ +.sig-nav{display:flex;gap:8px;margin-top:16px;justify-content:flex-end} +.sig-arr{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff; + color:var(--ink);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center; + transition:.2s var(--ease)} +.sig-arr:hover{background:var(--ink);color:#fff;border-color:var(--ink)} +.sig-arr:active{transform:scale(.92)} +@media(max-width:680px){.sig-nav{display:none}} + +/* ===== Toolkit: Bento Grid layout ===== */ +.tkgrid{grid-template-columns:repeat(3,1fr)!important;grid-auto-rows:auto} +.tkgrid .tkcard:nth-child(1){grid-column:span 2;grid-row:span 1; + background:linear-gradient(135deg,#f8f6ff 0%,#fff 50%,#f6f9ff 100%); + border-color:color-mix(in srgb,var(--tkc) 25%,var(--line))} +.tkgrid .tkcard:nth-child(2){grid-row:span 2} +.tkgrid .tkcard:nth-child(1) h4{font-size:22px} +.tkgrid .tkcard:nth-child(2) h4{font-size:20px} +/* Responsive fallback */ +@media(max-width:1024px){ + .tkgrid{grid-template-columns:repeat(2,1fr)!important} + .tkgrid .tkcard:nth-child(1){grid-column:span 2} + .tkgrid .tkcard:nth-child(2){grid-row:span 1} +} +@media(max-width:680px){ + .tkgrid{grid-template-columns:1fr!important} + .tkgrid .tkcard:nth-child(1),.tkgrid .tkcard:nth-child(2){grid-column:span 1;grid-row:span 1} + .tkgrid .tkcard:nth-child(1) h4,.tkgrid .tkcard:nth-child(2) h4{font-size:18px} +} + +/* ===== Feed: magazine layout ===== */ +.feedgrid{grid-template-columns:1fr 1fr!important} +.feedgrid .feedcard:first-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0; + padding:0;overflow:hidden;border-radius:22px;min-height:200px} +.feedgrid .feedcard:first-child .fhead{grid-column:1/-1;padding:22px 26px 0} +.feedgrid .feedcard:first-child h4{font-size:22px;padding:0 26px;grid-column:1/-1} +.feedgrid .feedcard:first-child .fsrc{padding:0 26px;grid-column:1/-1} +.feedgrid .feedcard:first-child .finsight{padding:0 26px 22px;grid-column:1/-1;font-size:15px} +.feedgrid .feedcard:first-child .ffoot{padding:14px 26px;grid-column:1/-1;background:var(--bg2);border-top:1px solid var(--line)} +@media(max-width:900px){ + .feedgrid{grid-template-columns:1fr!important} + .feedgrid .feedcard:first-child{grid-template-columns:1fr;min-height:unset} +} + +/* ===== Quickstart: horizontal timeline ===== */ +.route{display:grid!important;grid-template-columns:repeat(6,1fr);gap:12px;position:relative;margin-top:40px} +.route::before{content:'';position:absolute;top:24px;left:5%;right:5%;height:2px; + background:linear-gradient(90deg,var(--c-trend),var(--c-org),var(--c-talent),var(--c-build),var(--c-method),#2dd4bf); + border-radius:2px;opacity:.3;z-index:0} +.route-node{flex-direction:column!important;text-align:center;padding:16px 10px!important; + position:relative;z-index:1;border:none!important;border-radius:16px!important; + background:#fff!important;box-shadow:0 2px 12px rgba(0,0,0,.04)} +.route-node:hover{box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-4px)} +.route-node .rdot{width:36px;height:36px;border-radius:50%;background:var(--rc);color:#fff; + display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700; + margin:0 auto 10px;box-shadow:0 4px 12px color-mix(in srgb,var(--rc) 30%,transparent)} +.route-node .rbody{display:flex;flex-direction:column;align-items:center;gap:4px} +.route-node .rk{font-size:11px;color:var(--ink3);font-weight:600;order:-1} +.route-node .rt{font-size:14px;font-weight:700;color:var(--ink)} +.route-node .rd{font-size:12px;color:var(--ink2);line-height:1.4;display:none} +.route-node .rbtn{font-size:11px;font-weight:600;color:var(--rc);margin-top:6px} +@media(max-width:900px){ + .route{grid-template-columns:repeat(3,1fr)!important} + .route::before{display:none} +} +@media(max-width:560px){ + .route{grid-template-columns:repeat(2,1fr)!important} +} + +/* ===== Glossary: graph-first mode tabs ===== */ +.gloss-modes{display:flex;align-items:center;gap:8px;margin:24px 0 0;flex-wrap:wrap} +.gm-btn{font-size:13px;font-weight:600;padding:9px 18px;border-radius:980px;border:1px solid rgba(255,255,255,.15); + background:transparent;color:rgba(255,255,255,.6);cursor:pointer;transition:.25s var(--ease)} +.gm-btn:hover{border-color:rgba(255,255,255,.35);color:#fff} +.gm-btn.active{background:rgba(167,139,250,.18);border-color:rgba(167,139,250,.5);color:#fff} +.gm-search{position:relative;margin-left:auto} +.gm-search input{width:200px;font-size:13px;padding:9px 14px 9px 32px;border-radius:980px; + border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#f5f5f7; + outline:none;transition:.25s var(--ease);font-family:inherit} +.gm-search input::placeholder{color:#6e6e78} +.gm-search input:focus{border-color:rgba(167,139,250,.5);background:rgba(255,255,255,.09);width:260px} +.gm-search .si{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#6e6e78;font-size:13px;pointer-events:none} +.gloss-view{margin-top:28px} +.gloss-view.gloss-graph{margin-top:0} +.gloss-graph .kgraph-canvas{border-radius:20px;border:1px solid rgba(255,255,255,.08); + background:#07070d;margin-top:24px} +@media(max-width:680px){ + .gm-search{margin-left:0;width:100%;margin-top:8px} + .gm-search input,.gm-search input:focus{width:100%} + .gloss-graph .kgraph-canvas{height:50vh!important;border-radius:14px} +} +/* ===== Route node visited state ===== */ +.route-node.visited .rdot{background:var(--rc)!important;color:#fff;box-shadow:0 0 12px color-mix(in srgb,var(--rc) 50%,transparent)} +.route-node.visited{border-color:color-mix(in srgb,var(--rc) 30%,var(--line))!important;background:color-mix(in srgb,var(--rc) 4%,#fff)!important} +.route-node.visited .rbtn::after{content:' ✓';color:var(--rc)} @@ -1270,13 +1566,13 @@