/* THE TAP ROOM, AS "Trivia Gauntlet Taproom" DRAWS IT. THE FRONT DOOR IS A BAR. Four tap handles on a brass tower — a football, a globe, a clapperboard and a marble column — each over its own glass on a wooden counter. Hovering a handle tilts it and the glass starts to fill; pulling it pours, and the pour opens that category's chalkboard menu in the taps' place, with the category's board for the day standing beside it. Sports pours a FLIGHT first — six mugs on a shelf, one per league — and a mug opens that league's board with the other leagues as tabs above it. THREE COMPS, ONE ROOM. The dark desktop comp is the reference; "Taproom light" is the same room in paper tones, and its colours are the tokens under html[data-theme="light"] below; "Taproom - Phone" is the same wall at three-quarter size, and is the block at the foot of this file. The 12 Sep 2026 revision took the headline off a computer's wall, brought the taps up into its place and drew the handles a size larger, in all three; its "football globe" follow-up redrew the football as a lens with stitched laces and made the globe a picture (images/taproom/globe.avif). WHAT THIS FILE MAY TOUCH: the room inside #home (`.tr`, which holds the tap wall and the menu that replaces it), two rules on the boards under it, and — on a computer only — the page frame, so the room meets the top bar and the top bar meets the top of the window (see the block before the phone's). On a phone it also shows the two rotating boards the site hides there, and sizes the live call's dismiss. The top bar itself is not named here. THE OLD BLOCK IS HIDDEN, NOT DELETED. The marquee, the hero and the seven mode cards stay in the document with their ids intact, because wiring.js and home.js bind to them by id at boot. The two rules below stop them being drawn; nothing else in this file reaches outside the room. `tr-` IS THE TAP ROOM. The navigation module is still web/src/catnav.js — the category navigation, which is what this is — and the file is named for what it draws rather than for the comp version, which lives here. */ /* ---- AND WHICH FRONT DOOR IS DRAWN -------------------------------------- The switch is a `data-design` attribute on , stamped by the server on a page it serves to a visitor who has the redesign, and written ONLY when the answer is yes. This page is only ever served with it on; the second rule is belt and braces for anything that opens the room by hand. */ html[data-design="on"] #home .cat-marquee, html[data-design="on"] #home .sr-only#catList, html[data-design="on"] #home .hero, html[data-design="on"] #home .mode-hero, html[data-design="on"] #home .mode-hero-2, html[data-design="on"] #home .modes.modes-rest { display: none !important; } html:not([data-design="on"]) #home .tr { display: none !important; } /* ---- the palette -------------------------------------------------------- SET ON THE ROOM, NOT ON :root. These names are this file's, and putting them on the document would leak them into every stylesheet the site has. The comp states its palette in hex and the dark ground reproduces it literally; the light block at the foot of the file is the light comp's values for the same names, so nothing about the layout moves between them. Brass, wood and beer are the same in both and are written where they are used. */ #home .tr { --tr-bleed: 40px; --tr-ink: #F2F0E6; --tr-muted: #A8A5C0; --tr-accent: #C8F42C; /* links, the CTA ring, the live time */ --tr-accent-ink: #241C3D; /* ink on a solid accent */ --tr-accent-wash: rgba(200, 244, 44, .06); --tr-hover-ink: #F2F0E6; /* THE ROOM: three warm lamps, vertical planks, and a vignette over all of it. The vignette is a second layer so paper can switch it off. */ --tr-room: radial-gradient(ellipse 30% 40% at 18% 34%, rgba(255, 190, 90, .16), transparent 70%), radial-gradient(ellipse 30% 40% at 50% 30%, rgba(255, 190, 90, .18), transparent 70%), radial-gradient(ellipse 30% 40% at 82% 34%, rgba(255, 190, 90, .16), transparent 70%), repeating-linear-gradient(90deg, #1E1A2A 0 6px, #221D30 6px 88px, #171422 88px 92px), #1A1826; --tr-vignette: radial-gradient(ellipse at 50% 40%, transparent 50%, rgba(0, 0, 0, .55) 100%); /* THE HEADLINE, which a phone draws over the taps. */ --tr-tagline-ink: #F6F3E8; --tr-tagline-shadow: 0 0 1px rgba(255, 255, 255, .9), 0 0 8px rgba(255, 255, 255, .2), 0 4px 0 #3B5BDB; /* THE CHALKBOARD: near-black, and its frame is CREAM on this ground — the plates' cream, asked for so the board reads as a framed slate rather than a hole in the wall. Paper keeps its wood; see the light block. */ --tr-board: #14121F; --tr-board-edge: #E8E2D2; --tr-board-shadow: inset 0 0 40px rgba(0, 0, 0, .6); --tr-board-rule: rgba(242, 240, 230, .35); --tr-row-rule: rgba(242, 240, 230, .6); --tr-head-shadow: #3B5BDB; /* THE STANDINGS PANEL beside the board: the comp's leaderboard card. */ --tr-panel: #221F33; --tr-panel-edge: transparent; --tr-panel-rule: #2E2B42; --tr-panel-shadow: none; /* THE GLASS: a rim of white on the dark ground, a rim of ink on paper. */ --tr-glass-edge: rgba(255, 255, 255, .45); --tr-glass-foot: rgba(255, 255, 255, .4); --tr-glass-body: linear-gradient(90deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .05) 28%, rgba(255, 255, 255, .03) 68%, rgba(255, 255, 255, .18)); --tr-glass-grip: rgba(255, 255, 255, .42); --tr-foam: #FFF9E8; --tr-foam-shadow: none; --tr-foam-blob: #FFF9E8; --tr-foam-blob-2: #FFFDF5; --tr-foam-blob-shadow: none; /* THE LEAGUE TABS. */ --tr-tab-bg: #0F0E17; --tr-tab-edge: #33304A; --tr-tab-ink: #F2F0E6; --tr-tab-on-bg: #C8F42C; --tr-tab-on-edge: #C8F42C; --tr-tab-on-ink: #241C3D; /* THE FLOOR under the counter, where the boards stand. */ --tr-floor: linear-gradient(#2A2036, #0F0E17 60px, #14121F); --tr-mug-glow: rgba(200, 244, 44, .45); } /* ---- the room ----------------------------------------------------------- */ /* IT BLEEDS TO THE CARD'S EDGE. The room sits inside .wrap, the rounded card the whole site is drawn on, and the comp's planks run to the edge of the page — so the room pulls out by the page's own padding and .wrap's overflow:hidden trims the corner. The inset below adds the bleed back so the wall is measured from the card's edge, not from a box outside it. */ #home .tr { position: relative; margin: 0 calc(-1 * var(--tr-bleed)); color: var(--tr-ink); } #home .tr-room { position: relative; display: flex; flex-direction: column; background: var(--tr-room); } #home .tr-room::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--tr-vignette); z-index: 0; } #home .tr-room > * { position: relative; z-index: 1; } /* ---- the headline, which only a phone draws ------------------------------- */ #home .tr-tagline { display: none; } /* ---- the tap wall -------------------------------------------------------- */ /* EIGHTEEN PIXELS UNDER THE TOP BAR AND THEN THE HANDLES. There was a headline here; the taps came up into its place. */ #home .tr-wall { position: relative; display: flex; flex-direction: column; margin: 18px clamp(14px, 2vw, 40px) 0; } /* THE MENU TAKES THE WALL'S PLACE. The comp draws either the taps or the board, never both; `is-poured` is set by cnOpen and cleared on the way back to the taps. */ #home .tr.is-poured .tr-wall { display: none; } #home .tr-menu { display: none; } #home .tr.is-poured .tr-menu { display: grid; } /* THE BRASS TOWER BAR, behind the taps, and the two pedestals that hold it up. Absolute against the wall: the bar sits where the faucets come out of the handles' boxes (268px of handle, 6px of padding) and the pedestals run from its foot to the counter. A TURNED CYLINDER, as the 13 Sep 2026 comp ("Trivia Gauntlet spouts") draws it: round-ended, ribbed along its length, darker at the ends where it turns away, with the name of the house on a plate at its middle. Its two pairs of rivets stay. The comp's big end caps and the two pills either side of the plate were not taken, and the pedestals are the ones that were here. */ #home .tr-bar { position: absolute; left: 0; right: 0; top: 282px; height: 64px; border-radius: 32px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 4px), linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 6%, rgba(0, 0, 0, 0) 94%, rgba(0, 0, 0, .35)), linear-gradient(#FFF6CF 0%, #F0D88A 9%, #D4B356 22%, #B8963E 40%, #8C6D2A 62%, #5A4416 82%, #3E2C0E 94%, #7A5C1E 100%); box-shadow: inset 0 3px 2px -2px rgba(255, 255, 255, .7), inset 0 -4px 6px rgba(0, 0, 0, .5), 0 18px 34px rgba(0, 0, 0, .65); z-index: 0; } /* THE PLATE: "TRIVIA GAUNTLET", engraved — brass ink with a light edge under it, in a thin frame. Georgia rather than the comp's Cinzel, the face the History plaque already uses, so the sheet asks for nothing new. */ #home .tr-bar b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 5px 16px; border: 1.5px solid rgba(90, 64, 20, .7); border-radius: 3px; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 12px; letter-spacing: .3em; line-height: 1.2; color: #5A4416; white-space: nowrap; text-shadow: 0 1px 0 rgba(255, 245, 210, .7); box-shadow: inset 0 1px 0 rgba(255, 245, 210, .6), inset 0 -1px 0 rgba(0, 0, 0, .3); } #home .tr-bar i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F0DC9A, #7A5C1E 70%); box-shadow: 0 1px 2px rgba(0, 0, 0, .6); } #home .tr-bar i:nth-child(1) { left: 14px; top: 10px; } #home .tr-bar i:nth-child(2) { right: 14px; top: 10px; } #home .tr-bar i:nth-child(3) { left: 14px; bottom: 10px; } #home .tr-bar i:nth-child(4) { right: 14px; bottom: 10px; } #home .tr-pedestal { position: absolute; top: 342px; bottom: 0; width: 84px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 3px, transparent 3px 9px), linear-gradient(90deg, #5E4818, #B08D3C 30%, #E2C468 48%, #B08D3C 65%, #5E4818); border-radius: 0 0 6px 6px; box-shadow: 0 0 30px rgba(0, 0, 0, .5); z-index: 0; } #home .tr-pedestal-l { left: calc(25% - 42px); } #home .tr-pedestal-r { right: calc(25% - 42px); } #home .tr-taps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(6px, 1.5vw, 20px); padding-top: 6px; } /* ---- a tap --------------------------------------------------------------- ONE BUTTON, top to bottom: the handle in its box, the faucet, the shank, the spout, the pour, the glass. Three states, all of them on the button so one selector moves everything: at rest the glass holds a finger of beer; under the pointer the handle tilts and the glass fills a third with a head on it; pulled (`is-pouring`, set by catnav.js for the length of the pour) it tilts further, the stream shows and the bubbles run. THE POINTER STATE IS FOR POINTERS. A finger leaves :hover on the last thing it touched until it touches something else, so on a phone the tap that was pulled came back from the board still leaning as if under a mouse. The hover rule is behind a hover-capable media query; the keyboard's focus ring state is not, and stays. */ #home .tr-tap { --tr-tilt: 0deg; --tr-fill: 12%; --tr-foam-op: 0; --tr-bubbles: paused; --tr-stream: 0; --tr-clap: 0deg; position: relative; display: flex; flex-direction: column; align-items: center; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; color: var(--tr-ink); min-width: 0; font: inherit; } @media (hover: hover) { #home .tr-tap:hover { --tr-tilt: -12deg; --tr-fill: 30%; --tr-foam-op: 1; --tr-clap: -22deg; } } #home .tr-tap:focus-visible { --tr-tilt: -12deg; --tr-fill: 30%; --tr-foam-op: 1; --tr-clap: -22deg; } #home .tr-tap.is-pouring { --tr-tilt: -28deg; --tr-fill: 82%; --tr-foam-op: 1; --tr-bubbles: running; --tr-stream: 1; --tr-clap: -22deg; } #home .tr-handle { position: relative; height: 268px; width: 100%; display: flex; justify-content: center; align-items: flex-end; } /* THE LEVER: the handle's drawing, the ferrule and the pin under it, turning as one about the pin's foot. Scaled 1.28 as the comp draws it. */ #home .tr-lever { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) scale(1.28) rotate(var(--tr-tilt)); transform-origin: bottom center; transition: transform .35s cubic-bezier(.3, 1.3, .5, 1); display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .6)); } #home .tr-ferrule { width: 22px; height: 10px; margin-top: 2px; background: linear-gradient(90deg, #6A6A76, #E0E0E8 40%, #A0A0AC 60%, #5A5A66); border-radius: 2px 2px 4px 4px; } #home .tr-pin { width: 9px; height: 16px; background: linear-gradient(90deg, #7A7A86, #F0F0F6 45%, #6A6A76); border-radius: 0 0 3px 3px; } /* SPORTS: a football on a wooden stem. THE BALL IS A LENS — a square with two corners rounded to the full and two nearly not, turned forty-five degrees — and everything drawn on it sits in a box turned back the other way, so the seam runs the ball's length, the two stripes cross its ends and the laces sit upright. The stem runs up behind it; the nameplate sits on its lower half, between the laces and the stripe. */ #home .tr-h-sports { position: relative; z-index: 2; width: 84px; height: 150px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); } #home .tr-ball { position: absolute; width: 104px; height: 104px; border-radius: 100% 18% 100% 18%; transform: rotate(-45deg); overflow: hidden; background: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .13) .6px, transparent 1.1px) 0 0 / 3px 3px, radial-gradient(ellipse at 42% 40%, #B2603A 0%, #964C2B 40%, #6F3418 78%, #4A200E 100%); box-shadow: inset 0 0 0 1px rgba(40, 16, 6, .7), inset -10px -8px 18px rgba(0, 0, 0, .45), inset 8px 8px 16px rgba(255, 190, 150, .16); } #home .tr-ball-in { position: absolute; left: -30%; top: -30%; width: 160%; height: 160%; transform: rotate(45deg); } #home .tr-seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(rgba(40, 16, 6, 0), rgba(40, 16, 6, .55) 15%, rgba(40, 16, 6, .55) 85%, rgba(40, 16, 6, 0)); box-shadow: 1px 0 0 rgba(255, 200, 160, .12); } #home .tr-stripe { position: absolute; left: 0; right: 0; height: 10px; background: linear-gradient(#F5F2EA, #DAD5C9); box-shadow: 0 -1px 0 rgba(40, 16, 6, .5), 0 1px 0 rgba(40, 16, 6, .5), inset 0 -3px 4px rgba(0, 0, 0, .12); } #home .tr-stripe-top { top: 19%; } #home .tr-stripe-bottom { bottom: 19%; } #home .tr-lace-slot { position: absolute; left: 50%; top: 39%; width: 12px; height: 22%; margin-left: -6px; background: #3A160A; border-radius: 6px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 200, 160, .12); } #home .tr-lace-v { position: absolute; left: 50%; top: 40%; width: 5px; height: 20%; margin-left: -2.5px; background: linear-gradient(90deg, #D8D3C6, #FFFFFF 50%, #D0CBBE); border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .5); } #home .tr-lace-h { position: absolute; left: 50%; top: 42.5%; width: 22px; height: 4.5px; margin-left: -11px; background: linear-gradient(#FFFFFF, #D8D3C6); border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 7px 0 #F4F1EA, 0 8px 2px rgba(0, 0, 0, .5), 0 14px 0 #F4F1EA, 0 15px 2px rgba(0, 0, 0, .5), 0 21px 0 #F4F1EA, 0 22px 2px rgba(0, 0, 0, .5); } #home .tr-specular { position: absolute; left: 22%; top: 28%; width: 14%; height: 34%; border-radius: 50%; background: linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)); filter: blur(2px); transform: rotate(6deg); } #home .tr-h-sports .tr-plate { position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); z-index: 1; display: flex; align-items: center; justify-content: center; width: 60px; height: 22px; background: linear-gradient(#F2F0E6, #DDD9CC); border: 2px solid #241C3D; border-radius: 5px; box-shadow: 0 2px 3px rgba(0, 0, 0, .45); } #home .tr-h-sports .tr-plate span { font-family: Graduate, Georgia, serif; font-size: 13px; letter-spacing: .03em; color: #241C3D; line-height: 1; } #home .tr-stem-sports { position: relative; z-index: 1; width: 20px; height: 76px; margin-top: -40px; background: linear-gradient(90deg, #6B4423, #C08E45 45%, #8A5A2E); border-radius: 4px; } /* GEOGRAPHY: a globe on a stem, its nameplate under it. THE GLOBE IS A PICTURE — the comp's own, images/taproom/globe.avif, drawn at 142% inside the circle so the sphere fills it and the picture's white ground is cropped away — with the comp's shading and a highlight over it. */ #home .tr-h-geo { position: relative; width: 116px; height: 116px; border-radius: 50%; background: url("/images/taproom/globe.avif") 50% 46% / 142% no-repeat; box-shadow: inset -10px -10px 22px rgba(0, 0, 0, .35), 0 0 0 1px #E8E2D2, 0 8px 18px rgba(0, 0, 0, .5); overflow: hidden; } #home .tr-h-geo i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .35), transparent 40%); pointer-events: none; } #home .tr-plate-geo { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 112px; height: 30px; margin-top: -8px; background: linear-gradient(#FFFDF5, #E8E2D2); border: 2px solid #241C3D; border-radius: 6px; box-shadow: 0 2px 3px rgba(0, 0, 0, .4); } #home .tr-plate-geo span { font-family: Bungee, sans-serif; font-size: 12px; letter-spacing: 0; color: #241C3D; line-height: 1; } #home .tr-stem-geo { width: 24px; height: 30px; background: linear-gradient(90deg, #C9C1AC, #FFFDF5 45%, #B8B0A0); border-radius: 0 0 8px 8px; box-shadow: inset 0 8px 0 -6px rgba(0, 0, 0, .15), inset 0 22px 0 -20px rgba(0, 0, 0, .15); } /* ENTERTAINMENT: a clapperboard. The top stick claps open under the pointer. */ #home .tr-h-ent { position: relative; width: 126px; display: flex; flex-direction: column; align-items: stretch; } #home .tr-clap-top, #home .tr-clap-bar { height: 20px; box-sizing: border-box; background: repeating-linear-gradient(-45deg, #F2F0E6 0 11px, #0F0E17 11px 22px); border: 2px solid #0F0E17; } #home .tr-clap-top { border-radius: 4px 4px 0 0; transform-origin: left bottom; transform: rotate(var(--tr-clap)); transition: transform .35s cubic-bezier(.3, 1.3, .5, 1); } #home .tr-clap-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 74px; box-sizing: border-box; background: linear-gradient(#262336, #0F0E17); border: 2px solid #0F0E17; border-radius: 0 0 6px 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); } #home .tr-clap-body span { font-family: Cinzel, serif; font-weight: 700; font-size: 12px; letter-spacing: .03em; color: #F2F0E6; line-height: 1; white-space: nowrap; } #home .tr-clap-body i { width: 78%; height: 1.5px; background: rgba(242, 240, 230, .5); } #home .tr-stem-ent { width: 20px; height: 56px; background: linear-gradient(90deg, #0F0E17, #4A4664 45%, #14121F); border-radius: 0 0 6px 6px; box-shadow: inset 2px 0 0 rgba(255, 255, 255, .15); } /* HISTORY: a marble column with a brass-edged plaque. */ #home .tr-col-cap { width: 74px; height: 9px; background: linear-gradient(#FFFDF5, #DDD9CC); border-radius: 2px; box-shadow: 0 2px 0 #B8B0A0; } #home .tr-col-neck { width: 60px; height: 9px; background: linear-gradient(#E8E2D2, #C9C1AC); border-radius: 0 0 14px 14px; } #home .tr-col-shaft { position: relative; width: 44px; height: 112px; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(90deg, #F2EEE2 0 3px, #E8E2D2 3px 7px, #C9C1AC 7px 9px, #E8E2D2 9px 11px); box-shadow: inset -6px 0 8px -4px rgba(0, 0, 0, .35), inset 6px 0 8px -4px rgba(255, 255, 255, .5); } #home .tr-col-plaque { display: flex; align-items: center; justify-content: center; width: 100px; height: 32px; background: linear-gradient(#3A3652, #221F33); border: 2px solid #C9A84B; border-radius: 3px; box-shadow: 0 3px 5px rgba(0, 0, 0, .5); } #home .tr-col-plaque span { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 15px; letter-spacing: .12em; color: #E8D9A0; line-height: 1; } #home .tr-col-base { width: 74px; height: 12px; background: linear-gradient(#E8E2D2, #B8B0A0); border-radius: 3px; } /* THE FAUCET, as the 13 Sep 2026 comp draws it: a chrome coupling collar behind a chrome body with a highlight along its top, a chrome spout straight down out of it, and the pour with a splash where it lands. The brass flange, the brass shank and the angled brass spout went with the comp. Chrome in both themes — it is metal, not ink. */ #home .tr-faucet { position: relative; width: 62px; height: 40px; margin-top: -2px; display: flex; align-items: center; justify-content: center; } #home .tr-faucet > i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: conic-gradient(from 200deg, #FFFFFF, #8E8E9A 14%, #F2F2F8 30%, #3C3C48 50%, #DEDEE6 66%, #6A6A76 84%, #FFFFFF); box-shadow: 0 5px 8px rgba(0, 0, 0, .6); } #home .tr-faucet > b { position: relative; width: 56px; height: 30px; border-radius: 15px; background: linear-gradient(#FFFFFF 0%, #D6D6DE 18%, #8A8A96 46%, #4A4A56 58%, #B4B4BE 82%, #2E2E3A 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 4px 6px rgba(0, 0, 0, .6); } #home .tr-faucet > b > i { position: absolute; left: 16%; right: 16%; top: 4px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .7); filter: blur(.5px); } #home .tr-spout { width: 15px; height: 30px; margin-top: -6px; background: linear-gradient(90deg, #2E2E3A, #C4C4CE 26%, #FFFFFF 44%, #9A9AA6 64%, #3C3C48); border-radius: 2px 2px 8px 8px; box-shadow: inset 0 -5px 0 #26262E, inset 0 -6px 0 rgba(255, 255, 255, .35), 0 3px 4px rgba(0, 0, 0, .55); } #home .tr-stream { position: relative; width: 6px; height: 34px; margin-top: -2px; border-radius: 3px; background: linear-gradient(90deg, rgba(242, 200, 90, .6), #FFD966 40%, rgba(217, 165, 54, .85)); box-shadow: 0 0 8px rgba(247, 203, 75, .55); opacity: var(--tr-stream); transition: opacity .2s; } #home .tr-stream > i { position: absolute; left: 50%; bottom: -6px; width: 26px; height: 10px; margin-left: -13px; border-radius: 50%; background: radial-gradient(ellipse at 50% 60%, #FFFDF6, rgba(255, 253, 246, 0) 75%); } /* ---- a glass --------------------------------------------------------------- ONE DRAWING, THREE SIZES: the glass under each tap, the six mugs of the flight, and the small glass on a phone. The sizes are custom properties so the shape is written once. Inside the body, bottom to top: the beer, the head with its three blobs and its shading, three bubbles, the ribs, two highlights. The handle is beside the body. */ #home .tr-glass { position: relative; display: block; flex: none; width: var(--tr-gw, 112px); height: var(--tr-gh, 140px); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55)); } #home .tr-glass-b { position: absolute; left: 0; top: 0; bottom: 0; width: 76%; box-sizing: border-box; border: 2px solid var(--tr-glass-edge); border-bottom: var(--tr-gfoot, 7px) solid var(--tr-glass-foot); border-radius: 5px 5px 9px 9px; background: var(--tr-glass-body); overflow: hidden; } #home .tr-beer { position: absolute; left: 0; right: 0; bottom: 0; height: var(--tr-fill); background: radial-gradient(ellipse at 50% 100%, rgba(120, 60, 0, .45), transparent 60%), linear-gradient(#F7CB4B 0%, #EDAD2A 45%, #D08A1C 100%); transition: height .5s ease-out; } #home .tr-foam { position: absolute; left: 0; right: 0; bottom: var(--tr-fill); height: 16%; background: var(--tr-foam); box-shadow: var(--tr-foam-shadow); opacity: var(--tr-foam-op); transition: bottom .5s ease-out, opacity .3s; border-radius: 4px 4px 0 0; } #home .tr-foam i { position: absolute; border-radius: 50%; background: var(--tr-foam-blob); box-shadow: var(--tr-foam-blob-shadow); } #home .tr-foam i:nth-child(1) { left: -6%; top: -34%; width: 46%; height: 70%; } #home .tr-foam i:nth-child(2) { left: 28%; top: -48%; width: 50%; height: 80%; background: var(--tr-foam-blob-2); } #home .tr-foam i:nth-child(3) { right: -4%; top: -22%; width: 36%; height: 60%; } #home .tr-foam b { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(rgba(255, 255, 255, 0), rgba(230, 190, 120, .35)); } #home .tr-bub { position: absolute; width: var(--tr-bub, 3px); height: var(--tr-bub, 3px); border-radius: 50%; background: rgba(255, 249, 232, .85); animation: tr-bubble 1.7s linear infinite; animation-play-state: var(--tr-bubbles); } #home .tr-bub-1 { left: 22%; bottom: 8%; } #home .tr-bub-2 { left: 55%; bottom: 5%; animation-duration: 2.2s; animation-delay: .6s; width: var(--tr-bub-2, 3px); height: var(--tr-bub-2, 3px); } #home .tr-bub-3 { left: 72%; bottom: 12%; width: 2px; height: 2px; animation-duration: 1.9s; animation-delay: 1.1s; } @keyframes tr-bubble { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .8; } 100% { transform: translateY(-70px); opacity: 0; } } #home .tr-ribs { position: absolute; left: 0; right: 0; bottom: 0; height: 32%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 16%, rgba(0, 0, 0, .1) 16% 20%); border-top: 2px solid rgba(255, 255, 255, .28); } #home .tr-hi1 { position: absolute; left: 8%; top: 5%; bottom: 8%; width: var(--tr-hi1, 6px); border-radius: 6px; background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .08)); } #home .tr-hi2 { position: absolute; right: 9%; top: 8%; bottom: 12%; width: var(--tr-hi2, 3px); border-radius: 3px; background: linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, .05)); } #home .tr-glass-h { position: absolute; right: 0; top: 20%; width: 34%; height: 50%; box-sizing: border-box; border: var(--tr-grip, 6px) solid var(--tr-glass-grip); border-left: 0; border-radius: 0 var(--tr-grip-r, 12px) var(--tr-grip-r, 12px) 0; box-shadow: inset -2px 0 0 rgba(255, 255, 255, .25); } /* The glass under a tap sits on the spout's pour. */ #home .tr-tap > .tr-glass { margin-top: -4px; } /* ---- the counter, and the rail on the floor under it --------------------- */ #home .tr-counter { position: relative; margin-top: -2px; height: 54px; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px 7px), repeating-linear-gradient(90deg, #6B4423 0 60px, #7A5230 60px 130px, #5E3B1E 130px 180px); box-shadow: inset 0 6px 0 rgba(242, 240, 230, .14), inset 0 8px 0 rgba(0, 0, 0, .35), inset 0 -12px 16px -10px rgba(0, 0, 0, .6), 0 -10px 30px rgba(0, 0, 0, .4); } /* THE BOARDS STAND ON THE FLOOR: the gradient starts where the counter ends and the brass rail runs along it, 12px down. The rail is the room's last child, hung off the room's foot so it lands inside the boards' padding. */ #home .tr-rail { position: absolute; left: 6%; right: 6%; bottom: -22px; height: 10px; border-radius: 5px; background: linear-gradient(#F0DC9A, #B08D3C 50%, #6E5320); box-shadow: 0 4px 8px rgba(0, 0, 0, .6); } html[data-design="on"] #home .home-grid { margin: 0 calc(-1 * var(--tr-bleed, 40px)); padding: 56px calc(var(--tr-bleed, 40px) + clamp(14px, 2vw, 40px)) 34px; background: var(--tr-floor, none); } /* The bleed the boards need, stated once for the three widths the site pads the home at: 40, then 26 under 1100px, then 18 on a phone. */ html[data-design="on"] #home .home-grid { --tr-bleed: 40px; } /* ---- the menu: the standings and the chalkboard --------------------------- */ /* INSET FROM THE CARD'S EDGE, NOT THE ROOM'S. The room bleeds past the card and .wrap clips it there; the wall can lean on that (its bar runs to the edge on purpose), the menu cannot — measured from the room, its first column stood under the card's edge and the way back read "k to the taps". */ #home .tr-menu { grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); gap: clamp(16px, 3vw, 44px); align-items: start; margin: 0 calc(var(--tr-bleed) + clamp(14px, 2vw, 40px)); padding-top: 18px; animation: tr-menu-in .45s ease-out; } /* THE FLIGHT IS FULL WIDTH: nothing has been poured yet. */ #home .tr-menu.is-flight { grid-template-columns: minmax(0, 1fr); } #home .tr-menu.is-flight .tr-aside { display: none; } @keyframes tr-menu-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* THE WAY BACK: the arrow, then the words, at a size a thumb can find. */ #home .tr-back { display: inline-flex; align-items: center; gap: 9px; background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--tr-accent); font-family: var(--font); font-weight: 700; font-size: 17px; line-height: 1.2; } #home .tr-back i { font-style: normal; font-size: 1.4em; line-height: 1; } @media (hover: hover) { #home .tr-back:hover { color: var(--tr-hover-ink); } } /* THE COLUMN BESIDE THE BOARD: the category's standings for the day. The way back stood over them until 14 Sep 2026; it is in the board's head now, at every width. */ #home .tr-aside { display: flex; flex-direction: column; align-items: stretch; gap: 16px; position: sticky; top: 16px; } #home .tr-standings { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 14px; background: var(--tr-panel); border: 1px solid var(--tr-panel-edge); border-radius: 18px; box-shadow: var(--tr-panel-shadow); color: var(--tr-ink); } #home .tr-standings-h { display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; } #home .tr-standings-h b { font-family: var(--display, var(--font)); font-weight: 900; font-size: 19px; letter-spacing: -.01em; line-height: 1.1; } #home .tr-standings-h i { font-style: normal; font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tr-accent); } #home .tr-standings-rows { display: flex; flex-direction: column; } #home .tr-standing { display: grid; grid-template-columns: 18px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--tr-panel-rule); } #home .tr-standing:last-child { border-bottom: 0; } #home .tr-standing b { font-family: var(--mono); font-weight: 600; font-size: 13px; color: var(--tr-muted); } #home .tr-standing-who { font-weight: 700; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #home .tr-standing i { font-style: normal; font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--tr-accent); font-variant-numeric: tabular-nums; } #home .tr-standings-none { display: block; padding: 6px 0 4px; font-size: 13px; line-height: 1.45; color: var(--tr-muted); } /* THE CHALKBOARD. */ #home .tr-board { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px clamp(14px, 2.4vw, 30px) 26px; background: var(--tr-board); border: 8px solid var(--tr-board-edge); border-radius: 8px; box-shadow: var(--tr-board-shadow); } #home .tr-board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid var(--tr-board-rule); padding-bottom: 10px; } /* THE WAY BACK, AT THE RIGHT OF THE HEAD — where "5 on the board" stood until 14 Sep 2026, when the owner asked for the link there and the count gone. It was the column's on a wide screen and the head's on a phone; it is the head's at every width now. `order` puts it after the title here: the markup has it first, which is the order a phone's column wants. */ #home .tr-board-head > .tr-back { display: inline-flex; order: 2; } #home .tr-board-title { font-family: Bungee, sans-serif; font-size: clamp(18px, 2.2vw, 30px); line-height: 1; color: var(--tr-ink); text-shadow: 0 3px 0 var(--tr-head-shadow); } /* THE FLIGHT: pick a sport. Six mugs on a shelf. */ #home .tr-flight { display: flex; flex-direction: column; gap: 14px; padding: 6px 0 4px; } #home .tr-flight-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } #home .tr-flight-pick { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--tr-accent); white-space: nowrap; } #home .tr-mugs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; justify-items: center; align-items: end; padding: 16px 6px 0; margin-bottom: -14px; } #home .tr-mug { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 0 0; width: 100%; background: transparent; border: 0; margin: 0; color: var(--tr-ink); cursor: pointer; font: inherit; transition: transform .2s, filter .2s; } @media (hover: hover) { #home .tr-mug:hover { transform: translateY(-6px); filter: brightness(1.12) drop-shadow(0 0 16px var(--tr-mug-glow)); } } #home .tr-mug:focus-visible { transform: translateY(-6px); filter: brightness(1.12) drop-shadow(0 0 16px var(--tr-mug-glow)); } #home .tr-mug .tr-glass { --tr-gw: min(164px, 100%); --tr-gh: auto; --tr-gfoot: 12px; --tr-hi1: 7px; --tr-grip: 10px; --tr-grip-r: 20px; --tr-fill: 80%; --tr-foam-op: 1; aspect-ratio: 164 / 216; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .6)); } #home .tr-mug .tr-hi2 { display: none; } #home .tr-plate-mug { position: absolute; left: 5%; right: 5%; top: 36%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 3px; background: linear-gradient(#F2F0E6, #DDD9CC); border: 2px solid #241C3D; border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, .4); } #home .tr-plate-mug span { font-family: Graduate, Georgia, serif; font-size: clamp(11px, 1.35vw, 17px); letter-spacing: .02em; color: #241C3D; line-height: 1; white-space: nowrap; } #home .tr-shelf { height: 30px; margin: 0 -6px; border-radius: 4px; background: repeating-linear-gradient(90deg, #6B4423 0 70px, #7A5230 70px 150px, #5E3B1E 150px 210px); box-shadow: inset 0 4px 0 rgba(242, 240, 230, .14), 0 10px 0 #3A2A1A, 0 18px 26px rgba(0, 0, 0, .55); } #home .tr-mug > .tr-shelf { display: none; } /* THE LEAGUE TABS, over a league's board. */ #home .tr-tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } #home .tr-tab-all { padding: 8px 12px; border-radius: 999px; background: transparent; border: 0; cursor: pointer; color: var(--tr-accent); font-family: var(--font); font-weight: 700; font-size: 13px; } @media (hover: hover) { #home .tr-tab-all:hover { color: var(--tr-hover-ink); } } #home .tr-tab { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; cursor: pointer; background: var(--tr-tab-bg); border: 2px solid var(--tr-tab-edge); color: var(--tr-tab-ink); font-family: Graduate, Georgia, serif; font-size: 13px; letter-spacing: .06em; transition: background .2s, border-color .2s, color .2s; } @media (hover: hover) { #home .tr-tab:hover { border-color: var(--tr-accent); } } #home .tr-tab.is-on { background: var(--tr-tab-on-bg); border-color: var(--tr-tab-on-edge); color: var(--tr-tab-on-ink); } #home .tr-tab i { width: 12px; height: 16px; clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); background: linear-gradient(#FFF9E8 0 25%, #E8B84A 25%); } /* THE ROWS: a mode a line, its name in the category's face, and the way in at the right. A LINE, NOT A BUTTON: the doors at its right are the buttons — Pour, or Join lobby, and MINI beside Pour on GeoGauntlet — and the whole line answers a tap through the board's one listener (catnav.js). A live room carries its clock beside the door and its state under its name. No subtitle under any other name, and no rounding on the line: the dashed rule runs straight across. */ #home .tr-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; width: 100%; padding: 16px 6px; margin: 0; box-sizing: border-box; border: 0; border-bottom: 2px dashed var(--tr-row-rule); border-radius: 0; background: transparent; color: var(--tr-ink); min-width: 0; text-align: left; cursor: pointer; transition: background .2s, transform .15s; } @media (hover: hover) { #home .tr-row:hover { background: var(--tr-accent-wash); transform: translateX(4px); } } #home .tr-line { display: flex; flex-direction: column; gap: 4px; min-width: 0; } #home .tr-line-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } #home .tr-name { font-family: var(--tr-face); font-weight: var(--tr-weight); letter-spacing: var(--tr-spacing); font-size: clamp(20px, 2vw, 28px); line-height: 1.1; } #home .tr-tag { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tr-muted); } /* "NEW", ON A LINE THAT IS: the five Gauntlets that arrived in September 2026 wear it (`isNew` in CN_MENUS). Solid accent, the way the MINI door is, so it reads at a glance and not as a second tag. */ #home .tr-new { padding: 3px 8px; border-radius: 999px; background: var(--tr-accent); color: var(--tr-accent-ink); font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; } /* THE OCCASION, when the day has one: today's NFL Gauntlet note ("Week 1 Challenge"), painted beside the name by cnEdition. Outlined in the accent rather than filled, so it reads as an occasion and not as a second NEW. */ #home .tr-edition { padding: 3px 9px; border-radius: 999px; border: 1.5px solid var(--tr-accent); color: var(--tr-accent); font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; } #home .tr-side { display: flex; align-items: center; gap: 10px; flex: none; } #home .tr-live { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--tr-accent); font-variant-numeric: tabular-nums; } #home .tr-live:empty { display: none; } #home .tr-cta, #home .tr-alt { padding: 9px 16px; border-radius: 999px; cursor: pointer; border: 2px solid var(--tr-accent); background: transparent; color: var(--tr-accent); font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; line-height: 1.2; } /* THE SOLID DOORS: a live room's, and the MINI beside GeoGauntlet's Pour. */ #home .tr-row.is-live .tr-cta, #home .tr-alt { background: var(--tr-accent); color: var(--tr-accent-ink); } /* THE CRESTS ON A ROW THAT PICKS A TEAM. Six badges in white discs, fanned so each sits over the one before it, and a count of the rest in the same shape; beside the name, wrapping under it when the line is short. A WHITE DISC UNDER EVERY CREST, and it is not decoration: navy badges on a near-black board would otherwise vanish. See CN_FACES in catnav.js. */ #home .tr-crests { display: inline-flex; align-items: center; pointer-events: none; } #home .tr-crest { width: clamp(26px, 2.4vw, 36px); height: clamp(26px, 2.4vw, 36px); border-radius: 50%; background: #fff; flex: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px rgba(37, 58, 143, .38), 0 3px 10px rgba(37, 58, 143, .55); margin-left: -9px; } #home .tr-crest:first-child { margin-left: 0; } #home .tr-crest img { width: 76%; height: 76%; object-fit: contain; display: block; } #home .tr-crest-more { font: 800 clamp(9px, .9vw, 12px)/1 var(--font, sans-serif); color: #241C3D; letter-spacing: -.02em; } /* ---- THE WEIGHT OF THE TWO ONE-WEIGHT FACES ------------------------------ Graduate and Bungee ship in one weight each, so "a little heavier" and "a little lighter" are a hairline stroke: Sports' names, plates, tabs and mug labels take a stroke in their own ink, which thickens every edge by a fraction; Geography's take one in the colour of what they sit on, which eats the same fraction off every edge. */ #home .tr-menu[data-type="sports"] .tr-name, #home .tr-h-sports .tr-plate span, #home .tr-plate-mug span, #home .tr-tab span { -webkit-text-stroke: .35px currentColor; } #home .tr-menu[data-type="geo"] .tr-name { -webkit-text-stroke: .5px var(--tr-board); } #home .tr-plate-geo span { -webkit-text-stroke: .5px #F3EFE3; } /* ---- NOBODY IS ANIMATED AT WHO ASKED NOT TO BE ------------------------- */ @media (prefers-reduced-motion: reduce) { #home .tr *, #home .tr *::before, #home .tr *::after { animation: none !important; transition: none !important; } } /* ---- PAPER: THE LIGHT COMP'S COLOURS, AND NOTHING ELSE OF IT ------------- */ html[data-theme="light"] #home .tr { --tr-ink: #241C3D; --tr-muted: #6B6880; --tr-accent: #3B5BDB; --tr-accent-ink: #F2F0E6; --tr-accent-wash: rgba(59, 91, 219, .06); --tr-hover-ink: #241C3D; /* THE SAME ROOM IN DAYLIGHT: the lamps warmer and the planks pale, the vignette a navy wash instead of black. */ --tr-room: radial-gradient(ellipse 30% 40% at 18% 34%, rgba(255, 210, 120, .35), transparent 70%), radial-gradient(ellipse 30% 40% at 50% 30%, rgba(255, 210, 120, .4), transparent 70%), radial-gradient(ellipse 30% 40% at 82% 34%, rgba(255, 210, 120, .35), transparent 70%), repeating-linear-gradient(90deg, #EDE6D6 0 6px, #F4EFE2 6px 88px, #E4DCC8 88px 92px), #F2F0E6; --tr-vignette: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(36, 28, 61, .18) 100%); --tr-tagline-ink: #241C3D; --tr-tagline-shadow: 0 4px 0 #C8F42C; --tr-board: #FFFDF5; --tr-board-edge: #6B4423; --tr-board-shadow: inset 0 0 0 2px #DDD9CC, 0 12px 30px rgba(36, 28, 61, .15); --tr-board-rule: rgba(36, 28, 61, .4); --tr-row-rule: rgba(36, 28, 61, .55); --tr-head-shadow: #C8F42C; --tr-panel: #FFFFFF; --tr-panel-edge: #DDD9CC; --tr-panel-rule: #EDE9DC; --tr-panel-shadow: 0 8px 20px rgba(36, 28, 61, .08); --tr-glass-edge: rgba(36, 28, 61, .35); --tr-glass-foot: rgba(36, 28, 61, .3); --tr-glass-body: linear-gradient(90deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .25) 28%, rgba(255, 255, 255, .2) 68%, rgba(255, 255, 255, .6)); --tr-glass-grip: rgba(36, 28, 61, .32); --tr-foam: linear-gradient(#FFFFFF, #F1E4C3); --tr-foam-shadow: inset 0 -2px 0 rgba(200, 150, 60, .5), 0 -1px 0 rgba(36, 28, 61, .25); --tr-foam-blob: #FFFFFF; --tr-foam-blob-2: #FFFFFF; --tr-foam-blob-shadow: inset 0 -2px 0 rgba(200, 150, 60, .35), 0 0 0 1px rgba(36, 28, 61, .22); --tr-tab-bg: #FFFFFF; --tr-tab-edge: #DDD9CC; --tr-tab-ink: #241C3D; --tr-tab-on-bg: #3B5BDB; --tr-tab-on-edge: #3B5BDB; --tr-tab-on-ink: #F2F0E6; --tr-floor: linear-gradient(#DDD9CC, #EDE9DC 60px, #F2F0E6); --tr-mug-glow: rgba(59, 91, 219, .35); } /* ---- THE WIDTHS THE HOME IS PADDED AT ----------------------------------- */ @media (max-width: 1100px) { #home .tr { --tr-bleed: 26px; } html[data-design="on"] #home .home-grid { --tr-bleed: 26px; } } /* ---- THE ROOM MEETS THE TOP BAR, ON EVERY WIDTH --------------------------- The top bar carries a 10px margin under it (theme.css), and over the planks it read as a gap — on a computer first, and on a phone once the comps were matched there (13 Sep 2026). The room comes up under it everywhere. */ html[data-design="on"] #home .tr { margin-top: -10px; } /* ---- THE PAGE FRAME ON A COMPUTER ---------------------------------------- THE TOP BAR MEETS THE TOP OF THE WINDOW. The site is a rounded card on a page ground, padded 22px from the top, and on a computer that reads as a gap over the planks: the card sits flush with the top of the window, its top corners squared so no ground shows through them. A phone keeps its 10px frame. */ @media (min-width: 701px) { html[data-design="on"] body { padding-top: 0; } html[data-design="on"] .wrap { border-top-left-radius: 0; border-top-right-radius: 0; } /* THE ONE-MINUTE CALL IS CENTRED ON THE BAR'S LINE by a constant that assumes the 22px page padding (see .gxl-soon in social.css); with the padding gone the bar runs 0 to 72, and (72 - 53) / 2 keeps the strip level with it. */ html[data-design="on"] .gxl-soon { top: 10px; } } /* ---- A PHONE, AS THE PHONE COMP LAYS IT OUT ------------------------------ "Trivia Gauntlet Taproom - Phone". The same wall at three-quarter size: four taps in a row over a lower bar, the same brass, the same counter. The menu is one column with no standings beside it — the board's head carries the way back instead — and the flight's six mugs wrap onto two shelves. The two rotating boards the site hides on a phone are drawn here, one over the other, under the counter. */ @media (max-width: 700px) { #home .tr { --tr-bleed: 18px; } html[data-design="on"] #home .home-grid { --tr-bleed: 18px; padding: 40px calc(var(--tr-bleed) + 12px) 20px; } html[data-design="on"] #home .leaders { display: block; } #home .tr-tagline { display: block; margin: 12px 14px 0; text-align: center; } #home .tr-tagline h1 { margin: 0; font-family: Bungee, var(--font, sans-serif); font-weight: 400; font-size: clamp(26px, 8vw, 34px); line-height: 1; letter-spacing: 0; color: var(--tr-tagline-ink); text-shadow: var(--tr-tagline-shadow); } /* THE HEADLINE IS THE TAPS'. When a board is poured the wall is put away (above) and "ON TAP TONIGHT" goes with it: on a phone the board is the whole screen, and a headline over it named the wrong thing. */ #home .tr.is-poured .tr-tagline { display: none; } #home .tr-wall { margin: 8px 8px 0; } #home .tr-menu { margin: 8px calc(var(--tr-bleed) + 8px) 0; } #home .tr-bar { top: 204px; height: 52px; border-radius: 26px; } /* THE PLATE, CENTRED ON THE BAR AND ON TWO LINES. width: min-content breaks the name at its space, and the centring is the computer rule's own — top and left at 50%, translated back by half — so the plate sits in the middle of the bar whatever the taps do over it; the two middle spouts cross it at this width, which is as asked (13 Sep 2026). */ #home .tr-bar b { width: min-content; white-space: normal; text-align: center; padding: 3px 6px; font-size: 8.5px; letter-spacing: .12em; line-height: 1.2; } #home .tr-pedestal { display: none; } #home .tr-taps { gap: 4px; } #home .tr-handle { height: 190px; } #home .tr-lever { transform: translateX(-50%) scale(.74) rotate(var(--tr-tilt)); } /* The faucet at four-fifths, the way the handle above it is scaled. */ #home .tr-faucet { width: 50px; height: 32px; } #home .tr-faucet > i { width: 35px; height: 35px; } #home .tr-faucet > b { width: 45px; height: 24px; border-radius: 12px; } #home .tr-faucet > b > i { top: 3px; height: 5px; } #home .tr-spout { width: 12px; height: 24px; margin-top: -5px; } #home .tr-stream { width: 5px; height: 28px; } #home .tr-tap > .tr-glass { --tr-gw: 84px; --tr-gh: 106px; } /* THE MENU IS ONE COLUMN AND THE STANDINGS ARE NOT DRAWN. */ #home .tr-menu, #home .tr.is-poured .tr-menu { grid-template-columns: minmax(0, 1fr); } #home .tr-aside { display: none; } #home .tr-board { gap: 12px; padding: 14px 12px 18px; border-width: 6px; } #home .tr-board-head { flex-direction: column; align-items: flex-start; gap: 8px; } /* The link above the title, as it always was here: `order` back to the markup's, undoing the wide screen's placing at the right. */ #home .tr-board-head > .tr-back { display: inline-flex; font-size: 15px; order: 0; } #home .tr-board-title { font-size: 20px; } /* THE FLIGHT: side-view mugs, three and three on the table, each on its own length of shelf. */ #home .tr-mugs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; padding: 8px 4px 0; margin-bottom: 0; } #home .tr-mug { width: 104px; flex: none; } #home .tr-mug .tr-glass { --tr-gw: 100px; } #home .tr-plate-mug span { font-size: 13px; } #home .tr-plate-mug.is-long span { font-size: 10px; } #home .tr-flight > .tr-shelf { display: none; } #home .tr-mug > .tr-shelf { display: block; width: 120%; height: 18px; margin: 0 -10%; border-radius: 0; background: repeating-linear-gradient(90deg, #6B4423 0 40px, #7A5230 40px 90px, #5E3B1E 90px 130px); box-shadow: inset 0 3px 0 rgba(242, 240, 230, .14), 0 6px 0 #3A2A1A; } #home .tr-tab-all { padding: 8px 12px 8px 0; white-space: nowrap; } #home .tr-name { font-size: 19px; line-height: 1.25; } #home .tr-line-top { gap: 10px; } #home .tr-crest { width: 26px; height: 26px; margin-left: -8px; } #home .tr-cta, #home .tr-alt { padding: 7px 10px; } } /* ---- THE LIVE CALL'S DISMISS, ON A PHONE ------------------------------------ The one-minute strip stacks on a phone (social.css, under 560px) and its dismiss is a 14px cross in the corner of a thumb-sized panel. A size larger here, and only here. */ @media (max-width: 560px) { html[data-design="on"] .gxl-soonx { font-size: 18px; padding: 5px 9px; } }