/* ========================================================================= zpromptify.com — "Galaxy Mobile Dark Mode" design system Lightweight, dependency-free CSS on top of Tailwind (via CDN in ). Everything here is either: 1) a visual effect Tailwind utilities can't express cleanly (galaxy background, glassmorphism, neon glow), or 2) a performance-conscious animation (GPU-friendly transforms only, respects prefers-reduced-motion, no layout thrash). ========================================================================= */ :root { --zp-bg-deep: #05050f; --zp-bg-mid: #0a0a1f; --zp-cyan: #22e5ff; --zp-violet: #8b5cf6; --zp-cobalt: #3b6dff; --zp-glass-border: rgba(255, 255, 255, 0.08); --zp-glass-bg: rgba(17, 18, 40, 0.55); } * { scrollbar-color: var(--zp-violet) transparent; } html { scroll-behavior: smooth; background-color: var(--zp-bg-deep); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background-color: var(--zp-bg-deep); font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } /* --------------------------------------------------------------------- Galaxy background Layered radial-gradients (static, GPU-cheap) + a low-particle canvas starfield loaded async from assets/js/starfield.js for subtle motion. The gradients alone already look complete if JS is disabled. --------------------------------------------------------------------- */ .zp-galaxy-bg { position: fixed; inset: 0; z-index: -2; background: radial-gradient(ellipse 80% 50% at 20% -10%, rgba(139, 92, 246, 0.25), transparent 60%), radial-gradient(ellipse 60% 40% at 90% 10%, rgba(34, 229, 255, 0.15), transparent 60%), radial-gradient(ellipse 70% 60% at 50% 120%, rgba(59, 109, 255, 0.2), transparent 60%), linear-gradient(180deg, var(--zp-bg-deep) 0%, var(--zp-bg-mid) 45%, var(--zp-bg-deep) 100%); background-color: var(--zp-bg-deep); } #zp-starfield { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: 0.8; } /* --------------------------------------------------------------------- Glassmorphism card system --------------------------------------------------------------------- */ .zp-glass { background: var(--zp-glass-bg); border: 1px solid var(--zp-glass-border); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); } .zp-glass-hover { transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .zp-glass-hover:hover { transform: translateY(-4px); border-color: rgba(34, 229, 255, 0.35); box-shadow: 0 12px 40px rgba(34, 229, 255, 0.12), 0 8px 32px rgba(0, 0, 0, 0.4); } /* --------------------------------------------------------------------- Neon text & buttons --------------------------------------------------------------------- */ .zp-text-gradient { background: linear-gradient(90deg, var(--zp-cyan) 0%, var(--zp-violet) 50%, var(--zp-cobalt) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .zp-btn-neon { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 9999px; padding: 0.75rem 1.75rem; font-weight: 600; color: #05050f; background: linear-gradient(90deg, var(--zp-cyan), var(--zp-cobalt)); box-shadow: 0 0 20px rgba(34, 229, 255, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; } .zp-btn-neon:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(34, 229, 255, 0.55); } .zp-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 9999px; padding: 0.7rem 1.7rem; font-weight: 600; color: #e5e7ff; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.03); transition: border-color 0.2s ease, background 0.2s ease; } .zp-btn-outline:hover { border-color: var(--zp-cyan); background: rgba(34, 229, 255, 0.08); } /* --------------------------------------------------------------------- Ad slot placeholders — visually distinct in dev, invisible in prod once real markup replaces the placeholder. --------------------------------------------------------------------- */ .zp-ad-slot { display: flex; align-items: center; justify-content: center; min-height: 100px; border: 1px dashed rgba(255, 255, 255, 0.15); border-radius: 0.75rem; background: rgba(255, 255, 255, 0.02); color: rgba(255, 255, 255, 0.35); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; } /* --------------------------------------------------------------------- Star rating --------------------------------------------------------------------- */ .zp-star { color: #ffd166; } /* --------------------------------------------------------------------- Utility: line clamp (native, no plugin needed) --------------------------------------------------------------------- */ .zp-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .zp-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* --------------------------------------------------------------------- Article typography (applied via .zp-article on the
wrapper) --------------------------------------------------------------------- */ .zp-article h2 { font-size: 1.5rem; font-weight: 700; color: #f5f5ff; margin-top: 2.5rem; margin-bottom: 1rem; scroll-margin-top: 100px; } .zp-article h3 { font-size: 1.15rem; font-weight: 600; color: #e5e7ff; margin-top: 1.75rem; margin-bottom: 0.75rem; scroll-margin-top: 100px; } .zp-article p { color: #c7c9e0; line-height: 1.8; margin-bottom: 1.25rem; } .zp-article ul, .zp-article ol { color: #c7c9e0; line-height: 1.8; margin-bottom: 1.25rem; padding-left: 1.5rem; } .zp-article ul { list-style: disc; } .zp-article ol { list-style: decimal; } .zp-article a { color: var(--zp-cyan); text-decoration: underline; text-underline-offset: 2px; } .zp-article table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 0.75rem; } .zp-article th, .zp-article td { border: 1px solid rgba(255, 255, 255, 0.08); padding: 0.85rem 1rem; text-align: left; font-size: 0.9rem; color: #c7c9e0; } .zp-article th { background: rgba(139, 92, 246, 0.15); color: #f5f5ff; font-weight: 600; } .zp-article tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); } /* --------------------------------------------------------------------- Sticky anchor ad (mobile) — respects safe-area, dismissible pattern left to implementation; kept simple + policy-safe spacing. --------------------------------------------------------------------- */ .zp-anchor-ad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding-bottom: env(safe-area-inset-bottom, 0); background: rgba(5, 5, 15, 0.9); backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 255, 255, 0.08); } /* --------------------------------------------------------------------- Reduced motion: disable non-essential animation entirely --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .zp-glass-hover, .zp-btn-neon, .zp-btn-outline { transition: none !important; } }