/* ============================================================ 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 ───────────────────────────────────────────────────────── REPOINTED 2026-07-29 — these are now aliases of the stone x 360 tokens in css/tkon.css, not an independent palette. Why, and why here rather than in the pages: seven public pages (landing, index, pricing, roadmap, help, login, linkedin-ads-callback) render from these variables, while the twenty-two app pages render from --tk-*. Two dark themes, one neon purple/cyan and one indigo, meant a visitor clicking Pricing → Log in → Dashboard crossed two visual identities in three clicks. Owner report, verbatim: "egyszer feher - egyszer kek masszor fekete ... az egesz at lathatatlan". Remapping the tokens fixes all seven pages without touching their markup, and without a risky mass edit of files that carry live marketing copy. The uv-* NAMES stay so existing class usage keeps working; only the values move. As those pages are rewritten onto .tk-page they stop needing this file, and it goes away with them. The originals, for the record: bg #09090F · surface #12121C · elevated #1A1A2E · purple #7B2FFF purple-lt #9B5FFF · cyan #00F5D4 · pink #FF2D78 · text #F0EEFF muted #8B8BA7 · border rgba(123,47,255,.25) -------------------------------------------------------------------------- */ :root { --uv-bg: #020618; /* = --tk-bg */ --uv-surface: #0f172b; /* = --tk-card-solid */ --uv-elevated: #1a2338; /* = --tk-raised */ --uv-purple: #6366f1; /* = --tk-accent — the one locked accent */ --uv-purple-lt: #818cf8; /* = --tk-accent-hi */ --uv-cyan: #818cf8; /* was a second accent; there is only one now */ --uv-pink: #f87171; /* = --tk-err — it was only ever used for emphasis */ --uv-text: #e2e8f0; /* = --tk-text */ --uv-muted: #90a1b9; /* = --tk-muted */ --uv-border: #1d293d; /* = --tk-border, opaque: the old translucent purple rule read as a glow, not an edge */ /* Glows are what made these pages read as a different product. Kept as tokens so nothing breaks, reduced to a plain elevation shadow. */ --uv-glow-p: 0 1px 2px rgba(0,0,0,0.4); --uv-glow-c: 0 1px 2px rgba(0,0,0,0.4); } /* ── Page-level dark theme (opt-in via .page-dark on ) ─ */ .page-dark { background-color: var(--uv-bg) !important; color: var(--uv-text) !important; } /* :not(.tk-btn) — an anchor styled as a button carries its own colour, and `.page-dark a` (0,1,1) outranks `.tk-btn--primary` (0,1,0), so without this the "Get started" CTA rendered accent-on-accent and was unreadable. Same for the shell's own link classes. :not([class*="text-white"]) — the .tk-btn list only covered buttons built from the design system. 47 anchors across help / index / login / pricing / roadmap are buttons built from raw utilities instead (`bg-[#6366f1] text-white ... rounded-lg`), and this rule was quietly overriding the `text-white` they declared: roadmap's primary CTA rendered #818cf8 on #6366f1, i.e. indigo on indigo. Naming the class rather than each button means the rule now states the actual intent — an anchor that declares its own ink keeps it — and covers the ones written next. */ .page-dark a:not(.tk-btn):not(.tk-nav-item):not(.tk-brand):not([class*="text-white"]) { color: var(--uv-purple-lt); } .page-dark a:not(.tk-btn):not(.tk-nav-item):not(.tk-brand):not([class*="text-white"]):hover { color: #fff; } .page-dark footer { background: var(--uv-surface) !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(160deg, #020618 0%, #0b1223 55%, #0f172b 100%) !important; position: relative; overflow: hidden; } .gradient-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 22% 45%, rgba(99,102,241,0.14) 0%, transparent 70%); pointer-events: none; } /* ── Buttons ───────────────────────────────────────────────── */ .btn-uv-primary { background: var(--uv-purple); 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 { background: var(--uv-purple-lt); box-shadow: none; color: #fff !important; } .btn-uv-outline { background: transparent; color: var(--uv-cyan) !important; border: 1px solid var(--uv-border); 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: none !important; box-shadow: var(--uv-glow-p) !important; border-color: #273449 !important; } /* Glass morphism card */ .glass-card { background: rgba(15,23,43,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(99,102,241,0.14); border: 1px solid rgba(99,102,241,0.35); color: var(--uv-purple-lt); 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: var(--uv-border); border: none; margin: 0; } /* ── Pricing card highlight ────────────────────────────────── */ .pricing-highlight { background: var(--uv-surface) !important; border: 1px solid var(--uv-purple) !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(99,102,241,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,0.045) 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: #1e2b42; border-radius: 3px; } .page-dark ::-webkit-scrollbar-thumb:hover { background: var(--uv-purple); }