/* ========================================================= Fonts Google Fonts import for headings + body copy. Montserrat = headings; Open Sans = body text. ========================================================= */ /* Fonts are enqueued via wp_enqueue_style() in TPBS_UI::enqueue_app_assets(). Keep CSS free of @import to avoid double-loading and weight mismatches. */ /* ========================================================= Global page reset Applied only when has the tpbs-app-body class. ========================================================= */ body.tpbs-app-body{ margin: 0; } /* ========================================================= App shell foundation Base layout tokens and safe defaults. Everything in the app UI sits under .tpbs-shell. ========================================================= */ /* ========================================================= Design Tokens ========================================================= */ .tpbs-shell{ /* ------------------------------------------------------- Brand palette ------------------------------------------------------- */ --tp-colour-slate: #2B4354; --tp-colour-slate-strong: #1D2F41; --tp-colour-teal: #3188A5; --tp-colour-cyan: #33C3EE; --tp-colour-blue: #07C3FF; --tp-colour-orange: #F79C47; --tp-colour-orange-dark: #E9882C; --tp-colour-white: #FFFFFF; --tp-colour-bg: #F6F8FB; /* ------------------------------------------------------- Semantic colours ------------------------------------------------------- */ --tp-text: var(--tp-colour-slate); --tp-text-strong: var(--tp-colour-slate-strong); --tp-muted: #475467; --tp-muted-2: #435766; --tp-border: rgba(43,67,84,.14); --tp-bg: var(--tp-colour-bg); --tp-surface: var(--tp-colour-white); --tp-surface-soft: rgba(43,67,84,.04); --tp-surface-soft-2: rgba(43,67,84,.06); --tp-action: var(--tp-colour-orange); --tp-action-2: var(--tp-colour-orange-dark); --tp-action-soft: rgba(247,156,71,.14); --tp-action-hover-soft: rgba(247,156,71,.08); --tp-accent: var(--tp-colour-teal); --tp-shadow-action: rgba(247,156,71,.30); --tp-primary: var(--tp-action); --tp-primary-2: var(--tp-action-2); --tp-primary-ink: #ffffff; --tp-primary-ink-muted: rgba(255,255,255,.86); --tp-shadow-primary: var(--tp-shadow-action); --tp-qr-bg: rgba(255,255,255,.92); /* ------------------------------------------------------- Typography ------------------------------------------------------- */ --tp-font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --tp-font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --tp-font-xs: 12px; --tp-font-sm: 14px; --tp-font-md: 16px; --tp-font-lg: 18px; --tp-font-xl: 20px; --tp-font-2xl: 22px; --tp-line-xs: 16px; --tp-line-sm: 20px; --tp-line-md: 24px; --tp-line-lg: 26px; --tp-line-xl: 28px; --tp-weight-medium: 500; --tp-weight-semibold: 600; --tp-weight-bold: 700; --tp-weight-heavy: 800; /* ------------------------------------------------------- Spacing scale ------------------------------------------------------- */ --tp-space-2xs: 4px; --tp-space-xs: 8px; --tp-space-sm: 12px; --tp-space-md: 16px; --tp-space-lg: 24px; --tp-space-xl: 32px; /* ------------------------------------------------------- Radius scale ------------------------------------------------------- */ --tp-radius-sm: 8px; --tp-radius-md: 12px; --tp-radius-lg: 14px; --tp-radius-xl: 16px; --tp-radius-2xl: 18px; --tp-radius-pill: 999px; /* ------------------------------------------------------- Shadows ------------------------------------------------------- */ --tp-shadow-sm: 0 4px 10px rgba(16,24,40,.03); --tp-shadow-md: 0 8px 18px rgba(16,24,40,.05); --tp-shadow-lg: 0 18px 34px rgba(0,0,0,.12); /* ------------------------------------------------------- Controls ------------------------------------------------------- */ --tp-input-height: 44px; --tp-icon-btn-size: 40px; --tp-fab-size: 56px; --tp-bottomfab-size: 62px; /* ------------------------------------------------------- Accessibility ------------------------------------------------------- */ --tp-focus-ring: 0 0 0 3px rgba(7,195,255,.40); /* ------------------------------------------------------- Legacy aliases (for refactor compatibility) ------------------------------------------------------- */ --tp-slate: var(--tp-colour-slate); --tp-navy: var(--tp-colour-slate); --tp-blue: var(--tp-colour-blue); --tp-cyan: var(--tp-colour-cyan); --tp-teal: var(--tp-colour-teal); --tp-orange: var(--tp-colour-orange); --tp-radius: var(--tp-radius-lg); --tp-pad: var(--tp-space-md); min-height: 100svh; font-family: var(--tp-font-body); } /* ========================================================= Design system primitives ========================================================= */ .tpbs-card{ background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-xl); box-shadow: var(--tp-shadow-sm); } .tpbs-btn{ appearance: none; border: 0; border-radius: var(--tp-radius-md); min-height: var(--tp-input-height); padding: 0 var(--tp-space-md); display: inline-flex; align-items: center; justify-content: center; gap: var(--tp-space-xs); font: 600 var(--tp-font-sm)/1 var(--tp-font-body); text-decoration: none; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .08s ease; } .tpbs-btn:focus-visible, .tpbs-icon-btn:focus-visible, .tpbs-input:focus-visible{ outline: none; box-shadow: var(--tp-focus-ring); } .tpbs-btn:active{ transform: translateY(1px); } .tpbs-btn--primary{ background: var(--tp-action); color: var(--tp-primary-ink); box-shadow: 0 8px 18px var(--tp-shadow-primary); } .tpbs-btn--primary:hover{ background: var(--tp-action-2); color: var(--tp-primary-ink); } .tpbs-btn--secondary{ background: var(--tp-surface); color: var(--tp-text); border: 1px solid var(--tp-border); } .tpbs-btn--secondary:hover{ background: var(--tp-surface-soft); } .tpbs-input{ width: 100%; min-height: var(--tp-input-height); padding: 10px var(--tp-space-sm); border-radius: var(--tp-radius-md); border: 1px solid var(--tp-border); background: var(--tp-surface); color: var(--tp-text); font: 400 var(--tp-font-sm)/1.35 var(--tp-font-body); } .tpbs-input::placeholder{ color: var(--tp-muted); } .tpbs-input:hover{ border-color: rgba(43,67,84,.22); } .tpbs-input:focus{ border-color: var(--tp-action); } .tpbs-icon-btn{ width: var(--tp-icon-btn-size); height: var(--tp-icon-btn-size); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--tp-radius-pill); border: 1px solid var(--tp-border); background: var(--tp-surface); color: var(--tp-action); box-shadow: var(--tp-shadow-sm); cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .08s ease; } .tpbs-icon-btn:hover{ background: var(--tp-action-soft); border-color: var(--tp-action); } .tpbs-icon-btn:active{ transform: translateY(1px); } /* ========================================================= Primitive adoption: first live mappings ========================================================= */ /* Core card-like surfaces */ .tpbs-event-card, .tpbs-home-card, .tpbs-action-tile, .tpbs-list-card, .tpbs-panel, .tpbs-help-card{ background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-xl); box-shadow: var(--tp-shadow-sm); } /* Core text/button actions */ .tpbs-btn-primary, .tpbs-login-btn, .tpbs-enter-btn, .tpbs-scan-btn, .tpbs-action-btn{ appearance: none; border: 0; border-radius: var(--tp-radius-md); min-height: var(--tp-input-height); padding: 0 var(--tp-space-md); display: inline-flex; align-items: center; justify-content: center; gap: var(--tp-space-xs); font: 600 var(--tp-font-sm)/1 var(--tp-font-body); text-decoration: none; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .08s ease; background: var(--tp-action); color: var(--tp-primary-ink); box-shadow: 0 8px 18px var(--tp-shadow-primary); } .tpbs-btn-primary:hover, .tpbs-login-btn:hover, .tpbs-enter-btn:hover, .tpbs-scan-btn:hover, .tpbs-action-btn:hover{ background: var(--tp-action-2); color: var(--tp-primary-ink); } .tpbs-btn-primary:focus-visible, .tpbs-login-btn:focus-visible, .tpbs-enter-btn:focus-visible, .tpbs-scan-btn:focus-visible, .tpbs-action-btn:focus-visible{ outline: none; box-shadow: var(--tp-focus-ring); } .tpbs-btn-primary:active, .tpbs-login-btn:active, .tpbs-enter-btn:active, .tpbs-scan-btn:active, .tpbs-action-btn:active{ transform: translateY(1px); } /* Secondary / bordered actions */ .tpbs-btn-secondary, .tpbs-ghost-btn, .tpbs-secondary-action{ appearance: none; border-radius: var(--tp-radius-md); min-height: var(--tp-input-height); padding: 0 var(--tp-space-md); display: inline-flex; align-items: center; justify-content: center; gap: var(--tp-space-xs); font: 600 var(--tp-font-sm)/1 var(--tp-font-body); text-decoration: none; cursor: pointer; background: var(--tp-surface); color: var(--tp-text); border: 1px solid var(--tp-border); transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .08s ease; } .tpbs-btn-secondary:hover, .tpbs-ghost-btn:hover, .tpbs-secondary-action:hover{ background: var(--tp-surface-soft); } .tpbs-btn-secondary:focus-visible, .tpbs-ghost-btn:focus-visible, .tpbs-secondary-action:focus-visible{ outline: none; box-shadow: var(--tp-focus-ring); } /* Inputs */ .tpbs-search-input, .tpbs-form-input, .tpbs-field input[type="text"], .tpbs-field input[type="email"], .tpbs-field input[type="password"], .tpbs-field input[type="search"], .tpbs-field input[type="tel"], .tpbs-field input[type="url"], .tpbs-field select, .tpbs-field textarea{ width: 100%; min-height: var(--tp-input-height); padding: 10px var(--tp-space-sm); border-radius: var(--tp-radius-md); border: 1px solid var(--tp-border); background: var(--tp-surface); color: var(--tp-text); font: 400 var(--tp-font-sm)/1.35 var(--tp-font-body); } .tpbs-field textarea{ min-height: 120px; padding-top: 12px; padding-bottom: 12px; } .tpbs-search-input::placeholder, .tpbs-form-input::placeholder, .tpbs-field input::placeholder, .tpbs-field textarea::placeholder{ color: var(--tp-muted); } .tpbs-search-input:hover, .tpbs-form-input:hover, .tpbs-field input:hover, .tpbs-field select:hover, .tpbs-field textarea:hover{ border-color: rgba(43,67,84,.22); } .tpbs-search-input:focus, .tpbs-form-input:focus, .tpbs-field input:focus, .tpbs-field select:focus, .tpbs-field textarea:focus{ outline: none; border-color: var(--tp-action); box-shadow: var(--tp-focus-ring); } /* Circular icon controls */ .tpbs-back-btn, .tpbs-icon-circle, .tpbs-round-btn, .tpbs-topbar-icon{ width: var(--tp-icon-btn-size); height: var(--tp-icon-btn-size); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--tp-radius-pill); border: 1px solid var(--tp-border); background: var(--tp-surface); color: var(--tp-action); box-shadow: var(--tp-shadow-sm); cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .08s ease; } .tpbs-back-btn:hover, .tpbs-icon-circle:hover, .tpbs-round-btn:hover, .tpbs-topbar-icon:hover{ background: var(--tp-action-soft); border-color: var(--tp-action); } .tpbs-back-btn:focus-visible, .tpbs-icon-circle:focus-visible, .tpbs-round-btn:focus-visible, .tpbs-topbar-icon:focus-visible{ outline: none; box-shadow: var(--tp-focus-ring); } .tpbs-back-btn:active, .tpbs-icon-circle:active, .tpbs-round-btn:active, .tpbs-topbar-icon:active{ transform: translateY(1px); } /* ========================================================= Box sizing + rendering Keeps sizing predictable within the app shell and improves font rendering. ========================================================= */ .tpbs-shell, .tpbs-shell *{ box-sizing: border-box; } /* Typography is normalised later in Chunk B. Keep one canonical heading system. */ .tpbs-shell .tpbs-title, .tpbs-shell .tpbs-page-title, .tpbs-shell .tpbs-pagehead h1, .tpbs-shell .tpbs-h2, .tpbs-shell .tpbs-staff-section-title, .tpbs-shell .tpbs-attendee-name, .tpbs-shell .tpbs-row-card-title, .tpbs-shell .tpbs-profile-name, .tpbs-shell .tpbs-badge-name{ font-family: var(--tp-font-heading); font-weight: var(--tp-weight-semibold); letter-spacing: -0.01em; } .tpbs-shell .tpbs-subtitle, .tpbs-shell .tpbs-page-subtitle, .tpbs-shell .tpbs-attendee-meta, .tpbs-shell .tpbs-badge-sub, .tpbs-shell .tpbs-profile-sub{ color: var(--tp-muted); font-family: var(--tp-font-body); font-weight: var(--tp-weight-semibold); } /* ========================================================= Top app bar Sticky header containing brand marks and account controls. ========================================================= */ .tpbs-appbar{ position: sticky; top: 0; z-index: 50; background: var(--tp-surface); border-bottom: 1px solid var(--tp-border); } .tpbs-brandmark{ width: 34px; height: 34px; border-radius: 10px; background: var(--tp-navy); } .tpbs-titles{ flex: 1; min-width: 0; } .tpbs-title{ margin: 0; font-weight: var(--tp-weight-heavy); letter-spacing: -.01em; font-size: var(--tp-font-md); line-height: 1.2; color: var(--tp-text); } .tpbs-subtitle{ margin: 2px 0 0 0; font-size: 13px; color: var(--tp-muted); line-height: 1.2; } .tpbs-appbar-inner{ max-width: 1100px; margin: 0 auto; padding: var(--tp-space-sm) var(--tp-space-md); display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: var(--tp-space-sm); } .tpbs-appbar-left{ justify-self: start; } .tpbs-appbar-centre{ justify-self: center; display: flex; align-items: center; } .tpbs-appbar-right{ justify-self: end; } .tpbs-appbar-actions{ display: flex; align-items: center; justify-content: flex-end; gap: var(--tp-space-xs); } .tpbs-appmark{ width: var(--tp-icon-btn-size); height: var(--tp-icon-btn-size); border-radius: var(--tp-radius-pill); border: 1px solid var(--tp-border); background: var(--tp-surface); display: flex; align-items: center; justify-content: center; overflow: hidden; } .tpbs-appmark img{ width: 36px; height: 36px; object-fit: contain; } /* Left icon action in appbar (uses the same circular mark container) */ .tpbs-appmark--icon .material-symbols-outlined{ font-size: 22px; line-height: 1; } .tpbs-clientlogo{ height: 22px; max-width: 220px; object-fit: contain; } .tpbs-logo{ height: 22px; width: auto; display: block; } .tpbs-page-title{ margin: 0; font-size: var(--tp-font-xl); font-weight: var(--tp-weight-heavy); letter-spacing: -.01em; color: var(--tp-text); } .tpbs-page-subtitle{ margin-top: 3px; font-size: 13px; color: var(--tp-muted); } /* ========================================================= Main layout Standard page padding and width containers. ========================================================= */ .tpbs-main{ padding: var(--tp-space-md); } .tpbs-main-inner{ max-width: 760px; margin: 0 auto; } .tpbs-main-inner.tpbs-wide{ /* Previously used for desktop/table list views. Those views are now retired in favour of the standard mobile-width layout. If a true wide layout is needed again later, reinstate this and re-enable it deliberately in code. */ max-width: 760px; } .tpbs-h2{ margin: 0 0 10px 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; } .tpbs-muted{ margin: 8px 0 0 0; text-decoration: none; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; font-size: 12px; color: var(--tp-muted); } /* ========================================================= Cards and grid helpers Reusable surface styles for sections and two-column layouts. ========================================================= */ .tpbs-card{ background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-xl); box-shadow: var(--tp-shadow-sm); padding: var(--tp-space-md); } .tpbs-grid{ display: grid; gap: var(--tp-space-sm); } @media (min-width: 860px){ .tpbs-grid{ grid-template-columns: 1fr 1fr; align-items: start; } } /* ========================================================= Buttons Primary = action colour; Secondary = neutral surface + border. Use tpbs-btn-block for full-width buttons. ========================================================= */ .tpbs-btn{ appearance: none; min-height: var(--tp-input-height); display: inline-flex; align-items: center; justify-content: center; gap: var(--tp-space-xs); padding: 0 var(--tp-space-md); border-radius: var(--tp-radius-md); font-family: var(--tp-font-body); font-weight: var(--tp-weight-semibold); font-size: var(--tp-font-sm); line-height: 1; text-decoration: none; border: 1px solid transparent; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } .tpbs-btn-block{ width: 100%; } .tpbs-btn-primary{ background: var(--tp-action); border-color: var(--tp-action); color: var(--tp-primary-ink); box-shadow: 0 8px 18px var(--tp-shadow-primary); } .tpbs-btn-secondary{ background: var(--tp-surface); border-color: var(--tp-border); color: var(--tp-text); } .tpbs-btn:active{ transform: translateY(1px); } .tpbs-btn-sm{ min-height: 38px; padding: 0 var(--tp-space-sm); border-radius: var(--tp-radius-sm); font-size: var(--tp-font-xs); } .tpbs-icon-btn{ width: var(--tp-icon-btn-size); height: var(--tp-icon-btn-size); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--tp-radius-pill); border: 1px solid var(--tp-border); background: var(--tp-surface); color: var(--tp-action); box-shadow: var(--tp-shadow-sm); text-decoration: none; } .tpbs-icon-btn:active{ transform: translateY(1px); } .tpbs-btn-pill{ border-radius: var(--tp-radius-pill); padding: 0 var(--tp-space-md) 0 calc(var(--tp-space-md) - 2px); box-shadow: 0 10px 24px var(--tp-shadow-primary); } .tpbs-ico{ width: 20px; height: 20px; display: inline-block; vertical-align: middle; fill: currentColor; } .tpbs-actions{ display: grid; gap: var(--tp-space-sm); } .tpbs-metrics{ display: grid; gap: var(--tp-space-sm); grid-template-columns: 1fr; } @media (min-width: 520px){ .tpbs-metrics{ grid-template-columns: repeat(3, 1fr); } } .tpbs-metric{ background: var(--tp-surface-soft); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-md); padding: var(--tp-space-sm); } .tpbs-metric-value{ font-size: var(--tp-font-2xl); font-weight: var(--tp-weight-heavy); letter-spacing: -.02em; color: var(--tp-text-strong); } .tpbs-metric-label{ font-size: var(--tp-font-xs); color: var(--tp-muted); margin-top: var(--tp-space-2xs); } .tpbs-hide-mobile{ display: none; } .tpbs-hide-desktop{ display: block; } @media (min-width: 860px){ .tpbs-hide-mobile{ display: block; } .tpbs-hide-desktop{ display: none; } } .tpbs-shell .tpbs-hide-mobile{ display: none !important; } .tpbs-shell .tpbs-hide-desktop{ display: block !important; } @media (min-width: 860px){ .tpbs-shell .tpbs-hide-mobile{ display: block !important; } .tpbs-shell .tpbs-hide-desktop{ display: none !important; } } /* ========================================================= Tables Desktop/admin-friendly table styling with horizontal scrolling. ========================================================= */ .tpbs-table-wrap{ background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-xl); overflow: auto; } .tpbs-table{ width: 100%; border-collapse: collapse; min-width: 720px; } .tpbs-table th, .tpbs-table td{ padding: var(--tp-space-sm); border-bottom: 1px solid var(--tp-border); text-align: left; font-size: var(--tp-font-sm); } .tpbs-table th{ font-size: var(--tp-font-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--tp-muted); } .tpbs-table tr:last-child td{ border-bottom: 0; } .tpbs-table-link{ color: var(--tp-navy); font-weight: 800; text-decoration: none; } .tpbs-table-link:hover{ text-decoration: underline; } /* ========================================================= Accessibility helpers Screen-reader only utility class. ========================================================= */ .tpbs-sr-only{ position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } /* ========================================================= Toolbar, search, and filters Shared patterns for list pages (search input + filter dropdown). ========================================================= */ .tpbs-toolbar{ display: flex; gap: var(--tp-space-sm); flex-wrap: wrap; align-items: center; margin: 0 0 var(--tp-space-sm) 0; } .tpbs-search{ flex: 1; min-width: 220px; } .tpbs-input{ width: 100%; min-height: var(--tp-input-height); padding: 10px var(--tp-space-sm); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-md); background: var(--tp-surface); font-family: var(--tp-font-body); font-size: var(--tp-font-sm); line-height: 1.35; color: var(--tp-text); } /* Read-only / disabled inputs should look locked (used for email fields, IDs, etc.) */ .tpbs-input[readonly], .tpbs-input:disabled{ background: var(--tp-bg); color: var(--tp-muted); cursor: default; } .tpbs-shell .tpbs-contact-section .tpbs-input[readonly]:focus, .tpbs-shell .tpbs-contact-section .tpbs-input:disabled:focus{ border-color: var(--tp-border); outline: none; box-shadow: none; } /* File inputs: keep them visually consistent with .tpbs-input controls */ input[type="file"].tpbs-input{ padding: 10px var(--tp-space-sm); font-size: var(--tp-font-xs); } input[type="file"].tpbs-input::file-selector-button{ margin-right: 10px; padding: var(--tp-space-xs) 10px; border-radius: var(--tp-radius-sm); border: 1px solid var(--tp-border); background: var(--tp-surface-soft); font-weight: var(--tp-weight-heavy); cursor: pointer; } input[type="file"].tpbs-input::-webkit-file-upload-button{ margin-right: 10px; padding: var(--tp-space-xs) 10px; border-radius: var(--tp-radius-sm); border: 1px solid var(--tp-border); background: var(--tp-surface-soft); font-weight: var(--tp-weight-heavy); cursor: pointer; } .tpbs-input::placeholder{ color: var(--tp-muted); } .tpbs-input--search{ background-size: 0 0, 10px 2px; background-position: 18px 50%, 24px 56%; background-repeat: no-repeat; } .tpbs-toolbar-row{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--tp-space-sm); margin-top: var(--tp-space-xs); } .tpbs-filter{ position: relative; } .tpbs-filter-btn{ list-style: none; cursor: pointer; color: var(--tp-accent); font-weight: 800; display: inline-flex; align-items: center; gap: 8px; user-select: none; } .tpbs-filter-btn::-webkit-details-marker{ display: none; } .tpbs-filter-ico{ width: 18px; height: 18px; display: inline-block; background: linear-gradient(currentColor,currentColor) 0 4px/18px 2px no-repeat, linear-gradient(currentColor,currentColor) 0 9px/14px 2px no-repeat, linear-gradient(currentColor,currentColor) 0 14px/10px 2px no-repeat; opacity: .85; } .tpbs-filter-panel{ position: absolute; right: 0; top: 30px; width: 240px; max-width: calc(100vw - 28px); min-width: 200px; background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-lg); padding: var(--tp-space-sm); box-shadow: var(--tp-shadow-lg); display: flex; flex-direction: column; gap: var(--tp-space-sm); z-index: 40; } .tpbs-filter-label{ font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--tp-muted); } /* ========================================================= Pills and small badges Used for compact status labels and inline counters. ========================================================= */ /* Pill styling is normalised later in Chunk D. */ /* ========================================================= Row cards Card-based list rows used in some staff/admin views. ========================================================= */ .tpbs-cards{ display: grid; gap: var(--tp-space-sm); } .tpbs-row-card{ background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-lg); box-shadow: var(--tp-shadow-sm); padding: var(--tp-space-sm); } .tpbs-row-card-actions{ margin-top: var(--tp-space-sm); display: flex; gap: var(--tp-space-xs); flex-wrap: wrap; } .tpbs-row-card-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--tp-space-sm); } .tpbs-row-card-title{ margin: 0; font-weight: var(--tp-weight-bold); font-size: var(--tp-font-md); line-height: 1.2; } .tpbs-row-card-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--tp-space-xs) var(--tp-space-sm); margin-top: var(--tp-space-sm); } @media (max-width: 420px){ .tpbs-row-card-grid{ grid-template-columns: 1fr; } } .tpbs-row-card-k{ font-size: var(--tp-font-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--tp-muted); } .tpbs-row-card-v{ font-size: var(--tp-font-sm); font-weight: var(--tp-weight-semibold); color: var(--tp-text); margin-top: var(--tp-space-2xs); } /* ========================================================= Attendee and lead list rows The core list-row component used across Leads / Attendees pages. ========================================================= */ .tpbs-attendee-rows{ background: var(--tp-surface); border-radius: var(--tp-radius-lg); box-shadow: var(--tp-shadow-sm); overflow: hidden; } .tpbs-attendee-row{ display: flex; align-items: center; gap: var(--tp-space-sm); padding: var(--tp-space-sm); border-bottom: 1px solid var(--tp-border); text-decoration: none; color: var(--tp-text); -webkit-tap-highlight-color: transparent; } .tpbs-attendee-row:last-child{ border-bottom: 0; } .tpbs-attendee-row:active{ background: var(--tp-surface-soft); } .tpbs-attendee-go{ margin-left: auto; display: flex; align-items: center; justify-content: center; width: var(--tp-input-height); height: var(--tp-input-height); border-radius: var(--tp-radius-pill); text-decoration: none; color: var(--tp-primary); -webkit-tap-highlight-color: transparent; } .tpbs-attendee-go:active{ background: var(--tp-action-soft); } /* Bulk selection checkbox (used on bulk check-in / networking lists) */ .tpbs-attendee-go--check{ width: 44px; height: 44px; } .tpbs-attendee-check{ width: 22px; height: 22px; accent-color: var(--tp-action); cursor: pointer; } /* Match brand action colour for native checkbox/radio UI */ .tpbs-shell input[type="checkbox"], .tpbs-shell input[type="radio"]{ accent-color: var(--tp-action); } /* ========================================================= Bulk check-in (settings page only) Lighter right-aligned bulk bar + consistent orange checkboxes. Scoped to avoid bleeding into other attendee lists. ========================================================= */ .tpbs-shell .tpbs-bulk-checkin-scope .tpbs-bulk-controls{ display: flex; justify-content: flex-end; margin: var(--tp-space-xs) 0 var(--tp-space-sm) 0; } .tpbs-shell .tpbs-bulk-checkin-scope .tpbs-bulk-controls-right{ display: flex; align-items: center; justify-content: flex-end; gap: var(--tp-space-sm); flex-wrap: nowrap; width: 100%; } .tpbs-shell .tpbs-bulk-checkin-scope .tpbs-bulk-controls-box{ display:flex; align-items:center; justify-content:flex-end; gap:var(--tp-space-sm); padding:6px 0 6px var(--tp-space-sm); /* no right padding to keep select-all column aligned */ border:1px solid var(--tp-border); background: var(--tp-surface); border-radius: var(--tp-radius-xl); } @media (max-width: 860px){ .tpbs-shell .tpbs-bulk-checkin-scope .tpbs-bulk-controls-box{ padding:6px var(--tp-space-sm) 6px var(--tp-space-sm); /* include right padding to keep select-all column aligned */ } } /* Action button (compact; aligned to switch height) */ .tpbs-shell .tpbs-bulk-checkin-scope .tpbs-btn.tpbs-btn-action{ height: 28px; padding: 0 var(--tp-space-sm); border-radius: var(--tp-radius-pill); font-size: var(--tp-font-xs); font-weight: var(--tp-weight-heavy); letter-spacing: .01em; background: var(--tp-action); border-color: var(--tp-action); color: var(--tp-primary-ink); box-shadow: none; } .tpbs-shell .tpbs-bulk-checkin-scope .tpbs-btn.tpbs-btn-action.is-checkout{ background: var(--tp-surface); border-color: var(--tp-action); color: var(--tp-action); } /* Select-all (label + fixed 44px checkbox cell to line up with row checkbox column) */ .tpbs-shell .tpbs-bulk-checkin-scope .tpbs-bulk-selectall{ display: grid; grid-template-columns: auto var(--tp-input-height); align-items: center; gap: var(--tp-space-xs); cursor: pointer; user-select: none; } .tpbs-shell .tpbs-bulk-checkin-scope .tpbs-bulk-selectall-label{ font-size: var(--tp-font-xs); font-weight: var(--tp-weight-heavy); color: var(--tp-muted); letter-spacing: .02em; } .tpbs-shell .tpbs-bulk-checkin-scope .tpbs-bulk-selectall-box{ display: flex; align-items: center; justify-content: center; } /* Orange checkbox skin (bulk check-in only) */ .tpbs-shell .tpbs-bulk-checkin-scope input[type="checkbox"].tpbs-bulk-cb{ appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 2px solid var(--tp-action); border-radius: var(--tp-space-2xs); background: var(--tp-surface); display: inline-grid; place-content: center; margin: 0; cursor: pointer; box-sizing: border-box; } .tpbs-shell .tpbs-bulk-checkin-scope input[type="checkbox"].tpbs-bulk-cb::before{ content: ""; width: 6px; height: 10px; box-sizing: border-box; border-right: 2px solid var(--tp-primary-ink); border-bottom: 2px solid var(--tp-primary-ink); border-top: 0; border-left: 0; transform: rotate(45deg); opacity: 0; margin-top: -1px; } .tpbs-shell .tpbs-bulk-checkin-scope input[type="checkbox"].tpbs-bulk-cb:checked{ background: var(--tp-action); } .tpbs-shell .tpbs-bulk-checkin-scope input[type="checkbox"].tpbs-bulk-cb:checked::before{ opacity: 1; } .tpbs-shell .tpbs-bulk-checkin-scope input[type="checkbox"].tpbs-bulk-cb:focus-visible{ outline: 3px solid var(--tp-action-soft); outline-offset: 2px; } .tpbs-shell .tpbs-bulk-checkin-scope input[type="checkbox"].tpbs-bulk-cb:disabled{ opacity: .35; cursor: not-allowed; } /* ========================================================= Bulk networking (settings page only) Replicates bulk check-in controls + consistent orange checkboxes. Scoped to avoid bleeding into other attendee lists. ========================================================= */ .tpbs-shell .tpbs-bulk-networking-scope .tpbs-bulk-controls{ display: flex; justify-content: flex-end; margin: var(--tp-space-xs) 0 var(--tp-space-sm) 0; } .tpbs-shell .tpbs-bulk-networking-scope .tpbs-bulk-controls-right{ display: flex; align-items: center; justify-content: flex-end; gap: var(--tp-space-sm); flex-wrap: nowrap; width: 100%; } .tpbs-shell .tpbs-bulk-networking-scope .tpbs-bulk-controls-box{ display:flex; align-items:center; justify-content:flex-end; gap:var(--tp-space-sm); padding:6px 0 6px var(--tp-space-sm); /* no right padding to keep select-all column aligned */ border:1px solid var(--tp-border); background: var(--tp-surface); border-radius: var(--tp-radius-xl); } @media (max-width: 860px){ .tpbs-shell .tpbs-bulk-networking-scope .tpbs-bulk-controls-box{ padding:6px var(--tp-space-sm) 6px var(--tp-space-sm); /* include right padding on narrow widths */ } } /* Action button (compact; aligned to switch height) */ .tpbs-shell .tpbs-bulk-networking-scope .tpbs-btn.tpbs-btn-action{ height: 28px; padding: 0 var(--tp-space-sm); border-radius: var(--tp-radius-pill); font-size: var(--tp-font-xs); font-weight: var(--tp-weight-heavy); letter-spacing: .01em; background: var(--tp-action); border-color: var(--tp-action); color: var(--tp-primary-ink); box-shadow: none; } .tpbs-shell .tpbs-bulk-networking-scope .tpbs-btn.tpbs-btn-action.is-checkout{ background: var(--tp-surface); border-color: var(--tp-action); color: var(--tp-action); } /* Select-all (label + fixed 44px checkbox cell to line up with row checkbox column) */ .tpbs-shell .tpbs-bulk-networking-scope .tpbs-bulk-selectall{ display: grid; grid-template-columns: auto var(--tp-input-height); align-items: center; gap: var(--tp-space-xs); cursor: pointer; user-select: none; } .tpbs-shell .tpbs-bulk-networking-scope .tpbs-bulk-selectall-label{ font-size: var(--tp-font-xs); font-weight: var(--tp-weight-heavy); color: var(--tp-muted); letter-spacing: .02em; } .tpbs-shell .tpbs-bulk-networking-scope .tpbs-bulk-selectall-box{ display: flex; align-items: center; justify-content: center; } /* Orange checkbox skin (networking page only) */ .tpbs-shell .tpbs-bulk-networking-scope input[type="checkbox"].tpbs-bulk-cb{ appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 2px solid var(--tp-action); border-radius: var(--tp-space-2xs); background: var(--tp-surface); display: inline-grid; place-content: center; margin: 0; cursor: pointer; box-sizing: border-box; } .tpbs-shell .tpbs-bulk-networking-scope input[type="checkbox"].tpbs-bulk-cb::before{ content: ""; width: 6px; height: 10px; box-sizing: border-box; border-right: 2px solid var(--tp-primary-ink); border-bottom: 2px solid var(--tp-primary-ink); border-top: 0; border-left: 0; transform: rotate(45deg); opacity: 0; margin-top: -1px; } .tpbs-shell .tpbs-bulk-networking-scope input[type="checkbox"].tpbs-bulk-cb:checked{ background: var(--tp-action); } .tpbs-shell .tpbs-bulk-networking-scope input[type="checkbox"].tpbs-bulk-cb:checked::before{ opacity: 1; } .tpbs-shell .tpbs-bulk-networking-scope input[type="checkbox"].tpbs-bulk-cb:focus-visible{ outline: 3px solid var(--tp-action-soft); outline-offset: 2px; } .tpbs-shell .tpbs-bulk-networking-scope input[type="checkbox"].tpbs-bulk-cb:disabled{ opacity: .35; cursor: not-allowed; } /* ========================================================= Bulk exhibitor team assign (settings page only) Mirrors bulk networking/check-in, with disabled pre-selection state. ========================================================= */ .tpbs-shell .tpbs-bulk-team-assign-scope .tpbs-input-wrap--picker .tpbs-bulk-team-picker__select{ padding-left: 46px; padding-right: 48px; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: none; } .tpbs-shell .tpbs-bulk-team-assign-scope .tpbs-input-wrap--picker .tpbs-input-ico--end{ left: auto; right: 14px; color: var(--tp-muted); font-size: 22px; pointer-events: none; } .tpbs-shell .tpbs-bulk-team-assign-scope .tpbs-bulk-team-selected{ margin: 0 0 var(--tp-space-sm) 0; padding: 10px 12px; border: 1px solid rgba(247,156,71,.28); border-radius: var(--tp-radius-lg); background: var(--tp-action-soft); color: var(--tp-action); font-size: var(--tp-font-xs); font-weight: var(--tp-weight-heavy); letter-spacing: .08em; text-transform: uppercase; } .tpbs-shell .tpbs-bulk-team-assign-scope .tpbs-bulk-controls{ display: flex; justify-content: flex-end; margin: var(--tp-space-xs) 0 var(--tp-space-sm) 0; } .tpbs-shell .tpbs-bulk-team-assign-scope .tpbs-bulk-controls-right{ display: flex; align-items: center; justify-content: flex-end; gap: var(--tp-space-sm); flex-wrap: nowrap; width: 100%; } .tpbs-shell .tpbs-bulk-team-assign-scope .tpbs-bulk-controls-box{ display: flex; align-items: center; justify-content: flex-end; gap: var(--tp-space-sm); padding: 6px 0 6px var(--tp-space-sm); border: 1px solid var(--tp-border); background: var(--tp-surface); border-radius: var(--tp-radius-xl); } .tpbs-shell .tpbs-bulk-team-assign-scope .tpbs-btn.tpbs-btn-action{ min-height: 28px; height: 28px; padding: 0 var(--tp-space-sm); border-radius: var(--tp-radius-pill); font-size: var(--tp-font-xs); font-weight: var(--tp-weight-heavy); letter-spacing: .01em; background: var(--tp-action); border-color: var(--tp-action); color: var(--tp-primary-ink); box-shadow: none; } .tpbs-shell .tpbs-bulk-team-assign-scope .tpbs-bulk-selectall{ display: grid; grid-template-columns: auto var(--tp-input-height); white-space: nowrap; align-items: center; gap: var(--tp-space-xs); cursor: pointer; user-select: none; } .tpbs-shell .tpbs-bulk-team-assign-scope .tpbs-bulk-selectall-label{ font-size: var(--tp-font-xs); font-weight: var(--tp-weight-heavy); color: var(--tp-muted); letter-spacing: .02em; } .tpbs-shell .tpbs-bulk-team-assign-scope .tpbs-bulk-selectall-box{ display: flex; align-items: center; justify-content: center; } .tpbs-shell .tpbs-bulk-team-assign-scope .tpbs-bulk-selectall--page{ margin-left: 0; } .tpbs-shell .tpbs-bulk-team-assign-scope input[type="checkbox"].tpbs-bulk-cb{ appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 2px solid var(--tp-action); border-radius: var(--tp-space-2xs); background: var(--tp-surface); display: inline-grid; place-content: center; margin: 0; cursor: pointer; box-sizing: border-box; } .tpbs-shell .tpbs-bulk-team-assign-scope input[type="checkbox"].tpbs-bulk-cb::before{ content: ""; width: 6px; height: 10px; box-sizing: border-box; border-right: 2px solid var(--tp-primary-ink); border-bottom: 2px solid var(--tp-primary-ink); border-top: 0; border-left: 0; transform: rotate(45deg); opacity: 0; margin-top: -1px; } .tpbs-shell .tpbs-bulk-team-assign-scope input[type="checkbox"].tpbs-bulk-cb:checked{ background: var(--tp-action); } .tpbs-shell .tpbs-bulk-team-assign-scope input[type="checkbox"].tpbs-bulk-cb:checked::before{ opacity: 1; } .tpbs-shell .tpbs-bulk-team-assign-scope input[type="checkbox"].tpbs-bulk-cb:focus-visible{ outline: 3px solid var(--tp-action-soft); outline-offset: 2px; } .tpbs-shell .tpbs-bulk-team-assign-scope input[type="checkbox"].tpbs-bulk-cb:disabled{ opacity: .35; cursor: not-allowed; } .tpbs-shell .tpbs-bulk-team-assign-scope .tpbs-bulk-team-select-col, .tpbs-shell .tpbs-bulk-team-assign-scope .tpbs-bulk-team-select-cell{ width: 44px; text-align: center; } .tpbs-shell .tpbs-bulk-team-assign-scope .tpbs-bulk-team-select-mobile{ display: flex; align-items: center; justify-content: center; } .tpbs-shell .tpbs-bulk-team-assign-scope .tpbs-bulk-team-select-placeholder{ display: inline-block; width: 20px; height: 20px; } .tpbs-shell .tpbs-bulk-team-assign-scope .tpbs-bulk-team-empty{ padding: var(--tp-space-md); } .tpbs-shell .tpbs-bulk-team-assign-scope .tpbs-bulk-team-empty .tpbs-muted{ margin: 0; } @media (max-width: 860px){ .tpbs-shell .tpbs-bulk-team-assign-scope .tpbs-bulk-controls-box{ padding: 8px var(--tp-space-sm) 8px var(--tp-space-sm); } } .tpbs-shell .tpbs-bulk-team-assign-scope .tpbs-bulk-team-row{ flex-wrap: wrap; padding-bottom: 0; } .tpbs-shell .tpbs-bulk-team-assign-scope .tpbs-bulk-team-row-sub{ flex: 0 0 100%; order: 99; width: 100%; margin: 2px 0 10px 0; padding: 0 var(--tp-space-sm) 2px var(--tp-space-sm); position: relative; text-align: right; font-size: var(--tp-font-xs); font-weight: var(--tp-weight-semibold); letter-spacing: .05em; text-transform: uppercase; color: var(--tp-action); line-height: 1.1; } .tpbs-shell .tpbs-bulk-team-assign-scope .tpbs-bulk-team-row .tpbs-attendee-main{ padding-bottom: 0; } button.tpbs-chip{ cursor: pointer; font-family: inherit; appearance: none; -webkit-appearance: none; background: var(--tp-surface); } button.tpbs-chip::-moz-focus-inner{ border: 0; padding: 0; } /* Bulk action chips (+ck / -ck) */ .tpbs-shell .tpbs-chipbar .tpbs-chipgroup--end .tpbs-chip.tpbs-chip--ck{ background: var(--tp-action); border-color: var(--tp-action); color: var(--tp-primary-ink); } .tpbs-shell .tpbs-chipbar .tpbs-chipgroup--end .tpbs-chip.tpbs-chip--ck:hover{ filter: brightness(.98); } /* Reversed / outline action (undo) */ .tpbs-shell .tpbs-chipbar .tpbs-chipgroup--end .tpbs-chip.tpbs-chip--unck{ background: var(--tp-surface); border-color: var(--tp-action); color: var(--tp-action); } tpbs-shell .tpbs-chipbar .tpbs-chipgroup--end .tpbs-chip.tpbs-chip--unck:hover{ border-color: var(--tp-action); background: var(--tp-action-hover-soft); } /* ========================================================= Avatar and status indicator Gradient avatar with optional status dot (e.g. ok/muted). ========================================================= */ .tpbs-avatar{ width: var(--tp-icon-btn-size); height: var(--tp-icon-btn-size); border-radius: var(--tp-radius-pill); background: linear-gradient(135deg, hsl(var(--tp-avatar-h) 75% 58%), hsl(calc(var(--tp-avatar-h) + 35) 75% 52%) ); color: var(--tp-primary-ink); display: flex; align-items: center; justify-content: center; font-weight: var(--tp-weight-heavy); position: relative; flex: 0 0 40px; box-shadow: 0 6px 16px rgba(0,0,0,.08); } .tpbs-avatar-text{ font-size: var(--tp-font-xs); letter-spacing: .02em; } .tpbs-status-dot{ width: var(--tp-space-sm); height: var(--tp-space-sm); border-radius: var(--tp-radius-pill); position: absolute; right: -1px; bottom: -1px; border: 2px solid var(--tp-surface); } .tpbs-status-dot--ok{ background: var(--tp-accent); } .tpbs-status-dot--muted{ background: #d0d5dd; } .tpbs-attendee-main{ flex: 1; min-width: 0; } .tpbs-attendee-name{ font-size: var(--tp-font-md); font-weight: var(--tp-weight-heavy); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tpbs-attendee-meta{ font-size: var(--tp-font-sm); color: var(--tp-muted); margin-top: var(--tp-space-2xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tpbs-attendee-chevron{ color: var(--tp-primary); font-size: 34px; font-variation-settings: "FILL" 1, /* filled version */ "wght" 700, /* thicker */ "GRAD" 0, "opsz" 24; line-height: 1; } .tpbs-lead-row{ flex-wrap: wrap; padding-bottom: 0; } .tpbs-lead-subrow{ flex: 0 0 100%; order: 99; width: 100%; margin: 2px 0 0 0; padding: 0 var(--tp-space-sm) 0 var(--tp-space-sm); text-align: right; font-size: var(--tp-font-xs); font-weight: var(--tp-weight-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--tp-accent); line-height: 1.2; } /* ========================================================= Floating action buttons Used for prominent actions (e.g. scan). ========================================================= */ .tpbs-fab{ position: fixed; right: 18px; bottom: 18px; width: var(--tp-fab-size); height: var(--tp-fab-size); border-radius: var(--tp-radius-pill); background: var(--tp-primary); color: var(--tp-primary-ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 18px 34px var(--tp-shadow-primary); text-decoration: none; z-index: 60; } .tpbs-fab:active{ transform: translateY(1px); } /* ========================================================= Icons Material Symbols baseline settings. Individual components may override FILL/wght for emphasis. ========================================================= */ .material-symbols-outlined{ font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24; line-height: 1; vertical-align: middle; } /* ========================================================= Inputs Search input with left icon alignment. ========================================================= */ .tpbs-input-wrap{ position: relative; width: 100%; } .tpbs-input-ico{ position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tp-muted); font-size: 22px; pointer-events: none; } .tpbs-input--search{ padding-left: 46px; background-image: none; } .tpbs-filter-btn{ padding: 6px 10px; border-radius: var(--tp-radius-pill); background: var(--tp-surface-soft); } .tpbs-filter-btn:hover{ background: var(--tp-surface-soft-2); } /* ========================================================= Chips and toggles Used for quick filters (Name/Company/Star/etc) and export buttons. ========================================================= */ .tpbs-chipbar{ display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--tp-space-sm); margin: var(--tp-space-xs) 0 var(--tp-space-sm) 0; } .tpbs-chip{ display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: var(--tp-radius-sm); border: 1px solid var(--tp-border); background: var(--tp-surface); font-weight: var(--tp-weight-semibold); font-size: var(--tp-font-sm); line-height: 1; text-decoration: none; color: var(--tp-text); } .tpbs-chip:active{ transform: translateY(1px); } .tpbs-chip.is-active{ background: var(--tp-surface-soft-2); border-color: var(--tp-border); color: var(--tp-text-strong); } .tpbs-chip .material-symbols-outlined{ font-size: 18px; line-height: 1; } .tpbs-chip-clear{ opacity: .75; } .tpbs-chipgroup{ display: flex; flex-wrap: wrap; gap: var(--tp-space-xs); min-width: 0; } .tpbs-chipgroup--end{ justify-content: flex-end; white-space: nowrap; } .tpbs-chip--toggle{ padding: 7px var(--tp-space-sm); } @media (max-width: 520px){ .tpbs-chipgroup--end{ margin-left: 0; } } /* Small icon-only “+” chip */ .tpbs-shell .tpbs-chipbar .tpbs-chip.tpbs-chip--addplus{ padding: var(--tp-space-xs); min-width: 40px; justify-content: center; gap: 0; } .tpbs-shell .tpbs-chipbar .tpbs-chip.tpbs-chip--addplus .material-symbols-outlined{ margin: 0; } .tpbs-main{ padding-bottom: calc(92px + env(safe-area-inset-bottom)); } /* ========================================================= Bottom navigation Fixed bottom nav with centre FAB and safe-area padding. ========================================================= */ .tpbs-bottomnav{ position: fixed; left: 0; right: 0; bottom: 0; background: var(--tp-qr-bg); backdrop-filter: blur(10px); border-top: 1px solid var(--tp-border); z-index: 90; } .tpbs-bottomnav-inner{ padding: var(--tp-space-sm) var(--tp-space-md) calc(var(--tp-space-sm) + env(safe-area-inset-bottom)); } .tpbs-bottomnav-grid{ display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; height: var(--tp-fab-size); gap: var(--tp-space-xs); } .tpbs-navspacer{ pointer-events: none; } .tpbs-navitem{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--tp-muted); font-weight: var(--tp-weight-semibold); border-radius: var(--tp-radius-md); padding: 6px 0; -webkit-tap-highlight-color: transparent; } .tpbs-navitem .material-symbols-outlined{ font-size: 22px; line-height: 1; } .tpbs-navlabel{ font-size: var(--tp-font-xs); line-height: 1; } .tpbs-navitem.is-active{ color: var(--tp-action); } .tpbs-bottomfab{ position: absolute; left: 50%; transform: translateX(-50%); top: -18px; width: var(--tp-bottomfab-size); height: var(--tp-bottomfab-size); border-radius: var(--tp-radius-pill); background: var(--tp-primary); color: var(--tp-primary-ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 18px 34px var(--tp-shadow-primary); text-decoration: none; border: 6px solid var(--tp-qr-bg); } .tpbs-bottomfab .material-symbols-outlined{ font-size: 28px; line-height: 1; } .tpbs-bottomfab:active{ transform: translateX(-50%) translateY(1px); } /* ========================================================= Page headings Standard title + subtitle block for list pages. ========================================================= */ .tpbs-pagehead{ margin: var(--tp-space-sm) 2px var(--tp-space-sm) 2px; } .tpbs-pagehead--with-action{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--tp-space-sm); } .tpbs-pagehead__main{ min-width: 0; flex: 1 1 auto; } .tpbs-pagehead__actions{ flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: flex-end; } .tpbs-pagehead__actions .tpbs-chip.tpbs-chip--addplus{ display: inline-flex; align-items: center; justify-content: center; width: 36px; min-width: 36px; height: 36px; padding: 0; border-radius: var(--tp-radius-pill); background: var(--tp-action); border: 1px solid var(--tp-action); color: var(--tp-primary-ink); text-decoration: none; } .tpbs-pagehead__actions .tpbs-chip.tpbs-chip--addplus .material-symbols-outlined{ margin: 0; color: var(--tp-primary-ink); } .tpbs-pagehead h1{ margin: 0; font-size: var(--tp-font-2xl); font-weight: var(--tp-weight-heavy); letter-spacing: -.02em; } .tpbs-pagehead .tpbs-page-sub{ margin-top: var(--tp-space-2xs); color: var(--tp-muted); font-size: var(--tp-font-sm); } .tpbs-pagehead--scroll-sm{ scroll-margin-top: var(--tp-space-sm); } .tpbs-count{ padding: 6px 2px var(--tp-space-xs) 2px; text-transform: uppercase; letter-spacing: .08em; font-weight: var(--tp-weight-heavy); font-size: var(--tp-font-xs); color: var(--tp-muted); } .tpbs-count-sep{ margin: 0 8px; opacity: .7; } .tpbs-appmark-link, .tpbs-clientlogo-link, .tpbs-brandlink{ display: flex; align-items: center; gap: var(--tp-space-sm); text-decoration: none; color: inherit; } .tpbs-clientlogo-link{ justify-content: center; } .tpbs-brandlink{ justify-content: center; } .tpbs-appmark-link--compact{ gap: var(--tp-space-xs); white-space: nowrap; } .tpbs-appmark-link--disabled{ opacity: .45; pointer-events: none; } .tpbs-appmark-label{ font-weight: var(--tp-weight-bold); font-size: var(--tp-font-xs); letter-spacing: .06em; text-transform: uppercase; } .tpbs-pager-meta{ white-space: nowrap; margin-top: 0; } .tpbs-appmark-link:focus-visible, .tpbs-clientlogo-link:focus-visible, .tpbs-brandlink:focus-visible{ outline: 3px solid rgba(55,167,38,.45); outline-offset: 3px; border-radius: 12px; } .tpbs-bottomnav{ padding-bottom: calc(10px + env(safe-area-inset-bottom)); } .tpbs-bottomnav-inner{ max-width: 760px; margin: 0 auto; position: relative; } /* ========================================================= User avatar button Top-right circular avatar with initials. ========================================================= */ .tpbs-userbtn{ display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .tpbs-useravatar{ width: 36px; height: 36px; border-radius: var(--tp-radius-pill); display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, hsl(var(--tp-avatar-h) 75% 58%), hsl(calc(var(--tp-avatar-h) + 35) 75% 52%) ); box-shadow: 0 6px 16px rgba(0,0,0,.10), 0 0 0 1px rgba(255,255,255,0.18) inset; } .tpbs-userinitials{ font-size: var(--tp-font-xs); font-weight: var(--tp-weight-bold); letter-spacing: 0.02em; color: var(--tp-primary-ink); line-height: 1; } /* ========================================================= Home pages Staff / exhibitor / attendee home layouts and hero scan card. ========================================================= */ .tpbs-shell .tpbs-staff-home{ display: flex; flex-direction: column; gap: 18px; } .tpbs-shell .tpbs-staff-hero{ margin-top: 2px; } .tpbs-shell .tpbs-staff-scan-card{ display: block; width: 100%; text-decoration: none; border-radius: var(--tp-radius-2xl); overflow: hidden; position: relative; -webkit-tap-highlight-color: transparent; } .tpbs-shell .tpbs-staff-scan-card::before{ content: ""; position: absolute; right: -26px; top: -26px; width: 180px; height: 180px; border-radius: var(--tp-radius-pill); background: rgba(255,255,255,.14); filter: blur(18px); transform: rotate(12deg); } .tpbs-shell .tpbs-staff-scan-card:active{ transform: scale(.988); } .tpbs-shell .tpbs-staff-scan-inner{ position: relative; z-index: 1; padding: 22px 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 150px; } .tpbs-shell .tpbs-staff-scan-icon{ width: 64px; height: 64px; border-radius: var(--tp-radius-pill); display: flex; align-items: center; justify-content: center; } @supports (backdrop-filter: blur(8px)){ .tpbs-shell .tpbs-staff-scan-icon{ backdrop-filter: blur(8px); } } .tpbs-shell .tpbs-staff-scan-icon .material-symbols-outlined{ font-size: 36px; } .tpbs-shell .tpbs-staff-scan-title{ margin: 0; font-family: var(--tp-font-heading); font-size: var(--tp-font-2xl); font-weight: var(--tp-weight-semibold); letter-spacing: -.01em; line-height: 1.15; text-align: center; } .tpbs-shell .tpbs-staff-section{ display: flex; flex-direction: column; gap: var(--tp-space-sm); } .tpbs-shell .tpbs-staff-section-head{ display: flex; align-items: center; justify-content: space-between; gap: var(--tp-space-sm); padding: 0 2px; } .tpbs-shell .tpbs-staff-section-title{ margin: 0; font-size: var(--tp-font-lg); letter-spacing: -.01em; } .tpbs-shell .tpbs-staff-link{ text-decoration: none; text-transform: uppercase; letter-spacing: .08em; font-size: var(--tp-font-xs); } .tpbs-shell .tpbs-staff-link:hover{ text-decoration: underline; } .tpbs-shell .tpbs-staff-refresh{ width: 36px; height: 36px; border-radius: var(--tp-radius-pill); border: 1px solid var(--tp-border); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; -webkit-tap-highlight-color: transparent; } .tpbs-shell .tpbs-staff-refresh:active{ background: var(--tp-surface-soft); transform: translateY(1px); } .tpbs-shell .tpbs-staff-refresh .material-symbols-outlined{ font-size: 22px; font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24; } .tpbs-shell .tpbs-staff-tiles{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--tp-space-sm); } @media (max-width: 360px){ .tpbs-shell .tpbs-staff-tiles{ grid-template-columns: 1fr; } } .tpbs-shell .tpbs-staff-tile{ background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-xl); padding: var(--tp-space-sm); box-shadow: var(--tp-shadow-md); display: flex; flex-direction: column; gap: var(--tp-space-xs); } .tpbs-shell .tpbs-staff-tile--full{ grid-column: 1 / -1; } .tpbs-shell .tpbs-staff-tile--tall{ grid-row: span 2; min-height: 168px; } .tpbs-shell .tpbs-help-bullets{ margin: var(--tp-space-sm) 0 0 0; padding-left: 18px; font-size: var(--tp-font-sm); font-weight: var(--tp-weight-heavy); line-height: 1.35; color: var(--tp-muted); } .tpbs-shell .tpbs-help-bullets li{ margin: 6px 0; color: var(--tp-muted-2); font-weight: var(--tp-weight-medium); line-height: 1.5; } .tpbs-shell .tpbs-help-link{ display: inline-flex; margin-top: var(--tp-space-sm); font-size: var(--tp-font-sm); font-weight: var(--tp-weight-heavy); text-decoration: none; color: var(--tp-primary); } .tpbs-shell .tpbs-help-link:active{ transform: translateY(1px); } .tpbs-shell .tpbs-badge-tile-title{ margin-top: var(--tp-space-sm); font-size: var(--tp-font-lg); font-family: var(--tp-font-heading); font-weight: var(--tp-weight-bold); letter-spacing: -.01em; color: var(--tp-text); } .tpbs-shell .tpbs-badge-tile-sub{ margin-top: 6px; font-size: var(--tp-font-sm); font-weight: var(--tp-weight-bold); line-height: 1.3; color: var(--tp-muted); } .tpbs-shell .tpbs-badge-qr{ margin-top: var(--tp-space-sm); width: 100%; flex: 1; display: flex; align-items: center; justify-content: center; border: 1px solid var(--tp-border); border-radius: var(--tp-radius-lg); background: var(--tp-qr-bg); padding: var(--tp-space-xs); } .tpbs-shell .tpbs-badge-qr svg{ width: 100%; height: auto; max-width: 160px; max-height: 160px; } .tpbs-shell .tpbs-badge-link{ color: var(--tp-primary); } .tpbs-shell .tpbs-staff-tile--link{ text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; } .tpbs-shell .tpbs-staff-tile--link:active{ transform: translateY(1px); } .tpbs-shell .tpbs-help-tile-text{ font-size: var(--tp-font-sm); font-weight: var(--tp-weight-heavy); letter-spacing: -.01em; line-height: 1.2; color: var(--tp-text); } .tpbs-shell .tpbs-staff-tile-head{ display: flex; align-items: center; gap: var(--tp-space-xs); } .tpbs-shell .tpbs-staff-tile-ico{ color: var(--tp-primary); font-size: 22px; font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 24; } .tpbs-shell .tpbs-staff-tile-ico--muted{ color: var(--tp-muted); } .tpbs-shell .tpbs-staff-tile-label{ font-size: var(--tp-font-xs); font-weight: var(--tp-weight-semibold); color: var(--tp-muted); text-transform: none; letter-spacing: .02em; } .tpbs-shell .tpbs-staff-tile-value{ font-size: 34px; font-weight: var(--tp-weight-heavy); letter-spacing: -.02em; line-height: 1.0; } .tpbs-shell .tpbs-staff-progress{ background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-xl); padding: var(--tp-space-sm); box-shadow: var(--tp-shadow-md); display: flex; flex-direction: column; gap: var(--tp-space-sm); } .tpbs-shell .tpbs-staff-progress-head{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--tp-space-sm); } .tpbs-shell .tpbs-staff-progress-label{ font-size: var(--tp-font-sm); font-weight: var(--tp-weight-semibold); color: var(--tp-text-strong); } .tpbs-shell .tpbs-staff-progress-pct{ font-size: var(--tp-font-sm); } .tpbs-shell .tpbs-staff-progress-track{ height: 10px; border-radius: var(--tp-radius-pill); background: var(--tp-surface-soft-2); overflow: hidden; } .tpbs-shell .tpbs-staff-progress-bar{ height: 100%; border-radius: 999px; transition: width .35s ease; } .tpbs-shell .tpbs-staff-progress-foot{ display: flex; align-items: center; justify-content: space-between; gap: var(--tp-space-sm); margin-top: var(--tp-space-2xs); } .tpbs-shell .tpbs-staff-progress-muted{ font-size: var(--tp-font-xs); color: var(--tp-muted); } .tpbs-shell .tpbs-staff-event-card{ background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-xl); padding: var(--tp-space-sm); box-shadow: var(--tp-shadow-md); display: flex; flex-direction: column; gap: var(--tp-space-sm); } .tpbs-shell .tpbs-staff-event-media{ width: 100%; aspect-ratio: 16 / 9; border-radius: var(--tp-radius-lg); background: radial-gradient(120px 120px at 55% 45%, rgba(19,91,236,.55), transparent 65%), radial-gradient(240px 180px at 40% 60%, rgba(19,91,236,.25), transparent 70%), linear-gradient(135deg, rgba(2,6,23,.92), rgba(2,6,23,.78)); border: 1px solid rgba(255,255,255,.06); overflow: hidden; } .tpbs-shell .tpbs-staff-event-media-img{ display: block; width: 100%; height: 100%; object-fit: cover; } .tpbs-shell .tpbs-staff-event-body{ display: flex; flex-direction: column; gap: var(--tp-space-xs); } .tpbs-shell .tpbs-staff-event-kicker{ margin: 0; } .tpbs-shell .tpbs-staff-event-empty{ margin-top: var(--tp-space-2xs); } .tpbs-shell .tpbs-staff-event-title{ margin-top: var(--tp-space-sm); font-size: var(--tp-font-lg); font-family: var(--tp-font-heading); font-weight: var(--tp-weight-bold); letter-spacing: -.01em; color: var(--tp-text); } .tpbs-shell .tpbs-staff-event-date{ font-size: var(--tp-font-sm); color: var(--tp-muted); } .tpbs-shell .tpbs-staff-event-title--placeholder, .tpbs-shell .tpbs-staff-event-date--strong{ font-weight: var(--tp-weight-heavy); } .tpbs-shell .tpbs-staff-event-hint{ margin-top: var(--tp-space-2xs); } .tpbs-shell .tpbs-staff-event-date--top{ margin-top: var(--tp-space-2xs); } .tpbs-shell .tpbs-staff-event-facts{ display: grid; gap: var(--tp-space-xs); margin-top: var(--tp-space-xs); } .tpbs-shell .tpbs-staff-event-loc{ display: flex; align-items: center; gap: var(--tp-space-xs); font-size: var(--tp-font-sm); color: var(--tp-muted); } .tpbs-shell .tpbs-staff-event-loc .material-symbols-outlined{ font-size: 18px; color: var(--tp-muted); } .tpbs-shell .tpbs-staff-event-loc--strong{ color: var(--tp-text); font-weight: var(--tp-weight-heavy); } .tpbs-shell .tpbs-staff-event-loc--placeholder{ color: var(--tp-muted); font-weight: var(--tp-weight-heavy); opacity: .6; } .tpbs-shell .tpbs-staff-event-link-row{ color: inherit; font-weight: inherit; text-decoration: none; } .tpbs-shell .tpbs-staff-event-link{ margin-top: var(--tp-space-2xs); text-decoration: none; font-weight: var(--tp-weight-heavy); color: var(--tp-primary); } .tpbs-shell .tpbs-staff-event-link:hover{ text-decoration: underline; } .tpbs-shell a[data-tpbs-disabled="1"]{ pointer-events: none; opacity: .75; text-decoration: none; } .tpbs-shell .tpbs-exhibitor-home{ display: flex; flex-direction: column; gap: 18px; } .tpbs-shell .tpbs-attendee-home{ display: flex; flex-direction: column; gap: 18px; } .tpbs-shell .tpbs-staff-scan-text{ text-align: center; } .tpbs-shell .tpbs-staff-scan-subtitle{ margin: 0; margin-top: var(--tp-space-xs); font-size: var(--tp-font-sm); font-weight: var(--tp-weight-bold); letter-spacing: .01em; } /* Entrance page: flip logout so it points outwards */ .tpbs-appmark-link--logout .material-symbols-outlined{ transform: scaleX(-1); } /* Event entrance CTA: centred 75% width button (matches home card vibe) */ .tpbs-shell .tpbs-event-cta{ margin-top: var(--tp-space-sm); display: flex; justify-content: center; } .tpbs-shell .tpbs-event-cta .tpbs-btn{ width: 75%; max-width: 360px; } /* Event chooser helpers */ .tpbs-actions--center{ justify-items: center; } .tpbs-actions--stacked{ margin-top: var(--tp-space-md); flex-direction: column; align-items: center; gap: var(--tp-space-xs); } .tpbs-btn-75{ width: min(75%, 360px); } /* Event card: kill default underline on the "View Event Details" link */ .tpbs-staff-event-card .tpbs-staff-event-loc a{ text-decoration: none !important; } .tpbs-staff-event-card .tpbs-staff-event-loc a:hover, .tpbs-staff-event-card .tpbs-staff-event-loc a:focus{ text-decoration: none !important; } .tpbs-staff-event-card .tpbs-staff-event-loc a{ font-weight: 800; } .tpbs-shell .tpbs-attendee-rows--setup{ max-width: 520px; width: 100%; } .tpbs-shell .tpbs-avatar-ico{ font-size: 18px; line-height: 1; } .tpbs-shell .tpbs-muted--center{ text-align: center; } .tpbs-shell .tpbs-muted--top{ margin-top: var(--tp-space-xs); } .tpbs-shell .tpbs-btn.tpbs-btn--disabled, .tpbs-shell .tpbs-btn-primary.tpbs-btn--disabled{ background: var(--tp-surface-soft-2); border: 1px solid var(--tp-border); color: var(--tp-muted); box-shadow: none; opacity: .72; pointer-events: none; cursor: not-allowed; filter: saturate(0); } .tpbs-shell .tpbs-btn.tpbs-btn--disabled:hover, .tpbs-shell .tpbs-btn.tpbs-btn--disabled:active, .tpbs-shell .tpbs-btn.tpbs-btn--disabled:focus-visible, .tpbs-shell .tpbs-btn-primary.tpbs-btn--disabled:hover, .tpbs-shell .tpbs-btn-primary.tpbs-btn--disabled:active, .tpbs-shell .tpbs-btn-primary.tpbs-btn--disabled:focus-visible{ background: var(--tp-surface-soft-2); border-color: var(--tp-border); color: var(--tp-muted); box-shadow: none; transform: none; } .tpbs-shell .tpbs-error--top{ margin-top: var(--tp-space-sm); } .tpbs-shell .tpbs-qr-fallback--hidden{ display: none; } /* ========================================================= Badge / QR page Attendee badge view (name, meta, QR rendering + actions). ========================================================= */ .tpbs-badge-hero{ display: flex; align-items: center; gap: var(--tp-space-sm); margin-bottom: var(--tp-space-sm); } .tpbs-badge-name{ margin: 0; font-size: var(--tp-font-lg); font-weight: var(--tp-weight-heavy); letter-spacing: -.01em; } .tpbs-badge-sub{ margin: var(--tp-space-2xs) 0 0 0; color: var(--tp-muted); font-size: var(--tp-font-sm); line-height: 1.3; } .tpbs-kv{ display: grid; gap: var(--tp-space-sm); } .tpbs-kv-row{ display: flex; justify-content: space-between; gap: var(--tp-space-sm); padding-bottom: var(--tp-space-sm); border-bottom: 1px solid var(--tp-border); } .tpbs-kv-row:last-child{ border-bottom: 0; padding-bottom: 0; } .tpbs-kv-label{ color: var(--tp-muted); font-size: var(--tp-font-sm); } .tpbs-kv-value{ font-weight: var(--tp-weight-bold); text-align: right; } .tpbs-qr-wrap{ background: var(--tp-qr-bg); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-xl); padding: var(--tp-space-sm); display: flex; align-items: center; justify-content: center; } .tpbs-qr-wrap svg{ width: 220px; height: 220px; max-width: 100%; } /* QR progressive enhancement: If client-side QR renders successfully, hide the server-rendered fallback. */ .tpbs-qr-mount.tpbs-qr-ready .tpbs-qr-fallback{ display: none; } /* Ensure client-rendered SVG sits neatly in the existing QR wrap */ .tpbs-qr-mount > svg{ display: block; } .tpbs-dl{ display: grid; gap: var(--tp-space-sm); margin-top: var(--tp-space-sm); } .tpbs-shell .tpbs-grid--single{ grid-template-columns: 1fr; } @media (min-width: 860px){ .tpbs-shell .tpbs-grid--single{ grid-template-columns: 1fr; } } /* ========================================================= Profile / attendee card Centred avatar, name, status pill, and action tiles grid. ========================================================= */ .tpbs-shell .tpbs-profile-hero{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--tp-space-xs); } .tpbs-shell .tpbs-avatar.tpbs-avatar--xl{ width: 96px; height: 96px; flex: 0 0 96px; } .tpbs-shell .tpbs-avatar.tpbs-avatar--xl .tpbs-avatar-text{ font-size: 30px; letter-spacing: .02em; } .tpbs-shell .tpbs-profile-name{ margin: 2px 0 0 0; font-size: var(--tp-font-2xl); font-weight: var(--tp-weight-bold); letter-spacing: -.01em; line-height: 1.15; } .tpbs-shell .tpbs-profile-sub{ margin: 0; font-size: var(--tp-font-sm); font-weight: var(--tp-weight-semibold); color: var(--tp-muted); line-height: 1.25; } .tpbs-shell .tpbs-status-pill{ margin-top: var(--tp-space-xs); display: inline-flex; align-items: center; gap: var(--tp-space-xs); padding: var(--tp-space-xs) var(--tp-space-sm); border-radius: var(--tp-radius-pill); border: 1px solid rgba(55,167,38,.22); font-size: var(--tp-font-xs); } .tpbs-shell .tpbs-status-pill .material-symbols-outlined{ font-size: 18px; font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 24; } .tpbs-shell .tpbs-avatar.tpbs-avatar--xl{ overflow: visible; } .tpbs-shell .tpbs-avatar.tpbs-avatar--xl .tpbs-status-dot{ width: 24px; height: 24px; border-width: 3px; right: 2px; bottom: 2px; } .tpbs-shell .tpbs-profile-hero .tpbs-avatar--xl .tpbs-status-dot.tpbs-status-dot--ok::after{ content: "check"; font-family: "Material Symbols Outlined"; font-size: 12px; line-height: 1; font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 24; position: absolute; inset: 0; display: grid; place-items: center; } /* ========================================================= Settings hub sections Group headings used on /settings/ for the Staff Admin control centre. ========================================================= */ .tpbs-shell .tpbs-settings-section__head{ margin-bottom: 2px; } .tpbs-shell .tpbs-settings-section__title{ margin: 0; text-transform: uppercase; letter-spacing: .08em; font-weight: var(--tp-weight-semibold); font-size: var(--tp-font-xs); color: var(--tp-muted); } .tpbs-shell .tpbs-settings-section .tpbs-action-grid{ margin-top: var(--tp-space-sm); } /* ========================================================= Action tiles Icon tiles used for quick actions (email, vCard, note, star, etc.). ========================================================= */ .tpbs-shell .tpbs-action-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tp-space-sm); margin-top: var(--tp-space-sm); } .tpbs-shell .tpbs-action-grid.tpbs-action-grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .tpbs-shell .tpbs-action-tile{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--tp-space-xs); border-radius: var(--tp-radius-xl); background: var(--tp-surface); border: 1px solid var(--tp-border); text-decoration: none; color: inherit; } .tpbs-shell .tpbs-action-icon{ border-radius: var(--tp-radius-pill); display: grid; place-items: center; border: 1px solid rgba(15,23,42,.08); } .tpbs-shell .tpbs-action-icon .material-symbols-outlined{ font-size: 22px; font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 24; } .tpbs-shell .tpbs-action-label{ letter-spacing: .01em; text-align: center; } .tpbs-shell .tpbs-contact-rows .tpbs-contact-ico{ width: var(--tp-icon-btn-size); height: var(--tp-icon-btn-size); border-radius: var(--tp-radius-pill); display: grid; place-items: center; border: 1px solid rgba(15,23,42,.08); color: var(--tp-muted); flex: 0 0 var(--tp-icon-btn-size); } .tpbs-shell .tpbs-contact-rows .tpbs-contact-ico .material-symbols-outlined{ font-size: 20px; font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 24; } .tpbs-shell .tpbs-contact-rows .tpbs-icon-btn{ width: 36px; height: 36px; } .tpbs-shell .tpbs-contact-section{ margin-top: var(--tp-space-sm); } .tpbs-shell .tpbs-copy-btn.tpbs-copied, .tpbs-shell .tpbs-icon-btn.tpbs-copied{ background: var(--tp-action-soft); border-color: var(--tp-action); } .tpbs-shell .tpbs-copy-btn.tpbs-copied .material-symbols-outlined, .tpbs-shell .tpbs-icon-btn.tpbs-copied .material-symbols-outlined{ font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 24; } .tpbs-shell .tpbs-copy-btn{ cursor: pointer; } .tpbs-shell .tpbs-action-tile, .tpbs-shell .tpbs-icon-btn{ cursor: pointer; } @media (hover:hover){ .tpbs-shell .tpbs-copy-btn:hover{ filter: brightness(0.98); } .tpbs-shell .tpbs-action-tile:hover{ transform: translateY(-1px); } } /* ========================================================= Modals and notes Memo modal (private note) and notes section layout. Used by both staff and exhibitors depending on permissions. ========================================================= */ .tpbs-shell .tpbs-modal[hidden]{ display: none; } .tpbs-shell .tpbs-modal{ position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: var(--tp-space-md); } .tpbs-shell .tpbs-modal-backdrop{ position: absolute; inset: 0; } .tpbs-shell .tpbs-memo-modal{ position: relative; width: min(560px, 100%); background: var(--tp-surface); border-radius: var(--tp-radius-xl); box-shadow: var(--tp-shadow-lg); padding: var(--tp-space-md); } .tpbs-shell .tpbs-memo-modal h2{ margin: 0 0 var(--tp-space-xs); font-size: var(--tp-font-lg); font-weight: var(--tp-weight-semibold); letter-spacing: -.01em; } .tpbs-shell .tpbs-memo-scope{ margin: 0 0 var(--tp-space-sm); font-size: var(--tp-font-xs); } .tpbs-shell .tpbs-memo-textarea{ width: 100%; min-height: 170px; padding: var(--tp-space-sm); border-radius: var(--tp-radius-lg); border: 1px solid var(--tp-border); background: var(--tp-surface); font-family: var(--tp-font-body); font-size: var(--tp-font-sm); line-height: 1.4; outline: none; resize: none; max-width: 100%; box-sizing: border-box; } .tpbs-shell .tpbs-memo-status{ margin-top: var(--tp-space-xs); font-size: var(--tp-font-xs); min-height: 18px; color: var(--tp-muted); } .tpbs-shell .tpbs-memo-status--spaced{ margin-bottom: var(--tp-space-sm); } .tpbs-shell .tpbs-modal-actions{ margin-top: var(--tp-space-sm); display: flex; gap: var(--tp-space-sm); justify-content: flex-end; } .tpbs-shell .tpbs-modal-actions .tpbs-btn{ min-width: 96px; } .tpbs-shell .tpbs-memo-save-ico{ display: none; font-size: 18px; margin-right: 6px; font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 24; } .tpbs-shell .tpbs-btn.tpbs-memo-saved .tpbs-memo-save-ico{ display: inline-block; } .tpbs-shell .tpbs-modal-head{ display: flex; align-items: center; justify-content: space-between; gap: var(--tp-space-sm); } .tpbs-shell .tpbs-modal-x{ width: 32px; height: 32px; border-radius: var(--tp-radius-md); } .tpbs-shell .tpbs-modal-x .material-symbols-outlined{ font-size: 22px; } .tpbs-shell .tpbs-notes-scope{ margin-top: 6px; margin-bottom: 10px; } .tpbs-shell .tpbs-note-box{ white-space: pre-wrap; font-size: 14px; line-height: 1.45; min-height: 92px; } .tpbs-shell .tpbs-notes-updated{ margin-top: 10px; } .tpbs-shell .tpbs-notes-head .tpbs-btn{ display: inline-flex; align-items: center; gap: var(--tp-space-xs); padding: var(--tp-space-xs) var(--tp-space-sm); font-size: var(--tp-font-sm); border-radius: var(--tp-radius-pill); } .tpbs-shell .tpbs-notes-scope{ margin: 0 0 var(--tp-space-sm); font-size: var(--tp-font-xs); font-weight: var(--tp-weight-bold); letter-spacing: .02em; text-transform: none; color: var(--tp-muted); } .tpbs-shell .tpbs-notes-section{ margin-top: var(--tp-space-md); } .tpbs-shell .tpbs-notes-head{ display: flex; align-items: center; justify-content: space-between; gap: var(--tp-space-sm); margin-bottom: var(--tp-space-sm); } .tpbs-shell .tpbs-notes-head .tpbs-h2{ margin: 0; } .tpbs-shell .tpbs-notes-card{ padding: var(--tp-space-sm); } .tpbs-shell .tpbs-note-box{ border: 1px solid var(--tp-border); border-radius: var(--tp-radius-lg); padding: var(--tp-space-sm); background: var(--tp-surface); } .tpbs-shell .tpbs-note-text{ white-space: pre-wrap; text-align: left; font-family: var(--tp-font-body); font-size: var(--tp-font-sm); line-height: var(--tp-line-md); color: var(--tp-text); min-height: 88px; } .tpbs-shell .tpbs-note-text:empty::before{ content: "No notes yet."; } .tpbs-shell .tpbs-notes-updated{ margin: 10px 0 0; font-size: var(--tp-font-xs); color: var(--tp-muted); text-transform: none !important; letter-spacing: 0 !important; font-weight: var(--tp-weight-semibold); } .tpbs-notes-section{ margin-top: 18px; } .tpbs-notes-head{ display: flex; align-items: center; justify-content: space-between; gap: var(--tp-space-sm); margin-bottom: var(--tp-space-sm); } .tpbs-note-box{ background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-lg); padding: var(--tp-space-sm); } .tpbs-note-text{ white-space: pre-wrap; word-break: break-word; line-height: 1.45; font-size: var(--tp-font-sm); color: var(--tp-text); min-height: 84px; } .tpbs-note-text:empty::before{ content: "No note yet."; color: var(--tp-muted); } .tpbs-notes-actions{ margin-top: var(--tp-space-sm); display: flex; justify-content: flex-start; } .tpbs-notes-cta{ width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--tp-space-sm); padding: var(--tp-space-sm) var(--tp-space-md); border-radius: var(--tp-radius-md); background: var(--tp-action-soft); border: 1px solid var(--tp-action); color: var(--tp-action); font-weight: var(--tp-weight-semibold); cursor: pointer; user-select: none; } .tpbs-notes-cta:hover{ background: var(--tp-action-hover-soft); } .tpbs-notes-cta:active{ transform: translateY(1px); } .tpbs-notes-cta:focus-visible{ outline: 3px solid rgba(29, 78, 216, .35); outline-offset: 2px; } .tpbs-notes-cta .material-symbols-outlined{ font-size: 20px; line-height: 1; } .tpbs-shell .tpbs-notes-actions{ margin-top: 12px; } .tpbs-shell button.tpbs-notes-cta{ width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--tp-space-sm); padding: var(--tp-space-sm) var(--tp-space-md); border-radius: var(--tp-radius-md); border: 1px solid var(--tp-action); cursor: pointer; user-select: none; appearance: none; -webkit-appearance: none; box-shadow: none; text-decoration: none; } .tpbs-shell button.tpbs-notes-cta:active{ transform: translateY(1px); } .tpbs-shell button.tpbs-notes-cta:focus-visible{ outline: 3px solid rgba(29, 78, 216, .35); outline-offset: 2px; } .tpbs-shell button.tpbs-notes-cta .material-symbols-outlined{ font-size: 20px; line-height: 1; } .tpbs-action-tile[data-tpbs-copy]{ cursor: pointer; } /* ========================================================= Star + note indicators Visual hints for starred items and existing notes. ========================================================= */ [data-tpbs-star-toggle="1"][data-starred="1"] .material-symbols-outlined{ color: var(--tp-action); } .tpbs-star-indicator{ color: var(--tp-action); } a.tpbs-action-tile[data-tpbs-star-toggle][data-starred="1"] .tpbs-action-icon .material-symbols-outlined{ font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 24; } a.tpbs-action-tile[data-tpbs-star-toggle][data-starred="0"] .tpbs-action-icon .material-symbols-outlined{ font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 24; } a.tpbs-action-tile[data-tpbs-star-toggle] .tpbs-action-icon{ border-radius: var(--tp-radius-pill); } .tpbs-note-indicator{ display: inline-flex; align-items: center; justify-content: center; width: var(--tp-space-md); height: var(--tp-space-md); margin-left: 6px; border-radius: var(--tp-radius-pill); font-size: var(--tp-font-xs); font-weight: var(--tp-weight-bold); line-height: 1; background: var(--tp-surface-soft); color: var(--tp-text); border: 1px solid var(--tp-border); vertical-align: middle; position: relative; top: -1px; } .tpbs-note-indicator--danger{ background: #ef4444; border-color: #dc2626; color: var(--tp-primary-ink); } .tpbs-shell .tpbs-note-indicator.tpbs-note-indicator--danger{ background: #ef4444; border-color: #dc2626; color: var(--tp-primary-ink); } /* ========================================================= Theme tokens (brand palette) Central colour tokens used across the UI skin. Keep these together so palette changes stay low-risk. ========================================================= */ /* ========================================================= Theme skin mapping Maps the palette tokens onto real components (buttons, chips, nav, etc.). Keep only component-level colour mapping here; typography lives in Chunk B. ========================================================= */ .tpbs-shell{ color: var(--tp-text); background: var(--tp-bg); } .tpbs-shell .tpbs-metric-label, .tpbs-shell .tpbs-kv-label{ color: var(--tp-muted); font-weight: var(--tp-weight-medium); } .tpbs-shell .tpbs-row-card-k, .tpbs-shell .tpbs-table th{ font-family: var(--tp-font-body); color: var(--tp-muted-2); font-weight: var(--tp-weight-semibold); } .tpbs-shell .tpbs-btn-primary{ background: var(--tp-action); border-color: var(--tp-action); color: var(--tp-primary-ink); } .tpbs-shell .tpbs-attendee-go, .tpbs-shell .tpbs-contact-rows .tpbs-icon-btn, .tpbs-shell .tpbs-copy-btn, .tpbs-shell .tpbs-filter-btn{ color: var(--tp-action); } .tpbs-shell .tpbs-fab, .tpbs-shell .tpbs-bottomfab{ background: var(--tp-primary); box-shadow: 0 18px 34px var(--tp-shadow-primary); } .tpbs-shell .tpbs-pill--ok{ background: rgba(49,136,165,.12); border-color: rgba(49,136,165,.30); color: var(--tp-accent); } .tpbs-shell .tpbs-chip.is-active{ background: rgba(49,136,165,.12); border-color: rgba(49,136,165,.35); color: var(--tp-accent); } .tpbs-shell .tpbs-staff-progress-pct{ color: var(--tp-slate); background: rgba(49,136,165,.12); border: 1px solid rgba(49,136,165,.18); padding: 4px 10px; border-radius: 999px; font-weight: 700; } .tpbs-shell .tpbs-staff-progress-bar{ background: var(--tp-accent); } .tpbs-shell a:focus-visible, .tpbs-shell button:focus-visible, .tpbs-shell summary:focus-visible, .tpbs-shell input:focus-visible, .tpbs-shell select:focus-visible{ outline: 3px solid rgba(7,195,255,.55); outline-offset: 2px; } .tpbs-shell button.tpbs-notes-cta:hover{ background: var(--tp-action-hover-soft); } [data-tpbs-star-toggle="1"][data-starred="1"] .material-symbols-outlined, .tpbs-star-indicator{ color: var(--tp-action); } a.tpbs-action-tile[data-tpbs-star-toggle][data-starred="1"] .tpbs-action-icon{ background: var(--tp-action); border-color: var(--tp-action); } a.tpbs-action-tile[data-tpbs-star-toggle][data-starred="1"] .tpbs-action-icon .material-symbols-outlined{ color: var(--tp-primary-ink); } a.tpbs-action-tile[data-tpbs-star-toggle][data-starred="0"] .tpbs-action-icon{ background: var(--tp-surface); } .tpbs-shell .tpbs-icon-btn, .tpbs-shell .tpbs-action-icon .material-symbols-outlined, .tpbs-shell .tpbs-staff-tile-ico, .tpbs-shell .tpbs-contact-rows .tpbs-contact-ico .material-symbols-outlined, .tpbs-shell .tpbs-contact-rows .tpbs-icon-btn .material-symbols-outlined{ color: var(--tp-action); } .tpbs-shell .tpbs-staff-tile-ico--muted, .tpbs-shell .tpbs-staff-refresh, .tpbs-shell .tpbs-icon-btn[aria-disabled="true"]{ color: var(--tp-muted) !important; } .tpbs-shell .tpbs-staff-scan-icon{ color: var(--tp-primary-ink); } .tpbs-shell .tpbs-profile-hero .tpbs-avatar--xl .tpbs-status-dot.tpbs-status-dot--ok::after{ color: var(--tp-primary-ink); } .tpbs-shell .tpbs-navitem{ color: var(--tp-muted); } .tpbs-shell .tpbs-navitem.is-active{ color: var(--tp-action); } .tpbs-shell .tpbs-navitem .material-symbols-outlined{ color: currentColor; } .tpbs-shell .tpbs-btn .material-symbols-outlined, .tpbs-shell .tpbs-action-icon .material-symbols-outlined, .tpbs-shell .tpbs-contact-rows .tpbs-contact-ico .material-symbols-outlined, .tpbs-shell .tpbs-contact-rows .tpbs-icon-btn .material-symbols-outlined, .tpbs-shell .tpbs-attendee-chevron, .tpbs-shell .tpbs-attendee-go, .tpbs-shell .tpbs-copy-btn .material-symbols-outlined{ color: var(--tp-action); } .tpbs-shell .tpbs-filter-btn, .tpbs-shell .tpbs-filter-btn .material-symbols-outlined{ color: var(--tp-action); } .tpbs-shell .tpbs-status-dot--muted{ background: #d0d5dd; } .tpbs-shell .tpbs-appbar{ border-bottom: 1px solid var(--tp-border); box-shadow: 0 1px 0 rgba(7,195,255,.10); } .tpbs-shell .tpbs-staff-scan-icon{ background: var(--tp-primary); box-shadow: 0 10px 22px var(--tp-shadow-primary), inset 0 0 0 1px rgba(255,255,255,.18); } .tpbs-shell .tpbs-staff-scan-icon .material-symbols-outlined{ color: var(--tp-primary-ink) !important; font-variation-settings: "FILL" 0, "wght" 650, "GRAD" 0, "opsz" 24; } .tpbs-shell .tpbs-staff-scan-title{ color: var(--tp-primary-ink); text-shadow: 0 1px 0 rgba(0,0,0,.10); } .tpbs-shell .tpbs-staff-scan-subtitle{ color: var(--tp-primary-ink-muted); } .tpbs-shell .tpbs-staff-section-title{ color: var(--tp-text); font-weight: var(--tp-weight-semibold) !important; } .tpbs-shell .tpbs-staff-link{ color: var(--tp-muted-2); font-weight: var(--tp-weight-bold); } .tpbs-shell .tpbs-staff-link:hover{ color: var(--tp-slate); } .tpbs-shell .tpbs-staff-refresh{ background: var(--tp-surface); border-color: var(--tp-border); color: var(--tp-muted); } .tpbs-shell .tpbs-staff-refresh .material-symbols-outlined{ color: currentColor; } .tpbs-shell .tpbs-metric{ background: var(--tp-surface); border-color: var(--tp-border); box-shadow: var(--tp-shadow-md); } .tpbs-shell .tpbs-metric .material-symbols-outlined{ color: var(--tp-slate) !important; } .tpbs-shell .tpbs-staff-link, .tpbs-shell .tpbs-staff-link .material-symbols-outlined{ color: var(--tp-muted-2); } .tpbs-shell .tpbs-toolbar-row .tpbs-btn, .tpbs-shell .tpbs-chipbar .tpbs-btn{ background: var(--tp-surface); border: 1px solid var(--tp-action); color: var(--tp-action); box-shadow: var(--tp-shadow-sm); } .tpbs-shell .tpbs-toolbar-row .tpbs-btn .material-symbols-outlined, .tpbs-shell .tpbs-chipbar .tpbs-btn .material-symbols-outlined{ color: currentColor !important; } .tpbs-shell .tpbs-attendee-rows{ background: var(--tp-surface); border: 1px solid var(--tp-border); box-shadow: var(--tp-shadow-md); } .tpbs-shell .tpbs-attendee-meta{ color: var(--tp-muted); font-weight: var(--tp-weight-semibold); } .tpbs-shell .tpbs-attendee-chevron{ color: var(--tp-action) !important; } .tpbs-shell .tpbs-lead-subrow{ font-weight: var(--tp-weight-bold); } .tpbs-shell .tpbs-lead-subrow{ color: var(--tp-action); letter-spacing: .06em; } @media (hover:hover){ .tpbs-shell .tpbs-chipbar .tpbs-btn:hover, .tpbs-shell .tpbs-toolbar-row .tpbs-btn:hover{ background: var(--tp-action-hover-soft); border-color: var(--tp-action); } } .tpbs-shell .tpbs-chipbar .tpbs-chipgroup .tpbs-chip:nth-child(-n/**/+2).is-active{ background: rgba(7,195,255,.10); border-color: rgba(7,195,255,.22); color: var(--tp-slate); } .tpbs-shell .tpbs-chipbar .tpbs-chipgroup .tpbs-chip:nth-child(n/**/+3).is-active{ background: var(--tp-surface); border-color: var(--tp-action); } .tpbs-shell .tpbs-chipbar .tpbs-chipgroup .tpbs-chip:nth-child(n/**/+3) .material-symbols-outlined{ color: var(--tp-slate) !important; } .tpbs-shell .tpbs-chipbar .tpbs-chipgroup .tpbs-chip:nth-child(n/**/+3).is-active .material-symbols-outlined{ color: var(--tp-action) !important; } .tpbs-shell a.tpbs-chip[href*="tpbs_export_leads="]{ background: var(--tp-surface) !important; border: 1px solid var(--tp-action) !important; box-shadow: var(--tp-shadow-sm) !important; } .tpbs-shell a.tpbs-chip[href*="tpbs_export_leads="] .material-symbols-outlined{ color: currentColor !important; } @media (hover:hover){ .tpbs-shell a.tpbs-chip[href*="tpbs_export_leads="]:hover{ background: var(--tp-action-hover-soft) !important; border-color: var(--tp-action) !important; color: var(--tp-action) !important; } } .tpbs-shell a.tpbs-chip[href*="group=star"].is-active{ background: var(--tp-surface) !important; border-color: var(--tp-action) !important; } .tpbs-shell a.tpbs-chip[href*="group=star"].is-active .material-symbols-outlined{ color: var(--tp-action) !important; } .tpbs-shell .tpbs-note-indicator{ background: var(--tp-surface-soft); border: 1px solid var(--tp-border); color: var(--tp-text); font-weight: var(--tp-weight-heavy); box-shadow: var(--tp-shadow-sm); } .tpbs-shell a.tpbs-chip.is-active[href*="group=star"], .tpbs-shell a.tpbs-chip.is-active[href*="group=star="]{ background: var(--tp-surface) !important; border-color: var(--tp-action) !important; color: var(--tp-text-strong) !important; } .tpbs-shell a.tpbs-chip.is-active[href*="group=star"] .material-symbols-outlined, .tpbs-shell a.tpbs-chip.is-active[href*="group=star="] .material-symbols-outlined{ color: var(--tp-action) !important; font-variation-settings: "FILL" 1, "wght" 650, "GRAD" 0, "opsz" 24; } .tpbs-shell .tpbs-star-indicator{ color: var(--tp-action); } .tpbs-shell .tpbs-status-pill{ font-weight: var(--tp-weight-bold); } .tpbs-shell .tpbs-action-tile{ border-color: var(--tp-border); box-shadow: var(--tp-shadow-md); } .tpbs-shell .tpbs-action-icon{ background: var(--tp-surface-soft); border-color: var(--tp-border); } .tpbs-shell .tpbs-action-icon .material-symbols-outlined{ color: var(--tp-action); } a.tpbs-action-tile[data-tpbs-star-toggle][data-starred="0"] .tpbs-action-icon{ border-color: var(--tp-border); } .tpbs-shell .tpbs-contact-rows .tpbs-contact-ico{ background: var(--tp-surface-soft); border-color: var(--tp-border); } .tpbs-shell .tpbs-contact-rows .tpbs-icon-btn{ border-color: rgba(247,156,71,.30); color: var(--tp-action); } .tpbs-shell .tpbs-contact-rows .tpbs-icon-btn .material-symbols-outlined{ color: currentColor; } .tpbs-shell button.tpbs-notes-cta{ background: var(--tp-action-soft) !important; border-color: var(--tp-action) !important; color: var(--tp-action) !important; font-weight: var(--tp-weight-heavy); } @media (hover:hover){ .tpbs-shell button.tpbs-notes-cta:hover{ background: var(--tp-action-hover-soft) !important; border-color: var(--tp-action) !important; } } .tpbs-shell button.tpbs-notes-cta .material-symbols-outlined{ color: currentColor !important; } .tpbs-shell .tpbs-note-text:empty::before{ color: var(--tp-muted); } .tpbs-shell .tpbs-modal-backdrop{ background: rgba(43,67,84,.62); backdrop-filter: blur(3px); } .tpbs-shell .tpbs-memo-modal{ border-radius: var(--tp-radius-2xl); border-color: var(--tp-border); } .tpbs-shell .tpbs-modal-x{ border: 1px solid var(--tp-action); color: var(--tp-action); background: var(--tp-surface); } .tpbs-shell .tpbs-modal-x .material-symbols-outlined{ color: currentColor; } .tpbs-shell .tpbs-memo-textarea:focus{ border-color: var(--tp-cyan) !important; box-shadow: var(--tp-focus-ring) !important; outline: none !important; } .tpbs-shell .tpbs-modal-actions .tpbs-btn-secondary{ background: var(--tp-surface) !important; border-color: var(--tp-border) !important; color: var(--tp-text) !important; box-shadow: none !important; } .tpbs-shell .tpbs-modal-actions .tpbs-btn-primary{ box-shadow: 0 10px 22px var(--tp-shadow-primary); } .tpbs-shell .tpbs-modal-head{ padding-bottom: var(--tp-space-sm); border-bottom: 1px solid var(--tp-border); margin-bottom: var(--tp-space-sm); } .tpbs-shell .material-symbols-outlined{ color: var(--tp-action); } .tpbs-shell .tpbs-bottomnav .material-symbols-outlined, .tpbs-shell .tpbs-useravatar .material-symbols-outlined{ color: inherit; } .tpbs-shell .tpbs-status-dot--ok{ background: var(--tp-cyan); } .tpbs-shell .tpbs-status-pill{ border-color: rgba(51,195,238,.30); background: rgba(51,195,238,.12); color: var(--tp-text-strong); } .tpbs-shell .tpbs-status-pill .material-symbols-outlined{ color: var(--tp-cyan); } .tpbs-shell a:focus-visible, .tpbs-shell button:focus-visible, .tpbs-shell input:focus-visible, .tpbs-shell select:focus-visible, .tpbs-shell textarea:focus-visible{ outline: 3px solid rgba(7,195,255,.40); outline-offset: 2px; } .tpbs-shell .tpbs-staff-scan-card{ background: radial-gradient(240px 180px at 50% 30%, rgba(7,195,255,.18), transparent 65%), linear-gradient(135deg, rgba(43,67,84,.96), rgba(43,67,84,.78)); box-shadow: 0 18px 34px rgba(43,67,84,.20); } /* Canonical heading hierarchy lives in Chunk B. */ .tpbs-shell .tpbs-title, .tpbs-shell .tpbs-page-title, .tpbs-shell .tpbs-h2, .tpbs-shell .tpbs-staff-section-title, .tpbs-shell .tpbs-attendee-name, .tpbs-shell .tpbs-row-card-title{ font-family: var(--tp-font-heading); font-weight: var(--tp-weight-semibold); letter-spacing: -0.005em; } .tpbs-shell .tpbs-pagehead h1, .tpbs-shell .tpbs-profile-name, .tpbs-shell .tpbs-badge-name{ font-family: var(--tp-font-heading); font-weight: var(--tp-weight-bold); letter-spacing: -0.01em; } .tpbs-shell .tpbs-pagehead h1, .tpbs-shell .tpbs-profile-name{ line-height: 1.15; } .tpbs-shell .tpbs-staff-tile-value, .tpbs-metric-value{ font-weight: 700; } .tpbs-shell .tpbs-action-tile{ min-height: 92px; padding: var(--tp-space-sm) 10px; } .tpbs-shell .tpbs-action-icon{ width: var(--tp-icon-btn-size); height: var(--tp-icon-btn-size); } .tpbs-shell .tpbs-action-label{ font-size: var(--tp-font-xs); font-weight: var(--tp-weight-semibold); } /* ========================================================= Theme tokens (final text colours) Final text hierarchy tokens. ========================================================= */ /* Chip add plus rules */ /* + chip (action) — orange regardless of active/filter rules */ .tpbs-shell .tpbs-chipbar .tpbs-chipgroup .tpbs-chip.tpbs-chip--addplus{ background: var(--tp-action); border-color: var(--tp-action); color: var(--tp-primary-ink); padding: var(--tp-space-xs); min-width: var(--tp-icon-btn-size); justify-content: center; gap: 0; } .tpbs-shell .tpbs-chipbar .tpbs-chipgroup .tpbs-chip.tpbs-chip--addplus .material-symbols-outlined{ margin: 0; color: var(--tp-primary-ink); } /* Tighten right-side action chips to match filter chips */ .tpbs-shell .tpbs-chipbar .tpbs-chipgroup--end .tpbs-chip{ padding: var(--tp-space-xs) var(--tp-space-sm); min-height: 34px; } /* Checked-in chip: keep it compact */ .tpbs-shell .tpbs-chipbar .tpbs-chipgroup--end .tpbs-chip.tpbs-chip--checkin{ padding: var(--tp-space-xs) var(--tp-space-sm); } /* + chip: square, not pill-bloaty */ .tpbs-shell .tpbs-chipbar .tpbs-chipgroup--end .tpbs-chip.tpbs-chip--addplus{ padding: 0; width: 34px; min-width: 34px; height: 34px; border-radius: var(--tp-radius-pill); justify-content: center; } /* Disabled action tiles (e.g. staff lacking staff-admin rights) */ .tpbs-shell .tpbs-action-tile.is-disabled, .tpbs-shell .tpbs-action-tile[data-tpbs-disabled="1"]{ opacity: 1; /* don’t fade the whole card if you don’t want it */ pointer-events: none; /* stops clicks */ cursor: not-allowed; } /* Grey out the circular icon holder */ .tpbs-shell .tpbs-action-tile.is-disabled .tpbs-action-icon, .tpbs-shell .tpbs-action-tile[data-tpbs-disabled="1"] .tpbs-action-icon{ background: var(--tp-surface-soft); border-color: var(--tp-border); } /* Grey out the icon itself (this is the “orange needs to be grey” bit) */ .tpbs-shell .tpbs-action-tile.is-disabled .tpbs-action-icon .material-symbols-outlined, .tpbs-shell .tpbs-action-tile[data-tpbs-disabled="1"] .tpbs-action-icon .material-symbols-outlined{ color: var(--tp-muted); } /* Grey out the label */ .tpbs-shell .tpbs-action-tile.is-disabled .tpbs-action-label, .tpbs-shell .tpbs-action-tile[data-tpbs-disabled="1"] .tpbs-action-label{ color: var(--tp-muted); } /* Team remove confirm modal: ensure dialog sits above backdrop */ .tpbs-team-remove-modal { position: fixed; inset: 0; z-index: 1200; } .tpbs-team-remove-modal .tpbs-modal-backdrop { position: absolute; inset: 0; z-index: 1; } .tpbs-team-remove-modal .tpbs-modal-dialog { position: relative; z-index: 2; } /* Make sure icon buttons behave like buttons */ .tpbs-team-remove-modal .tpbs-icon-btn, [data-tpbs-team-remove="1"].tpbs-icon-btn { cursor: pointer; } .tpbs-shell .tpbs-btn .material-symbols-outlined.tpbs-remove-material-icon { color:currentColor;} .tpbs-status-dot--bad{ background: #d32f2f; } .tpbs-pill--bad{ background: rgba(211, 47, 47, 0.12); border: 1px solid rgba(211, 47, 47, 0.35); color: #7a1f1f; } /* Switch row (Staff Admin toggle) */ .tpbs-shell .tpbs-switchrow{ display:flex; align-items:center; justify-content:space-between; gap:var(--tp-space-sm); } .tpbs-shell .tpbs-switch{ position:relative; display:inline-flex; width:46px; height:28px; flex:0 0 auto; } .tpbs-shell .tpbs-switch input{ position:absolute; opacity:0; width:0; height:0; } .tpbs-shell .tpbs-switch-track{ width:46px; height:28px; border-radius:var(--tp-radius-pill); border:1px solid var(--tp-border); background:var(--tp-surface); transition: background .15s ease, border-color .15s ease; } .tpbs-shell .tpbs-switch-thumb{ position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:var(--tp-radius-pill); background: var(--tp-text); opacity:.35; transition: transform .15s ease, background .15s ease, opacity .15s ease; } .tpbs-shell .tpbs-switch input:checked + .tpbs-switch-track{ background: var(--tp-action); border-color: var(--tp-action); } .tpbs-shell .tpbs-switch input:checked + .tpbs-switch-track + .tpbs-switch-thumb{ transform: translateX(18px); background: var(--tp-primary-ink); opacity: 1; box-shadow: 0 1px 2px rgba(0,0,0,.25); } .tpbs-shell .tpbs-switch input:focus-visible + .tpbs-switch-track{ outline: 3px solid rgba(7,195,255,.40); outline-offset: 2px; } /* Access level inline layout (attendee edit) */ .tpbs-shell .tpbs-access-level-inline{ display:flex; gap:var(--tp-space-sm); align-items:center; } .tpbs-shell .tpbs-access-level-adminwrap{ display:inline-flex; align-items:center; gap:var(--tp-space-sm); padding:0; border:0; background:transparent; } .tpbs-shell .tpbs-access-level-adminlabel{ font-weight:var(--tp-weight-heavy); white-space:nowrap; color: var(--tp-muted); letter-spacing:.06em; text-transform: uppercase; font-size: var(--tp-font-xs); } /* Danger link style */ .tpbs-shell .tpbs-danger-link{ appearance:none; background:none; border:0; padding:8px 0; font-weight:950; cursor:pointer; text-decoration: underline; text-underline-offset: 3px; margin-bottom:40px; color:#b91c1c; } /* ========================================================= Emphasise editable fields (orange border + focus ring) Scoped to contact sections so we don't restyle every input. ========================================================= */ .tpbs-shell .tpbs-contact-section .tpbs-input{ border-color: var(--tp-action); /* soft orange */ } .tpbs-shell .tpbs-contact-section .tpbs-input:focus{ border-color: var(--tp-action); outline: none; box-shadow: 0 0 0 3px var(--tp-action-soft); } /* If you use selects/textareas with tpbs-input class */ .tpbs-shell .tpbs-contact-section select.tpbs-input:focus, .tpbs-shell .tpbs-contact-section textarea.tpbs-input:focus{ border-color: var(--tp-action); outline: none; box-shadow: 0 0 0 3px rgba(249,115,22,.25); } /* Staff list status icons (Admin/Disabled) — fixed size to avoid line-height changes */ .tpbs-row-flag{ font-size:22px; } /* Match existing UI colours */ .tpbs-staff-row-flag--admin .material-symbols-outlined { color: var(--tp-cyan); margin-top:-2px; } /* same as avatar dot */ .tpbs-staff-row-flag--disabled .material-symbols-outlined { color:#ef4444; margin-top:-2px; } /* red block */ /* Make POST action tiles (button inside form) fill the same height as link tiles */ .tpbs-action-grid > form{ height: 100%; } .tpbs-action-grid > form > .tpbs-action-tile{ width: 100%; height: 100%; display: flex; /* match layout of tiles */ border: 1px solid var(--tp-border); border-radius: var(--tp-radius-xl); background: var(--tp-surface); box-shadow: var(--tp-shadow-md); cursor: pointer; text-align: left; font: inherit; color: inherit; -webkit-appearance: none; appearance: none; } /* Allow edit inputs to fill the value column in row cards */ .tpbs-shell .tpbs-row-card-v .tpbs-input{ width: 100%; } .tpbs-shell .tpbs-form-reset{ margin: 0; } .tpbs-shell .tpbs-form-reset--stack{ margin-bottom: var(--tp-space-sm); } .tpbs-shell .tpbs-card--padded{ padding: var(--tp-space-md); } .tpbs-shell .tpbs-card--padded-sm{ padding: var(--tp-space-sm); } .tpbs-shell .tpbs-card--stack-sm{ margin: var(--tp-space-sm) 0; } .tpbs-shell .tpbs-copy--center{ margin: 0; text-align: center; } .tpbs-shell .tpbs-pagecopy--top{ margin: var(--tp-space-xs) 0 0; } .tpbs-shell .tpbs-heading--tight-sm{ margin: 0 0 var(--tp-space-xs); } .tpbs-shell .tpbs-heading--tight-md{ margin: 0 0 var(--tp-space-sm); } .tpbs-shell .tpbs-copy--flush{ margin: 0; } .tpbs-shell .tpbs-copy--spaced{ margin: 0 0 var(--tp-space-sm); } .tpbs-shell .tpbs-copy--top{ margin-top: var(--tp-space-xs); } .tpbs-shell .tpbs-inline-head{ display: flex; gap: var(--tp-space-sm); align-items: center; margin-bottom: var(--tp-space-xs); } .tpbs-shell .tpbs-inline-title{ font-weight: var(--tp-weight-heavy); margin-bottom: var(--tp-space-2xs); } .tpbs-shell .tpbs-switchrow-label{ font-weight: var(--tp-weight-bold); } .tpbs-shell .tpbs-input--grow{ flex: 1 1 auto; } .tpbs-shell .tpbs-role-chooser{ display: grid; gap: var(--tp-space-sm); } .tpbs-shell .tpbs-choice-row{ display: flex; gap: var(--tp-space-sm); align-items: flex-start; } .tpbs-shell .tpbs-role-panel{ margin-top: var(--tp-space-sm); } .tpbs-shell .tpbs-role-panel--hidden{ display: none; } .tpbs-shell .tpbs-note-center{ max-width: 560px; margin: var(--tp-space-sm) auto 0; text-align: center; } .tpbs-shell .tpbs-form-wrap{ margin: 0 auto; } .tpbs-shell .tpbs-form-wrap--sm{ max-width: 400px; } .tpbs-shell .tpbs-form-wrap--top{ margin-top: var(--tp-space-md); } .tpbs-shell .tpbs-form-wrap--danger{ max-width: 400px; margin-top: var(--tp-space-sm); text-align: center; } .tpbs-shell .tpbs-form-actions{ max-width: 400px; margin: var(--tp-space-md) auto 0; display: grid; gap: var(--tp-space-sm); } .tpbs-shell .tpbs-btn--full{ width: 100%; box-sizing: border-box; text-align: center; } .tpbs-shell .tpbs-card--notice-bad{ border-left: 5px solid #ef4444; } .tpbs-shell .tpbs-card--notice-ok{ border-left: 5px solid #22c55e; } .tpbs-shell .tpbs-card--notice-warn{ border-left: 5px solid #f59e0b; } .tpbs-shell select.tpbs-input.tpbs-input--select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 42px; background-image: linear-gradient(45deg, transparent 50%, rgba(29,47,65,.65) 50%), linear-gradient(135deg, rgba(29,47,65,.65) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .tpbs-shell select.tpbs-input.tpbs-input--select:focus{ outline: none; } .tpbs-shell select.tpbs-input.tpbs-input--select option:checked{ background: rgba(29,47,65,.10); } /* Import / action forms: centred full-width CTAs stacked on mobile */ .tpbs-shell .tpbs-form-cta{ display: grid; gap: var(--tp-space-sm); max-width: 400px; margin: var(--tp-space-sm) auto 0; } .tpbs-shell .tpbs-form-grid{ display: grid; gap: var(--tp-space-lg); } .tpbs-shell .tpbs-pagecopy--top{ margin: var(--tp-space-xs) 0 0; } .tpbs-shell .tpbs-contact-rows--top{ margin-top: var(--tp-space-sm); } .tpbs-shell .tpbs-choice-row{ display: flex; gap: var(--tp-space-sm); align-items: flex-start; margin: 0; } .tpbs-shell .tpbs-choice-row--spaced{ margin-bottom: var(--tp-space-sm); } .tpbs-shell .tpbs-inline-title{ font-weight: var(--tp-weight-heavy); margin-bottom: var(--tp-space-2xs); } .tpbs-shell .tpbs-copy--spaced{ margin: 0 0 var(--tp-space-sm); } .tpbs-shell .tpbs-copy--top{ margin-top: var(--tp-space-xs); } .tpbs-shell .tpbs-form-actions{ max-width: 400px; width: 100%; justify-self: center; margin-top: var(--tp-space-md); display: grid; gap: var(--tp-space-sm); } .tpbs-shell .tpbs-btn--full{ width: 100%; text-align: center; } .tpbs-shell .tpbs-form-wrap--danger{ max-width: 400px; margin: var(--tp-space-2xs) auto 0; text-align: center; } .tpbs-shell .tpbs-card--notice-bad{ border-left: 5px solid #ef4444; } .tpbs-shell .tpbs-card--notice-ok{ border-left: 5px solid #22c55e; } .tpbs-shell .tpbs-card--notice-warn{ border-left: 5px solid #f59e0b; } /* Hidden native file inputs used with a styled "Choose" button */ .tpbs-file-input-hidden{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .tpbs-bottom-clear { margin-bottom: 30px; } /* TPBS custom checkbox + radio (filled orange when selected) */ .tpbs-shell input[type="checkbox"], .tpbs-shell input[type="radio"]{ -webkit-appearance: none; appearance: none; margin: 0; width: 18px; height: 18px; border: 2px solid var(--tp-border); background: var(--tp-surface); display: inline-grid; place-content: center; cursor: pointer; vertical-align: middle; } /* Checkbox shape */ .tpbs-shell input[type="checkbox"]{ border-radius: var(--tp-space-2xs); } /* Radio shape */ .tpbs-shell input[type="radio"]{ border-radius: var(--tp-radius-pill); } /* Checkbox tick */ .tpbs-shell input[type="checkbox"]::before{ content: ""; width: 6px; height: 10px; box-sizing: border-box; border-right: 2px solid transparent; border-bottom: 2px solid transparent; border-top: 0; border-left: 0; transform: rotate(45deg); margin-top: -1px; opacity: 0; } /* Radio dot */ .tpbs-shell input[type="radio"]::before{ content: ""; width: 8px; height: 8px; border-radius: var(--tp-radius-pill); background: var(--tp-primary-ink); transform: scale(0); transition: transform .12s ease; } /* Selected states */ .tpbs-shell input[type="checkbox"]:checked, .tpbs-shell input[type="radio"]:checked{ background: var(--tp-action); border-color: var(--tp-action); } .tpbs-shell input[type="checkbox"]:checked::before{ border-right-color: var(--tp-primary-ink); border-bottom-color: var(--tp-primary-ink); /* white tick */ opacity: 1; } .tpbs-shell input[type="radio"]:checked::before{ transform: scale(1); /* show white dot */ } /* Focus state (accessible) */ .tpbs-shell input[type="checkbox"]:focus-visible, .tpbs-shell input[type="radio"]:focus-visible{ outline: 2px solid var(--tp-action); outline-offset: 2px; } /* Disabled */ .tpbs-shell input[type="checkbox"]:disabled, .tpbs-shell input[type="radio"]:disabled{ opacity: .55; cursor: not-allowed; } /* Switch inputs remain visually hidden even when disabled (avoid native checkbox box showing). */ .tpbs-shell .tpbs-switch input[type="checkbox"]:disabled{ opacity: 0; } /* ========================================================= Badge settings: file icon + floating save bar ========================================================= */ .tpbs-fileicon{ width: var(--tp-icon-btn-size); min-width: var(--tp-icon-btn-size); align-self: stretch; display: flex; align-items: center; justify-content: center; border: 1px solid var(--tp-border); border-radius: var(--tp-radius-lg); background: var(--tp-surface); text-decoration: none; color: var(--tp-action); -webkit-tap-highlight-color: transparent; } .tpbs-fileicon .material-symbols-outlined{ font-size: 22px; } .tpbs-fileicon.is-disabled{ color: var(--tp-muted); background: var(--tp-surface-soft); pointer-events: none; } .tpbs-shell .tpbs-icon-btn--disabled{ pointer-events: none; opacity: .45; } .tpbs-shell .tpbs-filemeta-name{ font-weight: var(--tp-weight-heavy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tpbs-shell .tpbs-filemeta-size{ margin-top: var(--tp-space-2xs); } .tpbs-shell .tpbs-filebox-actions{ display: flex; gap: var(--tp-space-sm); align-items: center; flex: 0 0 auto; } .tpbs-savebar{ position: fixed; left: 0; right: 0; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 95; pointer-events: none; } .tpbs-savebar-inner{ max-width: 760px; margin: 0 auto; padding: 0 var(--tp-space-md); pointer-events: auto; } .tpbs-savebar-panel{ display: flex; gap: var(--tp-space-sm); justify-content: center; align-items: center; padding: var(--tp-space-xs); border-radius: var(--tp-radius-2xl); background: var(--tp-qr-bg); backdrop-filter: blur(10px); border: 1px solid var(--tp-border); box-shadow: var(--tp-shadow-lg); } /* Grey placeholder avatar (Add screens etc.) */ .tpbs-shell .tpbs-avatar.tpbs-avatar--grey{ background: #e5e7eb; box-shadow: 0 6px 16px rgba(0,0,0,.10), 0 0 0 1px rgba(255,255,255,0.18) inset; } .tpbs-shell .tpbs-avatar.tpbs-avatar--grey .tpbs-avatar-text{ color: #6b7280; } /* Disabled/placeholder action tiles */ .tpbs-shell .tpbs-action-tile.tpbs-action-tile--disabled{ opacity: .45; pointer-events: none; filter: grayscale(1); } .tpbs-shell .tpbs-status-dot.tpbs-status-dot--neutral{ background: #94a3b8; /* grey dot */ box-shadow: 0 0 0 3px var(--tp-primary-ink); } /* ========================================================= Help / info pages Scoped typography tweaks for About / Contact / Privacy / Help. Keeps generic cards untouched elsewhere in the app. ========================================================= */ .tpbs-shell .tpbs-help-title{ margin: 0 0 var(--tp-space-sm) 0; font-family: var(--tp-font-heading); font-size: var(--tp-font-lg); padding-top: var(--tp-space-sm); line-height: 1.2; font-weight: var(--tp-weight-bold); letter-spacing: -.01em; color: var(--tp-text); } .tpbs-shell .tpbs-help-page p:last-child{ margin-bottom: 0; } .tpbs-shell .tpbs-help-page .tpbs-help-bullets{ margin: var(--tp-space-xs) 0 var(--tp-space-sm) 0; padding-left: var(--tp-space-md); font-size: var(--tp-font-sm); font-weight: var(--tp-weight-semibold); line-height: 1.45; color: var(--tp-muted); } .tpbs-shell .tpbs-help-page .tpbs-help-bullets li{ margin: var(--tp-space-xs) 0; } .tpbs-shell .tpbs-help-page .tpbs-help-link{ margin-top: 0; } .tpbs-shell .tpbs-help-page p{ font-size: var(--tp-font-md); } /* Help card heading row */ .tpbs-shell .tpbs-help-head{ display: flex; align-items: center; gap: var(--tp-space-sm); margin: 0 0 var(--tp-space-sm) 0; } .tpbs-shell .tpbs-help-head .material-symbols-outlined{ font-size: 20px; line-height: 1; color: var(--tp-action); flex: 0 0 auto; } .tpbs-shell .tpbs-help-head .tpbs-help-title{ margin: 0; } .tpbs-shell .tpbs-help-head .material-symbols-outlined{ font-size: 20px; line-height: 1; color: var(--tp-action); flex: 0 0 auto; position: relative; top: 5px; } /* Page-support text normalisation */ .tpbs-shell .tpbs-page-subtitle, .tpbs-shell .tpbs-help-page__event{ font-family: var(--tp-font-body); font-size: var(--tp-font-sm); line-height: var(--tp-line-sm); font-weight: var(--tp-weight-semibold); color: var(--tp-muted); } /* ========================================================= Chunk B — Typography + surfaces normalisation ========================================================= */ /* --------------------------------------------------------- Base shell text --------------------------------------------------------- */ .tpbs-shell{ color: var(--tp-text); background: var(--tp-bg); font-family: var(--tp-font-body); font-size: var(--tp-font-sm); line-height: var(--tp-line-sm); } /* --------------------------------------------------------- Heading hierarchy --------------------------------------------------------- */ .tpbs-shell h1, .tpbs-shell h2, .tpbs-shell h3, .tpbs-shell h4, .tpbs-shell h5, .tpbs-shell h6, .tpbs-title, .tpbs-page-title, .tpbs-card-title, .tpbs-section-title{ margin: 0; color: var(--tp-text-strong); font-family: var(--tp-font-heading); font-weight: var(--tp-weight-bold); letter-spacing: -.01em; } .tpbs-shell h1, .tpbs-page-title{ font-size: var(--tp-font-2xl); line-height: var(--tp-line-xl); } .tpbs-shell h2, .tpbs-title{ font-size: var(--tp-font-lg); line-height: var(--tp-line-xl); } .tpbs-shell h3, .tpbs-card-title, .tpbs-section-title{ font-size: var(--tp-font-lg); line-height: var(--tp-line-lg); } /* --------------------------------------------------------- Body copy and support text --------------------------------------------------------- */ .tpbs-shell p, .tpbs-body-text{ font-size: var(--tp-font-sm); line-height: var(--tp-line-sm); color: var(--tp-text); } .tpbs-muted{ font-family: var(--tp-font-body); font-size: var(--tp-font-xs); line-height: var(--tp-line-xs); color: var(--tp-muted); font-weight: var(--tp-weight-semibold); } .tpbs-page-subtitle, .tpbs-help-page__event, .tpbs-support-text, .tpbs-section-intro{ font-family: var(--tp-font-body); font-size: var(--tp-font-sm); line-height: var(--tp-line-sm); color: var(--tp-muted); font-weight: var(--tp-weight-semibold); margin: 0; } .tpbs-help-copy, .tpbs-empty-copy, .tpbs-helper-copy{ font-family: var(--tp-font-body); font-size: var(--tp-font-sm); line-height: var(--tp-line-md); color: var(--tp-muted-2); } /* --------------------------------------------------------- Links --------------------------------------------------------- */ /* Text links only, not UI controls */ .tpbs-shell .tpbs-help-page a:not(.tpbs-btn):not(.tpbs-navitem):not(.tpbs-bottomfab):not(.tpbs-action-tile), .tpbs-shell .tpbs-help-copy a:not(.tpbs-btn):not(.tpbs-navitem):not(.tpbs-bottomfab):not(.tpbs-action-tile), .tpbs-shell .tpbs-body-text a:not(.tpbs-btn):not(.tpbs-navitem):not(.tpbs-bottomfab):not(.tpbs-action-tile){ color: var(--tp-accent); } .tpbs-shell .tpbs-help-page a:not(.tpbs-btn):not(.tpbs-navitem):not(.tpbs-bottomfab):not(.tpbs-action-tile):hover, .tpbs-shell .tpbs-help-copy a:not(.tpbs-btn):not(.tpbs-navitem):not(.tpbs-bottomfab):not(.tpbs-action-tile):hover, .tpbs-shell .tpbs-body-text a:not(.tpbs-btn):not(.tpbs-navitem):not(.tpbs-bottomfab):not(.tpbs-action-tile):hover{ color: var(--tp-action); } .tpbs-shell .tpbs-bottomfab{ color: var(--tp-primary-ink); } .tpbs-shell .tpbs-bottomfab svg, .tpbs-shell .tpbs-bottomfab svg *{ fill: currentColor; stroke: currentColor; } /* UI controls */ .tpbs-shell .tpbs-bottomfab{ color: var(--tp-primary-ink); } .tpbs-shell .tpbs-bottomfab:hover, .tpbs-shell .tpbs-bottomfab:focus, .tpbs-shell .tpbs-bottomfab:active{ color: var(--tp-primary-ink); } .tpbs-shell .tpbs-bottomfab .material-symbols-outlined{ color: currentColor; } /* --------------------------------------------------------- Generic surface primitives --------------------------------------------------------- */ .tpbs-card, .tpbs-panel, .tpbs-list-card, .tpbs-event-card, .tpbs-home-card, .tpbs-action-tile, .tpbs-help-card, .tpbs-profile-card, .tpbs-settings-card{ background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-xl); box-shadow: var(--tp-shadow-sm); } /* --------------------------------------------------------- Standard card internals --------------------------------------------------------- */ .tpbs-card, .tpbs-panel, .tpbs-event-card, .tpbs-home-card, .tpbs-help-card, .tpbs-profile-card, .tpbs-settings-card{ padding: var(--tp-space-md); } .tpbs-card--pager{ margin: var(--tp-space-sm) 0 84px; padding: var(--tp-space-sm) var(--tp-space-md); } .tpbs-pager-row{ display: flex; align-items: center; justify-content: space-between; gap: var(--tp-space-sm); } .tpbs-soft-disabled{ opacity: .55; filter: grayscale(1); } .tpbs-card--padded{ padding: var(--tp-space-md); } .tpbs-copy--flush{ margin: 0; } .tpbs-modal-copy{ margin: 0 0 var(--tp-space-sm); } .tpbs-modal-subject{ margin: 0 0 var(--tp-space-sm); } .tpbs-card + .tpbs-card, .tpbs-panel + .tpbs-panel, .tpbs-home-card + .tpbs-home-card, .tpbs-help-card + .tpbs-help-card{ margin-top: var(--tp-space-md); } /* --------------------------------------------------------- Soft / inset surfaces --------------------------------------------------------- */ .tpbs-soft-surface, .tpbs-inline-panel, .tpbs-meta-panel{ background: var(--tp-surface-soft); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-lg); } /* --------------------------------------------------------- Card headings + supporting copy --------------------------------------------------------- */ .tpbs-card-title, .tpbs-panel-title, .tpbs-event-card__title, .tpbs-home-card__title{ margin: 0 0 var(--tp-space-xs); color: var(--tp-text-strong); font-family: var(--tp-font-heading); font-size: var(--tp-font-lg); line-height: var(--tp-line-lg); font-weight: var(--tp-weight-bold); } .tpbs-card-subtitle, .tpbs-panel-subtitle, .tpbs-event-card__subtitle, .tpbs-home-card__subtitle{ margin: 0; color: var(--tp-muted); font-size: var(--tp-font-sm); line-height: var(--tp-line-sm); font-weight: var(--tp-weight-semibold); } /* --------------------------------------------------------- List / row card rhythm --------------------------------------------------------- */ .tpbs-list-card, .tpbs-row-card{ padding: var(--tp-space-sm) var(--tp-space-md); border-radius: var(--tp-radius-lg); } /* Restore grouped list behaviour for attendee/exhibitor rows */ .tpbs-shell .tpbs-attendee-row, .tpbs-shell .tpbs-exhibitor-row{ border-radius: 0; padding: var(--tp-space-sm); } /* Checked-in rows: tighten the status strip slightly */ .tpbs-shell .tpbs-lead-subrow{ margin-top: 0; padding: 0 var(--tp-space-sm) 0 var(--tp-space-sm); line-height: 1.1; } /* --------------------------------------------------------- Page sections --------------------------------------------------------- */ .tpbs-page-section, .tpbs-settings-section, .tpbs-help-section{ margin-top: var(--tp-space-lg); } .tpbs-page-section:first-child, .tpbs-settings-section:first-child, .tpbs-help-section:first-child{ margin-top: 0; } /* --------------------------------------------------------- Help page specific normalisation --------------------------------------------------------- */ .tpbs-help-page p{ color: var(--tp-text); font-size: var(--tp-font-sm); line-height: var(--tp-line-md); } .tpbs-help-page li{ color: var(--tp-text); font-size: var(--tp-font-sm); line-height: var(--tp-line-md); } .tpbs-help-page h2, .tpbs-help-page h3{ margin-top: var(--tp-space-lg); margin-bottom: var(--tp-space-sm); } .tpbs-help-page__event{ margin-bottom: var(--tp-space-md); } /* Floating scan action: keep icon reversed out */ .tpbs-fab, .tpbs-bottom-fab, .tpbs-nav-fab, .tpbs-scan-fab{ color: var(--tp-primary-ink); } .tpbs-fab svg, .tpbs-bottom-fab svg, .tpbs-nav-fab svg, .tpbs-scan-fab svg, .tpbs-fab .material-symbols-outlined, .tpbs-bottom-fab .material-symbols-outlined, .tpbs-nav-fab .material-symbols-outlined, .tpbs-scan-fab .material-symbols-outlined, .tpbs-fab i, .tpbs-bottom-fab i, .tpbs-nav-fab i, .tpbs-scan-fab i{ color: var(--tp-primary-ink); fill: currentColor; } /* ========================================================= Chunk C — Controls normalisation ========================================================= */ /* --------------------------------------------------------- Primary button controls --------------------------------------------------------- */ .tpbs-btn, .tpbs-btn-primary, .tpbs-login-btn, .tpbs-enter-btn, .tpbs-scan-btn, .tpbs-action-btn{ appearance: none; /*border: 0;*/ border-radius: var(--tp-radius-md); min-height: var(--tp-input-height); padding: 0 var(--tp-space-md); display: inline-flex; align-items: center; justify-content: center; gap: var(--tp-space-xs); font-family: var(--tp-font-body); font-size: var(--tp-font-sm); line-height: 1; font-weight: var(--tp-weight-bold); text-decoration: none; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .08s ease; } .tpbs-btn-primary, .tpbs-login-btn, .tpbs-enter-btn, .tpbs-scan-btn, .tpbs-action-btn{ background: var(--tp-action); color: var(--tp-primary-ink); box-shadow: var(--tp-shadow-primary); } .tpbs-btn-primary:hover, .tpbs-login-btn:hover, .tpbs-enter-btn:hover, .tpbs-scan-btn:hover, .tpbs-action-btn:hover{ background: var(--tp-action-2); color: var(--tp-primary-ink); } .tpbs-btn-primary:active, .tpbs-login-btn:active, .tpbs-enter-btn:active, .tpbs-scan-btn:active, .tpbs-action-btn:active{ transform: translateY(1px); } /* --------------------------------------------------------- Secondary / bordered controls --------------------------------------------------------- */ .tpbs-btn-secondary, .tpbs-ghost-btn, .tpbs-secondary-action{ appearance: none; min-height: var(--tp-input-height); padding: 0 var(--tp-space-md); display: inline-flex; align-items: center; justify-content: center; gap: var(--tp-space-xs); border-radius: var(--tp-radius-md); border: 1px solid var(--tp-border); background: var(--tp-surface); color: var(--tp-text); font-family: var(--tp-font-body); font-size: var(--tp-font-sm); line-height: 1; font-weight: var(--tp-weight-bold); text-decoration: none; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .08s ease; } .tpbs-btn-secondary:hover, .tpbs-ghost-btn:hover, .tpbs-secondary-action:hover{ background: var(--tp-surface-soft); color: var(--tp-text-strong); } .tpbs-btn-secondary:active, .tpbs-ghost-btn:active, .tpbs-secondary-action:active{ transform: translateY(1px); } /* --------------------------------------------------------- Circular icon controls --------------------------------------------------------- */ .tpbs-icon-btn, .tpbs-back-btn, .tpbs-round-btn, .tpbs-topbar-icon, .tpbs-icon-circle{ width: var(--tp-icon-btn-size); height: var(--tp-icon-btn-size); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--tp-radius-pill); border: 1px solid var(--tp-border); background: var(--tp-surface); color: var(--tp-action); box-shadow: var(--tp-shadow-sm); cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .08s ease; } .tpbs-icon-btn:hover, .tpbs-back-btn:hover, .tpbs-round-btn:hover, .tpbs-topbar-icon:hover, .tpbs-icon-circle:hover{ background: var(--tp-action-soft); border-color: var(--tp-action); color: var(--tp-action-2); } .tpbs-icon-btn:active, .tpbs-back-btn:active, .tpbs-round-btn:active, .tpbs-topbar-icon:active, .tpbs-icon-circle:active{ transform: translateY(1px); } /* --------------------------------------------------------- Inputs / fields --------------------------------------------------------- */ .tpbs-input, .tpbs-search-input, .tpbs-form-input, .tpbs-field input[type="text"], .tpbs-field input[type="email"], .tpbs-field input[type="password"], .tpbs-field input[type="search"], .tpbs-field input[type="tel"], .tpbs-field input[type="url"], .tpbs-field input[type="number"], .tpbs-field select, .tpbs-field textarea{ width: 100%; min-height: var(--tp-input-height); padding: 10px var(--tp-space-sm); border-radius: var(--tp-radius-md); border: 1px solid var(--tp-border); background: var(--tp-surface); color: var(--tp-text); font-family: var(--tp-font-body); font-size: var(--tp-font-sm); line-height: 1.35; box-shadow: none; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; } .tpbs-field textarea{ min-height: 120px; padding-top: 12px; padding-bottom: 12px; resize: vertical; } .tpbs-input::placeholder, .tpbs-search-input::placeholder, .tpbs-form-input::placeholder, .tpbs-field input::placeholder, .tpbs-field textarea::placeholder{ color: var(--tp-muted); } .tpbs-input:hover, .tpbs-search-input:hover, .tpbs-form-input:hover, .tpbs-field input:hover, .tpbs-field select:hover, .tpbs-field textarea:hover{ border-color: rgba(43,67,84,.22); } .tpbs-input:focus, .tpbs-search-input:focus, .tpbs-form-input:focus, .tpbs-field input:focus, .tpbs-field select:focus, .tpbs-field textarea:focus{ outline: none; border-color: var(--tp-action); box-shadow: var(--tp-focus-ring); } /* --------------------------------------------------------- Labels / small field text --------------------------------------------------------- */ .tpbs-field label, .tpbs-label, .tpbs-field-label{ display: inline-block; margin-bottom: var(--tp-space-xs); color: var(--tp-text-strong); font-family: var(--tp-font-body); font-size: var(--tp-font-xs); line-height: var(--tp-line-xs); font-weight: var(--tp-weight-bold); } .tpbs-helptext, .tpbs-field-help, .tpbs-field-note{ margin-top: var(--tp-space-xs); color: var(--tp-muted); font-size: var(--tp-font-xs); line-height: var(--tp-line-xs); font-weight: var(--tp-weight-medium); } /* --------------------------------------------------------- Unified focus states --------------------------------------------------------- */ .tpbs-btn:focus-visible, .tpbs-btn-primary:focus-visible, .tpbs-btn-secondary:focus-visible, .tpbs-login-btn:focus-visible, .tpbs-enter-btn:focus-visible, .tpbs-scan-btn:focus-visible, .tpbs-action-btn:focus-visible, .tpbs-ghost-btn:focus-visible, .tpbs-secondary-action:focus-visible, .tpbs-icon-btn:focus-visible, .tpbs-back-btn:focus-visible, .tpbs-round-btn:focus-visible, .tpbs-topbar-icon:focus-visible, .tpbs-icon-circle:focus-visible, .tpbs-input:focus-visible, .tpbs-search-input:focus-visible, .tpbs-form-input:focus-visible, .tpbs-field input:focus-visible, .tpbs-field select:focus-visible, .tpbs-field textarea:focus-visible{ outline: none; box-shadow: var(--tp-focus-ring); } /* Action tile labels */ .tpbs-action-tile span, .tpbs-action-tile-label, .tpbs-tile-label{ font-size: var(--tp-font-xs); line-height: var(--tp-line-xs); font-weight: var(--tp-weight-medium); } /* Action tiles: keep icon/label alignment stable when some labels wrap */ .tpbs-action-grid{ align-items: stretch; } .tpbs-action-tile{ display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 104px; } .tpbs-action-icon{ flex: 0 0 auto; margin-bottom: 8px; } .tpbs-action-label{ display: flex; align-items: flex-start; justify-content: center; white-space: normal; line-height: 1.2; min-height: calc(1.2em * 2); text-align: center; width: 100%; max-width: 100%; padding-inline: 2px; } /* Section headings */ .tpbs-section-title, .tpbs-page-section h2{ font-weight: var(--tp-weight-semibold); } /* Labels */ .tpbs-label, .tpbs-field-label{ font-weight: var(--tp-weight-medium); } /* Search icon layout */ .tpbs-shell .tpbs-input-ico{ color: var(--tp-action); } .tpbs-input-wrap { position: relative; } .tpbs-input-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); } .tpbs-input--search { padding-left: 46px; } .tpbs-shell .tpbs-bulk-checkin-scope .tpbs-bulk-controls-box, .tpbs-shell .tpbs-bulk-networking-scope .tpbs-bulk-controls-box{ padding: var(--tp-space-xs) 0 var(--tp-space-xs) var(--tp-space-sm); } @media (max-width: 860px){ .tpbs-shell .tpbs-bulk-checkin-scope .tpbs-bulk-controls-box, .tpbs-shell .tpbs-bulk-networking-scope .tpbs-bulk-controls-box{ padding: var(--tp-space-xs) var(--tp-space-sm); } } .tpbs-shell .tpbs-bulk-checkin-scope .tpbs-btn.tpbs-btn-action, .tpbs-shell .tpbs-bulk-networking-scope .tpbs-btn.tpbs-btn-action{ min-height: 32px; height: 32px; padding: 0 var(--tp-space-sm); font-size: var(--tp-font-sm); font-weight: var(--tp-weight-bold); } /* Access/contact pages: section rhythm */ .tpbs-shell .tpbs-contact-section{ margin-top: var(--tp-space-lg); } /* Small gap from section heading to the card/list wrapper */ .tpbs-shell .tpbs-contact-section > .tpbs-row-card, .tpbs-shell .tpbs-contact-section > .tpbs-contact-rows{ margin-top: var(--tp-space-sm); } /* Card detail rows: keep long values inside the row and ellipsis before trailing actions */ .tpbs-shell .tpbs-contact-row .tpbs-attendee-main{ min-width: 0; } .tpbs-shell .tpbs-contact-row .tpbs-row-card-k, .tpbs-shell .tpbs-contact-row .tpbs-row-card-v{ display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tpbs-shell .tpbs-contact-row .tpbs-contact-ico, .tpbs-shell .tpbs-contact-row .tpbs-icon-btn, .tpbs-shell .tpbs-contact-row .tpbs-attendee-go{ flex: 0 0 auto; } /* ========================================================= Chunk D — rows, chips, nav, and list density ========================================================= */ /* --------------------------------------------------------- Attendee / lead rows --------------------------------------------------------- */ .tpbs-shell .tpbs-attendee-rows{ border-radius: var(--tp-radius-lg); box-shadow: var(--tp-shadow-md); } .tpbs-shell .tpbs-attendee-row{ gap: var(--tp-space-sm); padding: var(--tp-space-sm); border-radius: 0; } .tpbs-shell .tpbs-attendee-row:last-child{ border-bottom: 0; } .tpbs-shell .tpbs-attendee-meta{ color: var(--tp-muted); font-size: var(--tp-font-sm); line-height: var(--tp-line-sm); font-weight: var(--tp-weight-medium); } .tpbs-shell .tpbs-attendee-go{ width: var(--tp-icon-btn-size); height: var(--tp-icon-btn-size); color: var(--tp-action); } .tpbs-shell .tpbs-attendee-chevron{ color: var(--tp-action) !important; line-height: 1; } .tpbs-shell .tpbs-lead-subrow{ margin-top: 0; padding: 0 var(--tp-space-sm) 0 var(--tp-space-sm); color: var(--tp-action); font-size: var(--tp-font-xs); line-height: var(--tp-line-xs); font-weight: var(--tp-weight-semibold); letter-spacing: .06em; } /* --------------------------------------------------------- Row-card metadata density --------------------------------------------------------- */ .tpbs-shell .tpbs-row-card-title{ font-size: var(--tp-font-md); line-height: var(--tp-line-md); font-weight: var(--tp-weight-bold); } .tpbs-shell .tpbs-row-card-k{ font-size: var(--tp-font-xs); line-height: var(--tp-line-xs); font-weight: var(--tp-weight-semibold); color: var(--tp-muted); } .tpbs-shell .tpbs-row-card-v{ font-size: var(--tp-font-sm); line-height: var(--tp-line-sm); font-weight: var(--tp-weight-medium); color: var(--tp-text); } /* --------------------------------------------------------- Pills --------------------------------------------------------- */ .tpbs-shell .tpbs-pill{ display: inline-flex; align-items: center; padding: 4px var(--tp-space-sm); font-size: var(--tp-font-xs); line-height: 1; font-weight: var(--tp-weight-semibold); border-radius: var(--tp-radius-pill); border: 1px solid var(--tp-border); background: var(--tp-surface); color: var(--tp-text); white-space: nowrap; } .tpbs-shell .tpbs-pill--ok{ background: rgba(49,136,165,.12); border-color: rgba(49,136,165,.30); color: var(--tp-accent); } .tpbs-shell .tpbs-pill--muted{ background: var(--tp-surface-soft); border-color: var(--tp-border); color: var(--tp-muted); } /* --------------------------------------------------------- Chips / chipbars --------------------------------------------------------- */ .tpbs-shell .tpbs-chip{ min-height: 36px; padding: 0 var(--tp-space-sm); font-size: var(--tp-font-sm); line-height: 1; font-weight: var(--tp-weight-medium); border-radius: var(--tp-radius-md); border: 1px solid var(--tp-border); background: var(--tp-surface); color: var(--tp-text); box-shadow: var(--tp-shadow-sm); } .tpbs-shell .tpbs-chip .material-symbols-outlined{ font-size: 18px; line-height: 1; color: currentColor !important; } .tpbs-shell .tpbs-chip.is-active, .tpbs-shell .tpbs-chip[data-active="1"], .tpbs-shell .tpbs-chip.is-toggled{ background: var(--tp-surface-soft-2); border-color: var(--tp-border); color: var(--tp-text-strong); } .tpbs-shell .tpbs-chipbar .tpbs-chip:not(.is-active){ background: var(--tp-surface); border-color: var(--tp-border); color: var(--tp-slate); } .tpbs-shell .tpbs-toolbar-row .tpbs-btn, .tpbs-shell .tpbs-chipbar .tpbs-btn, .tpbs-shell .tpbs-chipbar a.tpbs-btn, .tpbs-shell .tpbs-toolbar-row a.tpbs-btn{ background: var(--tp-surface); border: 1px solid var(--tp-action); color: var(--tp-action); box-shadow: var(--tp-shadow-sm); } .tpbs-shell .tpbs-toolbar-row .tpbs-btn .material-symbols-outlined, .tpbs-shell .tpbs-chipbar .tpbs-btn .material-symbols-outlined{ color: currentColor !important; } @media (hover:hover){ .tpbs-shell .tpbs-chipbar .tpbs-btn:hover, .tpbs-shell .tpbs-toolbar-row .tpbs-btn:hover{ background: var(--tp-action-hover-soft); border-color: var(--tp-action); } } .tpbs-shell .tpbs-chip--toggle{ padding: 0 var(--tp-space-sm); } /* --------------------------------------------------------- Bottom navigation --------------------------------------------------------- */ .tpbs-shell .tpbs-bottomnav-inner{ padding: var(--tp-space-sm) var(--tp-space-md) calc(var(--tp-space-sm) + env(safe-area-inset-bottom)); } .tpbs-shell .tpbs-bottomnav-grid{ height: var(--tp-fab-size); gap: var(--tp-space-xs); } .tpbs-shell .tpbs-navitem{ gap: 3px; padding: 6px 0; color: var(--tp-muted); font-size: 0; font-weight: var(--tp-weight-semibold); border-radius: var(--tp-radius-md); } .tpbs-shell .tpbs-navitem .material-symbols-outlined{ font-size: 22px; line-height: 1; color: currentColor; } .tpbs-shell .tpbs-navlabel{ font-size: var(--tp-font-xs); line-height: 1; color: currentColor; } .tpbs-shell .tpbs-navitem.is-active{ color: var(--tp-action); } .tpbs-shell .tpbs-bottomfab{ background: var(--tp-primary); color: var(--tp-primary-ink); box-shadow: 0 18px 34px var(--tp-shadow-primary); } .tpbs-shell .tpbs-bottomfab .material-symbols-outlined{ color: currentColor; } /* --------------------------------------------------------- Small utility counts / meta lines --------------------------------------------------------- */ .tpbs-shell .tpbs-count{ padding: 6px 2px 8px 2px; font-size: var(--tp-font-xs); line-height: var(--tp-line-xs); font-weight: var(--tp-weight-semibold); color: var(--tp-muted-2); } /*---------------------------------------------------------- DESKTOP TABLE FIXES ----------------------------------------------------------*/ .tpbs-shell .tpbs-grid > *{ min-width: 0; } .tpbs-shell .tpbs-card{ min-width: 0; } .tpbs-shell .tpbs-table-wrap{ max-width: 100%; } .tpbs-shell .tpbs-table--print-jobs{ min-width: 640px; } .tpbs-shell .tpbs-table--print-jobs th, .tpbs-shell .tpbs-table--print-jobs td{ padding: var(--tp-space-xs) var(--tp-space-sm); vertical-align: top; } .tpbs-shell .tpbs-table--print-jobs td:last-child{ white-space: normal; word-break: break-word; } .tpbs-shell .tpbs-contact-rows .tpbs-contact-ico--ok{ background: var(--tp-colour-orange); border-color: var(--tp-colour-orange); color: var(--tp-primary-ink); } .tpbs-shell .tpbs-contact-rows .tpbs-contact-ico--bad{ background: #d32f2f; border-color: #d32f2f; color: var(--tp-primary-ink); } .tpbs-shell .tpbs-contact-rows .tpbs-contact-ico--ok .material-symbols-outlined, .tpbs-shell .tpbs-contact-rows .tpbs-contact-ico--bad .material-symbols-outlined{ color: currentColor; } .tpbs-shell .tpbs-contact-rows .tpbs-contact-ico--ok{ background: var(--tp-accent); border-color: var(--tp-accent); color: var(--tp-primary-ink); } .tpbs-shell .tpbs-contact-rows .tpbs-contact-ico--warn{ background: var(--tp-action); border-color: var(--tp-action); color: var(--tp-primary-ink); } .tpbs-shell .tpbs-contact-rows .tpbs-contact-ico--bad{ background: #d32f2f; border-color: #d32f2f; color: var(--tp-primary-ink); } .tpbs-shell .tpbs-contact-rows .tpbs-contact-ico--ok .material-symbols-outlined, .tpbs-shell .tpbs-contact-rows .tpbs-contact-ico--warn .material-symbols-outlined, .tpbs-shell .tpbs-contact-rows .tpbs-contact-ico--bad .material-symbols-outlined{ color: currentColor !important; } /* ========================================================= Acceptance page Branded pre-app checkpoint with scroll-gated terms panel. ========================================================= */ .tpbs-shell.tpbs-acceptance-page{ background: var(--tp-bg); } .tpbs-acceptance-main{ min-height: 100dvh; display: grid; align-items: center; } .tpbs-acceptance-inner{ width: min(100%, 720px); margin: 0 auto; padding-inline: var(--tp-space-sm); box-sizing: border-box; } .tpbs-shell.tpbs-acceptance-page .tpbs-login-kicker{ text-align: center; margin: 0 0 var(--tp-space-xs) 0; font-family: var(--tp-font-heading); font-weight: 900; letter-spacing: -0.02em; font-size: 20px; color: var(--tp-text); } .tpbs-acceptance-logo-link{ display: block; width: 210px; height: 84px; margin: 0 auto 6px auto; } .tpbs-acceptance-logo{ display: block; width: 100%; height: 100%; object-fit: contain; margin: 0; } .tpbs-shell.tpbs-acceptance-page .tpbs-login-sub{ width: min(100%, 34rem); margin: 0 auto; padding-inline: var(--tp-space-sm); box-sizing: border-box; text-align: center; font-family: var(--tp-font-body); color: var(--tp-muted-2); font-size: 14px; line-height: 1.4; } .tpbs-acceptance-header{ display: grid; justify-items: center; gap: 0; margin: 0 auto var(--tp-space-lg); } .tpbs-acceptance-intro{ width: min(100%, 34rem); margin: 0 auto var(--tp-space-md); padding-inline: var(--tp-space-sm); box-sizing: border-box; } .tpbs-acceptance-card{ max-width: 680px; margin: 0 auto; padding: calc(var(--tp-space-md) + var(--tp-space-xs)); background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-2xl); box-shadow: var(--tp-shadow-lg); } .tpbs-acceptance-meta{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tp-space-sm) var(--tp-space-md); margin-bottom: var(--tp-space-sm); } .tpbs-acceptance-updated{ color: var(--tp-muted); font-size: 13px; line-height: 18px; font-weight: 600; } .tpbs-acceptance-links{ display: flex; flex-wrap: wrap; gap: var(--tp-space-sm) var(--tp-space-md); } .tpbs-acceptance-links a{ color: var(--tp-accent); font-size: 13px; line-height: 18px; font-weight: 700; text-decoration: none; } .tpbs-acceptance-links a:hover, .tpbs-acceptance-links a:focus-visible{ text-decoration: underline; } .tpbs-acceptance-scroll{ max-height: min(48vh, 560px); overflow: auto; padding: var(--tp-space-md); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-lg); background: var(--tp-surface-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); -webkit-overflow-scrolling: touch; } .tpbs-acceptance-scroll:focus-visible{ outline: none; box-shadow: var(--tp-focus-ring), inset 0 1px 0 rgba(255,255,255,.35); } .tpbs-acceptance-terms{ color: var(--tp-text); font-family: var(--tp-font-body); font-size: 14px; line-height: 1.6; } .tpbs-acceptance-doc-title, .tpbs-acceptance-terms h2, .tpbs-acceptance-terms h3{ color: var(--tp-text-strong); font-family: var(--tp-font-heading); } .tpbs-acceptance-doc-title{ margin: 0 0 var(--tp-space-sm); font-size: 20px; line-height: 1.3; font-weight: 800; } .tpbs-acceptance-terms h2{ margin: 22px 0 8px; font-size: 16px; line-height: 1.35; font-weight: 800; } .tpbs-acceptance-terms h3{ margin: 16px 0 6px; font-size: 14px; line-height: 1.4; font-weight: 700; } .tpbs-acceptance-terms p{ margin: 0 0 12px; } .tpbs-acceptance-terms ul{ margin: 0 0 14px 20px; padding: 0; } .tpbs-acceptance-terms li{ margin-bottom: 6px; } .tpbs-acceptance-terms a{ color: var(--tp-accent); } .tpbs-acceptance-status{ margin: 12px 0 0; color: var(--tp-muted); font-size: 13px; line-height: 18px; font-weight: 600; } .tpbs-acceptance-actions{ margin-top: var(--tp-space-md); display: grid; gap: var(--tp-space-sm); } .tpbs-acceptance-form{ margin: 0; } .tpbs-acceptance-submit[disabled], .tpbs-acceptance-submit.is-locked{ opacity: .62; cursor: not-allowed; box-shadow: none; filter: saturate(.8); } .tpbs-acceptance-submit[disabled]:active{ transform: none; } @media (min-width: 700px){ .tpbs-acceptance-actions{ grid-template-columns: minmax(0, 1fr) minmax(220px, 240px); align-items: start; } } @media (max-width: 640px){ .tpbs-acceptance-main{ min-height: 100dvh; padding: var(--tp-space-lg) var(--tp-space-md) calc(var(--tp-space-xl) + env(safe-area-inset-bottom)); } .tpbs-acceptance-inner{ padding-inline: 0; } .tpbs-shell.tpbs-acceptance-page .tpbs-login-sub, .tpbs-acceptance-intro{ width: min(100%, 30rem); padding-inline: var(--tp-space-md); } .tpbs-acceptance-card{ padding: var(--tp-space-md); } .tpbs-acceptance-scroll{ max-height: 38vh; padding: calc(var(--tp-space-sm) + 2px); } } .tpbs-shell #tpbs_badges_form .tpbs-row-card-v .tpbs-copy--top{ white-space: normal; overflow-wrap: anywhere; word-break: normal; }