/* ============================================================ Xprez Marketing — Color tokens Dark-first system. Neutral grays stay truly neutral so the cyan accent reads as the single point of energy on screen. ============================================================ */ :root { /* ---- Brand core ---- */ --xz-cyan: #3EC6FF; /* primary accent — highlights, CTAs, links */ --xz-cyan-bright: #6FD6FF; /* hover / lighter cyan */ --xz-cyan-deep: #1FA9E6; /* pressed / deeper cyan */ --xz-purple: #9A579D; /* secondary accent — used sparingly */ --xz-purple-soft: #B47CB7; --xz-lime: #A8D65C; /* tertiary — top of the X gradient */ /* ---- Brand gradients ---- Stops are pinned to the EXACT proportion each hue occupies in the logo mark, measured by counting every chromatic pixel of the striped X: lime 15.6% · teal 17.7% · cyan 37.7% · blue 17.7% · purple 11.3% Each pure stop sits at the centre of its share, and cyan carries a short plateau (44→60%) so it owns ~37% of the sweep — the mark's centre of gravity. Purple lives only in the final ~11% stretch. */ --xz-gradient-brand: linear-gradient(135deg, #A8D65C 8%, #4FD4B0 24%, #3EC6FF 44%, #3EC6FF 60%, #5E8FD6 80%, #9A579D 94%); /* @kind color */ /* Primary accent gradient: cyan → purple — the logo's cyan→blue→purple tail renormalised (cyan 0% · blue 67% · purple 100%), so purple stays compressed into the final third, matching its small share of the mark. */ --xz-gradient-accent: linear-gradient(120deg, #3EC6FF 0%, #5E8FD6 67%, #9A579D 100%); /* @kind color */ /* Subtle cyan glow wash for hero backdrops (dark only) */ --xz-glow-cyan: radial-gradient(60% 60% at 50% 0%, rgba(62,198,255,0.18) 0%, rgba(62,198,255,0) 70%); /* @kind color */ /* ---- Color proportion (carries from the logo to the whole site) ---- The share of chromatic color each hue should occupy across the product, mirroring its measured share of the X mark. Cyan is the center of gravity; purple is the rarest accent. Use these as a budget, not a hard rule. */ --xz-prop-cyan: 37.7%; /* primary accent — CTAs, links, focus, most accents */ --xz-prop-teal: 17.7%; /* strong cool secondary */ --xz-prop-blue: 17.7%; /* connective accent / gradient mids */ --xz-prop-lime: 15.6%; /* highlight — sparingly, top of the sweep */ --xz-prop-purple: 11.3%; /* rarest — final-stretch accent, never a primary action */ /* ---- Accent tints (icon chips, pills, soft fills) ---- */ --xz-cyan-tint: rgba(62,198,255,0.10); /* @kind color */ --xz-cyan-tint-2: rgba(62,198,255,0.12); /* @kind color */ --xz-cyan-tint-bd: rgba(62,198,255,0.25); /* @kind color */ --xz-cyan-tint-bd2: rgba(62,198,255,0.45); /* @kind color */ /* ---- Neutrals (dark ramp) ---- */ --xz-ink-950: #0E0E0E; /* deepest — page void / footer */ --xz-ink-900: #141414; --xz-ink-850: #1A1A1A; /* canonical brand background */ --xz-ink-800: #202020; /* raised surface */ --xz-ink-700: #262626; /* card surface */ --xz-ink-600: #2E2E2E; /* elevated card / input */ --xz-ink-500: #3A3A3A; /* hairline-strong / divider */ --xz-ink-400: #4A4A4A; --xz-ink-300: #6B6B6B; --xz-ink-200: #8A8A8A; --xz-white: #FFFFFF; /* ---- Alpha whites (text & lines over dark) ---- */ --xz-w-92: rgba(255,255,255,0.92); --xz-w-72: rgba(255,255,255,0.72); --xz-w-52: rgba(255,255,255,0.52); --xz-w-36: rgba(255,255,255,0.36); --xz-w-12: rgba(255,255,255,0.12); --xz-w-08: rgba(255,255,255,0.08); --xz-w-04: rgba(255,255,255,0.04); /* ---- Semantic ---- */ --xz-success: #4FC78A; --xz-warning: #E6B23E; --xz-danger: #E5604D; --xz-info: var(--xz-cyan); /* ============================================================ Semantic aliases — prefer these in product code ============================================================ */ --bg-page: var(--xz-ink-850); --bg-void: var(--xz-ink-950); --bg-raised: var(--xz-ink-800); --surface-card: var(--xz-ink-700); --surface-input: var(--xz-ink-600); --surface-hover: var(--xz-ink-600); --border-subtle: var(--xz-w-08); --border-default: var(--xz-w-12); --border-strong: var(--xz-ink-500); --border-accent: var(--xz-cyan); --text-primary: var(--xz-white); --text-secondary: var(--xz-w-72); --text-muted: var(--xz-w-52); --text-faint: var(--xz-w-36); --text-accent: var(--xz-cyan); --text-on-accent: #07222E; --accent: var(--xz-cyan); --accent-hover: var(--xz-cyan-bright); --accent-press: var(--xz-cyan-deep); --focus-ring: rgba(62,198,255,0.55); } /* ============================================================ Lime accent theme — livelier, greener take on the brand. Drops the purple from the workhorse gradient and pushes the lime end of the X-mark gradient forward. Apply by adding class "theme-lime" to a container (e.g. ). Cyan stays in the gradient as the cool counterweight. ============================================================ */ .theme-lime { --xz-cyan: #A8D65C; /* accent now reads lime */ --xz-cyan-bright: #BCE07A; --xz-cyan-deep: #8FC23F; --xz-cyan-tint: rgba(168,214,92,0.12); --xz-cyan-tint-2: rgba(168,214,92,0.14); --xz-cyan-tint-bd: rgba(168,214,92,0.32); --xz-cyan-tint-bd2: rgba(168,214,92,0.50); /* Deliberate lime-forward reweighting (drops purple). Not the logo proportion — cyan still anchors the cool end as the counterweight. */ --xz-gradient-brand: linear-gradient(135deg, #C6E66B 10%, #A8D65C 30%, #4FD4B0 58%, #3EC6FF 88%); /* @kind color */ --xz-gradient-accent: linear-gradient(118deg, #C6E66B 0%, #6ED7B0 50%, #3EC6FF 100%); /* @kind color */ --xz-glow-cyan: radial-gradient(60% 60% at 50% 0%, rgba(168,214,92,0.18) 0%, rgba(62,198,255,0.08) 48%, rgba(62,198,255,0) 75%); /* @kind color */ --border-accent: #A8D65C; --text-accent: #A8D65C; --text-on-accent: #16240A; --accent: #A8D65C; --accent-hover: #BCE07A; --accent-press: #8FC23F; --focus-ring: rgba(168,214,92,0.50); --xz-info: #A8D65C; }