, so it does not also pick up the gold that
`h1 em` carries; the headline stays flat white. */
.hero h1{font-style:italic;}
.hero h1{
background:linear-gradient(142deg,
rgba(255,255,255,.97) 0%,
rgba(255,255,255,.88) 32%,
rgba(255,255,255,.66) 62%,
rgba(255,255,255,.52) 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-stroke:.6px rgba(255,255,255,.30);
/* Lifts the letterforms off the field so the translucent fill still has
an edge where the background behind it is light. */
filter:drop-shadow(0 2px 18px rgba(10,12,16,.45));
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
/* Without background-clip the fill would be `transparent` and the
headline would vanish. Solid white instead — no glass, but legible. */
.hero h1{ color:var(--text); -webkit-text-stroke:0; filter:none; }
}
/* ============================================================
SPLIT SECTION HEAD — title left, lede far right
============================================================
The default .section-head stacks the h2 over its sub-head. On the team
page that leaves "Our Team" — two short words — sitting alone above a
long sentence, so the block opens with a mostly empty line.
Two columns instead: the title takes the left, and the lede sits in its
own column held to the right edge of the container, with open space
between them. That gap is the effect: the eye reads the title, crosses a
clear space, and lands on the lede as a separate note rather than a
subtitle.
THE 48% IS A LINE COUNT, not a proportion. The column is right-aligned,
so its width is what sets the lede's left edge — widening it pushes the
text left and pulls the wrap up. Measured on both ledes: under ~44% each
runs to four lines or more, over ~56% the sponsors lede drops to two and
the two pages stop matching. 48% puts both at three lines with room on
either side, so an edit to the copy will not flip one of them.
`align-items:start`, so the two line up along their TOPS. The h2 and the
lede are set at very different sizes, and their first lines meet within
about a pixel of each other because the h2's tight 1.08 line-height
pulls its cap up by roughly as much as the lede's looser leading pushes
its own down.
Scoped with its own class, not applied to .section-head globally — every
other section head on the site is stacked and should stay that way.
============================================================ */
.section-head-split{
display:grid; grid-template-columns:1fr minmax(0, 48%); gap:24px 48px;
align-items:start;
}
/* The 16px under the h2 exists to separate it from the sub-head BELOW it.
Side by side there is nothing below, and the margin only adds height to
the head. */
.section-head-split h2, .section-head-split h1{margin-bottom:0;}
/* .page-head caps its own heading at 760px and its paragraph at 580px.
Inside the split those caps fight the grid: the column already sets the
measure, and the heading's cap in particular would stop it filling the
left column. Specific enough to beat `.page-head h1` / `.page-head p`. */
.page-head .section-head-split h1,
.page-head .section-head-split p{max-width:none;}
/* Released from the global 560px cap: the column is already narrower than
that, so the cap does nothing but risk fighting the grid later. */
.section-head-split .section-sub{max-width:none;}
/* The lede reads as the same note in both places, so it is set the same
whether it is a .section-sub (team) or .page-head's bare (sponsors). */
.page-head .section-head-split p{font-size:17px; color:var(--paper-dim);}
@media (max-width:860px){
/* Back to stacked. Below this the title and a 48% lede column are each
down to ~380px, and the title has no width to spare beside it. */
.section-head-split{grid-template-columns:1fr; gap:16px;}
}
/* ============================================================
HERO ASIDE — the submission window
============================================================
A second column in the hero, holding the dates entries are open. Three
hairline rules bracket the label and the date: enough structure to read
as a stamped record rather than a stray line of text, without adding
another panel to a page whose one filled surface is the crimson button.
`align-items:start` puts it alongside the HEADLINE. The text column runs
on past it — event line, countdown, email capture — and centring the
aside against all of that would leave it floating beside the form, next
to nothing it relates to.
The date is plain --text, not the headline's glass gradient: that
treatment is the h1's alone, and a second element wearing it would read
as a second headline.
============================================================ */
.hero-content{
display:grid; grid-template-columns:minmax(0,1fr) auto; gap:56px;
align-items:start;
}
.hero-aside{width:250px; text-align:right;}
.ha-rule{height:1px; background:var(--line-hover);}
.ha-label{
display:block; padding:11px 0;
font-family:var(--mono); font-size:10.5px; letter-spacing:.17em;
text-transform:uppercase; color:var(--faint);
}
.ha-date{
padding:16px 0; font-size:44px; font-weight:600;
letter-spacing:-0.035em; line-height:1; color:var(--text);
}
.ha-time{
display:block; padding:0 0 12px; margin-top:-6px;
font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
text-transform:uppercase; color:var(--muted);
}
.ha-link{
display:block; padding:11px 0;
font-family:var(--mono); font-size:10.5px; letter-spacing:.17em;
text-transform:uppercase; color:var(--gold); text-decoration:none;
}
.ha-link:hover{color:var(--text);}
.ha-link:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
@media (max-width:900px){
/* One column. The aside follows the text in source order, so it lands
below the email capture — supplementary, which is what it is. Left-set
to match everything above it; right-aligned against a full-width
column it would look stranded. */
.hero-content{grid-template-columns:1fr; gap:0;}
.hero-aside{width:auto; max-width:250px; text-align:left; margin-top:40px;}
}
/* ============================================================
EVENT LINE — the in-person tournament, given its weight back
============================================================
This line is what the countdown counts down to, and it was set as the
quietest thing in the hero: 13px mono in --faint, dimmer than the label
above the clock. Both halves now carry real weight.
The date sits in a filled crimson chip. Worth knowing what that costs:
crimson was the page's single action colour, used only on the email
button a few hundred pixels below, and a second solid crimson block in
the same view means neither one is uniquely THE action. Chosen with
that trade understood — the date is the loudest thing under the
headline, which is the point.
--on-red, not white by eye: white on #C73030 measures 4.4:1, under the
4.5 AA needs at this size. The token is the pairing that passes.
The venue leaves mono for 16px sans at full --text. Mono at 13px in
--faint was setting the one fact a visitor must act on as fine print.
============================================================ */
.event-line{
display:flex; align-items:center; flex-wrap:wrap; gap:12px 16px;
font-family:var(--sans); letter-spacing:0;
margin-top:0; padding-top:0; margin-bottom:38px;
}
/* font-family declared, not inherited: three earlier .event-line rules set
the line in mono, so without this the chip would render as mono too. */
.ev-chip{
font-family:var(--sans); font-size:15px; font-weight:700; letter-spacing:.02em;
text-transform:uppercase; color:var(--on-red); background:var(--red);
padding:9px 16px; border-radius:3px; white-space:nowrap;
}
.ev-venue{
font-family:var(--sans); display:flex; align-items:center;
font-size:16px; color:var(--text);
}
.ev-pin{width:15px; height:15px; flex-shrink:0; margin-right:9px; opacity:.7;}
@media (max-width:560px){
/* Stacked: beside the chip the address wraps mid-street at this width,
which reads worse than giving it its own line. */
.event-line{display:block;}
.ev-chip{display:inline-block; margin-bottom:12px;}
.ev-venue{font-size:15px;}
}
/* ============================================================
BANNER — a full-bleed bar under the nav
============================================================
Used twice: the homepage's Discord invite (a link) and the sponsors
page's next-tournament note (a statement). One construction for both,
so a returning visitor reads the second as the same device rather than
as a new kind of thing.
Full-bleed and flush under the nav: on the homepage the hero's top
padding moves onto .hero-content so the bar can meet the nav's bottom
border with nothing between them. Inset as a card it would read as the
first item of page content rather than as a standing notice.
NOT in Discord blurple. The page spends colour on exactly one thing —
the crimson email button, and now the crimson date chip — and a third
brand colour in the first screen would flatten what is left of that
hierarchy. The Discord mark carries the recognition on its own.
The homepage bar sits above .hero-glow in z-order, but the glow shows
through the translucent fill, so it picks up whatever the field is
doing behind it rather than sitting on a flat grey stripe.
============================================================ */
.hero{padding-top:0;}
.hero-content{padding-top:64px;}
.banner{
position:relative; z-index:2; display:block;
background:rgba(255,255,255,.05);
border-bottom:1px solid var(--line);
transition:background-color var(--dur) var(--ease);
}
/* Hover belongs to the linked one only — a statement that lights up under
the cursor promises a click it cannot honour. */
a.banner-link:hover{background:rgba(255,255,255,.085);}
.banner-inner{
display:flex; align-items:center; justify-content:center; gap:11px;
padding-top:13px; padding-bottom:13px;
font-size:14px; color:var(--text);
}
.hb-mark{width:19px; height:19px; flex-shrink:0; opacity:.9;}
.hb-text{font-weight:500;}
/* Nudges right on hover, the same tell the member links use. */
.hb-arrow{width:15px; height:15px; flex-shrink:0; opacity:.65;
transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);}
.banner-link:hover .hb-arrow{transform:translateX(3px); opacity:1;}
@media (max-width:640px){
/* The arrow is decorative once the text wraps — it stops reading as
"this continues somewhere" and just costs a line. */
.banner-inner{font-size:13px; gap:9px; text-align:center;}
.hb-arrow{display:none;}
.hero-content{padding-top:48px;}
}
/* ============================================================
NAV — the Join button
============================================================
The one thing in the bar that stays visible on mobile. Every other
.nav-right button is hidden below 1100px and moves into the menu, but
Join is the reason most visitors arrive, so it sits beside the toggle
rather than one tap deeper. Compact there so the wordmark still fits. */
@media (max-width:1100px){
.nav-right .nav-join{display:inline-flex; padding:8px 16px;}
}
/* In the menu too, but only once the bar has no room for it: at phone
width the wordmark, Join and the toggle together need ~400px, and the
bar has ~335. Below 560px Join moves into the menu under Watch Demos. */
@media (min-width:561px){
.nav-links .nav-cta-join{display:none !important;}
}
@media (max-width:560px){
.nav-right .nav-join{display:none;}
.nav-links .nav-cta-join{margin-top:10px;}
}
/* ============================================================
JOIN PAGE
============================================================
Instructions, so it is set for READING, not scanning: one column at a
~68-character measure, a numbered rail down the left, and very few boxes.
An earlier version ran the full 1116px with six kinds of bordered panel
(kit, table, two path cards, callout, FAQ) and a 10.5px mono chip; with
that many frames nothing read as primary and the page looked jumbled.
Boxes are kept for things the reader compares or copies: the two
hosting options and the code. Everything else is type and space. */
.join-col{max-width:840px;}
/* ---- head ------------------------------------------------------------ */
.join-head{padding:88px 0 0;}
.join-head h1{font-size:56px; line-height:1.02; margin-bottom:20px;}
.join-lede{font-size:19px; color:var(--muted); max-width:600px; line-height:1.55;}
.join-dates{
list-style:none; margin-top:44px;
display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); max-width:520px;
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.join-dates li{padding:20px 20px 20px 0; display:flex; flex-direction:column; gap:4px;}
.join-dates li + li{padding-left:20px; border-left:1px solid var(--line);}
.join-date{font-size:22px; font-weight:600; letter-spacing:-0.01em; color:var(--text);}
.join-date-label{font-size:14px; color:var(--muted);}
/* ---- steps: a rail of numbers, joined by a hairline ------------------ */
.join-main{padding:72px 0 24px;}
.join-step{
position:relative;
display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:32px;
padding-bottom:72px;
}
/* The line runs from under one number to just above the next, so the
numbers read as stops on one path rather than as separate badges. */
.join-step:not(:last-child)::before{
content:''; position:absolute; left:21.5px; top:56px; bottom:12px;
width:1px; background:var(--line-hover);
}
.join-num{
width:44px; height:44px; border:1px solid var(--line-hover); border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-family:var(--mono); font-size:15px; font-weight:600; color:var(--text);
background:var(--canvas);
}
.join-num-day svg{width:18px; height:18px;}
/* h2 cap height lines up with the middle of the 44px number. */
.join-body h2{font-size:30px; line-height:1.2; margin:5px 0 26px;}
.join-body h3, .join-practice h3{
font-family:var(--serif); font-size:19px; font-weight:600; color:var(--text);
display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:18px;
}
/* ---- running text ---------------------------------------------------- */
.join-list{padding-left:24px; font-size:16px; line-height:1.7; color:var(--muted);}
.join-list > li{padding-left:6px;}
.join-list > li + li{margin-top:16px;}
.join-list > li::marker{font-family:var(--mono); font-size:13px; color:var(--faint);}
.join-bullets{list-style:disc;}
.join-body strong, .join-practice strong{color:var(--text); font-weight:600;}
.join-note{margin-top:22px; font-size:15px; color:var(--faint);}
.join-link{color:var(--blue-pale); text-decoration:underline; text-decoration-color:rgba(169,192,255,.4); text-underline-offset:3px;
transition:color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);}
.join-link:hover{color:var(--text); text-decoration-color:currentColor;}
.join-link:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:2px;}
.join-body code, .join-practice code{
font-family:var(--mono); font-size:.86em; color:var(--text);
background:rgba(255,255,255,.06); border-radius:3px; padding:2px 6px;
}
.join-code{
margin:14px 0 16px; padding:16px 20px; overflow-x:auto;
background:var(--elev); border:1px solid var(--line); border-radius:6px;
font-family:var(--mono); font-size:13.5px; line-height:1.75; color:var(--text);
}
.join-code code{background:none; padding:0; font-size:inherit; border-radius:0;}
/* A flag inside a sentence: never split after its dashes. */
.join-flag{white-space:nowrap;}
.join-soon{
font-size:12.5px; font-weight:500; line-height:1.4;
color:var(--muted); border:1px solid var(--line-hover); border-radius:100px; padding:2px 10px; white-space:nowrap;
}
/* Sign-up, not yet live: the button it will be, greyed, beside a note at
body size rather than a tiny chip. */
.join-pending{display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; margin:14px 0 4px; font-size:15px; color:var(--faint);}
.join-btn-disabled{opacity:.45; cursor:not-allowed;}
/* Starter kit: one row, the repo name and a link. */
.join-kit{
display:flex; align-items:center; flex-wrap:wrap; gap:12px 16px;
margin:14px 0 4px; padding:14px 16px 14px 20px;
background:var(--elev); border:1px solid var(--line); border-radius:6px;
}
.join-kit svg{width:20px; height:20px; color:var(--text); flex-shrink:0;}
.join-kit-name{flex:1 1 220px; min-width:0; font-family:var(--mono); font-size:13.5px; color:var(--text); overflow-wrap:anywhere;}
/* ---- Step 2: the two options ---------------------------------------- */
.join-options{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px;}
.join-option{padding:28px; background:var(--surface); border:1px solid var(--line); border-radius:8px;}
.join-option-head{display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:10px;}
.join-option-head h3{margin:0; font-size:21px;}
.join-option-sum{font-size:15.5px; line-height:1.6; color:var(--muted); margin-bottom:22px;}
.join-facts{border-top:1px solid var(--line);}
.join-facts > div{padding:14px 0; border-bottom:1px solid var(--line);}
.join-facts > div:last-child{border-bottom:none; padding-bottom:0;}
.join-facts dt{font-size:13.5px; color:var(--faint); margin-bottom:2px;}
.join-facts dd{font-size:15px; line-height:1.55; color:var(--text);}
/* ---- Steps 3 and day: the two paths, one after the other ------------- */
.join-sub + .join-sub{margin-top:44px; padding-top:40px; border-top:1px solid var(--line);}
.join-callout{
margin-top:28px; padding:20px 24px;
border-left:2px solid var(--blue); background:rgba(77,125,255,.07); border-radius:0 6px 6px 0;
font-size:15px; line-height:1.65; color:var(--muted);
}
.join-callout p + p{margin-top:10px;}
/* One link that must not be missed (the agent setup guide): bold, on a
red-tinted marker, so it reads as the key takeaway of the callout. */
.join-highlight{
color:var(--text); font-weight:600; text-decoration:underline; text-underline-offset:3px;
background:rgba(199,48,48,.28); padding:2px 6px; border-radius:4px;
box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.join-highlight:hover{background:rgba(199,48,48,.42);}
/* ---- practice: claiming on the AltruAgent platform ------------------
Not a tournament step, so it sits OFF the numbered rail, after it, set
apart by a rule and a step down in heading size. Its text aligns with
the page edge rather than the rail's text column for the same reason. */
.join-practice{padding:24px 0 64px;}
.join-practice .join-col{border-top:1px solid var(--line); padding-top:64px;}
.join-practice h2{font-size:30px; line-height:1.2; margin-bottom:16px;}
.join-practice-lede{font-size:16px; line-height:1.7; color:var(--muted); max-width:720px;}
.join-practice .join-callout{margin-top:24px;}
.join-practice-part{margin-top:44px;}
/* Troubleshooting: what you see on the left, what to do on the right. */
.join-trouble{border-top:1px solid var(--line);}
.join-trouble > div{
display:grid; grid-template-columns:minmax(0,15em) minmax(0,1fr); gap:6px 32px;
padding:16px 0; border-bottom:1px solid var(--line);
}
.join-trouble dt{font-size:15.5px; font-weight:600; color:var(--text); line-height:1.6;}
.join-trouble dd{font-size:15.5px; color:var(--muted); line-height:1.65;}
/* ---- end ------------------------------------------------------------- */
.join-end{padding:8px 0 104px;}
.join-faq{
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px 40px;
padding:36px 40px; background:var(--surface); border:1px solid var(--line); border-radius:8px;
}
.join-faq > div{flex:1 1 320px;}
.join-faq h2{font-size:28px; margin-bottom:8px;}
.join-faq p{font-size:16px; line-height:1.6; color:var(--muted);}
/* ---- narrower -------------------------------------------------------- */
@media (max-width:760px){
.join-head{padding-top:56px;}
.join-head h1{font-size:40px;}
.join-lede{font-size:17px;}
.join-options{grid-template-columns:minmax(0,1fr);}
.join-main{padding-top:56px;}
}
@media (max-width:560px){
.join-trouble > div{grid-template-columns:minmax(0,1fr);}
.join-practice h2{font-size:25px;}
.join-practice .join-col{padding-top:48px;}
/* The rail costs 76px a phone cannot spare; the number sits above its
heading instead and the line goes. */
.join-step{grid-template-columns:minmax(0,1fr); row-gap:16px; padding-bottom:56px;}
.join-step:not(:last-child)::before{display:none;}
.join-num{width:36px; height:36px; font-size:13px;}
.join-body h2{font-size:25px; margin:0 0 22px;}
.join-list{font-size:15.5px; padding-left:22px;}
.join-option{padding:22px;}
.join-code{padding:14px 16px; font-size:12.5px;}
.join-faq{padding:26px 22px;}
.join-faq h2{font-size:24px;}
.join-date{font-size:19px;}
}
/* ============================================================
IN-PERSON NOTE — the first-100 invitation, under the event line
============================================================
Sits directly beneath the date and venue because it qualifies them:
who gets to be in that room. A red-tinted panel so it reads as a
notice, but not a second solid crimson block — the chip above already
spends that.
============================================================ */
.event-line{margin-bottom:22px;}
.inperson-note{
display:inline-flex; align-items:center; gap:12px;
margin:0 0 34px; padding:12px 18px;
font-family:var(--sans); font-size:16px; line-height:1.4; color:var(--text);
background:rgba(199,48,48,.12);
border:1px solid rgba(199,48,48,.45); border-left:3px solid var(--red);
border-radius:3px;
}
.inperson-note strong{color:var(--red-text); font-weight:700;}
@media (max-width:560px){ .inperson-note{font-size:15px; padding:11px 14px;} }
/* A short status note under a game card's description. */
.game-note{font-size:.875rem;font-style:italic;opacity:.75;margin-top:.25rem;}