A cockpit for agentic development
Pi Web runs Pi Coding Agent sessions in real server-side workspaces, keeps them alive when your browser leaves, and gives you a fast web surface to supervise, redirect, and review the work. diff --git a/docs/styles.css b/docs/styles.css index fcbe470..6d57878 100644 --- a/docs/styles.css +++ b/docs/styles.css @@ -44,6 +44,92 @@ body::after { background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand-3)); } +.home-page .site-header, +.home-page .site-footer, +.home-page .title-context, +.home-page .hero .eyebrow, +.home-page .hero-lede, +.home-page .hero-actions, +.home-page .hero-stats, +.home-page .terminal, +.home-page main > section:not(.hero) { + opacity: 0; + animation: page-reveal 700ms ease-out 2.45s forwards; +} + +.intro-target { + display: inline; +} + +.intro-word { + display: inline-block; + opacity: 0; + transform: translateY(-42vh); + animation: word-drop 640ms cubic-bezier(0.18, 0.88, 0.22, 1.08) forwards; + animation-delay: calc(140ms + (var(--i) * 190ms)); + color: var(--intro-color, var(--text)); +} + +.intro-word:nth-child(1) { + --intro-color: #ffffff; +} + +.intro-word:nth-child(2) { + --intro-color: #b7a2ff; +} + +.intro-word:nth-child(3) { + --intro-color: var(--brand-2); +} + +.intro-word:nth-child(4) { + --intro-color: var(--brand); +} + +.intro-word:nth-child(5) { + --intro-color: var(--brand-3); +} + +@keyframes word-drop { + 0% { + opacity: 0; + transform: translateY(-42vh); + } + + 72% { + opacity: 1; + transform: translateY(0.08em); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes page-reveal { + to { + opacity: 1; + } +} + +@media (prefers-reduced-motion: reduce) { + .home-page .site-header, + .home-page .site-footer, + .home-page .title-context, + .home-page .hero .eyebrow, + .home-page .hero-lede, + .home-page .hero-actions, + .home-page .hero-stats, + .home-page .terminal, + .home-page main > section:not(.hero), + .intro-word { + opacity: 1; + transform: none; + animation: none; + } +} + a { color: inherit; text-decoration: none;