/* ========================================================================== TELEXICO v200 KERNEL v2 — DESIGN TOKENS -------------------------------------------------------------------------- Built from telexiko.co.uk LIVE production CSS variables. Brand recognition preserved. Spacing + rhythm + typography refined. ========================================================================== */ :root { /* ============================== BACKGROUNDS ============================== */ /* From live: dark purple-black gradient stack */ --tx-bg: #12051f; /* primary surface */ --tx-bg-deep: #07010f; /* deepest, page bottom */ --tx-bg-soft: #1b0b2e; /* mid layer, hero blend */ --tx-bg-light: #fff7ff; /* light section base */ --tx-bg-light-2: #fdf2f8; /* light section alt */ --tx-bg-light-3: #faf5ff; /* light section deep */ /* Hero page gradient — composed exactly from live */ --tx-page-bg: radial-gradient(circle at 8% 8%, rgba(236, 72, 153, 0.42), transparent 28rem), radial-gradient(circle at 88% 10%, rgba(139, 92, 246, 0.48), transparent 32rem), radial-gradient(circle at 50% 45%, rgba(255, 45, 149, 0.18), transparent 38rem), linear-gradient(180deg, #12051f 0%, #1b0b2e 42%, #07010f 100%); /* Light section bg (flat — no gradient wash between sections) */ --tx-light-bg: #fdf2f8; /* ============================== TEXT ============================== */ --tx-white: #ffffff; --tx-soft-white: #fff7ff; --tx-text: #f8eaff; /* primary body on dark */ --tx-muted: #d8b4fe; /* muted purple on dark */ --tx-muted-2: #f5d0fe; /* light pink-purple on dark */ --tx-ink-dark: #190724; /* primary body on light */ --tx-ink-dark-2: #5b216d; /* muted on light */ /* ============================== BRAND ============================== */ --tx-primary: #ec4899; /* PINK = ACTION */ --tx-secondary: #8b5cf6; /* PURPLE = DEPTH */ --tx-accent: #ffffff; /* WHITE = PREMIUM */ --tx-purple: #8b5cf6; --tx-pink: #ec4899; --tx-hot-pink: #ff2d95; --tx-rose: #fb7185; --tx-lilac: #c084fc; --tx-cyan: #22d3ee; --tx-green: #22c55e; --tx-pink-300: #f9a8d4; --tx-pink-500: #ec4899; --tx-pink-700: #be185d; /* ============================== EFFECTS ============================== */ --tx-glow-pink: rgba(236, 72, 153, 0.40); --tx-glow-purple: rgba(139, 92, 246, 0.40); --tx-panel: rgba(255, 255, 255, 0.09); --tx-panel-strong: rgba(255, 255, 255, 0.14); --tx-panel-pink: rgba(236, 72, 153, 0.12); --tx-panel-purple: rgba(139, 92, 246, 0.12); --tx-border: rgba(255, 255, 255, 0.18); --tx-border-strong:rgba(255, 255, 255, 0.28); --tx-border-pink: rgba(236, 72, 153, 0.50); --tx-border-pink-soft: rgba(236, 72, 153, 0.32); --tx-border-light: rgba(236, 72, 153, 0.18); --tx-shadow-sm: 0 4px 12px rgba(15, 2, 30, 0.20); --tx-shadow-md: 0 12px 32px rgba(15, 2, 30, 0.35); --tx-shadow-lg: 0 24px 60px rgba(15, 2, 30, 0.45); --tx-shadow-xl: 0 32px 90px rgba(15, 2, 30, 0.55); --tx-shadow-cta: 0 22px 60px rgba(236, 72, 153, 0.34); --tx-shadow-cta-lg:0 28px 80px rgba(236, 72, 153, 0.46); --tx-shadow-glow: 0 0 38px rgba(236, 72, 153, 0.18); /* ============================== GRADIENTS ============================== */ /* Live "primary" button: white→pink→purple (light gradient, dark text) */ --tx-grad-btn-primary: linear-gradient(135deg, #ffffff 0%, #ffe4f3 32%, #f9a8d4 62%, #c084fc 100%); /* WhatsApp green */ --tx-grad-btn-whatsapp: linear-gradient(135deg, #dcfce7, #22c55e); /* Gradient text — for accenting hero words like "Effortless" */ --tx-grad-text: linear-gradient(135deg, #ffffff 0%, #ffe4f3 28%, #ec4899 58%, #c084fc 82%, #ffffff 100%); /* Solid pink-purple CTA (for primary "Get Instant Price" header button) */ --tx-grad-cta: linear-gradient(135deg, #ec4899 0%, #d946ef 50%, #8b5cf6 100%); /* Dark hero glass form bg */ --tx-grad-form-card: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(236, 72, 153, 0.04)); /* AI hook band bg (the "Every call answered" callout) */ --tx-grad-ai-band: linear-gradient(135deg, rgba(236, 72, 153, 0.16), rgba(139, 92, 246, 0.16)); /* Header nav background (sticky, blurred) */ --tx-grad-nav: rgba(18, 5, 31, 0.78); /* Announcement strip */ --tx-grad-ann: linear-gradient(90deg, rgba(139, 92, 246, 0.35), rgba(236, 72, 153, 0.35)); /* ============================== TYPOGRAPHY ============================== */ /* Live uses Inter — keep it for brand recognition */ --tx-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --tx-font-display: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Sizes — refined from live, slightly tightened */ --tx-text-xs: 0.78rem; --tx-text-sm: 0.88rem; --tx-text-md: 1rem; --tx-text-lg: 1.15rem; --tx-text-xl: 1.4rem; --tx-text-2xl: 1.85rem; --tx-text-3xl: 2.4rem; --tx-text-4xl: clamp(2.8rem, 7vw, 4.6rem); /* refined from live's 6.35rem — slightly tighter */ --tx-text-5xl: clamp(3.2rem, 8vw, 5.6rem); /* mega hero */ --tx-fw-bold: 700; --tx-fw-black: 800; --tx-fw-ultra: 900; --tx-fw-mega: 950; --tx-ls-tighter: -0.078em; /* from live h1 */ --tx-ls-tight: -0.045em; --tx-ls-snug: -0.03em; --tx-ls-base: -0.01em; --tx-ls-wide: 0.04em; --tx-ls-wider: 0.08em; --tx-ls-widest: 0.12em; --tx-lh-tight: 0.92; /* from live h1 */ --tx-lh-snug: 1.15; --tx-lh-normal: 1.45; --tx-lh-relaxed: 1.62; /* from live hero-sub */ /* ============================== SPACING ============================== */ --tx-space-1: 4px; --tx-space-2: 8px; --tx-space-3: 12px; --tx-space-4: 16px; --tx-space-5: 20px; --tx-space-6: 24px; --tx-space-8: 32px; --tx-space-10: 40px; --tx-space-12: 48px; --tx-space-16: 64px; --tx-space-20: 80px; --tx-space-24: 96px; /* Layout */ --tx-container: 1180px; /* from live --tx-max */ --tx-container-narrow: 820px; --tx-page-px-mobile: 20px; --tx-page-px-desktop: 40px; --tx-section-py-mobile: 56px; --tx-section-py-desktop: 88px; --tx-hero-py-mobile: 54px; /* from live mobile */ --tx-hero-py-desktop: 88px; /* from live desktop */ --tx-header-h-mobile: 72px; --tx-header-h-desktop: 82px; /* from live */ --tx-sticky-h-mobile: 72px; /* ============================== RADIUS ============================== */ --tx-r-xs: 6px; --tx-r-sm: 12px; --tx-r-md: 18px; --tx-r-lg: 22px; /* from live --tx-radius-lg */ --tx-r-xl: 30px; /* from live --tx-radius-xl */ --tx-r-2xl: 36px; --tx-r-full: 999px; /* ============================== MOTION ============================== */ --tx-dur-fast: 150ms; --tx-dur-base: 220ms; /* from live */ --tx-dur-slow: 320ms; --tx-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --tx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ============================== Z-INDEX ============================== */ --tx-z-base: 1; --tx-z-content: 10; --tx-z-sticky-header: 50; --tx-z-drawer: 80; --tx-z-mickey-launch: 90; --tx-z-mickey-panel: 95; --tx-z-mobile-cta: 100; --tx-z-modal: 200; } /* ============================================================================ PREMIUM TIER UPGRADES — Phase 4 visual refinement Added on top of base tokens. None of the above changes; this layers on. ============================================================================ */ :root { /* ============================== SHADOWS ================================== Five-tier system. Premium sites use these consistently for depth perception. */ --tx-shadow-sm: 0 1px 2px rgba(7, 1, 15, 0.08); --tx-shadow-md: 0 4px 14px rgba(7, 1, 15, 0.12), 0 1px 3px rgba(7, 1, 15, 0.06); --tx-shadow-lg: 0 12px 28px rgba(7, 1, 15, 0.16), 0 4px 8px rgba(7, 1, 15, 0.08); --tx-shadow-xl: 0 24px 48px rgba(7, 1, 15, 0.24), 0 8px 16px rgba(7, 1, 15, 0.10); --tx-shadow-2xl: 0 32px 80px rgba(7, 1, 15, 0.32), 0 12px 24px rgba(7, 1, 15, 0.16); /* Coloured glow shadows for premium emphasis */ --tx-shadow-pink-glow: 0 12px 40px rgba(236, 72, 153, 0.35), 0 4px 12px rgba(236, 72, 153, 0.20); --tx-shadow-purple-glow: 0 12px 40px rgba(139, 92, 246, 0.35), 0 4px 12px rgba(139, 92, 246, 0.20); --tx-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08); /* ============================== GLASS ==================================== Backdrop-blur surfaces for premium card treatments. */ --tx-glass-bg-dark: rgba(27, 11, 46, 0.55); --tx-glass-bg-light: rgba(255, 247, 255, 0.7); --tx-glass-border-dark: 1px solid rgba(255, 255, 255, 0.08); --tx-glass-border-light:1px solid rgba(255, 255, 255, 0.5); --tx-glass-blur: saturate(180%) blur(14px); /* ============================== MESH GRADIENTS ========================== More sophisticated than radial — use for hero / section backgrounds. */ --tx-mesh-hero: radial-gradient(at 12% 8%, rgba(236, 72, 153, 0.45) 0px, transparent 50%), radial-gradient(at 92% 12%, rgba(139, 92, 246, 0.50) 0px, transparent 50%), radial-gradient(at 45% 55%, rgba(255, 45, 149, 0.22) 0px, transparent 50%), radial-gradient(at 78% 78%, rgba(192, 132, 252, 0.30) 0px, transparent 50%), linear-gradient(180deg, #12051f 0%, #1b0b2e 50%, #07010f 100%); --tx-mesh-cta: radial-gradient(at 20% 30%, rgba(236, 72, 153, 0.65) 0px, transparent 55%), radial-gradient(at 80% 70%, rgba(139, 92, 246, 0.55) 0px, transparent 55%), linear-gradient(135deg, #18062a 0%, #2a0b48 100%); /* ============================== NOISE OVERLAY =========================== Subtle texture for the dark sections — kills the "flat digital" look. Inline SVG noise so no external request. */ --tx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2' /%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); /* ============================== ICON FRAMES ============================= Premium icon containers — never let an emoji float free in cards. */ --tx-icon-frame-bg-dark: linear-gradient(135deg, rgba(236, 72, 153, 0.20), rgba(139, 92, 246, 0.20)); --tx-icon-frame-bg-light: linear-gradient(135deg, rgba(236, 72, 153, 0.12), rgba(139, 92, 246, 0.12)); --tx-icon-frame-border-dark: 1px solid rgba(255, 255, 255, 0.10); --tx-icon-frame-border-light:1px solid rgba(139, 92, 246, 0.18); /* ============================== PREMIUM TYPE SCALE ====================== Bigger display size, refined letter-spacing for huge type. */ --tx-text-display: clamp(3.4rem, 9vw, 6.4rem); /* hero MEGA */ --tx-text-display-sm: clamp(2.6rem, 6vw, 4.2rem); /* secondary mega */ --tx-ls-display: -0.052em; /* tighter for big type */ /* ============================== MOTION (PREMIUM) ======================== Premium interactions: hover lift, press, slide. */ --tx-lift-sm: translateY(-2px); --tx-lift-md: translateY(-4px); --tx-lift-lg: translateY(-8px); --tx-press: translateY(1px) scale(0.99); }