/* ============================================================ T-KON UV Theme — Design System Source: unit45host/t-kon-uv (visual concepts only) USAGE: - Add only to landing / marketing pages (landing.html, pricing.html, etc.) - Do NOT include on functional Campaign OS pages (campaigns.html, google-ads-connect.html, platform-onboarding.html, batch.html) - All classes are OPT-IN — no global element overrides - Apply .page-dark to for full dark mode on a page Palette: --uv-bg: #09090F (deep space black) --uv-surface: #12121C (card background) --uv-elevated: #1A1A2E (elevated surface) --uv-purple: #7B2FFF (UV purple — primary) --uv-purple-lt: #9B5FFF (lighter purple) --uv-cyan: #00F5D4 (electric cyan — accent) --uv-pink: #FF2D78 (neon pink — highlight) --uv-text: #F0EEFF (near-white with purple tint) --uv-muted: #8B8BA7 (dimmed text) --uv-border: rgba(123,47,255,0.25) ============================================================ */ /* ── Design tokens ─────────────────────────────────────────── */ :root { --uv-bg: #09090F; --uv-surface: #12121C; --uv-elevated: #1A1A2E; --uv-purple: #7B2FFF; --uv-purple-lt: #9B5FFF; --uv-cyan: #00F5D4; --uv-pink: #FF2D78; --uv-text: #F0EEFF; --uv-muted: #8B8BA7; --uv-border: rgba(123,47,255,0.25); --uv-glow-p: 0 0 24px rgba(123,47,255,0.45); --uv-glow-c: 0 0 24px rgba(0,245,212,0.35); } /* ── Page-level dark theme (opt-in via .page-dark on ) ─ */ .page-dark { background-color: var(--uv-bg) !important; color: var(--uv-text) !important; } .page-dark a { color: var(--uv-cyan); } .page-dark a:hover { color: #fff; } .page-dark footer { background: #07070D !important; border-top: 1px solid var(--uv-border) !important; color: var(--uv-muted) !important; } .page-dark hr { border-color: var(--uv-border) !important; } /* ── Hero section ──────────────────────────────────────────── */ /* Overrides the inline .gradient-hero for pages that load uv-theme.css */ .gradient-hero { background: linear-gradient(135deg, #09090F 0%, #1A0A3D 50%, #0D1F3C 100%) !important; position: relative; overflow: hidden; } .gradient-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 20% 50%, rgba(123,47,255,0.18) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 80% 30%, rgba(0,245,212,0.10) 0%, transparent 70%); pointer-events: none; } /* ── Buttons ───────────────────────────────────────────────── */ .btn-uv-primary { background: linear-gradient(135deg, var(--uv-purple) 0%, #5B1FCC 100%); color: #fff !important; font-weight: 700; border-radius: 0.5rem; padding: 0.75rem 2rem; transition: box-shadow 0.2s, transform 0.15s; box-shadow: var(--uv-glow-p); border: none; cursor: pointer; display: inline-block; text-decoration: none; line-height: 1.25; text-align: center; } .btn-uv-primary:hover { box-shadow: 0 0 36px rgba(123,47,255,0.65); transform: translateY(-2px); color: #fff !important; } .btn-uv-outline { background: transparent; color: var(--uv-cyan) !important; border: 2px solid rgba(0,245,212,0.45); font-weight: 600; border-radius: 0.5rem; padding: 0.75rem 2rem; transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; cursor: pointer; display: inline-block; text-decoration: none; line-height: 1.25; text-align: center; } .btn-uv-outline:hover { border-color: var(--uv-cyan); box-shadow: var(--uv-glow-c); transform: translateY(-2px); color: var(--uv-cyan) !important; } /* ── Cards ─────────────────────────────────────────────────── */ /* Overrides .card-hover for pages that load uv-theme.css */ .card-hover { background: var(--uv-surface) !important; border: 1px solid var(--uv-border) !important; border-radius: 1rem !important; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s !important; color: var(--uv-text) !important; } .card-hover:hover { transform: translateY(-6px) !important; box-shadow: var(--uv-glow-p) !important; border-color: rgba(123,47,255,0.6) !important; } /* Glass morphism card */ .glass-card { background: rgba(26,26,46,0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--uv-border); border-radius: 1rem; } /* ── Typography helpers ────────────────────────────────────── */ .gradient-text-uv { background: linear-gradient(90deg, var(--uv-purple-lt) 0%, var(--uv-cyan) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-uv-cyan { color: var(--uv-cyan) !important; } .text-uv-purple { color: var(--uv-purple-lt) !important; } .text-uv-pink { color: var(--uv-pink) !important; } .text-uv-muted { color: var(--uv-muted) !important; } /* ── Surface / background helpers ─────────────────────────── */ .bg-uv-base { background-color: var(--uv-bg) !important; } .bg-uv-surface { background-color: var(--uv-surface) !important; } .bg-uv-elevated { background-color: var(--uv-elevated) !important; } .border-uv { border-color: var(--uv-border) !important; } /* ── Neon badge / pill ─────────────────────────────────────── */ .neon-badge { background: rgba(123,47,255,0.15); border: 1px solid rgba(123,47,255,0.4); color: var(--uv-cyan); border-radius: 9999px; padding: 0.25rem 1rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; display: inline-block; } /* ── Neon glow divider ─────────────────────────────────────── */ .neon-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--uv-purple), var(--uv-cyan), transparent); border: none; margin: 0; } /* ── Pricing card highlight ────────────────────────────────── */ .pricing-highlight { background: linear-gradient(135deg, rgba(123,47,255,0.25) 0%, rgba(0,245,212,0.10) 100%) !important; border: 1px solid rgba(123,47,255,0.55) !important; box-shadow: var(--uv-glow-p) !important; } /* ── Section backgrounds ───────────────────────────────────── */ .section-uv-alt { background-color: var(--uv-surface) !important; } .social-strip-uv { background: var(--uv-surface) !important; border-top: 1px solid var(--uv-border) !important; border-bottom: 1px solid var(--uv-border) !important; } /* ── Animated background grid (optional decorative overlay) ── */ .grid-bg-uv { background-image: linear-gradient(rgba(123,47,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(123,47,255,0.05) 1px, transparent 1px); background-size: 40px 40px; } /* ── Custom scrollbar (page-dark scoped) ───────────────────── */ .page-dark ::-webkit-scrollbar { width: 6px; height: 6px; } .page-dark ::-webkit-scrollbar-track { background: var(--uv-bg); } .page-dark ::-webkit-scrollbar-thumb { background: rgba(123,47,255,0.4); border-radius: 3px; } .page-dark ::-webkit-scrollbar-thumb:hover { background: var(--uv-purple); }