/* ============================================================================ * labs-modern.css — The Daily Synthesis "Labs" design language * ---------------------------------------------------------------------------- * A shared, opt-in modern UI layer for the interactive lab apps * (eml-foundation, alphazero-connect4, chess, neural-familiar, * trading-signals, beat-lab-ai). * * Philosophy: one cohesive system (tokens, motion, components), each app * supplies its own ACCENT via two custom properties: * * * * Everything below reads --lab-accent / --lab-accent-2, so a single pair of * values re-skins the whole component set. Nothing here overrides an app's * existing styles unless the app opts a node in with a .lab-* class. * * CSP-safe: pure CSS, no @import of remote sheets. Respects * prefers-reduced-motion and prefers-color-scheme. * ==========================================================================*/ .labs { /* ---- Accent (apps override these two; sensible teal/violet default) ---- */ --lab-accent: #2dd4bf; --lab-accent-2: #a78bfa; --lab-accent-rgb: 45, 212, 191; /* ---- Surfaces & ink (dark-first; light overrides further down) ---- */ --lab-bg: #070a12; --lab-surface: rgba(255, 255, 255, 0.045); --lab-surface-2: rgba(255, 255, 255, 0.07); --lab-border: rgba(255, 255, 255, 0.17); --lab-border-strong: rgba(255, 255, 255, 0.30); /* accent-tinted hairline used on card edges for definition */ --lab-border-accent: rgba(var(--lab-accent-rgb), 0.40); --lab-ink: #eef2f8; --lab-ink-dim: rgba(238, 242, 248, 0.66); --lab-ink-faint: rgba(238, 242, 248, 0.40); /* ---- Radii ---- */ --lab-r-sm: 8px; --lab-r: 14px; --lab-r-lg: 20px; --lab-r-pill: 999px; /* ---- Shadows / glow ---- */ --lab-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --lab-shadow: 0 12px 36px rgba(0, 0, 0, 0.35); --lab-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.45); --lab-glow: 0 0 0 1px rgba(var(--lab-accent-rgb), 0.35), 0 0 28px rgba(var(--lab-accent-rgb), 0.28); /* ---- Motion ---- */ --lab-ease: cubic-bezier(0.22, 1, 0.36, 1); /* expo-out: confident */ --lab-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot */ --lab-dur-1: 120ms; --lab-dur-2: 240ms; --lab-dur-3: 420ms; /* ---- Spacing scale ---- */ --lab-1: 4px; --lab-2: 8px; --lab-3: 12px; --lab-4: 16px; --lab-5: 24px; --lab-6: 32px; --lab-8: 48px; } /* Light mode — only applies when the app itself goes light. */ body.labs.light-mode, body.labs.dark-mode-off { --lab-bg: #f6f8fc; --lab-surface: rgba(10, 16, 30, 0.035); --lab-surface-2: rgba(10, 16, 30, 0.06); --lab-border: rgba(10, 16, 30, 0.18); --lab-border-strong: rgba(10, 16, 30, 0.32); --lab-ink: #0d1426; --lab-ink-dim: rgba(13, 20, 38, 0.66); --lab-ink-faint: rgba(13, 20, 38, 0.42); --lab-shadow: 0 12px 36px rgba(13, 20, 38, 0.12); } /* ============================ Card ======================================== */ .lab-card { position: relative; background: var(--lab-surface); border: 1px solid var(--lab-border-strong); border-radius: var(--lab-r); /* crisp inner hairline so cards read as framed even on busy backdrops */ box-shadow: var(--lab-shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.04); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); transition: transform var(--lab-dur-2) var(--lab-ease), border-color var(--lab-dur-2) var(--lab-ease), box-shadow var(--lab-dur-2) var(--lab-ease); } .lab-card.is-interactive:hover { transform: translateY(-3px); border-color: var(--lab-border-strong); box-shadow: var(--lab-shadow-lg); } /* A thin accent edge that lights up on hover/active. */ .lab-card.lab-edge::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--lab-accent), var(--lab-accent-2)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0.5; transition: opacity var(--lab-dur-2) var(--lab-ease); pointer-events: none; } .lab-card.lab-edge:hover::before { opacity: 1; } /* ============================ Buttons ===================================== */ .lab-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--lab-2); min-height: 40px; padding: 0 var(--lab-4); border-radius: var(--lab-r-sm); border: 1px solid var(--lab-border-strong); background: var(--lab-surface-2); color: var(--lab-ink); font: inherit; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; overflow: hidden; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform var(--lab-dur-1) var(--lab-ease), border-color var(--lab-dur-1) var(--lab-ease), background var(--lab-dur-1) var(--lab-ease), box-shadow var(--lab-dur-1) var(--lab-ease); } .lab-btn:hover { transform: translateY(-1px); border-color: var(--lab-accent); } .lab-btn:active { transform: translateY(0) scale(0.98); } .lab-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .lab-btn-primary { border: none; color: #07101a; background: linear-gradient(135deg, var(--lab-accent), var(--lab-accent-2)); box-shadow: 0 6px 20px rgba(var(--lab-accent-rgb), 0.35); } .lab-btn-primary:hover { box-shadow: 0 10px 28px rgba(var(--lab-accent-rgb), 0.5); } .lab-btn-ghost { background: transparent; } .lab-btn-sm { min-height: 32px; padding: 0 var(--lab-3); font-size: 0.85em; } /* Ripple injected by labs-modern.js (falls back gracefully if JS absent). */ .lab-ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255, 255, 255, 0.4); pointer-events: none; animation: lab-ripple var(--lab-dur-3) var(--lab-ease) forwards; } @keyframes lab-ripple { to { transform: scale(2.6); opacity: 0; } } /* ============================ Chips / pills =============================== */ .lab-chip { display: inline-flex; align-items: center; gap: var(--lab-1); padding: 4px 11px; border-radius: var(--lab-r-pill); border: 1px solid var(--lab-border); background: var(--lab-surface); color: var(--lab-ink-dim); font-size: 0.78em; font-weight: 600; cursor: pointer; transition: all var(--lab-dur-1) var(--lab-ease); } .lab-chip:hover, .lab-chip[aria-pressed="true"], .lab-chip.is-active { color: var(--lab-ink); border-color: var(--lab-accent); background: rgba(var(--lab-accent-rgb), 0.12); } /* ============================ Focus ring ================================= */ .labs :focus-visible { outline: 2px solid var(--lab-accent); outline-offset: 2px; border-radius: var(--lab-r-sm); } /* ============================ Radial gauge =============================== */ /*

72%

*/ .lab-gauge { --val: 0; --size: 64px; --thick: 7px; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, var(--lab-bg) calc(100% - var(--thick) - 1px), transparent calc(100% - var(--thick))), conic-gradient(var(--lab-accent) calc(var(--val) * 360deg), var(--lab-border) 0); transition: background var(--lab-dur-3) var(--lab-ease); } .lab-gauge > span { font-size: calc(var(--size) * 0.26); font-weight: 700; color: var(--lab-ink); } /* ============================ Linear meter =============================== */ .lab-meter { height: 8px; border-radius: var(--lab-r-pill); background: var(--lab-border); overflow: hidden; } .lab-meter > i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--lab-accent), var(--lab-accent-2)); transition: width var(--lab-dur-3) var(--lab-ease); } /* ============================ Toast ===================================== */ .lab-toast-host { position: fixed; right: 18px; bottom: 18px; z-index: 9999; display: flex; flex-direction: column; gap: var(--lab-2); pointer-events: none; } .lab-toast { pointer-events: auto; min-width: 200px; max-width: 360px; padding: var(--lab-3) var(--lab-4); border-radius: var(--lab-r); background: var(--lab-surface-2); border: 1px solid var(--lab-border-strong); box-shadow: var(--lab-shadow-lg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--lab-ink); font-size: 0.9em; display: flex; align-items: center; gap: var(--lab-2); animation: lab-toast-in var(--lab-dur-3) var(--lab-ease-spring); border-left: 3px solid var(--lab-accent); } .lab-toast.is-out { animation: lab-toast-out var(--lab-dur-2) var(--lab-ease) forwards; } .lab-toast.ok { border-left-color: #34d399; } .lab-toast.warn { border-left-color: #fbbf24; } .lab-toast.err { border-left-color: #f87171; } @keyframes lab-toast-in { from { opacity: 0; transform: translateX(24px); } } @keyframes lab-toast-out { to { opacity: 0; transform: translateX(24px); } } /* ============================ Skeleton loader ============================ */ .lab-skeleton { position: relative; overflow: hidden; background: var(--lab-surface); border-radius: var(--lab-r-sm); } .lab-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(var(--lab-accent-rgb), 0.18), transparent); animation: lab-shimmer 1.4s infinite; } @keyframes lab-shimmer { to { transform: translateX(100%); } } /* ============================ Scroll reveal ============================== */ .lab-reveal { opacity: 0; transform: translateY(18px) scale(0.99); transition: opacity var(--lab-dur-3) var(--lab-ease), transform var(--lab-dur-3) var(--lab-ease); will-change: opacity, transform; } .lab-reveal.is-in { opacity: 1; transform: none; } /* ============================ Section pop-in ============================= */ @keyframes lab-pop-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } } .lab-pop { animation: lab-pop-in var(--lab-dur-3) var(--lab-ease-spring) both; } /* ============================ Thinking pulse ============================= */ @keyframes lab-thinking { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--lab-accent-rgb), 0.0); } 50% { box-shadow: 0 0 0 4px rgba(var(--lab-accent-rgb), 0.28); } } .is-thinking-glow { animation: lab-thinking 1.1s var(--lab-ease) infinite; } /* ============================ Count-up number =========================== */ .lab-num { font-variant-numeric: tabular-nums; } /* ============================ Reduced motion ============================ */ @media (prefers-reduced-motion: reduce) { .labs *, .labs *::before, .labs *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .lab-reveal { opacity: 1; transform: none; } }