/* * Lxnar Tweaks custom design system. * Layers on top of built.css (Tailwind) + the --cl-* variables defined in layouts/master.njk. * This file is not overwritten by theme updates. */ /* Smooth crossfade between page navigations (Home/Products/FAQ/etc. are real separate pages here, not client-side tabs) via the native View Transitions API. Browsers without support just keep their normal instant navigation. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.25s; animation-timing-function: ease; } /* Headings / display type: Space Grotesk, loaded alongside the dashboard-configurable body font */ .font-display { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(var(--cl-accent), 0.6); border-radius: 3px; } /* Full-page ambient background: persistent grid + slowly drifting blue glow blobs. Fixed to the viewport and placed first in (see layouts/master.njk) so it sits behind every page's content, not just the hero. */ .page-grid { position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; } .glow-blob { position: fixed; z-index: -1; border-radius: 9999px; filter: blur(70px); pointer-events: none; will-change: transform; background: radial-gradient(circle, rgba(var(--cl-accent), 0.3) 0%, transparent 70%); } .glow-blob-1 { width: 44rem; height: 44rem; top: -12%; left: 8%; animation: lx-float-1 22s ease-in-out infinite; } .glow-blob-2 { width: 32rem; height: 32rem; bottom: -14%; left: -8%; background: radial-gradient(circle, rgba(var(--cl-accent), 0.16) 0%, transparent 70%); animation: lx-float-2 27s ease-in-out infinite; } .glow-blob-3 { width: 28rem; height: 28rem; bottom: -10%; right: -6%; background: radial-gradient(circle, rgba(var(--cl-accent), 0.16) 0%, transparent 70%); animation: lx-float-3 25s ease-in-out infinite; } @keyframes lx-float-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vw, 8vh) scale(1.15); } } @keyframes lx-float-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8vw, -6vh) scale(1.1); } } @keyframes lx-float-3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-7vw, -8vh) scale(1.12); } } @media (prefers-reduced-motion: reduce) { .glow-blob { animation: none; } } .hero-title-gradient { background: linear-gradient(135deg, #ffffff 0%, rgba(var(--cl-accent), 1) 50%, #ffffff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Badge pulse dot, used in hero + bundle badges */ .pulse-dot { width: 6px; height: 6px; background: rgba(var(--cl-accent), 1); border-radius: 50%; animation: lx-pulse 2s infinite; flex-shrink: 0; } @keyframes lx-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } } /* Divider used between homepage sections */ .glow-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--cl-accent), 0.6), transparent); } /* Bundle spotlight card top accent line */ .bundle-top-line { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--cl-accent), 0.8), transparent); } /* Buy button glow (primary CTAs) */ .glow-btn { box-shadow: 0 0 30px rgba(var(--cl-accent), 0.35); } .glow-btn:hover { box-shadow: 0 0 45px rgba(var(--cl-accent), 0.5); } /* Product card hover glow line + lift, layered on top of the stock card markup */ .lx-product-card { position: relative; } .lx-product-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--cl-accent), 1), transparent); opacity: 0; transition: opacity 0.3s; z-index: 1; } .lx-product-card:hover::before { opacity: 1; } .lx-product-card:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--cl-accent), 0.15); } /* Fade-in entrance animation for hero content */ @keyframes lx-fade-in-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: lx-fade-in-up 0.6s ease forwards; } .fade-in-delay { animation: lx-fade-in-up 0.6s ease 0.15s forwards; opacity: 0; } .fade-in-delay2 { animation: lx-fade-in-up 0.6s ease 0.3s forwards; opacity: 0; }