/* ========================================================================== SwooLab marketing site — landing page, blog, FAQ. Deliberately independent of the game's hybrid.css/mobile.css: those two are a tightly-coupled pair built around a fixed, non-scrolling 100vh board, and the site pages are ordinary scrolling documents. Sharing them would mean fighting `overflow: hidden` on everywhere. The palette and fonts are copied so the two halves still look like one product. ========================================================================== */ @font-face { font-family: 'StarJedi'; src: url('/static/fonts/star-jedi/StarJedi-DGRW.woff2') format('woff2'), url('/static/fonts/star-jedi/StarJedi-DGRW.ttf') format('truetype'); font-display: swap; } :root { --bg: #030712; --bg-raised: #0f172a; --bg-raised-2: #131e36; --border: rgba(255, 255, 255, 0.08); --border-lit: rgba(56, 189, 248, 0.35); --text: #e2e8f0; --text-dim: #94a3b8; --text-faint: #64748b; --accent: #38bdf8; --accent-deep: #0ea5e9; --accent-warm: #fde047; --max-w: 1080px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background-color: var(--bg); color: var(--text); font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { color: #7dd3fc; } img { max-width: 100%; } .wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; } .wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 24px; } /* ── Site header ─────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(3, 7, 18, 0.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 62px; } .brand { font-family: 'StarJedi', sans-serif; font-size: 26px; line-height: 1; color: #fff; text-shadow: 0 0 4px var(--accent), 0 0 10px rgba(56, 189, 248, 0.4); transition: text-shadow 0.25s ease; white-space: nowrap; } .brand:hover { color: #fff; text-shadow: 0 0 6px var(--accent-deep), 0 0 15px var(--accent), 0 0 25px rgba(14, 165, 233, 0.6); } /* Rides inside the .brand anchor rather than beside it, so the header's space-between flex layout still sees exactly two children (wordmark, nav). Everything the wordmark sets — StarJedi, size, glow — is reset here: the tag is a status label next to the logo, not part of it. */ .beta-tag { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; color: var(--accent); text-shadow: none; background: rgba(56, 189, 248, 0.1); border: 1px solid var(--border-lit); border-radius: 4px; padding: 3px 5px 2px; margin-left: 8px; vertical-align: middle; position: relative; top: -0.55em; } .site-nav { display: flex; align-items: center; gap: 8px; } .site-nav a { color: var(--text-dim); font-size: 14px; font-weight: 500; padding: 7px 12px; border-radius: 8px; transition: color 0.15s ease, background 0.15s ease; } .site-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); } .site-nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.08); } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .btn-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 10px; font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.2px; background: linear-gradient(135deg, var(--accent-deep), #2563eb); color: #fff; border: 1px solid rgba(125, 211, 252, 0.45); box-shadow: 0 6px 20px rgba(14, 165, 233, 0.25); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .btn-cta:hover { color: #fff; filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(14, 165, 233, 0.35); } .btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 10px; font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 600; color: var(--text); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); transition: background 0.15s ease, border-color 0.15s ease; } .btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: var(--border-lit); } /* ── Hero ────────────────────────────────────────────────────────────────── */ .hero { position: relative; padding: 48px 0 32px; background-image: linear-gradient(rgba(3, 7, 18, 0.72), rgba(3, 7, 18, 0.94)), url('/img/hyperspace_bg.jpg'); background-size: cover; background-position: center; border-bottom: 1px solid var(--border); text-align: center; } .hero h1 { margin: 0 0 18px; font-family: 'Outfit', sans-serif; font-size: clamp(34px, 6vw, 58px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; color: #fff; } .hero .lede { margin: 0 auto 32px; max-width: 620px; font-size: clamp(16px, 2.2vw, 19px); color: var(--text-dim); } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .hero-note { margin-top: 22px; font-size: 13px; color: var(--text-faint); } /* ── Cards / sections ────────────────────────────────────────────────────── */ .section { padding: 48px 0; } .section + .section { border-top: 1px solid var(--border); } .section h2 { margin: 0 0 8px; font-family: 'Outfit', sans-serif; font-size: 26px; font-weight: 700; color: #fff; } .section .section-sub { margin: 0 0 32px; color: var(--text-dim); font-size: 15px; } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } .card { display: block; padding: 22px; border-radius: 14px; background: var(--bg-raised); border: 1px solid var(--border); color: inherit; transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease; } a.card:hover { color: inherit; border-color: var(--border-lit); background: var(--bg-raised-2); transform: translateY(-2px); } .card h3 { margin: 0 0 8px; font-family: 'Outfit', sans-serif; font-size: 17px; font-weight: 600; color: #fff; } .card p { margin: 0; font-size: 14px; color: var(--text-dim); } .card-eyebrow { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } /* ── Feature list ─────────────────────────────────────────── */ .feature-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); } .feature-list li { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: baseline; padding: 14px 4px; border-bottom: 1px solid var(--border); } .feature-list p { margin: 0; font-size: 15px; color: var(--text-dim); } .feat-label { font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } /* ── Contact ─────────────────────────────────────────────────── */ .contact-email { margin: 18px 0 28px; font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 600; } .post-contact { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 15px; color: var(--text-dim); } /* ── Blog post body ────────────────────────────────────────────────────── Applies to a post (.article.post) only — the FAQ and the blog index share .article and must keep the plainer prose defaults, above all the section numbering. Every rule is scoped under .wrap-narrow so the full-width matchup matrix in .mx-band, which ships its own complete styling, stays untouched. */ /* Counter on .article, not .wrap-narrow: a post has two .wrap-narrow blocks with the matrix band between them, and a per-block reset would restart the numbering at 01 after the matrix. */ .article.post { counter-reset: sec; } .article.post .wrap-narrow h2 { display: flex; align-items: baseline; gap: 12px; margin: 56px 0 16px; font-size: 19px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; } /* Section numbering is decoration, not copy: it lives entirely in CSS so the document text is unchanged. */ .article.post .wrap-narrow h2::before { counter-increment: sec; content: counter(sec, decimal-leading-zero); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--accent); } .article.post .wrap-narrow h2::after { content: ""; flex: 1; height: 1px; background: var(--border); } .article.post .wrap-narrow h3 { margin: 32px 0 10px; font-size: 16px; color: var(--accent); } .article.post .wrap-narrow strong { color: var(--accent-warm); } .article.post .wrap-narrow em { color: #e8eefb; } .article.post .wrap-narrow ul { list-style: none; padding-left: 0; } .article.post .wrap-narrow ul > li { margin-bottom: 10px; padding: 13px 16px; border-radius: 10px; border: 1px solid var(--border); border-left: 3px solid var(--accent-deep); background: var(--bg-raised); font-size: 15px; } .article.post .wrap-narrow ol { padding-left: 24px; } .article.post .wrap-narrow ol > li::marker { color: var(--accent); font-weight: 700; } .article.post .wrap-narrow table:not(.mx) th { color: var(--accent); background: rgba(56, 189, 248, 0.06); } /* ── Blog list ───────────────────────────────────────────────────────────── */ .post-list { display: flex; flex-direction: column; gap: 16px; } .post-item { display: block; padding: 22px 24px; border-radius: 14px; background: var(--bg-raised); border: 1px solid var(--border); color: inherit; transition: border-color 0.18s ease, background 0.18s ease; } .post-item:hover { color: inherit; border-color: var(--border-lit); background: var(--bg-raised-2); } .post-item h3 { margin: 0 0 6px; font-family: 'Outfit', sans-serif; font-size: 19px; font-weight: 600; color: #fff; } .post-meta { font-size: 12px; color: var(--text-faint); letter-spacing: 0.04em; text-transform: uppercase; } .post-item p { margin: 10px 0 0; font-size: 14.5px; color: var(--text-dim); } .tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #0b0b0b; background: var(--accent-warm); vertical-align: 2px; } /* ── Article ─────────────────────────────────────────────────────────────── */ .article { padding: 56px 0 72px; } .article h1 { margin: 0 0 10px; font-family: 'Outfit', sans-serif; font-size: clamp(28px, 4.5vw, 40px); font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; color: #fff; } .article h2 { margin: 44px 0 12px; font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 700; color: #fff; } .article h3 { margin: 30px 0 8px; font-family: 'Outfit', sans-serif; font-size: 17px; font-weight: 600; color: #e8eefb; } .article p { margin: 0 0 18px; color: #cbd5e1; } .article ul, .article ol { margin: 0 0 18px; padding-left: 22px; color: #cbd5e1; } .article li { margin-bottom: 8px; } .article .post-meta { display: block; margin-bottom: 30px; } .callout { margin: 0 0 32px; padding: 16px 18px; border-radius: 12px; border: 1px solid rgba(253, 224, 71, 0.28); background: rgba(253, 224, 71, 0.06); font-size: 14.5px; color: #e8e2c4; } .callout strong { color: var(--accent-warm); } /* :not(.mx) throughout — the embedded arena matrix is a in an .article, so every rule here used to land on it: `border-collapse: collapse` closed the 2px gaps between its cells, the th background painted a panel behind the deck art, and the td colour dimmed the win rates. It ships its own complete styling, so the article's prose-table defaults have to stay out of it entirely. */ .article table:not(.mx) { width: 100%; margin: 0 0 24px; border-collapse: collapse; font-size: 14px; } .article table:not(.mx) th, .article table:not(.mx) td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); } .article table:not(.mx) th { color: #fff; font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(255, 255, 255, 0.03); } .article table:not(.mx) td { color: var(--text-dim); } /* Leader + base thumbnails in a prose table's deck column. The pair is how a deck is actually recognised, so it leads and the name follows. The empty .thumbs on a row with no art still reserves the gap, which keeps the labels in one column instead of leaving one row's text hanging left of the others. */ .deck-cell { display: flex; align-items: center; gap: 9px; } .deck-cell .thumbs { display: flex; gap: 2px; flex: 0 0 auto; width: 70px; } .deck-cell img { width: 34px; height: auto; border-radius: 2px; display: block; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } .table-scroll { overflow-x: auto; } /* ── Embedded arena deck matrix ────────────────────────────────────────────── The matrix and its tooltip come from arena_report.py, which carries its own rules and injects them with the block (see `arena_report.py --embed`). All this file supplies is the palette: arena_report is theme-agnostic and reads colours from these token names, so re-declaring them here in the site's own colours is what makes a report built for a light page sit correctly on a dark one. Editing the matrix's LAYOUT belongs in arena_report.py, not here — anything added here would be silently overwritten on the next --embed. ------------------------------------------------------------------------- */ /* The matrix is wider than the 720px article column, so it gets its own full-width band rather than a scrollbar. Done by taking it OUT of .wrap-narrow in the markup, not with a `transform` breakout: a transform on an ancestor makes that ancestor the containing block for position:fixed, which would pin the tooltip inside this element and put the clipping back. */ .mx-band { display: flex; justify-content: center; padding: 0 24px; margin: 0 0 26px; } .mx-embed { --surface: var(--bg-raised); --plane: var(--bg); --ink: var(--text); --ink-2: #cbd5e1; --muted: var(--text-faint); --grid: var(--border); --axis: rgba(255, 255, 255, 0.28); --hair: var(--border); /* The diverging poles. Blue is the site accent, so a cell the row deck wins reads in the same colour the rest of the site uses for "this one". */ --pos: var(--accent); --neg: #f87171; /* The neutral the ramp mixes toward, tuned by measuring rendered cells against the report rather than by eye. The obvious slate (#1e293b) sits 0.06 darker in oklab than the report's neutral, which dimmed every cell and squeezed the mid-range flat — the whole matrix read muddier than the one it was copied from. This lands the mid cells within ~0.01 of the report's lightness. */ --cell0: #293548; /* Outline on the cell the tooltip is describing — the site's own gold. */ --hilite: var(--accent-warm); width: max-content; max-width: 100%; } /* Only bites when the viewport itself is narrower than the matrix (phones): the band above centres it whenever there is room, and this scrolls it when there is not. */ .mx-embed .scroll { overflow-x: auto; padding-bottom: 4px; } /* ── Inline SVG charts ───────────────────────────────────────────────────── */ .chart-figure { margin: 0 0 26px; } .chart { display: block; width: 100%; height: auto; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 10px; } .chart-grid line { stroke: rgba(255, 255, 255, 0.09); stroke-width: 1; } .chart-axis line { stroke: rgba(255, 255, 255, 0.32); stroke-width: 1; } /* .chart-tick holds the y labels, .chart-tick-t the x labels. Both need a rule: SVG text has no inherited color to fall back on, so anything left unstyled renders in the black default fill and vanishes against the panel. */ .chart-tick text, .chart-tick-t { fill: #cbd5e1; font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 600; } .chart-axis-label { fill: var(--text); font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; } .chart-line { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; } .chart-dot circle { fill: var(--accent); } /* X-scale toggle. Both scales are drawn into the SVG and the checked radio picks one, so switching costs no redraw and needs no JavaScript. The radios sit before the chart so `:checked ~` can reach the toggle's labels and the pair inside the SVG. Linear is the default, so the log geometry is the one hidden up front. */ .chart-box { position: relative; } .chart-scale-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .chart-toggle { position: absolute; right: 16px; bottom: 44px; display: flex; gap: 2px; padding: 2px; background: rgba(3, 7, 18, 0.72); border: 1px solid var(--border); border-radius: 999px; } .chart-toggle label { padding: 3px 11px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-faint); cursor: pointer; user-select: none; transition: color 0.15s, background 0.15s; } .chart-toggle label:hover { color: var(--text); } #xs-log:checked ~ .chart-toggle label[for="xs-log"], #xs-lin:checked ~ .chart-toggle label[for="xs-lin"] { background: rgba(56, 189, 248, 0.16); color: var(--accent); } #xs-log:focus-visible ~ .chart-toggle label[for="xs-log"], #xs-lin:focus-visible ~ .chart-toggle label[for="xs-lin"] { outline: 2px solid var(--accent); outline-offset: 1px; } .chart .x-log { display: none; } #xs-log:checked ~ .chart .x-log { display: inline; } #xs-log:checked ~ .chart .x-lin { display: none; } @media (max-width: 640px) { /* The chart scales with the column, so a fixed-size control eats a growing share of it. Shrink the toggle rather than let it crowd the plot. */ .chart-toggle { right: 10px; bottom: 30px; } .chart-toggle label { padding: 2px 8px; font-size: 10px; } } .chart-figure figcaption { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--text-faint); } .back-link { display: inline-block; margin-bottom: 26px; font-size: 13px; color: var(--text-faint); } .back-link:hover { color: var(--accent); } /* ── FAQ ─────────────────────────────────────────────────────────────────── */ .faq-group { margin-bottom: 40px; } .faq-group > h2 { margin: 0 0 14px; font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); } details.faq { border-radius: 12px; border: 1px solid var(--border); background: var(--bg-raised); margin-bottom: 10px; overflow: hidden; } details.faq > summary { padding: 15px 18px; cursor: pointer; list-style: none; font-family: 'Outfit', sans-serif; font-size: 15.5px; font-weight: 600; color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 14px; } details.faq > summary::-webkit-details-marker { display: none; } details.faq > summary::after { content: "+"; flex-shrink: 0; font-size: 20px; font-weight: 400; line-height: 1; color: var(--text-faint); } details.faq[open] > summary::after { content: "\2212"; } details.faq > summary:hover { background: rgba(255, 255, 255, 0.03); } .faq-body { padding: 0 18px 16px; font-size: 14.5px; color: var(--text-dim); } .faq-body p { margin: 0 0 12px; } .faq-body p:last-child { margin-bottom: 0; } .faq-body ul { margin: 0 0 12px; padding-left: 20px; } /* ── Footer ──────────────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border); padding: 32px 0 44px; color: var(--text-faint); font-size: 13px; } .site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; } .footer-links { display: flex; flex-wrap: wrap; gap: 18px; } .footer-links a { color: var(--text-dim); } .footer-links a:hover { color: var(--accent); } .disclaimer { flex-basis: 100%; margin: 8px 0 0; max-width: 640px; font-size: 12px; line-height: 1.6; color: #4b5563; } /* ── Mobile ──────────────────────────────────────────────────────────────── */ @media (max-width: 640px) { body { font-size: 15px; } .wrap, .wrap-narrow { padding: 0 18px; } .site-header .wrap { height: 56px; } .brand { font-size: 21px; } .beta-tag { font-size: 9px; padding: 2px 4px 1px; margin-left: 6px; top: -0.45em; } .site-nav { gap: 2px; } .site-nav a { padding: 6px 9px; font-size: 13px; } .hero { padding: 60px 0 52px; } .section { padding: 46px 0; } .hero-actions .btn-cta, .hero-actions .btn-ghost { flex: 1 1 100%; justify-content: center; margin:0 10%;} .article { padding: 36px 0 52px; } .feature-list li { grid-template-columns: 1fr; gap: 4px; padding: 12px 2px; } }