.ld__cap-shot.wf-card-visual { position: relative; margin: -1.8rem -1.8rem 1.4rem; height: clamp(8.5rem, 18vw, 10.5rem); background: radial-gradient(120% 80% at 50% 0%, rgba(59, 130, 246, 0.18), transparent 65%), linear-gradient(180deg, #0f172a 0%, #0b1220 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.10); overflow: hidden; isolation: isolate; } .ld__cap-shot.wf-card-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(10, 10, 10, 0.45) 100%); pointer-events: none; z-index: 3; } @keyframes wf-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.08); } } @keyframes wf-cursor-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes wf-edge-draw { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 20% { opacity: 1; } 60%, 85% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 0 100%); } } @keyframes wf-spin { to { transform: translate(-50%, -50%) rotate(360deg); } } .wf-tree { position: absolute; left: 8%; top: 18%; width: 34%; height: 64%; z-index: 1; } .wf-tree-root { position: absolute; left: 0; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: #60a5fa; transform: translateY(-50%); box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.18); } .wf-tree-branches { position: absolute; left: 18px; top: 0; bottom: 0; width: calc(100% - 18px); } .wf-tree-branch { position: absolute; left: 0; height: 2px; background: #3b82f6; border-radius: 2px; transform-origin: left center; opacity: 0; animation: wf-edge-draw 4s ease-in-out infinite; } .wf-tree-branch.wf-tb1 { top: 18%; width: 60%; transform: rotate(-22deg); animation-delay: .2s; } .wf-tree-branch.wf-tb2 { top: 50%; width: 60%; animation-delay: .5s; } .wf-tree-branch.wf-tb3 { top: 82%; width: 60%; transform: rotate(22deg); animation-delay: .8s; } .wf-tree-leaf { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #0b1220; border: 1.5px solid #60a5fa; } .wf-tree-leaf.wf-tl1 { left: 60%; top: 8%; } .wf-tree-leaf.wf-tl2 { left: 60%; top: 46%; } .wf-tree-leaf.wf-tl3 { left: 60%; top: 84%; } .wf-file-chip { position: absolute; right: 8%; width: 44%; height: 26px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px; display: flex; align-items: center; gap: 8px; padding: 0 10px; font-family: ui-monospace, monospace; font-size: 11px; font-weight: 600; color: #cbd5e1; z-index: 2; animation: wf-chip-orbit 6s ease-in-out infinite; } .wf-file-chip::before { content: ""; display: inline-block; width: 10px; height: 12px; border-radius: 2px; background: currentColor; opacity: 0.85; } .wf-file-chip.wf-fc1 { top: 14%; color: #93c5fd; animation-delay: 0s; } .wf-file-chip.wf-fc2 { top: 44%; color: #c4b5fd; animation-delay: 2s; } .wf-file-chip.wf-fc3 { top: 74%; color: #7dd3fc; animation-delay: 4s; } @keyframes wf-chip-orbit { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-4px); opacity: 0.85; } } .wf-rtb-toolbar { position: absolute; left: 10%; right: 10%; top: 14%; height: 28px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; display: flex; align-items: center; gap: 6px; padding: 0 10px; z-index: 1; } .wf-rtb-btn { width: 22px; height: 18px; border-radius: 4px; background: rgba(255, 255, 255, 0.10); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #93c5fd; animation: wf-fmt-flash 4s ease-in-out infinite; } .wf-rtb-btn.wf-fb1 { animation-delay: 0s; } .wf-rtb-btn.wf-fb2 { font-style: italic; animation-delay: .5s; } .wf-rtb-btn.wf-fb3 { animation-delay: 1.0s; } .wf-rtb-btn.wf-fb4 { animation-delay: 1.5s; font-family: ui-monospace, monospace; } @keyframes wf-fmt-flash { 0%, 18% { background: rgba(255, 255, 255, 0.10); color: #93c5fd; } 22%, 30% { background: #2563eb; color: #fff; } 40%, 100% { background: rgba(255, 255, 255, 0.10); color: #93c5fd; } } .wf-rtb-body { position: absolute; left: 10%; right: 10%; top: 44%; bottom: 10%; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 8px; padding: 10px 14px; z-index: 1; } .wf-rtb-line { height: 6px; border-radius: 3px; background: #cbd5e1; margin-bottom: 6px; overflow: hidden; position: relative; width: 0; animation: wf-rtb-type 5s ease-in-out infinite; } .wf-rtb-line.wf-rl1 { animation-delay: 0s; max-width: 60%; } .wf-rtb-line.wf-rl2 { height: 4px; background: #64748b; animation-delay: .8s; max-width: 80%; } .wf-rtb-line.wf-rl3 { height: 4px; background: #64748b; animation-delay: 1.6s; max-width: 70%; } @keyframes wf-rtb-type { 0% { width: 0; } 35%, 90% { width: 100%; } 100% { width: 0; } } .wf-rtb-cursor { position: absolute; right: 14%; top: 58%; width: 2px; height: 12px; background: #93c5fd; z-index: 2; animation: wf-cursor-blink 0.9s steps(1) infinite; } .wf-radar-stage { position: absolute; inset: 0; z-index: 1; } .wf-radar-core { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle, #60a5fa, #1d4ed8); transform: translate(-50%, -50%); box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.18); } .wf-radar-ring { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #60a5fa; transform: translate(-50%, -50%) scale(1); animation: wf-radar 3.2s ease-out infinite; } .wf-radar-ring.wf-rr2 { animation-delay: .8s; } .wf-radar-ring.wf-rr3 { animation-delay: 1.6s; } @keyframes wf-radar { 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0.85; } 100% { transform: translate(-50%, -50%) scale(4.5); opacity: 0; } } .wf-radar-sweep { position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; transform: translate(-50%, -50%) rotate(0deg); border-radius: 50%; background: conic-gradient(from 0deg, rgba(96, 165, 250, 0.30), transparent 30%); animation: wf-spin 5s linear infinite; } .wf-ai-chip { position: absolute; padding: 4px 10px; font-size: 10px; font-weight: 600; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); color: #cbd5e1; border-radius: 11px; opacity: 0; z-index: 2; animation: wf-chip-blip 4s ease-in-out infinite; box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.5); } .wf-ai-chip.wf-ac1 { top: 12%; left: 8%; animation-delay: 0.1s; } .wf-ai-chip.wf-ac2 { top: 14%; right: 8%; animation-delay: 1.0s; } .wf-ai-chip.wf-ac3 { bottom: 14%; left: 6%; animation-delay: 2.0s; } .wf-ai-chip.wf-ac4 { bottom: 12%; right: 10%; animation-delay: 3.0s; } @keyframes wf-chip-blip { 0%, 12% { opacity: 0; transform: scale(0.6); } 22%, 80% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(0.9); } } .wf-json-card { position: absolute; inset: 10% 30% 10% 8%; background: #060c1c; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 10px; padding: 10px 14px; font-family: ui-monospace, monospace; font-size: 10px; line-height: 1.6; color: #e2e8f0; overflow: hidden; z-index: 1; } .wf-json-brace { color: #e2e8f0; } .wf-json-line { display: block; opacity: 0; animation: wf-json-pop 4s ease-out infinite; } .wf-json-line.wf-jl1 { animation-delay: 0.1s; } .wf-json-line.wf-jl2 { animation-delay: 0.4s; } .wf-json-line.wf-jl3 { animation-delay: 0.7s; } .wf-json-line.wf-jl4 { animation-delay: 1.0s; } .wf-json-line.wf-jl5 { animation-delay: 1.3s; } @keyframes wf-json-pop { 0%, 8% { opacity: 0; transform: translateX(-6px); } 18%, 80% { opacity: 1; transform: translateX(0); } 92%, 100% { opacity: 0; transform: translateX(6px); } } .wf-json-key { color: #93c5fd; } .wf-json-val { color: #fcd34d; } .wf-json-presets { position: absolute; right: 6%; top: 14%; display: flex; flex-direction: column; gap: 8px; z-index: 2; } .wf-json-preset { padding: 4px 10px; font-size: 9px; font-weight: 700; border-radius: 11px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); color: #cbd5e1; text-align: center; letter-spacing: 0.02em; } .wf-json-preset.wf-jp-active { animation: wf-preset-swap 6s steps(1) infinite; } @keyframes wf-preset-swap { 0%, 33% { background: #1d4ed8; color: #fff; border-color: #1d4ed8; } 33.1%, 66% { background: #7c3aed; color: #fff; border-color: #7c3aed; } 66.1%, 100% { background: #0ea5e9; color: #fff; border-color: #0ea5e9; } } .wf-perf-grid { position: absolute; inset: 14% 8%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; z-index: 1; } .wf-perf-ring { --pct: 0deg; position: relative; border-radius: 50%; aspect-ratio: 1 / 1; width: 100%; max-width: 60px; margin: 0 auto; background: conic-gradient(#22c55e var(--pct), rgba(255, 255, 255, 0.10) 0); display: flex; align-items: center; justify-content: center; animation: wf-perf-fill 4s ease-in-out infinite; } .wf-perf-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #0b1220; } .wf-perf-ring .wf-perf-num { position: relative; z-index: 1; font-family: ui-sans-serif, system-ui; font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -0.02em; } .wf-perf-ring .wf-perf-lbl { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: #94a3b8; text-transform: uppercase; } .wf-perf-ring.wf-pr1 { --pct: 349deg; animation-delay: 0s; } .wf-perf-ring.wf-pr2 { --pct: 356deg; animation-delay: .25s; } .wf-perf-ring.wf-pr3 { --pct: 360deg; animation-delay: .50s; } .wf-perf-ring.wf-pr4 { --pct: 331deg; animation-delay: .75s; } @keyframes wf-perf-fill { 0% { background: conic-gradient(#22c55e 0deg, rgba(255, 255, 255, 0.10) 0); } 45%, 100% { background: conic-gradient(#22c55e var(--pct), rgba(255, 255, 255, 0.10) 0); } } .wf-flow { position: absolute; left: 8%; right: 8%; top: 30%; height: 60%; z-index: 1; } .wf-flow-track { position: absolute; left: 6%; right: 6%; top: 22px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 6px, transparent 6px 12px); } .wf-flow-fill { position: absolute; left: 6%; top: 22px; height: 2px; background: #60a5fa; width: 0; animation: wf-flow-progress 8s ease-in-out infinite; } @keyframes wf-flow-progress { 0%, 5% { width: 0; } 20%, 30% { width: 31%; } 45%, 55% { width: 62%; } 70%, 80% { width: 88%; } 95%, 100% { width: 0; } } .wf-flow-stage { position: absolute; width: 25%; top: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; } .wf-flow-stage.wf-fs1 { left: 0%; } .wf-flow-stage.wf-fs2 { left: 25%; } .wf-flow-stage.wf-fs3 { left: 50%; } .wf-flow-stage.wf-fs4 { left: 75%; } .wf-flow-dot { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, 0.20); margin-top: 16px; position: relative; animation: wf-flow-pulse 8s ease-in-out infinite; } .wf-flow-stage.wf-fs1 .wf-flow-dot { animation-delay: 0s; } .wf-flow-stage.wf-fs2 .wf-flow-dot { animation-delay: 2s; } .wf-flow-stage.wf-fs3 .wf-flow-dot { animation-delay: 4s; } .wf-flow-stage.wf-fs4 .wf-flow-dot { animation-delay: 6s; } @keyframes wf-flow-pulse { 0%, 8%, 100% { background: rgba(255, 255, 255, 0.20); transform: scale(1); } 12%, 22% { background: #60a5fa; transform: scale(1.35); } 30%, 100% { background: #22c55e; transform: scale(1); } } .wf-flow-check { position: absolute; left: 50%; top: 50%; width: 6px; height: 3px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: translate(-50%, -65%) rotate(-45deg); opacity: 0; animation: wf-flow-check 8s ease-in-out infinite; } .wf-flow-stage.wf-fs1 .wf-flow-check { animation-delay: 0s; } .wf-flow-stage.wf-fs2 .wf-flow-check { animation-delay: 2s; } .wf-flow-stage.wf-fs3 .wf-flow-check { animation-delay: 4s; } .wf-flow-stage.wf-fs4 .wf-flow-check { animation-delay: 6s; } @keyframes wf-flow-check { 0%, 28% { opacity: 0; } 32%, 100% { opacity: 1; } } .wf-flow-label { font-size: 9px; font-weight: 600; color: #cbd5e1; margin-top: 4px; text-align: center; letter-spacing: 0.02em; } .ld__spotlight-shot.wf-card-visual { position: relative; height: clamp(11rem, 22vw, 14rem); aspect-ratio: auto; background: radial-gradient(120% 80% at 50% 0%, rgba(59, 130, 246, 0.18), transparent 65%), linear-gradient(180deg, #0f172a 0%, #0b1220 100%); border-color: rgba(15, 23, 42, 0.10); overflow: hidden; isolation: isolate; } .ld__spotlight-shot.wf-card-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(10, 10, 10, 0.45) 100%); pointer-events: none; z-index: 3; } .wf-redirect-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; z-index: 1; } .wf-redirect-pill { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; padding: 10px 14px; font-size: 11px; font-family: ui-monospace, monospace; color: #cbd5e1; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.5); animation: wf-redirect-fade 4s ease-in-out infinite; } .wf-redirect-pill.wf-rp-old { color: #94a3b8; animation-delay: 0s; } .wf-redirect-pill.wf-rp-new { color: #93c5fd; font-weight: 600; border-color: rgba(96, 165, 250, 0.45); animation-delay: 1.8s; } @keyframes wf-redirect-fade { 0%, 15%, 100% { opacity: 0.5; } 50%, 80% { opacity: 1; } } .wf-redirect-arc { position: relative; width: 60px; height: 34px; flex: 0 0 auto; } .wf-redirect-arc::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 24px; border: 2px solid #60a5fa; border-bottom: none; border-radius: 30px 30px 0 0; opacity: 0; animation: wf-redirect-draw 4s ease-in-out infinite; } .wf-redirect-arc::after { content: ""; position: absolute; right: -2px; top: 24px; width: 0; height: 0; border-left: 6px solid #60a5fa; border-top: 4px solid transparent; border-bottom: 4px solid transparent; opacity: 0; animation: wf-redirect-arrow 4s ease-in-out infinite; } @keyframes wf-redirect-draw { 0%, 15% { opacity: 0; clip-path: inset(0 100% 0 0); } 35%, 85% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 0 100%); } } @keyframes wf-redirect-arrow { 0%, 30% { opacity: 0; } 45%, 85% { opacity: 1; } 100% { opacity: 0; } } .wf-redirect-301 { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); background: #1d4ed8; color: #fff; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 10px; letter-spacing: 0.04em; z-index: 2; animation: wf-pulse 1.6s ease-in-out infinite; } .wf-audit-page { position: absolute; inset: 14% 10%; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 8px; overflow: hidden; z-index: 1; } .wf-audit-line { position: absolute; left: 8%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); } .wf-audit-line.wf-al1 { top: 12%; width: 48%; height: 8px; background: rgba(255, 255, 255, 0.22); } .wf-audit-line.wf-al2 { top: 28%; width: 74%; } .wf-audit-line.wf-al3 { top: 40%; width: 66%; } .wf-audit-line.wf-al4 { top: 58%; width: 80%; } .wf-audit-line.wf-al5 { top: 70%; width: 60%; } .wf-audit-sweep { position: absolute; top: 0; bottom: 0; width: 38%; background: linear-gradient(90deg, transparent 0%, rgba(96, 165, 250, 0.18) 40%, rgba(96, 165, 250, 0.45) 50%, rgba(96, 165, 250, 0.18) 60%, transparent 100%); transform: skewX(-18deg); animation: wf-audit-sweep 3.4s cubic-bezier(.5, .05, .5, .95) infinite; z-index: 2; } @keyframes wf-audit-sweep { 0% { left: -40%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 110%; opacity: 0; } } .wf-audit-issue { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22); opacity: 0; z-index: 2; animation: wf-audit-flag 3.4s ease-in-out infinite; } .wf-audit-issue.wf-ai1 { top: 24%; right: 14%; animation-delay: 0.6s; } .wf-audit-issue.wf-ai2 { top: 54%; right: 20%; animation-delay: 1.1s; } .wf-audit-issue.wf-ai3 { top: 66%; right: 32%; animation-delay: 1.7s; } @keyframes wf-audit-flag { 0%, 15% { opacity: 0; transform: scale(0.4); background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22); } 25% { opacity: 1; transform: scale(1); background: #ef4444; } 60% { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22); } 72%, 92% { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22); } 100% { opacity: 0; transform: scale(1); background: #22c55e; } } .wf-graph { position: absolute; inset: 0; z-index: 1; } .wf-graph-node { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); border: 1.5px solid #60a5fa; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: #93c5fd; font-family: ui-sans-serif, system-ui; animation: wf-pulse 2.4s ease-in-out infinite; } .wf-graph-node.wf-gn-center { width: 42px; height: 42px; background: #1d4ed8; color: #fff; border-color: #1d4ed8; font-size: 9px; left: 50%; top: 50%; transform: translate(-50%, -50%); animation-delay: .2s; } .wf-graph-node.wf-gn1 { left: 14%; top: 18%; animation-delay: 0s; } .wf-graph-node.wf-gn2 { right: 14%; top: 18%; animation-delay: .4s; } .wf-graph-node.wf-gn3 { left: 14%; bottom: 14%; animation-delay: .6s; } .wf-graph-node.wf-gn4 { right: 14%; bottom: 14%; animation-delay: .8s; } .wf-graph-edge { position: absolute; height: 2px; background: #3b82f6; transform-origin: left center; border-radius: 2px; opacity: 0; animation: wf-edge-draw 4s ease-in-out infinite; } .wf-graph-edge.wf-ge1 { left: 22%; top: 32%; width: 35%; transform: rotate(28deg); animation-delay: .2s; } .wf-graph-edge.wf-ge2 { right: 22%; top: 32%; width: 35%; transform: rotate(-28deg); transform-origin: right center; animation-delay: .8s; } .wf-graph-edge.wf-ge3 { left: 22%; bottom: 28%; width: 35%; transform: rotate(-28deg); animation-delay: 1.4s; } .wf-graph-edge.wf-ge4 { right: 22%; bottom: 28%; width: 35%; transform: rotate(28deg); transform-origin: right center; animation-delay: 2.0s; } .wf-alt-image { position: absolute; left: 8%; top: 18%; width: 34%; height: 64%; background: linear-gradient(135deg, #1e293b, #0f172a); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 8px; overflow: hidden; z-index: 1; } .wf-alt-image::before { content: ""; position: absolute; left: 18%; top: 18%; width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, 0.30); } .wf-alt-image::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 55%; background: linear-gradient(45deg, transparent 49%, rgba(255, 255, 255, 0.18) 49%, rgba(255, 255, 255, 0.18) 51%, transparent 51%) 0 0/24px 24px, linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.2)); opacity: 0.6; } .wf-alt-editor { position: absolute; right: 8%; top: 22%; width: 46%; height: 42%; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 10px 12px; font-family: ui-monospace, monospace; font-size: 10px; z-index: 1; } .wf-alt-editor .wf-alt-label { color: #64748b; margin-bottom: 4px; display: block; } .wf-alt-text { color: #93c5fd; font-weight: 600; display: inline-block; overflow: hidden; white-space: nowrap; width: 0; vertical-align: bottom; animation: wf-alt-type 4s ease-in-out infinite; } @keyframes wf-alt-type { 0%, 5% { width: 0; } 45%, 85% { width: 100%; } 100% { width: 0; } } .wf-alt-cursor { display: inline-block; width: 1.5px; height: 11px; background: #93c5fd; vertical-align: middle; margin-left: 1px; animation: wf-cursor-blink 0.9s steps(1) infinite; } .wf-alt-ai { position: absolute; right: 8%; bottom: 14%; width: 28px; height: 28px; border-radius: 8px; background: #1d4ed8; color: #fff; font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px -6px rgba(29, 78, 216, 0.45); z-index: 2; } @media (prefers-reduced-motion: reduce) { .ld__cap-shot.wf-card-visual *, .ld__cap-shot.wf-card-visual *::before, .ld__cap-shot.wf-card-visual *::after, .ld__spotlight-shot.wf-card-visual *, .ld__spotlight-shot.wf-card-visual *::before, .ld__spotlight-shot.wf-card-visual *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } @media (max-width: 640px) { .ld__cap-shot.wf-card-visual { height: clamp(7.5rem, 36vw, 9rem); } .ld__spotlight-shot.wf-card-visual { height: clamp(9rem, 42vw, 12rem); } .wf-rtb-toolbar { height: 26px; } .wf-json-card { inset: 12% 34% 12% 8%; font-size: 9px; } .wf-perf-grid { gap: 6px; } .wf-perf-ring { max-width: 48px; } .wf-perf-ring .wf-perf-num { font-size: 11px; } .wf-redirect-pill { padding: 8px 10px; font-size: 10px; } .wf-redirect-arc { width: 44px; } .wf-graph-node { width: 28px; height: 28px; font-size: 7px; } .wf-graph-node.wf-gn-center { width: 34px; height: 34px; font-size: 8px; } .wf-alt-editor { font-size: 9px; padding: 8px 10px; } } .ld__inside-frame--mini { background: #0f172a; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 10px 30px -8px rgba(2, 6, 23, 0.45), 0 2px 6px -2px rgba(2, 6, 23, 0.35); transition: transform .35s ease, box-shadow .35s ease; } .ld__inside-card--mini:hover .ld__inside-frame--mini { transform: translateY(-3px); box-shadow: 0 22px 50px -12px rgba(2, 6, 23, 0.55), 0 6px 14px -4px rgba(2, 6, 23, 0.35); } .ld__inside-shot-img { display: block; width: 100%; height: 360px; object-fit: cover; object-position: top left; opacity: 0.92; transition: opacity .25s ease, transform .35s ease; } .ld__inside-card--mini:hover .ld__inside-shot-img { opacity: 1; transform: scale(1.012); } @media (prefers-reduced-motion: reduce) { .ld__inside-shot-img { transition: none; } } .wf-mini { position: relative; width: 100%; height: 360px; background: #0f172a; color: #e2e8f0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 11px; line-height: 1.35; overflow: hidden; } .wf-mini-shell { display: grid; grid-template-columns: 92px 1fr; height: 100%; } .wf-mini-nav { background: #0b1220; border-right: 1px solid rgba(255, 255, 255, 0.05); padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; } .wf-mini-nav-brand { display: flex; align-items: center; gap: 6px; padding: 4px 6px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); margin-bottom: 10px; } .wf-mini-nav-logo { width: 18px; height: 18px; border-radius: 5px; background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset; } .wf-mini-nav-brandname { font-weight: 700; letter-spacing: 0.04em; font-size: 10px; color: #cbd5e1; } .wf-mini-nav-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; color: #64748b; font-size: 10.5px; font-weight: 500; } .wf-mini-nav-item--active { background: rgba(29, 78, 216, 0.18); color: #93c5fd; } .wf-mini-nav-item--active .wf-mini-nav-icon { background: #60a5fa; } .wf-mini-nav-icon { width: 12px; height: 12px; border-radius: 3px; background: #334155; flex-shrink: 0; } .wf-mini-main { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; } .wf-mini-headrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 4px; } .wf-mini-h { font-size: 13px; font-weight: 700; letter-spacing: -0.012em; color: #f1f5f9; } .wf-mini-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.4; border: 1px solid transparent; } .wf-mini-pill--ok { background: rgba(16, 185, 129, 0.14); color: #34d399; border-color: rgba(16, 185, 129, 0.25); } .wf-mini-pill--hi { background: rgba(239, 68, 68, 0.14); color: #f87171; border-color: rgba(239, 68, 68, 0.25); } .wf-mini-pill--med { background: rgba(245, 158, 11, 0.14); color: #fbbf24; border-color: rgba(245, 158, 11, 0.25); } .wf-mini-pill--low { background: rgba(59, 130, 246, 0.14); color: #60a5fa; border-color: rgba(59, 130, 246, 0.25); } .wf-mini-bars { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; } .wf-mini-bar-row { display: grid; grid-template-columns: 60px 1fr 28px; align-items: center; gap: 10px; } .wf-mini-bar-label { color: #cbd5e1; font-size: 10.5px; font-weight: 500; } .wf-mini-bar-track { height: 6px; background: rgba(255, 255, 255, 0.05); border-radius: 999px; overflow: hidden; position: relative; } .wf-mini-bar-fill { display: block; height: 100%; border-radius: 999px; } .wf-mini-bar-fill--ok { background: linear-gradient(90deg, #1d4ed8, #3b82f6); } .wf-mini-bar-fill--warn { background: linear-gradient(90deg, #b45309, #f59e0b); } .wf-mini-bar-fill--live { animation: wf-mini-bar-tick 9s ease-in-out infinite; } @keyframes wf-mini-bar-tick { 0%, 100% { width: 78%; } 45%, 55% { width: 84%; } } .wf-mini-bar-num { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; color: #94a3b8; text-align: right; } .wf-mini-spark { height: 52px; margin-top: 6px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 6px; padding: 6px 8px; } .wf-mini-spark svg { display: block; width: 100%; height: 100%; } .wf-mini-counter { display: inline-flex; align-items: baseline; gap: 6px; } .wf-mini-counter-num { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; font-weight: 700; color: #f1f5f9; display: inline-block; min-width: 22px; line-height: 1; } .wf-mini-counter-num--tick { position: relative; display: inline-block; min-width: 22px; color: transparent; } .wf-mini-counter-num--tick::before, .wf-mini-counter-num--tick::after { position: absolute; top: 0; left: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; font-weight: 700; color: #f1f5f9; } .wf-mini-counter-num--tick::before { content: "42"; animation: wf-mini-count-out 8s ease-in-out infinite; } .wf-mini-counter-num--tick::after { content: "41"; animation: wf-mini-count-in 8s ease-in-out infinite; } @keyframes wf-mini-count-out { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } } @keyframes wf-mini-count-in { 0%, 45% { opacity: 0; } 50%, 95% { opacity: 1; } 100% { opacity: 0; } } .wf-mini-counter-lab { font-size: 10px; color: #64748b; } .wf-mini-table { display: flex; flex-direction: column; gap: 2px; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.015); } .wf-mini-row { display: grid; grid-template-columns: 38px 1fr 22px 44px; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); position: relative; } .wf-mini-row:last-child { border-bottom: 0; } .wf-mini-row-label { color: #cbd5e1; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wf-mini-row-n { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; color: #94a3b8; text-align: right; } .wf-mini-stat { font-size: 9.5px; font-weight: 600; padding: 1px 6px; border-radius: 4px; text-align: center; grid-column: 4; grid-row: 1; } .wf-mini-stat--open { background: rgba(239, 68, 68, 0.12); color: #f87171; } .wf-mini-stat--fixed { background: rgba(16, 185, 129, 0.14); color: #34d399; } .wf-mini-row--live .wf-mini-stat--open { animation: wf-mini-stat-out 8s ease-in-out infinite; } .wf-mini-row--live .wf-mini-stat--fixed { animation: wf-mini-stat-in 8s ease-in-out infinite; } @keyframes wf-mini-stat-out { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } } @keyframes wf-mini-stat-in { 0%, 45% { opacity: 0; } 50%, 95% { opacity: 1; } 100% { opacity: 0; } } .wf-mini-main--kanban { padding-right: 10px; } .wf-mini-kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; flex: 1; min-height: 0; } .wf-mini-kcol { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 5px; } .wf-mini-kcol-h { display: flex; justify-content: space-between; align-items: center; padding: 0 2px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 10px; font-weight: 600; color: #cbd5e1; letter-spacing: 0.01em; } .wf-mini-kcol-n { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 9px; color: #64748b; } .wf-mini-kcard { background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 5px; padding: 6px 7px; display: flex; flex-direction: column; gap: 3px; } .wf-mini-kcard-title { font-size: 10px; color: #e2e8f0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wf-mini-kcard-tag { align-self: flex-start; font-size: 8.5px; font-weight: 700; padding: 1px 5px; border-radius: 3px; background: rgba(29, 78, 216, 0.18); color: #93c5fd; letter-spacing: 0.04em; } .wf-mini-kcard--live { border-color: rgba(96, 165, 250, 0.35); background: linear-gradient(180deg, rgba(29, 78, 216, 0.18), rgba(29, 78, 216, 0.06)); box-shadow: 0 4px 12px -4px rgba(29, 78, 216, 0.35); animation: wf-mini-card-drift 10s ease-in-out infinite; } @keyframes wf-mini-card-drift { 0%, 100% { transform: translate(0, 0); opacity: 1; } 40% { transform: translate(0, 0); opacity: 1; } 50% { transform: translate(6px, -2px); opacity: 0.85; } 60% { transform: translate(0, 0); opacity: 1; } } .wf-mini-main--editor { padding: 0; display: grid; grid-template-columns: 1fr 130px; gap: 0; height: 100%; } .wf-mini-editor-pane { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; border-right: 1px solid rgba(255, 255, 255, 0.05); overflow: hidden; } .wf-mini-editor-tools { display: flex; align-items: center; gap: 4px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .wf-mini-tbtn { width: 20px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; background: rgba(255, 255, 255, 0.04); color: #94a3b8; font-size: 9.5px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; } .wf-mini-tbtn--ai { background: linear-gradient(135deg, #1d4ed8, #3b82f6); color: #fff; width: 22px; letter-spacing: 0.02em; } .wf-mini-editor-body { display: flex; flex-direction: column; gap: 5px; padding-top: 2px; } .wf-mini-editor-h1 { font-size: 13px; font-weight: 700; color: #f1f5f9; letter-spacing: -0.015em; line-height: 1.2; } .wf-mini-editor-h2 { font-size: 11px; font-weight: 600; color: #cbd5e1; margin-top: 6px; } .wf-mini-editor-caret { display: inline-block; width: 1.5px; height: 13px; background: #60a5fa; vertical-align: middle; margin-left: 2px; animation: wf-cursor-blink 1s steps(1) infinite; } .wf-mini-editor-line { display: block; height: 5px; border-radius: 2px; background: rgba(255, 255, 255, 0.06); } .wf-mini-seo-pane { background: #0b1220; padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; } .wf-mini-seo-h { font-size: 10.5px; font-weight: 700; color: #93c5fd; letter-spacing: 0.06em; text-transform: uppercase; } .wf-mini-seo-field { display: flex; flex-direction: column; gap: 3px; } .wf-mini-seo-lab { font-size: 9px; color: #64748b; letter-spacing: 0.02em; text-transform: uppercase; } .wf-mini-seo-val { font-size: 10px; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wf-mini-seo-val--mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: #93c5fd; } .wf-mini-seo-meter { display: block; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); position: relative; margin-top: 2px; } .wf-mini-seo-meter::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 70%); background: linear-gradient(90deg, #1d4ed8, #3b82f6); border-radius: 999px; } .wf-mini-seo-check { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #cbd5e1; margin-top: 2px; position: relative; padding-left: 18px; min-height: 14px; } .wf-mini-seo-check-dot, .wf-mini-seo-check-tick { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1; } .wf-mini-seo-check-dot { background: rgba(245, 158, 11, 0.18); border: 1px solid rgba(245, 158, 11, 0.35); animation: wf-mini-check-dot 8s ease-in-out infinite; } .wf-mini-seo-check-dot::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: #fbbf24; } .wf-mini-seo-check-tick { background: rgba(16, 185, 129, 0.18); border: 1px solid rgba(16, 185, 129, 0.4); color: #34d399; animation: wf-mini-check-tick 8s ease-in-out infinite; } .wf-mini-seo-check-tick--on { animation: none; opacity: 1; } @keyframes wf-mini-check-dot { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } } @keyframes wf-mini-check-tick { 0%, 45% { opacity: 0; transform: translateY(-50%) scale(0.8); } 50%, 95% { opacity: 1; transform: translateY(-50%) scale(1); } 100% { opacity: 0; transform: translateY(-50%) scale(0.8); } } .wf-mini-blog-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 8px; } .wf-mini-bstat { background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 5px; padding: 7px 8px 6px; display: flex; flex-direction: column; gap: 3px; } .wf-mini-bstat--warn { border-color: rgba(245, 158, 11, 0.28); background: rgba(245, 158, 11, 0.07); animation: wf-mini-bstat-pulse 6s ease-in-out infinite; } @keyframes wf-mini-bstat-pulse { 0%, 100% { border-color: rgba(245, 158, 11, 0.28); } 50% { border-color: rgba(245, 158, 11, 0.55); background: rgba(245, 158, 11, 0.12); } } .wf-mini-bstat-n { font-size: 17px; font-weight: 700; color: #e2e8f0; line-height: 1; } .wf-mini-bstat--warn .wf-mini-bstat-n { color: #fbbf24; } .wf-mini-bstat-l { font-size: 8px; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wf-mini-posts { display: flex; flex-direction: column; gap: 2px; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.015); } .wf-mini-prow { display: grid; grid-template-columns: 1fr 22px 64px 50px; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); position: relative; } .wf-mini-prow:last-child { border-bottom: 0; } .wf-mini-prow-title { color: #e2e8f0; font-size: 10.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wf-mini-author { width: 18px; height: 18px; border-radius: 999px; background: linear-gradient(135deg, #1d4ed8, #3b82f6); color: #fff; font-size: 8.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.02em; } .wf-mini-spill { font-size: 9px; font-weight: 600; padding: 1px 6px; border-radius: 4px; text-align: center; white-space: nowrap; grid-column: 3; grid-row: 1; } .wf-mini-spill--pub { background: rgba(16, 185, 129, 0.14); color: #34d399; } .wf-mini-spill--sch { background: rgba(59, 130, 246, 0.14); color: #60a5fa; } .wf-mini-spill--drf { background: rgba(148, 163, 184, 0.14); color: #94a3b8; } .wf-mini-prow-date { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 9.5px; color: #64748b; text-align: right; } .wf-mini-prow--live .wf-mini-spill--out { animation: wf-mini-stat-out 9s ease-in-out infinite; } .wf-mini-prow--live .wf-mini-spill--in { animation: wf-mini-stat-in 9s ease-in-out infinite; } .wf-mini-dials { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 4px 0; } .wf-mini-dial { display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; padding: 4px 2px; } .wf-mini-dial svg { width: 56px; height: 56px; transform: rotate(-90deg); } .wf-mini-dial-track { fill: none; stroke: rgba(255, 255, 255, 0.06); stroke-width: 4; } .wf-mini-dial-fill { fill: none; stroke: #34d399; stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 1s ease; } .wf-mini-dial--live .wf-mini-dial-fill { animation: wf-mini-dial-grow 10s ease-in-out infinite; } @keyframes wf-mini-dial-grow { 0% { stroke-dashoffset: 113; } 25% { stroke-dashoffset: 3.4; } 100% { stroke-dashoffset: 3.4; } } .wf-mini-dial-num { position: absolute; top: 22px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; font-weight: 700; color: #f1f5f9; line-height: 1; } .wf-mini-dial-lab { font-size: 9px; color: #94a3b8; margin-top: 2px; letter-spacing: 0.01em; } .wf-mini-cwv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; } .wf-mini-cwv-cell { display: flex; flex-direction: column; gap: 2px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 5px; padding: 6px 8px; } .wf-mini-cwv-lab { font-size: 9px; font-weight: 600; color: #64748b; letter-spacing: 0.06em; text-transform: uppercase; } .wf-mini-cwv-val { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; font-weight: 700; color: #f1f5f9; } .wf-mini-cwv-tag { font-size: 8.5px; font-weight: 600; padding: 1px 5px; border-radius: 3px; align-self: flex-start; } .wf-mini-cwv-tag--ok { background: rgba(16, 185, 129, 0.14); color: #34d399; } .wf-mini-rdalert { display: flex; align-items: center; gap: 6px; background: rgba(245, 158, 11, 0.10); border: 1px solid rgba(245, 158, 11, 0.28); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; font-size: 10px; font-weight: 600; color: #fbbf24; opacity: 0; transform: translateY(3px); } .wf-mini-rdalert--live { animation: wf-mini-rdalert-in 6s ease-out infinite; } @keyframes wf-mini-rdalert-in { 0%, 10% { opacity: 0; transform: translateY(3px); } 25%, 80% { opacity: 1; transform: translateY(0); } 95%, 100% { opacity: 0; transform: translateY(3px); } } .wf-mini-rdalert-icon { font-size: 12px; } .wf-mini-chains { display: flex; flex-direction: column; gap: 6px; } .wf-mini-chain { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 5px; padding: 8px 10px; } .wf-mini-chain-path { display: flex; align-items: center; gap: 3px; flex: 1; min-width: 0; overflow: hidden; } .wf-mini-chain-seg { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 8.5px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; } .wf-mini-chain-seg--mid { color: #64748b; max-width: 80px; } .wf-mini-chain-seg--end { color: #93c5fd; max-width: 50px; } .wf-mini-chain-arr { color: #475569; font-size: 9px; flex-shrink: 0; } .wf-mini-chain-cta { font-size: 9px; font-weight: 600; color: #60a5fa; flex-shrink: 0; white-space: nowrap; } .wf-mini-redirects { display: none; } .wf-mini-rrow { display: none; } .wf-mini-main--theme { padding-right: 14px; } .wf-mini-theme { display: grid; grid-template-columns: 1fr 1.15fr; gap: 10px; flex: 1; min-height: 0; } .wf-mini-theme-col { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; } .wf-mini-theme-lab { font-size: 9px; font-weight: 700; color: #93c5fd; letter-spacing: 0.06em; text-transform: uppercase; } .wf-mini-theme-lab--gap { margin-top: 4px; } .wf-mini-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .wf-mini-sw { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .wf-mini-sw-chip { display: block; width: 100%; height: 18px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.08); } .wf-mini-sw-chip--live { animation: wf-mini-sw-cycle 8s ease-in-out infinite; } @keyframes wf-mini-sw-cycle { 0%, 100% { background: #1d4ed8 !important; } 25% { background: #6366f1 !important; } 50% { background: #8b5cf6 !important; } 75% { background: #0ea5e9 !important; } } .wf-mini-sw-lab { font-size: 8.5px; color: #94a3b8; letter-spacing: 0.02em; } .wf-mini-type { display: flex; align-items: baseline; gap: 8px; } .wf-mini-type-h { font-size: 22px; font-weight: 700; color: #f1f5f9; letter-spacing: -0.02em; } .wf-mini-type-meta { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 9px; color: #94a3b8; } .wf-mini-voice { display: flex; flex-direction: column; gap: 4px; } .wf-mini-voice-row { display: grid; grid-template-columns: 44px 1fr; gap: 6px; align-items: baseline; } .wf-mini-voice-key { font-size: 8.5px; font-weight: 700; color: #64748b; letter-spacing: 0.06em; text-transform: uppercase; } .wf-mini-voice-val { font-size: 9.5px; color: #cbd5e1; line-height: 1.4; } .wf-mini-voice-val--quote { color: #93c5fd; font-style: italic; } .wf-mini-logo { display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 6px 8px; background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 5px; } .wf-mini-logo-mark { width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(135deg, #1d4ed8, #3b82f6); } .wf-mini-logo-name { font-size: 10px; font-weight: 700; letter-spacing: -0.01em; color: #f1f5f9; } .wf-mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .wf-mini-stat-cell { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 5px; padding: 6px 8px; display: flex; flex-direction: column; gap: 1px; } .wf-mini-stat-lab { font-size: 8.5px; font-weight: 600; color: #64748b; letter-spacing: 0.06em; text-transform: uppercase; } .wf-mini-stat-val { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; font-weight: 700; color: #f1f5f9; line-height: 1.1; } .wf-mini-stat-val--tick { position: relative; display: inline-block; height: 14px; min-width: 38px; } .wf-mini-stat-val--tick::before, .wf-mini-stat-val--tick::after { position: absolute; inset: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; font-weight: 700; color: #f1f5f9; line-height: 1.1; } .wf-mini-stat-val--tick::before { content: "14.2k"; animation: wf-mini-count-out 8s ease-in-out infinite; } .wf-mini-stat-val--tick::after { content: "14.3k"; animation: wf-mini-count-in 8s ease-in-out infinite; } .wf-mini-stat-trend { font-size: 9px; font-weight: 600; color: #34d399; } .wf-mini-line { height: 56px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 6px; padding: 6px 8px; } .wf-mini-line svg { display: block; width: 100%; height: 100%; } .wf-mini-line-pulse { transform-origin: 200px 12px; animation: wf-mini-pulse 2.6s ease-in-out infinite; } @keyframes wf-mini-pulse { 0%, 100% { r: 2.5; opacity: 1; } 50% { r: 4; opacity: 0.6; } } .wf-mini-qtable { display: flex; flex-direction: column; gap: 2px; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.015); } .wf-mini-qrow { display: grid; grid-template-columns: 1fr 32px 46px; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .wf-mini-qrow:last-child { border-bottom: 0; } .wf-mini-qrow-q { font-size: 10px; color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wf-mini-qrow-pos, .wf-mini-qrow-clicks { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 9.5px; color: #94a3b8; text-align: right; } .wf-mini-autos { display: flex; flex-direction: column; gap: 4px; } .wf-mini-arow { display: grid; grid-template-columns: 14px 1fr 64px; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 5px; position: relative; } .wf-mini-arow-dot { width: 8px; height: 8px; border-radius: 999px; background: #34d399; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); } .wf-mini-arow--live .wf-mini-arow-dot { animation: wf-mini-arow-blink 2s ease-in-out infinite; } @keyframes wf-mini-arow-blink { 0%, 100% { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); background: #60a5fa; } 50% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.08); background: #93c5fd; } } .wf-mini-arow-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .wf-mini-arow-name { font-size: 10.5px; font-weight: 600; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wf-mini-arow-meta { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 9px; color: #64748b; } .wf-mini-astat { font-size: 9.5px; font-weight: 600; padding: 1px 6px; border-radius: 4px; text-align: center; grid-column: 3; grid-row: 1; white-space: nowrap; } .wf-mini-astat--ok { background: rgba(16, 185, 129, 0.14); color: #34d399; } .wf-mini-astat--skip { background: rgba(148, 163, 184, 0.14); color: #94a3b8; } .wf-mini-astat--fail { background: rgba(239, 68, 68, 0.14); color: #f87171; } .wf-mini-astat--pending { background: rgba(245, 158, 11, 0.14); color: #fbbf24; } .wf-mini-arow--live .wf-mini-astat--out { animation: wf-mini-stat-out 8s ease-in-out infinite; } .wf-mini-arow--live .wf-mini-astat--in { animation: wf-mini-stat-in 8s ease-in-out infinite; } @media (max-width: 720px) { .wf-mini { height: 320px; font-size: 10px; } .wf-mini-shell { grid-template-columns: 72px 1fr; } .wf-mini-nav { padding: 10px 6px; } .wf-mini-nav-item { font-size: 9.5px; padding: 5px 6px; } .wf-mini-main { padding: 12px 12px 10px; } .wf-mini-h { font-size: 12px; } .wf-mini-kanban { grid-template-columns: repeat(4, 1fr); gap: 4px; } .wf-mini-kcard { padding: 5px; } .wf-mini-kcard-title { font-size: 9px; } .wf-mini-main--editor { grid-template-columns: 1fr 110px; } .wf-mini-seo-pane { padding: 10px; gap: 7px; } .wf-mini-dial svg { width: 48px; height: 48px; } .wf-mini-dial-num { top: 18px; font-size: 11px; } .wf-mini-stats { grid-template-columns: repeat(2, 1fr); } .wf-mini-theme { grid-template-columns: 1fr; } } @media (max-width: 480px) { .wf-mini { height: 300px; } .wf-mini-bar-row { grid-template-columns: 52px 1fr 24px; gap: 8px; } .wf-mini-row { grid-template-columns: 32px 1fr 18px 38px; gap: 6px; padding: 6px 8px; } .wf-mini-row-label { font-size: 9.5px; } .wf-mini-prow { grid-template-columns: 1fr 18px 50px 42px; gap: 6px; padding: 6px 8px; } .wf-mini-prow-title { font-size: 9.5px; } .wf-mini-dials { grid-template-columns: repeat(2, 1fr); } } @media (prefers-reduced-motion: reduce) { .wf-mini *, .wf-mini *::before, .wf-mini *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .wf-mini-row--live .wf-mini-stat--open { opacity: 0; } .wf-mini-row--live .wf-mini-stat--fixed { opacity: 1; } .wf-mini-seo-check-dot { opacity: 0; } .wf-mini-seo-check-tick { opacity: 1; transform: translateY(-50%) scale(1); } .wf-mini-bar-fill--live { width: 82%; } .wf-mini-prow--live .wf-mini-spill--out { opacity: 0; } .wf-mini-prow--live .wf-mini-spill--in { opacity: 1; } .wf-mini-dial--live .wf-mini-dial-fill { stroke-dashoffset: 3.4; } .wf-mini-bstat--warn { border-color: rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.10); animation: none; } .wf-mini-rdalert--live { opacity: 1; transform: translateY(0); animation: none; } .wf-mini-sw-chip--live { background: #1d4ed8 !important; } .wf-mini-stat-val--tick::before { opacity: 0; } .wf-mini-stat-val--tick::after { opacity: 1; } .wf-mini-line-pulse { r: 2.5; opacity: 1; } .wf-mini-arow--live .wf-mini-astat--out { opacity: 0; } .wf-mini-arow--live .wf-mini-astat--in { opacity: 1; } .wf-mini-arow--live .wf-mini-arow-dot { background: #60a5fa; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); } } .wf-form-stage { display: flex; flex-direction: column; gap: 6px; width: 80%; } .wf-form-field { display: flex; flex-direction: column; gap: 3px; } .wf-form-label { font-size: 8px; color: rgba(255,255,255,0.4); letter-spacing: .04em; text-transform: uppercase; } .wf-form-input { height: 14px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 3px; } .wf-form-textarea { height: 28px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 3px; } .wf-ff1 { animation: wf-form-reveal 8s ease infinite; } .wf-ff2 { animation: wf-form-reveal 8s ease 0.4s infinite; } .wf-ff3 { animation: wf-form-reveal 8s ease 0.8s infinite; } @keyframes wf-form-reveal { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .wf-form-submit { margin-top: 8px; display: inline-block; padding: 5px 10px; background: var(--ld-accent, #2563eb); color: #fff; font-size: 8px; border-radius: 4px; animation: wf-form-btn-glow 6s ease infinite; } @keyframes wf-form-btn-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); } 50% { box-shadow: 0 0 8px 2px rgba(37,99,235,0.5); } } .wf-form-badge { position: absolute; top: 8px; right: 8px; padding: 2px 6px; border-radius: 4px; font-size: 7px; font-weight: 600; } .wf-form-badge--ai { background: rgba(139,92,246,0.2); color: #a78bfa; border: 1px solid rgba(139,92,246,0.25); } .wf-brand-stage { display: flex; flex-direction: column; gap: 8px; width: 85%; } .wf-brand-row { display: flex; gap: 6px; align-items: flex-start; } .wf-brand-label { font-size: 7px; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: .06em; min-width: 38px; padding-top: 1px; } .wf-brand-val { font-size: 8px; color: rgba(255,255,255,0.75); font-style: italic; line-height: 1.3; } .wf-bv-live { animation: wf-bv-typewriter 10s steps(40) infinite; overflow: hidden; white-space: nowrap; border-right: 1px solid rgba(255,255,255,0.5); } @keyframes wf-bv-typewriter { 0% { width: 0; } 60% { width: 100%; } 80%, 100% { width: 100%; } } .wf-brand-pill { margin-top: 10px; display: inline-block; padding: 3px 8px; border-radius: 12px; font-size: 7px; font-weight: 600; } .wf-brand-pill--synced { background: rgba(16,185,129,0.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.25); } .wf-gallery-stage { display: flex; flex-direction: column; gap: 10px; align-items: center; width: 85%; } .wf-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 100%; } .wf-gallery-tile { aspect-ratio: 1; border-radius: 3px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.06); } .wf-gt1 { background: rgba(59,130,246,0.25); animation: wf-gallery-pulse 7s ease infinite; } .wf-gt2 { background: rgba(16,185,129,0.2); animation: wf-gallery-pulse 7s ease 1s infinite; } .wf-gt3 { background: rgba(139,92,246,0.2); animation: wf-gallery-pulse 7s ease 2s infinite; } .wf-gt4 { background: rgba(245,158,11,0.2); } .wf-gt5 { background: rgba(239,68,68,0.2); } .wf-gt6 { background: rgba(255,255,255,0.06); } @keyframes wf-gallery-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; filter: brightness(1.3); } } .wf-gallery-chips { display: flex; gap: 4px; } .wf-gallery-chip { padding: 2px 7px; border-radius: 10px; font-size: 7px; background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.1); } .wf-gallery-chip--active { background: rgba(37,99,235,0.2); color: rgba(147,197,253,0.9); border-color: rgba(37,99,235,0.3); } .wf-team-stage { display: flex; flex-direction: column; gap: 6px; width: 85%; } .wf-team-row { display: flex; align-items: center; gap: 8px; } .wf-tr1 { animation: wf-team-slide 9s ease infinite; } .wf-tr2 { animation: wf-team-slide 9s ease 1s infinite; } .wf-tr3 { animation: wf-team-slide 9s ease 2s infinite; } .wf-tr4 { animation: wf-team-slide 9s ease 3s infinite; } @keyframes wf-team-slide { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } .wf-team-avatar { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 700; color: #fff; flex-shrink: 0; } .wf-team-name { font-size: 8px; color: rgba(255,255,255,0.7); flex: 1; } .wf-team-badge { padding: 1px 6px; border-radius: 8px; font-size: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } .wf-team-badge--owner { background: rgba(59,130,246,0.2); color: #93c5fd; border: 1px solid rgba(59,130,246,0.2); } .wf-team-badge--editor { background: rgba(16,185,129,0.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.2); } .wf-team-badge--viewer { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.1); } .wf-mini-flist { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; } .wf-mini-frow { display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 4px; background: rgba(255,255,255,0.03); } .wf-mini-frow--live { background: rgba(37,99,235,0.08); animation: wf-mini-frow-pulse 6s ease infinite; } @keyframes wf-mini-frow-pulse { 0%, 100% { background: rgba(37,99,235,0.06); } 50% { background: rgba(37,99,235,0.14); } } .wf-mini-frow-icon { width: 10px; height: 10px; border-radius: 2px; background: rgba(255,255,255,0.15); flex-shrink: 0; } .wf-mini-frow-name { font-size: 7px; color: rgba(255,255,255,0.7); flex: 1; } .wf-mini-pill--dim { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,0.08); } .wf-mini-inbox-preview { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 5px; margin-top: 2px; } .wf-mini-inbox-h { font-size: 6px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,0.3); display: block; margin-bottom: 4px; } .wf-mini-inbox-row { display: flex; align-items: center; gap: 5px; } .wf-mini-inbox-row--live { animation: wf-mini-inbox-glow 8s ease infinite; } @keyframes wf-mini-inbox-glow { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } .wf-mini-inbox-dot { width: 5px; height: 5px; border-radius: 50%; background: #3b82f6; flex-shrink: 0; } .wf-mini-inbox-from { font-size: 7px; color: rgba(255,255,255,0.75); font-weight: 600; white-space: nowrap; } .wf-mini-inbox-msg { font-size: 6px; color: rgba(255,255,255,0.35); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wf-mini-bvrows { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; } .wf-mini-bvrow { display: flex; gap: 6px; align-items: flex-start; } .wf-mini-bvrow--live { animation: wf-mini-bv-pulse 8s ease infinite; } @keyframes wf-mini-bv-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .wf-mini-bvlabel { font-size: 6px; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: .06em; min-width: 38px; padding-top: 1px; flex-shrink: 0; } .wf-mini-bvval { font-size: 7px; color: rgba(255,255,255,0.65); font-style: italic; line-height: 1.3; } .wf-mini-bv-badge { margin-top: 4px; } .wf-mini-galgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-bottom: 6px; width: 100%; } .wf-mini-galtile { aspect-ratio: 1; border-radius: 2px; background: rgba(255,255,255,0.07); } .wf-mini-galtile--1 { background: rgba(59,130,246,0.3); } .wf-mini-galtile--2 { background: rgba(16,185,129,0.25); } .wf-mini-galtile--3 { background: rgba(139,92,246,0.25); } .wf-mini-galtile--4 { background: rgba(245,158,11,0.25); } .wf-mini-galtile--5 { background: rgba(239,68,68,0.2); } .wf-mini-galtile--6 { background: rgba(255,255,255,0.05); } .wf-mini-galtile--new { animation: wf-mini-gal-new 7s ease infinite; } @keyframes wf-mini-gal-new { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; filter: brightness(1.2); } } .wf-mini-galtabs { display: flex; gap: 3px; } .wf-mini-galtab { padding: 2px 6px; border-radius: 8px; font-size: 6px; color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); } .wf-mini-galtab--active { background: rgba(37,99,235,0.15); color: rgba(147,197,253,0.85); border-color: rgba(37,99,235,0.25); } .wf-mini-teamlist { display: flex; flex-direction: column; gap: 4px; } .wf-mini-tmrow { display: flex; align-items: center; gap: 6px; padding: 3px 5px; border-radius: 4px; } .wf-mini-tmrow--pending { opacity: 0.5; } .wf-mini-tmavatar { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 6px; font-weight: 700; color: #fff; flex-shrink: 0; } .wf-mini-tmbody { flex: 1; } .wf-mini-tmname { font-size: 7px; color: rgba(255,255,255,0.7); } .wf-mini-tmbadge { padding: 1px 5px; border-radius: 8px; font-size: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .wf-mini-tmbadge--owner { background: rgba(59,130,246,0.2); color: #93c5fd; } .wf-mini-tmbadge--editor { background: rgba(16,185,129,0.15); color: #6ee7b7; } .wf-mini-tmbadge--viewer { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.35); } .wf-mini-meters { display: flex; flex-direction: column; gap: 7px; } .wf-mini-meter-head { display: flex; justify-content: space-between; margin-bottom: 3px; } .wf-mini-meter-label { font-size: 7px; color: rgba(255,255,255,0.55); } .wf-mini-meter-val { font-size: 7px; color: rgba(255,255,255,0.35); } .wf-mini-meter-track { height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; } .wf-mini-meter-fill { height: 100%; border-radius: 2px; transition: width 1s ease; } .wf-mini-meter-fill--ok { background: #10b981; } .wf-mini-meter-fill--warn { background: #f59e0b; } .wf-mini-meter--1 .wf-mini-meter-fill { animation: wf-mini-meter-tick 10s ease infinite; } @keyframes wf-mini-meter-tick { 0% { width: 60%; } 50% { width: 68%; } 100% { width: 60%; } } .wf-pipeline-stage { display: flex; gap: 6px; align-items: flex-start; width: 90%; height: 80%; } .wf-pipeline-col { flex: 1; display: flex; flex-direction: column; gap: 4px; align-items: center; } .wf-pipeline-col-label { font-size: 6px; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,0.3); margin-bottom: 2px; } .wf-pipeline-card { width: 100%; height: 18px; border-radius: 3px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.08); } .wf-pipeline-card--dim { background: rgba(255,255,255,0.05); } .wf-pc1 .wf-pipeline-card { background: rgba(59,130,246,0.25); } .wf-pc2 .wf-pipeline-card { background: rgba(139,92,246,0.2); } .wf-pc3 .wf-pipeline-card { background: rgba(245,158,11,0.2); } .wf-pc4 .wf-pipeline-card { background: rgba(16,185,129,0.25); } .wf-pipeline-drag { position: absolute; width: 28px; height: 18px; border-radius: 3px; background: rgba(59,130,246,0.35); border: 1px solid rgba(59,130,246,0.5); box-shadow: 0 4px 12px rgba(0,0,0,0.4); animation: wf-pipeline-drag 8s ease infinite; top: 40%; left: 10%; } @keyframes wf-pipeline-drag { 0%, 100% { transform: translateX(0); opacity: 0.8; } 40% { transform: translateX(40px); opacity: 1; } 80% { transform: translateX(40px); opacity: 0.8; } } .wf-aie-toolbar { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; } .wf-aie-btn { padding: 3px 7px; border-radius: 3px; font-size: 8px; font-weight: 700; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); } .wf-aie-ai { background: rgba(139,92,246,0.2); color: #c4b5fd; border: 1px solid rgba(139,92,246,0.3); animation: wf-aie-glow 6s ease infinite; } @keyframes wf-aie-glow { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 8px rgba(139,92,246,0.4); } } .wf-aie-body { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; width: 85%; } .wf-aie-line { height: 8px; border-radius: 3px; background: rgba(255,255,255,0.08); } .wf-aie-l1 { width: 90%; } .wf-aie-l2 { width: 70%; } .wf-aie-cursor { width: 2px; height: 10px; background: rgba(255,255,255,0.7); animation: wf-cursor-blink 1s step-end infinite; margin-left: 2px; } @keyframes wf-cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .wf-aie-palette { display: flex; gap: 4px; animation: wf-aie-palette-in 8s ease infinite; } @keyframes wf-aie-palette-in { 0%, 20% { opacity: 0; transform: translateY(4px); } 40%, 80% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } } .wf-aie-cmd { padding: 3px 7px; border-radius: 4px; font-size: 7px; background: rgba(139,92,246,0.15); color: #c4b5fd; border: 1px solid rgba(139,92,246,0.25); } .wf-auto-stage { display: flex; flex-direction: column; gap: 7px; width: 88%; } .wf-auto-row { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 4px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); } .wf-ar--live { animation: wf-auto-live 7s ease infinite; border-color: rgba(16,185,129,0.2); } @keyframes wf-auto-live { 0%, 100% { background: rgba(16,185,129,0.05); } 50% { background: rgba(16,185,129,0.12); } } .wf-auto-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .wf-auto-dot--ok { background: #10b981; } .wf-auto-dot--skip { background: #6b7280; } .wf-auto-dot--fail { background: #ef4444; } .wf-auto-name { font-size: 8px; color: rgba(255,255,255,0.7); flex: 1; } .wf-auto-sch { font-size: 6px; color: rgba(255,255,255,0.3); white-space: nowrap; } .wf-llms-stage { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; width: 85%; } .wf-llms-fname { font-size: 8px; font-weight: 600; color: rgba(255,255,255,0.5); font-family: monospace; margin-bottom: 2px; } .wf-llms-lines { display: flex; flex-direction: column; gap: 3px; } .wf-llms-line { font-size: 7px; font-family: monospace; color: rgba(255,255,255,0.4); } .wf-ll1 { color: rgba(147,197,253,0.7); } .wf-ll2 { animation: wf-llms-type 9s steps(30) infinite; overflow: hidden; white-space: nowrap; } .wf-ll3 { animation: wf-llms-type 9s steps(30) 0.5s infinite; overflow: hidden; white-space: nowrap; } @keyframes wf-llms-type { 0% { width: 0; } 60%, 100% { width: 100%; } } .wf-llms-engines { display: flex; gap: 5px; flex-wrap: wrap; } .wf-llms-chip { padding: 2px 7px; border-radius: 10px; font-size: 7px; border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.04); } .wf-lc1 { animation: wf-llms-ping 8s ease infinite; } .wf-lc2 { animation: wf-llms-ping 8s ease 1s infinite; } .wf-lc3 { animation: wf-llms-ping 8s ease 2s infinite; } .wf-lc4 { animation: wf-llms-ping 8s ease 3s infinite; } @keyframes wf-llms-ping { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; border-color: rgba(147,197,253,0.4); color: rgba(147,197,253,0.85); } } .wf-pseo-stage { display: flex; flex-direction: column; gap: 6px; width: 85%; } .wf-pseo-field { display: flex; flex-direction: column; gap: 2px; } .wf-pseo-label { font-size: 7px; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: .04em; } .wf-pseo-input { height: 12px; border-radius: 3px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); width: 100%; } .wf-pseo-input--filled { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.18); animation: wf-pseo-cursor 6s ease infinite; } @keyframes wf-pseo-cursor { 0%, 100% { border-color: rgba(255,255,255,0.18); } 50% { border-color: rgba(59,130,246,0.5); box-shadow: 0 0 0 2px rgba(59,130,246,0.1); } } .wf-pseo-row { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; } .wf-pseo-toggle { width: 24px; height: 13px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); position: relative; } .wf-pseo-toggle::after { content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.3); top: 1px; left: 2px; } .wf-pseo-live { font-size: 7px; color: #6ee7b7; font-weight: 600; margin-top: 4px; animation: wf-pseo-live-pulse 4s ease infinite; } @keyframes wf-pseo-live-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } .wf-pseo-f1 { animation: wf-pseo-field-in 7s ease infinite; } @keyframes wf-pseo-field-in { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } } .wf-analytics-stage { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 4px 2px; } .wf-analytics-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .wf-analytics-chip { display: flex; flex-direction: column; gap: 2px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 6px 8px; animation: wf-analytics-chip-in 8s ease infinite; } .wf-ac1 { animation-delay: 0s; border-color: rgba(16,185,129,0.3); } .wf-ac2 { animation-delay: 0.3s; } .wf-ac3 { animation-delay: 0.6s; border-color: rgba(16,185,129,0.3); } .wf-ac4 { animation-delay: 0.9s; } @keyframes wf-analytics-chip-in { 0%, 10% { opacity: 0; transform: translateY(4px); } 20%, 85% { opacity: 1; transform: translateY(0); } 95%, 100% { opacity: 0.6; transform: translateY(0); } } .wf-analytics-val { font-size: 13px; font-weight: 700; color: #6ee7b7; letter-spacing: -0.5px; } .wf-analytics-lbl { font-size: 8px; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.5px; } .wf-analytics-bars { display: flex; align-items: flex-end; gap: 4px; height: 36px; padding: 0 2px; } .wf-analytics-bar { flex: 1; background: rgba(16,185,129,0.35); border-radius: 3px 3px 0 0; animation: wf-analytics-bar-grow 8s ease infinite; } .wf-ab1 { height: 55%; animation-delay: 1.2s; } .wf-ab2 { height: 80%; animation-delay: 1.4s; background: rgba(16,185,129,0.55); } .wf-ab3 { height: 45%; animation-delay: 1.6s; } .wf-ab4 { height: 90%; animation-delay: 1.8s; background: rgba(16,185,129,0.55); } .wf-ab5 { height: 65%; animation-delay: 2.0s; } .wf-ab6 { height: 75%; animation-delay: 2.2s; background: rgba(16,185,129,0.55); } @keyframes wf-analytics-bar-grow { 0%, 15% { opacity: 0; transform: scaleY(0.1); transform-origin: bottom; } 30%, 80% { opacity: 1; transform: scaleY(1); transform-origin: bottom; } 95%, 100% { opacity: 0.5; } } .wf-analytics-src { font-size: 8px; color: rgba(255,255,255,0.3); text-align: center; letter-spacing: 0.3px; margin-top: 2px; } .wf-domain-stage { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 6px 4px; } .wf-domain-row { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 6px 12px; animation: wf-domain-row-in 8s ease infinite; } @keyframes wf-domain-row-in { 0%, 5% { opacity: 0; transform: translateY(-4px); } 15%, 80% { opacity: 1; transform: translateY(0); } 95%, 100% { opacity: 0.5; } } .wf-domain-url { font-size: 11px; font-weight: 600; color: #f8fafc; letter-spacing: -0.3px; } .wf-domain-lock { font-size: 11px; position: relative; animation: wf-domain-lock-badge 8s ease infinite; } @keyframes wf-domain-lock-badge { 0%, 20% { opacity: 0.4; filter: grayscale(1); } 35%, 80% { opacity: 1; filter: grayscale(0); } 95%, 100% { opacity: 0.6; } } .wf-domain-line { display: block; width: 2px; height: 18px; background: repeating-linear-gradient( to bottom, rgba(16,185,129,0.5) 0px, rgba(16,185,129,0.5) 4px, transparent 4px, transparent 8px ); animation: wf-domain-line-draw 8s ease infinite; } @keyframes wf-domain-line-draw { 0%, 10% { opacity: 0; height: 0; } 25%, 80% { opacity: 1; height: 18px; } 95%, 100% { opacity: 0.4; } } .wf-domain-dest { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.7); background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.25); border-radius: 6px; padding: 4px 10px; animation: wf-domain-dest-in 8s ease infinite; } @keyframes wf-domain-dest-in { 0%, 20% { opacity: 0; transform: translateY(4px); } 35%, 80% { opacity: 1; transform: translateY(0); } 95%, 100% { opacity: 0.5; } } .wf-domain-ssl { font-size: 9px; font-weight: 600; color: #6ee7b7; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); border-radius: 20px; padding: 3px 10px; animation: wf-domain-ssl-in 8s ease infinite; } @keyframes wf-domain-ssl-in { 0%, 30% { opacity: 0; transform: scale(0.8); } 45%, 80% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0.6; } } .wf-wlemail-stage { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 2px 0; } .wf-wlemail-card { display: flex; flex-direction: column; gap: 0; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; overflow: hidden; } .wf-wlemail-row { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.07); animation: wf-wlemail-row-in 8s ease infinite; } .wf-wlemail-row:last-child { border-bottom: none; } .wf-wler1 { animation-delay: 0s; } .wf-wler2 { animation-delay: 0.25s; } .wf-wler3 { animation-delay: 0.5s; } @keyframes wf-wlemail-row-in { 0%, 8% { opacity: 0; transform: translateX(-4px); } 20%, 75% { opacity: 1; transform: translateX(0); } 90%, 100% { opacity: 0.6; } } .wf-wlemail-field { font-size: 8px; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.5px; min-width: 36px; flex-shrink: 0; } .wf-wlemail-val { font-size: 9px; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wf-wlemail-val--brand { color: #6ee7b7; font-weight: 600; } .wf-wlemail-badge { align-self: center; font-size: 9px; font-weight: 700; color: #6ee7b7; background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.35); border-radius: 20px; padding: 4px 12px; letter-spacing: 0.3px; animation: wf-wlemail-badge-pulse 8s ease infinite; } @keyframes wf-wlemail-badge-pulse { 0%, 25% { opacity: 0; transform: scale(0.8); } 40%, 70% { opacity: 1; transform: scale(1); } 80%, 85% { opacity: 1; transform: scale(1.05); } 95%, 100% { opacity: 0; transform: scale(0.8); } }