/* ========================================================================== ELIXIR UI — DESIGN TOKENS -------------------------------------------------------------------------- Every value here was READ OFF the live site's computed styles, not invented. Change a token here and it propagates to every component. Import order matters: tokens.css → components.css ========================================================================== */ :root { /* --- Surfaces --------------------------------------------------------- bg page background alt section background (very slightly darker than page) surface card / panel fill raise hover state for surface */ --elx-bg: #191919; --elx-bg-alt: #181818; --elx-bg-deep: #141414; /* the darkest section band on the live page */ --elx-surface: #212121; --elx-raise: #262626; --elx-inset: rgba(255, 255, 255, .02); /* --- Borders ---------------------------------------------------------- */ --elx-border: #444444; /* card border, quite visible */ --elx-hairline: rgba(255, 255, 255, .08); /* pill border, dividers */ --elx-hairline-2:rgba(255, 255, 255, .14); /* --- Brand ----------------------------------------------------------- */ --elx-accent: #6ee4ff; /* the cyan. rgb(110,228,255) */ --elx-accent-hover: #55dfff; --elx-accent-ink: #191919; /* text colour ON the accent */ --elx-accent-deep: #39525c; /* muted teal, secondary accent */ --elx-accent-sky: #87d0ff; /* lighter blue used in card glows */ --elx-discord: #5865f2; --elx-discord-hover: #4a57e0; /* Semantic — derived from the palette, for states the marketing site never needed (forms, dashboards, alerts). */ --elx-success: #4ade80; --elx-warning: #fbbf24; --elx-danger: #f87171; --elx-info: var(--elx-accent); /* --- Text ------------------------------------------------------------ */ --elx-text: #ffffff; --elx-text-80: rgba(255, 255, 255, .80); /* body copy — most common */ --elx-text-60: rgba(255, 255, 255, .60); --elx-text-50: rgba(255, 255, 255, .50); /* eyebrow / muted label */ --elx-text-40: rgba(255, 255, 255, .40); --elx-text-ink: #191919; /* on light surfaces */ /* --- Type ------------------------------------------------------------ Inter, and one universal letter-spacing. The -0.3px is applied to essentially EVERY element on the real site — it is the single most identifying detail of the design. Do not drop it. */ --elx-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --elx-ls: -0.3px; /* Fluid scale, using the site's own 375px→1440px ramp */ --elx-h1: clamp(32px, calc(32px + 16 * ((100vw - 375px) / 1065)), 48px); --elx-h2: clamp(28px, calc(28px + 12 * ((100vw - 375px) / 1065)), 40px); --elx-h3: clamp(24px, calc(24px + 8 * ((100vw - 375px) / 1065)), 32px); --elx-h4: clamp(20px, calc(20px + 4 * ((100vw - 375px) / 1065)), 24px); --elx-body-lg: 18px; --elx-body: 16px; --elx-body-sm: 14px; --elx-caption: 12px; --elx-micro: 11px; --elx-w-light: 300; /* the site's "regular" is actually 300 */ --elx-w-normal: 400; --elx-w-medium: 500; --elx-w-semi: 600; /* all headings */ --elx-w-bold: 700; /* buttons only */ --elx-lh-tight: 1.1; --elx-lh-normal: 1.4; --elx-lh-loose: 1.6; /* --- Radii ----------------------------------------------------------- */ --elx-r-pill: 50px; /* pills / chips */ /* Buttons are 10px on the real site, NOT pills. Read off .header__buy-button and .header__discord-join: both radial-gradient, both 10px, both 12.5px/600. A 40px pill is the single fastest way to look off-brand. */ --elx-r-btn: 10px; --elx-r-card: 14px; /* cards / panels */ --elx-r-md: 10px; --elx-r-sm: 8px; /* light product cards */ --elx-r-xs: 6px; /* glass overlay buttons */ /* --- Spacing --------------------------------------------------------- */ --elx-s-1: 4px; --elx-s-2: 8px; --elx-s-3: 12px; --elx-s-4: 16px; --elx-s-5: 20px; --elx-s-6: 24px; --elx-s-8: 32px; --elx-s-10: 40px; --elx-s-15: 60px; /* the standard section padding-block */ --elx-page: 1200px; --elx-gutter: 24px; /* --- Shadows --------------------------------------------------------- THE signature effect. This exact 8-stop stack (6 drop + 2 inset) appears on 219 elements. The inset highlight top-left plus inset shade bottom-right is what makes surfaces read as physical glass. */ --elx-shadow-glass: 0 62px 17px rgba(0, 0, 0, 0), 0 40px 16px rgba(0, 0, 0, .02), 0 22px 13px rgba(0, 0, 0, .05), 0 10px 10px rgba(0, 0, 0, .10), 0 2px 5px rgba(0, 0, 0, .12), 14px 14px 20px rgba(0, 0, 0, .15), inset -3px -3px 4px rgba(255, 255, 255, .12), inset 4px 4px 4px rgba(0, 0, 0, .08); /* Same idea, tuned for light/white surfaces */ --elx-shadow-light: 0 40px 16px rgba(0, 0, 0, .05), 0 22px 13px rgba(0, 0, 0, .10), 0 10px 10px rgba(0, 0, 0, .15), 0 2px 5px rgba(0, 0, 0, .20), inset 0 1px 2px rgba(255, 255, 255, 1); /* THE card treatment on the live page (.card-3d): a vertical grey ramp with NO border and one deep soft shadow. A flat fill plus a #444 border — the obvious guess — is what makes a rebuild read as harsh grey boxes. */ --elx-card-fill: linear-gradient(#343434, #272727); /* Two soft layers rather than one heavy drop. The old single 40px/.8 shadow was tuned for cards floating over the marketing page's imagery; on the dashboard, where cards sit in rows on a flat background, it read as a dark smear under every panel. */ --elx-card-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 8px 24px rgba(0, 0, 0, .30); --elx-shadow-soft: 0 4px 12px rgba(0, 0, 0, .06); --elx-shadow-pop: 0 30px 80px -30px rgba(0, 0, 0, .70); --elx-glow-accent: 0 0 0 1px rgba(110, 228, 255, .35), 0 8px 30px -6px rgba(110, 228, 255, .45); /* --- GRADIENTS — the actual identity of this design ------------------ IMPORTANT: nothing on this site is a flat fill. Buttons are radial gradients and headings are clipped linear gradients. All of them share the same `114.65% 114.65% at 9.73% 17.27%` radial geometry so the highlight lands top-left, matching the inset shadow above. Verbatim values, read off the live site. For real components prefer components/*.css — these tokens are for NEW surfaces (forms, dashboards) that must match. */ /* Primary CTA — cyan into deep blue, NOT flat cyan */ --elx-grad-buy: radial-gradient(114.65% 114.65% at 9.73% 17.27%, #4addff 0%, #0065c9 100%); /* Discord CTA — violet into indigo, NOT flat #5865f2 */ --elx-grad-discord: radial-gradient(114.65% 114.65% at 9.73% 17.27%, #7b6cf6 0%, #5865f2 100%); /* Heading text gradients — used with background-clip:text. base = white fading upward to 60% accent = three-stop pale-blue → cyan */ --elx-grad-head: linear-gradient(0deg, #ffffff 29.8001%, rgba(255,255,255,.6) 100%); --elx-grad-head-accent: linear-gradient(0deg, #a4caeb 18.9682%, #6ab7ff 39.7663%, #00d0ff 58.6501%); /* The accent heading also carries these two — all three go together */ --elx-head-accent-stroke: .2px rgb(92, 182, 255); --elx-head-accent-shadow: 0 0 1px #0000, 0 0 10px #00aeff1c, 0 4px 2px #00000040; /* The 2px glossy rim on buttons, drawn with mask-composite */ --elx-grad-rim: linear-gradient(176.87deg, rgba(255,255,255,.5) 8.56%, rgba(255,255,255,0) 85.04%); /* Blue-tinted button shadow. The site tints shadows to the button's own hue rather than using black — this is why flat-black shadows look wrong. */ --elx-shadow-buy: 0 62px 17px rgba(26, 135, 202, 0), 0 40px 16px #1a7bca05, 0 22px 13px #1a4dca0d, 0 10px 10px #1a81ca1a, 0 2px 5px #1a89ca1f, 14px 14px 20px #1aa0ff33, inset -3px -3px 4px #93c5fd44, inset 4px 4px 4px #0c5e8a1a; /* --- Glass fill ------------------------------------------------------ The off-centre radial is deliberate: light appears to come from the top-left, which is why it pairs with the inset highlight above. */ --elx-glass: radial-gradient(114.65% 114.65% at 9.73% 17.27%, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .06) 100%); --elx-glass-light: linear-gradient(#ffffff 10%, rgba(255, 255, 255, .7) 100%); --elx-blur: blur(12px); /* --- Motion ---------------------------------------------------------- */ --elx-dur-fast: .16s; --elx-dur: .2s; --elx-dur-med: .3s; --elx-dur-slow: .7s; --elx-ease: ease-out; --elx-ease-soft: cubic-bezier(0, 0, .3, 1); /* The site's scroll-reveal, verbatim */ --elx-reveal: opacity .7s ease-out .15s, transform .7s ease-out .15s; /* --- Decorative backdrop --------------------------------------------- */ --elx-dot: rgba(255, 255, 255, .07); --elx-dot-size: 26px; }