/* * ClipFlip shared brand theme. * Single source of truth for the color/typography system, linked from * every page's before that page's own stylesheet. Individual pages * reference these via var(--...) rather than redefining the palette * locally, so a future rebrand only requires editing this one file. */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap'); :root { /* A vivid violet -> pink -> amber gradient, replacing the generic flat indigo/purple (#667eea/#764ba2) that most dark-mode SaaS templates default to. */ --grad-1: #8b5cf6; --grad-2: #ec4899; --grad-3: #f59e0b; --brand-gradient: linear-gradient(120deg, var(--grad-1) 0%, var(--grad-2) 55%, var(--grad-3) 100%); --brand-gradient-soft: linear-gradient(120deg, rgba(139,92,246,0.18) 0%, rgba(236,72,153,0.18) 55%, rgba(245,158,11,0.18) 100%); --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Canonical page background — the deep violet->black the dashboard uses. Every page uses this so the whole site matches (previously the public pages still had the old indigo/purple gradient). */ --page-bg: radial-gradient(ellipse at top, #150f28 0%, #06050a 60%, #030204 100%); } /* Sitewide page background. Pages layer their own foreground on top; this guarantees a consistent dark base even where a page doesn't set its own. */ body { background: var(--page-bg); background-attachment: fixed; color: #fff; min-height: 100vh; } /* Sitewide default for headings — loaded before each page's own stylesheet, so a page can still override this on a specific selector if it needs to, but every heading gets the display font without having to hunt down each page's bespoke heading classes individually. */ h1, h2, h3 { font-family: var(--font-display); } /* ────────────────────────────────────────────────────────────────────── Mobile / PWA baseline (shared by every page). The site is now an installable PWA, so it must behave on a phone: no accidental horizontal scroll, media never overflows its container, comfortable tap targets, and respect for notch/home-indicator safe areas when launched standalone from the home screen. ────────────────────────────────────────────────────────────────────── */ * { -webkit-tap-highlight-color: rgba(0,0,0,0); } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Media never overflows its container. height:auto only on raster media so inline SVG icons keep their explicitly-set dimensions untouched. */ img, video { max-width: 100%; height: auto; } svg, canvas { max-width: 100%; } /* In standalone (installed) mode, pad the body for the status bar and the home indicator so content isn't hidden under them. Harmless in a tab. */ @media (display-mode: standalone) { body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } } @media (max-width: 640px) { /* Safety net: nothing should force the page wider than the viewport. */ html, body { overflow-x: hidden; max-width: 100%; } /* Comfortable minimum tap target for interactive controls. */ button, .btn, a.btn, input[type="submit"], select { min-height: 44px; } }