/* ============================================================ 8-0-0 — site design system (home + legal pages) Tokens lifted from Figma: node 4007-318 (home), 4015-637 (sticky) ============================================================ */ :root { --bg: #081808; /* page behind the fold (very dark forest) */ --fold: #0f2010; /* hero tint */ --card: #0e2110; /* dark surfaces (drawer, modal, table head) */ --card-green: #185028; /* how-to + challenge content cards (medium green) */ --green: #4e9f3d; /* primary action (hero button) */ --green-2: #3f8838; /* borders / accents */ --ink: #191a19; /* text on bright green */ --text: #ecffb8; /* headings / hero (light yellow-green) */ --text-2: #bdcc93; /* body copy (muted green) */ --muted: #8a9b6a; /* hints, footer */ --on-card: #0e2310; /* dark text on green cards */ --on-card-2: #234021; /* muted dark text on green cards */ --on-glass: #e3f5b1; /* light text on translucent glass cards */ --mag: #d14fbb; /* magenta — primary CTA + accents (Figma highlight) */ --mag-2: #e85fd0; --card-glass: rgba(30, 81, 40, 0.4); /* translucent how-to + challenge cards */ --badge: rgba(78, 159, 61, 0.6); /* number badge fill */ --page-top: #313331; /* whole-page gradient — top */ --grid-a: #142c14; /* hero pitch stripes */ --grid-b: #20381c; --line: rgba(3, 31, 0, 0.2); --f-display: "Archivo Black", "Archivo", system-ui, sans-serif; --f-head: "Archivo", system-ui, sans-serif; --f-body: "Manrope", system-ui, sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, monospace; --header-h: 56px; /* sticky bar height (Figma) */ --col: 438px; /* mobile-first content column */ --frame: 1440px; /* desktop frame width (header spans this) */ --ease: cubic-bezier(0.22, 1, 0.36, 1); } * { box-sizing: border-box; } /* overflow-x on (not ) so the viewport stays the scroll container and position:sticky pins to the top correctly. The solid base colour also stops the body's gradient from propagating oddly to the canvas. */ html { scroll-behavior: smooth; overflow-x: hidden; background: #000; } body { margin: 0; /* whole-page gradient (Figma): dark charcoal at the top fading to black */ background: linear-gradient(180deg, var(--page-top) 0%, #000000 100%) no-repeat; min-height: 100vh; color: var(--text); font-family: var(--f-body); line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: inherit; } img { display: block; } /* content is a centered mobile-width column */ .wrap { width: 100%; max-width: var(--col); margin: 0 auto; padding: 0 24px; } /* page sections sit on a consistent 48px vertical rhythm (matches Figma) */ #top { display: flex; flex-direction: column; gap: 48px; } /* ============================================================ Sticky header ============================================================ */ .site-header { position: sticky; top: 0; z-index: 40; height: var(--header-h); transition: background-color 0.35s var(--ease), backdrop-filter 0.35s var(--ease), box-shadow 0.35s var(--ease); } .site-header .wrap { height: 100%; display: flex; align-items: center; gap: 12px; } .site-header.scrolled { background: rgba(0, 13, 7, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(76, 154, 21, 0.14); } /* wordmark that slides in on scroll */ .hd-wordmark { flex: 1 1 auto; min-width: 0; font-family: var(--f-head); font-weight: 900; font-size: 28px; letter-spacing: -0.5px; color: var(--text); text-decoration: none; white-space: nowrap; opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); } .site-header.show-wordmark .hd-wordmark { opacity: 1; transform: none; } /* push the right-hand group to the edge until the wordmark appears */ .hd-spacer { flex: 1 1 auto; } .site-header.show-wordmark .hd-spacer { display: none; } .hd-right { display: flex; align-items: center; gap: 8px; flex: none; } /* compact "Play now" pill that fades into the header */ .hd-cta { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; border-radius: 12px; background: var(--mag); border: none; color: var(--text); font-family: var(--f-head); font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; opacity: 0; transform: translateY(8px) scale(0.96); pointer-events: none; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), filter 0.18s var(--ease); } .site-header.show-cta .hd-cta { opacity: 1; transform: none; pointer-events: auto; } .hd-cta:hover { filter: brightness(1.07); } /* hamburger */ .hamburger { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text); cursor: pointer; border-radius: 10px; -webkit-tap-highlight-color: transparent; } .hamburger:hover { background: rgba(230, 230, 230, 0.08); } .hamburger svg { width: 24px; height: 24px; display: block; } /* ============================================================ Drawer ============================================================ */ .drawer-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0, 5, 2, 0.6); opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease); } .drawer-overlay.open { opacity: 1; visibility: visible; } .drawer { position: fixed; top: 0; right: 0; z-index: 61; height: 100dvh; width: min(82vw, 320px); background: var(--card); border-left: 1px solid rgba(76, 154, 21, 0.16); transform: translateX(100%); transition: transform 0.4s var(--ease); display: flex; flex-direction: column; padding: 20px; } .drawer.open { transform: none; } .drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .drawer-brand { font-family: var(--f-head); font-weight: 900; font-size: 22px; color: var(--text); text-decoration: none; } .drawer-close { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--text); cursor: pointer; border-radius: 10px; font-size: 22px; line-height: 1; } .drawer-close:hover { background: rgba(230, 230, 230, 0.08); } .drawer-nav { display: flex; flex-direction: column; gap: 2px; } .drawer-nav a { font-family: var(--f-head); font-weight: 600; font-size: 17px; color: var(--text); text-decoration: none; padding: 12px 12px; border-radius: 10px; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); } .drawer-nav a:hover { background: rgba(76, 154, 21, 0.12); } .drawer-nav a.is-current { color: var(--green); } .drawer-cta { margin: 4px 0 14px; text-align: center; background: var(--mag); border: none; color: var(--text) !important; font-family: var(--f-head); font-weight: 700; } .drawer-cta:hover { filter: brightness(1.07); background: var(--mag) !important; } .drawer-divider { height: 1px; background: rgba(76, 154, 21, 0.16); margin: 10px 4px; } .drawer-foot { margin-top: auto; font-family: var(--f-body); font-size: 11px; color: var(--muted); padding: 12px; } /* ============================================================ Hero / top fold ============================================================ */ .hero { position: relative; /* pull up under the sticky header so the fold owns the top of the page */ margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h); min-height: 100svh; display: flex; flex-direction: column; align-items: center; text-align: center; } .hero-bg { position: absolute; inset: 0; z-index: 0; border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; overflow: hidden; background-color: rgba(3, 31, 0, 0.4); background-image: repeating-linear-gradient(90deg, rgba(16, 85, 6, 0.10) 0 78px, rgba(76, 154, 21, 0.10) 78px 156px), repeating-linear-gradient(0deg, rgba(16, 85, 6, 0.08) 0 91px, rgba(76, 154, 21, 0.08) 91px 182px); } .hero .wrap { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding-top: 24px; padding-bottom: 40px; gap: 28px; } .hero-title { font-family: var(--f-display); font-weight: 400; color: var(--text); font-size: clamp(76px, 30vw, 120px); line-height: 1.0; letter-spacing: -2px; margin: 0; } .hero-sub { font-family: var(--f-body); font-weight: 500; color: var(--text-2); font-size: 18px; margin: 14px 0 0; max-width: 320px; } .hero-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; } .hint { font-family: var(--f-body); font-size: 12px; color: var(--muted); margin: 0; } /* shared big primary button — magenta (Figma "Build your XI"). Base keeps 24px/700 so the draft page's reuse is unchanged; the home hero/repeat CTAs override to the Figma's 20px/600 below. */ .btn-start { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 32px; border-radius: 16px; background: var(--mag); border: none; color: var(--text); font-family: var(--f-head); font-weight: 700; font-size: 24px; text-decoration: none; cursor: pointer; transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease), filter 0.18s var(--ease); box-shadow: 0 8px 24px rgba(209, 79, 187, 0.28); } .btn-start:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(209, 79, 187, 0.38); filter: brightness(1.05); } .btn-start:active { transform: translateY(0); } .hero .btn-start { font-size: 20px; font-weight: 600; } /* stats */ .stats { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 342px; } .stats-row { display: flex; gap: 8px; } .stat { flex: 1; display: flex; flex-direction: column; align-items: center; } .stat .num { font-family: var(--f-display); font-size: 24px; line-height: 32px; color: var(--text); } .stat .lbl { font-family: var(--f-body); font-weight: 500; font-size: 14px; color: var(--muted); } /* ============================================================ Sections (How to play / Popular challenges) ============================================================ */ /* scroll-margin so drawer links (#how-to-play / #challenges) land below the sticky header instead of being tucked under it */ .section { padding: 0; scroll-margin-top: calc(var(--header-h) + 24px); } .section-title { font-family: var(--f-head); font-weight: 700; font-size: 24px; line-height: 31px; color: var(--text); margin: 0 0 16px; } /* how to play card — translucent glass so the page gradient shows through */ .howto { background: var(--card-glass); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 32px; } .faq { display: flex; flex-direction: column; gap: 4px; } .faq-title { display: flex; align-items: center; gap: 8px; } .faq-no { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 200px; background: var(--badge); border: none; font-family: var(--f-head); font-weight: 600; font-size: 16px; color: var(--text); } .faq-name { font-family: var(--f-head); font-weight: 600; font-size: 18px; color: var(--on-glass); } .faq-desc { font-family: var(--f-body); font-size: 14px; color: var(--on-glass); margin: 0; } /* popular challenges — same translucent glass treatment as the how-to card */ .challenges { display: flex; flex-direction: column; gap: 16px; } .challenge { display: flex; align-items: center; gap: 16px; background: var(--card-glass); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: 16px; padding: 16px 24px; text-align: left; text-decoration: none; transition: background-color 0.2s var(--ease), transform 0.15s var(--ease); } .challenge:hover { background: rgba(46, 110, 58, 0.55); transform: translateX(2px); } .challenge-no { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 200px; background: var(--badge); font-family: var(--f-head); font-weight: 600; font-size: 16px; color: var(--text); } .challenge-text { font-family: var(--f-head); font-weight: 600; font-size: 18px; line-height: 24px; color: var(--on-glass); } /* ============================================================ Repeat CTA (under the fold) ============================================================ */ .repeat-cta { padding: 0; } .repeat-cta .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; padding-left: 40px; padding-right: 40px; } .repeat-cta .hero-title { font-size: clamp(52px, 17vw, 64px); } .repeat-cta .hero-sub { margin-top: 10px; } .repeat-cta .btn-start { border-radius: 12px; font-size: 20px; font-weight: 600; } /* ============================================================ Footer ============================================================ */ .site-footer { padding: 56px 0 120px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } /* the footer's blocks live inside .wrap, so the gap must sit here */ .site-footer .wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; } .footer-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .foot-pill { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--mag); color: var(--mag); font-family: var(--f-body); font-weight: 700; font-size: 12px; padding: 8px 16px; border-radius: 8px; cursor: pointer; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); } .foot-pill:hover { background: rgba(207, 76, 187, 0.12); color: var(--mag-2); } .foot-pill.is-disabled { opacity: 0.2; cursor: not-allowed; pointer-events: none; } /* home + legal: solid green footer buttons (Figma). The draft page (body.game) keeps the magenta outline above so it stays on-theme. */ body:not(.game) .foot-pill { background: var(--green); border-color: var(--green); color: var(--text); font-size: 14px; } body:not(.game) .foot-pill:hover { background: #59ad46; color: var(--text); } .footer-meta { display: flex; flex-direction: column; gap: 4px; } .footer-meta p { margin: 0; font-family: var(--f-body); font-size: 10px; color: var(--muted); } .footer-meta a { color: var(--muted); } .footer-fine { font-family: var(--f-body); font-size: 10px; color: var(--muted); margin: 0; max-width: 100%; } /* ============================================================ Legal pages ============================================================ */ .legal { padding: 24px 0 96px; } .legal-back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-head); font-weight: 600; font-size: 14px; color: var(--muted); text-decoration: none; margin-bottom: 20px; } .legal-back:hover { color: var(--mag); } .legal h1 { font-family: var(--f-display); font-size: clamp(34px, 11vw, 44px); line-height: 1.05; color: var(--text); margin: 0 0 6px; } .legal .updated { font-family: var(--f-body); font-size: 13px; color: var(--muted); margin: 0 0 28px; } .legal h2 { font-family: var(--f-head); font-weight: 700; font-size: 20px; color: var(--text); margin: 32px 0 10px; } .legal h3 { font-family: var(--f-head); font-weight: 600; font-size: 16px; color: var(--text); margin: 22px 0 8px; } .legal p, .legal li { font-family: var(--f-body); font-size: 15px; color: var(--text-2); line-height: 1.65; } .legal ul { padding-left: 20px; margin: 8px 0; } .legal li { margin-bottom: 8px; } .legal a { color: var(--mag); text-underline-offset: 2px; } .legal a:hover { color: var(--mag-2); } .legal strong { color: var(--text); font-weight: 600; } .legal table { width: 100%; border-collapse: collapse; margin: 14px 0; font-family: var(--f-body); font-size: 13px; } .legal th, .legal td { border: 1px solid rgba(76, 154, 21, 0.18); padding: 10px 12px; text-align: left; vertical-align: top; color: var(--text-2); } .legal th { background: var(--card); color: var(--text); font-weight: 600; } /* ============================================================ Bug report modal (shared with report.js) ============================================================ */ .report-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(0, 5, 2, 0.72); display: flex; align-items: center; justify-content: center; padding: 18px; } .report-overlay[hidden] { display: none; } .report-panel { width: 100%; max-width: 420px; background: var(--card); border: 1px solid rgba(76, 154, 21, 0.22); border-radius: 16px; padding: 18px; font-family: var(--f-body); } .report-h { font-family: var(--f-head); font-weight: 700; font-size: 18px; color: var(--text); } .report-sub { font-size: 13px; color: var(--muted); margin: 4px 0 12px; } .report-shot { width: 100%; max-height: 200px; object-fit: cover; object-position: top; border-radius: 10px; border: 1px solid rgba(76, 154, 21, 0.18); margin-bottom: 12px; } .report-text { width: 100%; background: var(--bg); color: var(--text); border: 1px solid rgba(76, 154, 21, 0.22); border-radius: 10px; padding: 10px; font: inherit; font-size: 14px; resize: vertical; } .report-actions { display: flex; gap: 10px; margin-top: 12px; } .report-actions button { flex: 1; padding: 12px; border-radius: 10px; font-weight: 700; cursor: pointer; font-size: 14px; font-family: var(--f-head); } .report-cancel { background: transparent; border: 1px solid rgba(76, 154, 21, 0.3); color: var(--text); } .report-send { background: var(--green); border: 2px solid var(--green-2); color: var(--ink); } .report-status { font-size: 12px; color: var(--muted); margin-top: 10px; min-height: 16px; } /* ============================================================ Desktop / responsive — frame up to 1440px ============================================================ */ @media (min-width: 600px) { /* header spans the full frame so the menu sits in the top-right corner, not stranded mid-screen */ .site-header .wrap { max-width: var(--frame); padding: 0 40px; } } @media (min-width: 1024px) { :root { --col: 720px; } /* widen the content column on desktop */ .challenges { display: grid; grid-template-columns: 1fr 1fr; align-items: start; } /* bump text up for desktop legibility — mobile px values are the baseline */ .hero-sub { font-size: 22px; max-width: 440px; } .stat .num { font-size: 30px; } .stat .lbl { font-size: 16px; } .hint { font-size: 14px; } .section-title { font-size: 32px; } .faq-name { font-size: 20px; } .faq-desc { font-size: 16px; } .challenge-text { font-size: 18px; } .repeat-cta .hero-title { font-size: 80px; } .repeat-cta .hero-sub { font-size: 18px; } .foot-pill { font-size: 14px; } .footer-meta p, .footer-fine { font-size: 12px; } .legal p, .legal li { font-size: 17px; } .legal h2 { font-size: 24px; } .legal h3 { font-size: 18px; } } /* ============================================================ Reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: 0.01ms !important; } }