/* ===== TOSWIM 赛事系统 · RD 设计语言（几何无衬线 + 纯黑字 + 超大圆角 + 描边胶囊 + 马卡龙点缀）===== 参考 rondesignlab.com 的设计语言，取其骨架、按本站内容调整： · 纯黑文字压在 #FAFAFA 平底上，去掉原来的暖色渐变背景 · 圆角尺度整体放大（卡片 28px、按钮做成胶囊），是这套语言最外显的特征 · 按钮以「描边胶囊」为常态、纯黑填充为主操作 · 马卡龙点缀色（黄/蓝/绿）只用于状态与色块，不参与正文 · 标题字阶拉开：对方用到 90px，但本站有大量表格与表单， 只在首页 hero 用到那个量级，功能页收敛，否则一屏放不下几行信息 */ /* ===== Urbanist（自托管）===== 北京访问 fonts.googleapis.com 不通，走 CDN 全员都会回落到系统字体， 所以把 latin 子集的 woff2 放进 public/fonts 自己发。 中文没有 Urbanist 字形，由后面的 PingFang / 思源黑体承接—— 拉丁字母用 Urbanist、汉字用系统黑体，正是这套设计语言在中文站里的正确落法。 */ @font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/urbanist-400-latin.woff2') format('woff2'); } @font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/urbanist-500-latin.woff2') format('woff2'); } @font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/urbanist-600-latin.woff2') format('woff2'); } @font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/urbanist-700-latin.woff2') format('woff2'); } :root { /* 文字层级靠「同一个黑的不同透明度」拉开，不换色相也不靠字号堆—— 这是 RD 案例页的做法：标题纯黑、正文 0.72、辅助文字才降到灰。 早先把正文也设成纯黑，整页看着又硬又平，层级全靠字号撑，一到表格就糊。 */ --ink: rgba(0,0,0,0.72); /* 正文 */ --title: #000000; /* 标题：唯一用纯黑的地方 */ --ink-soft: rgba(0,0,0,0.82); /* 次级正文 / 强调 */ --muted: #747474; /* 辅助说明、字段标签 */ --dim: #a3a3a3; /* 占位 / 极弱 */ --line: rgba(0,0,0,0.08); --line-strong: rgba(0,0,0,0.16); /* 状态色沿用语义，但换成同一套低饱和调子，和马卡龙点缀不打架 */ --green: #1f9d55; --green-dark: #17784a; --gold: #b5860b; --coral: #d64545; --blue: #3d6fd9; /* 马卡龙点缀：RD 的标志性配色 */ --butter: #FFE99D; --periwinkle: #B5CEFD; --sage: #D7EDA9; --paper: #ffffff; --panel: #ffffff; --shadow-sm: 0 1px 2px rgba(0,0,0,0.03); --shadow: 0 2px 6px rgba(0,0,0,0.04); --shadow-lg: 0 8px 30px rgba(0,0,0,0.07); /* 圆角尺度：这套语言最外显的特征，整体放大一档 */ --radius: 28px; --radius-sm: 16px; --radius-pill: 999px; --surface: #ffffff; --surface-2: #f2f2f2; --border: rgba(0,0,0,0.1); --border-strong: rgba(0,0,0,0.85); --ink-btn: #000000; /* 主按钮：纯黑填充 */ --accent: #000000; --ease: cubic-bezier(0.22, 1, 0.36, 1); --grad: linear-gradient(135deg,#000,#333); --aurora: linear-gradient(90deg,#FFE99D,#B5CEFD 50%,#D7EDA9); --track: 0.02em; } * { box-sizing: border-box; } html { scroll-behavior: smooth; background: #FAFAFA; } body { margin: 0; min-height: 100vh; color: var(--ink); background: transparent; font-family: "Urbanist", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; font-size: 16px; letter-spacing: 0.005em; line-height: 1.58; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; animation: pageIn .5s var(--ease) both; } @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } } /* 链接：只有正文段落里的行内链接才画底线。 早先写成全局 a{border-bottom}，把品牌名、导航、标签页、按钮全扫进去了—— 凡是本身就有形状的元素（胶囊、按钮、导航项）都不该再叠一条线。 */ a { color: #000; text-decoration: none; } p > a, .sub > a, li > a, .lead a, .prose a { border-bottom: 1px solid rgba(0,0,0,.28); } p > a:hover, .sub > a:hover, li > a:hover, .lead a:hover, .prose a:hover { border-bottom-color: #000; } /* 顶栏与品牌名里的链接一律无底线。 注意不能把 .btn / .tab 写进来——它们是描边胶囊，border-bottom:0 会把下沿切掉、 变成一个开口的 U 形。它们本来也不受上面的正文链接规则影响。 */ .topbar a, .brand, nav a { border-bottom: 0; } ::selection { background: var(--butter); } * { scrollbar-width: thin; scrollbar-color: rgba(20,24,40,0.22) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-thumb { background: rgba(20,24,40,0.18); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(20,24,40,0.3); } /* ---------- 顶栏（Auremin 式通栏平铺：与背景同色 + 发丝底线 + 淡蓝下划线标识当前项）---------- */ .topbar { position: fixed; left: 0; top: 0; z-index: 80; display: flex; align-items: center; gap: 26px; width: 100%; min-height: 68px; padding: 0 clamp(20px, 3.2vw, 46px); transform: none; background: rgba(250,250,250,0.9); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border: 0; border-bottom: 1px solid rgba(0,0,0,0.1); border-radius: 0; box-shadow: none; } .topbar .brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--title); text-decoration: none; white-space: nowrap; } .topbar a.brand:hover { color: var(--title); opacity: .78; } .topbar .brand img { width: 25px; height: 25px; object-fit: contain; filter: brightness(0) invert(0.18); opacity: .96; } .topbar .brand small { display: none; } .topbar .spacer { flex: 1 1 auto; min-width: 6px; } .topbar .who { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; font-size: 13px; color: var(--ink-soft); } .topbar .who > span { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.15; } .topbar .who .avatar { width: 31px; height: 31px; flex: 0 0 31px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; background: var(--ink-btn); } .topbar .who img.avatar { object-fit: cover; } .topbar .tab { position: relative; padding: 6px 2px; margin: 0 8px; font-size: 13.5px; color: var(--ink-soft); background: transparent; border: 0; border-radius: 0; backdrop-filter: none; } .topbar .tab:hover { color: var(--title); background: transparent; border: 0; } .topbar .tab.active { color: var(--title); background: transparent; border: 0; box-shadow: none; font-weight: 620; } .topbar .tab.active::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: -7px; height: 3px; border-radius: 2px; background: #a9c6e6; } .topbar .btn.sm, .topbar .btn.ghost.sm { min-height: 0; padding: 6px 2px; font-size: 13.5px; color: var(--title); background: transparent; border: 0; box-shadow: none; font-weight: 560; } .topbar .btn.sm:hover, .topbar .btn.ghost.sm:hover { color: #000; background: transparent; box-shadow: none; transform: none; } .topbar .tag { color: var(--ink-soft); background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.06); } .topbar .role-pills { display: none; } /* The second-edition entry remains reachable on every page and screen width. */ .topbar { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scroll-behavior: auto; } .topbar > .tab, .topbar .who { flex: 0 0 auto; white-space: nowrap; } .role-pills { display: flex; gap: 6px; } /* ---------- 容器 / 标题 ---------- */ .container { max-width: 1240px; margin: 0 auto; padding: 116px 32px 120px; } .container.intro { max-width: none; padding: 0 0 120px; } .page-head { margin: 18px 0 38px; } .page-head h1 { margin: 0 0 10px; font-size: clamp(32px,3.6vw,48px); line-height: 1.06; font-weight: 640; letter-spacing: -0.015em; color: var(--title); } /* 这行含「当前阶段 / 报名初审 / 最终作品」三组状态，压在大球上，用 --muted 太淡 */ .page-head p { margin: 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; max-width: 720px; } /* ---------- Tabs ---------- */ .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; } .tab { padding: 9px 20px; border-radius: var(--radius-pill); cursor: pointer; font-size: 14px; font-weight: 600; color: #000; white-space: nowrap; background: rgba(255,255,255,0.6); border: 1px solid #000; transition: background .16s ease, color .16s ease; } .tab:hover { background: rgba(0,0,0,0.06); color: #000; } .tab.active { color: #fff; background: #000; border-color: #000; box-shadow: none; } /* ---------- 卡片 / 面板（白纸 + 发丝线，弱化玻璃感）---------- */ /* 卡片 / 面板：超大圆角 + 纯白底，靠圆角和留白建立层次，不靠阴影 */ .card, .panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; } .panel { padding: 36px; margin-bottom: 22px; } .panel > h2 { margin: 0 0 10px; font-size: 32px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; color: var(--title); } .panel > .sub { margin: 0 0 28px; color: var(--muted); font-size: 16px; line-height: 1.58; } .card { padding: 28px; transition: transform .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease); } .card:hover { transform: translateY(-3px); background: #fff; border-color: #000; box-shadow: none; } .grid { display: grid; gap: 18px; } .cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } @media (max-width: 920px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } } .card h4 { margin: 0 0 10px; font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -0.025em; color: var(--title); text-wrap: balance; } .card p { margin: 0; font-size: 16px; line-height: 1.58; color: var(--ink); text-wrap: pretty; } /* 首页数字卡：编辑式「细线 + 大数字」，去卡片外壳与装饰点 */ .metric-row .card.metric { min-height: 0; padding: 20px 8px 8px; background: linear-gradient(180deg, rgba(247,243,237,0.78), rgba(247,243,237,0.28)); border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; box-shadow: none; backdrop-filter: blur(3px); } .metric-row .card.metric:hover { transform: none; background: linear-gradient(180deg, rgba(247,243,237,0.78), rgba(247,243,237,0.28)); border-color: var(--line-strong); box-shadow: none; } /* 后台/总裁网格里的指标卡：维持正常白盒卡片（仅复用大数字排版），与其他标签页一致 */ .card.metric { padding: 22px 22px 18px; } .metric strong { display: block; font-size: clamp(26px,2.4vw,34px); line-height: 1.04; font-weight: 580; letter-spacing: -0.02em; color: var(--title); white-space: nowrap; font-variant-numeric: tabular-nums; } .metric span { display: block; margin-top: 9px; color: var(--muted); font-size: 12.5px; line-height: 1.5; } .metric::after { content: none; } /* ---------- 表单 ---------- */ .field { display: grid; gap: 6px; margin-bottom: 16px; } .field > label { font-size: 13px; font-weight: 640; color: var(--ink-soft); } .field .hint { font-size: 12px; color: var(--muted); font-weight: 400; } input[type=text], input[type=number], input[type=url], input[type=search], select, textarea { width: 100%; padding: 11px 13px; font-size: 14px; font-family: inherit; color: var(--ink); background: rgba(255,255,255,0.92); border: 1px solid rgba(0,0,0,0.15); border-radius: 9px; outline: none; transition: border .15s, box-shadow .15s, background .15s; color-scheme: light; } select option { background: #fff; color: var(--ink); } input::placeholder, textarea::placeholder { color: var(--dim); } textarea { min-height: 86px; resize: vertical; line-height: 1.55; } input:focus, select:focus, textarea:focus { background: #fff; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(29,29,31,0.08); } .field-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; } @media (max-width: 720px) { .field-row { grid-template-columns: 1fr; } } input[type=file] { color: var(--muted); } /* ---------- 按钮（主按钮 = 墨黑胶囊；蓝色仅作点缀）---------- */ /* 按钮：RD 的标志件——胶囊 + 1px 纯黑描边。 主操作纯黑填充，次级为白底描边；不用阴影堆层次，靠描边和填充区分。 */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 26px; font-size: 15px; font-weight: 600; font-family: inherit; white-space: nowrap; color: #fff; background: #000; border: 1px solid #000; border-radius: var(--radius-pill); cursor: pointer; box-shadow: none; line-height: 1.2; transition: transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); } .btn:hover { transform: translateY(-1px); background: #262626; color: #fff; border-color: #262626; box-shadow: none; } .btn:active { transform: translateY(0) scale(0.985); } .btn:disabled { opacity: .35; cursor: not-allowed; transform: none; } .btn.ghost { color: #000; background: rgba(255,255,255,0.6); border: 1px solid #000; box-shadow: none; } .btn.ghost:hover { background: #000; color: #fff; border-color: #000; box-shadow: none; } .btn.sm { padding: 7px 16px; font-size: 13px; } .btn.gold { background: var(--butter); color: #000; border-color: #000; box-shadow: none; } .btn.gold:hover { background: #FFDF74; color: #000; } .btn.danger { background: var(--coral); border-color: var(--coral); } .btn.danger:hover { background: #c23a3a; border-color: #c23a3a; } .btn.blue { background: var(--periwinkle); color: #000; border-color: #000; } .btn.blue:hover { background: #9FBFFC; color: #000; } .btn.sm { padding: 6px 14px; font-size: 12.5px; } .btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } @media (max-width: 560px) { .topbar { min-height: 52px; padding: 0 14px; gap: 10px; } .topbar .brand { gap: 7px; font-size: 13px; line-height: 1.1; min-width: 0; flex: 1 1 auto; } .topbar .brand > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 登录态导航项多，窄屏下品牌文字会被压成残字：有 tab 时只留 logo */ .topbar:has(.tab) .brand { flex: 0 0 auto; } .topbar:has(.tab) .brand > div { display: none; } .topbar .brand img { width: 24px; height: 24px; flex: 0 0 24px; } .topbar .brand small { display: none; } .topbar .spacer { display: none; } .topbar .tab { padding: 6px 1px; margin: 0 5px; font-size: 12.5px; flex: 0 0 auto; } .topbar .tab.active::after { bottom: -5px; height: 2px; } .topbar .btn.sm, .topbar .btn.ghost.sm { padding: 6px 1px; font-size: 12.5px; flex: 0 0 auto; } /* 保留本人头像；多余导航内容通过横向滑动查看。 */ .topbar .who .avatar { width: 24px; height: 24px; flex: 0 0 24px; } .topbar .who { gap: 6px; } } /* ---------- 表格（无灰底表头：大写微字距 + 发丝线）---------- */ table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } th, td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13.5px; vertical-align: middle; } th { background: transparent; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; border-bottom: 1px solid var(--line-strong); } tr:last-child td { border-bottom: 0; } tbody tr { transition: background .14s ease; } tbody tr:hover td { background: #fafafa; } .table-wrap { overflow-x: auto; border-radius: var(--radius); } /* table 是 width:100%，列一多就会把每格压到比内容还窄，中文于是被逐字换行成竖排。 给一个最小宽度，让 .table-wrap 的横向滚动真正接管，而不是继续压缩列宽。 */ table { min-width: 640px; } .table-wrap table.wide { min-width: 1080px; } /* 榜单 / 多列宽表：内容一律单行，超宽时横向滚动（避免中文被挤成竖排） */ .lb th, .lb td { white-space: nowrap; } .lb td.lb-title { font-weight: 640; } /* 状态、数字、时间等短内容列：永远单行 */ th.nw, td.nw { white-space: nowrap; } td.num { font-variant-numeric: tabular-nums; white-space: nowrap; } /* 表格行内操作区：按钮横向排列、不换行、留出间距 */ .row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; } .row-actions .btn { flex: 0 0 auto; } /* 题目列：给下限宽度避免被状态列挤没，同时封顶宽度。 题目自动取 POS 事项编码，可能是几十个编码拼成的长串（线上已出现单行撑到 ~800px）， 因此正文最多显示 2 行后省略，完整内容由 title 悬停与「查看」弹窗承担。 */ /* 两行截断只能挂在单元格「里面」的元素上。 千万不要给 td 本身设 display:-webkit-box —— 那会把它从表格布局里摘出去 （td 不再是 table-cell），整张表的列会全部错位。踩过一次，记在这里。 .clamp2 是不带字重的版本，给不需要加粗的标题用（如作品展示页的 POS 编号列）。 */ td.col-title { min-width: 190px; max-width: 340px; } td.col-title b, td.col-title .clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; line-height: 1.45; } td.col-title .clamp2 { font-weight: 400; } /* 方向名很长（如「经营增长与爆品机会洞察」），限宽省略，完整值挂 title 悬停可见 */ td.col-track { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 同一格内并排的两个状态徽章（材料 / 作品） */ .badge-pair { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .badge-pair .sep { color: var(--muted); font-size: 11px; } /* 多列表格收紧内边距，让关键列（状态 / 操作）留在首屏内 */ table.compact th, table.compact td { padding: 11px 12px; } .score { font-weight: 800; color: var(--green-dark); white-space: nowrap; } /* ---------- 标签 / 徽章 ---------- */ .tag { display: inline-flex; align-items: center; min-height: 25px; padding: 2px 12px; border-radius: 999px; background: rgba(255,255,255,0.6); color: var(--ink-soft); font-size: 12px; font-weight: 540; border: 1px solid rgba(0,0,0,0.1); } .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* 徽章背后是动态 Canvas 点云大球（body 背景透明），半透明底色会被球体透穿、 并随自转忽明忽暗。这里统一用 #fff 打底再叠同样的色，在白底上与原设计一致， 但在大球上不再糊。gold/red 的文字色同时压深一档，保证小字号下的对比度。 */ .badge.gray { color: #5f6368; background: #eef0f3; } .badge.green { color: #08753d; background: linear-gradient(rgba(0,168,80,0.13), rgba(0,168,80,0.13)), #fff; } .badge.gold { color: #9c6500; background: linear-gradient(rgba(245,168,0,0.17), rgba(245,168,0,0.17)), #fff; } .badge.red { color: #b80025; background: linear-gradient(rgba(225,0,45,0.10), rgba(225,0,45,0.10)), #fff; } .badge.blue { color: #1d4ed8; background: linear-gradient(rgba(59,130,246,0.13), rgba(59,130,246,0.13)), #fff; } /* ---------- 杂项 ---------- */ .muted { color: var(--muted); } .empty { padding: 48px 20px; text-align: center; color: var(--muted); font-size: 14px; } .divider { height: 1px; background: var(--line); margin: 22px 0; border: 0; } .callout { padding: 16px 20px; border-radius: var(--radius); position: relative; font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); background: rgba(110,166,255,0.07); border: 1px solid rgba(59,130,246,0.16); } .callout h4 { margin: 0 0 6px; font-size: 16px; color: var(--ink); } .callout p { margin: 0; } .callout.warn { background: rgba(225,0,45,0.04); border-color: rgba(225,0,45,0.14); } .callout.gold { background: rgba(245,168,0,0.06); border-color: rgba(245,168,0,0.18); } .file-item { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; margin-bottom: 8px; font-size: 13px; } .file-item .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Toast ---------- */ #toast-wrap { position: fixed; top: 18px; right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 10px; } .toast { padding: 12px 17px; border-radius: var(--radius); color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: 0 14px 36px rgba(20,24,40,0.22); animation: slidein .2s ease; max-width: 360px; } .toast.ok { background: var(--ink-btn); } .toast.err { background: #e1002d; } .toast.info { background: #3b82f6; } @keyframes slidein { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } } /* ---------- Modal ---------- */ .modal-mask { position: fixed; inset: 0; z-index: 150; background: rgba(20,24,40,0.4); display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(5px); } .modal { width: min(640px,100%); max-height: 86vh; overflow: auto; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 30px; box-shadow: 0 30px 80px rgba(20,24,40,0.26); } /* 上传进度：大文件必须看得见在动，否则会被当成卡死 */ .up-progress-wrap { margin: 10px 0 12px; } .up-progress { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .up-progress span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width .2s ease; } /* 列表筛选栏：搜索 + 下拉，窄屏自动换行 */ .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 4px; } .filter-input { flex: 1 1 260px; min-width: 200px; padding: 8px 12px; font-size: 13px; font-family: inherit; color: var(--ink); background: #fff; border: 1px solid var(--border-strong); border-radius: 8px; } .filter-input:focus { outline: none; border-color: var(--accent); } /* 下拉必须给 flex 基准并允许收缩，否则在 flex-wrap 容器里会各占一整行 */ .filter-sel { flex: 0 1 auto; width: auto; min-width: 118px; max-width: 190px; padding: 8px 10px; font-size: 13px; font-family: inherit; color: var(--ink); background: #fff; border: 1px solid var(--border-strong); border-radius: 8px; cursor: pointer; } /* 案例切换 chips 与 ①②③ 子页签同排时的细分隔线 */ .chip-sep { width: 1px; align-self: stretch; margin: 4px 8px; background: var(--border-strong); } /* ⑥ 真实交付物：内嵌截图 / 录屏 */ .media-box { margin-top: 10px; padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: 10px; background: rgba(255,255,255,0.7); transition: background .18s, border-color .18s; } .media-box.dragover { border-color: var(--accent); background: rgba(0,113,227,0.06); } .media-box.uploading { opacity: .6; pointer-events: none; } .media-tip { font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; } .media-pick { color: var(--accent); cursor: pointer; text-decoration: underline; } .media-pick input { display: none; } .media-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; } .media-list:empty { margin-top: 0; } .media-item { position: relative; width: 160px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; } .media-item img, .media-item video { display: block; width: 100%; height: 104px; object-fit: cover; background: var(--surface-2); } .media-no { position: absolute; left: 6px; top: 6px; z-index: 1; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: rgba(0,0,0,0.62); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } .media-meta { display: flex; justify-content: space-between; gap: 6px; padding: 6px 8px; font-size: 11.5px; } .media-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .media-del { position: absolute; right: 6px; top: 6px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(0,0,0,0.62); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; } .media-del:hover { background: var(--coral); } /* 初审详情等长内容弹窗：10 项材料在 640px 里读不下来 */ .modal.wide { width: min(900px,100%); } /* 弹窗里的材料条目：保留参赛者填写的换行，长编码串强制断行 */ .mtl { margin-bottom: 16px; } .mtl-k { font-weight: 700; font-size: 13px; color: var(--title); margin-bottom: 4px; } .mtl-v { font-size: 13.5px; color: var(--ink-soft); white-space: pre-wrap; word-break: break-word; line-height: 1.7; } .mtl-v.empty { color: var(--dim); font-style: italic; } /* 长题目在弹窗里完整展示，但限高可滚，避免弹窗被一串编码撑爆 */ .mtl-title-long { max-height: 190px; overflow: auto; padding: 10px 12px; background: var(--surface-2); border-radius: 8px; font-size: 13px; line-height: 1.7; word-break: break-word; } .modal h3 { margin: 0 0 18px; font-size: 20px; letter-spacing: -0.01em; } .hidden { display: none !important; } /* 评分输入 */ .score-input { width: 84px; text-align: center; font-weight: 700; } .crit-row { display: grid; grid-template-columns: 1fr 110px; gap: 12px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); } .crit-row:last-child { border-bottom: 0; } .crit-row .cname { font-weight: 680; font-size: 14px; } .crit-row .cdesc { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.6; } .crit-row textarea { margin-top: 8px; min-height: 48px; } /* ---------- 组织架构 ---------- */ .org-layout { display: grid; grid-template-columns: 300px 1fr; gap: 18px; } @media (max-width: 920px) { .org-layout { grid-template-columns: 1fr; } } .org-tree { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; max-height: 600px; overflow: auto; background: rgba(255,255,255,0.7); } .tree-row { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 9px; cursor: pointer; font-size: 13.5px; color: var(--ink-soft); } .tree-row:hover { background: #eef0f4; } .tree-row.active { background: var(--ink-btn); color: #fff; font-weight: 700; } .tree-caret { width: 16px; flex: 0 0 16px; display: inline-grid; place-items: center; color: var(--muted); transition: transform .12s; user-select: none; font-size: 11px; } .tree-caret.open { transform: rotate(90deg); } .tree-caret.leaf { visibility: hidden; } .tree-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tree-count { color: var(--muted); font-size: 12px; } .tree-row.active .tree-count { color: rgba(255,255,255,0.7); } .tree-children.collapsed { display: none; } .org-members { min-width: 0; } .mavatar { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--ink-btn); color: #fff; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; } img.mavatar { object-fit: cover; } .role-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-soft); } /* ---------- 落地页 ---------- */ .intro { padding-top: 0; } /* 首屏：Auremin 式非对称构图 —— 大标题居左，点云球偏右（球的偏移在 common.js）*/ .hero { position: relative; margin: 0; min-height: min(860px, 100vh); padding: clamp(170px,24vh,270px) 24px clamp(170px,19vh,240px) clamp(28px, 7vw, 110px); overflow: visible; text-align: left; background: transparent; border: 0; box-shadow: none; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } .hero::after { content: none; } /* 标题后白色阅读雾已移除（恢复：还原 radial-gradient 净区） */ .hero .eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--muted); font-weight: 400; font-size: 16px; text-transform: none; letter-spacing: normal; margin: 0 0 28px; position: relative; z-index: 1; } .hero .eyebrow::before { content: ""; width: 30px; height: 1px; background: #000; } /* logo 是 1:1 PNG（字标横在画布中部，上下大片透明）：放大宽度 + cover 上下裁切留白， 既醒目又不会和下方标题拉开大空隙 */ .hero .hero-logo { display: block; width: clamp(150px, 14.5vw, 208px); height: clamp(42px, 4vw, 58px); object-fit: cover; object-position: left center; margin: 0 0 18px; filter: brightness(0) invert(0.22); opacity: .85; position: relative; z-index: 1; } .hero h1 { margin: 0; max-width: 11em; font-family: inherit; font-size: clamp(44px,6.6vw,96px); line-height: 1.04; font-weight: 600; letter-spacing: -0.035em; color: var(--title); position: relative; z-index: 1; text-wrap: balance; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* 「Ai」不做任何框、底色或换色：标题已经是 96px 纯黑，再加装饰只会打断阅读。 汉字走 PingFang、拉丁走 Urbanist，两者字形本来就有区别，不必再额外强调。 只留一点点左右外边距——中西文混排时字距会贴得偏紧。 */ .hero h1 .t-ai { font-family: inherit; font-weight: inherit; letter-spacing: inherit; color: inherit; background: none; border-radius: 0; box-shadow: none; padding: 0; margin: 0 .05em; -webkit-text-fill-color: currentColor; } .hero .lead { margin: 26px 0 0; max-width: 600px; color: #000; font-size: clamp(18px,1.7vw,25px); line-height: 1.5; font-weight: 400; position: relative; z-index: 1; text-wrap: balance; } .hero .lead strong { display: block; margin-bottom: 6px; color: #000; font-weight: 700; } .hero .lead span { display: block; color: var(--muted); font-size: 0.86em; } .hero .hero-cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-start; position: relative; z-index: 1; } .hero .hero-cta .btn { min-width: 150px; padding: 15px 34px; font-size: 16px; } @media (max-width: 720px) { /* 移动端球居中，文案恢复居中构图 */ .hero { padding: clamp(220px,27vh,290px) 22px clamp(150px,17vh,210px); text-align: center; align-items: center; } .hero h1 { font-size: 34px; } .hero .eyebrow { margin-left: auto; margin-right: auto; } .hero .eyebrow::after { content: ""; width: 26px; height: 1px; background: rgba(29,29,31,0.26); } .hero .hero-logo { margin-left: auto; margin-right: auto; object-position: center; } .hero .lead { margin-left: auto; margin-right: auto; } .hero .hero-cta { justify-content: center; } } .metric-row { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 26px; margin-bottom: 16px; } @media (max-width: 1100px) { .metric-row { grid-template-columns: repeat(3,1fr); gap: 20px; } } @media (max-width: 720px) { .metric-row { grid-template-columns: repeat(2,1fr); gap: 16px; } } .tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } /* 步骤：编辑式行 —— 大号浅色序号 + 细线分隔，无卡片外壳 */ .steps { display: grid; gap: 0; counter-reset: step; } .step { display: grid; grid-template-columns: 86px 1fr; gap: 20px; align-items: start; padding: 26px 4px; background: transparent; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; box-shadow: none; } .step:last-child { border-bottom: 1px solid var(--line-strong); } .step::before { counter-increment: step; content: counter(step,decimal-leading-zero); width: auto; height: auto; display: block; border-radius: 0; color: var(--dim); background: transparent; font-size: clamp(26px,2.4vw,34px); font-weight: 480; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .step h4 { margin: 2px 0 10px; font-size: 24px; line-height: 1.15; font-weight: 600; letter-spacing: -0.025em; color: var(--title); text-wrap: balance; } .step p { margin: 0; color: var(--ink); font-size: 16px; line-height: 1.58; text-wrap: pretty; } @media (max-width: 560px) { .step { grid-template-columns: 56px 1fr; gap: 12px; } } .quote { padding: 18px 22px; background: var(--surface); border: 1px solid var(--border); border-left: 2px solid var(--ink); border-radius: var(--radius); color: var(--ink-soft); font-size: 14px; line-height: 1.7; } .quote strong { color: var(--ink); } .template { display: grid; gap: 10px; } .template .tpl { display: grid; gap: 3px; padding: 13px 15px; background: rgba(255,255,255,0.6); border: 1px dashed var(--border-strong); border-radius: var(--radius); } .template .tpl b { font-size: 13.5px; } .template .tpl span { color: var(--muted); font-size: 13px; } .footer { margin: 32px 0 8px; padding-top: 26px; border-top: 1px solid var(--line); color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: var(--track); text-align: center; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .section-head h3 { margin: 0; font-size: 24px; font-weight: 660; letter-spacing: -0.01em; line-height: 1.18; text-wrap: balance; } .section-head p { margin: 0; max-width: 520px; color: var(--muted); font-size: 13.5px; line-height: 1.6; text-align: right; text-wrap: pretty; } @media (max-width: 720px) { .section-head { display: block; } .section-head p { text-align: left; margin-top: 6px; } } .block { margin: 0 auto; max-width: 1180px; padding: clamp(100px, 13vh, 156px) 32px; } .block.center { text-align: center; } .block.center .s-sub { margin-left: auto; margin-right: auto; } .s-label { display: inline-flex; align-items: center; gap: 12px; font-size: 11.5px; font-weight: 580; text-transform: uppercase; letter-spacing: var(--track); color: var(--muted); margin-bottom: 22px; } .block.center .s-label::before, .block.center .s-label::after { content: ""; width: 26px; height: 1px; background: rgba(75,72,64,0.26); } .block:not(.center) .s-label::before { content: ""; width: 26px; height: 1px; background: rgba(75,72,64,0.26); } /* 章节编号：编辑式索引，建立「01—06」的序列感 */ .s-idx { font-style: normal; font-weight: 620; font-size: 11.5px; letter-spacing: 0.06em; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .s-title { font-size: clamp(32px,4vw,56px); font-weight: 600; line-height: 1.07; letter-spacing: -0.026em; margin: 0 0 18px; color: var(--title); text-wrap: balance; } .s-sub { color: var(--muted); font-size: clamp(16px,1.4vw,18.5px); line-height: 1.78; letter-spacing: 0.01em; max-width: 640px; margin: 0; text-wrap: pretty; } .br-pc { display: inline; } @media (max-width: 560px) { .s-title { font-size: 27px; } .block { padding-left: 22px; padding-right: 22px; } .br-pc { display: none; } } /* ---------- 项目方向：编辑式索引列表（大号序号 + 发丝线分隔，取代卡片汤）---------- */ .track-index { border-top: 1px solid var(--line-strong); } .track-row { display: grid; grid-template-columns: 84px minmax(260px, 1fr) 1.25fr; gap: 28px; align-items: start; padding: 30px 8px; border-bottom: 1px solid var(--line); transition: background .25s var(--ease); } .track-row:hover { background: rgba(255,255,255,0.5); } .track-no { font-size: clamp(26px,2.4vw,34px); font-weight: 480; line-height: 1; letter-spacing: -0.02em; color: var(--dim); font-variant-numeric: tabular-nums; padding-top: 2px; } .track-main h4 { margin: 0 0 8px; font-size: clamp(17px,1.5vw,21px); font-weight: 640; letter-spacing: -0.01em; color: var(--title); } .track-label { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .track-main .tag-list { margin-top: 4px; } .track-desc { margin: 2px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.75; text-wrap: pretty; } @media (max-width: 820px) { .track-row { grid-template-columns: 54px 1fr; gap: 14px 18px; } .track-desc { grid-column: 2; margin-top: 10px; } } .shift { display: grid; grid-template-columns: 1fr 56px 1fr; gap: 18px; align-items: stretch; margin-top: 42px; text-align: left; } @media (max-width: 820px) { .shift { grid-template-columns: 1fr; } .shift .shift-arrow { transform: rotate(90deg); height: 30px; } } .shift .col { padding: 34px; border-radius: var(--radius); } /* 过去 = 退后（无底无影、文字偏灰）；现在 = 主角（白卡 + 顶部蓝线 + 投影）*/ .shift .col.before { border: 1px dashed var(--border-strong); background: transparent; box-shadow: none; } .shift .col.after { position: relative; border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow-lg); overflow: hidden; } .shift .col.after::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--periwinkle); } .shift .col .tagx { display: inline-block; font-size: 11px; font-weight: 620; letter-spacing: var(--track); text-transform: uppercase; padding: 0; margin-bottom: 16px; } .shift .col.before .tagx { color: var(--dim); } .shift .col.after .tagx { color: var(--blue); } .shift .col .big { font-size: 20px; font-weight: 680; letter-spacing: -0.01em; margin: 0 0 16px; } .shift .col.before .big { color: var(--ink-soft); } .shift .col.before ul { color: var(--muted); } .shift .col ul { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 13.8px; line-height: 2.05; } .shift .shift-arrow { align-self: center; display: grid; place-items: center; font-size: 22px; color: var(--dim); } .cta-band { position: relative; overflow: hidden; text-align: center; padding: clamp(58px,8vh,92px) 24px; border-radius: 14px; margin-top: clamp(78px,10vh,124px); background: rgba(255,255,255,0.62); border: 1px solid var(--border-strong); box-shadow: var(--shadow); backdrop-filter: blur(14px); } .cta-band h3 { position: relative; z-index: 1; margin: 0 0 12px; font-size: clamp(26px,3.4vw,42px); font-weight: 640; letter-spacing: -0.015em; color: var(--ink); } .cta-band p { position: relative; z-index: 1; margin: 0 auto 26px; max-width: 560px; color: var(--ink-soft); font-size: 15.5px; } .cta-band .hero-cta { position: relative; z-index: 1; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ---------- 阶段条 ---------- */ .stage-strip { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .stage-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 540; background: rgba(255,255,255,0.66); border: 1px solid rgba(0,0,0,0.09); color: var(--muted); } .stage-chip.passed { color: var(--ink-soft); background: rgba(29,29,31,0.05); border-color: rgba(29,29,31,0.06); } .stage-chip.active { color: #fff; background: var(--ink-btn); border-color: transparent; box-shadow: 0 1px 2px rgba(0,0,0,0.16); } .stage-arrow { color: var(--dim); } /* ---------- 个人进度时间线 ---------- */ .psteps { position: relative; margin-top: 6px; } .pstep { position: relative; display: flex; gap: 14px; padding-bottom: 22px; } .pstep:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 1px; background: rgba(20,24,40,0.12); } .pstep .dot { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 700; z-index: 1; } .pstep .dot.done { background: #00a050; } .pstep .dot.active { background: var(--ink-btn); box-shadow: 0 0 0 5px rgba(29,29,31,0.08); } .pstep .dot.todo { background: #dfe3ea; color: var(--muted); } .pstep .dot.warn { background: #e1002d; } .pstep .pbody { padding-top: 3px; } .pstep .pbody h4 { margin: 0 0 3px; font-size: 15px; font-weight: 640; } .pstep .pbody p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; } /* ---------- 子导航 ---------- */ .subtabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } /* 子标签同样压在大球上：底色提到接近不透明并加模糊，避免粒子从字后穿出来 */ .subtab { padding: 7px 15px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 540; background: rgba(255,255,255,0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--border-strong); color: var(--ink); } .subtab:hover { background: #fff; } .subtab.active { color: #fff; background: var(--ink-btn); border-color: transparent; } /* 锁定态原来是 --dim 文字 + 2.5% 黑底，叠在大球上几乎不可见（实测对比度 1.9）。 #6f6d66 比 --ink 浅、比 --muted 深：既保留「不可点」的弱化感，又能在大球最深处 仍满足 WCAG AA 4.5:1。虚线边框和锁图标承担主要的状态语义，不靠压低对比度来表达。 */ .subtab.locked { cursor: not-allowed; color: #6f6d66; background: rgba(255,255,255,0.93); border-style: dashed; border-color: var(--border-strong); } .subtab.locked:hover { background: rgba(255,255,255,0.93); } details.rules { margin: 18px auto 0; max-width: 1180px; border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 18px; background: var(--surface); } details.rules > summary { cursor: pointer; padding: 13px 0; font-weight: 660; color: var(--ink); list-style: none; } details.rules > summary::-webkit-details-marker { display: none; } details.rules > summary::before { content: "▸ "; } details.rules[open] > summary::before { content: "▾ "; } /* ---------- 项目方向多选复选框 ---------- */ .trk-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 14px; } @media (max-width: 560px) { .trk-grid { grid-template-columns: 1fr; } } .trk-chk { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 9px; background: rgba(255,255,255,0.6); font-size: 13.5px; color: var(--ink-soft); cursor: pointer; transition: border-color .15s, background .15s; } .trk-chk:hover { background: #fff; border-color: var(--border-strong); } .trk-chk:has(input:checked) { border-color: var(--blue); background: rgba(0,113,227,0.05); color: var(--ink); } .trk-chk input[type=checkbox] { width: 16px; height: 16px; flex: 0 0 16px; accent-color: var(--blue); margin-top: 1px; } /* 方向名 + 示例两行 */ .trk-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; line-height: 1.4; } .trk-text b { font-weight: 600; color: var(--ink); } .trk-text i { font-style: normal; font-size: 12px; color: var(--muted); line-height: 1.5; } .trk-custom-list { display: grid; gap: 8px; margin-top: 8px; } .trk-chk.trk-custom { border-style: dashed; } .trk-custom .trk-custom-input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 0; font-size: 13.5px; font-family: inherit; color: var(--ink); } .trk-custom .trk-custom-input::placeholder { color: var(--muted); } .trk-custom-rm { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; } .trk-custom-rm:hover { background: rgba(225,0,45,0.1); color: #d70015; } /* ---------- 滚动入场动效（高端编辑式：进入视口柔和上浮淡入）---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---------- AI 初评 ---------- */ .ai-sub { margin: 16px 0 6px; font-size: 13.5px; font-weight: 680; color: var(--ink); } .ai-list { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 13px; line-height: 1.85; } .ai-list li { margin: 3px 0; } /* ── 带头像的人员选择器（原生 select 放不了图片，故自绘） ── */ .pp { position: relative; } .pp-btn { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line, #dce4e2); border-radius: 6px; background: var(--surface, #fff); color: inherit; font: inherit; text-align: left; cursor: pointer; min-height: 40px; } .pp-btn:hover { border-color: var(--accent, #0e6e63); } .pp-btn:focus-visible { outline: 2px solid var(--accent, #0e6e63); outline-offset: 1px; } .pp-btn .pp-ph { color: var(--faint, #8c9b98); } .pp-btn .pp-caret { margin-left: auto; color: var(--faint, #8c9b98); font-size: 11px; } .pp-pop { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface, #fff); border: 1px solid var(--line, #dce4e2); border-radius: 8px; box-shadow: 0 12px 32px rgba(20, 40, 40, .16); max-height: 320px; display: flex; flex-direction: column; } .pp-search { padding: 8px; border-bottom: 1px solid var(--line-soft, #e8eeec); } .pp-search input { width: 100%; padding: 7px 10px; border: 1px solid var(--line, #dce4e2); border-radius: 5px; font: inherit; } .pp-list { overflow-y: auto; padding: 4px; } .pp-opt { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 5px; cursor: pointer; } .pp-opt:hover, .pp-opt.on { background: rgba(14, 110, 99, .1); } .pp-opt small { margin-left: auto; color: var(--faint, #8c9b98); font-size: 11.5px; } .pp-empty { padding: 16px; text-align: center; color: var(--faint, #8c9b98); font-size: 13px; } .pp-opt.pp-dis { opacity: .4; cursor: not-allowed; } /* ---- 开关（消息推送等运行时闸门）---- */ .sw-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line, #e6ece9); } .sw-row:first-child { border-top: 0; } .sw-row .sw-txt { flex: 1 1 auto; min-width: 0; } .sw-row .sw-txt b { display: block; font-size: 13.5px; font-weight: 600; } .sw-row .sw-txt small { display: block; margin-top: 2px; color: var(--faint, #8c9b98); font-size: 12px; } .sw-row.sw-master { padding: 14px 0 16px; } .sw-row.sw-master .sw-txt b { font-size: 15px; } .sw-row.sw-dis { opacity: .45; } .sw-row.sw-dis .sw { cursor: not-allowed; } .sw { position: relative; flex: 0 0 auto; width: 46px; height: 26px; border-radius: 13px; background: var(--line, #d9e2de); border: 0; cursor: pointer; padding: 0; transition: background .18s ease; } .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.24); transition: transform .18s cubic-bezier(.34,1.56,.64,1); } .sw[aria-checked="true"] { background: var(--ok, #2f9e6f); } .sw[aria-checked="true"]::after { transform: translateX(20px); } .sw:disabled { cursor: not-allowed; } .sw:focus-visible { outline: 2px solid var(--accent, #2f6f5e); outline-offset: 2px; } /* 开关长在自检表格里时的排版 */ table.compact td .sw { vertical-align: middle; } table.compact td:last-child { padding-right: 4px; } /* ---- 赛程进度看板 ---- */ .pg-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 16px; } .pg-kpi { padding: 14px 16px; border: 1px solid var(--line, #e6ece9); border-radius: 12px; background: var(--card-2, rgba(255,255,255,.5)); } .pg-kpi small { display: block; font-size: 12px; color: var(--faint, #8c9b98); } .pg-kpi b { display: block; margin-top: 4px; font-size: 22px; font-weight: 650; letter-spacing: -.01em; } .pg-kpi span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--faint, #8c9b98); } .pg-dot { display: inline-block; width: 14px; height: 14px; margin-right: 8px; border-radius: 50%; border: 2px solid var(--line, #d9e2de); vertical-align: -2px; box-sizing: border-box; font-size: 9px; line-height: 10px; text-align: center; color: #fff; } .pg-dot.done { background: var(--ok, #2f9e6f); border-color: var(--ok, #2f9e6f); } .pg-dot.active { background: var(--accent, #2f6f5e); border-color: var(--accent, #2f6f5e); animation: pg-pulse 1.8s ease-in-out infinite; } .pg-row.todo td { color: var(--faint, #8c9b98); } .pg-row.active td { background: color-mix(in srgb, var(--accent, #2f6f5e) 5%, transparent); } .pg-row.pg-over td { background: color-mix(in srgb, #d9534f 7%, transparent); } .pg-bar { height: 6px; border-radius: 3px; background: var(--line, #e6ece9); overflow: hidden; margin-bottom: 3px; } .pg-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent, #2f6f5e); transition: width .4s ease; } .pg-row.done .pg-bar i { background: var(--ok, #2f9e6f); } /* 进行中的阶段：圆点做呼吸式闪烁，让人一眼找到「现在卡在哪一步」。 用 box-shadow 扩散而不是 transform:scale——圆点在表格单元格里， 缩放会带动行高抖动。透明度同时轻微起伏，弱化生硬的开关感。 */ @keyframes pg-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #2f6f5e) 42%, transparent); opacity: 1; } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent, #2f6f5e) 0%, transparent); opacity: .62; } } /* 参赛者进度页的当前步骤同理 */ .pstep .dot.active { animation: pstep-pulse 1.8s ease-in-out infinite; } @keyframes pstep-pulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(29,29,31,0.10); } 50% { box-shadow: 0 0 0 11px rgba(29,29,31,0); } } /* 系统设置了「减少动态效果」时不闪，改用静态光圈保持同样的强调。 闪烁对前庭敏感人群和注意力障碍者是实打实的干扰，不能只当装饰处理。 */ @media (prefers-reduced-motion: reduce) { .pg-dot.active { animation: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #2f6f5e) 18%, transparent); } .pstep .dot.active { animation: none; box-shadow: 0 0 0 5px rgba(29,29,31,0.08); } } /* ===== 从 RD 案例页学来的两个模式 ===== */ /* 区块节奏：案例页每个 section 之间是稳定的 100px。 之前面板间距 22px，一屏塞满，读起来没有呼吸点。 功能页取 56px（表格多，100px 会让人一直滚），内容页用 .section-gap 拿满。 */ .panel + .panel { margin-top: 34px; } .section-gap { margin-bottom: clamp(56px, 8vw, 100px); } /* 信息行：小灰标签在上、黑值在下，横向平铺。 RD 案例页顶部的 Project / Industries / Location / Date 就是这个结构， 比「标签：值」的冒号写法清爽，也更容易扫。 */ /* dl 里每组要用 div 包住 dt/dd（HTML 规范允许），否则 flex 会把 dt 和 dd 拆成同级两列、 标签和值各排各的。这里对包裹层和直接子元素都生效。 */ .meta-row { display: flex; flex-wrap: wrap; gap: 18px 44px; margin: 0 0 8px; padding: 0; list-style: none; } .meta-row > * { min-width: 0; margin: 0; } .meta-row dt, .meta-row .k { margin: 0 0 4px; color: var(--muted); font-size: 14px; font-weight: 400; line-height: 1.5; } .meta-row dd, .meta-row .v { margin: 0; color: var(--title); font-size: 20px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; } /* 媒体圆角：案例页里的图统一 20px，比卡片的 28px 小一档—— 图片本身有内容，圆角太大会啃掉画面。 */ img.media, .media img, .thumb, .shot { border-radius: 20px; } /* 引文：案例页用 20px/1.4 的大字承接观点，不加引号也不加竖线 */ .quote { margin: 0; color: var(--title); font-size: 20px; line-height: 1.4; font-weight: 400; } .quote + .quote-by { margin-top: 10px; color: var(--muted); font-size: 16px; } /* ---- 作品展示页：展开详情的浮动收起条 ---- */ /* 必须用 fixed 不能用 sticky：这条按钮原本放在详情区里做 sticky， 但 .table-wrap 带 overflow-x:auto，会成为 sticky 的定位祖先， 于是 top 只相对那个容器计算、垂直方向根本吸不住。fixed 挂在 body 上才脱得开。 top 由 JS 按顶栏实测高度写入，移动端顶栏更矮。 */ .wk-floatbar { position: fixed; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 16px; justify-content: space-between; width: min(1160px, calc(100vw - 32px)); margin-top: 10px; padding: 11px 18px; background: rgba(255,255,255,0.96); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border: 1px solid #000; border-radius: var(--radius-pill); box-shadow: 0 6px 24px rgba(0,0,0,0.10); animation: wkFbIn .18s var(--ease) both; } @keyframes wkFbIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } } .wk-floatbar[hidden] { display: none; } .wk-fb-txt { flex: 1 1 auto; min-width: 0; font-size: 14.5px; color: var(--title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wk-floatbar .btn { flex: 0 0 auto; } @media (max-width: 640px) { .wk-floatbar { width: calc(100vw - 20px); padding: 9px 14px; font-size: 13px; } } /* ---- 作品展示页：图片 / 视频灯箱 ---- */ .wk-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: rgba(12,14,13,0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: wkLbIn .18s ease both; } @keyframes wkLbIn { from { opacity: 0 } to { opacity: 1 } } .wk-lb-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(14px, 3vw, 28px); color: #fff; } .wk-lb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; } .wk-lb-acts { flex: 0 0 auto; display: flex; gap: 8px; } /* 灯箱里的按钮要在深色底上可读：反转成白描边白字 */ .wk-lightbox .btn.ghost { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); color: #fff; } .wk-lightbox .btn.ghost:hover { background: #fff; color: #000; border-color: #fff; } .wk-lb-body { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 clamp(10px, 3vw, 32px) clamp(16px, 4vw, 36px); } .wk-lb-body img, .wk-lb-body video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; background: #000; } /* 缩略图按钮：把原来的 换成