body { font-family: 'Quicksand', sans-serif; font-weight: 500; } .pb-scroll::-webkit-scrollbar { width: 3px; height: 3px; } .pb-scroll::-webkit-scrollbar-thumb { background-color: #06b07c; /* Emerald-500 */ border-radius: 6px; } .pb-scroll::-webkit-scrollbar-track { background-color: #0c6f48; /* Emerald-100 */ } /* ── Landing page motion ──────────────────────────────────────────────────── Everything here is decorative. Two rules hold it together: - Nothing depends on JavaScript to become visible. The scroll reveal only arms itself once the inline head script has stamped .pb-js on , so a page without JS renders flat and complete rather than blank. - prefers-reduced-motion turns all of it off (see the block at the end), which means no keyframe may be the only thing that reveals content. */ @keyframes pb-rise { from { opacity: 0; transform: translateY(1.5rem); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } } .pb-rise { animation: pb-rise 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) both; } /* The entrance order of the hero, roughly one beat per element. */ .pb-d1 { animation-delay: 0.05s; } .pb-d2 { animation-delay: 0.20s; } .pb-d3 { animation-delay: 0.35s; } .pb-d4 { animation-delay: 0.50s; } .pb-d5 { animation-delay: 0.65s; } .pb-d6 { animation-delay: 0.80s; } /* Ambient background orbs. Slower and less regular than animate-pulse, which reads as a blinking warning light at this size. */ @keyframes pb-drift { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; } 50% { transform: translate3d(4rem, 2rem, 0) scale(1.15); opacity: 0.9; } 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; } } .pb-drift { animation: pb-drift 18s ease-in-out infinite; } .pb-drift-alt { animation: pb-drift 24s ease-in-out infinite reverse; } /* Light sweeping over the wordmark. Needs background-clip: text, so the element must carry the gradient itself — hence the separate span. */ @keyframes pb-sheen { 0%, 55% { background-position: 200% 0; } 100% { background-position: -60% 0; } } .pb-sheen { background-image: linear-gradient(100deg, #fff 42%, rgba(110, 231, 183, 0.95) 50%, #fff 58%); background-size: 250% 100%; background-position: 200% 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: pb-sheen 6s ease-in-out 1.2s infinite; /* The gradient only exists inside this span's box, and the hero's tracking-tighter subtracts its letter-spacing after the LAST glyph too — so the box ends a sliver before the final "b" does, and whatever part of the glyph lies outside is clipped to transparent: a bitten right edge. Padding extends the painted box past the glyph; the negative margin gives that room back, so the dot that follows does not move. */ padding-right: .08em; margin-right: -.08em; } /* The emerald dot after "Plob": a slow breathing halo, not a blink. */ @keyframes pb-glow { 0%, 100% { text-shadow: 0 0 18px rgba(16, 185, 129, 0.35); } 50% { text-shadow: 0 0 34px rgba(16, 185, 129, 0.85); } } .pb-glow { animation: pb-glow 3.5s ease-in-out infinite; } /* Signal travelling along the top edge of the hero — the one literal nod to what the product does. */ @keyframes pb-beam { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .pb-beam { animation: pb-beam 7s linear 1s infinite; } @keyframes pb-blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } } .pb-blink { animation: pb-blink 2s ease-in-out infinite; } @keyframes pb-bob { 0%, 100% { transform: translateY(0); opacity: 0.45; } 50% { transform: translateY(0.4rem); opacity: 1; } } .pb-bob { animation: pb-bob 2.4s ease-in-out infinite; } /* Rotating word in the tagline. The track is a column of equal-height lines scrolled by whole lines; the last item repeats the first so the wrap back to translateY(0) is invisible. Heights are in em so it follows the font size. */ .pb-words { display: inline-block; height: 1.3em; overflow: hidden; vertical-align: bottom; } .pb-words-track { display: flex; flex-direction: column; animation: pb-words 10.5s cubic-bezier(0.8, 0, 0.2, 1) infinite; } .pb-words-track > span { height: 1.3em; line-height: 1.3em; } @keyframes pb-words { 0%, 28% { transform: translateY(0); } 33%, 61% { transform: translateY(-1.3em); } 66%, 94% { transform: translateY(-2.6em); } 100% { transform: translateY(-3.9em); } } /* Scroll reveal for the sections below the fold. Armed by .pb-js only, so the content is plainly visible when the script never runs. */ .pb-js .pb-reveal { opacity: 0; transform: translateY(1.75rem); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1); } .pb-js .pb-reveal.pb-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .pb-rise, .pb-drift, .pb-drift-alt, .pb-sheen, .pb-glow, .pb-beam, .pb-blink, .pb-bob, .pb-words-track { animation: none !important; } /* The sheen colours the text by clipping a gradient; without the animation it would sit frozen mid-sweep, so fall back to plain white. */ .pb-sheen { background-image: none; -webkit-text-fill-color: #fff; color: #fff; } /* Only the first word of the rotator is shown. */ .pb-words-track > span:not(:first-child) { display: none; } .pb-js .pb-reveal { opacity: 1; transform: none; transition: none; } } /* ── App sidebar ──────────────────────────────────────────────────────────── The nav entries carried the same twelve Tailwind classes each, in blue — the app's accent is emerald everywhere else. One class here instead, so the hover, the icon colour and the active marker stay in step. */ .pb-nav-item { position: relative; display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.5rem; /* A