/* Landing page only (home.ejs) - kept separate from style.css (shared by the dashboard/verify/docs pages) so this file can be as opinionated and heavy as a marketing page wants to be without touching anything the rest of the app relies on. Reuses the color tokens from style.css (loaded first) so the two still feel like one product, not a bolted-on microsite. */ :root { --accent-2: #5eeadf; /* teal, already used for the plan-plus badge elsewhere in the app */ --accent-3: #eb459e; /* Discord's "fuchsia", used sparingly for a third gradient stop */ --hero-glow: rgba(88, 101, 242, 0.35); } /* Progressive enhancement: home.js adds this class immediately (a tiny inline script in , so it happens before first paint) - CSS below only hides .reveal elements when it's present, so a visitor with JavaScript off simply sees the finished page with no animation, never a page stuck permanently invisible waiting for an observer that will never fire. */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; } .js .reveal.in { opacity: 1; transform: none; } /* Stagger children of a .reveal-group one after another rather than all popping in at once. */ .reveal-group.in > * { transition-delay: calc(var(--i, 0) * 90ms); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body.landing { overflow-x: hidden; } /* the blurred hero blobs intentionally bleed past the viewport edge */ .landing-nav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 28px; background: rgba(30, 31, 36, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); transition: background 0.2s ease, box-shadow 0.2s ease; } .landing-nav.scrolled { background: rgba(24, 25, 29, 0.88); box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.6); } .landing-nav .brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 19px; letter-spacing: -0.01em; } .landing-nav .brand-mark { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; } .landing-nav .brand span { color: var(--accent); } /* Nav links were previously plain inherited styling (blurple text, underline on hover) with no rules of their own actually matching the markup - this gives them real typography plus a small animated underline and hover pill so the nav reads as a designed control, not body text that happens to sit in a header. */ .landing-nav .nav-links { display: flex; align-items: center; gap: 2px; } .landing-nav .nav-links a { position: relative; display: inline-block; color: var(--text-dim); font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 8px; transition: color 0.18s ease, background 0.18s ease; } .landing-nav .nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); text-decoration: none; } .landing-nav .nav-links a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; } .landing-nav .nav-links a:hover::after { transform: scaleX(1); } .landing-nav .nav-actions { display: flex; align-items: center; gap: 10px; } @media (max-width: 780px) { .landing-nav .nav-links { display: none; } } @media (max-width: 480px) { .landing-nav .btn.ghost { display: none; } } .landing-nav .btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--text); } .landing-nav .btn.ghost:hover { border-color: var(--accent); text-decoration: none; } .btn.gradient { background: linear-gradient(135deg, var(--accent), #7c3aed); color: #fff; box-shadow: 0 8px 20px -8px rgba(88, 101, 242, 0.7); } .btn.gradient:hover { background: linear-gradient(135deg, var(--accent-hover), #6d28d9); text-decoration: none; } .btn.lg { padding: 14px 26px; font-size: 15px; border-radius: 10px; } /* --------------------------------------------------------------------------------------------- Hero --------------------------------------------------------------------------------------------- */ .hero { position: relative; padding: 52px 24px 60px; overflow: hidden; text-align: center; } .hero-glow { position: absolute; inset: -20% -10% auto -10%; height: 720px; pointer-events: none; z-index: 0; background: radial-gradient(480px 380px at 18% 30%, var(--hero-glow), transparent 70%), radial-gradient(420px 340px at 82% 20%, rgba(94, 234, 212, 0.22), transparent 70%), radial-gradient(380px 320px at 55% 60%, rgba(235, 69, 158, 0.16), transparent 70%); filter: blur(10px); animation: heroDrift 22s ease-in-out infinite alternate; } @keyframes heroDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(2%, 3%, 0) scale(1.08); } } @media (prefers-reduced-motion: reduce) { .hero-glow, .float, .demo-frame, .reveal { animation: none !important; transition: none !important; } } .hero-content { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; background: rgba(88, 101, 242, 0.12); border: 1px solid rgba(88, 101, 242, 0.35); color: #b3bbff; font-size: 13px; font-weight: 600; margin-bottom: 24px; } .hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px rgba(87, 242, 135, 0.2); } .hero h1 { font-size: clamp(34px, 5.4vw, 58px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 20px; font-weight: 800; } .hero h1 .grad { background: linear-gradient(120deg, #b3bbff, var(--accent-2) 60%, var(--accent-3)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub { font-size: 18px; line-height: 1.6; color: var(--text-dim); max-width: 620px; margin: 0 auto 34px; } .hero-cta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .hero-note { font-size: 13px; color: var(--text-dim); } .hero-note code { background: var(--bg-elevated-2); padding: 2px 6px; border-radius: 5px; } /* --------------------------------------------------------------------------------------------- Live demo mockup - a fake browser window that cycles through the real verification flow's states on its own (see home.js), so a visitor gets a feel for the product in five seconds without needing to actually join a Discord server first. --------------------------------------------------------------------------------------------- */ .demo-wrap { position: relative; z-index: 1; max-width: 620px; margin: 44px auto 0; } .browser-mock { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.02); } .browser-chrome { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--bg-elevated-2); border-bottom: 1px solid var(--border); } .browser-dot { width: 10px; height: 10px; border-radius: 50%; } .browser-dot:nth-child(1) { background: #ed6a5e; } .browser-dot:nth-child(2) { background: #f4bf4f; } .browser-dot:nth-child(3) { background: #61c454; } .browser-chrome .browser-url { margin-left: 10px; flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 5px 12px; font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; } .browser-url svg { width: 11px; height: 11px; flex-shrink: 0; color: var(--good); } .demo-viewport { position: relative; /* Tall enough for the 4-platform frames (Discord/Steam/Twitch/Riot Games) added once Riot Games joined the demo sequence - was 232px when frames only ever showed 3 platform rows. */ height: 274px; } .demo-frame { position: absolute; inset: 0; padding: 22px 24px; opacity: 0; transform: translateY(6px); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; } .demo-frame.active { opacity: 1; transform: none; pointer-events: auto; } .demo-frame h3 { font-size: 15px; margin: 0 0 4px; } .demo-frame p.d-muted { color: var(--text-dim); font-size: 13px; margin: 0 0 16px; } .demo-step { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .demo-step:last-child { border-bottom: none; } .demo-step .plat { display: flex; align-items: center; gap: 10px; } .demo-step img { width: 18px; height: 18px; } .demo-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; } .demo-badge.ok { background: rgba(87, 242, 135, 0.15); color: var(--good); } .demo-badge.pending { background: rgba(255, 255, 255, 0.08); color: var(--text-dim); } .demo-badge.wait { background: rgba(254, 231, 92, 0.15); color: var(--warn); } .demo-result { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; } .demo-result .demo-check { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(87, 242, 135, 0.14); color: var(--good); font-size: 26px; } .demo-result h3 { margin: 4px 0 0; } .demo-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; } .demo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); border: none; cursor: pointer; padding: 0; } .demo-dot.active { background: var(--accent); width: 22px; border-radius: 4px; transition: width 0.25s ease, background 0.25s ease; } /* --------------------------------------------------------------------------------------------- Shared section scaffolding --------------------------------------------------------------------------------------------- */ .section { max-width: 1080px; margin: 0 auto; padding: 88px 24px; } .section-head { text-align: center; max-width: 640px; margin: 0 auto 52px; } .eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 12px; } .section-head h2 { font-size: clamp(24px, 3.2vw, 34px); margin: 0 0 14px; letter-spacing: -0.01em; } .section-head p { color: var(--text-dim); font-size: 16px; line-height: 1.6; margin: 0; } .section-alt { background: var(--bg-elevated); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* --------------------------------------------------------------------------------------------- How it works --------------------------------------------------------------------------------------------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; } @media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } } .step-card { position: relative; padding: 0 6px; } .step-num { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg, rgba(88,101,242,0.22), rgba(94,234,212,0.14)); border: 1px solid rgba(88,101,242,0.35); color: #b3bbff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; margin-bottom: 16px; } .step-card h3 { font-size: 16px; margin: 0 0 8px; } .step-card p { font-size: 14px; color: var(--text-dim); line-height: 1.55; margin: 0; } /* --------------------------------------------------------------------------------------------- Feature grid --------------------------------------------------------------------------------------------- */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .feature-grid { grid-template-columns: 1fr; } } .feature-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; padding: 24px; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .feature-card:hover { transform: translateY(-3px); border-color: rgba(88, 101, 242, 0.4); box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.5); } .feature-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; background: rgba(88, 101, 242, 0.12); color: var(--accent-2); } .feature-icon svg { width: 22px; height: 22px; } .feature-icon img { width: 22px; height: 22px; } .feature-card h3 { font-size: 16px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; } .feature-card p { font-size: 14px; color: var(--text-dim); line-height: 1.55; margin: 0; } /* Small inline label for a feature that's announced but not usable yet - e.g. Riot Games checks, waiting on Riot's own RSO production approval (a manual, non-self-service process on their end). Not a warning/error color, just a neutral "not yet" marker. */ .badge-soon { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 999px; background: var(--surface-2, rgba(255,255,255,0.08)); color: var(--text-dim); white-space: nowrap; } /* --------------------------------------------------------------------------------------------- Rule engine callout - echoes the real rule-builder's tree/indent styling from style.css so it reads as an honest preview of the actual settings UI, not a generic marketing graphic. --------------------------------------------------------------------------------------------- */ .rule-demo { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; padding: 26px 28px; font-size: 14px; } .rule-demo .rop { display: inline-block; font-weight: 700; font-size: 11px; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 6px; margin-bottom: 10px; } .rule-demo .rop.and { background: rgba(88,101,242,0.16); color: #b3bbff; } .rule-demo .rop.or { background: rgba(94,234,212,0.16); color: var(--accent-2); } .rule-demo .rleaf { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--text-dim); } .rule-demo .rleaf img { width: 16px; height: 16px; } .rule-demo .rindent { margin-left: 10px; padding-left: 18px; border-left: 2px solid rgba(255,255,255,0.08); } /* --------------------------------------------------------------------------------------------- Plans --------------------------------------------------------------------------------------------- */ .plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 760px; margin: 0 auto; } @media (max-width: 680px) { .plans { grid-template-columns: 1fr; } } .plan-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; padding: 30px; display: flex; flex-direction: column; } .plan-card.highlight { border-color: rgba(94, 234, 212, 0.4); background: linear-gradient(180deg, rgba(94,234,212,0.06), var(--bg-elevated) 40%); } .plan-card .plan-name { font-size: 14px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .plan-card .plan-price { font-size: 30px; font-weight: 800; margin-bottom: 18px; } .plan-card .plan-price small { font-size: 13px; font-weight: 500; color: var(--text-dim); } .plan-card ul { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; } .plan-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-dim); padding: 7px 0; } .plan-card li svg { width: 16px; height: 16px; margin-top: 2px; color: var(--good); flex-shrink: 0; } .plan-card li.locked svg { color: var(--text-dim); } /* --------------------------------------------------------------------------------------------- Final CTA band --------------------------------------------------------------------------------------------- */ .cta-band { position: relative; overflow: hidden; text-align: center; padding: 80px 24px; border-radius: 24px; max-width: 1000px; margin: 0 auto 100px; background: linear-gradient(135deg, rgba(88,101,242,0.16), rgba(94,234,212,0.08)); border: 1px solid rgba(88,101,242,0.3); } .cta-band h2 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 14px; } .cta-band p { color: var(--text-dim); margin: 0 0 28px; font-size: 16px; } .landing-footer { border-top: 1px solid var(--border); padding: 40px 24px 60px; text-align: center; color: var(--text-dim); font-size: 13px; } .landing-footer .brand { font-weight: 700; color: var(--text); margin-bottom: 10px; display: inline-flex; align-items: center; gap: 8px; } .landing-footer .brand span { color: var(--accent); } .landing-footer .brand-mark { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; } .landing-footer a { color: var(--text-dim); } .landing-footer a:hover { color: var(--text); } .landing-footer .foot-links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 14px 0; }