/* ═══════════════════════════════════════════ APP WORLD — DARK THEME DESIGN SYSTEM BUILD: 2026-04-23-dashboard-polish ═══════════════════════════════════════════ */ /* ═══════════════════════════════════════════ MC-CELL — efflora UsageModeCard, verbatim port ═══════════════════════════════════════════ Source: SaaS2AI/web/src/pages/marketing/LandingPage.tsx function UsageModeCard (lines 678-832) accent variant "amber" Self-contained. Does not inherit anything from legacy .ob-step* classes. Layout wrapper (.ob-steps 4-col grid) and text content are App World's. Line-by-line trace of each rule: .mc-cell — the
wrapper at line 739-758 .mc-cell__glow — the
"Top accent glow bleed" at line 760-766 .mc-cell__body — the
header at line 769 .mc-cell__pill — the mode pill div at line 771-786 .mc-cell__pill-* — the three s inside the pill (line 783-785) .mc-cell__title — the

at line 789-795 .mc-cell__desc — the

at line 798-802 .mc-status-pill — port of efflora .dashboard-status-badge (tokens.css) .mc-cta — port of efflora .dashboard-primary-btn (tokens.css) ═══════════════════════════════════════════ */ /* Current-step zone — NO card material. * * New direction (per user proposal): .ob becomes the single outer card that * contains all 4 steps as zones. The current-step "cell" is just a zone * inside that card, structurally identical to done/locked zones — same * transparent bg, no border, no shadow, no radius. State is signalled by * content density alone: amber circle + "当前步骤" label + status + desc * + CTA. No nested card, no competing material. * * This resolves: * 1. card-in-card visual — only .ob is a card now * 2. sibling-vs-current cell size mismatch — no sibling card to compare * 3. mint→amber gradient ribbon — not needed; colored circles alone carry * state, with a neutral hairline between them */ /* Current chip — selected-state with 360° amber halo bloom. * * Layered box-shadow recipe (top → bottom of stack): * 1. Inset top highlight — chip catches light from above * 2. Inset bottom edge — subtle depth * 3. Hairline lit border (spread 0, blur 0, .25 alpha) — thin amber * outline showing the chip edge is catching halo light from its own * bloom * 4. Tight inner halo (24px blur, +2px spread, .38) — bright amber * ring immediately around the chip * 5. Medium halo (48px blur, +6px spread, .22) — softer spread * 6. Atmospheric glow (80px blur, 0 spread, .12) — wide wash * 7. Dark drop shadow — grounds the chip onto the plate * * The positive spread values (+2, +6) on halos are what make them reach * visibly OUTWARD as a halo — zero-spread shadows only blur at the edge, * they don't extend away from the element. */ .mc-cell { position: relative; z-index: 2; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, rgba(12,12,12,.65) 0%, rgba(8,8,8,.72) 100%); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); box-shadow: inset 0 1px 0 rgba(255,248,235,.14), 0 0 22px 0 rgba(255,248,235,.36), 0 4px 16px -4px rgba(0,0,0,.45); transition: background .3s, box-shadow .3s; } /* Specular highlight stripe — a thin warm-white line across the top of * the Current chip, like light reflecting off a smooth glass edge. Only * on Current chip to emphasize its "featured glass" quality; Done/Locked * stay simpler. */ .mc-cell::after { content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,248,235,.38) 50%, transparent); pointer-events: none; z-index: 3; } /* Internal top-catching highlight + subtle breathing animation. * Animation pulses opacity 72-100% over 4s so the internal glow feels * alive (like iOS selected-button micro-pulse), while the external halo * on .mc-cell stays static — creates "ambient env steady, subject alive" * visual contrast that signals the chip is an interactive focal point. */ /* Top-accent glow bleed — verbatim port of Efflora's qs-step top glow * (source: SaaS2AI/web/src/pages/marketing/LandingPage.tsx:432-436). * Fixed 80px height linear gradient from top edge → transparent. NOT a * full-chip wash — confined height prevents the fog problem. Creates * "light entering from above" 3D effect: brightest where light "hits * first" at the top, fades as it "travels into" the chip. */ .mc-cell__glow { position: absolute; top: -1px; left: 0; right: 0; height: 80px; pointer-events: none; z-index: 0; background: linear-gradient(180deg, rgba(255,248,235,.08) 0%, transparent 100%); } /* Body container — carries the internal padding now that the zone itself * has its own background + shadow. Left-aligned to match done/locked zones. */ .mc-cell__body { position: relative; z-index: 1; padding: 18px 18px 20px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; } /* Circle pseudo-element removed — zone material + zone-num carry state now. */ .mc-cell__body::before { content: none; } /* Label "当前步骤" below the amber indicator circle. The "STEP N" prefix and * "·" separator are now redundant with the number inside the circle above, * so they're hidden; only the plain-language label is shown, styled as a * small amber mono kicker for rhythm parity with sibling cells' "步骤 N · * 已完成" labels. */ /* Pill + status row — kicker "当前步骤" and status indicator sit on one * line at the chip header. Row gap handles the spacing between them so * .mc-cell__pill and .mc-status-pill inside don't need their own * margin-bottom. */ .mc-head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .mc-head-row .mc-cell__pill, .mc-head-row .mc-status-pill { margin-bottom: 0; } .mc-cell__pill { display: inline-flex; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: .14em; color: rgba(255,255,255,.82); text-transform: uppercase; margin-bottom: 10px; } .mc-cell__pill-prefix, .mc-cell__pill-sep { display: none; } /* .mc-cell__pill-label inherits the kicker treatment from .mc-cell__pill — * do NOT override text-transform / letter-spacing / font-family here. */ /* lines 789-795: h3 title */ .mc-cell__title { font-size: clamp(17px, 2vw, 20px); font-weight: 700; letter-spacing: -.025em; color: var(--text-primary); margin: 0 0 8px; line-height: 1.3; font-family: var(--font); } /* lines 798-802: p description */ .mc-cell__desc { font-size: 12.5px; color: var(--text-body); line-height: 1.65; margin: 0 0 14px; font-weight: 500; /* CJK prose compensation, App World convention */ max-width: 36ch; } /* Bullet-list variant of the description — rendered when the i18n entry is a list instead of a string. Tight cards in the 4-col grid become unreadable with paragraphs, so each operational fact gets its own line. Morandi-gold middle-dot marker keeps the list consistent with the card's accent palette (no default • — reads too heavy). */ .mc-cell__bullets { list-style: none; margin: 0 0 14px; padding: 0; font-size: 12.5px; color: var(--text-body); line-height: 1.65; font-weight: 500; max-width: 36ch; } .mc-cell__bullets li { position: relative; padding: 2px 0 2px 14px; } .mc-cell__bullets li::before { content: "·"; position: absolute; left: 2px; top: 2px; font-weight: 700; color: rgba(200,169,110,.62); } .mc-cell__bullets code { padding: 0 4px; border-radius: 4px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); font-family: 'IBM Plex Mono', monospace; font-size: .92em; } /* Status indicator — pill treatment removed per design feedback: the cell already has two rounded elements (STEP chip + CTA pill); a third chip felt crowded. Now a plain inline dot + text, no background, no border. */ .mc-status-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 500; margin-bottom: 10px; } .mc-status-pill--pending { color: #f2b5b5; } .mc-status-pill--ok { color: var(--accent-mint); } .mc-status-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; box-shadow: 0 0 8px currentColor; flex-shrink: 0; } .mc-status-pill--pending .mc-status-dot { animation: mc-pulse 2s ease-in-out infinite; } @keyframes mc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } } /* CTA — verbatim port of Efflora Run's hero glass pill button * (src/pages/marketing/LandingPage.tsx:370-386 + styles/tokens.css:1357-1364). * Full-pill radius (980px), translucent white diagonal gradient, backdrop * blur + saturate + brightness boost, glass border with brighter top edge. * Matches the whole-card liquid-glass aesthetic — a solid white button * here was reading as too brand-assertive against the dark chip material. */ .mc-cta { display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; font-size: 12px; font-weight: 500; letter-spacing: -.01em; border-radius: 980px; color: rgba(255,255,255,.92); background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.08) 100%); backdrop-filter: saturate(180%) blur(20px) brightness(1.05); -webkit-backdrop-filter: saturate(180%) blur(20px) brightness(1.05); border: 1px solid rgba(255,255,255,.15); border-top-color: rgba(255,255,255,.28); box-shadow: 0 2px 12px rgba(0,0,0,.25), inset 0 1px 1px rgba(255,255,255,.12), inset 0 -1px 1px rgba(0,0,0,.08); transition: all .2s cubic-bezier(.16,1,.3,1); text-decoration: none; position: relative; overflow: hidden; } /* Button shine-sweep — verbatim port of Efflora Run's .cta-primary-btn * shimmer (source: SaaS2AI/web/src/styles/tokens.css:1332-1355). * Single-direction sweep via snap-back keyframe trick (52%→53% instantly * jumps from +260% back to -160% so the light always travels L→R, never * reverses). 5s cycle: 0-28% idle, 28-52% sweep, 53-100% idle. */ .mc-cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(108deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%); transform: translateX(-160%); animation: btn-shimmer 5s ease-in-out infinite; pointer-events: none; } @keyframes btn-shimmer { 0%, 28% { transform: translateX(-160%); } 52% { transform: translateX(260%); } 53%, 100% { transform: translateX(-160%); } } @media (prefers-reduced-motion: reduce) { .mc-cta::before { animation: none; display: none; } } .mc-cta:hover { background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.07) 50%, rgba(255,255,255,.12) 100%); border-color: rgba(255,255,255,.22); border-top-color: rgba(255,255,255,.36); box-shadow: 0 4px 20px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.16), inset 0 -1px 1px rgba(0,0,0,.08); transform: translateY(-1px); } /* ═══════════════════════════════════════════ End of MC-CELL block ═══════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ DESIGN TOKENS — Tier 1 per DESIGN_SYSTEM.md (verbatim). Source: /Users/jenniedali/Documents/SaaS2AI/web/DESIGN_SYSTEM.md §Tier 1 Do not edit these values. Aliases for App World legacy names are below. ═══════════════════════════════════════════════════════════════════ */ :root { /* ── Tier 1 — surfaces ── */ --bg: #0a0a0a; --bg-elevated: #121214; --bg-container: #17171a; /* Modal surface — 4-tier luminance hierarchy（参 Linear / Material 3 dark * mode pattern）：base → panel → hover → selected。每档 8 RGB，纯中性。 * 选中 = 再上一档 surface elevation，**不靠 glow/border 颜色**。 */ --bg-modal: #1a1a1a; /* 26 — modal base */ --bg-modal-panel: #282828; /* 40 — 默认卡片 */ --bg-modal-hover: #303030; /* 48 — hover */ --bg-modal-selected: #383838; /* 56 — selected（再亮一档） */ --border-modal: rgba(255,255,255,.16); --border-modal-strong: rgba(255,255,255,.24); --surface: rgba(255,255,255,.04); --surface-2: rgba(255,255,255,.06); --surface-hover: rgba(255,255,255,.09); --border: rgba(255,255,255,.10); --border-top: rgba(255,255,255,.16); --border-strong: rgba(255,255,255,.22); /* ── Tier 1 — text (neutral, never warm) ── */ --text-primary: #FAFAFA; --text-body: #D4D4D7; --text-secondary: #A1A1A6; --text-muted: #71717A; --text-disabled: rgba(250,250,250,0.30); /* ── Tier 1 — accent (warm amber, primary) ── */ --accent: #C8A96E; --accent-dim: rgba(200,169,110,.6); --accent-bg: rgba(200,169,110,.08); --accent-border: rgba(200,169,110,.22); /* ── Tier 1 — support (mint, success & docs nav only) ── */ --morandi-mint: #7BBFA6; /* ── Tier 1 — narrow-context (do NOT use for CTAs/borders/hovers) ── */ --accent-purple: #a78bfa; /* Efflora MODE B purple */ --accent-purple-bg: rgba(167,139,250,.08); --accent-purple-border: rgba(167,139,250,.22); --accent-blue: #78B4FF; /* docs/code only */ --accent-teal: #5eead4; --accent-rose: #f9a8d4; /* ── Tier 1 — radius (buttons/inputs). Cards 16px, glass 22px inline. ── */ --radius: 0.625rem; /* ── Tier 1 — font stacks ── */ --font-display-latin: "Geist Variable", "Geist", "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-display-cjk: "SF Pro SC", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif; /* ═══════════════════════════════════════════════════════════════════ App World legacy aliases (do NOT reference in new code). Maintained so pre-existing rules that use --text, --warm, --bg-raised keep working without a codebase-wide sweep. ═══════════════════════════════════════════════════════════════════ */ /* Surfaces */ --bg-raised: var(--surface); --bg-raised-2: var(--surface-2); --bg-raised-hover: var(--surface-hover); /* Text */ --text: var(--text-primary); --text-2: var(--text-secondary); --text-3: var(--text-muted); /* Borders */ --border-hover: rgba(255,255,255,.24); /* Warm (legacy amber aliases) */ --warm: var(--accent); --warm-dim: rgba(200,169,110,.4); --warm-bg: var(--accent-bg); --warm-fade: rgba(200,169,110,.25); --warm-contrast: rgba(0,0,0,.72); --accent-contrast: #1a1204; /* Mint legacy alias — canonical is --morandi-mint */ --accent-mint: var(--morandi-mint); --accent-mint-bg: rgba(123,191,166,.12); --accent-mint-border: rgba(123,191,166,.22); /* Blue/teal/rose narrow-context (docs & code only per spec) */ --accent-blue-bg: rgba(120,180,255,.08); --accent-blue-border: rgba(120,180,255,.2); /* Semantic — success ties to mint per spec Tier 3 status badge */ --success: var(--morandi-mint); --success-bg: rgba(123,191,166,.12); --warning: #C8A96E; --warning-bg: rgba(200,169,110,.12); --danger: #e8b0a9; /* Shadows — spec anti-pattern 5: shadows always black, low alpha. Amber/colored glows REMOVED (previous --accent-glow deleted). */ --shadow: 0 18px 42px rgba(0,0,0,.22); --shadow-soft: 0 4px 16px rgba(0,0,0,.16); --shadow-md: 0 8px 28px rgba(0,0,0,.22); --shadow-inset: inset 0 1px 0 rgba(255,255,255,.05); --shadow-panel: 0 1px 2px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.16), inset 0 1px 1px rgba(255,255,255,.05), inset 0 -1px 1px rgba(0,0,0,.08); --shadow-card-elevated: 0 18px 42px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05); --highlight: rgba(255,255,255,.1); /* Material gradients (Tier 2.2 / 2.3 recipe fragments) */ --material-gradient: linear-gradient(180deg, rgba(255,255,255,.065) 0%, rgba(255,255,255,.026) 18%, rgba(255,255,255,.018) 100%); --material-gradient-soft: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.012) 100%); /* Radius scale (only --radius is spec-canonical; scale kept for legacy) */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 24px; /* Motion — spec mandates this curve for hover/reveal at 210-320ms */ --ease-out-quart: cubic-bezier(.16, 1, .3, 1); /* Font legacy aliases — spec html uses Inter-first; --font-display prefers Geist */ --font: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; --font-display: var(--font-display-latin); --mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace; /* Generic aliases */ --muted: var(--text-secondary); --paper: var(--surface); --paper-alt: var(--surface-2); --paper-strong: var(--surface); --line: var(--border); --line-strong: var(--border-strong); --accent-3: rgba(255,255,255,.08); } /* ═══════════════════════════════════════════ LIGHT THEME OVERRIDES ═══════════════════════════════════════════ */ [data-theme="light"] { /* Pure white + grayscale. Amber exclusively reserved for Current chip * (halo + fill). Everywhere else uses neutral zinc: kickers, progress, * sidebar, active states, links all grayscale. Dark-mode amber branding * doesn't carry over to light mode — a clean white + gray palette with * a single amber focal point reads more premium (Linear/Vercel/Raycast). */ --bg: #ffffff; /* pure white */ --bg-raised: #ffffff; --bg-raised-2: #f4f4f5; /* zinc-100 */ --bg-raised-hover: #e4e4e7; --surface: #f4f4f5; --surface-hover: #e4e4e7; /* Text — neutral zinc scale, solid colors, high-contrast. * #09090b on #f8f8fa = ~20:1 (AAA) * #27272a on #f8f8fa = ~13:1 (AAA) * #52525b on #f8f8fa = ~7:1 (AAA) * #71717a on #f8f8fa = ~4.5:1 (AA body) * #a1a1aa on #f8f8fa = ~2.7:1 (decorative) */ --text: #09090b; --text-primary: #09090b; --text-secondary: #52525b; --text-2: #52525b; --text-3: #71717a; --text-body: #27272a; --text-muted: #a1a1aa; /* Cool neutral borders */ --border: #e4e4e7; /* zinc-200 */ --border-strong: #d4d4d8; /* zinc-300 */ --border-hover: #a1a1aa; /* zinc-400 */ /* Amber accent — deepened for better contrast on white backgrounds. * On dark bg #C8A96E reads golden; on white it's too pale, so text * uses a darker #a8884c while fill backgrounds keep the lighter .12 * alpha of the original tone. */ --accent: #a8884c; --accent-dim: rgba(168,136,76,.72); --accent-bg: rgba(200,169,110,.12); --accent-border: rgba(200,169,110,.30); --accent-contrast: #ffffff; --warm: #92400e; --warm-dim: #c2410c; --warm-bg: #fed7aa; --warm-fade: #fdba74; --warm-contrast: #ffffff; --success: #5d9a7e; /* deeper mint — reads on white */ --success-bg: rgba(123,191,166,.14); --warning: #a8884c; --warning-bg: rgba(200,169,110,.16); --danger: #c97a6f; /* deeper coral */ /* Shadows — neutral cool, aligns with zinc palette. */ --shadow: 0 4px 24px rgba(0,0,0,.06); --shadow-soft: 0 2px 12px rgba(0,0,0,.04); --shadow-md: 0 4px 16px rgba(0,0,0,.08); --shadow-inset: inset 0 1px 1px rgba(0,0,0,.03); --highlight: rgba(0,0,0,.05); } /* Light theme panel override */ [data-theme="light"] .panel { border: 1px solid #e5e7eb; border-top-color: #d1d5db; background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); } [data-theme="light"] .panel::before { background: linear-gradient(90deg, transparent, rgba(0,0,0,.02) 30%, rgba(0,0,0,.03) 50%, rgba(0,0,0,.02) 70%, transparent); } [data-theme="light"] .panel.subtle { background: #f9fafb; border-color: #e5e7eb; border-top-color: #d1d5db; } [data-theme="light"] .panel h2 { color: #111827; } [data-theme="light"] .panel-header h2 { color: #111827; } /* Light theme heatmap table override */ [data-theme="light"] .heatmap-table thead th { border-bottom: 1px solid #e5e7eb; color: #6b7280; } [data-theme="light"] .heatmap-row:hover { background: #f9fafb; } [data-theme="light"] .heatmap-row td { border-top: 1px solid #f3f4f6; } [data-theme="light"] .hm-fail { color: #d1d5db; } [data-theme="light"] .heatmap-task-name strong { color: #111827; } [data-theme="light"] .hm-pass { color: #f59e0b; } /* Unified table borders for light theme */ [data-theme="light"] .table-wrap { border-color: #e5e7eb; } [data-theme="light"] th, [data-theme="light"] td { border-bottom-color: #f3f4f6; } /* Benchmark tables light theme */ [data-theme="light"] .breakdown-table, [data-theme="light"] .leaderboard-table, [data-theme="light"] .heatmap-table { border-color: #e5e7eb; } [data-theme="light"] .breakdown-table thead, [data-theme="light"] .leaderboard-table thead th, [data-theme="light"] .heatmap-table thead th { background: #f9fafb; color: #6b7280; border-bottom-color: #e5e7eb; } [data-theme="light"] .breakdown-table tbody tr:hover, [data-theme="light"] .leaderboard-table tbody tr:hover, [data-theme="light"] .heatmap-row:hover { background: #f9fafb; } [data-theme="light"] .breakdown-table tbody tr:not(:last-child) td, [data-theme="light"] .leaderboard-table td, [data-theme="light"] .heatmap-row td { border-bottom-color: #f3f4f6; } [data-theme="light"] .breakdown-agent-col, [data-theme="light"] .breakdown-agent-cell { background: #f9fafb; border-right-color: #e5e7eb; } [data-theme="light"] .breakdown-table tbody tr:hover .breakdown-agent-cell { background: #f9fafb; } [data-theme="light"] .breakdown-agent-cell strong, [data-theme="light"] .leaderboard-table td strong { color: #111827; } [data-theme="light"] .agent-org, [data-theme="light"] .leaderboard-table td .subtle-text { color: #6b7280; } [data-theme="light"] .breakdown-overall-col, [data-theme="light"] .breakdown-overall-cell { background: #fef6e8 !important; color: #92400e; } [data-theme="light"] .score-value { color: #111827; } /* Difficulty badges light theme */ [data-theme="light"] .diff-easy, [data-theme="light"] .diff-low { color: #15803d; background: #f0f4f0; border-color: rgba(22, 101, 52, 0.2); } [data-theme="light"] .diff-medium { color: #c2410c; background: #ffe9d6; border-color: rgba(194, 65, 12, 0.2); } [data-theme="light"] .diff-hard, [data-theme="light"] .diff-high { color: #4b5563; background: #f5f5f5; border-color: rgba(0, 0, 0, 0.12); } /* Task Catalog badges - light theme (stronger contrast) */ [data-theme="light"] .difficulty-badge.diff-low { color: #15803d; background: #dcfce7; border-color: rgba(22, 101, 52, 0.28); } [data-theme="light"] .difficulty-badge.diff-medium { color: #c2410c; background: #ffedd5; border-color: rgba(194, 65, 12, 0.28); } [data-theme="light"] .difficulty-badge.diff-high { color: #b91c1c; background: #fee2e2; border-color: rgba(185, 28, 28, 0.28); } [data-theme="light"] .rl-badge { color: #1d4ed8; background: rgba(37, 99, 235, 0.12); border-color: rgba(37, 99, 235, 0.3); } [data-theme="light"] .eval-only-badge { color: #475569; background: #f1f5f9; border-color: #cbd5e1; } * { box-sizing: border-box; } /* ── Base typography & body — verbatim from DESIGN_SYSTEM.md §Tier 1 ── * html font-family is Inter-first (CJK via Noto Sans SC); display usages * opt into Geist via var(--font-display-latin). Body tokens copied exactly * from spec: line-height 1.6, text-body color, antialiased, optimizeLegibility. */ html { scroll-behavior: smooth; font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif; } body { margin: 0; background: var(--bg); color: var(--text-body); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* CJK at 400 reads lighter than Latin on dark — bump paragraphs to 500 (spec §Tier 1). */ p { font-weight: 500; } /* Heading rhythm — spec mandates weight 600 + letter-spacing -.02em. */ h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); } h1 { letter-spacing: -.035em; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } /* Grain overlay removed — DESIGN_SYSTEM.md §2.1 specifies a fixed dot pattern * (now on .console-shell::before) as the only page texture. Layering grain on * top of the dot pattern was an App-World-era addition not in the spec. */ /* ── THEME TOGGLE — chip pill for settings row action slot. * Previously full-width sidebar button; moved to settings page. */ .theme-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 50%, rgba(255,255,255,.05) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.10); border-top-color: rgba(255,255,255,.16); color: var(--text-secondary); font-size: .82rem; font-weight: 500; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .theme-toggle:hover { background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.08) 100%); border-color: rgba(255,255,255,.18); color: var(--text-primary); } .theme-toggle .theme-icon { flex-shrink: 0; transition: transform .2s ease; } .theme-toggle:hover .theme-icon { transform: rotate(15deg); } .theme-toggle-text { text-align: left; } /* ── LAYOUT ── */ /* ── Console shell — §2.1b Utility/Console surface ── * Archetype B: background steps back so content reads first. * Linear gradient only — no amber radial, no mint radial (spec §2.1b). * Warm breath baked into top of gradient: barely perceptible at .05. * Dot pattern: 30px grid, .04 alpha, tighter 60%/50% mask, opacity .22 * (§2.1b params — dimmer/tighter than the hero recipe). * overflow-x: clip (not overflow: hidden) preserves the sticky sidebar. */ .console-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); position: relative; overflow-x: clip; background: /* Top-right amber atmospheric anchor — Efflora brand warmth */ radial-gradient(ellipse 800px 600px at 85% 12%, rgba(200,169,110,.05) 0%, transparent 70%), /* Mid-right atmospheric warmth */ radial-gradient(ellipse 900px 700px at 72% 48%, rgba(200,169,110,.03) 0%, transparent 75%), /* Bottom-left counter anchor */ radial-gradient(ellipse 700px 500px at 18% 82%, rgba(200,169,110,.035) 0%, transparent 72%), /* Top warm breath */ linear-gradient(180deg, rgba(200,169,110,.045) 0%, transparent 320px), /* Base dark gradient */ linear-gradient(180deg, #0b0c11 0%, #0a0b10 30%, #08090d 100%); } .console-shell::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 30px 30px; mask-image: radial-gradient(ellipse 60% 50% at 50% 38%, black 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 38%, black 0%, transparent 70%); opacity: .22; } .console-shell > * { position: relative; z-index: 1; } [data-theme="light"] .console-shell { background: var(--bg); } [data-theme="light"] .console-shell::before { display: none; } .page-shell { min-width: 0; padding: 24px 28px 40px; } /* ── SIDEBAR ── */ .sidebar { position: sticky; top: 0; align-self: start; height: 100vh; padding: 16px 12px; border-right: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.03) 15%, rgba(255,255,255,.018) 100%); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: inset -1px 0 0 rgba(255,255,255,.03); overflow-y: auto; } .sidebar-inner { height: 100%; display: flex; flex-direction: column; gap: 12px; } .brand { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--radius-md); transition: background .15s; } .brand:hover { background: var(--surface); } /* Cream-on-dark "brand plaque" — white tile + black silhouette, like a metal nameplate. High contrast against dark sidebar. */ .brand-logo-tile { position: relative; width: 44px; height: 44px; border-radius: 22%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, #f4ead8 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(140,108,68,.18), 0 4px 14px rgba(0,0,0,.45), 0 1px 0 rgba(232,200,138,.1); } .brand-logo-tile::before { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(200,169,110,.5); pointer-events: none; } .brand-logo-tile::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 60% at 30% 0%, rgba(255,255,255,.6), transparent 60%); pointer-events: none; } .brand-logo { position: relative; z-index: 1; width: 80%; height: 80%; object-fit: contain; } .brand-name { font-size: .92rem; font-weight: 700; } .brand-sub { color: var(--text-3); font-size: .72rem; font-family: var(--mono); } /* Workspace card — Tier 2.3 panel recipe (bg + border + 4-layer shadow). * Sidebar-scoped; radius 16px per spec; no hover lift (sidebar cards are * static, unlike main-content panels). */ .workspace-card { padding: 14px; background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.012) 100%); border: 1px solid rgba(255,255,255,.10); border-top-color: rgba(255,255,255,.16); border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.16), inset 0 1px 1px rgba(255,255,255,.05), inset 0 -1px 1px rgba(0,0,0,.08); position: relative; overflow: hidden; } .workspace-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 70px; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.045) 0%, transparent 100%); } .workspace-card > * { position: relative; z-index: 1; } .workspace-card h2 { margin: 0 0 6px; font-size: .88rem; } .workspace-card p { margin: 0 0 10px; color: var(--text-2); font-size: .82rem; line-height: 1.5; } /* Sidebar captions — use the Tier 2.6 kicker spec (10px / .14em / .58 / 600). */ .workspace-label, .nav-caption { display: inline-flex; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(200,169,110,.72); } .console-kicker { display: inline-flex; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(200,169,110,.58); } .workspace-meta { color: var(--text-3); font-size: .78rem; } .nav-caption { padding: 0 12px; margin-top: 4px; } /* Progress rail */ .progress-rail { width: 100%; height: 6px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.06); margin: 0 0 8px; } .progress-rail span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(200,169,110,.4) 0%, #C8A96E 100%); } /* Navigation */ .side-nav { display: grid; gap: 2px; } .side-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border-radius: 14px; color: var(--text-secondary); font-size: .88rem; border: 1px solid transparent; transition: color .2s, background .2s, border-color .2s, transform .2s var(--ease-out-quart); } .side-link:hover { color: var(--text-primary); background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.06); transform: translateX(2px); } .side-link.active { color: var(--text-primary); background: linear-gradient(180deg, rgba(200,169,110,.12) 0%, rgba(255,255,255,.055) 100%); border-color: rgba(200,169,110,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 22px rgba(0,0,0,.16); } .side-icon { display: flex; align-items: center; flex-shrink: 0; opacity: .55; transition: opacity .15s; } .side-link:hover .side-icon { opacity: .75; } .side-link.active .side-icon { opacity: .9; } /* Sidebar note */ .sidebar-note { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); } .sidebar-note strong { display: block; margin-bottom: 4px; font-size: .88rem; } .sidebar-note p { margin: 0; color: var(--text-3); font-size: .78rem; line-height: 1.5; } /* Sidebar footer */ .sidebar-footer { margin-top: auto; } .user-card { padding: 12px; border: 1px solid rgba(255,255,255,.06); border-top-color: rgba(255,255,255,.10); border-radius: var(--radius-md); /* Near-opaque dark well — the sidebar's bg has a bright white top gradient (rgba(255,255,255,.07) at top); if this card were translucent, that brightness would bleed up into the logout button's backdrop- filter sample and read as a near-white pill. High alpha blocks that. */ background: rgba(12,12,16,.92); display: flex; flex-direction: column; gap: 2px; } .user-name { font-weight: 600; font-size: .82rem; } .user-email { color: var(--text-3); font-size: .72rem; margin-bottom: 6px; } /* Verbatim material port of .mc-cta (efflora hero glass pill) — same * translucent diagonal gradient, backdrop saturate+blur+brightness, * double-border with brighter top edge, layered shadow. Shimmer ::before * intentionally omitted: logout is a ghost action and should not draw * attention the way a primary CTA does. */ .user-logout-btn { align-self: stretch; padding: 8px 18px; border-radius: 980px; color: rgba(255,255,255,.92); /* Unified with .mc-cta recipe (translucent diagonal white gradient + backdrop saturate+blur+brightness + double border + layered shadow). Safe to use saturate(180%) here because .user-card's darkened well gives backdrop-filter a controlled neutral tone to sample. */ background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.08) 100%); backdrop-filter: saturate(180%) blur(20px) brightness(1.05); -webkit-backdrop-filter: saturate(180%) blur(20px) brightness(1.05); border: 1px solid rgba(255,255,255,.15); border-top-color: rgba(255,255,255,.28); box-shadow: 0 2px 12px rgba(0,0,0,.25), inset 0 1px 1px rgba(255,255,255,.12), inset 0 -1px 1px rgba(0,0,0,.08); font-size: .78rem; font-weight: 500; font-family: var(--font); cursor: pointer; text-align: center; transition: all .2s cubic-bezier(.16,1,.3,1); } .user-logout-btn:hover { background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.07) 50%, rgba(255,255,255,.12) 100%); border-color: rgba(255,255,255,.22); border-top-color: rgba(255,255,255,.36); color: rgba(255,255,255,.98); box-shadow: 0 4px 20px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.16), inset 0 -1px 1px rgba(0,0,0,.08); } /* ── TOPBAR ── */ .console-topbar { max-width: 1200px; margin: 0 auto 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 4px 0 0; } .console-heading { font-size: 1.15rem; font-weight: 700; font-family: var(--font-display); } .topbar-actions, .hero-actions, .button-row, .panel-header, .page-header, .filter-bar, .tab-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .panel-header, .page-header { justify-content: space-between; } /* ── CONTENT SHELL ── */ .content-shell { max-width: 1200px; margin: 0 auto; display: grid; gap: 20px; width: 100%; } /* ── BUTTONS ── */ /* rotating border glow — from efflora */ @property --border-angle { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes rotateBorder { to { --border-angle: 360deg; } } .primary-button, .training-button, .secondary-button, .icon-button, .tab-button { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); padding: 9px 16px; font-size: .88rem; font-weight: 500; cursor: pointer; transition: all .4s cubic-bezier(.16,1,.3,1); text-decoration: none; position: relative; overflow: hidden; } /* Primary button — verbatim port of DESIGN_SYSTEM.md §2.5 (.btn-primary). * Spec: solid #FAFAFA (text-primary) with #0a0a0f text. Amber is reserved for * ghost/secondary (see .secondary-button). Any glass-white treatment is spec * anti-pattern here. */ .primary-button { background: #FAFAFA; color: #0a0a0f; font-weight: 600; letter-spacing: -.01em; border: none; } .primary-button::before { display: none; } .primary-button:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,.4); } .primary-button:active { transform: translateY(0); } /* Page-hero primary — frosted-glass pill, verbatim material port of efflora's * landing-page hero CTA (.hero-glass-btn). Source: SaaS2AI/web/src/pages/ * marketing/LandingPage.tsx inline styles + tokens.css .hero-glass-btn hover. * Scoped to .page-hero so the global §2.5 white primary stays untouched. */ .page-hero .primary-button { padding: 8px 18px; border-radius: 980px; font-size: 13px; font-weight: 500; letter-spacing: -.01em; color: rgba(255,255,255,.92); /* White glass sheen over a translucent neutral base. The neutral layer sits between the backdrop sample and the white highlight, muting the amber that would otherwise bleed through the hero's top-right glow. backdrop-filter uses saturate(0%) to desaturate whatever does come through, so the button reads neutral like efflora's "Try it now". */ background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.05) 50%, rgba(255,255,255,.10) 100%), linear-gradient(180deg, rgba(24,24,28,.62), rgba(24,24,28,.62)); backdrop-filter: saturate(0%) blur(20px) brightness(1.05); -webkit-backdrop-filter: saturate(0%) blur(20px) brightness(1.05); border: 1px solid rgba(255,255,255,.15); border-top-color: rgba(255,255,255,.28); box-shadow: 0 2px 12px rgba(0,0,0,.25), inset 0 1px 1px rgba(255,255,255,.12), inset 0 -1px 1px rgba(0,0,0,.08); transition: all .2s cubic-bezier(.16,1,.3,1); } .page-hero .primary-button:hover { background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.15) 100%), linear-gradient(180deg, rgba(28,28,32,.62), rgba(28,28,32,.62)); border-color: rgba(255,255,255,.22); border-top-color: rgba(255,255,255,.36); color: rgba(255,255,255,.98); opacity: 1; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.16), inset 0 -1px 1px rgba(0,0,0,.08); } /* Shimmer sweep — override the global .primary-button::before{display:none} */ .page-hero .primary-button::before { content: ''; display: block; position: absolute; inset: 0; background: linear-gradient(108deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%); transform: translateX(-160%); animation: hero-btn-shimmer 5s ease-in-out infinite; pointer-events: none; } @keyframes hero-btn-shimmer { 0%, 28% { transform: translateX(-160%); } 52% { transform: translateX(260%); } 53%, 100% { transform: translateX(-160%); } } /* Light theme — opaque white base blocks the hero card's blue tint */ [data-theme="light"] .page-hero .primary-button { color: rgba(15,23,42,.92); background: linear-gradient(135deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.02) 50%, rgba(0,0,0,.05) 100%), #ffffff; border: 1px solid rgba(0,0,0,.10); border-top-color: rgba(0,0,0,.16); box-shadow: 0 2px 12px rgba(0,0,0,.08), inset 0 1px 1px rgba(255,255,255,.7), inset 0 -1px 1px rgba(0,0,0,.04); } [data-theme="light"] .page-hero .primary-button:hover { background: linear-gradient(135deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.04) 50%, rgba(0,0,0,.08) 100%), #fafafa; border-color: rgba(0,0,0,.16); border-top-color: rgba(0,0,0,.22); color: rgba(15,23,42,1); } [data-theme="light"] .page-hero .primary-button::before { background: linear-gradient(108deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%); } /* disabled button (grayed out with tooltip) */ .primary-button:disabled, .primary-button.disabled-hint, .training-button:disabled, .training-button.disabled-hint, .secondary-button:disabled, .secondary-button.disabled-hint { opacity: 0.55; cursor: not-allowed; pointer-events: auto; transform: none; box-shadow: none; } .primary-button:disabled:hover, .primary-button.disabled-hint:hover, .training-button:disabled:hover, .training-button.disabled-hint:hover, .secondary-button:disabled:hover, .secondary-button.disabled-hint:hover { transform: none; box-shadow: none; filter: none; background: transparent; color: var(--text-2); } /* training = glass accent, violet tint (mirrors primary-button pattern) */ .training-button { background: linear-gradient(180deg, rgba(167,139,250,.13) 0%, rgba(167,139,250,.04) 100%); border: 1px solid rgba(167,139,250,.2); border-top-color: rgba(167,139,250,.32); color: rgba(167,139,250,.95); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.14), inset 0 1px 1px rgba(255,255,255,.08), inset 0 -1px 1px rgba(0,0,0,.1); } .training-button::before { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(167,139,250,.45) 50%, transparent); pointer-events: none; } .training-button:hover { background: linear-gradient(180deg, rgba(167,139,250,.2) 0%, rgba(167,139,250,.08) 100%); border-color: rgba(167,139,250,.32); border-top-color: rgba(167,139,250,.48); transform: translateY(-1px); /* Purple box-shadow layer removed — spec anti-pattern 5 (shadows are always * black, never colored). */ box-shadow: 0 2px 4px rgba(0,0,0,.15), 0 8px 24px rgba(0,0,0,.2), inset 0 1px 2px rgba(255,255,255,.12), inset 0 -1px 2px rgba(0,0,0,.1); } .training-button:active { transform: translateY(0); } /* Secondary = amber ghost — verbatim port of DESIGN_SYSTEM.md §2.5 (.btn-ghost). * Spec: subtle amber-tinted gradient bg, amber text, amber border. Translates * the Tier 1 accent into a second-priority CTA that pairs with solid-white * .primary-button. */ .secondary-button { background: linear-gradient(180deg, rgba(200,169,110,.1) 0%, rgba(200,169,110,.04) 100%); color: var(--accent); border: 1px solid var(--accent-border); font-weight: 500; } .secondary-button:hover { background: linear-gradient(180deg, rgba(200,169,110,.16) 0%, rgba(200,169,110,.07) 100%); border-color: rgba(200,169,110,.38); transform: translateY(-1px); } .icon-button { background: transparent; border: none; padding: 6px 8px; font-size: 1.1rem; color: var(--text-2); } .icon-button:hover { color: var(--text); } /* ── PANELS & CARDS ── */ /* Panel — verbatim port of DESIGN_SYSTEM.md §2.3. * Lighter-weight card recipe (vs §2.2 glass-panel): 2-stop gradient + 4-layer * shadow. Hover picks up amber in the border, lifts 1px. */ .panel { padding: 24px; background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.012) 100%); border: 1px solid rgba(255,255,255,.10); border-top-color: rgba(255,255,255,.16); border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.16), inset 0 1px 1px rgba(255,255,255,.05), inset 0 -1px 1px rgba(0,0,0,.08); position: relative; overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease-out-quart); } .panel:hover { border-color: rgba(200,169,110,.12); border-top-color: rgba(200,169,110,.18); transform: translateY(-1px); } .panel > * { position: relative; z-index: 1; } .panel.subtle { background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.05); border-top-color: rgba(255,255,255,.07); } /* Highlight accent — amber per spec (anti-pattern 1: no new accent colors; * the previous blue highlight violated the spec). */ .panel.highlight, .emphasis-card, .spotlight-panel { border-color: var(--accent-border); border-top-color: rgba(200,169,110,.34); } /* List card — a .panel that contains a flat list/table flush to its edges, * not a nested card. Strips the inner .table-wrap's border/radius and * makes the transparent so rows read as a simple list. Material * verbatim from efflora .dashboard-card / .dashboard-table (see * SaaS2AI/web/src/styles/tokens.css lines 269-316). */ .panel.panel-list { padding: 0; } .panel.panel-list:hover { border-color: rgba(255,255,255,.10); border-top-color: rgba(255,255,255,.16); transform: none; } /* Panel header inside panel-list: align with first/last cell padding (24px) so the section title sits in the same vertical line as the body cells, and the count badge has breathing room from the right edge. */ .panel.panel-list > .panel-header { padding: 18px 24px 14px; } .panel.panel-list > .table-wrap { border: 0; border-radius: 0; overflow: visible; } .panel.panel-list table { background: transparent; } .panel.panel-list thead tr { background: linear-gradient(180deg, rgba(200,169,110,.09) 0%, rgba(200,169,110,.04) 100%); border-bottom: 1px solid rgba(200,169,110,.18); } .panel.panel-list th { position: static; padding: 14px 24px; text-align: center; font-family: inherit; font-size: .92rem; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--text-primary); background: transparent; border-bottom: none; } .panel.panel-list td { padding: 16px 24px; font-size: .875rem; text-align: center; color: var(--text-body); border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; } /* First column holds a labeled item (name + subtitle + tag), not a metric — left-align so it reads as an anchor, not a centered number. */ .panel.panel-list th:first-child, .panel.panel-list td:first-child { text-align: left; } .panel.panel-list tbody tr { transition: background-color .12s ease; } .panel.panel-list tbody tr:hover { background: rgba(255,255,255,.025); } .panel.panel-list tbody tr:last-child td { border-bottom: none; } /* Whole-row clickable: stronger affordance + reactive text on hover */ .panel.panel-list tbody tr[data-row-link] { cursor: pointer; } .panel.panel-list tbody tr[data-row-link]:hover { background: rgba(255,255,255,.055); } .panel.panel-list tbody tr[data-row-link]:hover .cell-name-primary a { color: var(--accent); } .panel.panel-list tbody tr[data-row-link]:hover .cell-id-secondary { color: var(--text-2); } .panel.panel-list tbody tr[data-row-link]:hover .table-action-link { text-decoration: underline; } [data-theme="light"] .panel.panel-list tbody tr[data-row-link]:hover { background: rgba(37,99,235,.07); } [data-theme="light"] .panel.panel-list thead tr { background: linear-gradient(180deg, rgba(37,99,235,.08) 0%, rgba(37,99,235,.03) 100%); border-bottom-color: rgba(37,99,235,.18); } [data-theme="light"] .panel.panel-list td { border-bottom-color: #f3f4f6; } [data-theme="light"] .panel.panel-list tbody tr:hover { background: rgba(37,99,235,.04); } .panel-divider { height: 1px; background: rgba(255,255,255,.05); margin: 16px 0; } .onboarding-inline { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius); background: rgba(255,255,255,.03); } /* ── PAGE HERO ── * Verbatim port of efflora .docs-callout (SaaS2AI/web/src/styles/tokens.css * lines 955-966). Subtle warm tint at top-right, neutral glass body, neutral * borders, black shadow — per DESIGN_SYSTEM §anti-pattern 1/5 no amber glow, * no amber-tinted shadow. Layout properties preserved from the app_world * version (flex row + button on the right). */ .page-hero { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 28px; border-radius: var(--radius); background: radial-gradient(circle at top right, rgba(200,169,110,.22) 0%, transparent 42%), radial-gradient(circle at bottom left, rgba(123,191,166,.04) 0%, transparent 22%), linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%); border: 1px solid rgba(255,255,255,.08); border-top-color: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 38px rgba(0,0,0,.18); position: relative; overflow: hidden; isolation: isolate; } /* Light theme — amber accent (was legacy blue, migrated to Efflora brand) */ [data-theme="light"] .page-hero { background: radial-gradient(circle at top right, rgba(200,169,110,.12) 0%, transparent 32%), linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.85) 100%); border-color: rgba(0,0,0,.08); border-top-color: rgba(200,169,110,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 8px 22px -8px rgba(0,0,0,.10); } .page-hero h1, .detail-hero h1 { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; } .page-hero p, .detail-hero p { max-width: 56ch; margin: 10px 0 0; color: var(--text-2); font-size: .92rem; line-height: 1.6; } .detail-hero { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); position: relative; overflow: hidden; } .detail-hero::after { content: ""; position: absolute; inset: auto -40px -60px auto; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(120,180,255,.06), transparent 70%); pointer-events: none; } .callout-card { padding: 20px; border: 1px solid var(--accent-border); border-radius: var(--radius); background: var(--accent-bg); position: relative; overflow: hidden; } /* ── EYEBROW / LABELS ── */ .eyebrow { display: inline-flex; margin-bottom: 10px; padding: 5px 10px; border-radius: 999px; background: var(--accent-bg); color: var(--accent); font-size: .72rem; font-weight: 600; font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; } .subtle-text, .catalog-metadata { color: var(--text-2); font-size: .88rem; line-height: 1.55; } /* ── GRIDS ── */ .metric-grid, .card-grid, .scene-grid, .steps-grid, .detail-grid, .leaderboard-preview-grid, .quick-actions-grid { display: grid; gap: 16px; } .metric-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .card-grid, .leaderboard-preview-grid, .quick-actions-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .scene-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .scene-grid.compact { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .steps-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .detail-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* Metric card */ .metric-card { padding: 20px 18px; min-height: 130px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-raised); gap: 6px; } .metric-value { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.04em; font-family: var(--font-display); line-height: 1; } .metric-label { color: var(--text); font-size: 0.875rem; font-weight: 600; line-height: 1.3; } .metric-sublabel { color: var(--text-2); font-size: 0.75rem; line-height: 1.4; max-width: 100%; } .metric-grid.compact { grid-template-columns: repeat(4, 1fr); gap: 12px; } .metric-grid.compact .metric-card { min-height: auto; padding: 14px 16px; } .metric-grid.compact .metric-value { font-size: 1.6rem; } /* Catalog card */ .catalog-card { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); transition: border-color .15s, transform .15s; } .catalog-card:hover { border-color: var(--border-strong); transform: translateY(-2px); } .catalog-card h2 { margin: 6px 0 8px; font-size: 1.15rem; } .catalog-card p { margin: 0 0 12px; color: var(--text-2); line-height: 1.6; font-size: .9rem; } .card-meta { color: var(--warm); font-size: .72rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; } .goal-card { background: var(--bg-raised); } /* ── DASHBOARD ── */ .dash > section { margin-bottom: 24px; } .dash > section:last-child { margin-bottom: 0; } .dash-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } /* Display heading — uses var(--font-display-latin) (Geist first per spec * §Tier 1) with CJK fallback via the stack. Spec §2.7 display numerals: * weight 760, letter-spacing -.045em. Applied here at weight 720 to keep * CJK chars visually stable (760 on PingFang can look chunky for Hanzi). */ .dash-greeting h1 { margin: 0 0 12px; color: var(--text-primary); font-family: var(--font-display-latin); font-size: clamp(2.15rem, 4vw, 2.95rem); line-height: 1.02; font-weight: 720; letter-spacing: -.045em; font-kerning: normal; font-synthesis: none; } /* ── .dash-greeting-sub — verbatim port of efflora .dashboard-page-subtitle ── * Source: tokens.css :: .dashboard-page-subtitle * max-width 920; color text-body; font-size 16; line-height 1.85; letter-spacing -.01 */ .dash-greeting-sub { margin: 0; max-width: 920px; color: var(--text-body); font-size: 16px; line-height: 1.85; letter-spacing: -.01em; } /* Kicker / eyebrow — verbatim port of DESIGN_SYSTEM.md §2.6. * Spec: 10px IBM Plex Mono, .14em tracking, uppercase, amber at .58 alpha, * weight 600. "The single most distinctive typographic element." */ .page-kicker { margin: 0 0 12px; color: rgba(200,169,110,.72); font-family: 'IBM Plex Mono', 'Noto Sans SC', monospace; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1; } /* ── ONBOARDING ── * Single outer card holding all 4 step zones — verbatim port of * DESIGN_SYSTEM.md §2.2 glass-panel recipe (3-stop .075/.03/.02 gradient * + backdrop-filter saturate(170%) blur(22px) + 5-layer shadow + 22px * radius). Why glass-panel and NOT §2.3 panel: the page shell is noisy * by spec (§2.1 mandates warm amber radial + mint radial + dot pattern), * and §2.3 panel's .035 alpha bg lets that noise show through, reading * as "dirty" on the card interior. Glass-panel's backdrop-filter blur * physically smears the bg dots/radials into a uniform frosted surface * behind the card, so the card interior is clean regardless of what's * behind it. Spec's own semantic for this tier is "cards that need to * blur the bg behind them" — exactly our case. * * This is still the ONLY card in the stepper. The inner 4 cells are flat * zones with no material of their own. */ /* Outer module — atmospheric radial backdrop. A soft amber wash anchored * near the Current chip (60-62% X, 55% Y) bleeds into the module backdrop, * so the Current chip's own halo feels like it "illuminates the whole * module", not like an isolated glowing element. Neutral .05 white base * provides the mild brightness lift against dashboard bg. Not a card — * still just a color region, but now with warmth + directionality tied * to the design's amber accent story. */ .ob { padding: 20px 24px 24px; background: /* Bottom-right warm-white corner halo */ radial-gradient(ellipse 35% 65% at 100% 100%, rgba(255,248,235,.07) 0%, transparent 65%), /* Top-left amber corner halo */ radial-gradient(ellipse 35% 65% at 0% 0%, rgba(200,169,110,.07) 0%, transparent 65%), /* §2.3 base panel gradient */ linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.012) 100%); border-radius: 18px; box-shadow: 0 8px 28px -10px rgba(0,0,0,.4); position: relative; overflow: hidden; } .ob > * { position: relative; z-index: 1; } /* Top-LEFT corner arc — 80×80 box，仅 top + left 1px amber border + radial mask * 平滑衰减，与卡圆角同步。 */ .ob::before { content: ''; position: absolute; top: 0; left: 0; width: 160px; height: 160px; box-sizing: border-box; border-top: 1px solid rgba(200,169,110,.55); border-left: 1px solid rgba(200,169,110,.55); border-top-left-radius: 18px; pointer-events: none; z-index: 0; mask-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,.92) 12%, rgba(0,0,0,.72) 28%, rgba(0,0,0,.48) 45%, rgba(0,0,0,.26) 62%, rgba(0,0,0,.10) 80%, transparent 100%); -webkit-mask-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,.92) 12%, rgba(0,0,0,.72) 28%, rgba(0,0,0,.48) 45%, rgba(0,0,0,.26) 62%, rgba(0,0,0,.10) 80%, transparent 100%); } /* Bottom-RIGHT corner arc — mirror，warm-white */ .ob::after { content: ''; position: absolute; bottom: 0; right: 0; width: 160px; height: 160px; box-sizing: border-box; border-bottom: 1px solid rgba(255,248,235,.45); border-right: 1px solid rgba(255,248,235,.45); border-bottom-right-radius: 18px; pointer-events: none; z-index: 0; mask-image: radial-gradient(circle at 100% 100%, rgba(0,0,0,1) 0%, rgba(0,0,0,.92) 12%, rgba(0,0,0,.72) 28%, rgba(0,0,0,.48) 45%, rgba(0,0,0,.26) 62%, rgba(0,0,0,.10) 80%, transparent 100%); -webkit-mask-image: radial-gradient(circle at 100% 100%, rgba(0,0,0,1) 0%, rgba(0,0,0,.92) 12%, rgba(0,0,0,.72) 28%, rgba(0,0,0,.48) 45%, rgba(0,0,0,.26) 62%, rgba(0,0,0,.10) 80%, transparent 100%); } /* Removed: rotating amber conic-gradient border. It was App World's own pre-efflora * decoration (the bright arc swept around the card every 10s, which showed up as a * mysterious vertical amber streak whenever it crossed the top edge — especially * jarring now that the current step already has its own static amber top accent). * efflora's UsageModeCard has no such animation; stay static. */ @property --ob-glow-angle { syntax: ""; initial-value: 0deg; inherits: false; } @keyframes ob-glow-spin { to { --ob-glow-angle: 360deg; } } @keyframes ob-pulse { 0% { border-color: var(--warm-dim); } 70% { border-color: var(--warm-fade); } 100% { border-color: var(--border); } } .ob.ob-spotlight { animation: ob-pulse 1.8s ease-out 2; } /* Card-internal header row — no divider line. The 4 zones below (with their * 3D shadow-carved boundaries) already establish structural separation; * a horizontal line would duplicate that signal and flatten the depth. */ .ob-header { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; margin-bottom: 18px; } .ob-title-row { display: flex; align-items: center; gap: 7px; } .ob-icon { display: none; } .ob-title-row h2 { margin: 0; font-size: .68rem; font-weight: 600; color: rgba(200,169,110,.72); letter-spacing: .14em; text-transform: uppercase; font-family: 'IBM Plex Mono', monospace; } .ob-progress { display: flex; align-items: center; gap: 10px; } .ob-progress-text { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .08em; color: rgba(200,169,110,.72); } .ob-progress-rail { width: 120px; height: 2px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; } .ob-progress-rail span { display: block; height: 100%; background: linear-gradient(90deg, rgba(200,169,110,.4) 0%, #C8A96E 100%); border-radius: 999px; transition: width .4s cubic-bezier(.16,1,.3,1); } /* ── Steps: 4 raised chips with rounded corners ── * Each chip is an independent rounded block; the ACTIVE chip is identified * by an omnidirectional amber halo (layered bloom). Inactive chips (Done / * Locked) differ only by subtle fill + slight drop shadow — no pit shadows, * no carved-in zones. Reference: iOS/macOS selected-state buttons where a * single glowing element in a row of flat rounded blocks signals focus. */ .ob-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-items: stretch; position: relative; } .ob-line { display: none; } /* Chip base — independent rounded block, raised slightly off the plate. * All chips share this shape / padding / alignment; state classes below * only adjust the material (fill + shadow strength). */ .ob-step { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 18px 18px 20px; text-decoration: none; color: var(--text); position: relative; isolation: isolate; border-radius: 16px; transition: background .3s, box-shadow .3s; } /* Rim-light pseudo — renders a directional amber inset shadow on the chip * edge that faces the Current (.mc-cell) chip. Adjacency selectors below * activate different rims based on each chip's position relative to the * current one (left neighbor = right rim, right neighbor = left rim, * farther = weaker rim). This simulates radiosity: each chip "catches * light on its near side" instead of being passively painted by the * current chip's bloom. */ .ob-step::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 0; box-shadow: none; transition: box-shadow .3s; } .ob-step > * { position: relative; z-index: 1; } /* Left neighbor of current — right edge facing current gets subtle rim. * Tightened from prior version (.36/22px → .22/12px) — strong rim was * washing a large area of the neighbor chip, creating the impression * that the whole row was glowing. Now only a narrow edge catches light. */ .ob-step:has(+ .mc-cell)::before { box-shadow: inset -2px 0 12px -3px rgba(255,248,235,.22); } /* Right neighbor — mirrored */ .mc-cell + .ob-step::before { box-shadow: inset 2px 0 12px -3px rgba(255,248,235,.22); } /* 2-positions-away rim rules REMOVED — distance falloff at 2 positions * is unrealistic for a small glow; the weak rim was still visible on * Step 1 (left-of-step-3) and Step 5 (right-of-step-3 if it existed), * contributing to the "whole row is foggy" feel. Only immediate * neighbors get rim now. */ /* Done (已完成) — translucent dark chip. Alpha lowered .82→.55 so the plate * warmth bleeds through, giving the chip a "translucent glass" quality * (通透感) rather than an opaque block. Same simplification as the metric * card: removed the heavy 10px drop and the bottom inset dark — those * were "grounded/weighted" signals that killed translucency. Only the * thin ground-kiss + top highlight remain. */ .ob-step.is-done { background: linear-gradient(180deg, rgba(12,12,12,.55) 0%, rgba(8,8,8,.65) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.2); } /* Locked (未开启) — slightly deeper fill than Done, still translucent. */ .ob-step.is-locked { background: linear-gradient(180deg, rgba(7,7,7,.65) 0%, rgba(4,4,4,.75) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 1px 2px rgba(0,0,0,.18); } /* Legacy: .ob-step-indicator wrapper is still in the DOM for backward- * compat with any non-dashboard templates — just lay it out flat since the * circle it used to contain is now hidden. */ .ob-step-indicator { display: contents; } /* Circles gone — state is carried by the zone material and the zone-num * numeral at top, not by a redundant indicator pill. */ .ob-check, .ob-check.current { display: none; } /* ── Zone-num ───────────────────────────────────────────────── * "步骤N" label at the top of each zone, colored by state. Chinese falls * back to Noto Sans SC, numeric renders in IBM Plex Mono with tabular * figures. Utilitarian size — sits above the kicker as a small but clear * "which step" tag, not a stylized display numeral. */ .zone-num { font-family: 'IBM Plex Mono', 'Noto Sans SC', 'Inter', monospace; font-size: 13px; font-weight: 500; letter-spacing: -.005em; line-height: 1; margin-bottom: 12px; font-variant-numeric: tabular-nums; } .zone-num--done { color: rgba(255,255,255,.55); } .zone-num--active { color: rgba(200,169,110,.95); } .zone-num--locked { color: rgba(255,255,255,.28); } /* Kicker-step — brand-signature small-cap mono label for stepper states. * Shared base for "步骤 N · 已完成" (done) and "步骤 N" (locked); the current * step's kicker lives on .mc-cell__pill further up. Done = mint, active = amber, * locked = dim — state lives in the label color, not in a separate treatment. */ .ob-step-label, .kicker-step { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; line-height: 1; margin-bottom: 10px; } .kicker-step--done { color: rgba(255,255,255,.55); } .kicker-step--active { color: rgba(200,169,110,.82); } .kicker-step--locked { color: rgba(255,255,255,.30); } /* State icon prefixes — tiny inline glyph differentiates Done vs Locked * beyond just alpha, so the two states are at-a-glance distinguishable * even without reading text. Mint check for Done (completion = success), * neutral en-dash for Locked (not yet engaged). */ .kicker-step--done::before { content: '✓'; color: rgba(123,191,166,.72); font-weight: 700; margin-right: 6px; font-family: system-ui, -apple-system, sans-serif; } .kicker-step--locked::before { content: '–'; color: rgba(255,255,255,.28); margin-right: 6px; font-weight: 500; } .kicker-step .dot { opacity: .5; margin: 0 .4em; } .ob-step-label.current-label { color: var(--accent); font-weight: 600; } .ob-step-body { display: flex; flex-direction: column; } .ob-step-body strong { display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); line-height: 1.4; margin: 0; letter-spacing: -.01em; } .ob-step.is-locked .ob-step-body strong { color: rgba(255,255,255,.55); } .ob-step-body small { display: block; font-size: .75rem; color: var(--text-3); line-height: 1.45; margin-top: 6px; } /* ── Done: readable, green check conveys state ── */ .ob-step.is-done .ob-step-body strong { color: var(--text-2); font-weight: 400; } /* ═══════════════════════════════════════════════════════════════════ Current step: verbatim port of efflora UsageModeCard (MODE A card) Source: SaaS2AI/web/src/pages/marketing/LandingPage.tsx :: UsageModeCard (lines 678-832, accent=amber variant) Layout (4-column grid, center-aligned) preserved from App World's original. ═══════════════════════════════════════════════════════════════════ */ /* ── Current step: efflora QuickStartStep/UsageModeCard material ── * Verbatim ports from SaaS2AI/web/src/pages/marketing/LandingPage.tsx: * - background, border, borderTopWidth:2, borderTopColor, boxShadow, overflow (line 418-428) * - ::before glow bleed (line 432-435) — but with top:0 instead of -1 to prevent * overflow-clip leakage (App World's .ob-step.is-current sits inside a translucent * parent, unlike efflora's card which sits on solid page bg). * - backdrop-filter deliberately omitted — suspected source of the vertical amber * streak when combined with translucent parent + overflow:hidden + negative inset. */ /* Deleted: all .ob-step.is-current overrides. Current step cell now renders as * a new .mc-cell--current component (defined further below). See dashboard.html. */ .ob-step.ob-step-nolink { cursor: default; } /* ── Locked: softer, not invisible ── */ .ob-step.is-locked { pointer-events: none; } .ob-step.is-locked .ob-step-body strong { font-size: .8rem; font-weight: 400; color: var(--text-3); } /* Deleted: .ob-cta — replaced by .mc-cta (see .mc-* block below). */ /* ═══════════════════════════════════════════ ONBOARDING v2 (unused — reserved for potential future restructure) ═══════════════════════════════════════════ */ /* ── Compact horizontal progress rail ── */ .ob-rail { list-style: none; margin: 0; padding: 18px 24px 8px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid rgba(255,255,255,.05); } .ob-rail-step { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 999px; font-size: .82rem; line-height: 1; border: 1px solid transparent; transition: color .2s, background .2s, border-color .2s; white-space: nowrap; } .ob-rail-step + .ob-rail-step::before { content: ''; display: block; width: 20px; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); margin-right: 4px; flex-shrink: 0; } .ob-rail-num { width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 999px; font-size: 11px; font-weight: 600; font-family: var(--mono); flex-shrink: 0; } .ob-rail-step.is-done { color: var(--text-secondary); } .ob-rail-step.is-done .ob-rail-num { background: rgba(123,191,166,.14); color: var(--accent-mint); border: 1px solid rgba(123,191,166,.3); } .ob-rail-step.is-current { color: var(--text-primary); background: rgba(200,169,110,.08); border-color: rgba(200,169,110,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .ob-rail-step.is-current .ob-rail-num { background: linear-gradient(180deg, rgba(200,169,110,.9) 0%, rgba(180,149,92,.9) 100%); color: #1a1204; box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2); } .ob-rail-step.is-locked { color: var(--text-muted); opacity: .55; } .ob-rail-step.is-locked .ob-rail-num { background: transparent; color: var(--text-muted); border: 1px solid rgba(255,255,255,.1); } /* ── Hero card: rich, full-width, one step only ── */ .ob-hero { padding: 32px 32px 28px; position: relative; } .ob-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(200,169,110,.12); border: 1px solid rgba(200,169,110,.24); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: rgba(247,236,212,.88); margin-bottom: 18px; } .ob-hero-badge-num { color: rgba(247,236,212,.98); font-weight: 600; } .ob-hero-badge-sep { color: rgba(200,169,110,.5); } .ob-hero-badge-label { color: rgba(247,236,212,.74); letter-spacing: .08em; } .ob-hero-title { margin: 0 0 10px; font-size: clamp(1.5rem, 2.4vw, 1.85rem); font-weight: 680; letter-spacing: -.035em; line-height: 1.15; color: var(--text-primary); font-family: var(--font); } .ob-hero-desc { margin: 0 0 22px; max-width: 720px; color: var(--text-body); font-size: 15px; line-height: 1.75; font-weight: 500; letter-spacing: -.005em; } .ob-inline-code { padding: 1px 6px; border-radius: 5px; background: rgba(200,169,110,.1); border: 1px solid rgba(200,169,110,.2); color: rgba(247,236,212,.92); font-family: var(--mono); font-size: .9em; } /* Feature list with green checks */ .ob-hero-features { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .ob-hero-features li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-body); font-size: 14px; line-height: 1.6; } .ob-check-icon { width: 18px; height: 18px; display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 999px; background: rgba(123,191,166,.12); color: var(--accent-mint); font-size: 10px; font-weight: 700; line-height: 1; border: 1px solid rgba(123,191,166,.22); } /* Deleted: .ob-conn-* — replaced by .mc-status-pill (see .mc-* block). */ /* ── Inline terminal code block ── */ .ob-code-card { margin-bottom: 24px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.44) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.28); } .ob-code-header { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); } .ob-code-dots { display: inline-flex; gap: 6px; flex-shrink: 0; } .ob-dot { width: 11px; height: 11px; border-radius: 999px; display: inline-block; box-shadow: inset 0 1px 1px rgba(255,255,255,.15), inset 0 -1px 1px rgba(0,0,0,.2); } .ob-dot-r { background: #ff5f57; } .ob-dot-y { background: #febc2e; } .ob-dot-g { background: #28c840; } .ob-code-title { color: var(--text-muted); font-family: var(--mono); font-size: 11px; letter-spacing: .02em; } .ob-code-body { margin: 0; padding: 16px 18px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--text-body); white-space: pre; } .ob-code-line { display: block; } .ob-code-prompt { color: var(--text-muted); margin-right: 8px; user-select: none; } .ob-code-string { color: rgba(247,236,212,.84); } .ob-code-arg { color: var(--accent); } .ob-code-plus { color: var(--accent); margin-right: 6px; } .ob-code-check { color: var(--accent-mint); margin-right: 6px; font-weight: 700; } .ob-code-id { color: var(--accent-mint); } /* ── Hero CTA (amber glass pill) ── */ .ob-hero-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; background: linear-gradient(180deg, rgba(200,169,110,.22) 0%, rgba(200,169,110,.12) 100%); border: 1px solid rgba(200,169,110,.3); border-top-color: rgba(200,169,110,.46); color: rgba(247,236,212,.96); font-size: 14px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; transition: transform .2s var(--ease-out-quart), border-color .2s, box-shadow .2s, background .2s; box-shadow: 0 1px 2px rgba(0,0,0,.16), 0 10px 22px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.06); } .ob-hero-cta svg { transition: transform .2s var(--ease-out-quart); } .ob-hero-cta:hover { background: linear-gradient(180deg, rgba(200,169,110,.3) 0%, rgba(200,169,110,.16) 100%); border-color: rgba(200,169,110,.42); border-top-color: rgba(200,169,110,.6); transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(200,169,110,.08), 0 2px 4px rgba(0,0,0,.18), 0 12px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08); } .ob-hero-cta:hover svg { transform: translateX(2px); } @media (max-width: 720px) { .ob-rail { overflow-x: auto; padding: 14px 18px 6px; } .ob-rail-step + .ob-rail-step::before { width: 12px; } .ob-hero { padding: 24px 20px 22px; } .ob-hero-title { font-size: 1.4rem; } } /* Metrics row */ .dash-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } /* ── .dash-metric — verbatim port of efflora .dashboard-summary-card ── * Source: SaaS2AI/web/src/styles/tokens.css:455-463 * padding 20; border-radius 22; bg 2-stop .06→.025; border .08; border-top .12 * box-shadow: inset 0 1px 0 .04, 0 16px 34px .16 * Note: efflora has NO hover on summary-card (cards are static). Same here — * user feedback previously rejected amber hover glow as "yellow haloing". */ /* Metric card — verbatim port of Efflora's AppLogoCard recipe * (LandingPage.tsx:1971-1981). Lighter than Tier 2.3 .panel: no heavy outer * drop, no bottom inset dark. Only a thin ground kiss + top highlight, so * the card reads as "translucent floating" instead of "grounded/weighted". * This is the "通透" quality — same material language, just less shadow. */ .dash-metric { padding: 20px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.018) 100%); border: 1px solid rgba(255,255,255,.11); border-top-color: rgba(255,255,255,.17); box-shadow: 0 1px 2px rgba(0,0,0,.12), inset 0 1px 1px rgba(255,255,255,.06); position: relative; } /* Metric label — Tier 2.6 kicker spec (10px / .14em / .65 / 600). * Color is overridden per-position below to give each metric a distinct * morandi-muted accent. Section kickers stay amber; only in-card labels * vary, so the overall palette feels richer without becoming "rainbow". */ .dash-metric-lbl { display: block; color: rgba(200,169,110,.65); font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; line-height: 1; } /* Per-metric morandi accents: * 1) 活跃环境 — mint (alive/active) * 2) 评测次数 — soft blue (data/count) * 3) 训练次数 — soft coral (effort/training) * 4) 最近成功率 — amber (achievement, keeps brand accent) */ .dash-metric:nth-child(1) .dash-metric-lbl { color: rgba(123,191,166,.72); } .dash-metric:nth-child(2) .dash-metric-lbl { color: rgba(140,180,220,.72); } .dash-metric:nth-child(3) .dash-metric-lbl { color: rgba(220,160,152,.72); } .dash-metric:nth-child(4) .dash-metric-lbl { color: rgba(175,195,155,.72); } /* Metric value — Tier 2.7 display numeral recipe (weight 760, -.045em tracking, * font-kerning normal, font-synthesis none). Tabular-nums so columns align. */ .dash-metric-val { display: block; font-family: var(--font-display-latin); font-size: clamp(30px, 3vw, 40px); font-weight: 760; letter-spacing: -.045em; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; font-kerning: normal; font-synthesis: none; } /* Section kicker — Tier 2.6 kicker spec (10px / .14em / .58 / weight 600). * Used between dashboard modules (METRICS / QUICK ACTIONS / RECENT ACTIVITY). */ .dash-section-kicker { margin: 28px 2px 14px; color: rgba(200,169,110,.72); font-family: 'IBM Plex Mono', 'Noto Sans SC', monospace; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1; } /* First kicker in the dash flow tightens its top margin */ .dash > .dash-section-kicker:first-of-type { margin-top: 20px; } /* Section row — kicker + inline action chips on a single line. Used when a section has section-level actions (e.g. RECENT ACTIVITY → 新建评测/新建训练). */ .dash-section-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 2px 14px; } .dash-section-row .dash-section-kicker { margin: 0; } .dash-section-actions { display: inline-flex; gap: 8px; } /* Chip action — section-level action pill. Material matches .filter-tab.active (white text on faint amber→white gradient with amber border) so action chips, filter chips, and nav chips all read as one family. */ .chip-action, .chip-action:link, .chip-action:visited, .chip-action:active { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 980px; font-size: 0.82rem; font-weight: 500; color: var(--text-primary); background: linear-gradient(180deg, rgba(200,169,110,.12) 0%, rgba(255,255,255,.055) 100%); border: 1px solid rgba(200,169,110,.22); text-decoration: none; white-space: nowrap; transition: background .15s ease, border-color .15s ease, transform .15s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 22px rgba(0,0,0,.16); } .chip-action:hover { background: linear-gradient(180deg, rgba(200,169,110,.18) 0%, rgba(255,255,255,.08) 100%); border-color: rgba(200,169,110,.32); transform: translateY(-1px); } /* Quick actions */ .dash-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } /* ── .dash-action-card — verbatim port of efflora .docs-nav-card ── * Source: SaaS2AI/web/src/styles/tokens.css:899-919 * padding 22px 20px; border-radius 20; bg 2-stop .06→.022; border .08; border-top .13 * transition: transform .22s cubic-bezier(.16,1,.3,1), border-color .2s, box-shadow .2s * shadow: inset 0 1px 0 .04, 0 14px 30px .16 * hover: translateY(-3px), border-color amber .22, 0 0 0 3px amber .06, deep shadow * efflora's .docs-nav-card is a block; App World's action card is horizontal * (icon + text + link). Material is ported verbatim; layout (flex row) kept. */ /* Action card — Tier 2.3 panel recipe. Hover follows spec: amber picks up in * border, translateY(-1px) lift. Previous colored amber box-shadow ring on * hover (0 0 0 3px amber .06) removed — spec anti-pattern 5. */ .dash-action-card { display: flex; align-items: center; gap: 12px; padding: 22px 20px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.018) 100%); border: 1px solid rgba(255,255,255,.11); border-top-color: rgba(255,255,255,.17); box-shadow: 0 1px 2px rgba(0,0,0,.12), inset 0 1px 1px rgba(255,255,255,.06); transition: transform .22s cubic-bezier(.16,1,.3,1), border-color .2s, box-shadow .2s; position: relative; } .dash-action-card:hover { transform: translateY(-1px); border-color: rgba(200,169,110,.12); border-top-color: rgba(200,169,110,.18); } /* Clean icon tile — no colored background or border. Transparent tile, * only the SVG stroke carries color per action. This is the premium * pattern used by Linear/Stripe/Vercel: icon accent as a restrained * single-color signal, not a "colored chip / sticker". */ .dash-action-icon { flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: transparent; color: var(--text-2); } /* Per-action SVG color only. No tile fill, no border. Alpha pushed to * .8 for strong presence without a background to contain it. */ .dash-action-card:nth-child(1) .dash-action-icon { color: rgba(140,180,220,.8); } .dash-action-card:nth-child(2) .dash-action-icon { color: rgba(200,169,110,.8); } .dash-action-card:nth-child(3) .dash-action-icon { color: rgba(123,191,166,.8); } .dash-action-card:nth-child(4) .dash-action-icon { color: rgba(167,139,250,.85); } .dash-action-card strong { display: block; font-size: .88rem; } .dash-action-card small { display: block; color: var(--text-3); font-size: .76rem; margin-top: 1px; } .dash-action-link { margin-left: auto; flex-shrink: 0; font-size: .78rem; color: var(--accent); text-decoration: none; font-weight: 500; } .dash-action-link:hover { text-decoration: underline; } /* Per-action link color — matches the icon color of the same card, so * icon + action link form a unified color pair per card. Replaces the * default amber so the whole row isn't monotone yellow. */ .dash-action-card:nth-child(1) .dash-action-link { color: rgba(140,180,220,.85); } .dash-action-card:nth-child(2) .dash-action-link { color: rgba(200,169,110,.85); } .dash-action-card:nth-child(3) .dash-action-link { color: rgba(123,191,166,.85); } .dash-action-card:nth-child(4) .dash-action-link { color: rgba(167,139,250,.9); } /* Scene card */ .scene-card { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-raised); transition: border-color .15s; } .scene-card:hover { border-color: var(--border-strong); } .scene-icon, .app-icon-large { font-size: 1.6rem; } .scene-name { font-weight: 700; font-size: .92rem; margin-top: 6px; } .scene-meta { color: var(--text-3); font-size: .82rem; } /* Step card */ .step-card { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-raised); } /* Logo wall */ .logo-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 14px; } .logo-card { padding: 16px; min-height: 100px; display: grid; align-content: space-between; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-raised); } .logo-icon { font-size: 1.6rem; } .logo-name { font-weight: 700; font-size: .88rem; } .logo-meta { color: var(--text-3); font-size: .8rem; } /* ── LEADERBOARD ── */ .leaderboard-card { position: relative; padding: 22px; border-radius: var(--radius); background: linear-gradient(180deg, #1a1d23 0%, #14171c 100%); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 -1px 0 rgba(0,0,0,.4) inset, 0 2px 4px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35); transition: transform .2s cubic-bezier(.32,.72,0,1), box-shadow .2s cubic-bezier(.32,.72,0,1), border-color .2s ease; } .leaderboard-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.2); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 -1px 0 rgba(0,0,0,.4) inset, 0 4px 8px rgba(0,0,0,.5), 0 20px 40px rgba(0,0,0,.5); } /* 贪吃蛇流光边框 - 沿着卡片边缘流动的细线 参考：Linear/Vercel/Stripe 的 premium motion UI */ .leaderboard-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--glow-angle, 0deg), transparent 88%, rgba(200,220,255,.35) 93%, #ffffff 97%, rgba(200,220,255,.35) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: glowSpin 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; pointer-events: none; z-index: 1; } /* #1 Gold - 金牌（保留金色底色 + 金色外部辉光） */ .leaderboard-card.rank-1 { background: linear-gradient(180deg, rgba(251,191,36,.1) 0%, #14171c 60%); border: 1.5px solid rgba(251,191,36,.4); box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 -1px 0 rgba(0,0,0,.4) inset, 0 2px 4px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.4), 0 0 32px rgba(251,191,36,.12); } .leaderboard-card.rank-1:hover { border-color: rgba(251,191,36,.55); box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 -1px 0 rgba(0,0,0,.4) inset, 0 4px 8px rgba(0,0,0,.5), 0 20px 40px rgba(0,0,0,.5), 0 0 48px rgba(251,191,36,.2); } .leaderboard-card.rank-1 .leaderboard-rank { color: #FBBF24; } .leaderboard-card.rank-1 .leaderboard-score { background: linear-gradient(135deg, #FBBF24, #F59E0B); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* #2 Silver - 银牌 */ .leaderboard-card.rank-2 { background: linear-gradient(180deg, rgba(148,163,184,.08) 0%, #14171c 60%); border-color: rgba(148,163,184,.28); } .leaderboard-card.rank-2 .leaderboard-rank { color: #CBD5E1; } .leaderboard-card.rank-2 .leaderboard-score { background: linear-gradient(135deg, #CBD5E1, #94A3B8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* #3 Bronze - 铜牌 */ .leaderboard-card.rank-3 { background: linear-gradient(180deg, rgba(217,119,6,.08) 0%, #14171c 60%); border-color: rgba(217,119,6,.28); } .leaderboard-card.rank-3 .leaderboard-rank { color: #F59E0B; } .leaderboard-card.rank-3 .leaderboard-score { background: linear-gradient(135deg, #F59E0B, #D97706); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* 错开动画起始角度，三张卡流光不同步，视觉更丰富（同一白色但节奏错开） */ .leaderboard-card.rank-1::before { animation-delay: 0s; } .leaderboard-card.rank-2::before { animation-delay: -2.67s; } .leaderboard-card.rank-3::before { animation-delay: -5.33s; } .leaderboard-card h2 { color: #ffffff; } .leaderboard-card .subtle-text, .leaderboard-card .leaderboard-meta, .leaderboard-card .leaderboard-tagline { color: rgba(255,255,255,.6); } /* ── LEADERBOARD CARDS: 浅色主题覆盖 ── */ [data-theme="light"] .leaderboard-card { background: #ffffff; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(0,0,0,.04); } [data-theme="light"] .leaderboard-card::before { display: none; } [data-theme="light"] .leaderboard-card:hover { box-shadow: 0 4px 8px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.06); border-color: rgba(0,0,0,.12); } [data-theme="light"] .leaderboard-card.rank-1 { background: #fff9e6; border: 1.5px solid rgba(245,158,11,.3); box-shadow: 0 2px 6px rgba(245,158,11,.12), 0 1px 3px rgba(245,158,11,.08), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(245,158,11,.1); } [data-theme="light"] .leaderboard-card.rank-1:hover { box-shadow: 0 6px 12px rgba(245,158,11,.18), 0 3px 6px rgba(245,158,11,.12), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(245,158,11,.15); border-color: rgba(245,158,11,.4); } [data-theme="light"] .leaderboard-card.rank-2 { background: #f5f5f5; border-color: rgba(100,116,139,.18); } [data-theme="light"] .leaderboard-card.rank-2 .leaderboard-rank { color: #64748B; } [data-theme="light"] .leaderboard-card.rank-2 .leaderboard-score { background: linear-gradient(135deg, #64748B, #94A3B8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-theme="light"] .leaderboard-card.rank-3 { background: #fef6e8; border-color: rgba(180,83,9,.2); } [data-theme="light"] .leaderboard-card.rank-3 .leaderboard-rank { color: #B45309; } [data-theme="light"] .leaderboard-card.rank-3 .leaderboard-score { background: linear-gradient(135deg, #B45309, #D97706); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-theme="light"] .leaderboard-card h2 { color: #1f2937; } [data-theme="light"] .leaderboard-card .subtle-text, [data-theme="light"] .leaderboard-card .leaderboard-meta, [data-theme="light"] .leaderboard-card .leaderboard-tagline { color: #6b7280; } .leaderboard-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .leaderboard-rank { font-size: .72rem; font-weight: 600; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dim); } .leaderboard-score-row { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 8px; } .leaderboard-score { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; font-weight: 800; letter-spacing: -.05em; font-family: var(--font-display); background: linear-gradient(135deg, #78B4FF, #B4D8FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .leaderboard-meta { color: var(--text-3); font-size: .82rem; font-family: var(--mono); } .leaderboard-tagline { margin: 10px 0 0; color: var(--text-2); line-height: 1.55; font-size: .88rem; } /* Compact task dots (inline in Agent cell) */ /* Inline pass bar in leaderboard */ .inline-pass-bar { height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; margin-bottom: 6px; } .inline-pass-fill { height: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24); border-radius: 3px; transition: width 0.3s ease; } .inline-pass-label { display: flex; align-items: baseline; gap: 6px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-variant-numeric: tabular-nums; } .inline-pass-label strong { font-size: 0.9375rem; font-weight: 700; color: #111827; } .inline-pass-count { font-size: 0.75rem; color: #9ca3af; font-weight: 500; } .benchmark-hero { margin-bottom: 0; } .benchmark-notes { gap: 8px; } .benchmark-sidecopy { margin-top: 14px; line-height: 1.6; color: var(--text-2); } /* ── BENCHMARK: KEY INSIGHTS BAR ── */ .benchmark-insights { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: rgba(255,255,255,.03); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius-md); font-size: .85rem; color: var(--text-2); flex-wrap: wrap; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .benchmark-insights strong { color: var(--text); font-weight: 700; } .insight-sep { width: 1px; height: 16px; background: rgba(255,255,255,.1); flex-shrink: 0; } /* ── BENCHMARK: 6-COLUMN STATS (glass cards) ── */ .benchmark-stats { grid-template-columns: repeat(6, 1fr); } .benchmark-stats .metric-card { background: rgba(255,255,255,.03); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 16px rgba(0,0,0,.15); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .benchmark-stats .metric-card:hover { transform: translateY(-2px); background: rgba(255,255,255,.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.25); } .benchmark-stats .metric-card:nth-child(1) .metric-value { color: #78B4FF; text-shadow: 0 0 20px rgba(120,180,255,.25); } .benchmark-stats .metric-card:nth-child(2) .metric-value { color: #10b981; text-shadow: 0 0 20px rgba(16,185,129,.25); } .benchmark-stats .metric-card:nth-child(3) .metric-value { color: #A78BFA; text-shadow: 0 0 20px rgba(167,139,250,.25); } .benchmark-stats .metric-card:nth-child(4) .metric-value { color: #FBBF24; text-shadow: 0 0 20px rgba(251,191,36,.25); } .benchmark-stats .metric-card:nth-child(5) .metric-value { color: #2DD4BF; text-shadow: 0 0 20px rgba(45,212,191,.25); } .benchmark-stats .metric-card:nth-child(6) .metric-value { color: #F472B6; text-shadow: 0 0 20px rgba(244,114,182,.25); } @media (max-width: 960px) { .benchmark-stats { grid-template-columns: repeat(3, 1fr); } } /* ── BENCHMARK: 7-COLUMN STATS RIBBON (podium colors + 3D effect) ── */ .benchmark-stats-enhanced { grid-template-columns: repeat(7, 1fr); gap: 16px; } .benchmark-stats-enhanced .metric-card { position: relative; background: linear-gradient(180deg, #1a1d23 0%, #14171c 100%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 -1px 0 rgba(0, 0, 0, 0.4) inset, 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.35); transition: transform .2s cubic-bezier(.32,.72,0,1), box-shadow .2s cubic-bezier(.32,.72,0,1), border-color .2s ease; } .benchmark-stats-enhanced .metric-card:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 -1px 0 rgba(0, 0, 0, 0.4) inset, 0 4px 8px rgba(0, 0, 0, 0.5), 0 20px 40px rgba(0, 0, 0, 0.5); } /* 7 cards - 深色主题（默认） 策略：深色实色底（不透明）+ 顶部色调 accent bar + 清晰边框定义 + 立体阴影 参考 Linear/Vercel/Stripe 的 premium dark 风格 */ /* 顶部 2px 色条作为 accent indicator */ .benchmark-stats-enhanced .metric-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: var(--radius-md) var(--radius-md) 0 0; opacity: 0.8; } .benchmark-stats-enhanced .metric-card:nth-child(1) { background: linear-gradient(180deg, rgba(200, 169, 110, 0.08) 0%, #14171c 60%); border-color: rgba(200, 169, 110, 0.25); } .benchmark-stats-enhanced .metric-card:nth-child(1)::before { background: linear-gradient(90deg, transparent, #C8A96E, transparent); } .benchmark-stats-enhanced .metric-card:nth-child(2) { background: linear-gradient(180deg, rgba(251, 146, 60, 0.08) 0%, #14171c 60%); border-color: rgba(251, 146, 60, 0.25); } .benchmark-stats-enhanced .metric-card:nth-child(2)::before { background: linear-gradient(90deg, transparent, #fb923c, transparent); } .benchmark-stats-enhanced .metric-card:nth-child(3) { background: linear-gradient(180deg, rgba(120, 180, 255, 0.08) 0%, #14171c 60%); border-color: rgba(120, 180, 255, 0.25); } .benchmark-stats-enhanced .metric-card:nth-child(3)::before { background: linear-gradient(90deg, transparent, #78B4FF, transparent); } .benchmark-stats-enhanced .metric-card:nth-child(4) { background: linear-gradient(180deg, rgba(74, 222, 128, 0.08) 0%, #14171c 60%); border-color: rgba(74, 222, 128, 0.25); } .benchmark-stats-enhanced .metric-card:nth-child(4)::before { background: linear-gradient(90deg, transparent, #4ade80, transparent); } .benchmark-stats-enhanced .metric-card:nth-child(5) { background: linear-gradient(180deg, rgba(251, 191, 36, 0.12) 0%, #14171c 60%); border: 1.5px solid rgba(251, 191, 36, 0.45); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 -1px 0 rgba(0, 0, 0, 0.4) inset, 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 24px rgba(251, 191, 36, 0.1); } .benchmark-stats-enhanced .metric-card:nth-child(5)::before { background: linear-gradient(90deg, transparent, #fbbf24, transparent); opacity: 1; height: 2.5px; } .benchmark-stats-enhanced .metric-card:nth-child(6) { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, #14171c 60%); border-color: rgba(255, 255, 255, 0.15); } .benchmark-stats-enhanced .metric-card:nth-child(6)::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); } .benchmark-stats-enhanced .metric-card:nth-child(7) { background: linear-gradient(180deg, rgba(214, 211, 209, 0.06) 0%, #14171c 60%); border-color: rgba(214, 211, 209, 0.2); } .benchmark-stats-enhanced .metric-card:nth-child(7)::before { background: linear-gradient(90deg, transparent, #d6d3d1, transparent); } /* Highlight card (最佳表现) - 金色辉光突出 */ .benchmark-stats-enhanced .metric-card.metric-highlight { background: linear-gradient(180deg, rgba(251, 191, 36, 0.12) 0%, #14171c 60%); border: 1.5px solid rgba(251, 191, 36, 0.45); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 -1px 0 rgba(0, 0, 0, 0.4) inset, 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 32px rgba(251, 191, 36, 0.15); } .benchmark-stats-enhanced .metric-card.metric-highlight:hover { border-color: rgba(251, 191, 36, 0.6); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 -1px 0 rgba(0, 0, 0, 0.4) inset, 0 4px 8px rgba(0, 0, 0, 0.5), 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 48px rgba(251, 191, 36, 0.22); } /* Enhanced stats card text colors - 深色主题 */ .benchmark-stats-enhanced .metric-value { color: #ffffff; font-weight: 600; } .benchmark-stats-enhanced .metric-label { color: rgba(255, 255, 255, 0.72); font-weight: 500; } .benchmark-stats-enhanced .metric-sublabel { color: rgba(255, 255, 255, 0.5); } /* Individual card value colors for visual distinction - 深色主题 */ .benchmark-stats-enhanced .metric-card:nth-child(1) .metric-value { color: #C8A96E; } .benchmark-stats-enhanced .metric-card:nth-child(2) .metric-value { color: #fb923c; } .benchmark-stats-enhanced .metric-card:nth-child(3) .metric-value { color: #78B4FF; } .benchmark-stats-enhanced .metric-card:nth-child(4) .metric-value { color: #4ade80; } .benchmark-stats-enhanced .metric-card:nth-child(5) .metric-value { color: #fbbf24; } .benchmark-stats-enhanced .metric-card:nth-child(6) .metric-value { color: rgba(255, 255, 255, 0.85); } .benchmark-stats-enhanced .metric-card:nth-child(7) .metric-value { color: #d6d3d1; } /* ── BENCHMARK STATS: 浅色主题覆盖 ── */ [data-theme="light"] .benchmark-stats-enhanced .metric-card::before { display: none; } [data-theme="light"] .benchmark-stats-enhanced .metric-card { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.04); } [data-theme="light"] .benchmark-stats-enhanced .metric-card:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.12); } [data-theme="light"] .benchmark-stats-enhanced .metric-card:nth-child(1) { background: #fef6e8; border-color: rgba(146, 64, 14, 0.15); } [data-theme="light"] .benchmark-stats-enhanced .metric-card:nth-child(2) { background: #ffe9d6; border-color: rgba(194, 65, 12, 0.15); } [data-theme="light"] .benchmark-stats-enhanced .metric-card:nth-child(3) { background: #e8eef5; border-color: rgba(37, 99, 235, 0.15); } [data-theme="light"] .benchmark-stats-enhanced .metric-card:nth-child(4) { background: #f0f4f0; border-color: rgba(22, 101, 52, 0.15); } [data-theme="light"] .benchmark-stats-enhanced .metric-card:nth-child(5) { background: #fff9e6; border: 1.5px solid rgba(245, 158, 11, 0.3); } [data-theme="light"] .benchmark-stats-enhanced .metric-card:nth-child(6) { background: #f5f5f5; border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .benchmark-stats-enhanced .metric-card:nth-child(7) { background: #faf8f3; border-color: rgba(120, 113, 108, 0.15); } [data-theme="light"] .benchmark-stats-enhanced .metric-card.metric-highlight { background: #fff9e6; border: 1.5px solid rgba(245, 158, 11, 0.3); box-shadow: 0 2px 6px rgba(245, 158, 11, 0.12), 0 1px 3px rgba(245, 158, 11, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(245, 158, 11, 0.1); } [data-theme="light"] .benchmark-stats-enhanced .metric-card.metric-highlight:hover { box-shadow: 0 6px 12px rgba(245, 158, 11, 0.18), 0 3px 6px rgba(245, 158, 11, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.4); } [data-theme="light"] .benchmark-stats-enhanced .metric-value { color: #1f2937; } [data-theme="light"] .benchmark-stats-enhanced .metric-label { color: #374151; } [data-theme="light"] .benchmark-stats-enhanced .metric-sublabel { color: #6b7280; } [data-theme="light"] .benchmark-stats-enhanced .metric-card:nth-child(1) .metric-value { color: #92400e; } [data-theme="light"] .benchmark-stats-enhanced .metric-card:nth-child(2) .metric-value { color: #c2410c; } [data-theme="light"] .benchmark-stats-enhanced .metric-card:nth-child(3) .metric-value { color: #1e40af; } [data-theme="light"] .benchmark-stats-enhanced .metric-card:nth-child(4) .metric-value { color: #15803d; } [data-theme="light"] .benchmark-stats-enhanced .metric-card:nth-child(5) .metric-value { color: #d97706; } [data-theme="light"] .benchmark-stats-enhanced .metric-card:nth-child(6) .metric-value { color: #4b5563; } [data-theme="light"] .benchmark-stats-enhanced .metric-card:nth-child(7) .metric-value { color: #78716c; } @media (max-width: 1200px) { .benchmark-stats-enhanced { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 960px) { .benchmark-stats-enhanced { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .benchmark-stats-enhanced { grid-template-columns: repeat(2, 1fr); } } /* ── BENCHMARK: TREND INDICATORS ── */ .trend { display: inline-flex; align-items: center; gap: 3px; font-size: 0.8125rem; font-weight: 600; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-variant-numeric: tabular-nums; padding: 4px 8px; border-radius: 5px; border: 1px solid; } /* 上涨 - 绿色 (重点色) */ .trend-up { color: #10b981; background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.2); } /* 下降 - 红色 (重点色) */ .trend-down { color: #ef4444; background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.2); } .trend-neutral { color: var(--text-3); background: var(--surface); } /* ── BENCHMARK: PASS BAR (progress) ── */ .pass-bar { position: relative; height: 22px; background: var(--surface); border-radius: 6px; overflow: hidden; margin: 8px 0; } .pass-bar-fill { height: 100%; background: linear-gradient(90deg, rgba(120,180,255,.25), rgba(120,180,255,.4)); border-radius: 6px; transition: width .3s ease; } .rank-1 .pass-bar-fill { background: linear-gradient(90deg, rgba(251,191,36,.2), rgba(251,191,36,.45)); } .rank-2 .pass-bar-fill { background: linear-gradient(90deg, rgba(148,163,184,.2), rgba(148,163,184,.4)); } .rank-3 .pass-bar-fill { background: linear-gradient(90deg, rgba(217,119,6,.2), rgba(217,119,6,.4)); } .pass-bar-label { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: .72rem; font-weight: 600; font-family: var(--mono); color: var(--text-2); } /* ── BENCHMARK: SCORE CELL HEATMAP ── */ .score-cell { background: rgba(16, 185, 129, calc(var(--score-pct, 0) * 0.002)); font-family: var(--mono); color: #10b981; } .score-cell strong { font-size: 1rem; } .rank-cell { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 700; font-size: 0.9375rem; font-variant-numeric: tabular-nums; } /* Rank colors in table */ tr:nth-child(1) > .rank-cell { color: #d97706; font-size: 1.0625rem; } tr:nth-child(2) > .rank-cell { color: #94a3b8; font-size: 1rem; } tr:nth-child(3) > .rank-cell { color: #ca8a04; } tr:nth-child(n+4) > .rank-cell { color: #6b7280; font-weight: 600; } /* ── BENCHMARK: HEATMAP TABLE ── */ .heatmap-table { text-align: center; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .heatmap-table thead th { font-size: 0.75rem; font-weight: 600; text-transform: none; letter-spacing: 0.02em; color: var(--text-2); padding: 12px 16px; border-bottom: 1px solid var(--border-strong); position: sticky; top: 0; background: var(--surface); z-index: 1; } .heatmap-table td:first-child, .heatmap-table th:first-child { text-align: left; } .heatmap-task-col { width: 20%; } .heatmap-diff-col { width: 8%; } .heatmap-agent-col { font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; } .heatmap-rate-col { width: 16%; } /* Row styling */ .heatmap-row { transition: background 0.1s ease; } .heatmap-row:hover { background: var(--surface-hover); } .heatmap-row td { padding: 10px 8px; border-bottom: 1px solid var(--border); } .heatmap-row:last-child td { border-bottom: none; } /* Task name */ .heatmap-task-name { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } /* Difficulty tags */ .heatmap-diff-cell { text-align: center; } .diff-tag, .diff-badge { display: inline-block; padding: 3px 10px; border-radius: 5px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; border: 1px solid; } /* 简单 - 暗绿色 */ .diff-easy, .diff-low { color: #4ade80; background: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.2); } /* 中等 - 暗橙色 */ .diff-medium { color: #fb923c; background: rgba(251, 146, 60, 0.12); border-color: rgba(251, 146, 60, 0.2); } /* 困难 - 暗灰色 */ .diff-hard, .diff-high { color: #a1a1aa; background: rgba(161, 161, 170, 0.12); border-color: rgba(161, 161, 170, 0.2); } /* Pass/fail cells */ .heatmap-cell { font-size: 1rem; padding: 6px 4px; } .hm-icon { line-height: 1; } .hm-pass { color: #f59e0b; } .hm-fail { color: rgba(255,255,255,.15); } /* Rate cell */ .heatmap-rate-cell { text-align: left; padding-left: 10px; } .heatmap-rate-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; } .heatmap-rate-pct { font-size: .85rem; font-weight: 700; font-family: var(--mono); color: var(--text-1); } .heatmap-rate-count { font-size: .7rem; color: var(--text-2); font-family: var(--mono); } .heatmap-rate-bar { height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; } .heatmap-rate-fill { height: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24); border-radius: 3px; transition: width .3s ease; } /* ── CHIPS ── */ .chip-row, .choice-list { display: flex; flex-wrap: wrap; gap: 8px; } .chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: .82rem; } .choice-item { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-raised); color: var(--text); } .choice-item.linkish { text-decoration: none; } .choice-item.is-complete { border-color: rgba(16,185,129,.2); background: rgba(16,185,129,.06); } .choice-item small { display: block; margin-top: 3px; color: var(--text-3); font-size: .8rem; line-height: 1.4; } .checkmark { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: .82rem; font-weight: 700; background: var(--accent-bg); color: var(--accent); } .onboarding-list { display: grid; gap: 10px; } /* ── STATUS PILLS ── */ .status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; font-family: var(--font); letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid; white-space: nowrap; } /* Verified - 深色主题：亮绿文字 + 半透明绿背景 */ .status-pill.good { color: #4ade80; background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.25); } /* Public Repro - 深色主题：亮灰文字 + 半透明白背景 */ .status-pill.neutral { color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); } /* Community - 深色主题：亮橙文字 + 半透明橙背景 */ .status-pill.warm { color: #fb923c; background: rgba(251, 146, 60, 0.1); border-color: rgba(251, 146, 60, 0.25); } /* 浅色主题覆盖 */ [data-theme="light"] .status-pill.good { color: #15803d; background: #f0f4f0; border-color: rgba(22, 101, 52, 0.2); } [data-theme="light"] .status-pill.neutral { color: #4b5563; background: #f5f5f5; border-color: rgba(0, 0, 0, 0.12); } [data-theme="light"] .status-pill.warm { color: #c2410c; background: #ffe9d6; border-color: rgba(194, 65, 12, 0.2); } /* ── TABLE ── */ .table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-md); } table { width: 100%; border-collapse: collapse; background: var(--bg-raised); table-layout: fixed; } td { overflow: hidden; text-overflow: ellipsis; } th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; } th { position: sticky; top: 0; z-index: 1; background: rgba(255,255,255,.04); color: var(--text-3); font-size: .78rem; font-weight: 600; font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em; } .leaderboard-table { font-variant-numeric: tabular-nums; border: 1px solid var(--border); border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden; } .leaderboard-table thead th { background: var(--surface); color: var(--text-2); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; padding: 12px 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; border-bottom: 1px solid var(--border-strong); } .leaderboard-table tbody tr { transition: background-color 0.1s ease; } .leaderboard-table tbody tr:hover { background: var(--surface-hover); } .leaderboard-table td { vertical-align: middle; padding: 14px 16px; font-size: 0.875rem; line-height: 1.5; border-bottom: 1px solid var(--border); } .leaderboard-table tbody tr:last-child td { border-bottom: none; } .leaderboard-table td strong { font-size: 0.9375rem; font-weight: 600; color: var(--text); display: block; margin-bottom: 2px; } .leaderboard-table td .subtle-text { font-size: 0.8125rem; color: var(--text-2); line-height: 1.4; } .matrix-row td { padding-top: 0; } .task-matrix { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 8px; } .task-cell { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; font-size: .8rem; border: 1px solid var(--border); background: var(--surface); } .task-cell.passed { background: var(--accent-bg); border-color: var(--accent-border); } .task-cell.failed { background: var(--warning-bg); border-color: rgba(245,158,11,.18); } /* ── FORMS ── */ .filter-bar { padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); } .filter-bar input, .filter-bar select, .stack-form input, .stack-form select, .stack-form textarea { min-height: 42px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--bg-raised); color: var(--text); } .filter-bar input::placeholder, .stack-form input::placeholder { color: var(--text-3); } .filter-bar input:focus, .stack-form input:focus, .stack-form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(120,180,255,.15); } .stack-form { display: grid; gap: 14px; } .stack-form label { display: grid; gap: 6px; } .stack-form span { color: var(--text-2); font-size: .88rem; } .inline-form { display: inline-flex; } /* ── CODE BLOCK ── */ .code-block { margin: 0; padding: 18px; border-radius: var(--radius-md); background: rgba(0,0,0,.4); border: 1px solid var(--border); color: rgba(255,255,255,.85); overflow: auto; white-space: pre-wrap; font-family: var(--mono); font-size: .86rem; line-height: 1.6; } /* ── MODAL ── */ .modal { width: min(900px, calc(100vw - 28px)); padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: #111118; box-shadow: 0 24px 80px rgba(0,0,0,.5); color: var(--text); } .modal::backdrop { background: rgba(0,0,0,.6); } .modal-close-row { display: flex; justify-content: flex-end; padding: 14px; } .modal-body { padding: 0 24px 24px; } /* ── TABS ── */ .tab-button { color: var(--text-3); background: transparent; font-size: .86rem; } .tab-button.active { color: var(--text); background: var(--accent-bg); } .tab-panel { display: none; } .tab-panel.active { display: block; } /* ── AUTH ── */ .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; } .auth-center { width: 100%; max-width: 400px; } .auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; justify-content: center; } .auth-brand-mark { width: 36px; height: 36px; display: grid; place-items: center; background: var(--accent); color: #000; font-weight: 700; font-size: .8rem; font-family: var(--mono); border-radius: 8px; letter-spacing: .04em; } .auth-brand-name { font-size: 1.1rem; font-weight: 600; color: var(--text); letter-spacing: -.01em; } .auth-card { padding: 32px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); backdrop-filter: blur(12px); } .auth-card h1 { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); } .auth-subtitle { margin: 8px 0 0; color: var(--text-2); font-size: .88rem; line-height: 1.55; } .auth-form { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; } .auth-field { display: flex; flex-direction: column; gap: 6px; } .auth-field label { font-size: .78rem; font-weight: 500; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; font-family: var(--mono); } .auth-field input, .auth-field select { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.04); color: var(--text); font-size: .92rem; font-family: var(--font); transition: border-color .15s, box-shadow .15s; } .auth-field input:focus, .auth-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(120,180,255,.12); } .auth-field input::placeholder { color: var(--text-3); } /* Google login button */ .auth-google { width: 100%; padding: 12px 20px; background: #fff; color: #1f1f1f; border: none; border-radius: 8px; font-size: .92rem; font-weight: 500; font-family: var(--font); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background .15s, box-shadow .15s, transform .1s; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .auth-google:hover { background: #f2f2f2; box-shadow: 0 2px 6px rgba(0,0,0,.4); } .auth-google:active { transform: scale(.98); } .auth-google svg { flex-shrink: 0; } /* Divider */ .auth-divider { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: var(--text-3); font-size: .76rem; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* Email fallback submit */ .auth-email-submit { width: 100%; margin-top: 4px; padding: 11px 20px; background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 8px; font-size: .88rem; font-weight: 500; font-family: var(--font); cursor: pointer; transition: border-color .15s, background .15s, transform .1s; } .auth-email-submit:hover { border-color: var(--border-strong); background: rgba(255,255,255,.04); } .auth-email-submit:active { transform: scale(.98); } /* Terms */ .auth-terms { margin-top: 20px; text-align: center; font-size: .72rem; color: var(--text-3); } .auth-terms a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; } .callout-card h2 { margin: 0; font-size: 1.2rem; font-weight: 700; } /* ── GUIDE BAR (onboarding inline) ── */ .guide-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; margin-bottom: 20px; border: 1px solid var(--accent-border); border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(120,180,255,.08) 0%, rgba(120,180,255,.03) 100%); } .guide-bar.guide-bar-hint { border-color: var(--border); background: var(--bg-raised); } .guide-bar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; } .guide-bar-badge { display: inline-block; padding: 2px 10px; font-size: .7rem; font-weight: 600; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent-border); border-radius: 999px; white-space: nowrap; } .guide-bar-hint .guide-bar-badge { color: var(--text-3); background: rgba(255,255,255,.04); border-color: var(--border); } .guide-bar-left strong { font-size: .92rem; white-space: nowrap; } .guide-bar-desc { color: var(--text-2); font-size: .84rem; } .guide-bar-right { flex-shrink: 0; } .guide-bar-progress { width: 80px; height: 4px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.06); } .guide-bar-progress span { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .4s ease; } .guide-bar-link { font-size: .84rem; font-weight: 600; color: var(--accent); white-space: nowrap; transition: opacity .15s; } .guide-bar-link:hover { opacity: .8; } /* ── SETUP / ONBOARDING PAGE ── */ .setup-shell { max-width: 720px; margin: 0 auto; } .setup-header { text-align: center; padding: 20px 0 28px; } .setup-badge { display: inline-block; padding: 4px 14px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-family: var(--mono); color: var(--accent); border: 1px solid var(--accent-border); border-radius: 999px; background: var(--accent-bg); margin-bottom: 14px; } .setup-header h1 { margin: 0 0 8px; font-size: 1.6rem; font-weight: 700; font-family: var(--font-display); } .setup-sub { margin: 0 0 20px; color: var(--text-2); font-size: .92rem; } .setup-progress-bar { width: 200px; height: 6px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.06); margin: 0 auto 8px; } .setup-progress-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent) 0%, rgba(120,180,255,.5) 100%); transition: width .4s ease; } .setup-progress-text { color: var(--text-3); font-size: .78rem; font-family: var(--mono); } /* Steps */ .setup-steps { display: grid; gap: 16px; } .setup-step { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); transition: border-color .2s, background .2s; } .setup-step.is-active { border-color: var(--accent-border); background: linear-gradient(135deg, rgba(120,180,255,.06) 0%, rgba(120,180,255,.02) 100%); box-shadow: 0 0 0 1px rgba(120,180,255,.08); } .setup-step.is-done { opacity: .6; } .setup-step.is-locked { opacity: .35; pointer-events: none; } .setup-step-num { display: flex; justify-content: center; padding-top: 2px; } .setup-num { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700; font-family: var(--mono); color: var(--text-3); border: 1.5px solid var(--border-strong); } .setup-step.is-active .setup-num { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(120,180,255,.2); } .setup-check { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; color: var(--bg); background: var(--success); } .setup-step-content p { margin: 4px 0 0; color: var(--text-2); font-size: .88rem; line-height: 1.5; } .setup-step-title { display: flex; align-items: center; gap: 10px; } .setup-step-title strong { font-size: 1rem; } /* Inline actions */ .setup-inline-action { margin-top: 16px; } .setup-key-form { display: flex; gap: 10px; align-items: center; } .setup-key-form input[type="text"] { flex: 1; padding: 10px 14px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: .88rem; transition: border-color .15s; } .setup-key-form input[type="text"]:focus { outline: none; border-color: var(--accent); } /* Result blocks */ .setup-result { margin-top: 14px; padding: 14px; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--border); } .setup-result-label { font-size: .78rem; font-weight: 600; color: var(--text-3); font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; } .setup-key-item { font-size: .88rem; color: var(--text-2); padding: 4px 0; } .setup-key-item code { font-family: var(--mono); color: var(--text-3); } .setup-copyable { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: var(--radius-sm); } .setup-copyable code { flex: 1; font-family: var(--mono); font-size: .82rem; word-break: break-all; color: var(--accent); } .copy-btn { padding: 4px 12px; font-size: .78rem; font-family: var(--mono); color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent-border); border-radius: var(--radius-sm); cursor: pointer; transition: background .15s; } .copy-btn:hover { background: rgba(120,180,255,.15); } /* Code block */ .setup-code-block { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); } .setup-code-block pre { margin: 0; padding: 16px; font-family: var(--mono); font-size: .8rem; line-height: 1.6; color: var(--text-2); white-space: pre-wrap; word-break: break-word; max-height: 280px; overflow-y: auto; } .setup-copy-form { display: flex; justify-content: flex-end; padding: 8px 12px; border-top: 1px solid var(--border); background: rgba(255,255,255,.02); } /* Terminal mock */ .setup-terminal { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: #0d0d12; } .setup-terminal-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(255,255,255,.04); border-bottom: 1px solid var(--border); } .setup-terminal-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.12); } .setup-terminal-title { margin-left: 8px; font-size: .72rem; font-family: var(--mono); color: var(--text-3); } .setup-terminal-body { margin: 0; padding: 14px 16px; font-family: var(--mono); font-size: .82rem; line-height: 1.7; color: var(--success); } .setup-hint { margin: 10px 0 0; font-size: .82rem; color: var(--text-3); line-height: 1.5; } .setup-hint code { font-family: var(--mono); color: var(--warm); font-size: .78rem; } /* Completion */ .setup-complete { text-align: center; padding: 40px 24px; margin-top: 24px; border: 1px solid rgba(16,185,129,.2); border-radius: var(--radius); background: var(--success-bg); } .setup-complete-icon { font-size: 2rem; display: block; margin-bottom: 12px; } .setup-complete h2 { margin: 0 0 8px; font-size: 1.2rem; color: var(--success); } .setup-complete p { margin: 0 0 20px; color: var(--text-2); font-size: .92rem; } /* ── MISC ── */ .section { padding-top: 10px; } .section-heading { margin-bottom: 14px; } .section-heading h2 { margin: 6px 0 0; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; } .hero { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr); gap: 20px; } .hero-copy, .hero-panel { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); } .hero-copy.compact { padding: 22px; } .hero h1, .hero-copy h1 { margin: 0; font-size: clamp(1.8rem, 3.5vw, 3rem); font-family: var(--font-display); line-height: 1; letter-spacing: -.03em; font-weight: 700; } .hero p, .hero-copy p { max-width: 56ch; margin: 12px 0 0; color: var(--text-2); font-size: .92rem; line-height: 1.6; } .dashboard-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr); gap: 20px; } .back-link { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; margin-left: -8px; /* 视觉左缘对齐内容主体（让 padding 不让按钮看起来"挪位置"） */ padding: 5px 10px 5px 8px; color: var(--text-secondary); /* 从 text-3 (muted) 升到 secondary，可读性立刻清晰 */ font-size: .88rem; border-radius: 6px; transition: color .15s, background .15s; } .back-link:hover { color: var(--text); background: rgba(255,255,255,.05); /* hover 微高光，给"是个按钮"的明确反馈 */ } .empty-state { padding: 28px; text-align: center; color: var(--text-3); } .selection-summary { color: var(--text-3); } .plain-list { margin: 0; padding-left: 20px; color: var(--text-2); } .plain-list.ordered { display: grid; gap: 6px; } .compact-list { display: grid; gap: 8px; } .steps-list { display: grid; gap: 12px; } .step-card.replay { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: center; } .step-shot img { width: 100%; border-radius: var(--radius-md); border: 1px solid var(--border); } .step-title { font-weight: 700; margin-bottom: 4px; } .app-card { text-align: left; } /* ── RESPONSIVE — Drawer pattern ── * Below 1024px, sidebar is hidden-by-default off-canvas drawer. A * hamburger button in the content area (visible at this breakpoint * only) toggles .sidebar-open on .console-shell; the class drives * sidebar slide-in + backdrop fade. Click outside, ESC, or nav link * clicks close it (see base.html JS). */ @media (max-width: 1024px) { .console-shell { grid-template-columns: 1fr; } .sidebar { position: fixed; top: 0; left: 0; width: 260px; height: 100vh; z-index: 200; transform: translateX(-100%); transition: transform .3s cubic-bezier(.16,1,.3,1); border-right: 1px solid rgba(255,255,255,.08); border-bottom: none; box-shadow: 8px 0 32px -8px rgba(0,0,0,.5); } .console-shell.sidebar-open .sidebar { transform: translateX(0); } /* Backdrop overlay when drawer is open. Fades in/out with .sidebar-open. */ .console-shell::after { content: ''; position: fixed; inset: 0; z-index: 180; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .3s; } .console-shell.sidebar-open::after { opacity: 1; pointer-events: auto; } /* Hamburger toggle — hidden on wide viewports (default), shown here. */ .sidebar-toggle { display: inline-flex; } .hero, .dashboard-hero, .auth-layout { grid-template-columns: 1fr; } } /* Hamburger button — floating top-left of content area, only rendered * visible at narrow widths via the @media above. */ .sidebar-toggle { display: none; position: fixed; top: 14px; left: 14px; z-index: 210; width: 40px; height: 40px; align-items: center; justify-content: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); border-radius: 10px; color: rgba(255,255,255,.85); cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .2s, border-color .2s; } .sidebar-toggle:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); } .sidebar-toggle svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; } @media (max-width: 820px) { .page-shell { padding: 16px 14px 28px; } .hero-copy, .hero-panel, .auth-card, .callout-card, .detail-hero, .page-hero { padding: 18px; } .console-topbar, .page-hero, .panel-header { align-items: flex-start; } .step-card.replay { grid-template-columns: 1fr; } } /* ═══ LANDING PAGE DARK (kept for marketing-shell if ever used) ═══ */ .marketing-shell .page-shell { padding: 0; } .aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .aurora-blob { position: absolute; border-radius: 50%; filter: blur(140px); animation: aurora-in 2s ease forwards; opacity: 0; } .aurora-blob-1 { width: 60vw; height: 60vw; background: rgba(80,140,255,.1); top: -20%; left: -15%; animation: aurora-in 2s ease forwards, aurora-drift-1 20s ease-in-out infinite alternate; } .aurora-blob-2 { width: 50vw; height: 50vw; background: rgba(60,200,220,.07); bottom: -25%; right: -15%; animation: aurora-in 2s ease forwards, aurora-drift-2 25s ease-in-out infinite alternate; animation-delay: -8s; } .aurora-blob-3 { width: 40vw; height: 40vw; background: rgba(120,100,255,.05); top: 40%; left: 50%; animation: aurora-in 2s ease forwards, aurora-drift-3 18s ease-in-out infinite alternate; animation-delay: -4s; } @keyframes aurora-in { to { opacity: 1; } } @keyframes aurora-drift-1 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(8vw,6vh) scale(1.15); } } @keyframes aurora-drift-2 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-6vw,-8vh) scale(1.1); } } @keyframes aurora-drift-3 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(5vw,-5vh) scale(1.2); } } .reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); } .reveal.visible { opacity: 1; transform: translateY(0); } .delay-1 { transition-delay: .1s; } .delay-2 { transition-delay: .2s; } .delay-3 { transition-delay: .3s; } .delay-4 { transition-delay: .4s; } /* ═══ LANDING PAGE — landing-* classes ═══ */ .marketing-shell { display: block; position: relative; z-index: 1; overflow-x: hidden; } /* Hero */ .landing-hero { max-width: 900px; margin: 0 auto; padding: 100px 28px 40px; text-align: center; } .landing-hero-inner { display: flex; flex-direction: column; align-items: center; } /* Label / eyebrow */ .landing-label { display: inline-flex; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; background: var(--accent-bg); color: var(--accent); font-size: .72rem; font-weight: 600; font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; } .landing-label-sm { color: var(--warm); font-size: .72rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; } /* Typography */ .landing-h1 { margin: 0; font-size: clamp(2rem, 4.5vw, 3.2rem); font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; } .landing-h2 { margin: 6px 0 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; } .landing-sub { max-width: 56ch; margin: 16px 0 0; color: var(--text-2); font-size: .95rem; line-height: 1.7; } /* Actions */ .landing-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 28px; } .landing-btn-primary { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); padding: 11px 24px; font-size: .92rem; font-weight: 600; cursor: pointer; text-decoration: none; position: relative; overflow: hidden; transition: all .4s cubic-bezier(.16,1,.3,1); background: linear-gradient(180deg, rgba(120,180,255,.13) 0%, rgba(120,180,255,.04) 100%); border: 1px solid rgba(120,180,255,.2); border-top-color: rgba(120,180,255,.32); color: rgba(120,180,255,.95); box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.14), inset 0 1px 1px rgba(255,255,255,.08), inset 0 -1px 1px rgba(0,0,0,.1); } .landing-btn-primary::before { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(120,180,255,.45) 50%, transparent); pointer-events: none; } .landing-btn-primary:hover { background: linear-gradient(180deg, rgba(120,180,255,.2) 0%, rgba(120,180,255,.08) 100%); border-color: rgba(120,180,255,.32); border-top-color: rgba(120,180,255,.48); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,.15), 0 8px 24px rgba(0,0,0,.2), 0 12px 36px rgba(120,180,255,.07), inset 0 1px 2px rgba(255,255,255,.12), inset 0 -1px 2px rgba(0,0,0,.1); } .landing-btn-primary:active { transform: translateY(0); } .landing-btn-ghost { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); padding: 9px 16px; font-size: .88rem; font-weight: 500; cursor: pointer; text-decoration: none; transition: all .4s cubic-bezier(.16,1,.3,1); color: var(--text-2); background: transparent; border: 1px solid rgba(255,255,255,.1); } .landing-btn-ghost:hover { color: var(--text); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.04); } /* Metrics row */ .landing-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 720px; margin: 36px auto 0; text-align: center; } .landing-metric { padding: 18px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-raised); display: flex; flex-direction: column; align-items: center; } .landing-metric-val { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.04em; font-family: var(--font-display); } .landing-metric-lbl { color: var(--text-3); font-size: .82rem; margin-top: 4px; } /* Chips */ .landing-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 900px; margin: 28px auto 0; } .landing-chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: .82rem; } /* Sections */ .landing-section { max-width: 900px; margin: 0 auto; padding: 48px 28px 0; } .landing-sec-head { margin-bottom: 20px; text-align: center; } .landing-sec-sub { color: var(--text-2); font-size: .9rem; margin: 8px 0 0; line-height: 1.55; } /* Glass card (shared) */ .glass-card { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); transition: border-color .15s, transform .15s; } .glass-card:hover { border-color: var(--border-strong); transform: translateY(-2px); } /* App wall */ .landing-app-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } .landing-app-card { padding: 16px; min-height: 100px; display: grid; align-content: space-between; text-align: left; } .landing-app-icon { font-size: 1.6rem; } .landing-app-name { font-weight: 700; font-size: .88rem; margin-top: 6px; } .landing-app-meta { color: var(--text-3); font-size: .8rem; } /* Goals / use-case cards */ .landing-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .landing-goal-card { display: flex; flex-direction: column; gap: 10px; text-align: left; } .landing-goal-card p { margin: 0; color: var(--text-2); line-height: 1.6; font-size: .9rem; } .landing-goal-head h3 { margin: 4px 0 0; font-size: 1.1rem; } /* Leaderboard */ .landing-leaderboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .landing-rank-card { text-align: left; } .landing-rank-card h3 { margin: 8px 0 4px; font-size: 1.1rem; } .landing-rank-card.rank-gold { background: linear-gradient(160deg, rgba(120,180,255,.08) 0%, var(--bg-raised) 100%); border-color: var(--accent-border); } .landing-rank-badge { font-size: .72rem; font-weight: 600; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dim); } .landing-rank-org { color: var(--text-2); font-size: .85rem; margin: 0; } .landing-rank-score { margin: 14px 0 8px; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; font-weight: 800; letter-spacing: -.05em; font-family: var(--font-display); background: linear-gradient(135deg, #78B4FF, #B4D8FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .landing-rank-stats { color: var(--text-3); font-size: .82rem; font-family: var(--mono); } .landing-rank-tag { margin: 10px 0 0; color: var(--text-2); line-height: 1.55; font-size: .88rem; } .landing-cta-row { text-align: center; margin-top: 20px; } /* Scenes */ .landing-scene-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .landing-scene-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-align: left; } .landing-scene-icon { font-size: 1.6rem; flex-shrink: 0; } .landing-scene-name { font-weight: 700; font-size: .92rem; } .landing-scene-meta { color: var(--text-3); font-size: .82rem; margin-top: 2px; } /* Quick start steps */ .landing-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .landing-step { display: flex; align-items: flex-start; gap: 16px; text-align: left; } .landing-step h3 { margin: 0 0 4px; font-size: 1rem; } .landing-step p { margin: 0; color: var(--text-2); font-size: .88rem; line-height: 1.55; } .landing-step-num { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-bg); color: var(--accent); font-size: .82rem; font-weight: 700; font-family: var(--mono); } /* Footer */ .landing-footer { max-width: 900px; margin: 0 auto; padding: 48px 28px 40px; text-align: center; } .landing-footer-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 20px; border-top: 1px solid var(--border); } .landing-footer-brand { font-weight: 700; font-size: .92rem; font-family: var(--font-display); } .landing-footer-copy { color: var(--text-3); font-size: .82rem; } /* Landing responsive */ @media (max-width: 820px) { .landing-hero { padding: 60px 18px 28px; } .landing-metrics { grid-template-columns: repeat(2, 1fr); } .landing-section { padding: 36px 18px 0; } .landing-goals, .landing-leaderboard { grid-template-columns: 1fr; } .landing-steps { grid-template-columns: 1fr; } } /* ── SIDEBAR QUICK START ── */ /* Diagonal corner lighting — two light sources hitting the card at opposite * corners. Top-left: amber halo (qs-card identity). Bottom-right: warm-white * halo (mirrors .mc-cell's warm-white specular tint, ties to step3 visually). * Hairlines are also directional — top hairline brightest at left, bottom * hairline brightest at right — reinforcing the diagonal light direction. */ .qs-card { gap: 0; padding: 13px 14px 14px; border-color: rgba(200,169,110,.2); background: /* Bottom-right warm-white corner halo */ radial-gradient(ellipse 70% 60% at 100% 100%, rgba(255,248,235,.10) 0%, transparent 60%), /* Top-left amber corner halo */ radial-gradient(ellipse 70% 60% at 0% 0%, rgba(200,169,110,.10) 0%, transparent 60%), /* Faint amber base wash — keeps card's warm identity in the middle */ linear-gradient(180deg, rgba(200,169,110,.02) 0%, rgba(255,255,255,.005) 100%); position: relative; overflow: hidden; } /* Top-LEFT corner arc — 85×85 box anchored at top-left with only top + left * 1px borders and matching corner radius. Radial mask centered AT the corner * (0% 0%) so visibility falls off equally with distance from the corner — * mimics a real light source at the corner radiating outward, instead of a * diagonal slice. Multi-stop ease-out makes the fade feel natural. */ .qs-card::before { content: ''; position: absolute; top: 0; left: 0; width: 85px; height: 85px; box-sizing: border-box; border-top: 1px solid rgba(200,169,110,.75); border-left: 1px solid rgba(200,169,110,.75); border-top-left-radius: 16px; pointer-events: none; mask-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,.92) 12%, rgba(0,0,0,.72) 28%, rgba(0,0,0,.48) 45%, rgba(0,0,0,.26) 62%, rgba(0,0,0,.10) 80%, transparent 100%); -webkit-mask-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,.92) 12%, rgba(0,0,0,.72) 28%, rgba(0,0,0,.48) 45%, rgba(0,0,0,.26) 62%, rgba(0,0,0,.10) 80%, transparent 100%); } /* Bottom-RIGHT corner arc — mirror of ::before, warm-white, radial mask * centered at 100% 100% (bottom-right of the pseudo, which is the parent's * bottom-right corner). */ .qs-card::after { content: ''; position: absolute; bottom: 0; right: 0; width: 85px; height: 85px; box-sizing: border-box; border-bottom: 1px solid rgba(255,248,235,.62); border-right: 1px solid rgba(255,248,235,.62); border-bottom-right-radius: 16px; pointer-events: none; mask-image: radial-gradient(circle at 100% 100%, rgba(0,0,0,1) 0%, rgba(0,0,0,.92) 12%, rgba(0,0,0,.72) 28%, rgba(0,0,0,.48) 45%, rgba(0,0,0,.26) 62%, rgba(0,0,0,.10) 80%, transparent 100%); -webkit-mask-image: radial-gradient(circle at 100% 100%, rgba(0,0,0,1) 0%, rgba(0,0,0,.92) 12%, rgba(0,0,0,.72) 28%, rgba(0,0,0,.48) 45%, rgba(0,0,0,.26) 62%, rgba(0,0,0,.10) 80%, transparent 100%); } .qs-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .qs-fraction { font-size: .65rem; font-family: 'IBM Plex Mono', monospace; color: rgba(200,169,110,.72); letter-spacing: .08em; } /* progress-rail already has margin-bottom: 8px */ .qs-current { display: flex; flex-direction: column; gap: 3px; padding: 9px 0 8px; background: none; border: none; border-top: 1px solid rgba(200,169,110,.1); border-radius: 0; margin: 4px 0 0; } .qs-step-num { font-size: .58rem; font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .14em; color: rgba(200,169,110,.72); font-weight: 600; } .qs-step-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .qs-step-name { font-size: .82rem; font-weight: 500; color: var(--text); line-height: 1.3; } .qs-continue { display: inline-flex; align-items: center; gap: 2px; font-size: .72rem; font-weight: 600; color: rgba(200,169,110,.82); text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: color .15s; } .qs-continue:hover { color: rgba(200,169,110,1); } /* ── ONBOARDING BULLET POINTS ── */ .ob-bullets { list-style: none; padding: 0; margin: 8px 0 6px; display: flex; flex-direction: column; gap: 5px; } .ob-bullets li { font-size: .78rem; color: var(--text-2); line-height: 1.4; padding-left: 4px; } .ob-bullets li code { font-family: var(--mono); font-size: .75rem; background: rgba(120,180,255,.12); padding: 1px 5px; border-radius: 4px; color: var(--accent); } .ob-hint { font-size: .74rem; color: var(--text-3); margin: 6px 0 4px; padding: 6px 8px; border-left: 2px solid rgba(120,180,255,.3); line-height: 1.4; } /* 步骤3/4：不带整体 href 的当前步骤 */ .ob-step-nolink { cursor: default; } .ob-step-nolink:hover { background: transparent; } .ob-step-nolink .ob-cta { display: inline-block; text-decoration: none; } /* Deleted: second copy of .ob-conn-* — status pill now lives under .mc-status-pill * in the .mc-* component block. The JS polling hook on .ob-conn-status is kept * as an HTML alias class (for script targeting) but carries no styles. */ /* ── RUN DETAIL 示例代码 ── */ .panel-header-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; } .panel-header-row h2 { margin: 0; } .code-block-wrap { position: relative; } .code-block { background: var(--bg-2, #111118); border: 1px solid var(--border); border-radius: 8px; padding: 16px; font-family: var(--mono); font-size: .78rem; line-height: 1.6; color: var(--text-2); overflow-x: auto; white-space: pre; margin: 0; } .copy-btn { position: absolute; top: 10px; right: 10px; padding: 5px 12px; background: rgba(120,180,255,.15); border: 1px solid rgba(120,180,255,.25); border-radius: 6px; color: var(--accent); font-size: .75rem; font-family: var(--mono); cursor: pointer; transition: background .15s; } .copy-btn:hover { background: rgba(120,180,255,.25); } .copy-btn.copied { color: var(--success); border-color: var(--success); } /* ── 表格操作链接 —— 同时支持 和