/* Team Boca app: design system. Everything is scoped under .tb-app (and .tb-join for the invite page) so portal theme rules cannot reach in, and nothing here leaks out. Colors are tokens; dark mode swaps them under [data-theme="dark"]. Layout honours the iPhone safe areas. */ html.tb-lock, html.tb-lock body { overflow: hidden !important; height: 100% !important; overscroll-behavior: none; background: #070b19 !important; } html.tb-lock.tb-light, html.tb-lock.tb-light body { background: #f2f4fa !important; } /* The portal page underneath takes no space at all (a wide hidden element could still widen the page on iOS). */ html.tb-lock body > *:not(.tb-app):not(.tb-join):not(script):not(style):not(link) { display: none !important; } .tb-app, .tb-join { --tb-blue: #046bd2; --tb-blue-2: #1a86f5; --tb-blue-3: #045cb4; --tb-navy: #131a6e; --tb-ink: #0b1640; --tb-green: #10b981; --tb-green-2: #059669; --tb-amber: #f59e0b; --tb-red: #ef4444; --tb-violet: #7c5cff; --tb-bg: #f2f4fa; --tb-surface: #ffffff; --tb-surface-2: #f4f6fb; --tb-surface-3: #e9edf6; --tb-line: rgba(15, 23, 42, .08); --tb-line-2: rgba(15, 23, 42, .14); --tb-text: #0d1530; --tb-text-2: #4a5575; --tb-text-3: #8a94b2; --tb-bar-bg: rgba(242, 244, 250, .78); --tb-tab-bg: rgba(255, 255, 255, .86); --tb-bubble-them: #e9edf6; --tb-bubble-them-text: #0d1530; --tb-shadow: 0 1px 2px rgba(13, 21, 48, .05), 0 6px 20px rgba(13, 21, 48, .06); --tb-shadow-lg: 0 18px 50px rgba(13, 21, 48, .22); --tb-grad: linear-gradient(135deg, #1a86f5 0%, #046bd2 42%, #131a6e 100%); /* Home and welcome headers: one solid colour along the top edge, which the status bar takes. */ --tb-hero-grad: linear-gradient(180deg, #1c6fdc 0%, #0f58c9 34%, #0b3a9e 70%, #131a6e 100%); --tb-radius: 20px; --tb-radius-sm: 12px; --tb-safe-top: env(safe-area-inset-top, 0px); --tb-safe-bottom: env(safe-area-inset-bottom, 0px); --tb-safe-left: env(safe-area-inset-left, 0px); --tb-safe-right: env(safe-area-inset-right, 0px); --tb-bar-h: 52px; --tb-tab-h: 62px; --tb-tab-float: max(12px, calc(var(--tb-safe-bottom) - 10px)); --tb-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --tb-ease: cubic-bezier(.22, .9, .28, 1); --tb-spring: cubic-bezier(.3, 1.25, .5, 1); /* Depth: the screen canvas (soft brand glow), cards, and frosted glass for bars. */ --tb-canvas: radial-gradient(120% 60% at 0% -10%, rgba(26, 134, 245, .11), transparent 55%), radial-gradient(90% 50% at 100% 0%, rgba(124, 92, 255, .08), transparent 55%), #f2f4fa; --tb-card: #fff; --tb-card-ring: 0 0 0 .5px rgba(15, 23, 42, .06); --tb-glass: rgba(250, 251, 255, .76); --tb-glass-ring: inset 0 0 0 .5px rgba(15, 23, 42, .1), 0 12px 34px rgba(13, 21, 48, .16); --tb-lens: rgba(4, 107, 210, .1); --tb-accent: #046bd2; --tb-seg-on: #fff; --tb-sheet: #fff; } .tb-app[data-theme="dark"] { --tb-bg: #070b19; --tb-surface: #10172d; --tb-surface-2: #151e3a; --tb-surface-3: #1d2848; --tb-line: rgba(255, 255, 255, .07); --tb-line-2: rgba(255, 255, 255, .13); --tb-text: #eef2ff; --tb-text-2: #a9b3d3; --tb-text-3: #6d789c; --tb-bar-bg: rgba(9, 14, 32, .72); --tb-tab-bg: rgba(12, 18, 36, .86); --tb-bubble-them: rgba(255, 255, 255, .08); --tb-bubble-them-text: #eef2ff; --tb-canvas: radial-gradient(120% 55% at 0% -8%, rgba(26, 134, 245, .22), transparent 55%), radial-gradient(90% 45% at 105% 4%, rgba(124, 92, 255, .16), transparent 55%), radial-gradient(90% 55% at 50% 118%, rgba(16, 185, 129, .1), transparent 60%), #070b19; --tb-card: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)), #0e152c; --tb-card-ring: inset 0 0 0 .5px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .05); --tb-glass: rgba(16, 23, 48, .66); --tb-glass-ring: inset 0 0 0 .5px rgba(255, 255, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .07), 0 16px 44px rgba(0, 0, 0, .5); --tb-lens: rgba(90, 167, 255, .16); --tb-accent: #5aa7ff; --tb-seg-on: #2a3763; --tb-sheet: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 120px), #0e152c; --tb-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .25); --tb-shadow-lg: 0 18px 50px rgba(0, 0, 0, .55); color-scheme: dark; } /* -------------------------------------------------------------------- reset */ .tb-app, .tb-app *, .tb-app *::before, .tb-app *::after, .tb-join, .tb-join *, .tb-join *::before, .tb-join *::after { box-sizing: border-box; } .tb-app { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99990; display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); background: var(--tb-bg); color: var(--tb-text); font: 400 16px/1.4 var(--tb-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; text-align: left; letter-spacing: normal; overflow: hidden; color-scheme: light; } .tb-app.is-keyboard { bottom: auto; height: var(--tb-vh, 100%); } /* Installed on iOS/iPadOS 26 (WebKit bug 301108) the web view stops short of the screen bottom by the status-bar height. That band is outside the page: nothing drawn in CSS reaches it (a 100vh shell is just clipped there), and iOS fills it with the body background it saw at load. So the shell stays pinned to the visible area, and app.cfm paints html/body in the app colour before first paint. */ .tb-app [hidden], .tb-join [hidden] { display: none !important; } .tb-app :where(h1, h2, h3, h4, h5, p, ol, ul, li, figure, blockquote) { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; color: inherit; } .tb-app :where(ol, ul) { list-style: none; } /* Resets sit at (0,1,0) via :where(), so they beat bare portal element rules but every single-class component rule below (declared later) wins over them. */ .tb-app :where(button), .tb-join :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent; line-height: inherit; text-transform: none; letter-spacing: inherit; box-shadow: none; min-width: 0; } .tb-app :where(a), .tb-join :where(a) { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; } .tb-app :where(img) { max-width: 100%; border: 0; } .tb-app :where(input, textarea, select), .tb-join :where(input) { font: inherit; color: inherit; margin: 0; } .tb-app i[class*="fa-"] { font-style: normal; line-height: 1; } .tb-app :focus-visible { outline: 2px solid var(--tb-blue-2); outline-offset: 2px; } .tb-app b, .tb-app strong { font-weight: 650; } /* ------------------------------------------------------------------- stage */ .tb-stage { position: relative; overflow: hidden; min-height: 0; } .tb-screen { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--tb-canvas); transform: translateX(0); transition: transform .34s var(--tb-ease), opacity .25s ease, filter .34s var(--tb-ease); will-change: transform; } .tb-screen.is-entering { transform: translateX(100%); } .tb-screen.is-leaving { transform: translateX(100%); box-shadow: -12px 0 30px rgba(0, 0, 0, .12); z-index: 3; } .tb-screen.is-under { transform: translateX(-24%); filter: brightness(.94); pointer-events: none; } .tb-screen.is-returning { transform: translateX(0); } .tb-screen.is-fade { opacity: 0; transform: translateY(10px) scale(.992); } @media (prefers-reduced-motion: reduce) { .tb-screen { transition: none; } } /* ---------------------------------------------------------------------- bar */ .tb-bar { position: relative; z-index: 5; flex: 0 0 auto; display: grid; grid-template-columns: minmax(64px, 1fr) auto minmax(64px, 1fr); align-items: center; gap: 8px; min-height: calc(var(--tb-bar-h) + var(--tb-safe-top)); padding: var(--tb-safe-top) calc(10px + var(--tb-safe-right)) 0 calc(10px + var(--tb-safe-left)); background: var(--tb-bar-bg); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-bottom: .5px solid transparent; transition: border-color .2s, background-color .2s; } .tb-bar.is-scrolled { border-bottom-color: var(--tb-line-2); } /* Large-title screens: the bar is clear over the title and frosts once the content scrolls under it. */ .tb-bar.has-large:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } .tb-bar.is-clear { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } .tb-bar-side { display: flex; align-items: center; gap: 4px; min-width: 0; } .tb-bar-side--end { justify-content: flex-end; } .tb-bar-title { font-weight: 650; font-size: 17px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; } .tb-bar.has-large .tb-bar-title { opacity: 0; transition: opacity .18s; } .tb-bar.has-large.show-title .tb-bar-title { opacity: 1; } .tb-bar-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 40px; height: 40px; border-radius: 20px; color: var(--tb-blue); font-size: 19px; } .tb-app[data-theme="dark"] .tb-bar-btn { color: #6fb2ff; } .tb-bar-btn:active { background: var(--tb-surface-3); } .tb-back { font-size: 21px; padding: 0 6px; } .tb-back span { font-size: 17px; } .tb-bar--home { position: absolute; left: 0; right: 0; top: 0; z-index: 6; color: #fff; } .tb-bar--home .tb-bar-title { opacity: 0; } .tb-bar--home .tb-bar-btn { color: #fff; } .tb-bar-title--team { display: flex; align-items: center; gap: 10px; text-align: left; max-width: 70vw; } .tb-bar-title--team span { display: flex; flex-direction: column; min-width: 0; } .tb-bar-title--team b { font-size: 16px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-bar-title--team small { font-size: 12px; font-weight: 500; color: var(--tb-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-bar--team { grid-template-columns: auto minmax(0, 1fr) auto; } .tb-bar--team .tb-bar-title { justify-self: start; } /* ------------------------------------------------------------------- scroll */ .tb-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 calc(16px + var(--tb-safe-right)) 0 calc(16px + var(--tb-safe-left)); } .tb-scroll.is-flush { padding-left: 0; padding-right: 0; } .tb-scroll-end { height: 28px; } /* Room to scroll the last row clear of the floating tab bar. */ .tb-app[data-chrome="tabs"] .tb-scroll-end { height: calc(var(--tb-tab-h) + var(--tb-tab-float) + 26px); } .tb-large { padding: 4px 4px 14px; } .tb-large h1 { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; } .tb-large p { color: var(--tb-text-2); margin-top: 4px; } .tb-pad { padding: 16px 0; } .tb-pad--tight { padding: 4px 0 12px; } /* ------------------------------------------------------------------ tab bar */ /* A floating glass capsule over the content (the iOS 26 look). The lens behind the active tab slides with a spring; it is positioned by :has(), so browsers without it simply show the tinted tab. */ .tb-tabbar { position: absolute; z-index: 20; left: 50%; bottom: var(--tb-tab-float); width: min(calc(100% - 24px - var(--tb-safe-left) - var(--tb-safe-right)), 560px); height: var(--tb-tab-h); transform: translateX(-50%); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0 6px; border-radius: calc(var(--tb-tab-h) / 2); isolation: isolate; background: var(--tb-glass); -webkit-backdrop-filter: saturate(190%) blur(26px); backdrop-filter: saturate(190%) blur(26px); box-shadow: var(--tb-glass-ring); } .tb-tabbar::before { content: ""; position: absolute; z-index: -1; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 5); border-radius: 999px; background: var(--tb-lens); box-shadow: inset 0 0 0 .5px rgba(90, 167, 255, .2); opacity: 0; transform: translateX(calc(var(--ti, 0) * 100%)); transition: transform .5s var(--tb-spring), opacity .2s; } @supports selector(:has(*)) { .tb-tabbar:has(> .is-active)::before { opacity: 1; } .tb-tabbar:has(> :nth-child(2).is-active) { --ti: 1; } .tb-tabbar:has(> :nth-child(3).is-active) { --ti: 2; } .tb-tabbar:has(> :nth-child(4).is-active) { --ti: 3; } .tb-tabbar:has(> :nth-child(5).is-active) { --ti: 4; } } .tb-app[data-chrome="none"] .tb-tabbar, .tb-app.is-keyboard .tb-tabbar { display: none; } .tb-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--tb-text-3); font-size: 10.5px; font-weight: 650; letter-spacing: .01em; transition: color .2s; } .tb-tab i { font-size: 20px; transition: transform .35s var(--tb-spring); } .tb-tab.is-active { color: var(--tb-accent); } .tb-tab.is-active i { transform: translateY(-1px) scale(1.08); } .tb-tab:active i { transform: scale(.86); } .tb-tab-badge { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--tb-red); color: #fff; font: 700 11px/18px var(--tb-font); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--tb-bg), 0 3px 8px rgba(239, 68, 68, .4); animation: tbPop .3s var(--tb-spring); } @keyframes tbPop { from { transform: scale(.4); } to { transform: scale(1); } } /* ------------------------------------------------------------------ buttons */ .tb-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 15px; background: var(--tb-grad); color: #fff; font-weight: 650; font-size: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 10px 24px rgba(4, 107, 210, .32); transition: transform .18s var(--tb-ease), opacity .2s, box-shadow .2s; white-space: nowrap; } .tb-btn:active { transform: scale(.97); } .tb-btn:disabled { opacity: .55; } .tb-btn.is-busy { color: transparent !important; } .tb-btn.is-busy::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .5); border-top-color: #fff; animation: tbSpin .7s linear infinite; } .tb-btn--ghost { background: var(--tb-card); color: var(--tb-blue); box-shadow: inset 0 0 0 1px var(--tb-line-2); } .tb-btn--ghost.is-busy::after { border-color: var(--tb-line-2); border-top-color: var(--tb-blue); } .tb-app[data-theme="dark"] .tb-btn--ghost { color: #6fb2ff; } .tb-btn--danger { background: linear-gradient(135deg, #f87171, #dc2626); box-shadow: 0 8px 22px rgba(220, 38, 38, .25); } .tb-btn--danger-text { color: var(--tb-red) !important; } .tb-btn--light { background: #fff; color: var(--tb-navy); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); } .tb-btn--glass { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .tb-btn--sm { min-height: 40px; padding: 0 16px; font-size: 15px; border-radius: 12px; } .tb-btn--block { width: 100%; } @keyframes tbSpin { to { transform: rotate(360deg); } } .tb-link { color: var(--tb-blue); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; } .tb-app[data-theme="dark"] .tb-link { color: #6fb2ff; } .tb-pillbtn { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; background: rgba(4, 107, 210, .1); color: var(--tb-blue); font-weight: 650; font-size: 14px; } .tb-app[data-theme="dark"] .tb-pillbtn { background: rgba(90, 167, 255, .14); color: #7cb8ff; } .tb-pillbtn:disabled { opacity: .5; } .tb-roundbtn { width: 36px; height: 36px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; background: rgba(4, 107, 210, .1); color: var(--tb-blue); font-size: 15px; } .tb-app[data-theme="dark"] .tb-roundbtn { background: rgba(90, 167, 255, .14); color: #7cb8ff; } .tb-roundbtn--danger { background: rgba(239, 68, 68, .1); color: var(--tb-red); } .tb-ok { color: var(--tb-green); font-size: 22px; } /* ------------------------------------------------------- segmented + chips */ .tb-seg { display: flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--tb-surface-3); margin-bottom: 12px; } .tb-seg button { flex: 1 1 0; min-height: 34px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--tb-text-2); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .2s, color .2s; } .tb-seg button.is-on { background: var(--tb-surface); color: var(--tb-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); } .tb-app[data-theme="dark"] .tb-seg button.is-on { background: #2a3763; } .tb-seg--mini { margin: 0; } .tb-seg--mini button { min-height: 28px; padding: 0 9px; font-size: 13px; } .tb-seg--wide { margin: 0; } .tb-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; } .tb-chips::-webkit-scrollbar { display: none; } .tb-chips--wrap { flex-wrap: wrap; overflow: visible; padding-bottom: 0; } .tb-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--tb-surface); box-shadow: inset 0 0 0 1px var(--tb-line-2); font-weight: 600; font-size: 14px; color: var(--tb-text-2); } .tb-chip.is-on { background: var(--tb-blue); color: #fff; box-shadow: none; } .tb-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; background: var(--tb-surface-3); color: var(--tb-text-2); } .tb-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .tb-pill--ok { background: rgba(16, 185, 129, .13); color: #059669; } .tb-pill--warn { background: rgba(245, 158, 11, .15); color: #b45309; } .tb-pill--bad { background: rgba(239, 68, 68, .13); color: #dc2626; } .tb-app[data-theme="dark"] .tb-pill--ok { color: #34d399; } .tb-app[data-theme="dark"] .tb-pill--warn { color: #fbbf24; } .tb-app[data-theme="dark"] .tb-pill--bad { color: #f87171; } .tb-count { flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--tb-blue); color: #fff; font: 700 12.5px/22px var(--tb-font); text-align: center; } .tb-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(4, 107, 210, .1); color: var(--tb-blue); font-size: 12.5px; font-weight: 700; } .tb-app[data-theme="dark"] .tb-badge { background: rgba(90, 167, 255, .16); color: #8cc3ff; } .tb-app[data-theme="dark"] .tb-msg-author em { color: #7cb8ff; } .tb-tag { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 13px; background: var(--tb-surface-3); color: var(--tb-text-3); font-size: 12px; flex: 0 0 auto; } .tb-tag--ok { background: rgba(16, 185, 129, .13); color: #059669; } /* ------------------------------------------------------------ cards + rows */ .tb-card { background: var(--tb-card); border-radius: var(--tb-radius); box-shadow: var(--tb-card-ring), var(--tb-shadow); } .tb-card--after { margin-top: 10px; } .tb-card--list { overflow: hidden; } .tb-card--list > * + * { box-shadow: inset 0 .5px 0 var(--tb-line-2); } .tb-card--soft { background: var(--tb-surface-2); box-shadow: none; } .tb-card--pinned { margin-bottom: 8px; } .tb-note { display: flex; align-items: center; gap: 10px; padding: 16px; color: var(--tb-text-2); font-size: 15px; } .tb-note--stack { flex-direction: column; align-items: flex-start; gap: 4px; } .tb-note--stack b { color: var(--tb-text); } .tb-note--center { justify-content: center; text-align: center; } .tb-note i { color: var(--tb-text-3); } .tb-section { margin-top: 22px; } .tb-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 4px 8px; } .tb-section-head h2 { font-size: 21px; font-weight: 800; letter-spacing: -.022em; } .tb-section-count { color: var(--tb-text-3); font-weight: 600; font-size: 14px; } .tb-section-count--pad { padding: 0 4px 8px; } .tb-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 16px; text-align: left; transition: background .15s; } button.tb-row:active, a.tb-row:active { background: var(--tb-surface-2); } .tb-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .tb-row-main b { font-weight: 600; overflow-wrap: anywhere; line-height: 1.25; } .tb-row-main small { color: var(--tb-text-3); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; } .tb-row-acc { color: var(--tb-blue); font-weight: 600; font-size: 14px; } .tb-row-icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; background: var(--tb-text-3); } i.tb-row-icon { background: none; color: var(--tb-blue); font-size: 18px; width: 28px; } .tb-row-icon--blue { background: linear-gradient(135deg, #3b9bff, #046bd2); } .tb-row-icon--green { background: linear-gradient(135deg, #34d399, #059669); } .tb-row-icon--amber { background: linear-gradient(135deg, #fbbf24, #d97706); } .tb-row-icon--red { background: linear-gradient(135deg, #f87171, #dc2626); } .tb-row-icon--navy { background: linear-gradient(135deg, #3949ab, #131a6e); } .tb-row-icon--slate { background: linear-gradient(135deg, #94a3b8, #475569); } .tb-chev { flex: 0 0 auto; color: var(--tb-text-3); font-size: 13px; opacity: .8; } .tb-hint { color: var(--tb-text-3); font-size: 13.5px; padding: 10px 6px 0; display: flex; gap: 8px; align-items: flex-start; } .tb-version { text-align: center; color: var(--tb-text-3); font-size: 12.5px; margin-top: 18px; } /* -------------------------------------------------------- avatars + crests */ .tb-avatar { --h: 212; position: relative; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(135deg, hsl(var(--h) 80% 62%), hsl(calc(var(--h) + 24) 70% 42%)); color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .02em; } .tb-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .tb-avatar b { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: clip; } .tb-avatar--sm { width: 30px; height: 30px; font-size: 12px; } .tb-avatar--lg { width: 64px; height: 64px; font-size: 23px; } .tb-crest { --h: 212; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(145deg, hsl(var(--h) 88% 56%), hsl(calc(var(--h) + 18) 76% 34%)); color: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12), 0 4px 12px hsl(var(--h) 70% 40% / .25); } .tb-crest { position: relative; overflow: hidden; } .tb-crest::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 52%); pointer-events: none; } .tb-crest b { position: relative; z-index: 1; display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: clip; font-weight: 800; font-size: 14px; letter-spacing: -.01em; text-shadow: 0 1px 2px rgba(0, 0, 0, .18); } .tb-crest--xs { width: 30px; height: 30px; border-radius: 9px; } .tb-crest--xs b { font-size: 10.5px; } .tb-crest--sm { width: 36px; height: 36px; border-radius: 11px; } .tb-crest--sm b { font-size: 12px; } .tb-crest--lg { width: 64px; height: 64px; border-radius: 19px; } .tb-crest--lg b { font-size: 19px; } .tb-crest--club { background: var(--tb-grad); } .tb-shield { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 26px; color: #fff; } /* --------------------------------------------------------------- lists */ .tb-team, .tb-thread, .tb-person, .tb-event, .tb-fieldrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; text-align: left; transition: background .15s; } .tb-team:active, .tb-thread:active, button.tb-person:active, .tb-event:active, .tb-fieldrow:active:not(:disabled) { background: var(--tb-surface-2); } .tb-team-main, .tb-thread-main, .tb-person-main, .tb-event-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .tb-team-title { font-weight: 650; font-size: 16.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-team-meta { color: var(--tb-text-3); font-size: 13.5px; } .tb-team-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; } .tb-team-tags em { font-style: normal; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--tb-surface-3); color: var(--tb-text-2); } .tb-thread.is-unread .tb-thread-title { font-weight: 750; } .tb-thread.is-unread .tb-thread-preview { color: var(--tb-text); } .tb-thread-top { display: flex; align-items: baseline; gap: 8px; } .tb-thread-title { flex: 1 1 auto; font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-thread-time { flex: 0 0 auto; color: var(--tb-text-3); font-size: 13px; } .tb-thread-preview { color: var(--tb-text-3); font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; } .tb-thread-preview b { font-weight: 600; color: var(--tb-text-2); } .tb-thread-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .tb-muted { color: var(--tb-text-3); font-size: 13px; } .tb-person.is-mine .tb-person-main b::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tb-green); margin-left: 7px; vertical-align: middle; } .tb-person-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-person-main small { color: var(--tb-text-3); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-person-actions { display: flex; gap: 8px; flex: 0 0 auto; } @media (max-width: 600px) { .tb-roster-person { flex-wrap: wrap; } .tb-roster-person .tb-person-main { flex-basis: 0; } .tb-roster-person .tb-person-actions { flex-basis: 100%; justify-content: flex-end; flex-wrap: wrap; } .tb-roster-person .tb-roundbtn { width: 44px; height: 44px; border-radius: 22px; flex: 0 0 44px; } } /* ------------------------------------------------------------------ events */ .tb-event { align-items: stretch; } .tb-event-date { flex: 0 0 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 13px; padding: 6px 0; background: rgba(4, 107, 210, .09); color: var(--tb-blue); line-height: 1.05; } .tb-event-date small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .85; } .tb-event-date b { font-size: 21px; font-weight: 800; } .tb-event--game .tb-event-date { background: rgba(124, 92, 255, .12); color: #6d4cf5; } .tb-event--tournament .tb-event-date { background: rgba(245, 158, 11, .15); color: #b45309; } .tb-event--practice .tb-event-date { background: rgba(16, 185, 129, .13); color: #059669; } .tb-event--meeting .tb-event-date { background: rgba(71, 85, 105, .12); color: #475569; } .tb-app[data-theme="dark"] .tb-event-date { background: rgba(90, 167, 255, .14); color: #8cc3ff; } .tb-app[data-theme="dark"] .tb-event--game .tb-event-date { background: rgba(139, 125, 255, .17); color: #b9aeff; } .tb-app[data-theme="dark"] .tb-event--tournament .tb-event-date { background: rgba(251, 191, 36, .15); color: #fcd34d; } .tb-app[data-theme="dark"] .tb-event--practice .tb-event-date { background: rgba(52, 211, 153, .15); color: #6ee7b7; } .tb-app[data-theme="dark"] .tb-event--meeting .tb-event-date { background: rgba(148, 163, 184, .15); color: #cbd5e1; } .tb-event-date b { font-variant-numeric: tabular-nums; } .tb-event-title { display: flex; align-items: center; gap: 7px; font-weight: 650; font-size: 16px; } .tb-event-title i { color: var(--tb-text-3); font-size: 13px; } .tb-event-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-event-meta { color: var(--tb-text-2); font-size: 14px; } .tb-event-meta b { font-weight: 700; color: var(--tb-text); } .tb-event-where { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--tb-text-3); font-size: 13.5px; margin-top: 2px; } .tb-event-where .tb-pill { font-size: 11px; padding: 2px 8px; } .tb-event-warn { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; color: #dc2626; font-size: 13px; font-weight: 700; } .tb-event .tb-chev { align-self: center; } .tb-day { margin-top: 18px; } .tb-day-head { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tb-text-3); padding: 0 6px 8px; } /* ----------------------------------------------------------------- welcome */ .tb-welcome { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; background: var(--tb-hero-grad); color: #fff; overflow: hidden; } .tb-welcome-art { position: absolute; inset: 0; } .tb-pitch, .tb-hero-pitch { position: absolute; inset: 0; opacity: .16; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 600' fill='none' stroke='%23fff' stroke-width='3'%3E%3Crect x='20' y='20' width='360' height='560' rx='6'/%3E%3Cline x1='20' y1='300' x2='380' y2='300'/%3E%3Ccircle cx='200' cy='300' r='62'/%3E%3Ccircle cx='200' cy='300' r='4' fill='%23fff'/%3E%3Crect x='95' y='20' width='210' height='95'/%3E%3Crect x='150' y='20' width='100' height='38'/%3E%3Crect x='95' y='485' width='210' height='95'/%3E%3Crect x='150' y='542' width='100' height='38'/%3E%3C/svg%3E"); background-size: cover; background-position: center; } .tb-welcome-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .18), transparent 60%), linear-gradient(to bottom, transparent 35%, rgba(8, 14, 50, .55)); } .tb-welcome-body { position: relative; padding: 32px calc(26px + var(--tb-safe-right)) calc(30px + var(--tb-safe-bottom)) calc(26px + var(--tb-safe-left)); text-align: center; } .tb-welcome-crest { width: 92px; height: 92px; margin: 0 auto 18px; border-radius: 28px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 18px 40px rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center; overflow: hidden; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .tb-welcome-crest img { width: 80%; height: 80%; object-fit: contain; } .tb-welcome-crest .tb-shield { font-size: 42px; } .tb-welcome h1 { font-size: 38px; font-weight: 850; letter-spacing: -.03em; line-height: 1.05; } .tb-welcome-body > p { margin: 10px auto 26px; max-width: 330px; font-size: 17px; line-height: 1.45; color: rgba(255, 255, 255, .86); } .tb-welcome-actions { display: grid; gap: 12px; max-width: 380px; margin: 0 auto; } .tb-welcome-actions .tb-btn { width: 100%; min-height: 54px; font-size: 16.5px; } .tb-welcome-status { margin: 14px auto 0; max-width: 360px; font-size: 14.5px; color: rgba(255, 255, 255, .92); } .tb-welcome-note { margin: 22px auto 0 !important; max-width: 340px; font-size: 14px !important; color: rgba(255, 255, 255, .7) !important; } .tb-welcome-install { margin-top: 14px; color: #fff; opacity: .9; font-size: 15px; } /* -------------------------------------------------------------------- home */ .tb-home { padding-bottom: 8px; } .tb-hero { position: relative; padding: calc(var(--tb-safe-top) + 56px) calc(16px + var(--tb-safe-right)) 20px calc(16px + var(--tb-safe-left)); background: var(--tb-hero-grad); color: #fff; border-radius: 0 0 32px 32px; overflow: hidden; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .12), 0 18px 44px rgba(4, 60, 150, .3); } .tb-hero-glow { position: absolute; top: -45%; right: -25%; width: 95%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(140, 200, 255, .5), rgba(140, 200, 255, 0)); pointer-events: none; animation: tbDrift 16s ease-in-out infinite alternate; } @keyframes tbDrift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-22%, 14%, 0) scale(1.18); } } .tb-hero-pitch { opacity: .11; background-size: 520px auto; background-position: 110% 40%; background-repeat: no-repeat; } .tb-hero-in { position: relative; display: flex; align-items: center; gap: 14px; } .tb-hero-crest { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 18px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); display: flex; align-items: center; justify-content: center; overflow: hidden; } .tb-hero-crest img { width: 84%; height: 84%; object-fit: contain; } .tb-hero-crest .tb-shield { font-size: 27px; } .tb-hero-crest.has-img { width: 70px; height: 70px; border-radius: 0; background: none; box-shadow: none; overflow: visible; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .35)); } .tb-hero-crest.has-img img { width: 100%; height: 100%; } .tb-hero-text small { display: block; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .78); text-transform: uppercase; } .tb-hero-text h1 { font-size: 28px; font-weight: 800; letter-spacing: -.028em; line-height: 1.1; margin-top: 3px; text-shadow: 0 2px 12px rgba(0, 20, 80, .25); } .tb-fieldcard { position: relative; margin-top: 18px; width: 100%; display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-radius: 20px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 26px rgba(0, 20, 80, .2); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); color: #fff; text-align: left; } .tb-live { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .tb-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; animation: tbBlink 1.8s ease-in-out infinite; } @keyframes tbBlink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } .tb-fieldcard:active { background: rgba(255, 255, 255, .22); } .tb-fieldcard-text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; } .tb-fieldcard-text b { font-size: 17px; font-weight: 750; } .tb-fieldcard-text small { font-size: 13.5px; color: rgba(255, 255, 255, .8); } .tb-fieldcard .tb-chev { color: rgba(255, 255, 255, .8); } .tb-fieldcard-dot { position: relative; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: #9ca3af; } .tb-fieldcard-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: tbPulse 2.2s ease-out infinite; } .tb-fieldcard--ok .tb-fieldcard-dot, .tb-fieldbanner--ok .tb-fieldcard-dot { background: #34d399; color: #34d399; } .tb-fieldcard--warn .tb-fieldcard-dot, .tb-fieldbanner--warn .tb-fieldcard-dot { background: #fbbf24; color: #fbbf24; } .tb-fieldcard--bad .tb-fieldcard-dot, .tb-fieldbanner--bad .tb-fieldcard-dot { background: #f87171; color: #f87171; } @keyframes tbPulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } } .tb-home > .tb-section, .tb-home > .tb-announce { margin-left: calc(16px + var(--tb-safe-left)); margin-right: calc(16px + var(--tb-safe-right)); } .tb-announce { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); margin-top: 16px; padding: 14px 16px; border-radius: 20px; background: var(--tb-card); box-shadow: var(--tb-card-ring), var(--tb-shadow); text-align: left; } .tb-announce.is-unread { box-shadow: var(--tb-card-ring), var(--tb-shadow), inset 3px 0 0 var(--tb-blue); } .tb-announce-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: var(--tb-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; } .tb-announce-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .tb-announce-main small { color: var(--tb-text-3); font-size: 12.5px; font-weight: 600; } .tb-announce-main b { font-weight: 600; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tb-rail { display: flex; gap: 12px; overflow-x: auto; margin: 0 calc(-16px - var(--tb-safe-right)) 0 calc(-16px - var(--tb-safe-left)); padding: 2px calc(16px + var(--tb-safe-right)) 8px calc(16px + var(--tb-safe-left)); scroll-snap-type: x mandatory; scrollbar-width: none; } .tb-rail::-webkit-scrollbar { display: none; } .tb-railcard { --h: 212; position: relative; flex: 0 0 170px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 2px; padding: 14px; min-height: 128px; border-radius: 20px; text-align: left; color: #fff; background: linear-gradient(150deg, hsl(var(--h) 88% 56%), hsl(calc(var(--h) + 22) 76% 30%)); box-shadow: 0 10px 26px hsl(var(--h) 70% 35% / .3); overflow: hidden; } .tb-railcard::before { content: ""; position: absolute; right: -30px; bottom: -30px; width: 110px; height: 110px; border-radius: 50%; border: 12px solid rgba(255, 255, 255, .1); } .tb-railcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 45%); pointer-events: none; } .tb-railcard-code { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: clip; font-weight: 850; font-size: 26px; letter-spacing: -.02em; margin-bottom: auto; } .tb-railcard b { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-railcard small { font-size: 12.5px; opacity: .82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-railcard .tb-count { position: absolute; top: 12px; right: 12px; background: #fff; color: var(--tb-blue); } /* -------------------------------------------------------------- team page */ .tb-subnav { flex: 0 0 auto; padding: 8px calc(16px + var(--tb-safe-right)) 10px calc(16px + var(--tb-safe-left)); background: var(--tb-bar-bg); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom: .5px solid var(--tb-line-2); } .tb-team-panels { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .tb-panel { flex: 1 1 auto; min-height: 0; } .tb-panel--chat { display: flex; flex-direction: column; } .tb-team-hero { --h: 212; display: flex; align-items: center; gap: 16px; margin: 16px 0 0; padding: 18px; border-radius: 22px; color: #fff; background: linear-gradient(150deg, hsl(var(--h) 88% 54%), hsl(calc(var(--h) + 22) 76% 28%)); box-shadow: 0 12px 30px hsl(var(--h) 70% 35% / .28); } .tb-team-hero .tb-crest { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); } .tb-team-hero h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; } .tb-team-hero p { opacity: .85; font-size: 14px; margin-top: 2px; } .tb-team-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; } .tb-team-stats span { font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); } .tb-team-stats .tb-you { background: #fff; color: hsl(var(--h) 70% 34%); } /* ------------------------------------------------------------- event page */ .tb-eventhero { position: relative; margin-top: 12px; padding: 22px 20px 20px; border-radius: 24px; color: #fff; background: var(--tb-grad); overflow: hidden; box-shadow: 0 14px 34px rgba(4, 70, 170, .25); } .tb-eventhero--practice { background: linear-gradient(145deg, #34d399, #047857); box-shadow: 0 14px 34px rgba(4, 120, 87, .25); } .tb-eventhero--game { background: linear-gradient(145deg, #8b7dff, #4c2fd6); box-shadow: 0 14px 34px rgba(76, 47, 214, .28); } .tb-eventhero--tournament { background: linear-gradient(145deg, #fbbf24, #c2410c); box-shadow: 0 14px 34px rgba(194, 65, 12, .25); } .tb-eventhero--meeting { background: linear-gradient(145deg, #64748b, #1e293b); } .tb-eventhero-icon { position: absolute; right: -8px; top: -10px; font-size: 110px; opacity: .14; } .tb-eventhero small { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .85; } .tb-eventhero h1 { font-size: 28px; font-weight: 850; letter-spacing: -.02em; line-height: 1.12; margin: 6px 0 10px; } .tb-eventhero p { font-size: 15.5px; opacity: .92; } .tb-eventhero p b { font-size: 19px; font-weight: 750; } .tb-eventpage .tb-card { margin-top: 12px; } .tb-fieldline { display: flex; align-items: center; gap: 12px; padding: 14px 16px; font-size: 15px; } .tb-fieldline > i { font-size: 22px; } .tb-fieldline span { display: flex; flex-direction: column; } .tb-fieldline small { color: var(--tb-text-3); font-size: 13px; } .tb-fieldline--ok > i { color: var(--tb-green); } .tb-fieldline--warn > i { color: var(--tb-amber); } .tb-fieldline--bad { box-shadow: var(--tb-shadow), inset 0 0 0 1.5px rgba(239, 68, 68, .45); } .tb-fieldline--bad > i { color: var(--tb-red); } .tb-prose { padding: 16px; line-height: 1.55; color: var(--tb-text-2); } .tb-prose a, .tb-text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .tb-actionbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 10px; margin-top: 16px; } .tb-actbtn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 18px; background: var(--tb-card); box-shadow: var(--tb-card-ring), var(--tb-shadow); font-size: 12.5px; font-weight: 650; color: var(--tb-text-2); } .tb-actbtn i { font-size: 20px; color: var(--tb-blue); } .tb-actbtn--danger i { color: var(--tb-red); } .tb-actbtn:active { transform: scale(.97); } /* ------------------------------------------------------------------ fields */ .tb-fieldbanner { display: flex; align-items: center; gap: 14px; margin: 12px 0 16px; padding: 18px; border-radius: 20px; color: #fff; background: var(--tb-grad); box-shadow: 0 12px 30px rgba(4, 70, 170, .22); } .tb-fieldbanner--ok { background: linear-gradient(140deg, #10b981, #047857); } .tb-fieldbanner--warn { background: linear-gradient(140deg, #f59e0b, #b45309); } .tb-fieldbanner--bad { background: linear-gradient(140deg, #ef4444, #991b1b); } .tb-fieldbanner--ok .tb-fieldcard-dot, .tb-fieldbanner--warn .tb-fieldcard-dot, .tb-fieldbanner--bad .tb-fieldcard-dot { background: #fff; color: #fff; } .tb-fieldbanner div { display: flex; flex-direction: column; } .tb-fieldbanner b { font-size: 19px; font-weight: 800; } .tb-fieldbanner small { opacity: .88; font-size: 14px; } .tb-fieldrow:disabled { cursor: default; opacity: 1; } .tb-fieldrow .tb-row-main b { white-space: normal; line-height: 1.25; } .tb-fieldrow-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; background: var(--tb-surface-3); color: var(--tb-text-3); } .tb-fieldrow-icon--ok { background: rgba(16, 185, 129, .13); color: #059669; } .tb-fieldrow-icon--warn { background: rgba(245, 158, 11, .15); color: #b45309; } .tb-fieldrow-icon--bad { background: rgba(239, 68, 68, .13); color: #dc2626; } .tb-statuspick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .tb-statusbtn { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 14px; border-radius: 15px; background: var(--tb-surface-2); box-shadow: inset 0 0 0 1px var(--tb-line-2); font-weight: 650; } .tb-statusbtn i { width: 12px; height: 12px; border-radius: 50%; background: var(--tb-text-3); flex: 0 0 auto; } .tb-statusbtn--ok i { background: var(--tb-green); } .tb-statusbtn--warn i { background: var(--tb-amber); } .tb-statusbtn--bad i { background: var(--tb-red); } .tb-statusbtn.is-on { box-shadow: inset 0 0 0 2px var(--tb-blue); background: rgba(4, 107, 210, .07); } .tb-statusbtn.is-busy { opacity: .6; } /* -------------------------------------------------------------------- more */ .tb-profile { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 22px; background: var(--tb-card); box-shadow: var(--tb-card-ring), var(--tb-shadow); } .tb-profile > div { display: flex; flex-direction: column; min-width: 0; align-items: flex-start; } .tb-profile b { font-size: 19px; font-weight: 750; } .tb-profile small { color: var(--tb-text-3); font-size: 14px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .tb-profile--member { margin-top: 12px; } /* ------------------------------------------------------------------- forms */ .tb-form { display: grid; gap: 14px; } .tb-form--card { padding: 16px; } .tb-field { display: grid; gap: 6px; min-width: 0; } .tb-field > span { font-size: 13.5px; font-weight: 650; color: var(--tb-text-2); } .tb-field > span small { font-weight: 500; color: var(--tb-text-3); } .tb-directory-photo { position: relative; display: flex; align-items: center; gap: 14px; min-height: 94px; padding: 12px; border: 1px dashed var(--tb-line-2); border-radius: 16px; background: var(--tb-surface-2); overflow: hidden; cursor: pointer; } .tb-directory-photo-art { flex: 0 0 68px; width: 68px; height: 68px; display: grid; place-items: center; border-radius: 12px; color: var(--tb-blue); background: var(--tb-surface-3); font-size: 25px; overflow: hidden; } .tb-directory-photo-art img { width: 100%; height: 100%; object-fit: cover; } .tb-directory-photo > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; } .tb-directory-photo b { color: var(--tb-text); font-size: 15px; } .tb-directory-photo small { color: var(--tb-text-3); font-size: 12px; } .tb-directory-photo input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .tb-directory-photo:focus-within { outline: 2px solid var(--tb-blue-2); outline-offset: 2px; } .tb-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 440px) { .tb-grid2--dates { grid-template-columns: minmax(0, 1fr); } } .tb-app .tb-input, .tb-app .tb-select, .tb-join .tb-input { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 13px !important; border: 0 !important; background: var(--tb-surface-2) !important; color: var(--tb-text) !important; box-shadow: inset 0 0 0 1px var(--tb-line-2) !important; font-size: 16px !important; line-height: 1.3; -webkit-appearance: none; appearance: none; outline: none; height: auto; transition: box-shadow .15s; } .tb-app .tb-input:focus, .tb-app .tb-select:focus, .tb-join .tb-input:focus { box-shadow: inset 0 0 0 2px var(--tb-blue-2) !important; } .tb-app .tb-textarea { resize: vertical; min-height: 88px; } .tb-app .tb-select { padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a94b2' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; } .tb-app .tb-select--sm { min-height: 40px; padding-top: 8px; padding-bottom: 8px; width: auto; max-width: 46%; flex: 0 1 auto; font-size: 15px !important; } .tb-search { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0 12px; border-radius: 12px; background: var(--tb-surface-3); color: var(--tb-text-3); } .tb-app .tb-search input { flex: 1 1 auto; min-width: 0; border: 0 !important; background: none !important; box-shadow: none !important; outline: none; font-size: 16px !important; color: var(--tb-text) !important; padding: 8px 0; height: auto; } .tb-search--sheet { margin-bottom: 12px; } .tb-toolrow { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .tb-switch { -webkit-appearance: none; appearance: none; position: relative; flex: 0 0 auto; width: 51px; height: 31px; border-radius: 16px; background: var(--tb-surface-3) !important; box-shadow: inset 0 0 0 1px var(--tb-line-2) !important; border: 0 !important; cursor: pointer; transition: background .2s; margin: 0; } .tb-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .22s var(--tb-ease); } .tb-switch:checked { background: var(--tb-green) !important; box-shadow: none !important; } .tb-switch:checked::after { transform: translateX(20px); } .tb-switch:disabled { opacity: .5; } .tb-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px; font-weight: 600; font-size: 15px; } /* ----------------------------------------------------------------- sheets */ .tb-layer { position: absolute; inset: 0; pointer-events: none; z-index: 50; } .tb-layer > * { pointer-events: auto; } .tb-sheet-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; } .tb-sheet-backdrop { position: absolute; inset: 0; background: rgba(3, 7, 22, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity .28s; } .tb-sheet { position: relative; max-height: calc(100% - var(--tb-safe-top) - 24px); display: flex; flex-direction: column; margin: 0 auto; width: 100%; max-width: 640px; border-radius: 28px 28px 0 0; background: var(--tb-sheet); box-shadow: var(--tb-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .08); transform: translateY(105%); transition: transform .32s var(--tb-ease); padding-bottom: var(--tb-safe-bottom); } .tb-sheet-wrap.is-open .tb-sheet-backdrop { opacity: 1; } .tb-sheet-wrap.is-open .tb-sheet { transform: translateY(0); } .tb-sheet-wrap.is-tall .tb-sheet { height: calc(100% - var(--tb-safe-top) - 24px); } .tb-sheet-grab { flex: 0 0 auto; display: flex; justify-content: center; padding: 8px 0 2px; touch-action: none; cursor: grab; } .tb-sheet-grab span { width: 38px; height: 5px; border-radius: 3px; background: var(--tb-line-2); } .tb-sheet-head { flex: 0 0 auto; position: relative; padding: 6px 56px 12px 20px; touch-action: none; } .tb-sheet-title { font-size: 20px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; } .tb-sheet-sub { color: var(--tb-text-3); font-size: 14px; margin-top: 2px; } .tb-sheet-x { position: absolute; right: 14px; top: 4px; width: 34px; height: 34px; border-radius: 17px; background: var(--tb-surface-3); color: var(--tb-text-2); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; } .tb-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 20px 20px; } .tb-sheet-text { color: var(--tb-text-2); font-size: 15.5px; line-height: 1.5; margin-bottom: 8px; } .tb-sheet-note { color: var(--tb-text-3); font-size: 14px; margin-top: 12px; } .tb-sheet-buttons { display: grid; gap: 10px; margin-top: 16px; } .tb-sheet-sep { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; color: var(--tb-text-3); font-size: 13px; font-weight: 600; } .tb-sheet-sep::before, .tb-sheet-sep::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--tb-line-2); } .tb-actions { display: grid; gap: 2px; border-radius: 16px; overflow: hidden; background: var(--tb-surface-2); } .tb-action { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 18px; background: var(--tb-surface-2); font-weight: 600; font-size: 16px; } .tb-action i { width: 20px; text-align: center; color: var(--tb-blue); font-size: 17px; } .tb-action:active { background: var(--tb-surface-3); } .tb-action--danger, .tb-action--danger i { color: var(--tb-red); } .tb-reactbar { display: flex; justify-content: space-between; gap: 6px; padding: 6px 4px 14px; } .tb-reactbar button { flex: 1 1 0; height: 50px; border-radius: 25px; background: var(--tb-surface-2); font-size: 26px; display: inline-flex; align-items: center; justify-content: center; transition: transform .12s; } .tb-reactbar button:active { transform: scale(1.25); } .tb-menu-preview { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--tb-surface-2); color: var(--tb-text-2); font-size: 14.5px; line-height: 1.4; } .tb-steps { display: grid; gap: 14px; margin: 4px 0 6px; } .tb-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; } .tb-step-n { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 14px; background: var(--tb-grad); color: #fff; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; } .tb-steps i { color: var(--tb-blue); } .tb-onboard { display: grid; gap: 12px; } .tb-onstep { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: var(--tb-surface-2); } .tb-onstep > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .tb-onstep b { font-weight: 700; } .tb-onstep small { color: var(--tb-text-3); font-size: 13.5px; line-height: 1.35; margin-top: 2px; } .tb-onstep-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; background: var(--tb-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; } .tb-optionlist { display: grid; gap: 2px; border-radius: 16px; overflow: hidden; background: var(--tb-surface-2); margin-bottom: 14px; } .tb-option { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 16px; background: var(--tb-surface-2); font-weight: 600; } .tb-option i:first-child { width: 20px; color: var(--tb-blue); text-align: center; } .tb-option span { flex: 1 1 auto; } .tb-option.is-on { background: rgba(4, 107, 210, .08); } .tb-option-check { color: var(--tb-blue); } .tb-pickresults { min-height: 80px; } /* ------------------------------------------------------------ toasts, etc */ .tb-toasts { position: absolute; left: 0; right: 0; top: calc(var(--tb-safe-top) + 10px); z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; } .tb-toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 520px; padding: 12px 16px; border-radius: 16px; background: rgba(13, 21, 48, .92); color: #fff; font-size: 14.5px; font-weight: 550; line-height: 1.35; box-shadow: 0 14px 34px rgba(0, 0, 0, .3), inset 0 0 0 .5px rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); transform: translateY(-18px) scale(.97); opacity: 0; transition: transform .28s var(--tb-ease), opacity .22s; white-space: pre-line; } .tb-toast.is-in { transform: translateY(0) scale(1); opacity: 1; } .tb-toast--ok { background: rgba(4, 120, 87, .95); } .tb-toast--bad { background: rgba(185, 28, 28, .95); } .tb-toast button { flex: 0 0 auto; padding: 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, .18); font-weight: 700; color: #fff; } .tb-viewer { position: absolute; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .94); opacity: 0; transition: opacity .22s; padding: var(--tb-safe-top) 0 var(--tb-safe-bottom); } .tb-viewer.is-open { opacity: 1; } .tb-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; } .tb-viewer-x { position: absolute; top: calc(var(--tb-safe-top) + 12px); right: 14px; width: 40px; height: 40px; border-radius: 20px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; z-index: 2; } .tb-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 20px; color: var(--tb-text-2); } .tb-empty-art { width: 84px; height: 84px; border-radius: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 34px; color: #fff; margin-bottom: 18px; background: linear-gradient(145deg, #3b9bff, #046bd2 55%, #131a6e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 18px 40px rgba(4, 107, 210, .35); animation: tbFloat 5s ease-in-out infinite; } @keyframes tbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .tb-empty-title { font-size: 18px; font-weight: 750; color: var(--tb-text); } .tb-empty-text { margin-top: 6px; max-width: 320px; font-size: 15px; line-height: 1.45; } .tb-empty .tb-btn { margin-top: 18px; } .tb-skel-list { display: grid; gap: 4px; padding: 8px 0; } .tb-skel-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; } .tb-skel-lines { flex: 1 1 auto; display: grid; gap: 8px; } .tb-skel { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--tb-surface-3) 0%, var(--tb-surface-2) 50%, var(--tb-surface-3) 100%); background-size: 200% 100%; animation: tbShimmer 1.3s linear infinite; } .tb-skel--circle { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; } @keyframes tbShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .tb-ptr { height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--tb-text-3); font-size: 18px; transition: height .2s; } .tb-ptr.is-ready { color: var(--tb-blue); } .tb-ptr.is-busy i { animation: tbSpin .8s linear infinite; } /* -------------------------------------------------------------------- chat */ .tb-chat { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: transparent; } .tb-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 8px calc(10px + var(--tb-safe-right)) 10px calc(10px + var(--tb-safe-left)); touch-action: manipulation; } .tb-msgs-top { display: flex; justify-content: center; padding: 10px 0; min-height: 20px; } .tb-msgs-more { padding: 8px 14px; border-radius: 999px; background: var(--tb-card); box-shadow: var(--tb-card-ring), var(--tb-shadow); color: var(--tb-blue); font-weight: 650; font-size: 14px; } .tb-msgs-start { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--tb-text-3); font-size: 13.5px; padding: 18px 0 6px; } .tb-msgs-start i { width: 52px; height: 52px; border-radius: 16px; background: var(--tb-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; } .tb-msgs-loading { color: var(--tb-text-3); padding: 6px; } .tb-daysep { display: flex; justify-content: center; margin: 14px 0 8px; } .tb-daysep span { padding: 5px 12px; border-radius: 999px; background: var(--tb-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 .5px var(--tb-line-2); color: var(--tb-text-2); font-size: 12px; font-weight: 700; letter-spacing: .02em; } .tb-msg { display: flex; align-items: flex-end; gap: 8px; margin-top: 2px; } .tb-msg.is-first { margin-top: 10px; } .tb-msg.is-mine { justify-content: flex-end; } .tb-msg-av { flex: 0 0 30px; width: 30px; } .tb-msg-col { display: flex; flex-direction: column; align-items: flex-start; max-width: min(78%, 520px); min-width: 0; } .tb-msg.is-mine .tb-msg-col { align-items: flex-end; } .tb-msg-author { display: flex; align-items: baseline; gap: 6px; padding: 0 12px 3px; font-size: 12.5px; color: var(--tb-text-2); } .tb-msg-author b { font-weight: 700; } .tb-msg-author em { font-style: normal; color: var(--tb-blue); font-weight: 650; font-size: 11.5px; } .tb-bubble { position: relative; max-width: 100%; padding: 9px 13px; border-radius: 20px; background: var(--tb-bubble-them); color: var(--tb-bubble-them-text); font-size: 16px; line-height: 1.38; overflow-wrap: anywhere; word-break: break-word; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform .12s; } .tb-bubble:active { transform: scale(.985); } .tb-msg:not(.is-mine).is-first .tb-bubble { border-top-left-radius: 20px; } .tb-msg:not(.is-mine):not(.is-last) .tb-bubble { border-bottom-left-radius: 6px; } .tb-msg:not(.is-mine):not(.is-first) .tb-bubble { border-top-left-radius: 6px; } .tb-msg.is-mine .tb-bubble { background: linear-gradient(135deg, #2a93ff, #046bd2); color: #fff; box-shadow: 0 6px 16px rgba(4, 107, 210, .26); } .tb-app[data-theme="dark"] .tb-msg:not(.is-mine) .tb-bubble:not(.is-emoji) { box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .tb-msg.is-mine:not(.is-last) .tb-bubble { border-bottom-right-radius: 6px; } .tb-msg.is-mine:not(.is-first) .tb-bubble { border-top-right-radius: 6px; } .tb-msg.is-pending .tb-bubble { opacity: .7; } .tb-msg.is-failed .tb-bubble { background: linear-gradient(135deg, #f87171, #dc2626); } .tb-bubble.is-emoji { background: none !important; padding: 0 4px; font-size: 42px; line-height: 1.1; } .tb-bubble.is-photo { padding: 4px; } .tb-text { white-space: normal; } .tb-quote { display: flex; flex-direction: column; margin: 1px 0 7px; padding: 6px 10px; border-radius: 12px; background: rgba(0, 0, 0, .07); font-size: 13.5px; line-height: 1.3; border-left: 3px solid currentColor; } .tb-msg.is-mine .tb-quote { background: rgba(255, 255, 255, .16); } .tb-quote b { font-weight: 700; font-size: 12.5px; } .tb-quote span { opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tb-photo { display: block; width: min(64vw, 280px); aspect-ratio: 1 / var(--r, .75); border-radius: 16px; overflow: hidden; background: var(--tb-surface-3); } .tb-photo + .tb-text { margin-top: 7px; padding: 0 8px 3px; } .tb-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .tb-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin: -6px 8px 0; position: relative; z-index: 1; } .tb-react { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; background: var(--tb-surface); box-shadow: 0 0 0 2px var(--tb-bg), 0 1px 4px rgba(0, 0, 0, .12); font-size: 14px; line-height: 20px; } .tb-react b { font-size: 12px; font-weight: 700; color: var(--tb-text-2); } .tb-react.is-mine { background: #dbeafe; } .tb-app[data-theme="dark"] .tb-react.is-mine { background: #1e3a8a; } .tb-msg-meta { padding: 3px 10px 0; font-size: 11.5px; color: var(--tb-text-3); } .tb-msg-failed { color: var(--tb-red); font-weight: 700; } .tb-jump { position: absolute; left: 50%; bottom: calc(var(--tb-compose-h, 70px) + 12px); transform: translateX(-50%); z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--tb-blue); color: #fff; font-weight: 700; font-size: 14px; box-shadow: 0 8px 22px rgba(4, 107, 210, .35); animation: tbPop .25s var(--tb-ease); } .tb-composer-wrap { flex: 0 0 auto; } /* The composer floats as a glass capsule over the conversation. */ .tb-composer { padding: 6px calc(10px + var(--tb-safe-right)) calc(8px + var(--tb-safe-bottom)) calc(10px + var(--tb-safe-left)); } .tb-compose-row { padding: 5px; border-radius: 26px; background: var(--tb-glass); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); box-shadow: var(--tb-glass-ring); } .tb-app.is-keyboard .tb-composer { padding-bottom: 8px; } .tb-compose-row { display: flex; align-items: flex-end; gap: 8px; } .tb-compose-btn { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--tb-blue); font-size: 19px; } .tb-compose-btn:active { background: var(--tb-surface-3); } .tb-compose-box { flex: 1 1 auto; min-width: 0; display: flex; border-radius: 21px; background: transparent; } .tb-app .tb-compose-box textarea { flex: 1 1 auto; min-width: 0; min-height: 40px; max-height: 140px; padding: 9px 14px !important; border: 0 !important; outline: none; resize: none; background: transparent !important; box-shadow: none !important; color: var(--tb-text) !important; font-size: 16px !important; line-height: 1.38 !important; border-radius: 21px !important; height: 40px; overflow-y: auto; } .tb-send { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; background: var(--tb-grad); color: #fff; font-size: 16px; box-shadow: 0 4px 12px rgba(4, 107, 210, .35); transition: transform .12s, opacity .15s; } .tb-send:disabled { opacity: .35; box-shadow: none; } .tb-send:active:not(:disabled) { transform: scale(.9); } .tb-compose-extra { display: grid; gap: 8px; margin-bottom: 8px; } .tb-compose-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 8px 4px 0; color: var(--tb-text-2); font-size: 12px; } .tb-compose-tools button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 14px; background: var(--tb-surface-2); color: var(--tb-blue); font-weight: 700; } .tb-compose-tools label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; min-height: 32px; } .tb-compose-tools input { accent-color: var(--tb-blue); width: 16px; height: 16px; } .tb-msg.is-assistant .tb-bubble { border: 1px solid var(--tb-blue); background: var(--tb-surface); color: var(--tb-text); } .tb-msg.is-assistant .tb-msg-author em { color: var(--tb-blue); } .tb-msg.is-assistant .tb-text { white-space: pre-wrap; } .tb-assistant-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .tb-assistant-sources a { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 5px 8px; border-radius: 10px; background: var(--tb-surface-2); color: var(--tb-blue); font-size: 12px; overflow-wrap: anywhere; } .tb-assistant-ask { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px; color: var(--tb-blue); font-size: 12px; font-weight: 700; } .tb-assistant-ask:disabled, .tb-ack-button:disabled { opacity: .65; } .tb-ack { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; max-width: 100%; } .tb-ack-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 12px; border-radius: 20px; border: 1px solid var(--tb-line); color: var(--tb-text-2); background: var(--tb-surface); font-size: 13px; font-weight: 700; } .tb-ack-button.is-on { color: #fff; background: var(--tb-blue); border-color: var(--tb-blue); } .tb-ack-count, .tb-ack-label { padding: 6px 0; color: var(--tb-text-3); font-size: 12px; } button.tb-ack-count { color: var(--tb-blue); min-height: 36px; } .tb-ack-list h3 { font-size: 15px; margin: 18px 0 10px; } .tb-ack-list p { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--tb-line); } .tb-ack-list p > i { color: var(--tb-blue); } .tb-ack-list small { display: block; color: var(--tb-text-3); margin-top: 2px; } .tb-compose-reply { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--tb-surface-2); border-left: 3px solid var(--tb-blue); } .tb-compose-reply > i { color: var(--tb-blue); } .tb-compose-reply span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .tb-compose-reply b { font-size: 13px; } .tb-compose-reply small { color: var(--tb-text-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-compose-reply button, .tb-compose-photo button { width: 28px; height: 28px; border-radius: 14px; background: var(--tb-surface-3); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--tb-text-2); } .tb-compose-photo { position: relative; width: 84px; height: 84px; border-radius: 14px; overflow: hidden; } .tb-compose-photo img { width: 100%; height: 100%; object-fit: cover; } .tb-compose-photo button { position: absolute; top: 4px; right: 4px; background: rgba(0, 0, 0, .55); color: #fff; } .tb-readonly { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 16px calc(14px + var(--tb-safe-bottom)); color: var(--tb-text-3); font-size: 14px; font-weight: 600; background: var(--tb-bar-bg); border-top: .5px solid var(--tb-line-2); } /* Announcements read as cards, not bubbles. */ .tb-chat--announce .tb-msg { justify-content: flex-start; } .tb-chat--announce .tb-msg-col { max-width: 100%; width: 100%; align-items: stretch !important; } .tb-chat--announce .tb-msg-av { display: none; } .tb-chat--announce .tb-bubble { background: var(--tb-surface) !important; color: var(--tb-text) !important; border-radius: 18px !important; padding: 14px 16px; box-shadow: var(--tb-shadow); } .tb-chat--announce .tb-msg.is-mine .tb-quote { background: rgba(0, 0, 0, .06); } .tb-chat--announce .tb-msg.is-first { margin-top: 14px; } .tb-chat--announce .tb-msg-meta { text-align: right; } /* ------------------------------------------------------ home: next up card */ .tb-next { --a: #1a86f5; --b: #131a6e; --glow: rgba(4, 60, 160, .36); position: relative; display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 16px 18px 18px; border-radius: 24px; text-align: left; color: #fff; overflow: hidden; background: linear-gradient(145deg, var(--a), var(--b)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 16px 36px var(--glow); } .tb-next--practice { --a: #34d399; --b: #047857; --glow: rgba(4, 120, 87, .36); } .tb-next--game { --a: #8b7dff; --b: #4c2fd6; --glow: rgba(76, 47, 214, .4); } .tb-next--tournament { --a: #fbbf24; --b: #c2410c; --glow: rgba(194, 65, 12, .36); } .tb-next--meeting { --a: #64748b; --b: #1e293b; --glow: rgba(15, 23, 42, .4); } .tb-next::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 70% at 100% 0%, rgba(255, 255, 255, .24), transparent 60%); pointer-events: none; } .tb-next-art { position: absolute; right: -4px; bottom: -16px; font-size: 108px; opacity: .15; transform: rotate(-8deg); pointer-events: none; } .tb-next-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tb-next-when { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .28); } .tb-next-when.is-soon { background: #fff; color: var(--b); box-shadow: 0 4px 12px rgba(0, 0, 0, .15); } .tb-next-time { font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; } .tb-next-title { position: relative; z-index: 1; margin-top: 12px; font-size: 24px; font-weight: 800; letter-spacing: -.024em; line-height: 1.14; overflow-wrap: anywhere; } .tb-next-meta { position: relative; z-index: 1; font-size: 14px; font-weight: 600; opacity: .86; } .tb-next-where { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; font-size: 14px; font-weight: 600; } .tb-app .tb-next-where .tb-pill { background: rgba(255, 255, 255, .2); color: #fff; font-size: 11.5px; padding: 3px 9px; } /* ------------------------------------------------- home: notifications nudge */ .tb-promo { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) 30px; grid-template-areas: "icon main x" "icon cta cta"; gap: 4px 14px; align-items: start; margin: 16px calc(16px + var(--tb-safe-right)) 0 calc(16px + var(--tb-safe-left)); padding: 16px; border-radius: 22px; overflow: hidden; background: var(--tb-card); box-shadow: var(--tb-card-ring), var(--tb-shadow), inset 0 0 0 1px rgba(90, 167, 255, .24); } .tb-promo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 0% 0%, rgba(26, 134, 245, .17), transparent 62%); pointer-events: none; } .tb-promo-icon { grid-area: icon; position: relative; width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; background: var(--tb-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 20px rgba(4, 107, 210, .35); } .tb-promo-icon i { transform-origin: 50% 12%; animation: tbRing 3.2s ease-in-out infinite; } @keyframes tbRing { 0%, 72%, 100% { transform: rotate(0); } 76% { transform: rotate(16deg); } 81% { transform: rotate(-13deg); } 86% { transform: rotate(8deg); } 91% { transform: rotate(-4deg); } } .tb-promo-main { grid-area: main; position: relative; display: flex; flex-direction: column; min-width: 0; } .tb-promo-main b { font-size: 16px; font-weight: 750; } .tb-promo-main small { margin-top: 2px; color: var(--tb-text-2); font-size: 14px; line-height: 1.4; } .tb-promo-x { grid-area: x; position: relative; width: 30px; height: 30px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; background: var(--tb-surface-3); color: var(--tb-text-3); font-size: 13px; } .tb-promo-cta { grid-area: cta; position: relative; justify-self: start; margin-top: 8px; } /* --------------------------------------------------------- home: admin tiles */ .tb-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (min-width: 560px) { .tb-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .tb-quick-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 14px; border-radius: 20px; text-align: left; background: var(--tb-card); box-shadow: var(--tb-card-ring), var(--tb-shadow); } .tb-quick-tile b { margin-top: 12px; font-size: 15.5px; font-weight: 750; } .tb-quick-tile small { color: var(--tb-text-3); font-size: 13px; } .tb-quick-icon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 14px rgba(0, 0, 0, .18); } .tb-quick-icon--blue { background: linear-gradient(135deg, #3b9bff, #046bd2); } .tb-quick-icon--amber { background: linear-gradient(135deg, #fbbf24, #d97706); } .tb-quick-icon--green { background: linear-gradient(135deg, #34d399, #059669); } .tb-quick-icon--violet { background: linear-gradient(135deg, #a78bfa, #6d28d9); } /* ------------------------------------------------------------------ callouts */ .tb-callout { display: flex; align-items: center; gap: 14px; padding: 16px; } .tb-callout-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; color: var(--tb-accent); background: var(--tb-lens); } .tb-callout-icon--green { color: #10b981; background: rgba(16, 185, 129, .14); } .tb-callout-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .tb-callout-main b { font-size: 15.5px; font-weight: 700; } .tb-callout-main small { margin-top: 2px; color: var(--tb-text-3); font-size: 14px; line-height: 1.4; } .tb-callout-main small b { font-size: inherit; font-weight: 650; color: var(--tb-text-2); } /* ------------------------------------------------ segmented control: slider */ @supports selector(:has(*)) { .tb-seg { position: relative; isolation: isolate; --n: 2; --si: 0; } .tb-seg:has(> :nth-child(3)) { --n: 3; } .tb-seg:has(> :nth-child(4)) { --n: 4; } .tb-seg:has(> :nth-child(2).is-on) { --si: 1; } .tb-seg:has(> :nth-child(3).is-on) { --si: 2; } .tb-seg:has(> :nth-child(4).is-on) { --si: 3; } .tb-seg::before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px - (var(--n) - 1) * 2px) / var(--n)); border-radius: 9px; background: var(--tb-seg-on); box-shadow: 0 1px 3px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .04); transform: translateX(calc(var(--si) * (100% + 2px))); transition: transform .4s var(--tb-spring); } .tb-seg:not(:has(> .is-on))::before { opacity: 0; } .tb-seg button.is-on, .tb-app[data-theme="dark"] .tb-seg button.is-on { background: transparent; box-shadow: none; } } /* ------------------------------------------------------------ press + motion */ .tb-railcard, .tb-announce, .tb-fieldcard, .tb-next, .tb-quick-tile, .tb-actbtn, .tb-promo-cta { transition: transform .22s var(--tb-ease), box-shadow .22s; } .tb-railcard:active, .tb-announce:active, .tb-fieldcard:active, .tb-next:active, .tb-quick-tile:active { transform: scale(.972); } .tb-pill--ok i { animation: tbBlink 2.2s ease-in-out infinite; } .tb-avatar { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); } .tb-profile--hero { position: relative; overflow: hidden; margin-top: 4px; padding: 20px; color: #fff; background: var(--tb-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 16px 38px rgba(4, 60, 150, .32); } .tb-profile--hero::after { content: ""; position: absolute; right: -50px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .22), transparent); pointer-events: none; } .tb-profile--hero > * { position: relative; z-index: 1; } .tb-profile--hero small { color: rgba(255, 255, 255, .82); } .tb-profile--hero .tb-avatar { box-shadow: 0 0 0 3px rgba(255, 255, 255, .35), 0 8px 20px rgba(0, 0, 0, .25); } .tb-app .tb-profile--hero .tb-badge { background: rgba(255, 255, 255, .2); color: #fff; } .tb-welcome-crest.has-img { width: 136px; height: 136px; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .42)); animation: tbFloat 6s ease-in-out infinite; } .tb-welcome-crest.has-img img { width: 100%; height: 100%; } @media (prefers-reduced-motion: reduce) { .tb-hero-glow, .tb-empty-art, .tb-welcome-crest, .tb-promo-icon i, .tb-live::before, .tb-pill--ok i, .tb-fieldcard-dot::after { animation: none !important; } .tb-tabbar::before, .tb-seg::before { transition: none; } } /* Home: the bar frosts (and shows the name) once the hero has scrolled away. */ .tb-bar--home { transition: background-color .25s, border-color .25s; } .tb-bar--home.is-past { background: var(--tb-bar-bg); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-bottom-color: var(--tb-line-2); color: var(--tb-text); } .tb-bar--home.is-past .tb-bar-title { opacity: 1; } /* Field status pills on a coloured card keep their status colour in the dot. */ .tb-app .tb-next-where .tb-pill--ok i { background: #6ee7b7; } .tb-app .tb-next-where .tb-pill--warn i { background: #fcd34d; } .tb-app .tb-next-where .tb-pill--bad i { background: #fca5a5; box-shadow: 0 0 0 2px rgba(239, 68, 68, .45); } .tb-app .tb-link.tb-welcome-install { color: #fff; } /* ------------------------------------------------------------------ counts */ .tb-tab-badge--info { background: var(--tb-blue); box-shadow: 0 0 0 2px var(--tb-bg), 0 3px 8px rgba(4, 107, 210, .45); } .tb-seg-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 5px; padding: 0 5px; border-radius: 9px; background: var(--tb-red); color: #fff; font: 700 11px/18px var(--tb-font); font-style: normal; font-variant-numeric: tabular-nums; animation: tbPop .3s var(--tb-spring); } .tb-seg-badge--info { background: var(--tb-blue); } .tb-seg-badge[hidden] { display: none; } .tb-headpill { display: inline-flex; align-items: center; height: 22px; margin-left: 6px; padding: 0 9px; border-radius: 11px; vertical-align: 3px; background: var(--tb-red); color: #fff; font: 700 12px/22px var(--tb-font); letter-spacing: 0; font-variant-numeric: tabular-nums; } .tb-headpill--info { background: var(--tb-lens); color: var(--tb-accent); } /* -------------------------------------------- roster: numbers and positions */ .tb-person-av { position: relative; flex: 0 0 auto; display: inline-flex; } .tb-jersey { position: absolute; right: -7px; bottom: -5px; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 10px; background: #fff; color: #0b1640; font: 800 11.5px/20px var(--tb-font); font-style: normal; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -.01em; box-shadow: 0 0 0 2px var(--tb-bg), 0 3px 8px rgba(0, 0, 0, .28); } .tb-poses { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: -3px; } .tb-pos { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 6px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; line-height: 1; font-style: normal; } .tb-pos--gk { background: rgba(245, 158, 11, .17); color: #b45309; } .tb-pos--def { background: rgba(59, 130, 246, .15); color: #1d4ed8; } .tb-pos--mid { background: rgba(16, 185, 129, .15); color: #047857; } .tb-pos--fwd { background: rgba(239, 68, 68, .14); color: #b91c1c; } .tb-pos--x { background: var(--tb-surface-3); color: var(--tb-text-2); } .tb-app[data-theme="dark"] .tb-pos--gk { color: #fcd34d; } .tb-app[data-theme="dark"] .tb-pos--def { color: #93c5fd; } .tb-app[data-theme="dark"] .tb-pos--mid { color: #6ee7b7; } .tb-app[data-theme="dark"] .tb-pos--fwd { color: #fca5a5; } /* The number sits on a jersey; positions are big toggles. */ .tb-numpick { position: relative; width: 170px; height: 150px; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; cursor: text; } .tb-numpick > i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 142px; color: var(--tb-blue-2); filter: drop-shadow(0 14px 24px rgba(4, 60, 150, .38)); } .tb-app .tb-numinput { position: relative; z-index: 1; width: 104px; margin-top: 22px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; color: #fff !important; font: 850 48px/1.1 var(--tb-font) !important; letter-spacing: -.02em; text-align: center; font-variant-numeric: tabular-nums; text-shadow: 0 2px 8px rgba(0, 20, 80, .35); -webkit-appearance: none; appearance: none; } .tb-app .tb-numinput::placeholder { color: rgba(255, 255, 255, .6); } .tb-posgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tb-posbtn { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 12px; border-radius: 16px; text-align: left; font-weight: 650; font-size: 15px; background: var(--tb-surface-2); box-shadow: inset 0 0 0 1px var(--tb-line-2); transition: box-shadow .15s, background-color .15s, transform .15s var(--tb-ease); } .tb-posbtn .tb-pos { min-width: 40px; height: 26px; border-radius: 8px; font-size: 12px; } .tb-posbtn-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-posbtn .tb-posbtn-check { color: var(--tb-accent); font-size: 18px; opacity: 0; transform: scale(.5); transition: opacity .15s, transform .25s var(--tb-spring); } .tb-posbtn.is-on { background: var(--tb-lens); box-shadow: inset 0 0 0 2px var(--tb-accent); } .tb-posbtn.is-on .tb-posbtn-check { opacity: 1; transform: scale(1); } .tb-posbtn:active { transform: scale(.97); } /* ------------------------------------------------------------- invite page */ .tb-join { position: fixed; inset: 0; z-index: 99990; overflow-y: auto; background: var(--tb-grad); color: #fff; font: 400 16px/1.45 var(--tb-font); -webkit-font-smoothing: antialiased; display: flex; align-items: center; justify-content: center; padding: calc(24px + var(--tb-safe-top)) 18px calc(24px + var(--tb-safe-bottom)); } .tb-join-card { position: relative; width: 100%; max-width: 420px; padding: 28px 22px; border-radius: 28px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 30px 60px rgba(0, 0, 0, .25); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .tb-join-crest { width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 22px; background: rgba(255, 255, 255, .16); display: flex; align-items: center; justify-content: center; font-size: 34px; overflow: hidden; } .tb-join-crest img { width: 80%; height: 80%; object-fit: contain; } .tb-join-crest.has-img { width: 112px; height: 112px; border-radius: 0; background: none; overflow: visible; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .38)); } .tb-join-crest.has-img img { width: 100%; height: 100%; } .tb-join h1 { margin: 0; font-size: 28px; font-weight: 850; letter-spacing: -.02em; text-align: center; color: #fff; line-height: 1.15; } .tb-join-sub { margin: 8px 0 22px; text-align: center; color: rgba(255, 255, 255, .85); } .tb-join form { display: grid; gap: 14px; } .tb-join .tb-field > span { color: rgba(255, 255, 255, .9); font-size: 13.5px; font-weight: 650; } .tb-join .tb-input { background: rgba(255, 255, 255, .95) !important; color: #0d1530 !important; box-shadow: none !important; } .tb-join .tb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .tb-join .tb-btn { width: 100%; min-height: 54px; background: #fff; color: #131a6e; box-shadow: 0 12px 26px rgba(0, 0, 0, .2); border-radius: 15px; font-weight: 750; font-size: 16.5px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .tb-join-error { padding: 12px 14px; border-radius: 14px; background: rgba(239, 68, 68, .25); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); font-weight: 600; font-size: 14.5px; } .tb-join-meter { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .2); overflow: hidden; } .tb-join-meter i { display: block; height: 100%; width: 0; background: #34d399; transition: width .2s, background .2s; } .tb-join-small { color: rgba(255, 255, 255, .72); font-size: 13.5px; text-align: center; margin-top: 16px; } .tb-join-small a { color: #fff; text-decoration: underline; } /* ------------------------------------------------------------------ wider */ @media (min-width: 760px) { .tb-scroll { padding-left: calc(max(16px, (100% - 720px) / 2)); padding-right: calc(max(16px, (100% - 720px) / 2)); } .tb-scroll.is-flush { padding-left: 0; padding-right: 0; } .tb-home > .tb-section, .tb-home > .tb-announce { max-width: 720px; margin-left: auto; margin-right: auto; } .tb-home > .tb-announce { width: calc(100% - 32px); } .tb-hero { padding-left: calc(max(16px, (100% - 720px) / 2)); padding-right: calc(max(16px, (100% - 720px) / 2)); } .tb-msgs { padding-left: calc(max(10px, (100% - 760px) / 2)); padding-right: calc(max(10px, (100% - 760px) / 2)); } .tb-composer { padding-left: calc(max(10px, (100% - 760px) / 2)); padding-right: calc(max(10px, (100% - 760px) / 2)); } .tb-subnav { padding-left: calc(max(16px, (100% - 720px) / 2)); padding-right: calc(max(16px, (100% - 720px) / 2)); } .tb-home > .tb-promo { width: calc(100% - 32px); max-width: 720px; margin-left: auto; margin-right: auto; } } /* ===================================================================================== Wave 2: attendance, results and form, weather, Pulse, voice messages, chat extras, adoption / reports / reminders, and motion polish. ===================================================================================== */ .tb-app, .tb-join { --tb-display: "Barlow Condensed", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --tb-win: #10b981; --tb-draw: #94a3b8; --tb-loss: #ef4444; --tb-going: #10b981; --tb-maybe: #f59e0b; --tb-no: #ef4444; } .tb-app[data-theme="dark"] { --tb-draw: #7b879f; } /* Big numbers in the condensed display face. */ .tb-event-date b, .tb-resrow-date b, .tb-match-score b, .tb-match-time, .tb-record-main b, .tb-record-cells b, .tb-fg-dot, .tb-result b, .tb-wxnow-top b, .tb-stepper-val, .tb-ring b, .tb-railcard-code, .tb-next-vs, .tb-wxsheet-now b, .tb-hour b, .tb-attnums b, .tb-funnel-num b { font-family: var(--tb-display); font-variant-numeric: tabular-nums; letter-spacing: 0; } .tb-event-date b { font-size: 25px; font-weight: 700; } .tb-large h1 { font-family: var(--tb-display); font-size: 40px; font-weight: 800; letter-spacing: -.005em; line-height: 1; } .tb-railcard-code { font-size: 32px; font-weight: 800; letter-spacing: .01em; } /* ------------------------------------------------------------- result + form */ .tb-result { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 3px; border-radius: 13px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--tb-surface-3); color: var(--tb-text); white-space: nowrap; } .tb-result b { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 13.5px; font-weight: 800; background: var(--tb-draw); } .tb-result--w b { background: var(--tb-win); } .tb-result--l b { background: var(--tb-loss); } .tb-result--w { background: rgba(16, 185, 129, .12); } .tb-result--l { background: rgba(239, 68, 68, .1); } /* Form guide: round W / D / L badges, latest on the right with a bar under it (Premier League). */ .tb-fg { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; } .tb-fg-dot { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-size: 13.5px; font-weight: 800; color: #fff; background: var(--tb-draw); box-shadow: inset 0 -1.5px 0 rgba(0, 0, 0, .16); } .tb-fg-dot--w { background: var(--tb-win); } .tb-fg-dot--l { background: var(--tb-loss); } .tb-fg-dot--w.is-latest { box-shadow: inset 0 -1.5px 0 rgba(0, 0, 0, .16), 0 0 0 2px var(--tb-bg), 0 0 0 3.5px rgba(16, 185, 129, .55); } .tb-fg-dot--d.is-latest { box-shadow: inset 0 -1.5px 0 rgba(0, 0, 0, .16), 0 0 0 2px var(--tb-bg), 0 0 0 3.5px rgba(148, 163, 184, .6); } .tb-fg-dot--l.is-latest { box-shadow: inset 0 -1.5px 0 rgba(0, 0, 0, .16), 0 0 0 2px var(--tb-bg), 0 0 0 3.5px rgba(239, 68, 68, .55); } .tb-fg--sm .tb-fg-dot { width: 21px; height: 21px; font-size: 12px; } .tb-fg--xs { gap: 3px; } .tb-fg--xs .tb-fg-dot { width: 17px; height: 17px; font-size: 10px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55); } .tb-railcard-form { position: relative; z-index: 1; margin-top: 8px; } .tb-team-form { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .tb-team-form small { font-size: 12.5px; font-weight: 700; opacity: .85; } .tb-team-form .tb-fg-dot { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5); } .tb-team-form .tb-fg-dot.is-latest { box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); } /* Weather chip on a row. */ .tb-wx { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12.5px; font-weight: 650; white-space: nowrap; color: var(--tb-text-2); background: var(--tb-surface-2); box-shadow: inset 0 0 0 .5px var(--tb-line); } .tb-wx i { font-size: 12px; color: #f59e0b; } .tb-wx.is-storm { color: #b45309; background: rgba(245, 158, 11, .14); } .tb-wx.is-storm i { color: #d97706; } .tb-app[data-theme="dark"] .tb-wx.is-storm { color: #fcd34d; } .tb-event-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; } .tb-vs { font-weight: 600; color: var(--tb-text-2); font-size: 14px; } /* My players' replies on list rows. */ .tb-rsvp-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px 0 7px; border-radius: 11px; font-style: normal; font-size: 12.5px; font-weight: 700; white-space: nowrap; background: var(--tb-surface-3); color: var(--tb-text-2); } .tb-rsvp-chip i { font-size: 12px; } .tb-rsvp-chip--going { background: rgba(16, 185, 129, .13); color: #047857; } .tb-rsvp-chip--maybe { background: rgba(245, 158, 11, .15); color: #b45309; } .tb-rsvp-chip--no { background: rgba(239, 68, 68, .12); color: #b91c1c; } .tb-rsvp-chip--none { background: rgba(4, 107, 210, .1); color: var(--tb-blue); box-shadow: inset 0 0 0 1px rgba(4, 107, 210, .25); } .tb-app[data-theme="dark"] .tb-rsvp-chip--going { color: #6ee7b7; } .tb-app[data-theme="dark"] .tb-rsvp-chip--maybe { color: #fcd34d; } .tb-app[data-theme="dark"] .tb-rsvp-chip--no { color: #fca5a5; } .tb-app[data-theme="dark"] .tb-rsvp-chip--none { color: #8cc3ff; } /* Going / Maybe / Can't buttons. */ .tb-rsvp { position: relative; z-index: 2; display: grid; gap: 8px; margin-top: 12px; } .tb-rsvp-row { display: grid; gap: 6px; } .tb-rsvp-name { font-size: 13.5px; font-weight: 750; opacity: .95; } .tb-att-mine .tb-rsvp-name { font-size: 15px; } .tb-rsvp-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .tb-rsvp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 10px; border-radius: 13px; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; background: var(--tb-surface-2); color: var(--tb-text-2); box-shadow: inset 0 0 0 1px var(--tb-line-2); transition: transform .16s var(--tb-ease), background-color .2s, color .2s, box-shadow .2s; } .tb-rsvp-btn span { overflow: hidden; text-overflow: ellipsis; } .tb-rsvp-btn:active { transform: scale(.95); } .tb-rsvp-btn.is-on { color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .14); animation: tbPop .28s var(--tb-spring); } .tb-rsvp-btn--going.is-on { background: linear-gradient(135deg, #34d399, #059669); } .tb-rsvp-btn--maybe.is-on { background: linear-gradient(135deg, #fbbf24, #d97706); } .tb-rsvp-btn--no.is-on { background: linear-gradient(135deg, #f87171, #dc2626); } /* On a coloured card the buttons are frosted glass. */ .tb-next .tb-rsvp-btn { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .34); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .tb-next .tb-rsvp-btn.is-on { background: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); } .tb-next .tb-rsvp-btn--going.is-on { color: #047857; } .tb-next .tb-rsvp-btn--maybe.is-on { color: #b45309; } .tb-next .tb-rsvp-btn--no.is-on { color: #b91c1c; } .tb-rsvp-counts { font-size: 13.5px; font-weight: 600; } .tb-rsvp-counts b { font-weight: 800; } /* --------------------------------------------------------- the next-up card */ .tb-next { cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } .tb-next-wx { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; } .tb-next-wx i { font-size: 15px; } .tb-next-wx.is-storm { padding: 3px 9px; border-radius: 999px; background: rgba(251, 191, 36, .28); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3); } .tb-next-match { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 14px 0 6px; } .tb-next-side { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; } .tb-next-side b { font-size: 14px; font-weight: 750; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-next-side .tb-crest b { font-size: 12px; font-weight: 800; text-overflow: clip; } .tb-next-side .tb-crest { background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); } .tb-opp { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; font-weight: 800; font-size: 12px; letter-spacing: .02em; color: #fff; background: linear-gradient(145deg, #64748b, #1e293b); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), 0 4px 12px rgba(0, 0, 0, .2); } .tb-opp--lg { width: 64px; height: 64px; border-radius: 19px; font-size: 19px; } .tb-next-vs { display: flex; flex-direction: column; align-items: center; font-size: 26px; font-weight: 800; line-height: 1; white-space: nowrap; } .tb-next-vs small { margin-top: 4px; font-family: var(--tb-font); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .8; } .tb-next-tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .tb-next-tags em, .tb-match-tags em, .tb-eventhero-tags em { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; font-style: normal; font-size: 13px; font-weight: 700; white-space: nowrap; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .28); } .tb-next-tags em i, .tb-match-tags em i, .tb-eventhero-tags em i { font-size: 12px; opacity: .9; } .tb-match-tags em.is-storm, .tb-eventhero-tags em.is-storm { background: rgba(251, 191, 36, .3); } .tb-next-att { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13.5px; opacity: .92; } .tb-next-att .is-going { color: #a7f3d0; } .tb-next-att .is-maybe { color: #fde68a; } .tb-next-att .is-no { color: #fecaca; } /* ------------------------------------------------------------ home: the sky */ /* The header follows the weather outside: sky colours, sun or moon, drifting clouds, rain, lightning, fog. */ .tb-hero[data-sky="partly-day"] { --tb-hero-grad: linear-gradient(180deg, #2670cf 0%, #2463c0 30%, #1a4aa4 68%, #16206e 100%); } .tb-hero[data-sky="cloudy-day"] { --tb-hero-grad: linear-gradient(180deg, #4a6891 0%, #405d86 32%, #2f4670 70%, #1d2a55 100%); } .tb-hero[data-sky="rain-day"] { --tb-hero-grad: linear-gradient(180deg, #3a5277 0%, #324869 34%, #253859 70%, #172047 100%); } .tb-hero[data-sky="storm-day"], .tb-hero[data-sky="storm-night"] { --tb-hero-grad: linear-gradient(180deg, #1c2440 0%, #1d2748 36%, #1a1f3f 72%, #0f1330 100%); } .tb-hero[data-sky="fog-day"] { --tb-hero-grad: linear-gradient(180deg, #6a7d97 0%, #5d7190 34%, #445a7c 72%, #26345c 100%); } .tb-hero[data-sky="clear-night"] { --tb-hero-grad: linear-gradient(180deg, #0a1433 0%, #0d1a45 36%, #111f5a 72%, #1a1f6e 100%); } .tb-hero[data-sky="partly-night"] { --tb-hero-grad: linear-gradient(180deg, #0e1838 0%, #111e4a 36%, #15225a 72%, #1a1f6e 100%); } .tb-hero[data-sky="cloudy-night"], .tb-hero[data-sky="rain-night"], .tb-hero[data-sky="fog-night"] { --tb-hero-grad: linear-gradient(180deg, #172238 0%, #18233f 36%, #182450 72%, #151b52 100%); } .tb-hero { background: var(--tb-hero-grad); transition: background .6s ease; } .tb-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .tb-sky > i { position: absolute; display: block; opacity: 0; transition: opacity .8s ease; } .tb-sky-sun { top: calc(var(--tb-safe-top) - 60px); right: -40px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 244, 200, .95) 0 16%, rgba(255, 214, 110, .5) 17%, rgba(255, 200, 90, .18) 42%, rgba(255, 200, 90, 0) 68%); animation: tbSun 9s ease-in-out infinite alternate; } @keyframes tbSun { from { transform: scale(1) rotate(0deg); } to { transform: scale(1.08) rotate(8deg); } } .tb-sky-moon { top: calc(var(--tb-safe-top) + 22px); right: 34px; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 36% 36%, #fffbe8, #e8e2c8 60%, #cfc7a6); box-shadow: 0 0 40px 12px rgba(255, 248, 220, .18), inset -9px -6px 0 rgba(0, 0, 0, .08); } .tb-sky-stars { inset: 0; background-image: radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 28% 12%, #fff, transparent), radial-gradient(1.6px 1.6px at 44% 30%, #fff, transparent), radial-gradient(1px 1px at 62% 16%, #fff, transparent), radial-gradient(1.3px 1.3px at 78% 38%, #fff, transparent), radial-gradient(1px 1px at 88% 12%, #fff, transparent), radial-gradient(1.2px 1.2px at 20% 48%, #fff, transparent), radial-gradient(1px 1px at 54% 52%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 60%, #fff, transparent), radial-gradient(1px 1px at 8% 66%, #fff, transparent), radial-gradient(1.2px 1.2px at 36% 70%, #fff, transparent), radial-gradient(1px 1px at 94% 58%, #fff, transparent); animation: tbTwinkle 5s ease-in-out infinite alternate; } @keyframes tbTwinkle { from { filter: brightness(.7); } to { filter: brightness(1.25); } } .tb-sky-cloud { width: 220px; height: 64px; border-radius: 40px; background: rgba(255, 255, 255, .5); filter: blur(10px); animation: tbCloud 46s linear infinite; animation-delay: var(--drift, 0s); } .tb-sky-cloud::before, .tb-sky-cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; } .tb-sky-cloud::before { width: 110px; height: 90px; left: 34px; top: -40px; } .tb-sky-cloud::after { width: 80px; height: 70px; left: 110px; top: -26px; } .tb-sky-cloud--1 { top: calc(var(--tb-safe-top) + 18px); left: -30%; } .tb-sky-cloud--2 { top: calc(var(--tb-safe-top) + 92px); left: -40%; transform: scale(.72); opacity: 0; animation-duration: 62s; } .tb-sky-cloud--3 { top: calc(var(--tb-safe-top) + 150px); left: -60%; transform: scale(1.2); animation-duration: 80s; } @keyframes tbCloud { from { translate: -10% 0; } to { translate: 190vw 0; } } .tb-sky-rain { inset: -20% 0 0; background-image: repeating-linear-gradient(104deg, rgba(210, 228, 255, 0) 0 14px, rgba(210, 228, 255, .4) 14px 15px, rgba(210, 228, 255, 0) 15px 30px); background-size: 30px 120px; animation: tbRain .55s linear infinite; } .tb-sky-rain--2 { background-size: 44px 170px; opacity: 0; animation-duration: .8s; } @keyframes tbRain { from { background-position: 0 0; } to { background-position: -26px 120px; } } .tb-sky-flash { inset: 0; background: radial-gradient(80% 60% at 70% 10%, rgba(230, 236, 255, .85), rgba(230, 236, 255, 0) 70%); animation: tbFlash 7s infinite; } @keyframes tbFlash { 0%, 71%, 74%, 77%, 100% { opacity: 0; } 72% { opacity: .9; } 75.5% { opacity: .6; } } .tb-sky-fog { inset: 30% -20% 0; background: linear-gradient(180deg, rgba(220, 228, 240, 0), rgba(220, 228, 240, .4) 60%, rgba(220, 228, 240, .15)); filter: blur(12px); animation: tbFog 14s ease-in-out infinite alternate; } @keyframes tbFog { from { transform: translateX(-4%); } to { transform: translateX(4%); } } .tb-hero[data-sky="clear-day"] .tb-sky-sun, .tb-hero[data-sky="partly-day"] .tb-sky-sun { opacity: 1; } .tb-hero[data-sky="partly-day"] .tb-sky-cloud--1, .tb-hero[data-sky="partly-day"] .tb-sky-cloud--3, .tb-hero[data-sky="partly-night"] .tb-sky-cloud--1 { opacity: .8; } .tb-hero[data-sky^="cloudy"] .tb-sky-cloud, .tb-hero[data-sky^="rain"] .tb-sky-cloud, .tb-hero[data-sky^="storm"] .tb-sky-cloud { opacity: .7; } .tb-hero[data-sky^="storm"] .tb-sky-cloud { background: rgba(160, 170, 200, .45); } .tb-hero[data-sky$="night"] .tb-sky-cloud { background: rgba(170, 185, 220, .22); } .tb-hero[data-sky="clear-night"] .tb-sky-moon, .tb-hero[data-sky="partly-night"] .tb-sky-moon { opacity: 1; } .tb-hero[data-sky="clear-night"] .tb-sky-stars, .tb-hero[data-sky="partly-night"] .tb-sky-stars { opacity: .9; } .tb-hero[data-sky^="rain"] .tb-sky-rain, .tb-hero[data-sky^="storm"] .tb-sky-rain { opacity: .75; } .tb-hero[data-sky^="rain"] .tb-sky-rain--2, .tb-hero[data-sky^="storm"] .tb-sky-rain--2 { opacity: .45; } .tb-hero[data-sky^="storm"] .tb-sky-flash { opacity: 1; } .tb-hero[data-sky^="fog"] .tb-sky-fog { opacity: 1; } .tb-hero[data-sky$="night"] .tb-hero-glow, .tb-hero[data-sky^="storm"] .tb-hero-glow { opacity: .35; } .tb-hero-in { position: relative; z-index: 1; } .tb-hero-text { flex: 1 1 auto; min-width: 0; } .tb-fieldcard, .tb-hero .tb-storm { position: relative; z-index: 1; } .tb-wxnow { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin-top: 10px; padding: 4px 12px 4px 8px; border-radius: 999px; color: #fff; text-align: left; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform .2s var(--tb-ease); } .tb-wxnow:active { transform: scale(.96); } .tb-wxnow-top { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; } .tb-wxnow-top i { font-size: 17px; color: #ffe08a; filter: drop-shadow(0 2px 6px rgba(255, 200, 80, .45)); } .tb-wxnow-top b { font-size: 23px; font-weight: 700; line-height: 1; } .tb-hero-text .tb-wxnow small { display: block; min-width: 0; font-size: 13px; font-weight: 650; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .92); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-wxnow-chev { flex: 0 0 auto; font-size: 10px; opacity: .65; } .tb-hero[data-sky$="night"] .tb-wxnow-top i { color: #e9e4c8; filter: none; } /* Storm tip: in the header it is glass, elsewhere a card. */ .tb-storm { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 18px; background: var(--tb-card); box-shadow: var(--tb-card-ring), var(--tb-shadow), inset 3px 0 0 #f59e0b; } .tb-storm-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; color: #fff; background: linear-gradient(135deg, #fbbf24, #d97706); box-shadow: 0 6px 14px rgba(217, 119, 6, .35); } .tb-storm--warning .tb-storm-icon { background: linear-gradient(135deg, #f87171, #b91c1c); box-shadow: 0 6px 14px rgba(185, 28, 28, .4); animation: tbBolt 2.4s ease-in-out infinite; } @keyframes tbBolt { 0%, 86%, 100% { filter: none; } 90% { filter: brightness(1.6); } } .tb-storm-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .tb-storm-main b { font-size: 15px; font-weight: 750; } .tb-storm-main small { color: var(--tb-text-2); font-size: 13.5px; line-height: 1.35; } .tb-hero .tb-storm { background: rgba(255, 196, 64, .16); color: #fff; box-shadow: inset 0 0 0 .5px rgba(255, 220, 120, .45); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .tb-hero .tb-storm--warning { background: rgba(248, 113, 113, .2); box-shadow: inset 0 0 0 .5px rgba(255, 160, 160, .5); } .tb-hero .tb-storm-main small { color: rgba(255, 255, 255, .85); } .tb-hero .tb-storm .tb-pillbtn { background: #fff; color: #b45309; } .tb-eventpage .tb-storm { margin-top: 12px; } /* The weather sheet. */ .tb-wxsheet-now { display: flex; align-items: center; gap: 14px; padding: 4px 2px 14px; } .tb-wxsheet-now > i { font-size: 38px; color: #f59e0b; } .tb-wxsheet-now b { font-size: 56px; font-weight: 700; line-height: .9; } .tb-wxsheet-now span { color: var(--tb-text-2); font-size: 14px; line-height: 1.45; } .tb-hours { display: flex; gap: 6px; overflow-x: auto; margin: 14px -2px 0; padding: 2px 2px 10px; scrollbar-width: none; scroll-snap-type: x proximity; } .tb-hours::-webkit-scrollbar { display: none; } .tb-hour { flex: 0 0 56px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0 9px; border-radius: 16px; background: var(--tb-surface-2); box-shadow: inset 0 0 0 .5px var(--tb-line); } .tb-hour small { font-size: 12px; font-weight: 700; color: var(--tb-text-3); } .tb-hour > i { font-size: 17px; color: #f59e0b; height: 18px; } .tb-hour b { font-size: 19px; font-weight: 700; } .tb-hour em { min-height: 14px; font-style: normal; font-size: 11.5px; font-weight: 700; color: #3b82f6; } .tb-hour.is-storm { background: rgba(245, 158, 11, .14); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .35); } .tb-wxsun { display: flex; justify-content: space-between; gap: 10px; margin: 6px 2px 0; font-size: 13.5px; font-weight: 650; color: var(--tb-text-2); } .tb-wxsun i { color: #f59e0b; margin-right: 4px; } /* ----------------------------------------------------------------- the Pulse */ .tb-home > .tb-pulse { margin: 16px calc(16px + var(--tb-safe-right)) 0 calc(16px + var(--tb-safe-left)); } .tb-pulse { position: relative; padding: 16px 16px 14px; border-radius: 24px; background: var(--tb-card); box-shadow: var(--tb-card-ring), var(--tb-shadow); overflow: hidden; isolation: isolate; } .tb-pulse::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--tb-pulse-a, 0deg), #1a86f5, #7c5cff, #10b981, #1a86f5); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .5s; } .tb-pulse.is-ai::before { opacity: .9; animation: tbPulseSpin 7s linear infinite; } .tb-pulse::after { content: ""; position: absolute; z-index: -1; top: -60px; right: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 92, 255, .16), transparent); pointer-events: none; } @property --tb-pulse-a { syntax: ""; inherits: false; initial-value: 0deg; } @keyframes tbPulseSpin { to { --tb-pulse-a: 360deg; } } .tb-pulse-head { display: flex; align-items: center; gap: 10px; } .tb-pulse-orb { position: relative; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(from 200deg, #1a86f5, #7c5cff, #10b981, #1a86f5); box-shadow: 0 6px 16px rgba(76, 47, 214, .3); animation: tbOrb 6s linear infinite; } .tb-pulse-orb i { position: absolute; inset: 5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, rgba(255, 255, 255, .5) 30%, rgba(255, 255, 255, 0) 64%); animation: tbOrbCore 2.8s ease-in-out infinite; } @keyframes tbOrb { to { transform: rotate(360deg); } } @keyframes tbOrbCore { 0%, 100% { transform: scale(.8); opacity: .8; } 50% { transform: scale(1); opacity: 1; } } .tb-pulse-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .tb-pulse-title b { font-family: var(--tb-display); font-size: 21px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; line-height: 1; } .tb-pulse-title small { margin-top: 2px; color: var(--tb-text-3); font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-pulse-refresh { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 17px; display: inline-flex; align-items: center; justify-content: center; color: var(--tb-text-3); font-size: 14px; } .tb-pulse-refresh:active { background: var(--tb-surface-3); } .tb-pulse-refresh.is-spinning i { animation: tbSpin .9s linear infinite; } .tb-pulse-headline { margin: 12px 2px 8px; font-size: 19px; font-weight: 800; letter-spacing: -.018em; line-height: 1.2; } .tb-pulse-items { display: grid; gap: 2px; } .tb-pulse-item { width: 100%; display: flex; align-items: flex-start; gap: 11px; padding: 9px 6px; border-radius: 14px; text-align: left; } .tb-pulse-item:not(:disabled):active { background: var(--tb-surface-2); } .tb-pulse-item:disabled { cursor: default; opacity: 1; } .tb-pulse-icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--tb-accent); background: var(--tb-lens); } .tb-pulse-item--rsvp .tb-pulse-icon { color: #b45309; background: rgba(245, 158, 11, .15); } .tb-pulse-item--field .tb-pulse-icon, .tb-pulse-item--weather .tb-pulse-icon { color: #dc2626; background: rgba(239, 68, 68, .12); } .tb-pulse-item--result .tb-pulse-icon { color: #059669; background: rgba(16, 185, 129, .13); } .tb-pulse-item--announcement .tb-pulse-icon { color: #fff; background: var(--tb-grad); } .tb-pulse-item--event .tb-pulse-icon { color: #6d4cf5; background: rgba(124, 92, 255, .13); } .tb-pulse-text { flex: 1 1 auto; min-width: 0; padding-top: 5px; font-size: 15px; line-height: 1.38; } .tb-pulse-item .tb-chev { align-self: center; } .tb-pulse-empty { display: flex; align-items: center; gap: 8px; margin: 2px 2px 4px; color: var(--tb-text-2); font-size: 14.5px; } .tb-pulse-empty i { color: var(--tb-green); } .tb-pulse-foot { display: flex; align-items: center; gap: 7px; margin: 8px 2px 0; padding-top: 10px; border-top: .5px solid var(--tb-line-2); color: var(--tb-text-3); font-size: 12px; font-weight: 600; } .tb-pulse-foot i { color: #7c5cff; } .tb-pulse-skel { display: grid; gap: 10px; margin: 16px 2px 6px; } .tb-pulse-skel .tb-skel { height: 13px; } /* Admin tiles. */ .tb-quick-icon--teal { background: linear-gradient(135deg, #2dd4bf, #0f766e); } .tb-quick-icon--red { background: linear-gradient(135deg, #fb7185, #e11d48); } .tb-row-icon--teal { background: linear-gradient(135deg, #2dd4bf, #0f766e); color: #fff; } .tb-row-icon--violet { background: linear-gradient(135deg, #a78bfa, #6d28d9); color: #fff; } /* ----------------------------------------------------------- match header */ .tb-match { position: relative; margin-top: 12px; padding: 16px 16px 16px; border-radius: 26px; color: #fff; overflow: hidden; isolation: isolate; background: radial-gradient(120% 90% at 50% -20%, rgba(124, 92, 255, .55), transparent 60%), linear-gradient(160deg, #1b2a7a 0%, #0f1650 58%, #0a0e35 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 18px 40px rgba(12, 18, 70, .38); } .tb-match::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18; background: linear-gradient(90deg, transparent calc(50% - .75px), rgba(255, 255, 255, .8) calc(50% - .75px) calc(50% + .75px), transparent calc(50% + .75px)), radial-gradient(circle at 50% 56%, transparent 58px, rgba(255, 255, 255, .8) 59px 60.5px, transparent 61.5px); } .tb-match--w { background: radial-gradient(120% 90% at 50% -20%, rgba(52, 211, 153, .5), transparent 60%), linear-gradient(160deg, #0d5c4a 0%, #0a3d3a 58%, #06201f 100%); } .tb-match--l { background: radial-gradient(120% 90% at 50% -20%, rgba(248, 113, 113, .42), transparent 60%), linear-gradient(160deg, #5c1d2a 0%, #3a1224 58%, #1e0a16 100%); } .tb-match--d { background: radial-gradient(120% 90% at 50% -20%, rgba(148, 163, 184, .45), transparent 60%), linear-gradient(160deg, #334155 0%, #1f2937 58%, #111827 100%); } .tb-match-glow { position: absolute; z-index: -1; left: 50%; top: 42%; width: 240px; height: 240px; margin-left: -120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .14), transparent); pointer-events: none; } .tb-match-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .9; } .tb-match-ft { padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .16); letter-spacing: .06em; } .tb-match-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin: 18px 0 16px; } .tb-match-side { display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; text-align: center; } .tb-match-side b { font-size: 15px; font-weight: 750; line-height: 1.2; max-width: 100%; overflow-wrap: anywhere; } .tb-match-side .tb-crest b { font-size: 19px; font-weight: 800; line-height: 1; overflow-wrap: normal; text-overflow: clip; } .tb-match-side .tb-crest { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 10px 24px rgba(0, 0, 0, .25); } .tb-match-mid { display: flex; flex-direction: column; align-items: center; min-width: 96px; } .tb-match-score { display: flex; align-items: center; gap: 8px; } .tb-match-score b { font-size: 60px; font-weight: 800; line-height: .9; text-shadow: 0 6px 24px rgba(0, 0, 0, .3); } .tb-match-score i { font-style: normal; font-size: 34px; opacity: .6; } .tb-match-res { margin-top: 8px; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: rgba(255, 255, 255, .92); color: #0f172a; } .tb-match-res--w { color: #047857; } .tb-match-res--l { color: #b91c1c; } .tb-match-time { font-size: 40px; font-weight: 800; line-height: 1; white-space: nowrap; } .tb-match-mid small { margin-top: 5px; font-size: 12.5px; font-weight: 700; opacity: .82; } .tb-match-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .tb-eventhero-tags { position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } /* Enter the result. */ .tb-resultcta { width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 14px 16px; border-radius: 20px; text-align: left; color: #fff; background: linear-gradient(135deg, #fbbf24, #ea580c); box-shadow: 0 12px 26px rgba(234, 88, 12, .3); transition: transform .2s var(--tb-ease); } .tb-resultcta:active { transform: scale(.975); } .tb-resultcta > i:first-child { width: 40px; height: 40px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; background: rgba(255, 255, 255, .22); } .tb-resultcta span { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; } .tb-resultcta b { font-size: 16px; font-weight: 750; } .tb-resultcta small { font-size: 13px; opacity: .9; } .tb-resultcta .tb-chev { color: rgba(255, 255, 255, .85); } .tb-resultcta.has-result { background: var(--tb-card); color: var(--tb-text); box-shadow: var(--tb-card-ring), var(--tb-shadow); } .tb-resultcta.has-result > i:first-child { background: var(--tb-lens); color: var(--tb-accent); } .tb-resultcta.has-result small { color: var(--tb-text-3); opacity: 1; } .tb-resultcta.has-result .tb-chev { color: var(--tb-text-3); } .tb-scorepick { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 6px 0 4px; } .tb-scorepick-dash { font-family: var(--tb-display); font-size: 44px; font-weight: 800; color: var(--tb-text-3); padding-top: 22px; } .tb-stepper { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; } .tb-stepper small { max-width: 100%; font-size: 13.5px; font-weight: 750; color: var(--tb-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-stepper-btn { width: 52px; height: 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; color: var(--tb-accent); background: var(--tb-lens); transition: transform .12s; } .tb-stepper-btn:active { transform: scale(.9); } .tb-stepper-val { display: block; font-size: 72px; font-weight: 800; line-height: .95; min-width: 1.2em; text-align: center; } .tb-stepper-val.is-bump { animation: tbPop .26s var(--tb-spring); } .tb-hint--center { text-align: center; } /* Game details in the event editor. */ .tb-gamebox { display: grid; gap: 14px; padding: 14px; border-radius: 18px; background: rgba(124, 92, 255, .07); box-shadow: inset 0 0 0 1px rgba(124, 92, 255, .2); } .tb-gamebox-head { display: flex; align-items: center; gap: 8px; color: #6d4cf5; font-size: 14px; } .tb-gamebox-head b { font-weight: 800; letter-spacing: .02em; text-transform: uppercase; font-size: 12.5px; } .tb-app[data-theme="dark"] .tb-gamebox-head { color: #b9aeff; } .tb-field .tb-chips--wrap + .tb-input { margin-top: 8px; } /* ---------------------------------------------------------------- attendance */ .tb-att .tb-card { margin-top: 0; } .tb-att .tb-card + .tb-card { margin-top: 10px; } .tb-att-mine { padding: 14px; } .tb-att-mine .tb-rsvp { margin-top: 8px; } .tb-att-ask { display: block; font-size: 15px; font-weight: 700; color: var(--tb-text); } .tb-att-card { padding: 14px 14px 6px; } .tb-attbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--tb-surface-3); } .tb-attbar i { display: block; height: 100%; transition: width .6s var(--tb-ease); } .tb-attbar .is-going { background: linear-gradient(90deg, #34d399, #10b981); } .tb-attbar .is-maybe { background: #fbbf24; } .tb-attbar .is-no { background: #f87171; } .tb-attnums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 12px 0 4px; text-align: center; } .tb-attnums span { display: flex; flex-direction: column; align-items: center; font-size: 12px; font-weight: 700; color: var(--tb-text-3); text-transform: uppercase; letter-spacing: .04em; } .tb-attnums b { font-size: 30px; font-weight: 800; line-height: 1.05; color: var(--tb-text); } .tb-attnums b.is-going { color: #059669; } .tb-attnums b.is-maybe { color: #d97706; } .tb-attnums b.is-no { color: #dc2626; } .tb-attnums b.is-none { color: var(--tb-text-3); } .tb-app[data-theme="dark"] .tb-attnums b.is-going { color: #34d399; } .tb-app[data-theme="dark"] .tb-attnums b.is-maybe { color: #fbbf24; } .tb-app[data-theme="dark"] .tb-attnums b.is-no { color: #f87171; } .tb-attgroup { padding: 8px 0 4px; border-top: .5px solid var(--tb-line-2); margin-top: 8px; } .tb-attgroup-head { display: flex; align-items: center; gap: 7px; padding: 4px 2px 6px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--tb-text-2); } .tb-attgroup-head em { font-style: normal; margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--tb-surface-3); font-size: 12px; line-height: 20px; text-align: center; } .tb-attgroup-head--going i { color: #10b981; } .tb-attgroup-head--maybe i { color: #f59e0b; } .tb-attgroup-head--no i { color: #ef4444; } .tb-attgroup-head--none i { color: var(--tb-text-3); } .tb-attlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; } .tb-attp { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 6px; border-radius: 12px; text-align: left; } button.tb-attp:active { background: var(--tb-surface-2); } .tb-attp-av { position: relative; flex: 0 0 auto; } .tb-attp-av .tb-jersey { position: absolute; right: -5px; bottom: -4px; transform: scale(.82); } .tb-attp-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .tb-attp-main b { font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-attp-main small { color: var(--tb-text-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-attp-main .tb-you { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--tb-accent); } .tb-attp-more { flex: 0 0 auto; color: var(--tb-text-3); font-size: 13px; } /* ------------------------------------------------------------------- results */ .tb-record { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "main cells" "form form"; gap: 12px 16px; align-items: center; padding: 16px; border-radius: 22px; color: #fff; background: radial-gradient(90% 120% at 100% 0%, rgba(124, 92, 255, .5), transparent 60%), linear-gradient(150deg, #1d3aa8, #111a66 70%); box-shadow: 0 14px 32px rgba(17, 26, 102, .3); } .tb-record-main { grid-area: main; display: flex; flex-direction: column; } .tb-record-main b { font-size: 40px; font-weight: 800; line-height: .95; } .tb-record-main b i { font-style: normal; opacity: .5; margin: 0 1px; } .tb-record-main small { margin-top: 3px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .75; } .tb-record-cells { grid-area: cells; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; } .tb-record-cells span { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 12px; background: rgba(255, 255, 255, .1); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; opacity: .95; } .tb-record-cells b { font-size: 21px; font-weight: 800; line-height: 1.05; } .tb-record-cells .is-pts { background: #fff; color: #111a66; } .tb-record-form { grid-area: form; display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: .5px solid rgba(255, 255, 255, .18); } .tb-record-form small { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .8; } .tb-record-form .tb-fg-dot { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .35); } .tb-record-form .tb-fg-dot.is-latest { box-shadow: 0 0 0 2px #fff; } .tb-resrow { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 14px; text-align: left; } .tb-resrow + .tb-resrow { border-top: .5px solid var(--tb-line); } .tb-resrow:active { background: var(--tb-surface-2); } .tb-resrow-date { flex: 0 0 40px; display: flex; flex-direction: column; align-items: center; line-height: 1.05; color: var(--tb-text-2); } .tb-resrow-date small { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--tb-text-3); } .tb-resrow-date b { font-size: 22px; font-weight: 700; } .tb-resrow-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .tb-resrow-main b { font-size: 15.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-resrow-main small { color: var(--tb-text-3); font-size: 13px; } .tb-h2-team { display: flex; align-items: center; gap: 9px; } /* ---------------------------------------------------------- calendar sheet */ .tb-calsteps { display: grid; gap: 8px; } .tb-calbtn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 16px; text-align: left; background: var(--tb-surface-2); box-shadow: inset 0 0 0 .5px var(--tb-line-2); } .tb-calbtn:active { transform: scale(.985); } .tb-calbtn > i:first-child { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; color: #fff; background: linear-gradient(135deg, #94a3b8, #475569); } .tb-calbtn--apple > i:first-child { background: linear-gradient(135deg, #fb7185, #e11d48); } .tb-calbtn--google > i:first-child { background: linear-gradient(135deg, #60a5fa, #2563eb); } .tb-calbtn span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .tb-calbtn b { font-size: 15.5px; font-weight: 700; } .tb-calbtn small { color: var(--tb-text-3); font-size: 13px; } .tb-calsheet .tb-hint { margin-top: 12px; } .tb-link--danger { color: var(--tb-red) !important; margin-top: 6px; } /* ================================================================== voice */ .tb-compose-row { position: relative; } .tb-compose-mic { display: none; position: relative; z-index: 3; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform .22s var(--tb-spring), background .2s, box-shadow .2s; } .tb-composer.can-voice:not(.has-text) .tb-send[data-send] { display: none; } .tb-composer.can-voice:not(.has-text) .tb-compose-mic { display: inline-flex; } .tb-composer.is-rec-locked .tb-compose-mic, .tb-composer.is-rec-review .tb-compose-mic { visibility: hidden; } .tb-composer.is-rec-hold .tb-compose-mic { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(1.6); transition: transform .06s linear, background .2s; background: linear-gradient(135deg, #fb7185, #e11d48); box-shadow: 0 0 0 8px rgba(225, 29, 72, .16), 0 10px 26px rgba(225, 29, 72, .45); } .tb-composer.is-rec-hold .tb-compose-mic::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(225, 29, 72, .5); animation: tbPulse 1.4s ease-out infinite; } .tb-rec { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; border-radius: 26px; overflow: visible; background: var(--tb-surface); box-shadow: var(--tb-glass-ring); animation: tbRecIn .2s var(--tb-ease); } .tb-app[data-theme="dark"] .tb-rec { background: #131b35; } @keyframes tbRecIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } .tb-rec.is-binned { animation: tbBinned .28s ease-in forwards; pointer-events: none; } @keyframes tbBinned { to { opacity: 0; transform: translateY(12px) scale(.96); } } .tb-rec-bar { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; gap: 8px; padding: 0 5px 0 12px; } .tb-composer.is-rec-hold .tb-rec-bar { padding-right: 58px; } .tb-rec-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, .7); animation: tbBlink 1.1s ease-in-out infinite; } .tb-rec-time { flex: 0 0 auto; min-width: 38px; font-family: var(--tb-display); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; } .tb-rec-slide { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14.5px; font-weight: 650; color: var(--tb-text-3); white-space: nowrap; overflow: hidden; -webkit-mask: linear-gradient(90deg, #000 0 30%, rgba(0, 0, 0, .35) 50%, #000 70% 100%); -webkit-mask-size: 300% 100%; mask: linear-gradient(90deg, #000 0 30%, rgba(0, 0, 0, .35) 50%, #000 70% 100%); mask-size: 300% 100%; animation: tbShimmer 1.8s linear infinite; } .tb-rec-slide i { animation: tbNudgeLeft 1.1s ease-in-out infinite; } @keyframes tbShimmer { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } } @keyframes tbNudgeLeft { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } } .tb-rec-lock { position: absolute; right: 5px; bottom: calc(100% + 12px); width: 40px; height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 11px 0 9px; border-radius: 20px; background: var(--tb-glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--tb-glass-ring); color: var(--tb-text-2); transform: translateY(calc(var(--lift, 0) * -18px)); animation: tbLockIn .25s var(--tb-spring); } .tb-rec-lock span { font-size: 15px; transform: scale(calc(1 + var(--lift, 0) * .2)); color: color-mix(in srgb, var(--tb-accent) calc(var(--lift, 0) * 100%), var(--tb-text-2)); } .tb-rec-lock > i { font-size: 12px; animation: tbNudgeUp 1.1s ease-in-out infinite; } @keyframes tbLockIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; } } @keyframes tbNudgeUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .tb-rec-live { flex: 1 1 auto; min-width: 0; height: 32px; display: flex; align-items: center; justify-content: flex-end; gap: 2px; overflow: hidden; } .tb-rec-live i { flex: 0 0 3px; height: calc(3px + var(--v, 6) * .26px); border-radius: 2px; background: var(--tb-accent); opacity: .85; transition: height .08s linear; } .tb-rec-btn { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; color: var(--tb-text-2); } .tb-rec-btn:active { background: var(--tb-surface-3); } .tb-rec-btn[data-rec-trash] { color: #ef4444; } .tb-rec-stop { color: #ef4444; font-size: 15px; box-shadow: inset 0 0 0 1.5px rgba(239, 68, 68, .45); } .tb-rec-send { flex: 0 0 auto; } .tb-rec .tb-voice--draft { flex: 1 1 auto; min-width: 0; width: auto; } /* The voice bubble: play, waveform (tap or drag to seek), time and speed, the sender's photo. */ .tb-bubble.is-voice { padding: 8px 10px 7px 8px; } .tb-voice { display: flex; align-items: center; gap: 10px; width: min(66vw, 272px); color: var(--tb-accent); } .tb-msg.is-mine .tb-voice { color: #fff; } .tb-voice-play { flex: 0 0 auto; position: relative; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; background: var(--tb-grad); box-shadow: 0 5px 14px rgba(4, 107, 210, .3); transition: transform .14s var(--tb-ease); } .tb-voice-play:active { transform: scale(.9); } .tb-voice-play .fa-play { margin-left: 3px; } .tb-msg.is-mine .tb-voice-play { background: #fff; color: var(--tb-blue); box-shadow: 0 4px 12px rgba(0, 0, 0, .16); } .tb-voice.is-loading .tb-voice-play::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2.5px solid transparent; border-top-color: currentColor; animation: tbSpin .8s linear infinite; } .tb-msg:not(.is-mine) .tb-voice.is-loading .tb-voice-play::after { border-top-color: var(--tb-blue); } .tb-voice-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .tb-voice-wave { display: flex; align-items: center; gap: 2px; height: 32px; cursor: pointer; touch-action: pan-y; } .tb-voice-wave i { flex: 1 1 0; min-width: 1.5px; max-width: 3.5px; height: calc(3px + var(--v, 30) * .27px); border-radius: 2px; background: currentColor; opacity: .32; transition: opacity .12s, transform .2s; } .tb-voice-wave i.is-on { opacity: 1; } .tb-voice.is-playing .tb-voice-wave i.is-on:last-of-type { transform: scaleY(1.1); } .tb-voice-meta { display: flex; align-items: center; gap: 8px; min-height: 18px; font-size: 12px; font-weight: 650; color: var(--tb-text-3); } .tb-msg.is-mine .tb-voice-meta { color: rgba(255, 255, 255, .82); } .tb-voice-time { font-variant-numeric: tabular-nums; } .tb-voice-dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 6px rgba(16, 185, 129, .6); } .tb-voice.is-new:not(.is-started) .tb-voice-dot { display: inline-block; } .tb-voice-speed { padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: rgba(4, 107, 210, .12); color: var(--tb-blue); } .tb-msg.is-mine .tb-voice-speed { background: rgba(255, 255, 255, .22); color: #fff; } .tb-voice-tx { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 750; color: inherit; background: rgba(0, 0, 0, .06); } .tb-msg.is-mine .tb-voice-tx { background: rgba(255, 255, 255, .18); } .tb-voice-tx i { font-size: 9px; } .tb-voice-av { position: relative; flex: 0 0 auto; } .tb-voice-av i { position: absolute; right: -4px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; color: #fff; background: var(--tb-blue); box-shadow: 0 0 0 2px var(--tb-bubble-them); } .tb-voice.is-new .tb-voice-av i { background: #10b981; } .tb-msg.is-mine .tb-voice-av { display: none; } .tb-voice-text { margin-top: 7px; padding: 8px 10px; border-radius: 12px; font-size: 14.5px; line-height: 1.38; background: rgba(0, 0, 0, .06); -webkit-user-select: text; user-select: text; } .tb-msg.is-mine .tb-voice-text { background: rgba(255, 255, 255, .16); } .tb-chat--announce .tb-voice { color: var(--tb-accent); } .tb-chat--announce .tb-msg.is-mine .tb-voice-play { background: var(--tb-grad); color: #fff; } .tb-chat--announce .tb-msg.is-mine .tb-voice-meta { color: var(--tb-text-3); } .tb-voice--draft { color: var(--tb-accent); width: auto; } .tb-voice--draft .tb-voice-play { width: 36px; height: 36px; font-size: 14px; } /* ============================================================= chat extras */ .tb-pinbar { flex: 0 0 auto; padding: 6px calc(10px + var(--tb-safe-right)) 0 calc(10px + var(--tb-safe-left)); } .tb-pinbar-main { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 16px; text-align: left; background: var(--tb-glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--tb-glass-ring); } .tb-pinbar-icon { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; background: linear-gradient(135deg, #fbbf24, #d97706); transform: rotate(-12deg); } .tb-pinbar-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .tb-pinbar-text small { font-size: 11.5px; font-weight: 750; color: #b45309; } .tb-app[data-theme="dark"] .tb-pinbar-text small { color: #fbbf24; } .tb-pinbar-text b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-bubble-pin { position: absolute; top: -7px; right: -5px; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9.5px; color: #fff; background: linear-gradient(135deg, #fbbf24, #d97706); box-shadow: 0 0 0 2px var(--tb-bg); transform: rotate(-12deg); } .tb-msg.is-flash .tb-bubble { animation: tbFlashMsg 1.4s ease-out; } @keyframes tbFlashMsg { 0%, 30% { box-shadow: 0 0 0 4px rgba(251, 191, 36, .75); } 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); } } .tb-bubble.is-poll { padding: 12px; width: min(78vw, 330px); } .tb-poll-q { display: flex; align-items: flex-start; gap: 8px; margin: 0 2px 10px; font-size: 16px; line-height: 1.3; } .tb-poll-q i { margin-top: 3px; opacity: .8; } .tb-poll-q b { font-weight: 750; } .tb-poll-opts { display: grid; gap: 6px; } .tb-poll-opt { position: relative; width: 100%; display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 12px; border-radius: 13px; overflow: hidden; isolation: isolate; text-align: left; background: rgba(0, 0, 0, .05); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); transition: transform .12s; } .tb-poll-opt::before { content: ""; position: absolute; inset: 0; z-index: -1; width: var(--pct, 0%); background: rgba(4, 107, 210, .14); transition: width .5s var(--tb-ease); } .tb-poll-opt.is-lead::before { background: rgba(4, 107, 210, .22); } .tb-poll-opt:active { transform: scale(.98); } .tb-poll-check { flex: 0 0 auto; color: var(--tb-text-3); font-size: 17px; } .tb-poll-opt.is-mine .tb-poll-check { color: var(--tb-blue); } .tb-poll-text { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; } .tb-poll-pct { flex: 0 0 auto; font-family: var(--tb-display); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; } .tb-poll-foot { margin: 9px 2px 0; font-size: 12.5px; font-weight: 650; opacity: .7; } .tb-msg.is-mine .tb-poll-opt { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); } .tb-msg.is-mine .tb-poll-opt::before { background: rgba(255, 255, 255, .2); } .tb-msg.is-mine .tb-poll-opt.is-lead::before { background: rgba(255, 255, 255, .3); } .tb-msg.is-mine .tb-poll-check, .tb-msg.is-mine .tb-poll-opt.is-mine .tb-poll-check { color: #fff; } .tb-poll-edit { display: grid; gap: 8px; } .tb-seen { display: inline-flex; align-items: center; gap: 4px; color: var(--tb-accent); font-size: 11.5px; font-weight: 700; } .tb-seen-mark { color: var(--tb-accent); } /* =============================================================== admin */ .tb-adopt-hero { display: flex; align-items: center; gap: 16px; margin: 12px 0; padding: 16px; border-radius: 22px; color: #fff; background: linear-gradient(150deg, #0f766e, #134e4a 70%); box-shadow: 0 14px 32px rgba(15, 118, 110, .3); } .tb-adopt-hero-main { flex: 1 1 auto; min-width: 0; } .tb-adopt-hero h2 { font-size: 19px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; } .tb-adopt-hero p { margin-top: 3px; font-size: 13.5px; opacity: .88; line-height: 1.4; } .tb-ring { --pc: 0; position: relative; flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(closest-side, #0f5f59 76%, transparent 77% 100%), conic-gradient(#5eead4 calc(var(--pc) * 1%), rgba(255, 255, 255, .16) 0); } .tb-ring b { font-size: 24px; font-weight: 800; line-height: 1; } .tb-ring small { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .8; } .tb-pad-card { padding: 14px 16px; } .tb-funnel { display: grid; gap: 12px; } .tb-funnel-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; } .tb-funnel-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; min-width: 0; } .tb-funnel-label i { width: 16px; text-align: center; color: var(--tb-text-3); } .tb-funnel-bar { height: 8px; border-radius: 4px; background: var(--tb-surface-3); overflow: hidden; } .tb-funnel-bar i { display: block; height: 100%; border-radius: 4px; transition: width .8s var(--tb-ease); } .tb-funnel-row--joined .tb-funnel-bar i { background: linear-gradient(90deg, #93c5fd, #3b82f6); } .tb-funnel-row--installed .tb-funnel-bar i { background: linear-gradient(90deg, #5eead4, #0d9488); } .tb-funnel-row--alerts .tb-funnel-bar i { background: linear-gradient(90deg, #6ee7b7, #059669); } .tb-funnel-num { font-size: 13px; color: var(--tb-text-3); font-weight: 650; white-space: nowrap; } .tb-funnel-num b { font-size: 18px; font-weight: 800; color: var(--tb-text); } .tb-adopt-team { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; } .tb-adopt-team + .tb-adopt-team { border-top: .5px solid var(--tb-line); } .tb-adopt-team:active { background: var(--tb-surface-2); } .tb-adopt-team-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .tb-adopt-team-main b { font-size: 15.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-adopt-team-main small { color: var(--tb-text-3); font-size: 12.5px; } .tb-adopt-team-main small em { font-style: normal; color: #b45309; font-weight: 700; } .tb-adopt-stack { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--tb-surface-3); } .tb-adopt-stack i { display: block; height: 100%; } .tb-adopt-stack .is-alerts { background: #10b981; } .tb-adopt-stack .is-installed { background: #2dd4bf; } .tb-adopt-stack .is-joined { background: #93c5fd; } .tb-adopt > .tb-btn--block { margin: 12px 0; } .tb-adopt-filter { margin: 14px 0 10px; } .tb-adopt-person { padding: 12px 14px; } .tb-adopt-person + .tb-adopt-person { border-top: .5px solid var(--tb-line); } .tb-adopt-person-top { display: flex; align-items: center; gap: 10px; } .tb-adopt-person-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .tb-adopt-person-main b { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-adopt-person-main small { color: var(--tb-text-3); font-size: 12.5px; } .tb-stagepill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 12px; font-size: 12px; font-weight: 750; white-space: nowrap; background: var(--tb-surface-3); color: var(--tb-text-2); } .tb-stagepill i { font-size: 11px; } .tb-stagepill--bad { background: rgba(239, 68, 68, .12); color: #b91c1c; } .tb-stagepill--warn { background: rgba(245, 158, 11, .15); color: #b45309; } .tb-stagepill--info { background: rgba(59, 130, 246, .12); color: #1d4ed8; } .tb-stagepill--teal { background: rgba(20, 184, 166, .14); color: #0f766e; } .tb-stagepill--ok { background: rgba(16, 185, 129, .14); color: #047857; } .tb-app[data-theme="dark"] .tb-stagepill--bad { color: #fca5a5; } .tb-app[data-theme="dark"] .tb-stagepill--warn { color: #fcd34d; } .tb-app[data-theme="dark"] .tb-stagepill--info { color: #93c5fd; } .tb-app[data-theme="dark"] .tb-stagepill--teal { color: #5eead4; } .tb-app[data-theme="dark"] .tb-stagepill--ok { color: #6ee7b7; } .tb-adopt-contacts { display: grid; gap: 6px; margin: 10px 0 0 40px; } .tb-adopt-contact { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 12px; background: var(--tb-surface-2); } .tb-adopt-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--tb-text-3); } .tb-adopt-dot--bad { background: #ef4444; } .tb-adopt-dot--warn { background: #f59e0b; } .tb-adopt-dot--info { background: #3b82f6; } .tb-adopt-dot--teal { background: #14b8a6; } .tb-adopt-dot--ok { background: #10b981; } .tb-adopt-contact-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .tb-adopt-contact-main b { font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-adopt-contact-main small { color: var(--tb-text-3); font-size: 12px; } .tb-adopt-contact .tb-pillbtn { padding: 6px 11px; font-size: 12.5px; } .tb-adopt-sent { flex: 0 0 auto; color: #059669; font-size: 12.5px; font-weight: 750; } .tb-report { margin-top: 12px; padding: 14px; } .tb-report.is-removed { opacity: .72; } .tb-report-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tb-report-head small { color: var(--tb-text-3); font-size: 12.5px; } .tb-report-msg { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--tb-surface-2); box-shadow: inset 3px 0 0 var(--tb-line-2); } .tb-report-msg small { display: block; color: var(--tb-text-3); font-size: 12.5px; font-weight: 650; margin-bottom: 3px; } .tb-report-msg p { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; } .tb-report-voice { margin-top: 6px; padding: 8px 10px 6px 8px; border-radius: 16px; background: var(--tb-bubble-them); width: max-content; max-width: 100%; } .tb-report-voice .tb-voice { width: min(62vw, 260px); } .tb-report-img { display: block; max-height: 180px; margin-top: 6px; border-radius: 10px; } .tb-report-gone { color: var(--tb-text-3); } .tb-report-by { margin-top: 8px; color: var(--tb-text-2); font-size: 13px; } .tb-report-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; } .tb-report-actions .tb-link { margin-left: auto; } .tb-remind-hero { display: flex; align-items: center; gap: 14px; margin: 12px 0; padding: 16px; } .tb-remind-hero b { font-size: 17px; font-weight: 750; } .tb-remind-hero small { display: block; margin-top: 2px; color: var(--tb-text-3); font-size: 13.5px; line-height: 1.4; } .tb-remind-orb { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; background: linear-gradient(135deg, #94a3b8, #475569); } .tb-remind-hero.is-on .tb-remind-orb { background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 8px 20px rgba(5, 150, 105, .35); animation: tbRing 3.2s ease-in-out infinite; } @keyframes tbRing { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-12deg); } 88% { transform: rotate(10deg); } 92% { transform: rotate(-6deg); } 96% { transform: rotate(3deg); } } .tb-reminders .tb-card--list { margin-top: 0; } /* Single-column grids never grow past their card for a long e-mail or name. */ .tb-adopt-contacts, .tb-rsvp, .tb-rsvp-row, .tb-pulse-items, .tb-calsteps, .tb-funnel, .tb-gamebox, .tb-poll-opts, .tb-poll-edit, .tb-pulse-skel { grid-template-columns: minmax(0, 1fr); } /* ================================================================ motion */ /* Push and pop: a longer, softer ease; the screen underneath dims and recedes further. */ .tb-screen { transition: transform .44s cubic-bezier(.2, .82, .2, 1), opacity .28s ease, filter .44s cubic-bezier(.2, .82, .2, 1); } .tb-screen.is-under { transform: translateX(-28%); filter: brightness(.88) saturate(.92); } .tb-stagepill > .tb-screen + .tb-screen { box-shadow: -16px 0 40px rgba(0, 0, 0, .16); } .tb-screen.is-instant, .tb-screen.is-dragging { transition: none !important; } .tb-screen.is-fade { transform: translateY(12px) scale(.985); } /* The team card grows into the team page (View Transitions). */ ::view-transition-group(tb-morph) { animation-duration: .52s; animation-timing-function: cubic-bezier(.2, .82, .2, 1); } ::view-transition-old(tb-morph), ::view-transition-new(tb-morph) { height: 100%; width: 100%; object-fit: cover; object-position: top; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; } /* Sections rise in as a screen first paints (TB.ui.stagger); cards lift on press. */ .tb-pulse-item, .tb-resrow, .tb-attp, .tb-calbtn, .tb-adopt-team { transition: background-color .15s, transform .15s; } .tb-record, .tb-match, .tb-resultcta, .tb-pulse { will-change: transform; } @media (prefers-reduced-motion: reduce) { .tb-sky > i, .tb-pulse-orb, .tb-pulse-orb i, .tb-pulse.is-ai::before, .tb-rec-dot, .tb-rec-slide, .tb-rec-slide i, .tb-rec-lock > i, .tb-storm--warning .tb-storm-icon, .tb-remind-hero.is-on .tb-remind-orb, .tb-composer.is-rec-hold .tb-compose-mic::after, .tb-rsvp-btn.is-on { animation: none !important; } .tb-screen, .tb-attbar i, .tb-funnel-bar i { transition: none !important; } ::view-transition-group(tb-morph), ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } } @media (min-width: 760px) { .tb-home > .tb-pulse { max-width: 720px; margin-left: auto; margin-right: auto; } .tb-pinbar { padding-left: calc(max(10px, (100% - 760px) / 2)); padding-right: calc(max(10px, (100% - 760px) / 2)); } } /* ================================================================== maps */ /* Leaflet loads after this sheet, so every override here is scoped under .tb-app to win. */ .tb-app .tb-map { position: relative; z-index: 0; width: 100%; background: var(--tb-surface-3); font: inherit; } .tb-app .tb-map.leaflet-container { background: var(--tb-surface-3); outline: none; } .tb-app[data-theme="dark"] .tb-map.leaflet-container { background: #0d1326; } .tb-map--event { height: 168px; cursor: pointer; } .tb-map--fields { height: min(44vh, 320px); } .tb-map--picker { height: 100%; } .tb-map-fail { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; color: var(--tb-text-3); font-size: 14px; text-align: center; } .tb-mapcard { position: relative; overflow: hidden; margin-top: 12px; } .tb-mapcard .tb-map { border-radius: var(--tb-radius) var(--tb-radius) 0 0; } .tb-mapcard--fields .tb-map { border-radius: var(--tb-radius); } .tb-fields-map { margin-top: 12px; } .tb-mapcard-go { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-align: left; border-top: .5px solid var(--tb-line); } .tb-mapcard-go:active { background: var(--tb-surface-2); } .tb-mapcard-go > i:first-child { width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; background: linear-gradient(135deg, #3b9bff, #046bd2); box-shadow: 0 6px 14px rgba(4, 107, 210, .3); } .tb-mapcard-go span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .tb-mapcard-go b { font-size: 15.5px; font-weight: 700; } .tb-mapcard-go small { color: var(--tb-text-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Pins: a teardrop in the field's status colour (closed fields pulse). */ .tb-app .tb-pin { background: none; border: 0; } .tb-pin-body { position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3b9bff, #046bd2); box-shadow: 0 0 0 2.5px #fff, 0 6px 14px rgba(0, 0, 0, .35); } .tb-pin-body i { transform: rotate(45deg); color: #fff; font-size: 13px; } .tb-pin--ok .tb-pin-body { background: linear-gradient(135deg, #34d399, #059669); } .tb-pin--warn .tb-pin-body { background: linear-gradient(135deg, #fbbf24, #d97706); } .tb-pin--bad .tb-pin-body { background: linear-gradient(135deg, #f87171, #dc2626); } .tb-pin--bad .tb-pin-body::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid rgba(239, 68, 68, .7); animation: tbPulse 2s ease-out infinite; } .tb-pin--event .tb-pin-body { background: linear-gradient(135deg, #8b7dff, #4c2fd6); } /* Popups and controls in the app's colours. */ .tb-app .tb-popup .leaflet-popup-content-wrapper { border-radius: 16px; background: var(--tb-sheet); color: var(--tb-text); box-shadow: var(--tb-shadow-lg); } .tb-app .tb-popup .leaflet-popup-tip { background: var(--tb-sheet); } .tb-app .tb-popup .leaflet-popup-content { margin: 12px 14px; font: inherit; } .tb-pop { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 180px; } .tb-pop b { font-size: 15px; font-weight: 750; } .tb-pop-actions { display: flex; gap: 6px; flex-wrap: wrap; } .tb-pop-actions .tb-pillbtn { padding: 6px 11px; font-size: 13px; } /* OpenStreetMap has no dark style: dim and invert its tiles in the dark theme. */ .tb-app[data-theme="dark"] .tb-map.is-osm .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.88) saturate(.8); } .tb-app .tb-map-layer { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border: 0; border-radius: 999px; font: 700 12.5px/1 var(--tb-font); color: var(--tb-text); cursor: pointer; background: var(--tb-glass); box-shadow: var(--tb-glass-ring); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .tb-app .tb-map-layer i { font-size: 12px; } .tb-app .leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, .72); color: #4a5575; border-radius: 8px 0 0 0; } .tb-app[data-theme="dark"] .leaflet-control-attribution { background: rgba(10, 15, 34, .7); color: #a9b3d3; } .tb-app .leaflet-control-attribution a { color: inherit; text-decoration: underline; } .tb-app .leaflet-bar { border: 0; border-radius: 12px; overflow: hidden; box-shadow: var(--tb-glass-ring); } .tb-app .leaflet-bar a { width: 34px; height: 34px; line-height: 34px; background: var(--tb-glass); color: var(--tb-text); border-bottom-color: var(--tb-line-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* Directions on the Up next card. */ .tb-next-go { position: relative; z-index: 2; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 7px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 750; color: #fff; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .34); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .tb-next-go:active { transform: scale(.95); } /* The pin picker: move the map under a fixed pin. */ .tb-picker { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .tb-picker-search { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 14px; background: var(--tb-surface-2); box-shadow: inset 0 0 0 .5px var(--tb-line-2); } .tb-picker-search > i { color: var(--tb-text-3); } .tb-app .tb-picker-search input { flex: 1 1 auto; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; font-size: 16px; color: var(--tb-text); padding: 6px 0; } .tb-picker-map { position: relative; height: min(52vh, 440px); border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 .5px var(--tb-line-2); } .tb-picker-pin { position: absolute; z-index: 500; left: 50%; top: 50%; transform: translate(-50%, -100%); font-size: 40px; line-height: 1; color: #ef4444; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); } .tb-picker-pin::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 10px; height: 4px; margin-left: -5px; border-radius: 50%; background: rgba(0, 0, 0, .35); } .tb-picker-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .tb-picker-actions .tb-btn { min-height: 46px; padding: 0 12px; font-size: 15px; } .tb-picker .tb-link--danger { justify-self: center; } .tb-pinrow { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: -4px; } .tb-pinrow-note { display: inline-flex; align-items: center; gap: 6px; color: var(--tb-text-3); font-size: 13px; } .tb-pinrow-note i { color: var(--tb-accent); } @media (prefers-reduced-motion: reduce) { .tb-pin--bad .tb-pin-body::after { animation: none; } } /* Boca Arcade: local, touch-first mini games for the wait between matches. */ .tb-games-teaser { width: calc(100% - 32px); max-width: 720px; margin: 12px auto 0; display: flex; align-items: center; gap: 14px; padding: 15px 17px; border-radius: 20px; text-align: left; color: #fff; background: linear-gradient(120deg, #1b3a9b, #146bcc 64%, #1ba7ba); box-shadow: 0 12px 28px rgba(12, 57, 138, .22); } .tb-games-teaser:active { transform: scale(.985); } .tb-games-teaser-icon { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.17); font-size: 23px; } .tb-games-teaser > span:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 0; } .tb-games-teaser small { font-size: 10px; font-weight: 800; letter-spacing: .13em; opacity: .8; } .tb-games-teaser b { font-size: 18px; line-height: 1.1; } .tb-games-teaser span span { font-size: 12px; opacity: .9; } .tb-games-teaser .tb-chev { color: #fff; opacity: .85; } /* Home game ticker: a compact, swipeable strip of kickoff times and recorded scores. */ .tb-scoreboard { margin-top: 21px; } .tb-scoreboard .tb-section-head { padding-bottom: 1px; } .tb-scoreboard .tb-section-head .tb-link { display: inline-flex; align-items: center; gap: 4px; } .tb-scoreboard .tb-section-head .tb-link i { font-size: 10px; } .tb-ticker-intro { padding: 0 4px; color: var(--tb-text-3); font-size: 12px; } .tb-ticker-rail { display: flex; gap: 10px; margin-top: 12px; padding: 2px 4px 13px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scroll-padding-inline: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tb-ticker-rail::-webkit-scrollbar { display: none; } .tb-ticker-card { flex: 0 0 226px; display: flex; flex-direction: column; min-height: 167px; padding: 15px 15px 12px !important; border-radius: 18px; background: var(--tb-card) !important; color: var(--tb-text) !important; box-shadow: var(--tb-card-ring), var(--tb-shadow) !important; text-align: left !important; scroll-snap-align: start; transition: transform .16s var(--tb-ease), box-shadow .16s; } .tb-ticker-card:active { transform: scale(.98); } .tb-ticker-card--final { box-shadow: inset 0 3px 0 var(--tb-blue), var(--tb-card-ring), var(--tb-shadow) !important; } .tb-ticker-card--w { box-shadow: inset 0 3px 0 var(--tb-win), var(--tb-card-ring), var(--tb-shadow) !important; } .tb-ticker-card--d { box-shadow: inset 0 3px 0 var(--tb-draw), var(--tb-card-ring), var(--tb-shadow) !important; } .tb-ticker-card--l { box-shadow: inset 0 3px 0 var(--tb-loss), var(--tb-card-ring), var(--tb-shadow) !important; } .tb-ticker-card--underway { box-shadow: inset 0 3px 0 var(--tb-green), var(--tb-card-ring), var(--tb-shadow) !important; } .tb-ticker-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding-bottom: 9px; border-bottom: 1px dashed var(--tb-line-2); font-size: 12px; } .tb-ticker-top b { color: var(--tb-text); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .tb-ticker-top span { overflow: hidden; color: var(--tb-text-3); text-overflow: ellipsis; white-space: nowrap; } .tb-ticker-teams { display: grid; gap: 7px; padding: 12px 0 10px; } .tb-ticker-team { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 31px; } .tb-ticker-team > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; } .tb-ticker-team > b { flex: 0 0 auto; min-width: 21px; text-align: right; color: var(--tb-text-3); font: 800 21px/1 var(--tb-display); font-variant-numeric: tabular-nums; } .tb-ticker-team.is-leading > b { color: var(--tb-text); } .tb-ticker-team .tb-crest--xs { width: 29px; height: 29px; } .tb-ticker-opp { flex: 0 0 29px; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: var(--tb-surface-3); color: var(--tb-text-2); font-size: 9px; font-weight: 850; letter-spacing: -.02em; } .tb-ticker-foot { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: auto; min-width: 0; } .tb-ticker-status { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 22px; padding: 3px 7px; border-radius: 7px; background: var(--tb-lens); color: var(--tb-blue); font-size: 10px; font-style: normal; font-weight: 850; white-space: nowrap; } .tb-ticker-status--final { background: rgba(4,107,210,.11); color: var(--tb-blue); } .tb-ticker-status--w { background: rgba(16,185,129,.14); color: #078765; } .tb-ticker-status--d { background: rgba(148,163,184,.18); color: #64748b; } .tb-ticker-status--l { background: rgba(239,68,68,.12); color: #d44545; } .tb-ticker-status--underway { background: rgba(16,185,129,.14); color: #078765; } .tb-ticker-status--pending { background: rgba(245,158,11,.15); color: #aa6200; } .tb-app[data-theme="dark"] .tb-ticker-status--underway { color: #70e6ba; } .tb-app[data-theme="dark"] .tb-ticker-status--w { color: #70e6ba; } .tb-app[data-theme="dark"] .tb-ticker-status--d { color: #c0cadb; } .tb-app[data-theme="dark"] .tb-ticker-status--l { color: #ffa3a3; } .tb-app[data-theme="dark"] .tb-ticker-status--pending { color: #fbc366; } .tb-ticker-foot small { min-width: 0; overflow: hidden; color: var(--tb-text-3); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .tb-ticker-empty { display: flex; align-items: center; gap: 10px; min-height: 68px; margin-top: 12px; padding: 14px 16px; border-radius: 15px; background: var(--tb-card); box-shadow: var(--tb-card-ring); color: var(--tb-text-2); font-size: 13px; } .tb-ticker-empty i { color: var(--tb-blue); font-size: 18px; } @media (min-width: 760px) { .tb-home > .tb-scoreboard { max-width: 720px; } } @media (max-width: 390px) { .tb-ticker-card { flex-basis: 207px; } } .tb-arcade { width: min(100%, 770px); padding: 18px 16px 34px; margin: 0 auto; } .tb-arcade-hero { position: relative; overflow: hidden; min-height: 170px; padding: 27px 24px; border-radius: 25px; color: #fff; background: radial-gradient(circle at 90% 12%, rgba(49,244,188,.5), transparent 30%), linear-gradient(130deg,#0e7f77,#1063b4 57%,#142773); box-shadow: 0 18px 38px rgba(11,63,122,.2); } .tb-arcade-hero::after { content: ''; position: absolute; inset: 14px 13px; border: 1px solid rgba(255,255,255,.26); border-radius: 19px; pointer-events: none; } .tb-arcade-eyebrow { font-size: 10px; letter-spacing: .16em; font-weight: 800; color: #b9fff0; } .tb-arcade-hero h1 { margin-top: 7px; font: 800 clamp(35px,7vw,48px)/1 'Barlow Condensed',var(--tb-font); letter-spacing: .01em; } .tb-arcade-hero p { max-width: 320px; margin-top: 9px; font-size: 14px; color: rgba(255,255,255,.9); } .tb-arcade-stars { position: absolute; right: -6px; bottom: 13px; transform: rotate(-18deg); letter-spacing: 6px; font-size: 30px; color: rgba(255,255,255,.25); } .tb-arcade-intro { margin: 19px 3px 13px; color: var(--tb-text-2); font-size: 14px; } .tb-arcade-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; } .tb-arcade-card { position: relative; display: flex; flex-direction: column; min-height: 224px; padding: 17px; border-radius: 20px; text-align: left; color: #fff; overflow: hidden; box-shadow: 0 12px 24px rgba(10,23,67,.14); transition: transform .18s var(--tb-spring), box-shadow .18s; } .tb-arcade-card:active { transform: scale(.975); } .tb-arcade-card--penalty { background: linear-gradient(150deg,#2275dd,#0e2b76); } .tb-arcade-card--juggle { background: linear-gradient(150deg,#16a88b,#075966); } .tb-arcade-card--memory { background: linear-gradient(150deg,#9868e7,#40248a); } .tb-arcade-card::before { content: ''; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.12); right: -33px; top: -30px; } .tb-arcade-card-art { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; background: rgba(255,255,255,.18); font-size: 28px; } .tb-arcade-card-copy { position: relative; display: grid; align-content: end; flex: 1; gap: 4px; } .tb-arcade-card-copy small { font-size: 10px; letter-spacing: .11em; font-weight: 800; opacity: .78; } .tb-arcade-card-copy b { font: 800 24px/1.05 'Barlow Condensed',var(--tb-font); } .tb-arcade-card-copy span { font-size: 12px; opacity: .87; } .tb-arcade-card-copy em { margin-top: 7px; font-size: 11px; font-style: normal; font-weight: 800; color: #baffed; } .tb-arcade-card-arrow { position: absolute; right: 15px; top: 19px; font-size: 14px; } .tb-arcade-privacy { margin: 18px 4px 0; color: var(--tb-text-3); font-size: 12px; text-align: center; } .tb-game-head { display: flex; align-items: center; gap: 11px; margin-bottom: 17px; } .tb-game-back { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; background: var(--tb-card); box-shadow: var(--tb-card-ring); color: var(--tb-text); } .tb-game-head > span { display: grid; gap: 1px; } .tb-game-head small { font-size: 10px; letter-spacing: .13em; font-weight: 800; color: var(--tb-accent); } .tb-game-head b { font: 800 27px/1.05 'Barlow Condensed',var(--tb-font); } .tb-game-head em { font-size: 12px; font-style: normal; color: var(--tb-text-3); } .tb-game-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 13px; } .tb-game-stats > span { display: grid; gap: 2px; padding: 11px 13px; border-radius: 15px; background: var(--tb-card); box-shadow: var(--tb-card-ring); } .tb-game-stats small { font-size: 10px; letter-spacing: .11em; font-weight: 800; color: var(--tb-text-3); } .tb-game-stats b { font: 800 21px/1.15 'Barlow Condensed',var(--tb-font); } .tb-game-feedback { min-height: 25px; margin: 12px 4px; color: var(--tb-text-2); font-size: 14px; font-weight: 650; text-align: center; } .tb-game-finish { display: grid; gap: 9px; justify-items: center; margin-top: 16px; padding: 18px; border-radius: 18px; background: var(--tb-card); box-shadow: var(--tb-card-ring); text-align: center; } .tb-game-finish strong { font: 800 27px/1 'Barlow Condensed',var(--tb-font); } .tb-game-finish span { color: var(--tb-text-2); font-size: 13px; } .tb-game-finish .tb-btn { margin-top: 4px; } .tb-penalty-stage { position: relative; overflow: hidden; height: min(62vh,380px); min-height: 310px; border-radius: 23px; background: linear-gradient(#102e80 0%,#1e5aac 43%,#096d57 44%,#0b8355 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18),0 12px 25px rgba(7,56,91,.15); } .tb-penalty-stage::after { content: ''; position: absolute; bottom: 1%; left: -10%; width: 120%; height: 25%; border-top: 2px solid rgba(255,255,255,.5); border-radius: 50%; pointer-events: none; } .tb-penalty-crowd { position: absolute; top: 5%; width: 100%; text-align: center; color: rgba(255,255,255,.42); letter-spacing: 12px; font-size: 12px; } .tb-penalty-goal { position: absolute; top: 15%; left: 11%; width: 78%; height: 45%; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); border: 6px solid #fff; border-bottom-width: 5px; border-radius: 9px 9px 0 0; background: repeating-linear-gradient(0deg,rgba(255,255,255,.15) 0 1px,transparent 1px 19px),repeating-linear-gradient(90deg,rgba(255,255,255,.15) 0 1px,transparent 1px 19px),rgba(15,76,113,.45); box-shadow: 0 7px 20px rgba(0,0,0,.25); } .tb-penalty-goal button { position: relative; z-index: 2; display: grid; place-items: center; min-width: 0; min-height: 0; border: 0; } .tb-penalty-goal button:hover .tb-penalty-target,.tb-penalty-goal button:focus-visible .tb-penalty-target { transform: scale(1.35); background: rgba(255,255,255,.32); } .tb-penalty-target { width: 26px; height: 26px; border: 2px solid rgba(255,255,255,.58); border-radius: 50%; background: rgba(255,255,255,.12); transition: transform .17s; } .tb-penalty-keeper { position: absolute; z-index: 1; left: 50%; bottom: 0; transform: translateX(-50%); color: #ffbb54; font-size: 76px; filter: drop-shadow(0 4px 3px rgba(0,0,0,.5)); transition: left .38s var(--tb-spring); pointer-events: none; } .tb-penalty-keeper[data-lane="0"] { left: 18%; }.tb-penalty-keeper[data-lane="2"] { left: 82%; } .tb-penalty-ball { position: absolute; z-index: 4; left: 50%; bottom: 10%; transform: translateX(-50%); color: #fff; font-size: 38px; filter: drop-shadow(0 5px 4px rgba(0,0,0,.38)); transition: transform .67s cubic-bezier(.1,.8,.25,1); pointer-events: none; } .tb-penalty-ball.is-kicked { transform: translate(calc(-50% + var(--kick-x)),var(--kick-y)) scale(.53); } .tb-penalty-line { position: absolute; left: 46%; bottom: 9%; width: 8%; border-top: 2px solid rgba(255,255,255,.7); } .tb-juggle-stage { position: relative; overflow: hidden; height: min(60vh,410px); min-height: 320px; border-radius: 23px; background: radial-gradient(circle at 50% 16%,rgba(122,203,255,.52),transparent 32%),linear-gradient(#103f9b,#1688b9 61%,#056a57 62%,#0b885c); touch-action: manipulation; cursor: pointer; box-shadow: 0 12px 25px rgba(7,56,91,.15); } .tb-juggle-sky { position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%,rgba(255,255,255,.2),transparent 20%); } .tb-juggle-zone { position: absolute; inset: auto 0 13% 0; height: 45%; background: linear-gradient(transparent,rgba(126,255,201,.15)); border-top: 2px dashed rgba(255,255,255,.52); pointer-events: none; } .tb-juggle-zone span { position: absolute; right: 10px; top: 9px; font-size: 10px; letter-spacing: .13em; font-weight: 800; color: rgba(255,255,255,.72); } .tb-juggle-ball { position: absolute; z-index: 2; left: 50%; top: 22%; transform: translate(-50%,-50%); width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 56px; filter: drop-shadow(0 7px 5px rgba(0,0,0,.35)); pointer-events: none; } .tb-juggle-ground { position: absolute; bottom: 10%; left: -10%; width: 120%; height: 14%; border-top: 2px solid rgba(255,255,255,.65); border-radius: 50%; } .tb-juggle-overlay { position: absolute; z-index: 4; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; padding: 24px; color: #fff; text-align: center; background: rgba(7,23,64,.66); } .tb-juggle-overlay b { font: 800 33px/1 'Barlow Condensed',var(--tb-font); }.tb-juggle-overlay span { max-width: 240px; font-size: 14px; } .tb-memory-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; padding: 14px; border-radius: 20px; background: var(--tb-card); box-shadow: var(--tb-card-ring); } .tb-memory-card { aspect-ratio: .85; min-width: 0; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(135deg,#176dc9,#20367f); font-size: clamp(25px,6vw,42px); box-shadow: 0 5px 12px rgba(9,32,93,.18); transition: transform .16s var(--tb-spring),background .16s; } .tb-memory-card:active { transform: scale(.94); } .tb-memory-card-face { display: none; }.tb-memory-card.is-up,.tb-memory-card.is-matched { background: linear-gradient(135deg,#168f79,#086b83); }.tb-memory-card.is-up .tb-memory-card-face,.tb-memory-card.is-matched .tb-memory-card-face { display: block; }.tb-memory-card.is-up .tb-memory-card-back,.tb-memory-card.is-matched .tb-memory-card-back { display: none; } .tb-memory-card.is-matched { background: linear-gradient(135deg,#12ac78,#128c82); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); } @media (max-width: 630px) { .tb-arcade-grid { grid-template-columns: 1fr; }.tb-arcade-card { min-height: 120px; flex-direction: row; align-items: center; gap: 14px; }.tb-arcade-card-art { flex: 0 0 58px; }.tb-arcade-card-copy { align-content: center; }.tb-arcade-card-copy b { font-size: 23px; }.tb-arcade-card-arrow { top: 50%; right: 17px; transform: translateY(-50%); }.tb-arcade-card-copy { padding-right: 16px; } } @media (prefers-reduced-motion: reduce) { .tb-arcade-card,.tb-penalty-ball,.tb-penalty-keeper,.tb-memory-card { transition: none; } } /* Games map (Schedule > Map): one marker per park with the number of games, coloured by how they went. */ .tb-app { --tb-gpin-up: #2f6fed; --tb-gpin-wait: #f59e0b; } .tb-gmap-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; } .tb-weeknav { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 10px; margin: 2px 0 12px; } .tb-weeknav-btn { width: 44px; height: 44px; border: 0; border-radius: 14px; display: grid; place-items: center; font-size: 17px; color: var(--tb-text); cursor: pointer; background: var(--tb-card); box-shadow: var(--tb-card-ring); } .tb-weeknav-btn:active { transform: scale(.94); } .tb-weeknav-mid { min-width: 0; text-align: center; line-height: 1.2; } .tb-weeknav-mid b { display: block; font: 800 21px/1.1 "Barlow Condensed", var(--tb-font); letter-spacing: .01em; transition: opacity .2s; } .tb-weeknav-mid small { display: block; margin-top: 2px; color: var(--tb-text-3); font-size: 13px; } .tb-weeknav-mid small .tb-link { font-size: 13px; } .tb-weeknav-mid.is-busy b { opacity: .5; } .tb-gmap-wrap { position: relative; overflow: hidden; border-radius: var(--tb-radius); box-shadow: var(--tb-card-ring); } .tb-map.tb-gmap { height: min(50vh, 520px); min-height: 220px; } /* the schedule view sets the height to fit above the tab bar */ .tb-gmap-wrap.is-busy .tb-divpin { opacity: .45; transition: opacity .2s; } .tb-gmap-me { position: absolute; left: 12px; bottom: 12px; z-index: 500; width: 42px; height: 42px; border: 0; border-radius: 12px; display: grid; place-items: center; font-size: 17px; color: #1a73e8; cursor: pointer; background: var(--tb-glass); box-shadow: var(--tb-glass-ring); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .tb-gmap-me.is-busy i { animation: tbSpin 1s linear infinite; } .tb-app .tb-divpin { background: none; border: 0; } .tb-gpin { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--tb-gpin-ring, var(--tb-gpin-up)); box-shadow: 0 0 0 2px #fff, 0 6px 14px rgba(0, 0, 0, .35); transition: transform .16s var(--tb-spring, ease); } .tb-gpin b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #0d1530; font: 800 18px/1 "Barlow Condensed", var(--tb-font); } .tb-gpin--up b { background: var(--tb-gpin-up); color: #fff; } .tb-gpin--w b { background: var(--tb-win); color: #fff; } .tb-gpin--d b { background: var(--tb-draw); color: #fff; } .tb-gpin--l b { background: var(--tb-loss); color: #fff; } .tb-gpin--wait b { background: var(--tb-gpin-wait); color: #fff; } .tb-gpin:not(.tb-gpin--mix) b { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); } .tb-gpin.is-on { transform: scale(1.2); } .tb-gpin--many { width: 46px; height: 46px; box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(47, 111, 237, .32), 0 6px 14px rgba(0, 0, 0, .35); } .tb-gpin--many b { width: 32px; height: 32px; } /* Where the person is: a blue dot that pulses. */ .tb-me { width: 22px; height: 22px; display: grid; place-items: center; } .tb-me i { width: 16px; height: 16px; border-radius: 50%; background: #1a73e8; border: 3px solid #fff; box-shadow: 0 0 0 0 rgba(26, 115, 232, .5); animation: tbMe 2s ease-out infinite; } @keyframes tbMe { 0% { box-shadow: 0 0 0 0 rgba(26, 115, 232, .5); } 70% { box-shadow: 0 0 0 16px rgba(26, 115, 232, 0); } 100% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0); } } .tb-gmap-sum { margin: 12px 2px 6px; color: var(--tb-text-2); font-size: 14px; } .tb-gmap-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 2px 6px; color: var(--tb-text-3); font-size: 13px; } .tb-gmap-legend span { display: inline-flex; align-items: center; gap: 6px; } .tb-gdot { width: 11px; height: 11px; border-radius: 50%; background: var(--tb-gpin-up); } .tb-gdot--w { background: var(--tb-win); } .tb-gdot--d { background: var(--tb-draw); } .tb-gdot--l { background: var(--tb-loss); } .tb-gdot--wait { background: var(--tb-gpin-wait); } .tb-spot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .tb-spot-go { width: 100%; } @media (prefers-reduced-motion: reduce) { .tb-me i { animation: none; } .tb-gpin { transition: none; } } .tb-op-page { padding-bottom: 12px; } .tb-op-intro { position: relative; margin: 14px 16px 18px; padding: 24px; border-radius: 24px; color: #fff; background: linear-gradient(135deg, #046bd2, #131a6e); overflow: hidden; box-shadow: 0 12px 30px rgba(15, 39, 112, .2); } .tb-op-intro::after { content: ''; position: absolute; right: -38px; top: -44px; width: 170px; height: 170px; border: 22px solid rgba(255,255,255,.07); border-radius: 50%; pointer-events: none; } .tb-op-intro > span:first-child { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: 13px; border-radius: 14px; background: rgba(255,255,255,.17); font-size: 18px; } .tb-op-intro small { display: block; color: rgba(255,255,255,.76); font-weight: 650; } .tb-op-intro h1 { position: relative; margin: 0 0 4px; font: 800 30px/1.05 'Barlow Condensed', -apple-system, sans-serif; } .tb-op-intro p { position: relative; margin: 7px 0 0; max-width: 580px; color: rgba(255,255,255,.84); font-size: 14px; line-height: 1.45; } .tb-op-intro strong { display: block; margin-top: 16px; font: 800 30px/1 'Barlow Condensed', -apple-system, sans-serif; } .tb-op-intro .tb-op-score { margin-top: 16px; background: rgba(255,255,255,.2); color: #fff; } .tb-op-score { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 3px; padding: 6px 10px; border-radius: 11px; background: rgba(4,107,210,.1); color: var(--tb-blue); font: 800 21px/1 'Barlow Condensed', -apple-system, sans-serif; } .tb-op-score small { color: inherit; opacity: .7; font: 650 11px/1 -apple-system, sans-serif; } .tb-op-eval { min-height: 70px; } .tb-op-ratings { margin: 0 16px 14px; padding: 16px; display: grid; gap: 15px; } .tb-op-rating { display: grid; grid-template-columns: 1fr auto; gap: 7px; align-items: center; font-size: 14px; } .tb-op-rating span { color: var(--tb-text-2); font-weight: 650; } .tb-op-rating b { color: var(--tb-text); } .tb-op-rating i { grid-column: 1 / -1; display: block; height: 7px; border-radius: 999px; background: linear-gradient(to right, #10b981 var(--score), var(--tb-surface-3) var(--score)); } .tb-op-note { margin: 0 16px 12px; padding: 18px 20px; } .tb-op-note h2 { margin: 0 0 8px; color: var(--tb-text); font-size: 15px; } .tb-op-note p { margin: 0; color: var(--tb-text-2); font-size: 14px; line-height: 1.5; white-space: pre-wrap; } .tb-op-note h2:not(:first-child) { margin-top: 18px; } .tb-op-foot { margin: 12px 16px; color: var(--tb-text-3); font-size: 13px; display: flex; gap: 7px; align-items: center; } .tb-op-form { padding: 6px 2px 12px; } .tb-op-private { margin: 4px 0 16px; padding: 12px 14px; border-radius: 12px; background: rgba(4,107,210,.08); color: var(--tb-text-2); font-size: 13px; line-height: 1.45; } .tb-op-private i { color: var(--tb-blue); margin-right: 4px; } .tb-op-teamlinks { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 16px 18px; } .tb-op-teamlinks .tb-pillbtn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 8px 11px; } .tb-op-homebill { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; text-align: left; border-bottom: 1px solid var(--tb-line-2); } .tb-op-homebill > span:nth-child(2) { flex: 1; display: grid; gap: 3px; } .tb-op-homebill b { font-size: 16px; } .tb-op-homebill small { color: var(--tb-text-3); font-size: 13px; } .tb-op-homebill ~ .tb-row strong { color: var(--tb-text); font-size: 13px; } .tb-op-homebill-staff { margin-top: 10px; } .tb-op-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 16px 18px; } .tb-op-metrics > div { padding: 15px 16px; border-radius: 16px; background: var(--tb-card); box-shadow: var(--tb-card-ring), var(--tb-shadow); } .tb-op-metrics b { display: block; font: 800 24px/1 'Barlow Condensed', -apple-system, sans-serif; color: var(--tb-text); } .tb-op-metrics small { display: block; margin-top: 6px; color: var(--tb-text-3); font-size: 12px; } .tb-op-bullets { margin: 0; padding-left: 18px; color: var(--tb-text-2); font-size: 14px; line-height: 1.5; } .tb-op-bullets li + li { margin-top: 8px; } .tb-op-amount { flex: 0 0 auto; display: grid; text-align: right; color: var(--tb-text); font-weight: 750; font-size: 14px; } .tb-op-amount small { color: var(--tb-text-3); font-size: 11px; font-weight: 500; } .tb-op-players { margin-top: 4px; } .tb-op-players .tb-section-head { padding: 0 0 8px; } .tb-op-player { display: flex; align-items: center; gap: 12px; padding: 12px 15px; font-size: 14px; font-weight: 650; cursor: pointer; } .tb-op-player + .tb-op-player { border-top: 1px solid var(--tb-line-2); } .tb-op-player input { width: 19px; height: 19px; accent-color: var(--tb-blue); } .tb-op-player span { flex: 1; } .tb-op-player small { color: var(--tb-text-3); } .tb-op-item, .tb-op-payment { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 13px 16px; } .tb-op-item + .tb-op-item, .tb-op-payment + .tb-op-payment { border-top: 1px solid var(--tb-line-2); } .tb-op-item > div, .tb-op-payment > span { display: grid; gap: 2px; flex: 1 1 140px; } .tb-op-item b, .tb-op-payment b { font-size: 14px; } .tb-op-item small, .tb-op-payment small { color: var(--tb-text-3); font-size: 12px; } .tb-op-item strong, .tb-op-payment strong { color: var(--tb-text); font-size: 14px; } .tb-op-item .tb-pillbtn { flex: 0 0 100%; justify-content: center; min-height: 32px; font-size: 12px; } .tb-op-payment--voided { opacity: .62; } .tb-op-payment--voided > strong { text-decoration: line-through; } .tb-op-payment .tb-pillbtn { min-height: 30px; font-size: 12px; } /* Soccer 101: the parent playbook, offside examples, and a captioned motion short. */ .tb101-page { max-width: 920px; margin: 0 auto; padding: 8px 0 28px; } .tb101-page .tb101-hero { position: relative; isolation: isolate; min-height: 305px; overflow: hidden; padding: clamp(25px, 5vw, 48px); border-radius: 25px; color: #fff; background: radial-gradient(circle at 88% 26%, rgba(80,206,236,.34), transparent 26%), linear-gradient(127deg, #0d2778 5%, #075abb 52%, #0396b8 100%); box-shadow: 0 18px 38px rgba(4,61,145,.22); } .tb101-hero::after { content: ''; position: absolute; z-index: -1; width: 350px; height: 350px; border: 2px solid rgba(255,255,255,.13); border-radius: 50%; right: -100px; bottom: -190px; box-shadow: 0 0 0 45px rgba(255,255,255,.035), 0 0 0 95px rgba(255,255,255,.025); } .tb101-eyebrow, .tb101-kicker { display: block; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } .tb101-eyebrow { color: #b7edff; } .tb101-hero-ball { position: absolute; top: 37px; right: 43px; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); color: #fff; font-size: 43px; transform: rotate(-16deg); } .tb101-hero h1 { position: relative; max-width: 650px; margin-top: 28px; font: 800 clamp(38px, 6vw, 62px)/.96 'Barlow Condensed', var(--tb-font); letter-spacing: -.025em; text-wrap: balance; } .tb101-hero h1 em { color: #93eef0; font-style: normal; } .tb101-hero p { max-width: 570px; margin-top: 15px; color: rgba(255,255,255,.85); font-size: 15px; line-height: 1.5; } .tb101-hero-cta { display: inline-flex; align-items: center; gap: 9px; margin-top: 23px; padding: 10px 14px; border-radius: 12px; background: #fff !important; color: #0759a6 !important; font-size: 13px; font-weight: 800 !important; box-shadow: 0 7px 20px rgba(0,22,73,.18) !important; } .tb101-hero-cta:active { transform: scale(.98); } .tb101-section { margin-top: 38px; scroll-margin-top: 72px; } .tb101-kicker { color: var(--tb-blue); } .tb101-section h2 { max-width: 660px; margin-top: 7px; font: 800 clamp(27px, 4.4vw, 40px)/1.06 'Barlow Condensed', var(--tb-font); letter-spacing: -.015em; } .tb101-intro { max-width: 660px; margin-top: 9px; color: var(--tb-text-2); font-size: 15px; line-height: 1.52; } .tb101-field-layout { display: grid; grid-template-columns: minmax(245px, 340px) minmax(0, 1fr); align-items: stretch; gap: 18px; margin-top: 21px; } .tb101-pitch { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border: 6px solid #126a4a; border-radius: 19px; background: repeating-linear-gradient(0deg, #138158 0 11.1%, #198a60 11.1% 22.2%); box-shadow: 0 12px 25px rgba(5,81,51,.2); color: rgba(255,255,255,.72); } .tb101-pitch-stripe { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(255,255,255,.09), transparent 48%, rgba(0,0,0,.08)); } .tb101-pitch-lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(255,255,255,.66); stroke-width: 1.5; } .tb101-pitch-end { position: absolute; z-index: 1; left: 50%; padding: 2px 7px; border-radius: 5px; background: rgba(0,50,38,.48); color: #e2fff3; font-size: 9px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; transform: translateX(-50%); } .tb101-pitch-end--top { top: 3.5%; } .tb101-pitch-end--bottom { bottom: 3.5%; } .tb101-marker { position: absolute; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid #fff !important; border-radius: 50%; background: #086bd2 !important; color: #fff !important; font: 800 17px/1 'Barlow Condensed', var(--tb-font) !important; box-shadow: 0 4px 12px rgba(0,39,45,.35) !important; transform: translate(-50%, -50%); transition: transform .18s var(--tb-spring), box-shadow .18s; } .tb101-marker--middle { background: #1c73a8 !important; } .tb101-marker--front { background: #123477 !important; } .tb101-marker--goal { background: #e1a72c !important; color: #183149 !important; } .tb101-marker.is-selected { z-index: 3; box-shadow: 0 0 0 4px #d9f5ff, 0 5px 14px rgba(0,25,58,.45) !important; transform: translate(-50%, -50%) scale(1.13); } .tb101-role-card { height: 100%; min-height: 300px; padding: clamp(22px, 4vw, 34px); border-radius: 20px; background: var(--tb-card); box-shadow: var(--tb-card-ring), var(--tb-shadow); border-top: 5px solid #143c80; } .tb101-role-card--middle { border-color: #197aa7; } .tb101-role-card--back { border-color: #096bd2; } .tb101-role-card--goal { border-color: #e7b442; } .tb101-role-head { display: flex; align-items: center; gap: 16px; } .tb101-role-number { flex: 0 0 auto; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 16px; background: var(--tb-lens); color: var(--tb-blue); font: 800 42px/1 'Barlow Condensed', var(--tb-font); } .tb101-role-head small { display: block; color: var(--tb-blue); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; } .tb101-role-head h3 { margin-top: 2px; font: 800 31px/1 'Barlow Condensed', var(--tb-font); } .tb101-role-job { margin-top: 19px; color: var(--tb-text-2); font-size: 16px; line-height: 1.5; } .tb101-role-watch { display: grid; gap: 14px; margin-top: 23px; padding-top: 20px; border-top: 1px solid var(--tb-line-2); } .tb101-role-watch span { display: flex; align-items: center; gap: 7px; color: var(--tb-blue); font-size: 12px; font-weight: 800; } .tb101-role-watch p { margin-top: 4px; color: var(--tb-text-2); font-size: 14px; line-height: 1.5; } .tb101-caveat { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; color: var(--tb-text-3); font-size: 12px; line-height: 1.5; } .tb101-caveat i { margin-top: 2px; color: var(--tb-blue); } .tb101-section--notes { padding: 25px; border-radius: 22px; background: var(--tb-surface-2); } .tb101-watch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; } .tb101-watch-grid > div { padding: 18px; border-radius: 16px; background: var(--tb-card); box-shadow: var(--tb-card-ring); } .tb101-watch-grid > div > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--tb-lens); color: var(--tb-blue); } .tb101-watch-grid h3 { margin-top: 12px; font-size: 14px; font-weight: 800; } .tb101-watch-grid p { margin-top: 6px; color: var(--tb-text-2); font-size: 13px; line-height: 1.48; } .tb101-offside-card { margin-top: 21px; overflow: hidden; border-radius: 20px; background: var(--tb-card); box-shadow: var(--tb-card-ring), var(--tb-shadow); } .tb101-offside-choices { display: flex; gap: 7px; padding: 14px; overflow-x: auto; border-bottom: 1px solid var(--tb-line-2); scrollbar-width: thin; } .tb101-offside-choices button { flex: 1 0 auto; min-height: 40px; padding: 9px 12px; border: 1px solid var(--tb-line-2) !important; border-radius: 10px; background: var(--tb-surface-2) !important; color: var(--tb-text-2) !important; font-size: 12px; font-weight: 750 !important; white-space: nowrap; text-align: center !important; } .tb101-offside-choices button.is-selected { border-color: var(--tb-blue) !important; background: var(--tb-lens) !important; color: var(--tb-blue) !important; } .tb101-offside-layout { display: grid; grid-template-columns: minmax(250px, 360px) minmax(0, 1fr); align-items: center; gap: 24px; padding: 19px; } .tb101-offside-pitch { position: relative; width: 100%; height: 265px; overflow: hidden; border: 5px solid #12734c; border-radius: 15px; background: repeating-linear-gradient(0deg,#16855a 0 25%,#1b8d60 25% 50%); color: #fff; } .tb101-offside-pitch::before { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(255,255,255,.55); } .tb101-offside-goal, .tb101-offside-half, .tb101-offside-line-label, .tb101-offside-pass-label { position: absolute; z-index: 2; padding: 3px 5px; border-radius: 4px; background: rgba(5,51,40,.72); color: #e7fff1; font-size: 9px; font-weight: 850; letter-spacing: .05em; white-space: nowrap; } .tb101-offside-goal { top: 4px; left: 50%; transform: translateX(-50%); } .tb101-offside-half { bottom: 4px; left: 50%; transform: translateX(-50%); } .tb101-offside-line { position: absolute; left: 9px; right: 9px; z-index: 1; border-top: 2px dashed; } .tb101-offside-line--defender { top: 45%; border-color: #ffb7a7; } .tb101-offside-line--half { top: 87%; border-color: rgba(255,255,255,.66); } .tb101-offside-line-label { top: calc(45% - 19px); left: 7px; color: #ffd0c5; } .tb101-offside-pass-label { top: 74%; left: 4%; color: #d5f0ff; } .tb101-offside-player { position: absolute; z-index: 3; display: grid; place-items: center; width: 29px; height: 29px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 3px 9px rgba(0,0,0,.28); font-size: 11px; font-weight: 850; transform: translate(-50%,-50%); } .tb101-offside-player--keeper, .tb101-offside-player--defender { background: #ed776d; } .tb101-offside-player--keeper { top: 15%; left: 50%; } .tb101-offside-player--defender { top: 45%; left: 30%; } .tb101-offside-player--attacker, .tb101-offside-player--passer, .tb101-offside-player--teammate { background: #087ce3; } .tb101-offside-player--attacker { top: 59%; left: 72%; width: 37px; height: 37px; border-width: 3px; box-shadow: 0 0 0 5px rgba(255,255,255,.25), 0 4px 11px rgba(0,0,0,.25); transition: top .34s var(--tb-ease); } .tb101-offside-player--passer { top: 77%; left: 45%; } .tb101-offside-player--teammate { top: 67%; left: 82%; opacity: 0; transition: opacity .2s; } .tb101-offside-pitch[data-state="level"] .tb101-offside-player--attacker { top: 45%; } .tb101-offside-pitch[data-state="offside"] .tb101-offside-player--attacker, .tb101-offside-pitch[data-state="uninvolved"] .tb101-offside-player--attacker { top: 33%; } .tb101-offside-pitch[data-state="uninvolved"] .tb101-offside-player--teammate { opacity: 1; } .tb101-offside-ball { position: absolute; z-index: 4; top: 80%; left: 50%; color: #fff; font-size: 16px; line-height: 1; text-shadow: 0 1px 3px rgba(0,0,0,.4); } .tb101-offside-result > span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 99px; background: rgba(16,185,129,.13); color: #078566; font-size: 12px; font-weight: 800; } .tb101-offside-result.is-offside > span { background: rgba(239,87,86,.14); color: #c5444e; } .tb101-offside-result h3 { margin-top: 16px; font: 800 26px/1.05 'Barlow Condensed', var(--tb-font); } .tb101-offside-result p { max-width: 350px; margin-top: 8px; color: var(--tb-text-2); font-size: 14px; line-height: 1.55; } .tb101-offside-legend { margin-top: 24px; color: var(--tb-text-3); font-size: 11px; line-height: 1.6; } .tb101-offside-rules { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 15px; } .tb101-offside-rules > div { display: flex; gap: 10px; padding: 15px; border-radius: 14px; background: var(--tb-surface-2); color: var(--tb-text-2); font-size: 12px; line-height: 1.5; } .tb101-offside-rules > div > b { flex: 0 0 auto; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; background: var(--tb-lens); color: var(--tb-blue); font-size: 13px; } .tb101-offside-rules strong { color: var(--tb-text); } .tb101-story .tb101-film { margin-top: 20px; overflow: hidden; border-radius: 21px; background: #091c45; color: #fff; box-shadow: 0 16px 36px rgba(6,23,70,.25); } .tb101-frame { min-height: 403px; padding: 18px 21px 16px; background: radial-gradient(circle at 52% 39%, #18519a 0, #0e3273 40%, #091b46 100%); } .tb101-frame--cup { background: radial-gradient(circle at 52% 38%, #744f43, #1d3e75 52%, #091b46 100%); } .tb101-frame--women { background: radial-gradient(circle at 52% 38%, #365a9d, #152e68 52%, #091b46 100%); } .tb101-frame--today { background: radial-gradient(circle at 52% 38%, #1e797c, #124a76 52%, #091b46 100%); } .tb101-frame-top { display: flex; justify-content: space-between; align-items: center; color: #b5d6fa; font-size: 10px; font-weight: 800; letter-spacing: .13em; } .tb101-frame-top b { padding: 5px 9px; border: 1px solid rgba(255,255,255,.38); border-radius: 7px; color: #fff; font-size: 14px; letter-spacing: .02em; } .tb101-film-art { display: grid; place-items: center; height: 238px; } .tb101-film-art svg { display: block; max-width: 520px; width: 100%; max-height: 238px; } .tb101-art-halo { fill: rgba(255,255,255,.045); stroke: rgba(164,220,255,.16); stroke-width: 2; } .tb101-art-score { fill: #fff; font: 800 42px/1 'Barlow Condensed', var(--tb-font); } .tb101-frame-caption { max-width: 650px; margin: auto; text-align: center; } .tb101-frame-caption small { color: #73d6eb; font-size: 10px; font-weight: 800; letter-spacing: .12em; } .tb101-frame-caption h3 { margin-top: 4px; font: 800 29px/1.05 'Barlow Condensed', var(--tb-font); } .tb101-frame-caption p { margin-top: 5px; color: #d4e3f7; font-size: 13px; line-height: 1.45; } .tb101-film-controls { display: flex; align-items: center; gap: 13px; padding: 12px 17px; border-top: 1px solid rgba(255,255,255,.13); } .tb101-play { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 76px; padding: 8px 10px; border-radius: 9px; background: #e7f4ff !important; color: #0c4d9d !important; font-size: 12px; font-weight: 850 !important; text-align: center !important; } .tb101-scrub { flex: 1; display: flex; align-items: center; min-width: 30px; } .tb101-scrub input { display: block; width: 100%; height: 26px; margin: 0; accent-color: #63d0ec; cursor: pointer; } .tb101-time { flex: 0 0 auto; color: #c9e0f7; font-size: 11px; font-variant-numeric: tabular-nums; } .tb101-restart { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; color: #d9edff !important; text-align: center !important; } .tb101-restart:active { background: rgba(255,255,255,.12) !important; } .tb101-chapters { display: flex; gap: 2px; padding: 0 16px 16px; overflow-x: auto; } .tb101-chapters button { flex: 1 0 auto; min-height: 36px; padding: 7px 8px; border-radius: 7px; color: #a9c7e6 !important; font-size: 11px; font-weight: 750 !important; text-align: center !important; } .tb101-chapters button.is-current { background: rgba(118,217,233,.18) !important; color: #92f2fa !important; } .tb101-film.is-playing .tb101-paper { animation: tb101Rise 4s ease-in-out infinite alternate; } .tb101-film.is-playing .tb101-ink { animation: tb101Ink 2s ease-in-out infinite alternate; } .tb101-film.is-playing .tb101-pass-ball { animation: tb101Roll 3s ease-in-out infinite alternate; } .tb101-film.is-playing .tb101-orbit { transform-origin: 260px 130px; animation: tb101Orbit 9s linear infinite; } .tb101-film.is-playing .tb101-trophy { animation: tb101Rise 3s ease-in-out infinite alternate; } .tb101-film.is-playing .tb101-confetti { transform-origin: 260px 125px; animation: tb101Confetti 3.8s ease-in-out infinite alternate; } .tb101-film.is-playing .tb101-runners { animation: tb101Roll 3.2s ease-in-out infinite alternate; } .tb101-film.is-playing .tb101-today-ball { animation: tb101Today 4s ease-in-out infinite; } .tb101-film.is-playing .tb101-pass-line { animation: tb101Ink 2s ease-in-out infinite alternate; } @keyframes tb101Rise { from { transform: translateY(6px); } to { transform: translateY(-8px); } } @keyframes tb101Ink { from { opacity: .2; } to { opacity: 1; } } @keyframes tb101Roll { from { transform: translateX(-19px); } to { transform: translateX(19px); } } @keyframes tb101Orbit { to { transform: rotate(360deg); } } @keyframes tb101Confetti { from { transform: rotate(-8deg) scale(.94); opacity: .5; } to { transform: rotate(7deg) scale(1.08); opacity: 1; } } @keyframes tb101Today { 0%, 100% { transform: translate(0,0); } 45% { transform: translate(75px,55px); } 78% { transform: translate(170px,-11px); } } .tb101-sources { padding: 22px; border: 1px solid var(--tb-line-2); border-radius: 18px; } .tb101-sources h2 { margin: 0; font: 800 22px/1.1 'Barlow Condensed', var(--tb-font); } .tb101-sources p { margin-top: 7px; color: var(--tb-text-3); font-size: 12px; line-height: 1.5; } .tb101-sources > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; } .tb101-sources a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px; background: var(--tb-lens); color: var(--tb-blue); font-size: 11px; font-weight: 750; } .tb101-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } @media (max-width: 650px) { .tb101-hero-ball { top: 24px; right: 21px; width: 54px; height: 54px; font-size: 27px; } .tb101-hero h1 { max-width: 90%; margin-top: 48px; } .tb101-field-layout, .tb101-offside-layout { grid-template-columns: 1fr; } .tb101-pitch { max-width: 350px; margin: 0 auto; } .tb101-role-card { min-height: 0; } .tb101-watch-grid, .tb101-offside-rules { grid-template-columns: 1fr; } .tb101-watch-grid { gap: 8px; } .tb101-offside-pitch { max-width: 360px; margin: 0 auto; } .tb101-offside-legend { margin-top: 14px; } } @media (max-width: 390px) { .tb101-hero { min-height: 0; } .tb101-frame { min-height: 380px; padding: 15px 12px; } .tb101-film-art { height: 218px; } .tb101-film-controls { gap: 8px; padding: 10px; } .tb101-time { font-size: 10px; } } @media (prefers-reduced-motion: reduce) { .tb101-film.is-playing .tb101-film-art *, .tb101-offside-player--attacker { animation: none !important; transition: none !important; } .tb101-marker { transition: none; } } /* Weather on maps (TB.geo.map opts.weather): the Radar switch, the control strip with the loop time and colour key, and how satellite clouds sit on the base map: white over satellite or dark maps, grey over the light street map. */ .tb-app .tb-map-layer.tb-map-wx.is-on { background: var(--tb-blue); color: #fff; box-shadow: none; } .tb-app .leaflet-tb-radar-pane, .tb-app .leaflet-tb-clouds-pane { pointer-events: none; } /* Infrared paints clear, warm ground mid-grey (about 55-75 of 255) and low cloud only a little lighter (90-125), so the curve drops everything under about 74 and stretches the rest: low cloud shows, clear ground stays out. */ .tb-app .leaflet-tb-clouds-pane.is-screen { mix-blend-mode: screen; filter: brightness(1.23) contrast(3.45); } .tb-app .leaflet-tb-clouds-pane.is-ink { mix-blend-mode: multiply; filter: invert(1) brightness(.88) contrast(4); } .tb-app .leaflet-bottom.leaflet-left .tb-wxbar { margin: 0 0 22px 10px; } .tb-app .tb-gmap-wrap .leaflet-bottom.leaflet-left .tb-wxbar { margin-bottom: 64px; } /* above the games map's "where I am" button */ .tb-app .tb-wxbar { display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 5px; border-radius: 17px; color: var(--tb-text); font: 600 12px/1.2 var(--tb-font); background: var(--tb-glass); box-shadow: var(--tb-glass-ring); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .tb-app .tb-wxbar-play { flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; background: var(--tb-blue); color: #fff; font-size: 11px; cursor: pointer; } .tb-app .tb-wxbar-time { display: flex; flex-direction: column; min-width: 66px; } .tb-app .tb-wxbar-time b { font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; } .tb-app .tb-wxbar-time small { color: var(--tb-text-3); font-size: 10.5px; font-weight: 600; } .tb-app .tb-wxbar-key { display: grid; grid-template-columns: auto auto; justify-content: space-between; row-gap: 2px; width: 58px; } .tb-app .tb-wxbar-key i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #7fd8f7, #2f8cff 18%, #19c24a 34%, #0b8a2e 46%, #f3e63a 60%, #ff9f1c 72%, #ff3b30 84%, #c21cd6); } .tb-app .tb-wxbar-key small { color: var(--tb-text-3); font-size: 9.5px; font-weight: 650; } .tb-app .tb-wxbar-clouds { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 0; border-radius: 15px; cursor: pointer; background: var(--tb-surface-3); color: var(--tb-text-2); font: 700 12px/1 var(--tb-font); } .tb-app .tb-wxbar-clouds.is-on { background: var(--tb-text); color: var(--tb-bg); } /* @TB fact cards: saved with the answer, so old messages keep their original snapshot. */ .tb-answer-cards { display: grid; gap: 10px; margin-bottom: 12px; } .tb-answer-cards:empty { display: none; } .tb-answer-cards section { border: 1px solid var(--tb-line); border-radius: 16px; overflow: hidden; min-width: 0; } .tb-answer-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 12px 14px; font-size: 10px; font-weight: 800; letter-spacing: .09em; } .tb-answer-kicker > span { margin-left: auto; font-size: 9px; letter-spacing: .04em; } /* Avoid the portal’s global footer background and table-footer-group display rules. */ .tb-answer-cards .tb-answer-footer { display: block; background: transparent; padding: 10px 14px; font-size: 10px; line-height: 1.5; color: var(--tb-text-3); border-top: 1px solid var(--tb-line); } .tb-answer-cards .tb-answer-footer > span { display: block; } .tb-answer-score { background: linear-gradient(135deg, #132753, #07172f); color: #fff; } .tb-answer-score .tb-answer-kicker { color: #a8c9ff; } .tb-answer-score .tb-answer-kicker > span { padding: 3px 7px; border-radius: 5px; background: rgba(255,255,255,.12); color: #fff; } .tb-answer-scoreline { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 12px; padding: 10px 14px 20px; } .tb-answer-scoreline > div { display: grid; justify-items: center; gap: 8px; text-align: center; min-width: 0; } .tb-answer-scoreline b { font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; } .tb-answer-crest, .tb-answer-opponent { display: grid; place-items: center; width: 38px; height: 42px; border-radius: 12px 12px 17px 17px; background: #147de5; font-weight: 900; font-size: 13px; } .tb-answer-opponent { background: rgba(255,255,255,.12); color: #b8c7e0; font-size: 19px; } .tb-answer-scoreline > strong { display: flex; gap: 10px; align-items: center; font-size: clamp(28px,6vw,44px); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.04em; } .tb-answer-scoreline em { color: #7283a0; font-style: normal; font-size: 24px; } .tb-answer-score .tb-answer-footer { color: #b0c2df; border-color: rgba(255,255,255,.12); } .tb-answer-fields { background: var(--tb-surface-2); } .tb-answer-fields .tb-answer-kicker { color: var(--tb-blue); } .tb-answer-field { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--tb-line); } .tb-answer-field > div { flex: 1; min-width: 0; } .tb-answer-field b { display: block; font-size: 12px; overflow-wrap: anywhere; } .tb-answer-field small { display: block; margin-top: 3px; color: var(--tb-text-3); font-size: 10px; line-height: 1.4; } .tb-answer-status { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; max-width: 45%; padding: 4px 7px; border-radius: 7px; font-size: 10px; font-weight: 800; background: var(--tb-surface); } .tb-answer-status.is-open { color: #047857; background: #d1fae5; } .tb-answer-status.is-closed { color: #b91c1c; background: #fee2e2; } .tb-answer-status.is-unknown { color: #92400e; background: #fef3c7; } .tb-answer-weather { background: linear-gradient(130deg, #e2f3ff, #f3faff); color: #153b65; } .tb-answer-weather .tb-answer-kicker { color: #35648e; } .tb-answer-weather-main { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 2px 14px 15px; } .tb-answer-weather-main > i { font-size: 32px; color: #d38b00; } .tb-answer-weather-main > strong { font-size: 44px; line-height: 1; letter-spacing: -.05em; } .tb-answer-weather-main sup { vertical-align: top; font-size: 17px; line-height: 1.4; letter-spacing: 0; } .tb-answer-weather-main > div { display: grid; gap: 3px; font-size: 12px; } .tb-answer-weather-main > div > span { font-size: 11px; opacity: .8; } .tb-answer-weather-stats { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 0 14px 12px; font-size: 10px; } .tb-answer-weather-stats i { margin-right: 3px; opacity: .7; } .tb-answer-weather .tb-answer-footer { color: #476c90; border-color: rgba(25,75,120,.12); } .tb-app[data-theme="dark"] .tb-answer-weather { background: linear-gradient(130deg, #15334e, #132440); color: #e1f2ff; } .tb-app[data-theme="dark"] .tb-answer-weather .tb-answer-kicker, .tb-app[data-theme="dark"] .tb-answer-weather .tb-answer-footer { color: #adcce5; } .tb-app[data-theme="dark"] .tb-answer-weather-main > i { color: #ffd166; } /* The Fields page shares the chat cards, with roomier rows and a live forecast. */ .tb-fields-board { display: grid; gap: 16px; align-items: start; margin-top: 16px; } .tb-fields-board > *, .tb-fields-context { min-width: 0; } .tb-fields-board .tb-answer-cards { margin-bottom: 0; } .tb-fields-context { display: grid; gap: 16px; } .tb-fields-board .tb-fields-map, .tb-fields-board .tb-mapcard { margin-top: 0; } .tb-fields-board .tb-answer-fields { background: var(--tb-card); } .tb-fields-board .tb-answer-field { width: 100%; min-height: 76px; padding: 16px; text-align: left; } .tb-fields-board .tb-answer-field b { font-size: 15px; line-height: 1.4; } .tb-fields-board .tb-answer-field small { font-size: 11px; } .tb-fields-board .tb-answer-status { font-size: 11px; padding: 6px 9px; } .tb-fields-board .tb-answer-kicker { padding: 16px; font-size: 11px; } .tb-fields-board .tb-answer-cards .tb-answer-footer { padding: 12px 16px; font-size: 11px; } .tb-fields-board .tb-answer-field:disabled { opacity: 1; cursor: default; } .tb-fields-board .tb-answer-field:not(:disabled):hover { background: var(--tb-lens); } .tb-fields-board .tb-answer-field:focus-visible { outline: 2px solid var(--tb-blue); outline-offset: -3px; } .tb-answer-forecast { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; margin-top: 8px; padding: 0 12px; border-radius: 9px; background: var(--tb-lens); color: var(--tb-accent); font-size: 12px; font-weight: 700; text-align: left; } .tb-fields-weather-empty { padding: 0 16px 16px; font-size: 13px; line-height: 1.5; } @media (min-width: 760px) { .tb-fields-board { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; max-width: 1100px; margin: 20px auto 0; } }