/* THE NO-PAGE-SCROLLBAR LAW (Alex, 21 Jul; see AGENTS.md): the real home of this rule is globals.css on html. It is duplicated here ONLY because the running dev server's css watcher is wedged and cannot rebuild globals.css without a restart; this TS-injected copy enforces the law on /natgat immediately. Harmless duplicate once globals.css compiles; delete on sight after any dev-server restart confirms. */ html{scrollbar-width:none} html::-webkit-scrollbar{display:none} /* NIGHT-ONLY canvas bleed (Alex, 26 Jul): the natgat subtree is pinned dark via [data-pk-night] (layout.tsx), but in the app's LIGHT mode the body's pale canvas still showed through the shell's gutters around that wrapper's box. Page-scoped + leak-proof (body:has, this style unmounts with the page): the body behind /natgat always wears the same night canvas, whatever data-theme says. */ body:has([data-pk-night] .ngt){ background:linear-gradient(165deg,#252932 0%,#15171b 55%,#0f1013 100%); background-attachment:fixed; } .ngt{ --ink:#101114;--deep:#0F1013;--panel:#1E2228;--panel2:#262B32;--well:#14171B; --chalk:#E9E6DD;--chalk-fill:#EFEAE0;--muted:#9BA1AB; /* BRIGHT WHITE, FOR TITLES ONLY (Alexander, 21 Sep 2026: "it's not bright white. Can we make it bright white, and then can we make all of the other titles for the sections bright white as well"). --chalk is a warm off-white and it is right for body copy on this dark concrete; at display size it reads as slightly dimmed, and the page's titles are the one thing that should not. A TOKEN, NOT A HEX PER RULE. Pure white is outside the C13 allow-list, so this is one named exception in one place rather than #fff scattered through the sheet, and turning it back to --chalk is one line. Titles only: body copy stays chalk. */ --title:#fff; /* WHO WEARS IT (extended 21 Sep 2026: "make all these titles bright white ... for example, when it says iconic landmark jumps"): the page name, every section head, and the NAME of any card or panel. What deliberately keeps --chalk: eyebrows, body copy, numbers (the clock, the countdown, the day chips), buttons, chips and status labels. The test is whether a reader would call the line that thing's TITLE. If it is a label about the thing rather than the name of it, it stays. */ --gold:#F2B92C;--gold-ink:#171205;--gold-hi:#FFE3A6; /* NOT GOLD (Alexander, 18 Sept). Gold is THE primary action / earned / selected accent across the app, so a confirmation line wearing it competes with the button under it. Orange reads as a state, not an action. */ --orange:#F07A2B; --line:rgba(233,230,221,.14);--line2:rgba(233,230,221,.24);--field-line:rgba(233,230,221,.48); --disp:var(--font-display,'Russo One',system-ui,sans-serif); --hud:var(--font-hud,var(--font-display,'Russo One',system-ui,sans-serif)); --body:var(--font-body,'Exo 2',system-ui,sans-serif); width:100%;background:transparent;color:var(--chalk);font-family:var(--body); padding:clamp(2px,0.6vw,6px) 0 0; } .ngt *{box-sizing:border-box} /* THE PAGE COLUMN. It does NOT set its own width (Alexander, 02 Sep 2026: "make sure the event page width is correct, currently looks small"). It used to be max-width:1120px;margin:0 auto, a SECOND cap nested inside the app's own content well. .app-content already sizes and places every page through THE SHRINK LADDER (globals.css: max-width --well-w, capped at --well-max 1440, margin-left --well-ml, padding-inline --well-pad), so re-capping at 1120 threw away the surplus the ladder had just handed over AND re-centred the remainder, which put NATGAT on a different left line from every other board in the app. Measured at 1800: the events board runs 246 to 1554 while this ran 340 to 1460, i.e. 188px narrower and inset 94px. Now it simply fills the line .app-content gives it, so this page is the same width as the events board at every viewport, for free and forever. ⚠️ Do not put a max-width back here. If NATGAT should be narrower than the rest of the app, that is a decision about --well-max or a data attribute on the shell, not a second cap hidden one level down. */ .ngt-wrap{position:relative;z-index:1} /* The faint Sydney coastline watermark (Alex, 24 Jul): fixed + full-viewport, terrain-only chalk outline sitting behind every panel over the canvas gradient, scales with the page. Tune the whole faintness with the single opacity here. Decorative + pointer-transparent. */ /* NOW THE ARROW FIELD (Alexander, 4 Oct 2026: "remove the sydney background and make it the arrow"). Same layer, same place: fixed, full viewport, behind .ngt-wrap, so it holds still while the page scrolls over it, the system the Events board uses. The tile, size and 0.03 are every other arrow field's. The coastline SVG stays in public/ unused; putting it back is this rule and the in NatgatRooms.tsx. THE SECTIONS CARRY NO ARROWS OF THEIR OWN: the hero band and the footer used to paint a blue slab plus a scrolling field, which read as a second layer over this one, so both are switched off below (search 4 Oct 2026). */ /* BLUE UNDER IT (same day: "it feels too grey, i like the blue-ish we had"). The blue was the hero band's --slab-blue, which went with the band's own arrows. It now lives on this fixed layer, so the whole page sits on the blue and the arrows ride the ::after at their own 0.03 without fading the blue with them. */ .ngt-mapbg{position:fixed;inset:0;z-index:0;pointer-events:none; background:var(--slab-blue,linear-gradient(165deg,#26333E 0%,#141E26 55%,#0E161C 100%))} .ngt-mapbg::after{content:"";position:absolute;inset:0;opacity:.03; background-image:url('/brand/arrow-field.svg');background-size:124px 124px; background-repeat:repeat} .ngt-eyebrow{font-family:var(--hud);font-size:.62rem;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--muted);margin:0} /* ── 1. HERO ─────────────────────────────────────────────────────────────── */ .ngt-hero{padding:clamp(8px,3vh,28px) 0 0} .ngt-mark{display:flex;align-items:baseline;flex-wrap:wrap;gap:clamp(10px,2vw,20px);margin-top:12px} .ngt-mark .name{font-family:var(--disp);text-transform:uppercase;line-height:.9; font-size:clamp(2.6rem,10vw,5.6rem);color:var(--chalk);letter-spacing:.005em} /* XX = the brand element: chalk numerals over a gold SPINE (never a second gold FILL, so the hero's one gold FILL stays on the Register CTA and the gold budget holds). */ .ngt-xx{position:relative;font-family:var(--disp);line-height:.9; font-size:clamp(2.6rem,10vw,5.6rem);color:var(--chalk);padding-bottom:.12em} .ngt-xx::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.11em; background:var(--gold);border-radius:5px 3px 6px 2px / 3px 6px 2px 5px} .ngt-sub{font-family:var(--disp);text-transform:uppercase;color:var(--title); font-size:clamp(1rem,3.2vw,1.5rem);line-height:1.12;margin:16px 0 0;max-width:22ch} .ngt-dates{font-family:var(--hud);text-transform:uppercase;letter-spacing:.06em; font-size:clamp(12px,2vw,14px);color:var(--muted);margin:14px 0 0} .ngt-dates b{color:var(--chalk);font-weight:700} /* the roaming line: frames NATGAT as an annual gathering that moves each year */ .ngt-hero-note{font-family:var(--body);font-size:13.5px;color:var(--muted);line-height:1.5; margin:10px 0 0;max-width:48ch} /* main-day callout: a flat panel with a gold left spine (a mark, not a fill) */ .ngt-mainday{display:flex;gap:12px;align-items:center;margin:20px 0 0;padding:14px 16px; background:var(--panel);border:2px solid var(--ink);border-left:4px solid var(--gold); border-radius:16px 11px 18px 10px / 11px 17px 10px 16px;max-width:560px} .ngt-mainday .lbl{font-family:var(--hud);text-transform:uppercase;letter-spacing:.08em; font-size:10.5px;color:var(--gold);display:block} .ngt-mainday .val{font-family:var(--body);font-size:14px;color:var(--chalk);line-height:1.4; font-weight:600;margin-top:3px;display:block} .ngt-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px} /* buttons: Title Case, 2px ink cut, no 90deg, wobble scales with size */ .ngt-btn{font-family:var(--body);font-weight:700;font-size:14px;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px; border:2px solid var(--ink);text-decoration:none;text-align:center; transition:transform .12s ease,filter .12s ease;-webkit-tap-highlight-color:transparent} .ngt-btn:hover{transform:translateY(-1.5px)} .ngt-btn-gold{background:var(--gold);color:var(--gold-ink); border-radius:18px 12px 20px 11px / 12px 19px 11px 18px} /* THE TWO-LINE CTA (Alexander, 21 Sep 2026). .ngt-btn is a centred inline-flex row; stacking just turns its axis, so the wobble, the 2px ink cut and the gold fill are untouched and this stays the same button. The sub line is the same ink at 72%, not a second colour: text on a gold fill is --gold-ink by the contrast law, and a lighter TONE is how a line steps back without leaving the palette. */ /* ROYAL IS BACK, ON ALEXANDER'S VETO (21 Sep 2026: "make all other buttons blue, so that would be the merchandise, the skill registration, and the star registration"). C13 retired royal as an app accent and kept the token defined with the veto open (globals.css, DESIGN.md §99); this is that veto being exercised. IT IS WHAT MAKES THE GOLD BUDGET WORK. The page had four gold CTAs competing to be the one thing you press. Now gold means RSVP and nothing else, and every other action on the page is the same blue, so "gold = the primary action" is true again on the one page it had stopped being true on. White text, not chalk: #1e6fe0 against white is 4.8:1 and passes; chalk's warmth drops it to the edge of the line. A SIBLING WOBBLE, not gold's: the Scale Law says neighbours never share identical radii, and these two sit in the same column. No .ngt-cta-shine either, that gloss is the primary action's attention cue. */ .ngt-btn-royal{background:var(--kq-royal);color:#fff; border-radius:12px 19px 11px 21px / 19px 11px 20px 12px} .ngt-btn-stack{flex-direction:column;gap:1px;padding-top:10px;padding-bottom:10px; line-height:1.16} .ngt-btn-main{font-size:14px;font-weight:700} .ngt-btn-sub{font-size:11px;font-weight:600;opacity:.72;letter-spacing:.01em} /* THE MEMBER'S STATUS BUTTON (Alexander, 02 Sep 2026: "You're going!", in green). --ok is the app's confirmation green and is on the C13 allow-list, so no new colour enters the palette. Ink text on it, not chalk: --ok is a light green and the contrast law is that text on a light fill is dark. Same 2px ink cut and the same wobble family as its gold sibling, so only the colour and the message change, never the shape. */ .ngt-btn-going{background:var(--ok);color:var(--ink); border-radius:18px 12px 20px 11px / 12px 19px 11px 18px} /* IT IS NOT A CONTROL, SO IT MUST NOT ACT LIKE ONE. .ngt-btn lifts 1.5px on hover, which on a plain status reads as "press me" and is the thing Alexander just reported as a button that does nothing. Cancel the lift and the pointer cursor; a member's cursor passing over it now says, correctly, that there is nothing here to press. */ .ngt-btn-going:hover{transform:none} span.ngt-btn-going{cursor:default;-webkit-user-select:none;user-select:none} /* EVENT COMPLETED (Alexander, 14 Oct 2026). The RSVP's final state: a status, not a control, in the locked grey pair. It keeps the wobble and the ink cut because it is the only thing in its pane (the Sole Action rule): a flat slab there reads broken. */ .ngt-btn-done{background:var(--locked);color:var(--locked-ink);cursor:default; -webkit-user-select:none;user-select:none; border-radius:18px 12px 20px 11px / 12px 19px 11px 18px} .ngt-btn-done:hover{transform:none} .ngt-btn-chalk{background:var(--chalk-fill);color:var(--ink); border-radius:12px 18px 11px 19px / 18px 11px 19px 12px} /* quiet grey action button (Alex, 25 Jul): matches the panel2 grey of the rail links so Invite + Joined sit back instead of glaring chalk-white top-right. */ .ngt-btn-grey{background:var(--panel2);color:var(--chalk); border-radius:12px 18px 11px 19px / 18px 11px 19px 12px} .ngt-btn-ghost{background:transparent;color:var(--chalk);border-color:var(--line2); border-radius:14px 10px 16px 11px / 11px 15px 10px 14px} .ngt-btn:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px} .ngt-todo{font-family:var(--hud);font-size:9px;letter-spacing:.12em;color:var(--muted); opacity:.55;text-transform:uppercase;align-self:center} /* a quiet, non-interactive placeholder held while the session resolves (sub-second) so a member never flashes the anon CTA; same footprint as the gold button, no wobble pop */ .ngt-btn-wait{background:var(--panel2);color:var(--muted);cursor:default;pointer-events:none; border-radius:18px 12px 20px 11px / 12px 19px 11px 18px} /* the small button variant used in the group panel's action cluster (Invite + Join): same C13 button grammar, just a tighter footprint so the two sit neatly top-right. */ .ngt-btn-sm{padding:9px 18px;font-size:13px} /* ── THE GROUP PANEL (23 Jul, Facebook-group-inspired, C13 skin): sits between the identity row (.ngt-store-head) and the showcase grid. A flat panel card (panel bg + 2px ink + wobble) carrying the meta line + facepile on the left and the two-button cluster on the right. FB-inspired arrangement, KongQuest materials only. */ .ngt-group{display:flex;align-items:center;justify-content:space-between;gap:16px; flex-wrap:wrap;margin-top:2px;padding:14px 16px;background:var(--panel); border:2px solid var(--ink);border-radius:16px 11px 18px 10px / 11px 17px 10px 16px} .ngt-group-info{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1 1 auto} /* the event-date eyebrow above the group name (Alex, 25 Jul): a small gold uppercase-tracked line, like a Facebook event shows the date above its title. Mirrors .ngt-eyebrow grammar in gold so it reads as the festival window over the NATGAT name. */ .ngt-group-date{font-family:var(--hud);font-size:.62rem;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--muted);margin:0} .ngt-group-name{font-family:var(--disp);text-transform:uppercase;color:var(--title); font-size:19px;line-height:1;letter-spacing:.02em;margin:0} .ngt-group-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap; font-family:var(--hud);font-size:12px;letter-spacing:.04em;color:var(--muted)} .ngt-group-vis{color:var(--chalk);text-transform:uppercase;font-weight:600;letter-spacing:.1em; font-size:10.5px} .ngt-group-meta-wait{color:var(--muted)} .ngt-group-dot{color:var(--muted)} .ngt-group-count{color:var(--muted)} /* the facepile: real member photos in an overlapping strip. The strip clips its own right tail (overflow:hidden + min-width:0) rather than push the page wide at narrow widths (THE NO-PAGE-SCROLL LAW); the +N chip is a sibling AFTER it, so it is never clipped. Each face wears a panel-colour ring to read as a distinct token. */ /* ⚠️ max-width:100% IS LOAD-BEARING, AND IT IS A BASE RULE ON PURPOSE. min-width:0 only licenses shrinking along a flex container's MAIN axis; every pile on this page sits in a COLUMN (.ngt-drop-act, .ngt-cta-crowd's parents), where the row's width is its cross size, align-items:center sizes it from content, and min-width:0 has no say. Without the clamp the row takes its full intrinsic width, overhangs the panel on both sides and the card's overflow:hidden eats the first face and the +N chip. With it the row can never be wider than the button it stands under, and .ngt-faces below does the clipping. */ .ngt-face-row{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%} .ngt-faces{display:flex;align-items:center;min-width:0;overflow:hidden;padding:2px 0} .ngt-face{display:inline-flex;flex:0 0 auto;margin-left:-9px;border-radius:50%; box-shadow:0 0 0 2px var(--panel)} .ngt-face:first-child{margin-left:0} /* THE COUNT IS THE SAME SIZE AS A FACE (Alexander, 11 Sep 2026: "can we make sure that the 4+ that's on the very end is the same size as all of the other avatars"). It was 34px against 30px avatars, so the one element in the row that is not a person was also the biggest thing in it. Height and min-width now match the 30px AvatarStack every caller on this page draws, and the 2px ink border matches the circles rather than a shadow ring of a different weight. EXO 2, NOT RUSSO ONE, on his own instruction: "if Russo One seems to be too thick for something a bit smaller, then use Exo 2". At 11px in a 30px disc the display face closes up its counters and reads as a smudge; the body face stays legible. */ .ngt-face-more{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; height:30px;min-width:30px;padding:0 8px;border-radius:50px;background:var(--panel2); color:var(--chalk);font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.01em; border:2px solid var(--ink)} /* THE CROWD UNDER A CTA (Alexander, 11 Sep 2026). One modifier shared by all three join buttons — Join The Event, Skill, Style — so the piles cannot drift apart in look. Centred under the button and given the same 11px breathing room the Notify Me pile gets from .ngt-drop-act, which is the pile this was modelled on. ⚠️ BASE RULE, DELIBERATELY ABOVE EVERY MEDIA QUERY IN THIS FILE. A media query carries no specificity, so a phone override written above its base rule silently loses; this file has already paid for that three times. Nothing overrides it today and anything that does must be written BELOW here. */ .ngt-cta-crowd{justify-content:center;margin-top:11px} /* SPACING IS PER CONTAINER, BECAUSE TWO OF THE THREE ALREADY SUPPLY A GAP (Alexander, 11 Sep 2026, on the phone: "can we make sure that the padding is minimal, so we're not wasting any gaps whatsoever"). MEASURED, not guessed: the two competition panels sat 24px below their button, because .ngt-arena-body is a flex column with gap:13px and the 11px margin above STACKED on top of it. The capsule is display:block and supplies nothing, so it needs the full 11px; the mobile landing block supplies 2px, so it needs 9px to land on the same 11px; the arena supplies 13px, so it needs none at all. All three now read as one distance instead of three different ones. */ .ngt-arena-body>.ngt-cta-crowd{margin-top:0} .ngt-mland-cta>.ngt-cta-crowd{margin-top:9px} /* THE STACK'S WIDTH GUARD, AND IT BITES NOW. This was written as belt and braces while the renderer sliced to six faces ("if anyone later raises the slice, the stack clips its right tail here instead of spilling out of the capsule and pushing the page sideways"). 18 Sep 2026 is that later: the slice went to sixteen so these piles read like the drop queue, and on a phone and in the ~340px capsule the tail genuinely clips here. IT STILL MATCHES THE RIGHT ELEMENT. The renderer now wraps the stack in .ngt-faces, so div:first-child resolves to that wrapper rather than to AvatarStack's own root — which is the correct target, and already carries these two properties. The rule is kept as the guarantee for any caller that skips the wrapper. The +N chip is a SIBLING of the stack, so it is never what gets clipped. */ .ngt-cta-crowd>div:first-child{overflow:hidden;min-width:0} .ngt-group-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto} /* MOBILE COMPACT (Alex, 25 Jul): below desktop, the group NAME and the member meta (facepile + Traceur count) share ONE row so the header is shorter. On desktop this wrapper is display:contents, it has NO box, so its children (name, meta) lay out in the .ngt-group-info column exactly as before and the desktop header is byte-identical. */ .ngt-group-headline{display:contents} @media(max-width:1023px){ .ngt-group-headline{display:flex;align-items:center;justify-content:space-between; gap:6px 12px;flex-wrap:wrap;min-width:0} /* on mobile the avatar+count is REPLACED by the ⋯ control (Alex, 25 Jul), so it is hidden here; desktop still shows it. */ .ngt-group-headline .ngt-group-meta{display:none} } /* the member-only "Joined v" dropdown: the button toggles a one-item menu (Leave group). The menu is an absolutely-positioned flat panel under the button, right-aligned so it never spills off the panel's right edge. */ .ngt-joined-wrap{position:relative;display:inline-flex} .ngt-joined-btn{gap:6px} .ngt-joined-icon{margin-right:1px;flex:0 0 auto} .ngt-joined-caret{margin-left:-1px} .ngt-joined-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:20;min-width:160px; padding:6px;background:var(--panel2);border:2px solid var(--ink); border-radius:12px 9px 14px 8px / 9px 13px 8px 12px} .ngt-joined-item{display:block;width:100%;text-align:left;padding:9px 11px; font-family:var(--body);font-size:13px;font-weight:600;color:var(--chalk);cursor:pointer; background:transparent;border:0;border-radius:8px 6px 9px 5px / 6px 8px 5px 8px} .ngt-joined-item:hover{background:var(--panel);color:var(--gold)} .ngt-joined-item:focus-visible{outline:2.5px solid var(--gold);outline-offset:1px} /* Responsive (Alex, 25 Jul): below desktop (=1024) keeps the top-right flex row untouched. The facepile overflow rule above still guarantees no horizontal page scroll. */ /* the ⋯ / X control (Alex, 25 Jul): the mobile header's collapse/expand toggle. Hidden on desktop, where the avatar+count and the always-on action buttons stay. */ .ngt-header-toggle{display:none} .ngt-header-toggle-ico{width:18px;height:18px;flex:0 0 auto} @media(max-width:1023px){ /* one uniform 10px rhythm for every gap in the header: date->name, name->buttons, and the two button rows all sit 10px apart (Alex, 25 Jul). */ .ngt-group{flex-direction:column;align-items:stretch;gap:10px} .ngt-group-info{gap:10px} .ngt-group-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%} .ngt-joined-wrap{width:100%} .ngt-joined-btn{width:100%} /* the ⋯ / X button sits at the title's right (where the avatar+count was) */ .ngt-header-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; width:34px;height:34px;padding:0;background:var(--panel2);color:var(--chalk); border:2px solid var(--ink);border-radius:11px 8px 12px 8px / 8px 12px 8px 11px; cursor:pointer;transition:transform .12s ease,background .12s ease} .ngt-header-toggle:hover{transform:translateY(-1px)} .ngt-header-toggle[aria-expanded="true"]{background:var(--gold);color:var(--gold-ink);border-color:var(--ink)} .ngt-header-toggle:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px} /* COLLAPSED (default): only the date + name + ⋯ show; the four action buttons are hidden until ⋯ is tapped. Expanding flips the attribute and reveals them. */ .ngt-group[data-expanded="false"] .ngt-group-actions, .ngt-group[data-expanded="false"] .ngt-rail-toggles{display:none} } /* ── 1b. STORE TOP (v3, 21 Jul): the game-page top area. The banner opens on an icon + title row (the breadcrumb trail was deleted in the follow-up pass: the app chrome already locates the visitor), then the two-column showcase: a big media stage with a thumbnail rail (left) and the capsule fact card (right). The C13 skin holds: panel + 2px ink + wobble, gold only as marks; the one gold FILL stays on the Register CTA below the grid. */ /* icon + title row: now the banner's first element, so it carries the top air the crumb trail used to sit in (its own margin plus the .ngt canvas padding above). */ .ngt-store-head{display:flex;align-items:center;gap:14px;margin-top:0} .ngt-store-icon{width:52px;height:52px;object-fit:contain;flex:0 0 auto;padding:7px; background:var(--panel);border:2px solid var(--ink); border-radius:14px 10px 15px 9px / 10px 14px 9px 15px} .ngt-store-title{flex:1 1 auto;min-width:0} .ngt-store-name{font-family:var(--disp);text-transform:uppercase;line-height:.95; color:var(--title);font-size:clamp(1.7rem,5vw,2.5rem);margin:4px 0 0;letter-spacing:.005em} /* R3 (21 Jul): the Community Hub door moved out of this row and into the rooms nav, so .ngt-store-head is back to its plain two-child flex row (icon + title, title flex:1 1 auto) with no reserved third column and no phone wrap rule to carry. */ .ngt-store-grid{display:grid;grid-template-columns:minmax(0,1fr) 324px;gap:16px;margin-top:16px} @media(max-width:919px){.ngt-store-grid{grid-template-columns:minmax(0,1fr)}} /* MOBILE LANDING (Alex, 25 Jul): the capsule fact card (XX art + fact rows + day-picker + Enter CTA + countdown) is REMOVED from the stacked mobile landing entirely, the new Skool-style landing carries its facts elsewhere. Desktop's two-column layout (>=920px) keeps the capsule exactly as-is. */ @media(max-width:919px){.ngt-store-grid>.ngt-capsule{display:none}} /* ── MOBILE LANDING (Alex, 25 Jul, Skool-inspired) ─────────────────────────── Phone-only (<920px, the same width that hides the capsule). Three pieces: 1. HERO: the icon + title row goes big, the eyebrow line drops UNDER the name (order:2) as a small tracked subtitle, the name scales up, the icon grows. 2. FACTS: a 2-col icon grid (dates/host/powered left, place/count/price right). 3. CTA: the shared joinCta at full width. Desktop (>=920px) sees none of this: .ngt-mland is display:none and the hero overrides live inside the media query. */ .ngt-mland{display:none} .ngt-rsvp-dock{display:none} @media(max-width:919px){ /* ⚠️ nowrap, AND IT IS THE FIX (Alexander, 10 Sep 2026: "if I squish it hard enough the XX icon breaks and that guy goes underneath, which is wrong"). IT WAS NOT THE TITLE BEING TOO BIG, which is the obvious suspect and is why this took measuring rather than looking. At 320px the title needs 188px of the 224px it has, on one line, with room to spare. The row was WRAPPING, and a wrapping flex row places each child at its own natural size and moves on to a new line when the next one will not fit. It never gets as far as shrinking, because flex-shrink only operates WITHIN a line. The child that would not fit was the title block, whose natural width is set by the eyebrow's 48 characters on one line (~290px), so the icon kept the first line and the whole title block dropped under it. nowrap forces both onto one line, and only then do flex-shrink:1 and min-width:0 on .ngt-store-title do their job: the block narrows and the eyebrow takes two lines, which is what a subtitle is for. It reproduced at 390 and 360 as well as 320, so this was not an edge case, it was every phone. THIS WAS LEFTOVER CODE, not a decision. See the note where .ngt-community-door used to be. */ .ngt-store-head{gap:12px;flex-wrap:nowrap} .ngt-store-icon{width:60px;height:60px} .ngt-store-title{display:flex;flex-direction:column;min-width:0} /* THE EYEBROW SITS ABOVE THE NAME, THE SAME WAY IT DOES ON DESKTOP (Alexander, 10 Sep 2026: "as you can see with our title on the desktop, the eyebrow is above the text, above the title; on mobile it's not, so make sure that it's above"). It was flipped under the name by order:2 on 25 Jul, when the phone hero was designed as a big name with a tracked strapline beneath. Reading order is now identical on both, so the page does not introduce itself in one order on a laptop and the reverse on a phone. It keeps its smaller phone size; only the position moved. */ .ngt-store-title .ngt-eyebrow{margin:0 0 4px;font-size:8.5px;letter-spacing:.16em} /* THE FLOOR DROPS FROM 2.1rem TO 1.6rem (Alexander: "we should just be able to scale the size of the text so it just gets smaller, so it stays all in one row"). At every width a phone actually has, 10.5vw is the term that wins and NOTHING here changes. The floor only starts to bind below about 300px, and there the old 2.1rem stopped scaling and began to overflow instead. Measured: "NATGAT XX" in Russo One is 5.59x its font size, so the text fits while 10.5vw governs and stops fitting the moment a floor takes over. */ .ngt-store-name{font-size:clamp(1.6rem,10.5vw,2.7rem);line-height:.9;margin:0} .ngt-mland{display:block;margin-top:18px} /* ONE FACT PER LINE (Alexander, 21 Sep 2026: "make every icon have its own line"). This was two auto columns, which fit while the facts were short; once they read "Hosted by NSW Parkour Association" and "Powered by KongQuest" each half-width cell wrapped to two lines, so a four-fact block rendered as eight ragged lines with the icons stranded beside the first of each pair. One column gives every fact the full width, every icon its own line, and puts the icons in a single vertical rule down the left, which is the thing that makes a list read as a list. */ .ngt-mland-facts{display:grid;grid-template-columns:1fr;gap:13px} .ngt-mland-fact{display:flex;align-items:center;gap:9px;margin:0;min-width:0; font-family:var(--body);font-size:14px;font-weight:500;color:var(--chalk);line-height:1.25} .ngt-mland-fact b{font-weight:700} /* THE DATE HEADLINE: no icon, centred, and sized up out of the fact rank. The extra bottom margin is the gap between a heading and its list, on top of the grid's own row gap. */ .ngt-mland-fact--date{justify-content:center;text-align:center;margin-bottom:3px} /* "Thursday 8th -> Monday 12th" is 26 characters and must hold one line, so the size rides the viewport between a 320px phone and the 20px it wants: a fixed 20px overflows below about 360px, and letting it wrap turns the headline into two ragged halves. nowrap makes the clamp the thing that gives, not the line. */ .ngt-mland-fact--date b{font-size:clamp(16px,5.3vw,20px);font-weight:700; line-height:1.15;white-space:nowrap} .ngt-mland-fact--date .ngt-mland-sub{font-size:13px} /* the date stacks: days on top, month/year quieter underneath */ .ngt-mland-stack{display:flex;flex-direction:column;gap:1px;min-width:0} .ngt-mland-fact--date .ngt-mland-stack{align-items:center} .ngt-mland-eyebrow{margin-bottom:4px} /* THE "WHO" FACTS: hosted by, powered by. The word is a label and the mark plus the name is the answer, so the icon aligns to the label line rather than centring on the pair. Both parties wear it identically, which is the point: NSWPK hosts and KongQuest powers, and neither outranks the other in the layout. */ .ngt-mland-fact--who{align-items:flex-start} .ngt-mland-fact--who .ngt-mland-ico{margin-top:1px} .ngt-mland-who{display:flex;align-items:center;gap:9px;margin-top:5px; font-weight:600;color:var(--chalk)} .ngt-mland-sub{font-size:12px;font-weight:500;color:var(--muted);line-height:1.2} .ngt-mland-ico{width:19px;height:19px;flex:0 0 auto;color:var(--chalk);opacity:.92} /* the desktop capsule's opening sentence, on the phone. Muted against the facts above it: they are the answers, this is the context around them. */ .ngt-mland-lead{font-family:var(--body);font-size:14px;line-height:1.6; color:var(--muted);margin:16px 0 0;text-wrap:pretty} .ngt-mland-guests{margin-top:18px} .ngt-mland-head{font-family:var(--disp);text-transform:uppercase;font-size:15px; letter-spacing:.02em;color:var(--title);line-height:1;margin:0 0 10px} /* ── THE DOCKING RSVP (Alexander, 21 Sep 2026) ────────────────────────────── The page got long, so the one action on it spent most of the scroll off screen. This is the floating half: the SAME joinCta, fixed above the tab bar, present from the moment the page opens. It is not a second door, it is the same door brought to the thumb. IT DISAPPEARS WHEN THE REAL ONE ARRIVES, which is what makes it read as docking rather than as a second button: an IntersectionObserver on the in-flow CTA hides this one as that one reaches its resting line, so at no point are two RSVP buttons on screen together. bottom: 66px + the safe-area inset clears .kq-tabbar (fixed, z-index 40) and the home indicator under it. z-index 41 puts the pill over the page and over the bar, and still under every sheet and overlay (60+), so a modal is never fighting it. pointer-events:none on the rail, auto on the pill: the dock spans the width to centre its child, and without this the empty air either side of the pill would swallow taps meant for the page. */ /* ⚠️ THE INSET IS TRIMMED, BECAUSE THE TAB BAR TRIMS IT (Alexander, 21 Sep 2026: "on the actual web, the RSVP button floats too high from the bottom nav. On the local server it looks good"). That split is the whole tell: a desktop browser reports env(safe-area-inset-bottom) as 0, so 66px was right there and wrong on every real phone. .kq-tabbar pads its bottom with max(6px, inset - 20px), NOT the full inset, on the 30 Jun ruling that the whole inset left a gap once Safari's toolbar collapsed. So the bar grows by about 14px on a 34px-inset phone while this was lifting by the full 34, floating ~20px clear of a bar that never moved that far. Same expression as the bar's own, so the two can only agree. */ .ngt-rsvp-dock{display:flex;position:fixed;left:14px;right:14px; bottom:calc(46px + max(3px, env(safe-area-inset-bottom) - 20px)); z-index:41;justify-content:center; pointer-events:none;animation:ngt-dock-in .26s cubic-bezier(.22,1,.36,1) both} .ngt-rsvp-dock>*{pointer-events:auto;width:100%} @keyframes ngt-dock-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.ngt-rsvp-dock{animation:none}} .ngt-mland-cta{margin-top:16px;display:flex;flex-direction:column;align-items:stretch;gap:2px} .ngt-mland-cta .ngt-btn{width:100%} /* the home slot while the dock is up: holds its place, shows nothing. See the note at the call site for why this is visibility and not display. */ .ngt-mland-cta.is-floating{visibility:hidden} /* the footer copy does the same, and ONLY on the phone: the dock is display:none at 920+, so hiding this at desktop widths would remove the button with nothing standing in for it. */ .ngt-foot-cta.is-floating{visibility:hidden} /* THE SECTION HEAD IS BACK ON THE PHONE (Alexander, 10 Sep 2026: "we need the schedule title"). It was hidden on 25 Jul as "desktop furniture", from a mockup that ran the CTA straight into the day strip. What that actually left was five unlabelled date chips under a band of empty padding: nothing on the phone said the word Schedule, so the chips had to be decoded rather than read. The band's own 34px of top padding was being spent on nothing. */ /* (#schedule{margin-top:18px} lived here; 4 Oct 2026 ONE RHYTHM took it out: sections stack flush and every one pads its own 34, so it opened an 18px strip of arrows above the schedule that no other section had.) */ /* NO-PAGE-SCROLL fix (Alex, 25 Jul: "sticking out too far"): the banner's desktop recipe (aspect-ratio 2.35/1 + min-height 270) inflates its WIDTH to 635px once the column is narrower than 635, min-height wins, the ratio grows the box sideways and drags the whole page into horizontal scroll. On the phone the banner is simply full-width x 270 tall (the ~1.35:1 crop of the mockup); the cover img crops in. */ .ngt-day-banner{aspect-ratio:auto;min-height:0;height:270px;max-width:100%} } /* ── THE CAPSULE FILLS ITS COLUMN (Alexander, 02 Sep 2026: "make this right side ui down to the arrow", the card stopped 68px short of the thumb rail's next arrow and left a notch of empty column beside it). It USED TO BE position:sticky / top:57px / align-self:start. Both halves of that are now wrong, and they were wrong for the same reason: - align-self:start existed ONLY to stop the grid stretching the capsule, because a stretched box cannot be sticky. That is the thing Alexander is asking for. - sticky itself existed because the Schedule lived in the left track and made that column three times the capsule's height, so the capsule had somewhere to ride. The Schedule moved out from under the hero earlier today, which left 68px of travel , a box with nowhere to go wearing the word sticky, the same empty promise the Going rail's dock was built to avoid. Keeping it would have pinned the card 57px down and made the notch worse. So the capsule is a normal stretched grid item and simply matches the left track, arrow included. Nothing inside it needs a change: .ngt-capsule is already a flex column and .ngt-capsule-meta is already flex:1 1 auto with space-evenly, built to soak up exactly this kind of surplus, so the extra height goes to the fact rows and the CTA, Leave link and countdown stay anchored to the panel floor. TWO-COLUMN ONLY: below 920px the grid is single-column, there is no second column to match, and the capsule keeps its natural content height. */ @media(min-width:920px){ .ngt-store-grid>.ngt-capsule{align-self:stretch} } /* the in-stage Schedule: same .ngt-sec grammar, just a touch less top air than a full-wrap room needs since it sits right under the thumb rail, not below a room gap. Its internals (tabs, day panel, slots) read fine at the narrower stage width; this is the only context tweak. */ .ngt-sec-instage{margin-top:22px} /* the media stage is a strict 16:9 well; portrait media sits centred over its own blurred echo. ⚠️ box-sizing:content-box IS LOAD-BEARING, and it is the fix for a bug Alexander caught on 15 Sep 2026 ("the length of the videos seem to not be all the way wide. its like 2-3 pixels short"). aspect-ratio applies to whichever box box-sizing names. Under the app's global border-box, 16/9 was being held by the BORDER box, so the 2px ink ring came out of the inside: a 970px stage gave the media a 966 x 541.63 content box, and a true 16:9 of 966 is 543.38. Media laid out contain in a box 1.75px too short pillarboxes by ~1.5px a side — a sliver of blurred echo down both edges of every landscape film, which is exactly the two-to-three pixels he could see. content-box moves the ratio onto the content box, so the space the media actually gets is a true 16:9 and the border sits outside it where a border belongs. Do not add padding or an explicit width to this rule without redoing that sum. */ .ngt-stage{position:relative;box-sizing:content-box;aspect-ratio:16/9;overflow:hidden; background:var(--well); border:2px solid var(--ink);border-radius:18px 12px 20px 11px / 12px 19px 11px 18px} .ngt-stage-bg{position:absolute;inset:-24px;background-size:cover;background-position:center; filter:blur(26px) brightness(.5);transform:scale(1.15)} /* (THE MEDIA LAYER USED TO OVERSHOOT by the border width — inset:-2px and calc(100% + 4px) — to claw back the 16:9 the border had eaten. That was treating the symptom one layer at a time, and it only ever covered and