/* ============================================================================ GFS Platform — Alive Layer (CSS) Standalone visual aliveness for the flow corpus. v10 design tokens: cobalt #092F64, tufts #468BE6, cubic-bezier(0.4,0,0.2,1). Auto-activates by inclusion. Disable via . ============================================================================ */ /* ---- Tokens (scoped, do not collide with page vars) ---------------------- */ :root { --alive-cobalt: #092F64; --alive-tufts: #468BE6; --alive-success: #1E8E5A; --alive-warn: #C97A0A; --alive-ease: cubic-bezier(0.4, 0, 0.2, 1); --alive-shadow-rest: 0 1px 2px rgba(9, 47, 100, 0.06); --alive-shadow-hover: 0 10px 24px rgba(9, 47, 100, 0.12), 0 2px 6px rgba(9, 47, 100, 0.08); --alive-glow: 0 0 0 4px rgba(70, 139, 230, 0.18), 0 0 16px rgba(70, 139, 230, 0.35); } /* Global opt-out */ body[data-alive="off"] *, body[data-alive="off"] *::before, body[data-alive="off"] *::after { animation: none !important; transition: none !important; } /* ---- Smooth scroll (anchor nav + section jumps) -------------------------- */ html { scroll-behavior: smooth; } /* ---- Branded text selection --------------------------------------------- */ ::selection { background: var(--alive-cobalt); color: #fff; } /* ---- Focus-visible: cobalt ring matches brand --------------------------- */ :focus-visible { outline: 2px solid var(--alive-tufts); outline-offset: 2px; border-radius: 4px; } /* ---- 1. Pulsing live dot (alongside REAL badges) ------------------------ */ .alive-dot-live { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--alive-success); position: relative; vertical-align: middle; animation: alive-pulse-live 2s var(--alive-ease) infinite; } .alive-dot-live::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: var(--alive-success); opacity: 0.4; animation: alive-ring-live 2s var(--alive-ease) infinite; } @keyframes alive-pulse-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(30, 142, 90, 0.45); } 50% { box-shadow: 0 0 0 6px rgba(30, 142, 90, 0); } } @keyframes alive-ring-live { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(1.8); opacity: 0; } } /* ---- 2. Hover-lift on panel / card / stage ------------------------------ */ .panel, .stage, .card { transition: transform 250ms var(--alive-ease), box-shadow 250ms var(--alive-ease), border-color 250ms var(--alive-ease); will-change: transform; } .panel:hover, .stage:hover, .card:hover { transform: translateY(-2px); box-shadow: var(--alive-shadow-hover); } /* ---- 3. Breathing hero gradient ----------------------------------------- */ .hero, .alive-breathe { background-size: 200% 200%; animation: alive-breathe 20s var(--alive-ease) infinite; } @keyframes alive-breathe { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ---- 4. Fade-up on enter (JS toggles .is-visible) ----------------------- */ .fade-up-on-enter { opacity: 0; transform: translateY(12px); transition: opacity 400ms var(--alive-ease), transform 400ms var(--alive-ease); } .fade-up-on-enter.is-visible { opacity: 1; transform: translateY(0); } /* ---- 5. Count-up baseline (JS writes values) ---------------------------- */ .count-up { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* ---- 6. ⓘ badge hover pulse (telegraph "click me") ---------------------- */ .info-badge, [data-popover], .ⓘ { transition: transform 200ms var(--alive-ease), box-shadow 200ms var(--alive-ease); cursor: pointer; } .info-badge:hover, [data-popover]:hover, .ⓘ:hover { animation: alive-pulse-info 1.2s var(--alive-ease) infinite; } .info-badge.alive-attention, [data-popover].alive-attention { animation: alive-pulse-info 1.2s var(--alive-ease) 1; } @keyframes alive-pulse-info { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(70, 139, 230, 0.5); } 50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(70, 139, 230, 0); } } /* ---- 7. Active-step glow (Play animation marks current node) ----------- */ .alive-active, .node.is-active, .stage.is-active { animation: alive-active-glow 1.6s var(--alive-ease) infinite; position: relative; z-index: 2; } @keyframes alive-active-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(70, 139, 230, 0.45), 0 0 8px rgba(70, 139, 230, 0.3); } 50% { box-shadow: 0 0 0 8px rgba(70, 139, 230, 0), 0 0 22px rgba(70, 139, 230, 0.5); } } /* ---- 9. Loading shimmer (used by Suitelets / async panels) -------------- */ .shimmer { position: relative; overflow: hidden; background: rgba(9, 47, 100, 0.04); border-radius: 6px; } .shimmer::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(70, 139, 230, 0.14) 50%, transparent 100% ); transform: translateX(-100%); animation: alive-shimmer 1.4s linear infinite; } @keyframes alive-shimmer { 100% { transform: translateX(100%); } } /* ---- 10. Connection-line shimmer during Play ---------------------------- */ .edge.alive-firing, path.alive-firing, line.alive-firing { stroke: var(--alive-tufts); stroke-width: 2.5; stroke-dasharray: 6 6; animation: alive-edge-flow 0.9s linear infinite; filter: drop-shadow(0 0 4px rgba(70, 139, 230, 0.55)); } @keyframes alive-edge-flow { 0% { stroke-dashoffset: 24; } 100% { stroke-dashoffset: 0; } } /* ---- 11. Status-color breathing ----------------------------------------- */ .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 6px; } .status-dot.real { background: var(--alive-success); animation: alive-breathe-success 2s var(--alive-ease) infinite; } .status-dot.stub { background: var(--alive-warn); animation: alive-breathe-warn 2s var(--alive-ease) infinite; } .status-dot.tbd { background: var(--alive-warn); animation: alive-breathe-warn 2.4s var(--alive-ease) infinite; opacity: 0.7; } @keyframes alive-breathe-success { 0%, 100% { box-shadow: 0 0 0 0 rgba(30, 142, 90, 0.45); } 50% { box-shadow: 0 0 0 5px rgba(30, 142, 90, 0); } } @keyframes alive-breathe-warn { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 122, 10, 0.5); } 50% { box-shadow: 0 0 0 5px rgba(201, 122, 10, 0); } } /* ---- "You are here" breadcrumb chip (JS-managed) ------------------------ */ .alive-here-chip { position: absolute; bottom: 12px; right: 12px; padding: 6px 12px; background: var(--alive-cobalt); color: #fff; font-size: 12px; font-weight: 500; border-radius: 999px; box-shadow: 0 4px 12px rgba(9, 47, 100, 0.3); opacity: 0; transform: translateY(6px); transition: opacity 250ms var(--alive-ease), transform 250ms var(--alive-ease); pointer-events: none; z-index: 50; font-feature-settings: "tnum"; } .alive-here-chip.is-visible { opacity: 1; transform: translateY(0); } /* ---- Keyboard help overlay ---------------------------------------------- */ .alive-help-overlay { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(8px); background: rgba(9, 47, 100, 0.96); color: #fff; padding: 14px 20px; border-radius: 10px; font-size: 13px; line-height: 1.6; box-shadow: 0 12px 32px rgba(9, 47, 100, 0.35); opacity: 0; pointer-events: none; transition: opacity 200ms var(--alive-ease), transform 200ms var(--alive-ease); z-index: 9999; max-width: 360px; } .alive-help-overlay.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } .alive-help-overlay kbd { display: inline-block; padding: 1px 6px; margin: 0 2px; background: rgba(255, 255, 255, 0.18); border-radius: 4px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; } /* ---- Easter egg "Kimi" floating badge ----------------------------------- */ .alive-kimi-egg { position: fixed; bottom: 60px; right: 24px; padding: 8px 14px; background: linear-gradient(135deg, var(--alive-cobalt), var(--alive-tufts)); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 600; box-shadow: 0 8px 20px rgba(9, 47, 100, 0.35); opacity: 0; transform: translateY(20px); pointer-events: none; z-index: 9999; animation: alive-kimi-rise 2.4s var(--alive-ease) forwards; } @keyframes alive-kimi-rise { 0% { opacity: 0; transform: translateY(20px); } 20% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; transform: translateY(-4px); } 100% { opacity: 0; transform: translateY(-30px); } } /* ---- Sticky section header underline (JS toggles .is-stuck) ------------- */ .alive-section-sticky { position: sticky; top: 0; z-index: 20; transition: box-shadow 200ms var(--alive-ease), border-color 200ms var(--alive-ease); background: inherit; } .alive-section-sticky.is-stuck { box-shadow: 0 1px 0 var(--alive-tufts), 0 4px 12px rgba(9, 47, 100, 0.08); } /* ---- Hero subtitle parallax target (JS writes --alive-px) --------------- */ .hero-subtitle, .alive-parallax { transform: translateY(var(--alive-px, 0px)); transition: transform 80ms linear; will-change: transform; } /* ---- Print-safe: kill animations for PDF / paper exports ---------------- */ @media print { *, *::before, *::after { animation: none !important; transition: none !important; box-shadow: none !important; } .alive-here-chip, .alive-help-overlay, .alive-kimi-egg { display: none !important; } .fade-up-on-enter { opacity: 1 !important; transform: none !important; } } /* ---- Respect prefers-reduced-motion ------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .fade-up-on-enter { opacity: 1; transform: none; } .alive-dot-live::after { display: none; } .alive-kimi-egg { display: none; } }