/* ────────────────────────────────────────────────────────────────────────── Decorative motifs — the "Agentic Universe" ────────────────────────────────────────────────────────────────────────── */ /* 4-point sparkle stars (cyan / lilac / coral) Apply as small absolute-positioned elements with .pm-sparkle */ .pm-sparkle { position: absolute; width: 18px; height: 18px; background: radial-gradient(circle at center, currentColor 0%, currentColor 12%, transparent 13%), conic-gradient(from 0deg, transparent 0deg, currentColor 22deg, transparent 45deg, transparent 90deg, currentColor 112deg, transparent 135deg, transparent 180deg, currentColor 202deg, transparent 225deg, transparent 270deg, currentColor 292deg, transparent 315deg); -webkit-mask: radial-gradient(closest-side, #000 60%, transparent 100%); filter: drop-shadow(0 0 6px currentColor); pointer-events: none; } /* Cleaner 4-point star via SVG mask — better quality */ .pm-star { position: absolute; width: 22px; height: 22px; color: var(--pm-electric-300); background: currentColor; filter: drop-shadow(0 0 8px currentColor); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; pointer-events: none; } .pm-star--cyan { color: #5BC8FF; } .pm-star--lilac { color: var(--pm-lavender-300); } .pm-star--coral { color: #F4A37C; } .pm-star--white { color: #FFFFFF; } /* Tiny dot accents */ .pm-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.55); filter: drop-shadow(0 0 4px rgba(255,255,255,0.6)); pointer-events: none; } /* Retro grid "floor" — the Tron horizon. Apply to a tall, narrow element pinned to the bottom of a hero. Magenta x cyan gridlines fade upward. */ .pm-grid-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 260px; pointer-events: none; background: /* horizontal lines */ repeating-linear-gradient(to bottom, transparent 0px, transparent 22px, rgba(77, 178, 249, 0.55) 22px, rgba(77, 178, 249, 0.55) 23px), /* vertical lines (perspective faked via gradient mask) */ repeating-linear-gradient(to right, transparent 0px, transparent 60px, rgba(228, 166, 240, 0.45) 60px, rgba(228, 166, 240, 0.45) 61px); -webkit-mask: linear-gradient(to top, #000 30%, transparent 100%); mask: linear-gradient(to top, #000 30%, transparent 100%); transform: perspective(380px) rotateX(60deg); transform-origin: bottom center; opacity: 0.85; } /* Horizon arc — the curved aurora that anchors hero compositions */ .pm-horizon { position: absolute; left: 50%; bottom: -8%; width: 130%; aspect-ratio: 2 / 1; transform: translateX(-50%); border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--pm-grad-aurora-arc); opacity: 0.85; filter: blur(2px); pointer-events: none; } /* Glow-stroke headline (used for "Headless 360" wordmark) — outline glyphs */ .pm-glow-stroke { font-family: var(--pm-font-display); font-weight: 500; color: var(--pm-lavender-300); -webkit-text-stroke: 2px rgba(255, 220, 180, 0.75); text-shadow: 0 0 18px color-mix(in srgb, var(--pm-aurora-lilac) 85%, transparent), 0 0 60px color-mix(in srgb, var(--pm-electric-300) 45%, transparent); letter-spacing: -0.01em; } /* Aurora-glow filled headline (used for "Build the Agentic Enterprise") */ .pm-glow-cyan { color: var(--pm-electric-300); text-shadow: 0 0 24px rgba(77, 178, 249, 0.55); } /* Pill stamp — used for the "Coding Agent Runtime" / "Agentic Builders" tags */ .pm-stamp { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; font-family: var(--pm-font-body); font-weight: 700; font-size: 14px; letter-spacing: 0.01em; color: var(--pm-ink-700); border-radius: var(--pm-r-pill); background: var(--pm-aurora-mint); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -2px 0 rgba(0,0,0,0.08) inset, 0 6px 18px rgba(0, 0, 0, 0.25); } .pm-stamp--lilac { background: linear-gradient(180deg, #E8D0FF 0%, #C89BE8 100%); } .pm-stamp--mint { background: linear-gradient(180deg, #B6FAEC 0%, #6BE9D2 100%); } .pm-stamp--rose { background: linear-gradient(180deg, #FFD2DC 0%, #FF98B0 100%); } .pm-stamp--cyan { background: linear-gradient(180deg, #BEE3FC 0%, #4DB2F9 100%); color: #FFFFFF; } /* ────────────────────────────────────────────────────────────────────────── FLOWGRAPH MOTIFS — connector glow, animated pulse, stage ambiance ────────────────────────────────────────────────────────────────────────── */ /* Stage ambiance — calm near-flat stage, greatly softened grid */ .fg-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 0%, rgba(77, 178, 249, 0.02) 0%, transparent 60%), repeating-linear-gradient(0deg, transparent 0px, transparent 63px, rgba(255, 255, 255, 0.008) 64px, transparent 65px), repeating-linear-gradient(90deg, transparent 0px, transparent 63px, rgba(255, 255, 255, 0.008) 64px, transparent 65px); pointer-events: none; border-radius: var(--pm-r-md); opacity: 0.4; } /* Connector path — hairline, NO glow. Clean confident single-color stroke. */ .fg-connectors path { /* Glow removed for flat Apple/Stripe-clean aesthetic */ } /* Animated pulse dot — flows along connector paths (optional, controlled by JS if implemented) */ @keyframes fg-pulse { 0% { opacity: 0; r: 2; } 20% { opacity: 1; r: 3.5; } 80% { opacity: 1; r: 3.5; } 100% { opacity: 0; r: 2; } } .fg-pulse-dot { fill: var(--pm-electric-300); filter: drop-shadow(0 0 6px var(--pm-electric-300)); animation: fg-pulse 2.4s ease-in-out infinite; } /* Respect prefers-reduced-motion — disable all flowgraph animation */ @media (prefers-reduced-motion: reduce) { .fg-pulse-dot { animation: none; } .fg-node { transition: none; } }