/* * Booking: inert buttons and the booking window. * * The design has no booking window, so it repeats the site's login popup: a dark card with * cream text, the red "Close" pill above it, the same paddings and the same overlay. Sizes are * in the site unit --u. The window sits on , outside the sections that declare the unit, * so the same three steps are declared here again; 100cqi resolves against , which the * site makes a size container. */ /* ------------------------------------------------------------ inert buttons ---- */ /* * Buttons that exist in the design but have nothing behind them point at #tower-disabled: * contacting a master, creating a game, a game with no seats left. They stay visible, as the * design wants, and plainly do not invite a click. */ a[href="#tower-disabled"] { cursor: default; opacity: 0.45; pointer-events: none; } /* ------------------------------------------------------------------ window ---- */ /* * The scrollbar gutter is kept while the page is locked: --u is counted from the width of * , and a disappearing scrollbar would make the whole page jump in scale. */ html.tbook-lock { overflow: hidden; scrollbar-gutter: stable; } .tbook { --u: calc(100cqi / 1440); position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: calc(20 * var(--u)); font-family: Inter, system-ui, sans-serif; } .tbook[hidden], .tbook [hidden] { display: none !important; } .tbook__overlay { position: absolute; inset: 0; background: rgba(5, 5, 5, 0.6); } .tbook__box { position: relative; display: flex; flex-direction: column; width: 100%; max-width: calc(500 * var(--u)); max-height: 100%; } .tbook__close { align-self: flex-end; display: flex; align-items: center; justify-content: center; height: calc(22 * var(--u)); margin: 0 0 calc(10 * var(--u)); padding: 0 calc(14 * var(--u)); border: 0; border-radius: calc(30 * var(--u)); background: var(--red, #7e2422); color: var(--cream, #fffdf7); font: 500 12px/1 Inter, system-ui, sans-serif; cursor: pointer; } .tbook__close:hover, .tbook__close:focus-visible { background: var(--red-dark, #551414); } .tbook__card { overflow: auto; padding: calc(34 * var(--u)) calc(43 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--bg, #141313); color: var(--cream, #fffdf7); font-size: calc(16 * var(--u)); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; } .tbook.is-busy .tbook__card { cursor: progress; } .tbook__heading { margin: 0 0 calc(20 * var(--u)); font-family: "Carol Gothic", Inter, system-ui, sans-serif; font-size: calc(32 * var(--u)); font-weight: 400; line-height: var(--lh-h2, 0.76); letter-spacing: 0; text-transform: lowercase; } .tbook__game { font-size: calc(20 * var(--u)); line-height: 1.2; } .tbook__when { margin-top: calc(6 * var(--u)); color: var(--text-muted, #d9d9d9); } .tbook__text { margin-top: calc(16 * var(--u)); line-height: var(--lh-body, 1.3); } /* The optional text of a master application: cream paper on the dark card, like the site's fields. */ .tbook__field { margin-top: calc(20 * var(--u)); } .tbook__label { display: block; margin: 0 0 calc(8 * var(--u)); color: var(--text-muted, #d9d9d9); font-size: calc(14 * var(--u)); line-height: var(--lh-body, 1.3); } .tbook__input { display: block; box-sizing: border-box; width: 100%; min-height: calc(110 * var(--u)); margin: 0; padding: calc(10 * var(--u)) calc(12 * var(--u)); border: 0; border-radius: calc(4 * var(--u)); background: var(--cream, #fffdf7); color: var(--ink, #3c3c3c); font: inherit; font-size: calc(14 * var(--u)); line-height: var(--lh-body, 1.3); letter-spacing: -0.02em; resize: vertical; } .tbook__input::placeholder { color: #8a8a8a; opacity: 1; } .tbook__input:focus-visible { outline: calc(2 * var(--u)) solid var(--red, #7e2422); outline-offset: calc(2 * var(--u)); } .tbook__actions { display: flex; flex-direction: column; gap: calc(10 * var(--u)); margin-top: calc(26 * var(--u)); } .tbook__btn { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: calc(41 * var(--u)); margin: 0; padding: calc(6 * var(--u)) calc(18 * var(--u)); border: calc(1 * var(--u)) solid transparent; border-radius: calc(4 * var(--u)); font: inherit; line-height: var(--lh-btn, 1.5); text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; } .tbook__btn--primary { background: var(--red, #7e2422); color: var(--cream, #fffdf7); } .tbook__btn--primary:hover, .tbook__btn--primary:focus-visible { background: var(--red-dark, #551414); color: var(--cream, #fffdf7); } .tbook__btn--secondary { border-color: var(--cream, #fffdf7); background: transparent; color: var(--cream, #fffdf7); } .tbook__btn--secondary:hover, .tbook__btn--secondary:focus-visible { background: var(--cream, #fffdf7); color: var(--ink, #3c3c3c); } .tbook__btn:disabled { opacity: 0.6; cursor: progress; } @media (max-width: 991px) { .tbook { --u: calc(100cqi / 960); } } @media (max-width: 600px) { .tbook { --u: calc(100cqi / 320); padding: calc(10 * var(--u)); } /* The design card (500 units) is wider than a phone: the site container is 300 units. */ .tbook__box { max-width: calc(300 * var(--u)); } .tbook__card { padding: calc(24 * var(--u)) calc(20 * var(--u)) calc(28 * var(--u)); } .tbook__heading { font-size: calc(24 * var(--u)); line-height: 0.9; } .tbook__game { font-size: calc(16 * var(--u)); } .tbook__card, .tbook__btn, .tbook__label, .tbook__input { font-size: calc(13 * var(--u)); } }