/* The shared header and footer (server/chrome.js). Public pages only: no TV, phone or host screen ever loads this, so modern CSS is fine here. Linked from inside the header markup itself (a stylesheet link is allowed in ), so a page cannot show the header without its styles. */ .site-header { position: relative; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.75rem; max-width: 1120px; margin: 0 auto; padding: 0.4rem 16px; } .site-brand { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; font-size: 1.15rem; color: #ffd977; text-decoration: none; } .site-brand img { display: block; } /* The account bar keeps its own look (app.css) but sits in the header's flow instead of floating over the page. */ .site-header #acctbar { position: static; padding: 0; margin-left: auto; } /* On a phone the links are a second row that scrolls sideways rather than wrapping into a wall of words above the page. */ .site-nav { order: 3; flex-basis: 100%; display: flex; gap: 0.1rem; overflow-x: auto; scrollbar-width: none; margin: 0 -8px; padding: 0 8px; } .site-nav::-webkit-scrollbar { display: none; } .site-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.7rem; border-radius: 10px; white-space: nowrap; text-decoration: none; color: #f4f6ff; opacity: 0.78; font-size: 0.92rem; font-weight: 600; } .site-nav a:hover { opacity: 1; background: rgba(255, 255, 255, 0.07); } .site-nav a[aria-current="page"] { opacity: 1; color: #ffd977; } .site-nav a:focus-visible, .site-brand:focus-visible, .site-footer a:focus-visible { outline: 2px solid #ffd977; outline-offset: 2px; } /* The HOME page on a phone: one row, not two. Its phone layout was measured to keep Join above the fold of a 390x844 screen, and a two-row header pushed that button's bottom edge from 721 to 851 — below the fold, on the page people reach holding a room code. The page draws its own large wordmark right underneath, so the header can drop the word and keep the icon. */ @media (max-width: 819px) { .site-header--home { flex-wrap: nowrap; } .site-header--home .site-brand span { display: none; } .site-header--home .site-nav { order: 1; flex: 1 1 auto; flex-basis: auto; min-width: 0; margin: 0; } .site-header--home #acctbar { order: 2; margin-left: 0; flex: none; } } @media (min-width: 820px) { .site-nav { order: 0; flex-basis: auto; margin: 0 0 0 auto; padding: 0; overflow: visible; } .site-header #acctbar { margin-left: 0; } } .site-footer { position: relative; z-index: 2; max-width: 1120px; margin: 3rem auto 0; padding: 2rem 16px 2.5rem; border-top: 1px solid rgba(255, 217, 119, 0.16); color: rgba(244, 246, 255, 0.7); font-size: 0.9rem; text-align: left; } .site-ft { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } @media (max-width: 560px) { .site-ft { grid-template-columns: 1fr 1fr; } } .site-ft h2 { margin: 0 0 0.5rem; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: #ffd977; font-family: 'Outfit', system-ui, sans-serif; } .site-ft ul { list-style: none; margin: 0; padding: 0; } .site-ft li a { display: inline-block; padding: 0.3rem 0; color: rgba(244, 246, 255, 0.82); text-decoration: none; } .site-ft li a:hover { color: #ffd977; } .site-note { margin: 1.5rem 0 0; font-size: 0.78rem; opacity: 0.75; max-width: 720px; } .site-note + .site-note { margin-top: 0.5rem; } .site-note a { color: inherit; }