has no side padding at all — its three full-bleed bands break out and re-indent their own content with exactly this expression, and everything else sits flush. A section with no chrome can live with that; a bordered, rounded panel cannot, and this one ran its corners off both edges of the window. Same expression rather than a made-up number, so the panel's edge lands on the line the page's own copy sits on and stays there when the viewport passes the 1600px content cap. */ margin-inline: max(0.68rem, calc(50vw - 800px)); } /* The baked SEO link list under it. assets/css/team-surface.css gives it the shared panel chrome by class, and on the three hubs that is the end of it — but this page carries TWO `body.events-page .premium-glass` rules (the legacy warm one and the dark override above it), both one class more specific, so background, box-shadow and the blur all came back and the link list rendered as a pale-bevelled panel while the identical generated markup on the hubs rendered in full --tbs-panel-* chrome. Restated at route specificity, including the two properties the dark override never took back from the warm one. The indent below is the event page's own, for the same reason as the section above. */ body.hosts-team-builds .community-team-pages { padding: var(--tbs-panel-pad); border: 1px solid var(--tbs-panel-line); border-radius: var(--tbs-panel-radius); background: var(--tbs-panel-bg); box-shadow: var(--tbs-panel-shadow); backdrop-filter: none; -webkit-backdrop-filter: none; margin-inline: max(0.68rem, calc(50vw - 800px)); } /* feature-page.css sets every h2 on the site to clamp(1.8rem, 3vw, 2.8rem), which on a panel head reads as a second page title. The builder's section head is the game face at ~1.3rem. */ body.hosts-team-builds .events-team-section .events-section-head h2 { margin: 0; font-family: var(--tbs-panel-title-font); font-size: var(--tbs-panel-title-size); color: var(--tcb-ink); } body.hosts-team-builds .event-team-list { display: flex; flex-direction: column; gap: var(--tbs-collection-gap); } body.hosts-team-builds .event-team-card { display: flex; flex-direction: column; gap: 10px; padding: var(--tbs-card-pad); /* The 2px edge carries the build's own category colour, resolved from --tb-cat-rgb. assets/css/team-surface.css declares the Events amber on every per-event page's body, and community-team-list.js puts a `tb-cat-tone--{category}` class on a card whose stored category says otherwise — a Story/Campaign build posted to a story event's page keeps the green it wears in the builder. */ border: var(--tbs-card-border-width) solid rgb(var(--tb-cat-rgb) / 0.5); border-radius: var(--tbs-card-radius); background: var(--tbs-card-bg); /* A card here is only ever a PUBLISHED build, so it always carries the builder's posted glow. */ box-shadow: inset 0 0 0 1px rgb(var(--tb-cat-rgb) / 0.3), inset 0 0 28px -6px rgb(var(--tb-cat-rgb) / 0.6), 0 0 16px -6px rgb(var(--tb-cat-rgb) / 0.42); /* The card inside is a @container query host, so this wrapper's padding is what decides which layout it picks — see the note in team-build-card.css about a preview flipping ~31px of viewport before the builder does. */ container-type: inline-size; } body.hosts-team-builds .event-team-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; } body.hosts-team-builds .event-team-card-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; } body.hosts-team-builds .event-team-card-title { margin: 0; font-size: 1.02rem; line-height: 1.25; } /* Collapsed-state roster, the builder's saved-build cue: five portraits are enough to recognise a team without opening it. */ body.hosts-team-builds .event-team-card-cookies { display: flex; flex-wrap: wrap; gap: 4px; } /* Square art in a square frame, like the builder's own strip. */ body.hosts-team-builds .event-team-card-cookie { width: var(--tbs-portrait-size); height: var(--tbs-portrait-size); border-radius: var(--tbs-portrait-radius); object-fit: contain; border: 1px solid var(--tbs-portrait-line); background: var(--tbs-portrait-bg); } body.hosts-team-builds .event-team-card-meta { display: flex; /* Wraps so the overflow menu can claim a line of its own (it is a `flex: 1 0 100%` child, via display: contents on its wrapper). Without this it stays on the row and squeezes the contributor's name onto two lines to make space. */ flex-wrap: wrap; align-items: center; gap: 12px; margin-left: auto; } body.hosts-team-builds .event-team-toggle { padding: 0.35rem 0.7rem; border-radius: var(--tbs-control-radius); border: 1px solid var(--tbs-control-line); background: var(--tbs-control-bg); color: var(--tcb-ink-soft); cursor: pointer; font: 700 0.76rem "Outfit", sans-serif; white-space: nowrap; } body.hosts-team-builds .event-team-toggle:hover, body.hosts-team-builds .event-team-toggle:focus-visible { border-color: var(--tcb-brand); color: var(--tcb-ink); } body.hosts-team-builds .event-team-toggle.is-active { border-color: var(--tcb-brand); background: rgba(154, 114, 255, 0.16); color: var(--tcb-ink); } /* Open, a card takes the builder's own "previewing" edge. */ body.hosts-team-builds .event-team-card.is-expanded { border-color: rgba(154, 114, 255, 0.55); } /* Overflow menu. Expands IN the card (see the note in community-team-list.js) — a floating panel would cover the next card's own toggle. */ body.hosts-team-builds .event-team-menu-wrap { display: contents; } body.hosts-team-builds .event-team-menu-toggle { min-width: 2rem; padding: 0.35rem 0.5rem; border-radius: var(--tbs-control-radius); border: 1px solid var(--tbs-control-line); background: var(--tbs-control-bg); color: var(--tcb-ink-soft); cursor: pointer; font: 700 0.95rem "Outfit", sans-serif; line-height: 1; } body.hosts-team-builds .event-team-menu-toggle:hover, body.hosts-team-builds .event-team-menu-toggle:focus-visible, body.hosts-team-builds .event-team-menu-toggle.is-active { border-color: var(--tcb-brand); color: var(--tcb-ink); } /* display: contents on the wrapper puts the toggle in the meta row and this panel on its own line beneath the head — one grid, no absolute positioning. */ body.hosts-team-builds .event-team-menu { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--tbs-card-line); } body.hosts-team-builds .event-team-menu[hidden] { display: none; } body.hosts-team-builds .event-team-menu-item { padding: 0.35rem 0.7rem; border-radius: var(--tbs-control-radius); border: 1px solid var(--tbs-control-line); background: var(--tbs-control-bg); color: var(--tcb-ink-soft); cursor: pointer; font: 700 0.76rem "Outfit", sans-serif; white-space: nowrap; } body.hosts-team-builds .event-team-menu-item:hover:not(:disabled), body.hosts-team-builds .event-team-menu-item:focus-visible { border-color: var(--tcb-brand); color: var(--tcb-ink); } body.hosts-team-builds .event-team-menu-item:disabled { cursor: wait; opacity: 0.65; } body.hosts-team-builds .event-team-status { padding: 0 0 4px; font-size: 0.86rem; } body.hosts-team-builds .event-team-status.is-success { color: #9ee7c0; } /* No horizontal padding, deliberately: the card inside is the @container host and this wrapper must not change its width, or a preview would flip layouts at a different viewport than the one .event-team-card's own padding sets. */ body.hosts-team-builds .event-team-card-preview { min-width: 0; padding-top: 10px; border-top: 1px solid var(--tbs-card-line); /* Belt and braces. --view handles its own narrow layout; this catches anything that layout does not, so an overflow scrolls in the card rather than widening the page. */ overflow-x: auto; } body.hosts-team-builds .event-team-card-preview .tb-team { margin: 0; } body.hosts-team-builds .event-team-contributor { display: inline-flex; align-items: center; gap: 0.4rem; color: inherit; font-size: 0.84rem; text-decoration: none; } body.hosts-team-builds .event-team-contributor:hover .event-team-contributor-name, body.hosts-team-builds .event-team-contributor:focus-visible .event-team-contributor-name { text-decoration: underline; } body.hosts-team-builds .event-team-contributor-avatar { width: 1.6rem; height: 1.6rem; border-radius: 999px; overflow: hidden; display: grid; place-items: center; border: 1px solid rgba(210, 151, 255, 0.4); background: rgba(34, 24, 56, 0.8); flex: 0 0 auto; } body.hosts-team-builds .event-team-contributor-avatar-image { width: 100%; height: 100%; object-fit: cover; } body.hosts-team-builds .event-team-contributor-avatar-fallback { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.02em; } body.hosts-team-builds .event-team-note { margin: 0; padding: 12px 0; color: rgba(214, 203, 240, 0.9); font-size: 0.94rem; } body.hosts-team-builds .event-team-note.is-error { color: #ffb4c0; } @media (max-width: 560px) { body.hosts-team-builds .event-team-card { padding: 10px; } /* The title and the credit each get a full line rather than fighting for one — a build name plus a display name does not fit a phone row. */ body.hosts-team-builds .event-team-card-meta { margin-left: 0; width: 100%; justify-content: space-between; } body.hosts-team-builds .event-team-card-main { width: 100%; } body.hosts-team-builds .event-team-card-cookie { width: 1.9rem; height: 1.9rem; } } /* ---- Which event a hub card is for ---- Hub mode only (community-team-list.js renders nothing here on an event's own page, where the page IS the event). It sits between the build title and the roster strip, so it reads as the card's subtitle rather than as a chip among the meta controls on the other side of the head. */ /* One flex item holding the "For " line and any badge qualifying it. */ body.hosts-team-builds .event-team-context-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; min-width: 0; } body.hosts-team-builds .event-team-context { font: 700 0.76rem "Outfit", sans-serif; color: var(--tcb-ink-soft); text-decoration: none; } body.hosts-team-builds .event-team-context.is-link:hover, body.hosts-team-builds .event-team-context.is-link:focus-visible { color: var(--tcb-ink); text-decoration: underline; }