@import url('./theme.css'); /* ExoDeus — public landing page. Shares the game's tokens, fonts and nebula palette (theme.css); adds the scrolling marketing layout the dashboard CSS doesn't provide. */ html { scroll-behavior: smooth; } body { min-height: 100%; overflow-x: hidden; /* theme.css already paints the two nebula glows + base colour on . Keep those and let the page scroll (the app forces overflow:hidden). */ } /* A faint, fixed star field drifting behind everything — same cold palette as the in-game spacemap. Two layered dot grids at different scales. */ .starfield { position: fixed; inset: -20%; z-index: -1; pointer-events: none; background-image: radial-gradient(1.5px 1.5px at 20% 30%, rgba(219, 228, 255, 0.9), transparent 60%), radial-gradient(1.5px 1.5px at 75% 20%, rgba(219, 228, 255, 0.6), transparent 60%), radial-gradient(1px 1px at 40% 70%, rgba(53, 224, 255, 0.7), transparent 60%), radial-gradient(1.5px 1.5px at 88% 62%, rgba(219, 228, 255, 0.7), transparent 60%), radial-gradient(1px 1px at 12% 85%, rgba(124, 92, 255, 0.7), transparent 60%), radial-gradient(1.5px 1.5px at 60% 90%, rgba(219, 228, 255, 0.5), transparent 60%), radial-gradient(1px 1px at 55% 45%, rgba(219, 228, 255, 0.5), transparent 60%), radial-gradient(1px 1px at 30% 55%, rgba(53, 224, 255, 0.5), transparent 60%); background-repeat: repeat; background-size: 520px 520px, 520px 520px, 340px 340px, 340px 340px, 260px 260px, 260px 260px, 180px 180px, 180px 180px; animation: drift 120s linear infinite; opacity: 0.8; } @keyframes drift { to { transform: translate3d(0, -520px, 0); } } @media (prefers-reduced-motion: reduce) { .starfield { animation: none; } } /* ---------- Shared shell ---------- */ .wrap { width: min(1120px, 100% - 40px); margin-inline: auto; } /* Brand mark: the full ExoDeus ring logo (replaces the flat gradient chip). */ .brand__logo { width: 26px; height: 26px; border-radius: 6px; box-shadow: 0 0 18px rgba(53, 224, 255, 0.6); display: block; } a { color: inherit; } .cta { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 700; letter-spacing: 0.4px; padding: 13px 22px; border-radius: 12px; cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; } .cta--primary { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #05060d; box-shadow: 0 8px 30px rgba(53, 224, 255, 0.28); } .cta--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(53, 224, 255, 0.4); } .cta--ghost { background: rgba(255, 255, 255, 0.04); border-color: var(--panel-brd); color: var(--ink); } .cta--ghost:hover { transform: translateY(-2px); background: rgba(53, 224, 255, 0.1); } /* ---------- Top nav ---------- */ .nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 14px 0; backdrop-filter: blur(10px); background: linear-gradient(180deg, rgba(5, 6, 13, 0.75), rgba(5, 6, 13, 0)); border-bottom: 1px solid rgba(120, 160, 255, 0.08); } .nav__inner { display: flex; align-items: center; justify-content: space-between; width: min(1120px, 100% - 40px); margin-inline: auto; } .nav__links { display: flex; align-items: center; gap: 22px; } .nav__links a { color: var(--ink-dim); text-decoration: none; font-size: 16px; letter-spacing: 0.5px; } .nav__links a:hover { color: var(--ink); } .nav__links .cta { padding: 9px 18px; } /* Higher specificity than `.nav__links a` so the primary CTA keeps black text. */ .nav__links .cta--primary, .nav__links .cta--primary:hover { color: #05060d; } @media (max-width: 720px) { .nav__link { display: none; } } /* ---------- Hero ---------- */ .hero { text-align: center; padding: 88px 0 72px; } .hero__badge { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; letter-spacing: 2px; color: var(--accent); padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(53, 224, 255, 0.3); background: rgba(53, 224, 255, 0.06); margin-bottom: 26px; } .hero h1 { font-family: "Orbitron", sans-serif; font-size: clamp(34px, 6vw, 64px); line-height: 1.04; margin: 0 auto 20px; max-width: 14ch; letter-spacing: 1px; background: linear-gradient(180deg, #ffffff, #9fb2ff 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__sub { color: var(--ink-dim); font-size: clamp(17px, 2.2vw, 21px); max-width: 60ch; margin: 0 auto 34px; line-height: 1.55; } .hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .hero__meta { margin-top: 30px; display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; color: var(--ink-dim); font-size: 15px; letter-spacing: 0.5px; } .hero__meta b { color: var(--ink); } /* ---------- Feature sections ---------- */ .features { padding: 40px 0 20px; display: flex; flex-direction: column; gap: 26px; } .feature { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 34px; align-items: center; background: var(--panel); border: 1px solid var(--panel-brd); border-radius: 20px; padding: 40px; backdrop-filter: blur(10px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); } .feature:nth-child(even) .feature__art { order: -1; } .feature__tag { font-size: 13px; letter-spacing: 2px; color: var(--accent); font-family: "Orbitron", sans-serif; } .feature h2 { font-size: clamp(24px, 3vw, 32px); margin: 12px 0 14px; letter-spacing: 0.5px; } .feature p { color: var(--ink-dim); font-size: 18px; line-height: 1.6; margin: 0; } .feature__list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; } .feature__list li { display: flex; gap: 10px; color: var(--ink); font-size: 16px; } .feature__list li::before { content: "◈"; color: var(--accent); } /* Holographic art panel drawn purely in CSS. */ .feature__art { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; border: 1px solid var(--panel-brd); background: radial-gradient(420px 300px at 30% 20%, rgba(124, 92, 255, 0.28), transparent 60%), radial-gradient(360px 300px at 80% 90%, rgba(53, 224, 255, 0.22), transparent 60%), rgba(8, 10, 22, 0.6); overflow: hidden; display: grid; place-items: center; } .feature__art::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(120, 160, 255, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 160, 255, 0.09) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 85%); } .feature__glyph { position: relative; font-size: clamp(64px, 12vw, 104px); filter: drop-shadow(0 0 24px rgba(53, 224, 255, 0.5)); } @media (max-width: 760px) { .feature { grid-template-columns: 1fr; padding: 28px; gap: 22px; } .feature:nth-child(even) .feature__art { order: 0; } } /* ---------- FAQ ---------- */ .faq { padding: 72px 0 40px; } .section-head { text-align: center; margin-bottom: 34px; } .section-head h2 { font-size: clamp(26px, 4vw, 40px); margin: 0 0 10px; letter-spacing: 1px; } .section-head p { color: var(--ink-dim); font-size: 18px; margin: 0; } .faq__list { display: grid; gap: 12px; max-width: 820px; margin-inline: auto; } .faq__item { background: var(--panel); border: 1px solid var(--panel-brd); border-radius: 14px; padding: 4px 20px; backdrop-filter: blur(8px); } .faq__item summary { cursor: pointer; list-style: none; padding: 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-family: "Orbitron", sans-serif; font-size: 18px; letter-spacing: 0.4px; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; color: var(--accent); font-size: 24px; line-height: 1; transition: transform 0.18s ease; } .faq__item[open] summary::after { transform: rotate(45deg); } .faq__item p { color: var(--ink-dim); font-size: 17px; line-height: 1.6; margin: 0 0 18px; } /* ---------- Final CTA ---------- */ .finale { text-align: center; padding: 60px 40px; margin: 40px auto; border-radius: 22px; border: 1px solid var(--panel-brd); background: radial-gradient(600px 300px at 50% 0%, rgba(124, 92, 255, 0.22), transparent 70%), var(--panel); backdrop-filter: blur(10px); } .finale h2 { font-size: clamp(26px, 4vw, 40px); margin: 0 0 14px; letter-spacing: 1px; } .finale p { color: var(--ink-dim); font-size: 18px; margin: 0 0 26px; } /* ---------- Footer ---------- */ .footer { border-top: 1px solid rgba(120, 160, 255, 0.1); padding: 34px 0 44px; margin-top: 20px; } .footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .footer__links { display: flex; gap: 22px; flex-wrap: wrap; } .footer__links a { color: var(--ink-dim); text-decoration: none; font-size: 15px; letter-spacing: 0.5px; } .footer__links a:hover { color: var(--accent); } .footer__copy { color: var(--ink-dim); font-size: 14px; }