/* Mobile corrections, shared by every page. Desktop is untouched: everything below either sits behind a (max-width: 767px) / (hover: none) query, or fixes a bug that was never desktop-specific to begin with (sideways scroll, cursor: none on touch). */ /* A handful of decorative layers (orbs, hero plate, work posters) sit at negative offsets, which becomes a horizontal scrollbar / sideways drift on narrow viewports. This goes on , not . keeps its default `overflow: visible`, so per the CSS spec body's overflow-x here propagates straight up to the viewport instead of making its own scroll container — the same trick organisers.html/index.html/schedule.html/faq.html already use inline. Setting it on instead breaks `position: sticky` for every descendant (that's what desynced organisers.html's scroll-split-card pin) at any viewport width, not just mobile. */ body { overflow-x: hidden; } /* The custom cursor is a pointer-device conceit. On touch, cursor: none only hides the text caret in form fields, and the two cursor divs track a mousemove that never fires. */ @media (hover: none) { body, a, button, .cursor-pointer { cursor: auto !important; } .cursor-dot, .cursor-outline { display: none !important; } } @media (max-width: 1024px) { /* 500px circles under a 100px blur are a compositing bill phones pay in dropped frames on every scroll. Same look, a quarter of the area. */ .orb-1, .orb-2, .orb-3 { width: 240px; height: 240px; filter: blur(56px); } /* ---- index: hero ---------------------------------------------------- */ /* 72px x 8 letters overflows a 375px viewport on its own. */ .section.hero h1 { font-size: 52px; line-height: 1.02; } /* ---- index: event cards --------------------------------------------- */ /* The desktop choreography is six position: fixed 100vh layers with a poster parked at left: 75% and a 40vw info card opposite it. There is no 375px arrangement of that, so hero.js leaves it off and the items render as what the markup already is: stacked, natural-scrolling sections. */ .work_item { height: auto; min-height: 0; flex-direction: column; align-items: stretch; padding: 96px 20px 64px; } /* Photo stays, as a ground rather than a competitor for the text. */ .work_image { opacity: 0.3; } .work_item::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6, 7, 9, 0.7), rgba(6, 7, 9, 0.93)); pointer-events: none; } .work_item-wrapper { width: 100%; padding: 0; z-index: 2; } .work_text { padding-top: 0; } .work_text-title { font-size: 13vw; } .work_item-mobile-poster { order: 1; z-index: 2; display: block; width: 76%; max-width: 300px; height: auto; margin: 26px auto 0; border-radius: 12px; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6); } /* Was: absolute, 40vw wide, max-h 60vh with overflow-y auto -- a scroll trap nested inside a section that is itself scroll-driven. In flow it needs neither the clamp nor the scroller, so both go. */ /* Thumb-sized targets for the two links inside each card. */ .work_item .work_item-info a { padding: 14px 26px; } } @media (max-width: 1024px) { /* Two columns of a 170px track leaves "TEAM SIZE" mostly dead space while the time/format cell wraps to four lines beside it. */ .work_item .work_item-info .grid-cols-2 { grid-template-columns: 1fr; } } @media (max-width: 1024px) { /* iOS Safari zooms the page in whenever a focused field's text is under 16px -- and does not zoom back out when the field blurs, so the rest of the form is left oversized and scrolling sideways. !important because the sizes it has to beat are Tailwind utilities on the fields themselves. */ input, select, textarea { font-size: 16px !important; } /* Drawer links were 30-35px tall: the whole of mobile navigation, under the 44px a thumb can reliably land on. */ #mobile-menu nav a { min-height: 44px; display: flex; align-items: center; } } @media (max-width: 1024px) { /* Footer links were bare inline text: a 16px-tall target with no padding between neighbours, in a 2-across grid. */ footer a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; } /* The header packs a hamburger, an absolutely centred wordmark and this pill into 390px; at full size the pill ran under the wordmark. The label drops to "REGISTER" on mobile (see each page's header), the pill to these. */ header a[href="register.html"] { display: inline-flex; align-items: center; min-height: 44px; padding-left: 14px; padding-right: 14px; font-size: 10px; } } @media (max-width: 1024px) { /* faq.html: the expand/collapse pair and the category pills are the page's only controls, and both sat under a thumb's width. */ #expand-all-btn, #collapse-all-btn, .category-tab { min-height: 44px; padding-top: 0; padding-bottom: 0; } }