/* Pingstat landing: theme tokens, typography, reset, minor custom utilities. Tailwind (via CDN) handles the rest. Dark mode is driven by .dark on . */ :root { --bg: #f6f7fb; --surface: #ffffff; --surface-muted: #f6f7fb; --border: #eceef4; --text: #1a1d29; --text-muted: #6b7280; --brand: #ff9500; --brand-hover: #e67300; --ok: #34c759; --ok-soft: rgba(52, 199, 89, .12); --warn: #ffcc00; --warn-soft: rgba(255, 204, 0, .12); --err: #ff3b30; --err-soft: rgba(255, 59, 48, .12); } html.dark { --bg: #0a0d18; --surface: #0f1322; --surface-muted: #151a2e; --border: #1b2138; --text: #e6e8f2; --text-muted: #9199b8; --brand: #ff9500; --brand-hover: #ffa940; --ok: #34c759; --ok-soft: rgba(52, 199, 89, .18); --warn: #ffcc00; --warn-soft: rgba(255, 204, 0, .18); --err: #ff3b30; --err-soft: rgba(255, 59, 48, .18); } /* Thin calm scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } *::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* Focus ring: brand color */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; } /* Section entrance: starts hidden, reveals via .revealed */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms cubic-bezier(.2,.6,.2,1), transform 600ms cubic-bezier(.2,.6,.2,1); } .reveal.revealed { opacity: 1; transform: translateY(0); } /* Gradient hero headline */ .gradient-text { background: linear-gradient(90deg, var(--brand), #ff5e3a); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Hero status-dot pulse */ @keyframes ping-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.25); } } .dot-pulse { animation: ping-pulse 2.4s ease-in-out infinite; } /* Button shine (primary CTA) */ .btn-shine { position: relative; overflow: hidden; } .btn-shine::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%); transform: translateX(-100%); transition: transform .8s ease; } .btn-shine:hover::after { transform: translateX(100%); } /* Card hover lift */ .hover-lift { transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease; } .hover-lift:hover { transform: translateY(-4px); border-color: rgba(255, 149, 0, .4); } /* Device frame placeholder (CSS-only iPhone-ish shape; replaced by real img later). Always renders with a dark bezel and a dark "screen" inside, independent of theme, so the mock content pops in both light and dark pages. */ .device-frame { position: relative; aspect-ratio: 9 / 19; background: #0a0d18; border: 10px solid #1c2030; border-radius: 38px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35), inset 0 0 0 1px #2a2e44; overflow: hidden; width: 100%; max-width: 280px; color: #e6e8f2; font-size: 10px; } /* Real screenshots include their own iOS status bar / dynamic island, so no CSS notch is needed when an fills the frame. */ .device-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Scroll nav backdrop */ .nav-scrolled { backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); background: color-mix(in srgb, var(--bg) 75%, transparent); border-bottom: 1px solid var(--border); } /* Reduced motion: disable all transitions/animations */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } }