/* =========================================================================== EloPortal — shared design system (dark / immersive) Loaded on every page alongside the Tailwind CDN + tailwind.config in . Brand: Void #000 / Carbon #0E0E12 · Portal Blue #0047FF · Solar Orange #FF5400 Type: Montserrat (display) · Inter (body) · IBM Plex Mono (data). 70/22/8 ratio. =========================================================================== */ :root{ --void:#000; --carbon:#0E0E12; --carbon-2:#16161d; --portal-blue:#0047FF; --electric-blue:#0033FF; --sky-blue:#0A84FF; --solar-orange:#FF5400; --amber:#FF8C00; --white:#fff; --grad-verified:linear-gradient(135deg,#0033FF 0%,#0A84FF 100%); --grad-spectrum:linear-gradient(115deg,#0A84FF 0%,#0047FF 32%,#3a2bd6 52%,#FF5400 84%,#FF8C00 100%); --ease-spring:cubic-bezier(.22,1,.36,1); } *{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } html,body{ background:#000; } body{ font-family:'Inter',sans-serif; color:#fff; overflow-x:hidden; } ::selection{ background:rgba(0,71,255,.40); color:#fff; } ::-webkit-scrollbar{ width:11px; } ::-webkit-scrollbar-track{ background:#060608; } ::-webkit-scrollbar-thumb{ background:#23232e; border-radius:20px; border:3px solid #060608; } ::-webkit-scrollbar-thumb:hover{ background:#33333f; } .font-display{ font-family:'Montserrat',sans-serif; } .font-mono{ font-family:'IBM Plex Mono',monospace; } /* ---- atmospheric layers ---- */ .grain::after{ content:''; position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .vignette::before{ content:''; position:fixed; inset:0; z-index:1; pointer-events:none; /* edge vignette: keep most of the viewport clear and push the darkening down to the very bottom edge so CTAs / lower content stay bright. Lowered from a 40%-clear / .55-black ramp to 64%-clear / .30-black. */ background:radial-gradient(135% 105% at 50% -18%, transparent 64%, rgba(0,0,0,.30) 100%); } .hgrid{ background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(closest-side at 50% 40%, #000 60%, transparent 100%); mask-image:radial-gradient(closest-side at 50% 40%, #000 60%, transparent 100%); } /* grid-pattern highlight squares (assets/grid-pattern.js) — opacity-only twinkle; each rect carries its own randomized animation-duration/-delay inline. */ .gp-sq{ opacity:0; animation:gpTwinkle 6s ease-in-out infinite; } @keyframes gpTwinkle{ 0%,100%{ opacity:0 } 50%{ opacity:1 } } /* portal swirl */ .portal-swirl{ background:conic-gradient(from 0deg, #0047FF, #0A84FF, #14122e, #FF5400, #FF8C00, #14122e, #0047FF); filter:blur(2px); animation:spin 26s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } @keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } } @keyframes floatcard{ 0%,100%{ transform:translate3d(0,0,0) rotate(-1.2deg) } 50%{ transform:translate3d(0,-16px,0) rotate(0.4deg) } } @keyframes pulseglow{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } } @keyframes marquee{ to{ transform:translateX(-50%) } } @keyframes rise{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } } /* reveal on scroll */ .reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-spring), transform .9s var(--ease-spring); } .reveal.in{ opacity:1; transform:none; } .reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s } .reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s } .reveal[data-d="5"]{ transition-delay:.40s } .reveal[data-d="6"]{ transition-delay:.48s } .hero-stagger > *{ opacity:0; animation:rise .95s var(--ease-spring) forwards; } .hero-stagger > *:nth-child(1){ animation-delay:.05s } .hero-stagger > *:nth-child(2){ animation-delay:.16s } .hero-stagger > *:nth-child(3){ animation-delay:.27s } .hero-stagger > *:nth-child(4){ animation-delay:.38s } .hero-stagger > *:nth-child(5){ animation-delay:.49s } .hero-stagger > *:nth-child(6){ animation-delay:.60s } /* type helpers */ .eyebrow{ font-family:'IBM Plex Mono',monospace; font-weight:500; text-transform:uppercase; letter-spacing:.34em; font-size:.72rem; color:var(--sky-blue); display:inline-flex; align-items:center; gap:.5rem; } .eyebrow .dot{ color:var(--solar-orange); } .eyebrow-orange{ color:var(--amber); } .display{ font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:-.018em; line-height:.96; } .accent-orange{ color:var(--solar-orange); } .accent-blue{ color:var(--sky-blue); } /* hero headline typewriter — cycles AUTHENTICATE / MINT / COLLECT. Word is white to keep the headline colourless (accents live on the CTAs); swap to var(--sky-blue) for the original brand-blue look. */ .tw-word{ color:#fff; } .tw-caret{ display:inline-block; width:.06em; height:.78em; margin-left:.04em; background:currentColor; vertical-align:-.04em; border-radius:1px; animation:twblink 1.05s steps(1,end) infinite; } @keyframes twblink{ 0%,55%{ opacity:1 } 55.01%,100%{ opacity:0 } } .grad-text{ background:var(--grad-spectrum); -webkit-background-clip:text; background-clip:text; color:transparent; } .grad-text-blue{ background:var(--grad-verified); -webkit-background-clip:text; background-clip:text; color:transparent; } .lead{ color:rgba(255,255,255,.62); line-height:1.7; } /* buttons */ .btn{ position:relative; display:inline-flex; align-items:center; gap:.5rem; font-family:'Montserrat',sans-serif; font-weight:700; font-size:.86rem; letter-spacing:.02em; text-transform:uppercase; padding:.95rem 1.6rem; border-radius:.7rem; transition:transform .35s var(--ease-spring), box-shadow .35s var(--ease-spring), background .35s ease, border-color .35s ease; will-change:transform; } .btn:focus-visible{ outline:2px solid var(--sky-blue); outline-offset:3px; } .btn-primary{ color:#fff; background:var(--grad-verified); box-shadow:0 10px 30px -8px rgba(0,71,255,.6), inset 0 1px 0 rgba(255,255,255,.25); } .btn-primary:hover{ transform:translateY(-3px); box-shadow:0 18px 44px -10px rgba(10,132,255,.75), inset 0 1px 0 rgba(255,255,255,.35); } .btn-primary:active{ transform:translateY(-1px) scale(.99); } .btn-ghost{ color:#fff; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.16); } .btn-ghost:hover{ transform:translateY(-3px); border-color:rgba(10,132,255,.7); background:rgba(10,132,255,.08); box-shadow:0 16px 40px -16px rgba(10,132,255,.5); } .btn-ghost:active{ transform:translateY(-1px) scale(.99); } /* solar-orange CTA (fans / early access) — dark text for contrast on the bright orange */ .btn-orange{ color:#170a00; background:linear-gradient(135deg,#FF5400 0%,#FF8C00 100%); box-shadow:0 10px 30px -8px rgba(255,84,0,.55), inset 0 1px 0 rgba(255,255,255,.3); } .btn-orange:hover{ transform:translateY(-3px); box-shadow:0 18px 46px -10px rgba(255,140,0,.72), inset 0 1px 0 rgba(255,255,255,.42); } .btn-orange:active{ transform:translateY(-1px) scale(.99); } /* surfaces */ .card{ position:relative; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); border:1px solid rgba(255,255,255,.08); border-radius:1.1rem; } .card-hover{ transition:transform .45s var(--ease-spring), border-color .45s ease, box-shadow .45s var(--ease-spring), background .45s ease; will-change:transform; } .card-hover:hover{ transform:translateY(-6px); border-color:rgba(10,132,255,.45); box-shadow:0 26px 60px -28px rgba(0,71,255,.55), 0 2px 0 rgba(255,255,255,.04) inset; } .gborder{ position:relative; } .gborder::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; background:var(--grad-spectrum); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; opacity:.85; } .chip{ display:inline-flex; align-items:center; gap:.5rem; font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.74); background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); border-radius:.55rem; padding:.5rem .8rem; } .glow-b{ box-shadow:0 0 0 1px rgba(0,71,255,.25), 0 24px 70px -30px rgba(0,71,255,.8); } .glow-o{ box-shadow:0 0 0 1px rgba(255,84,0,.28), 0 24px 70px -30px rgba(255,84,0,.7); } .badge-verified{ display:inline-flex; align-items:center; gap:.45rem; font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:#bcd4ff; background:rgba(0,71,255,.12); border:1px solid rgba(10,132,255,.45); border-radius:.4rem; padding:.34rem .6rem; } .badge-verified .pip{ width:7px; height:7px; border-radius:99px; background:var(--sky-blue); box-shadow:0 0 10px 1px var(--sky-blue); animation:pulseglow 2.2s ease-in-out infinite; } .portal-art{ background:var(--grad-spectrum); position:relative; overflow:hidden; } .portal-art::after{ content:''; position:absolute; inset:-30%; background:conic-gradient(from 200deg,transparent,rgba(0,0,0,.35),transparent 60%); mix-blend-mode:multiply; } /* ---- real photography w/ brand duotone treatment ---- */ .media{ position:relative; overflow:hidden; background:#06060a; isolation:isolate; } .media img,.media video{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.6) contrast(1.06) brightness(.78); transition:transform .9s var(--ease-spring), filter .6s ease; } .media::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(120deg, rgba(0,51,255,.55) 0%, rgba(8,8,14,.10) 48%, rgba(255,84,0,.46) 100%); mix-blend-mode:screen; } .media::after{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(125% 120% at 50% 0%, transparent 28%, rgba(0,0,0,.55) 100%), linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.10) 52%, rgba(0,0,0,.30) 100%); } .media-hover:hover img,.media-hover:hover video{ transform:scale(1.05); filter:saturate(.72) contrast(1.06) brightness(.86); } .media > .media-content{ position:relative; z-index:3; } /* nav */ .nav-shell{ transition:background .4s ease, border-color .4s ease, backdrop-filter .4s ease, box-shadow .4s ease; } .nav-scrolled{ background:rgba(8,8,11,.72); backdrop-filter:blur(16px); border-color:rgba(255,255,255,.08) !important; box-shadow:0 18px 40px -30px rgba(0,0,0,.9); } .navlink{ position:relative; font-size:.82rem; color:rgba(255,255,255,.72); transition:color .3s ease; text-shadow:0 1px 10px rgba(0,0,0,.45); } .navlink::after{ content:''; position:absolute; left:0; bottom:-6px; height:1.5px; width:0; background:var(--grad-verified); transition:width .35s var(--ease-spring); } .navlink:hover{ color:#fff; } .navlink:hover::after{ width:100%; } .navlink[aria-current="page"]{ color:#fff; } .navlink[aria-current="page"]::after{ width:100%; } .link-u{ color:rgba(255,255,255,.6); transition:color .25s ease; } .link-u:hover{ color:#fff; } .divider{ height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent); } section{ scroll-margin-top:96px; } .marquee-track{ display:flex; width:max-content; animation:marquee 32s linear infinite; } .marquee:hover .marquee-track{ animation-play-state:paused; } .step-line::before{ content:''; position:absolute; left:27px; top:54px; bottom:-26px; width:1px; background:linear-gradient(180deg,rgba(10,132,255,.6),rgba(255,255,255,.06)); } input.field, select.field, .dropdown-btn{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); color:#fff; border-radius:.7rem; padding:.95rem 1.1rem; font-family:'IBM Plex Mono',monospace; font-size:.85rem; transition:border-color .3s ease, box-shadow .3s ease; } input.field::placeholder{ color:rgba(255,255,255,.34); } input.field:focus, select.field:focus{ outline:none; border-color:var(--sky-blue); box-shadow:0 0 0 3px rgba(10,132,255,.18); } /* dark dropdown: custom chevron + dark OS option list; empty value reads like a placeholder */ select.field{ -webkit-appearance:none; appearance:none; color-scheme:dark; cursor:pointer; padding-right:2.6rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='rgba(255,255,255,.45)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; } select.field:has(option[value='']:checked){ color:rgba(255,255,255,.34); } /* custom brand dropdown (native