/* ─────────────────────────────────────────────────────────────────────────── Market Map / Booth Directory — template supplement (layers on allgrid.css). allgrid.css already ships the NECA-mobile look: light grey page background, white cards with a teal outline + drop shadow, teal icons/titles. We do NOT re-theme it dark — we only supply the few pieces allgrid doesn't (body width cap, header logo fit, footer, booth-detail readability) and tint accents with the Design-wizard tokens. Tokens (mapped in base/include/header_html.php onto allgrid's own vars): --app-background-color ← page background (DESIGN_COLOR_BRAND, grey) --brand-color ← teal accent (DESIGN_COLOR_PRIMARY) --card-border-color ← teal accent (DESIGN_COLOR_PRIMARY) --mm-accent ← favorites/medals (DESIGN_COLOR_ACCENT) ─────────────────────────────────────────────────────────────────────────── */ body { /* --font_copy compiles from the DESIGN_FONT_COPY wizard token (default Roboto Flex); --mm-letter-spacing from DESIGN_LETTER_SPACING. Both admin-tunable per portal. */ font-family: var(--font_copy, 'Roboto Flex'), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: var(--mm-letter-spacing, 0em); } /* UI voice (headers, buttons, chips) follows the DESIGN_FONT_UI token. */ h1, h2, h3, .mm-btn, .mm-chip, .mm-drawer-section { font-family: var(--font_ui, 'Roboto Flex'), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* The parser wraps template body content in .grid-area_mainArea inside #content. Neutralize any inherited grid so the kiosk grid controls its own layout, and cap the body width via the DESIGN_BODY_MAX_WIDTH token. */ /* Lock the whole kiosk to 1920 and center it on anything wider. The card grid is tuned for the 1920×1080 kiosk (≈283px square cards); past 1920 allgrid stretches the columns, which flips the card to a wide/short layout and knocks the favorite star, logos, and labels out of place. Capping the wrapper keeps 1920 proportions on ultrawide/desktop; the 1920 kiosk and mobile are unaffected (both sit below the cap). */ .mm-wrapper { max-width: 1920px; margin-left: auto; margin-right: auto; } .mm-content { width: 100%; max-width: var(--body-max-width, 1440px); margin: 0 auto; padding-top: clamp(20px, 2vw, 40px); padding-bottom: 150px; /* final rows/cards scroll clear of the corner button stack */ } .mm-content .grid-area_mainArea { display: block; } /* Sub-pages render a breadcrumb as the first body content — it's the visual layer under the header (the kiosk reference tucks it into the header chrome). So on those pages pull the top in tight and let the breadcrumb sit snug under the header, with a clean gap to the grid. The landing (no breadcrumb) keeps the generous top padding so its header banner doesn't butt the cards. */ .mm-content:has(.breadcrumb) { padding-top: clamp(16px, 2vw, 20px); } /* #25: crumbs ran into the header on phones */ .mm-content .breadcrumb { margin: 0 0 clamp(10px, 1vw, 16px); } /* Pages that render OUTSIDE .mm-content (the platform booth page /booth/ — parser blocks, no kiosk wrapper) get the breadcrumb gap from the list itself; the more-specific .mm-content rule above keeps kiosk pages unchanged. */ ul.breadcrumb { margin-top: clamp(16px, 2vw, 20px); } /* ── Header logo ── allgrid fits the logo to the 80–120px logo column (width:100%). Keep that (do NOT set width:auto — that lets a big raster overflow and overlap the title), just cap the height so a tall/square mark stays inside the header row. */ .mm-header .header-logo { overflow: hidden; } .mm-header .header-logo img { width: 100%; height: auto; max-height: 110px; object-fit: contain; } .mm-logo-fallback { font-weight: 700; font-size: 1.1rem; color: var(--brand-color); } /* (The .login chip is styled gold in the navy-premium header block below.) */ /* ── Action arrow (card drill-in link) — allgrid fades it in on hover; tint it. ── */ .action-arrow { color: var(--brand-color); text-decoration: none; } /* ── Favorites + medal accents ── allgrid styles the .card.company favorite/flag layout; we only tint the star/medal with the accent token. ── */ .favorite .fa-star, .favorite.active .fa-star { color: var(--mm-accent, #f2b705); } .favorite button { background: transparent; border: 0; cursor: pointer; } /* ── Footer (Sponsored by …) ── */ .mm-footer { text-align: right; padding: 10px 16px 24px; } .mm-footer.mm-footer-left { text-align: left; } /* Footer Layout: credit left */ .mm-sponsored-by { font-size: .85rem; color: var(--brand-color); } /* ── Booth detail (modal-grid) sits on the light page background. ── */ .modal-grid .content-area, .modal-grid .content-area li { color: var(--text-color, #333); } .modal-grid .content-area a { color: var(--brand-color); } .modal-grid .company-logo img { max-width: 100%; background: #fff; border-radius: 8px; padding: 6px; border: var(--card-border-width, 2px) solid var(--card-border-color, #1f7995); } /* #27: the booth name is the page headline — prominent, left, first under the crumbs. allgrid floats the content list's first li right (legacy favorite-button slot); undo. */ .content-area > ul > li:nth-child(1) { float: none; display: block; text-align: left; } .modal-grid .CompanyName { font-size: 2rem; line-height: 1.15; margin: 0 0 .5rem; color: var(--brand-color); } /* #42 — the action buttons ride the headline row: name left, actions top-right. flex-wrap drops the buttons under the name on narrow widths (long names, phones). */ .modal-grid .CompanyName.mm-name-line { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; } .mm-name-line .mm-actions { font-size: 1rem; margin-left: auto; } /* #27: Booth # + Schedule/Favorite actions share one line; allgrid makes every a block heading — inline it here so "Booth #:" sits beside its number. */ .mm-booth-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; } .mm-booth-line b { display: inline; margin-top: 0; } .modal-grid .mm-fav-btn { background: transparent; border: 0; cursor: pointer; color: var(--mm-accent, #f2b705); } /* ── Empty-state / notices ── */ .mm-empty { padding: 2rem; text-align: center; color: var(--text-color, #333); opacity: .85; } /* ── Header hamburger + slide-out drawer menu ───────────────────────────────── Primary nav + "My Account" (Favorites, log in/out; the calendar slots in later). Config-driven from mm_menu_items(); brand-token colors so it re-skins with the Design wizard. Mobile-first slide-out from the right. */ .mm-header { position: relative; } .mm-nav-toggle { position: absolute; top: 0; right: 0; z-index: 20; width: 44px; height: 44px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; font-size: 20px; color: var(--brand-color, #1f7995); background: color-mix(in srgb, var(--brand-color, #1f7995) 12%, #fff); border: 1px solid color-mix(in srgb, var(--brand-color, #1f7995) 30%, transparent); } .mm-nav-toggle:hover { background: color-mix(in srgb, var(--brand-color, #1f7995) 20%, #fff); } .mm-drawer-backdrop { position: fixed; inset: 0; z-index: 390; /* above the A-Z band (300) — T21 */ background: rgba(0,0,0,.42); opacity: 0; transition: opacity .2s ease; } .mm-drawer-backdrop.mm-open { opacity: 1; } .mm-drawer-backdrop[hidden] { display: none; } .mm-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 400; /* above the A-Z band (300) — T21 */ width: min(84vw, 320px); background: var(--card-bg-color, #fff); box-shadow: -8px 0 34px rgba(0,0,0,.22); transform: translateX(100%); transition: transform .24s ease; display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; } .mm-drawer.mm-open { transform: translateX(0); } .mm-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: var(--brand-color, #1f7995); color: #fff; } .mm-drawer-title { font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mm-drawer-close { background: transparent; border: 0; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 6px; } .mm-drawer-section { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a949b; padding: 18px 18px 6px; } .mm-drawer-link { display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: #24303a; text-decoration: none; font-size: 16px; font-weight: 500; border-bottom: 1px solid #eef1f3; } .mm-drawer-link i { width: 22px; text-align: center; font-size: 18px; color: var(--brand-color, #1f7995); } .mm-drawer-link:hover { background: color-mix(in srgb, var(--brand-color, #1f7995) 8%, #fff); color: var(--brand-color, #1f7995); } /* My Meetings live count badge on its drawer link. */ .mm-drawer-link .mm-badge { margin-left: auto; background: var(--brand-color, #1f7995); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; padding: 0 6px; } .mm-drawer-link .mm-badge[hidden] { display: none; } /* the rule above sets display, which outranks the UA [hidden] rule */ /* Test Mode drawer link (#31) — amber semantic-warning treatment, deliberately NOT brand-tokened: a testing/misconfig state must read as a warning on every skin. */ .mm-drawer-link-warn, .mm-drawer-link-warn i { color: #8a5c00; } .mm-drawer-link-warn { background: #fff7e0; } .mm-drawer-link-warn:hover { background: #ffefc2; color: #6d4900; } /* ── Test Mode status page (#31). Semantic status colors (green/amber/red) stay fixed across portal skins; card chrome keys off the usual tokens. ── */ .mm-test-wrap { max-width: 760px; } .mm-test-banner { border-radius: 10px; padding: 18px 20px; margin: 6px 0 22px; display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.45; } .mm-test-banner i { font-size: 22px; margin-top: 3px; } .mm-test-banner b { display: block; font-size: 17px; margin-bottom: 3px; } .mm-test-banner.warn { background: #fff7e0; border: 1px solid #f0dfa8; color: #6d4900; } .mm-test-banner.live { background: #fdecec; border: 1px solid #f2c4c4; color: #8f2020; } .mm-test-card { background: var(--card-bg-color, #fff); border: 1px solid #d9e2e4; border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; box-shadow: 0 2px 5px rgba(30,70,85,.06); } .mm-test-card h3 { margin: 0 0 8px; font-size: 15px; font-weight: 800; color: var(--brand-color, #1f7995); } .mm-test-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 14px; color: var(--text-dark, #333); border-top: 1px solid #eef1f3; line-height: 1.45; } .mm-test-row:first-of-type { border-top: 0; } .mm-test-row > i { width: 18px; text-align: center; margin-top: 3px; flex: 0 0 auto; } .mm-test-row.ok > i { color: #2e8b57; } .mm-test-row.bad > i { color: #c0392b; } .mm-test-row.note > i { color: #8a5c00; } .mm-test-row code { background: #f2f5f6; border-radius: 4px; padding: 1px 6px; font-size: 12.5px; word-break: break-all; } /* ═══════════════════════════════════════════════════════════════════════════ Meeting Scheduler + directory design tweaks (layers on allgrid.css). Every color keys off the Design-wizard tokens (--brand-color / --mm-accent / --card-bg-color) so the whole feature re-skins per portal — no hardcoded hues. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Panel-adjustable tokens (defaults; the Display & Layout panel overrides on :root at runtime). Composed with the Design-wizard density in header_html.php. ── */ :root { --mm-font-scale: 1; /* text size multiplier */ --mm-label-weight: 700; /* card label weight */ --mm-icon-scale: 1; /* card icon size multiplier */ --mm-icon-weight: 0; /* FA glyph stroke ×1px (true weights need a Pro FA kit) */ } /* Icon weight — thickens FA glyphs (a Pro FA kit gives real light/thin weights). */ .fas, .far { -webkit-text-stroke: calc(var(--mm-icon-weight, 0) * 1px) currentColor; } /* Card icon size + label weight, tunable without touching allgrid's grid. */ .card .header i { transform: scale(var(--mm-icon-scale, 1)); } .card .section b { font-weight: var(--mm-label-weight, 700); } /* System nav tiles (All Booths / Favorites / My Meetings, ticket #80): the landing embed stamps .system plus the style modifier chosen on Design -> Theme (MARKETMAP_SYSTEM_TILE_STYLE) so the fixed navigation can read apart from the browse categories; 'normal' emits no modifier and the tiles match the categories. Colors come from Design tokens only — brand/card from the shared palette, --mm-system-tile-color from the System Tile Color field (bridged in header_html.php). */ .card.system--inverse { background-color: var(--brand-color); } .card.system--inverse .header, .card.system--inverse .section, .card.system--inverse .section a { color: var(--card-bg-color, white); } .card.system--color { outline-color: var(--mm-system-tile-color); box-shadow: 0 var(--card-box-shadow-width) 1px color-mix(in srgb, var(--mm-system-tile-color) 70%, black 30%); } .card.system--color .header, .card.system--color .section, .card.system--color .section a { color: var(--mm-system-tile-color); } .card.system--color-inverse { background-color: var(--mm-system-tile-color); outline-color: var(--mm-system-tile-color); box-shadow: 0 var(--card-box-shadow-width) 1px color-mix(in srgb, var(--mm-system-tile-color) 70%, black 30%); } .card.system--color-inverse .header, .card.system--color-inverse .section, .card.system--color-inverse .section a { color: var(--card-bg-color, white); } /* allgrid's .card:focus-within lightens the surface toward white, which would wash out the light label on the two solid variants — darken toward black instead. */ .card.system--inverse:focus-within { background-color: color-mix(in srgb, var(--brand-color) 80%, black 20%); } .card.system--color-inverse:focus-within { background-color: color-mix(in srgb, var(--mm-system-tile-color) 80%, black 20%); } /* ── Navy-premium header (option 3C, keyed to --primary-*) ──────────────────── A brand-color scrim over an optional pattern watermark; the pattern URL is a per-portal design variable injected as --mm-header-pattern (never hardcoded). ── */ .mm-header { --mm-header-scrim: color-mix(in srgb, var(--brand-color, #1B2B79) 93%, transparent); border-radius: 16px; padding: 14px 18px; padding-right: 64px; /* clear space for the hamburger */ background-color: var(--brand-color, #1B2B79); background-image: linear-gradient(var(--mm-header-scrim), var(--mm-header-scrim)), var(--mm-header-pattern, none); background-size: cover; background-position: center 40%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); } /* Logo on a white chip so light-on-transparent marks read on the navy band. */ .mm-header .header-logo { background: var(--card-bg-color, #fff); border-radius: 12px; padding: 8px 12px; } .mm-header .header-text { color: #fff; } /* The title renders at line-height 1 (allgrid base), so its descenders hang below the line box; without a gap the Log In/Log Out chip's padded box overlaps them ("p" in "Map" on a wrapped mobile title). .5em here is small-relative (≈.25em of title). */ .mm-header .header-text small { color: rgba(255, 255, 255, .82); margin-top: .5em; } .mm-logo-fallback { color: var(--brand-color, #1B2B79); } /* Gold Log In chip; light Log Out chip — both readable on navy. */ .mm-header .header-text small .login { margin-left: 0.3em; font-weight: 800; font-size: 0.9em; color: #3a2c00; white-space: nowrap; background: var(--mm-accent, #F3C316); padding: 0.22em 0.7em; border-radius: 0.28em; text-decoration: none; } .mm-header .header-text small .login:hover { filter: brightness(.95); } .mm-header .header-text small .logout { margin-left: 0.3em; font-weight: 700; font-size: 0.9em; color: var(--brand-color, #1B2B79); white-space: nowrap; background: rgba(255, 255, 255, .92); padding: 0.22em 0.7em; border-radius: 0.28em; text-decoration: none; } .mm-header .header-text small .logout:hover { background: #fff; } /* Hamburger restyled for the navy band: white glyph on a translucent-white chip. */ .mm-header .mm-nav-toggle { top: 12px; right: 14px; width: 42px; height: 42px; color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .42); } .mm-header .mm-nav-toggle:hover { background: rgba(255, 255, 255, .3); } /* ── Card polish — subtle lift on interactive cards (pointer devices only). ── */ @media (hover: hover) { .card.nav-card, .grid-item > .card { transition: transform .16s ease, box-shadow .16s ease; } .grid-item > .card:hover { transform: translateY(-3px); box-shadow: 0 calc(var(--card-box-shadow-width) + 7px) 18px var(--card-box-shadow-color); } } /* Sponsor logos fit their cell at scale (contain), never stretch (allgrid forces a 4:3). */ .card.company .header img { object-fit: contain; padding: 6px; } /* Exhibitor-card name: the Claude Design list caps company names at text-size-200; allgrid bumps a wide card to text-size-300 (~32px). Cap it so presenter names never balloon. */ @container card (width > 350px) { .card.company .section { --_font-size: var(--text-size-200); } } /* ── "Offers meetings" quick-schedule control on a grid card (top-left corner). Now a button/link (T5) — same footprint as the old read-only marker. ── */ .card.company { position: relative; } .card.company .mm-calbadge { position: absolute; top: 8px; left: 8px; z-index: var(--z-top, 300); width: 30px; height: 30px; display: grid; place-items: center; background: var(--card-bg-color, #fff); outline: 2px solid var(--card-box-shadow-color); border-radius: 4px; color: var(--brand-color, #1f7995); font-size: 13px; border: none; padding: 0; cursor: pointer; font-family: inherit; } .card.company .mm-calbadge:hover { background: var(--brand-color, #1f7995); color: #fff; } /* ── Favorite control — floated corner box, mirroring .mm-calbadge on the opposite corner (top-RIGHT, same 30px rounded square, same 8px inset). allgrid parks it in a reserved `favorite` grid cell flush to the card edge; lifting it out of flow gives the two corner controls one box language. The reserved column track stays in allgrid's template, so the name/logo keep their clearance and nothing reflows. `grid-area: auto` is load-bearing: an abspos grid item WITH a definite grid position takes its GRID AREA as the containing block, so top/right would resolve against the old cell instead of the card. ── */ .card.company .favorite { position: absolute; grid-area: auto; top: 8px; right: 8px; z-index: var(--z-top, 300); width: 30px; height: 30px; margin: 0; padding: 0; border-radius: 4px; } /* The whole box is the toggle. The control used to be a shrink-wrapped button around a ~13px star — a miss-prone tap target on a kiosk. Stretching it to fill the box makes the visible square and the hit area the same thing. It stays at --z-top so it keeps its own clicks above the card's stretched navigation overlay (.expanded-click-area-after::after, --z-low), which covers the entire card. */ .card.company .favorite > button, .card.company .favorite > a { display: grid; place-items: center; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font-size: 13px; text-decoration: none; cursor: pointer; } /* Row quick-schedule (T5 rework): a calendar ICON button beside the star, same box language (34px rounded square, right edge, vertically centered). z-index lifts both above the row's stretched click overlay. */ .alpha-section .card.company .mm-row-cal { position: absolute; top: 50%; right: 56px; transform: translateY(-50%); z-index: var(--z-top, 300); } .mm-cal-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 4px; background: #fff; outline: 2px solid var(--card-box-shadow-color); border: none; padding: 0; cursor: pointer; font-family: inherit; color: var(--brand-color, #1f7995); font-size: 15px; } .mm-cal-btn:hover { background: var(--brand-color, #1f7995); color: #fff; } /* T46 R2: keep the row name clear of BOTH right-edge controls. The .has-cal class (mm_sponsor_row, rows that render the calendar button) carries the extra specificity — the plain `.section` shorthand below (row-layout block) resets padding to 60px, which clears the star only and was clipping names under the calendar button on two-button rows. Star-only rows keep the narrower padding. */ .alpha-section .card.company.has-cal .section { padding-right: 104px; } /* #46 — phones: the 5rem letter column starved the rows (254px of a 390px screen), wrapping/clipping company names. Stack the letter above its rows instead; rows take the full content width. */ @media (max-width: 640px) { .alpha-section { display: block; } .alpha-section .section-label h2 { position: static; text-align: left; font-size: 1.4rem; margin: 0 0 6px 4px; } } /* breadcrumb: long booth names overflowed the header grid on phones — wrap and ellipsize the final crumb instead of colliding. */ .breadcrumb { flex-wrap: wrap; row-gap: 4px; max-width: 100%; min-width: 0; } /* #27: allgrid gives only LINK crumbs a flex icon/label gap — the current (non-link) crumb rendered its label tight against the icon, so spacing shifted page to page. Same layout for every crumb. */ .breadcrumb li { display: flex; align-items: center; gap: 0.25em; } @media (max-width: 640px) { .breadcrumb li:last-child a .label { max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; } } /* ── T4/T20: shared key + filter chip bar (replaces the legend on every listing page). Chips carry the same icon/color language as the row/card markers they explain. position+z-index: the row links' stretched click overlays otherwise intercept taps. */ .mm-filter-chips { display: flex; flex-wrap: wrap; gap: 9px; padding: 4px 2px 12px; position: relative; z-index: var(--z-top, 300); align-items: center; align-content: flex-start; } .mm-filter-chips .mm-chip { align-self: center; height: fit-content; } .mm-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid color-mix(in srgb, var(--brand-color, #1f7995) 35%, #fff); background: var(--card-bg-color, #fff); color: var(--brand-color, #1f7995); font-size: 15px; font-weight: 700; padding: 9px 16px; /* family: the h1/h2/h3/.mm-btn/.mm-chip --font_ui rule above */ border-radius: 999px; cursor: pointer; } .mm-chip i { font-size: 15px; } .mm-chip:hover { border-color: var(--brand-color, #1f7995); } /* Active = filled for the plain All chip; colored variants keep their identity and show active via a brand ring (outline survives gradients). */ .mm-chip.is-on { background: var(--brand-color, #1f7995); color: #fff; border-color: var(--brand-color, #1f7995); } .mm-chip.is-on { outline: 2px solid var(--brand-color, #1f7995); outline-offset: 2px; } .mm-chip.gold, .mm-chip.gold.is-on { background: linear-gradient(to bottom right, #fff8dc, #ffd700 30%, #e6c200 70%, #fff8dc); color: #3a2c00; border-color: #b8860b; } .mm-chip.silver, .mm-chip.silver.is-on { background: linear-gradient(to bottom right, #ffffff, #e5e4e2 40%, #c9c9c9 80%, #f5f5f5); color: #2e2e2e; border-color: #a0a0a0; } .mm-chip.platinum, .mm-chip.platinum.is-on { background: linear-gradient(to bottom right, #eaf6ff, #cfe6f5 40%, #a9c9de 85%, #eaf6ff); color: #17303f; border-color: #7fa8c4; } .mm-chip.gold i { color: #b8860b; } .mm-chip.silver i { color: #8a8a8a; } .mm-chip.platinum i { color: #5b87a6; } .mm-chip.partner, .mm-chip.partner.is-on { background: color-mix(in srgb, var(--brand-color, #1f7995) 10%, #fff); color: var(--brand-color, #1f7995); border-color: color-mix(in srgb, var(--brand-color, #1f7995) 45%, #fff); } .mm-chip.partner i { color: var(--mm-accent, #f2b705); } .mm-chip.meets, .mm-chip.meets.is-on { background: var(--card-bg-color, #fff); color: var(--brand-color, #1f7995); } .mm-chip.meets i { color: var(--brand-color, #1f7995); } /* ── T19: floating Back-to-top button (bottom-right corner; the corner-stack manager in footer_always.php spaces it against the feedback pill / display tuner). ── */ .mm-top-fab { position: fixed; right: 8px; bottom: 12px; z-index: 79; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-color, #1f7995); color: #fff; font-size: 17px; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.28); } .mm-top-fab:hover { filter: brightness(1.08); color: #fff; } /* ── T10: booth-page action bar (Schedule a Meeting + Favorite as sibling buttons). The Favorite button re-asserts the .mm-btn look (the bare-star .mm-fav-btn styles would otherwise strip its background): blue like its sibling, yellow star. ── */ .mm-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; } .mm-actions button.mm-fav-action { background: var(--brand-color, #1f7995); color: #fff; border: none; font-size: 1rem; } .mm-actions button.mm-fav-action:hover { background: color-mix(in srgb, var(--brand-color, #1f7995) 85%, black 15%); } .mm-actions .mm-fav-action i { color: var(--mm-accent, #f2b705); } @media (max-width: 640px) { .mm-actions .mm-action-label { display: none; } /* icons-only on phones */ .mm-actions .mm-btn { padding: 12px 15px; } } /* ── Tier medals — adopt handoff naming: gold / silver(grey) / platinum(blue). Overrides allgrid's grey .platinum (marketmap.css loads after allgrid). ── */ .card.company .flags .flag.silver { background-image: linear-gradient(to bottom right, #ffffff, #e5e4e2 25%, #d9d9d9 50%, #b0b0b0 75%, #f5f5f5); color: #2e2e2e; border: 1px solid #a0a0a0; outline-color: currentColor; box-shadow: -2px -2px 2px rgba(255,255,255,.7), 2px 2px 2px rgba(0,0,0,.4); border-radius: 2px; } .card.company .flags .flag.platinum { background: none; background-image: linear-gradient(to bottom right, #eaf6ff, #cfe6f5 30%, #a9c9de 60%, #7fa8c4 90%, #eaf6ff); color: #17303f; border: 1px solid #7fa8c4; outline-color: currentColor; box-shadow: -2px -2px 2px rgba(255,255,255,.6), 2px 2px 2px rgba(0,0,0,.35); border-radius: 2px; } /* ── Request a Meeting CTA (booth detail content-area) ── */ .mm-cta-line { margin-top: 1.1em; } .mm-btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: 8px; border: none; background: var(--brand-color, #1f7995); color: #fff; font-size: 1rem; font-weight: 600; /* family: the --font_ui rule above */ cursor: pointer; box-shadow: 0 3px 8px color-mix(in srgb, var(--brand-color, #1f7995) 40%, transparent); text-decoration: none; } .mm-btn:hover { background: color-mix(in srgb, var(--brand-color, #1f7995) 85%, black 15%); color: #fff; } /* T64: the content-area link rule (.modal-grid .content-area a) outspecifies .mm-btn, so solid ANCHOR CTAs (the logged-out "Log in to…" links) rendered brand-on-brand — invisible text. Anchors reclaim the button colors at winning specificity. */ .modal-grid .content-area a.mm-btn { color: #fff; } .modal-grid .content-area a.mm-btn.ghost { color: var(--brand-color, #1f7995); } /* T64 (logged-in half): allgrid's legacy first-li favorite rule (.content-area > ul > li:nth-child(1) button — white bg, #636363 text) started catching the headline action BUTTONS when v2.9.146 moved them into that li. Anchors dodge it (button-only selector), which is why only the logged-in state went white. Re-assert the solid .mm-btn look at winning specificity. */ .mm-name-line .mm-actions button.mm-btn { background: var(--brand-color, #1f7995); color: #fff; } .mm-name-line .mm-actions button.mm-btn:hover { background: color-mix(in srgb, var(--brand-color, #1f7995) 85%, black 15%); color: #fff; } .mm-btn.ghost { background: var(--card-bg-color, #fff); color: var(--brand-color, #1f7995); border: 1px solid var(--brand-color, #1f7995); box-shadow: none; } /* Destructive confirm (cancel-a-meeting modal) — same red family as .mm-cal-cancel / .mm-slot-warn. */ .mm-btn.danger { background: #c0392b; box-shadow: 0 3px 8px color-mix(in srgb, #c0392b 40%, transparent); } .mm-btn.danger:hover { background: color-mix(in srgb, #c0392b 85%, black 15%); } .mm-btn.block { width: 100%; justify-content: center; } .mm-btn:disabled { background: #c4ccd0; cursor: not-allowed; box-shadow: none; } .mm-cta-helper { margin-top: 8px; font-size: .72em; color: var(--text-dark, #333); opacity: .85; } .mm-website-link { word-break: break-all; } /* ── Scheduler modal (mm-sched-*) — centered, bottom-sheet on narrow widths. ── */ /* border-box across the modal so width:100% inputs/buttons count their own padding + border (the template ships no global reset). Without it the fields render 26px wider than their column and force a horizontal scrollbar at the foot of the body. */ .mm-sched, .mm-sched * { box-sizing: border-box; } .mm-sched-overlay { position: fixed; inset: 0; z-index: 500; /* topmost: above the drawer (400) and the --z-top band (300) — chips at 300 were intercepting modal clicks (T26) */ background: rgba(18,28,33,.55); display: flex; align-items: flex-end; justify-content: center; } @media (width > 40rem) { .mm-sched-overlay { align-items: center; padding: 24px; } } .mm-sched { background: var(--card-bg-color, #fff); width: 100%; max-width: 460px; max-height: 94vh; display: flex; flex-direction: column; border-radius: 18px 18px 0 0; overflow: hidden; animation: mmSheetUp .28s cubic-bezier(.2,.7,.2,1); } @media (width > 40rem) { .mm-sched { border-radius: 16px; } } @keyframes mmSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .mm-sched-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid #eef1f3; } .mm-sched-head h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--brand-color, #1f7995); } .mm-sched-head .sub { font-size: 13px; color: var(--text-dark, #333); margin-top: 2px; } .mm-sched-close { border: none; background: #f1f3f4; width: 32px; height: 32px; border-radius: 50%; font-size: 14px; color: #6b7280; cursor: pointer; flex: 0 0 auto; } .mm-sched-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px; } .mm-sched-foot { padding: 14px 20px; border-top: 1px solid #eef1f3; display: flex; gap: 10px; } .mm-sched .mm-label { font-size: 13px; font-weight: 700; color: var(--text-dark, #333); margin: 0 0 10px; } .mm-days { display: flex; gap: 8px; margin-bottom: 20px; } .mm-day { flex: 1; padding: 9px 6px; border-radius: 11px; border: 1px solid #dfe4e6; background: #fff; color: #24303a; cursor: pointer; font-family: inherit; text-align: center; } .mm-day small { display: block; font-size: 11px; opacity: .7; font-weight: 600; } .mm-day b { font-size: 15px; font-weight: 700; } .mm-day.is-sel { background: var(--brand-color, #1f7995); border-color: var(--brand-color, #1f7995); color: #fff; } .mm-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mm-slot { padding: 12px 6px; border-radius: 10px; border: 1px solid #dfe4e6; background: #fff; color: #24303a; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; } .mm-slot.is-sel { background: var(--brand-color, #1f7995); border-color: var(--brand-color, #1f7995); color: #fff; } .mm-slot-note { margin-top: 12px; font-size: 12px; color: var(--text-dark, #333); opacity: .85; line-height: 1.45; } .mm-slot-warn { margin-top: 10px; background: #fdeceb; border: 1px solid #f5c9c5; color: #c0392b; font-size: 12px; font-weight: 600; padding: 8px 11px; border-radius: 9px; } .mm-sched-divider { height: 1px; background: #eef1f3; margin: 20px 0 18px; } .mm-fieldset { display: flex; flex-direction: column; gap: 13px; } .mm-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-dark, #333); margin-bottom: 5px; } .mm-field input, .mm-field textarea { width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid #d7dbdd; font-size: 14px; font-family: inherit; color: #24303a; background: #fff; } .mm-field textarea { min-height: 70px; resize: vertical; } .mm-field input:focus, .mm-field textarea:focus { outline: none; border-color: var(--brand-color, #1f7995); } .mm-field.err input, .mm-field.err textarea { border-color: #d14343; } .mm-field .msg { color: #d14343; font-size: 11px; margin-top: 4px; } .mm-done { text-align: center; padding: 8px 4px 0; } .mm-done .tick { width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--brand-color, #1f7995) 12%, #fff); color: var(--brand-color, #1f7995); display: grid; place-items: center; margin: 0 auto 14px; font-size: 26px; } .mm-done h3 { margin: 0; font-size: 19px; color: var(--brand-color, #1f7995); } .mm-done p { font-size: 13px; color: var(--text-dark, #333); margin: 8px 0 18px; line-height: 1.5; } .mm-summary { text-align: left; border: 1px solid #e6e8ea; border-radius: 14px; overflow: hidden; } .mm-summary div { display: flex; justify-content: space-between; padding: 11px 14px; font-size: 13px; border-bottom: 1px solid #eef1f3; } .mm-summary div:last-child { border-bottom: none; } .mm-summary span { color: var(--text-dark, #333); } .mm-summary b { color: #24303a; } /* ── My Meetings list (mm-cal-*) ── */ .mm-cal-head { margin: 6px 0 20px; } .mm-cal-head h2 { margin: 0 0 4px; font-size: var(--text-size-400); font-weight: 800; color: var(--brand-color, #1f7995); } .mm-cal-head p { margin: 0; font-size: 14px; color: var(--text-dark, #333); } /* Full content width: the row carries a booth line, the attendee's note and 5 add-to-calendar buttons — a 760px cap wrapped the calendar buttons onto a 2nd line. */ .mm-cal-list { display: flex; flex-direction: column; gap: 12px; } .mm-cal-item { display: flex; align-items: center; gap: 16px; background: var(--card-bg-color, #fff); border: 1px solid color-mix(in srgb, var(--brand-color, #1f7995) 25%, white 75%); border-left: 5px solid var(--brand-color, #1f7995); border-radius: 10px; padding: 16px 18px; box-shadow: 0 2px 5px rgba(30,70,85,.08); } .mm-cal-item .ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 9px; background: color-mix(in srgb, var(--brand-color, #1f7995) 12%, #fff); color: var(--brand-color, #1f7995); display: grid; place-items: center; font-size: 20px; } .mm-cal-item .body { flex: 1; min-width: 0; } .mm-cal-item .body b { font-size: 17px; font-weight: 800; color: var(--brand-color, #1f7995); } .mm-cal-item .body small { display: block; font-size: 14px; color: var(--text-dark, #333); margin-top: 3px; } /* The attendee's own "Notes/Reason for Meeting" text, echoed back on the row. */ .mm-cal-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--text-dark, #333); } .mm-cal-note i { flex: 0 0 auto; margin-top: 2px; color: color-mix(in srgb, var(--brand-color, #1f7995) 60%, #666 40%); } .mm-cal-note span { min-width: 0; overflow-wrap: break-word; } .mm-cal-cancel { flex: 0 0 auto; padding: 8px 14px; border-radius: 7px; border: 1px solid #e2b6b6; background: #fff; color: #c0392b; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; } /* Phones: the 46px badge + inline Cancel squeezed the body column so hard that the add-to-calendar pills landed one-per-line. Drop the (decorative, identical-on-every-row) badge, give the body the full card width and move Cancel to its own right-aligned row. */ @media (max-width: 640px) { .mm-cal-item { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; padding: 14px 16px; } .mm-cal-item .ico { display: none; } .mm-cal-item .body { flex: 1 1 100%; } .mm-cal-cancel { margin-left: auto; } } .mm-cal-wrap .mm-empty { background: var(--card-bg-color, #fff); border: 1px solid #d9e2e4; border-radius: 12px; padding: 40px; max-width: 560px; opacity: 1; } .mm-cal-wrap .mm-empty i { font-size: 40px; color: color-mix(in srgb, var(--brand-color, #1f7995) 35%, white 65%); } .mm-cal-wrap .mm-empty p { margin: 14px 0 0; font-size: 16px; } /* ── Add-to-Calendar buttons (self-hosted; My Meetings rows + the Request-sent modal) ── T57: label line + centered provider-link line (was one wrapping inline row). */ .mm-atc { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; text-align: center; } .mm-atc-label { font-size: 12px; font-weight: 700; color: var(--text-dark, #555); display: inline-flex; align-items: center; gap: 5px; } .mm-atc-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .mm-atc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--brand-color, #1f7995) 30%, white 70%); background: var(--card-bg-color, #fff); color: var(--brand-color, #1f7995); font-size: 12px; font-weight: 600; text-decoration: none; line-height: 1; } .mm-atc-btn:hover { background: color-mix(in srgb, var(--brand-color, #1f7995) 10%, #fff); } .mm-atc-btn i { font-size: 13px; } /* ── All Booths — single-column rows with inline tier / "Meetings" chips ── */ /* (legend retired — the key/filter chip bar took its job, T4/T20) */ /* A–Z section letter: allgrid renders it at 4rem (kiosk); the Claude Design list uses a calmer 1.9rem so the letter doesn't tower over the row it labels. */ .alpha-section .section-label h2 { font-size: 1.9rem; top: 8px; } /* Force the row layout at ALL widths (mobile-first — not allgrid's 350px container flip). allgrid places .header/.section via named grid areas (art/content); we must re-declare those areas here or the children mis-place when we change the column template. */ .alpha-section .section-list { grid-template-columns: 1fr !important; } .alpha-section .card.company { display: grid; grid-template-columns: 110px 1fr; grid-template-rows: auto; grid-template-areas: "art content"; align-items: center; min-height: 90px; position: relative; } .alpha-section .card.company .header { grid-area: art; align-self: center; padding: 6px 10px; } /* Interim logo normalization: until each raw exhibitor logo is reformatted to the 400×300 house canvas, letterbox every one into a SINGLE fixed footprint (object-fit: contain, centered). Keeps the left column uniform regardless of source aspect ratio and stops wide (3–5:1 banner) logos from spilling out of the 110px art column into the name. Square/tall logos fit by height, wide logos fit by width — no distortion. */ .alpha-section .card.company .header img { width: 100%; height: 60px; object-fit: contain; object-position: center; aspect-ratio: auto; max-height: none; } .alpha-section .card.company .section { grid-area: content; text-align: left; align-self: center; padding: 0 60px 0 6px; font-size: var(--text-size-200); font-weight: 600; } .alpha-section .card.company .section p { margin: 0; } /* The name is a link; allgrid styles .card .section a at text-size-700 (a 72px+ rule meant for the invisible action-arrow) — pin the row name link back to the row's own size. */ .alpha-section .card.company .section a { --_font-size: var(--text-size-200); font-size: var(--text-size-200); } .mm-row-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; } .mm-tier { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; border: 1px solid; } .mm-tier.gold { background-image: linear-gradient(to bottom right, #fff8dc, #ffd700 30%, #e6c200 70%, #fff8dc); color: #3a2c00; border-color: #b8860b; } .mm-tier.silver { background-image: linear-gradient(to bottom right, #ffffff, #e5e4e2 40%, #c9c9c9 80%, #f5f5f5); color: #2e2e2e; border-color: #a0a0a0; } .mm-tier.platinum { background-image: linear-gradient(to bottom right, #eaf6ff, #cfe6f5 40%, #a9c9de 85%, #eaf6ff); color: #17303f; border-color: #7fa8c4; } /* #44 — partner designation bubble beside the tier bubble on All Booths rows; echoes the partner filter chip's brand tint + accent flag. */ .mm-partner-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--brand-color, #1f7995) 45%, #fff); background: color-mix(in srgb, var(--brand-color, #1f7995) 10%, #fff); color: var(--brand-color, #1f7995); } .mm-partner-tag i { color: var(--mm-accent, #f2b705); } .mm-meets { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--brand-color, #1f7995) 10%, #fff); color: var(--brand-color, #1f7995); border: 1px solid color-mix(in srgb, var(--brand-color, #1f7995) 22%, #fff); } /* Favorite star = the sole right-edge control on a row; vertically centered (thumb-friendly). 34px box to match the .mm-cal-btn beside it; the shared fill rule above makes the whole box the toggle, so bump the glyph to the calendar button's size too. */ .alpha-section .card.company .favorite { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); margin: 0; width: 34px; height: 34px; border-radius: 4px; } .alpha-section .card.company .favorite > button, .alpha-section .card.company .favorite > a { font-size: 15px; } /* ── Display & Layout panel (dev tuning surface; gated by a portal toggle) ── */ /* z-index 80/81 keeps the dev FAB/panel BELOW the nav drawer (100) + its backdrop (90), so opening the hamburger tucks them away; still above page content. */ /* Provide Feedback FAB (labeled pill, every screen). .raised clears the Display-panel FAB; z-index 79 keeps it under the open Display panel (81) and the drawer (100). */ .mm-feedback-fab { position: fixed; right: 8px; bottom: 12px; z-index: 79; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: var(--brand-color, #1f7995); color: #fff; font-weight: var(--mm-label-weight, 700); font-size: 14px; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.28); } .mm-feedback-fab:hover { filter: brightness(1.08); color: #fff; } .mm-feedback-fab.mm-fab-left { left: 8px; right: auto; } /* Footer Layout: feedback left */ @media (max-width: 640px) { .mm-feedback-fab { padding: 10px 14px; font-size: 13px; } } /* Color swatch control (page background) — full-width so it reads as a first-class knob. */ /* ── Booth detail, phone widths (#25): allgrid draws a full-width rule above the content area (border-block-start) that visually collides with the logo box — drop it; the grid's row-gap already separates logo and content. Desktop keeps its vertical divider (border-inline-start, >48rem) untouched. ── */ @media (width <= 48rem) { .modal-grid .content-area { border-block-start: none; padding-block-start: 4px; } } /* ── Partner-status badge (booth detail) — Design wizard "Partner Badges" maps a status value (e.g. PREMIER PARTNER) to an uploaded image; text renders when no badge is configured. Sized to read like the 2025 signage badge, never dominate. */ .mm-partner-badge { display: block; margin-top: 6px; } .mm-partner-badge img { max-width: 220px; max-height: 120px; width: auto; height: auto; display: block; } /* ── Leaderboard (/leaderboard) — public rankings, token-driven so it re-skins with the portal palette. Plain document flow (like .mm-cal-wrap) — NOT .slideshow-grid, whose viewport-sized grid rows would gap every child a screen apart. Rows are flat flex bars so long lists stay scannable on kiosk and phone; top-3 rank chips take the accent treatment. */ .mm-lb-wrap { display: block; padding-bottom: 30px; } .mm-lb-intro { margin: 4px 0 14px; color: var(--text-dark, #333); opacity: .85; } .mm-lb-panel { background: var(--card-bg-color, #fff); border: 1px solid color-mix(in srgb, var(--brand-color, #1f7995) 30%, transparent); border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.06); padding: 14px 16px 8px; margin-bottom: 18px; } .mm-lb-head h2 { margin: 0 0 10px; color: var(--brand-color, #1f7995); font-size: 1.15em; display: flex; align-items: center; gap: 8px; } .mm-lb-list { list-style: none; margin: 0; padding: 0; } .mm-lb-row { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-top: 1px solid color-mix(in srgb, var(--brand-color, #1f7995) 12%, transparent); } .mm-lb-row:first-child { border-top: 0; } .mm-lb-rank { flex: 0 0 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--brand-color, #1f7995) 12%, #fff); color: var(--brand-color, #1f7995); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: .85em; } .mm-lb-row:nth-child(1) .mm-lb-rank { background: var(--mm-accent, #f2b705); color: #fff; } .mm-lb-row:nth-child(2) .mm-lb-rank { background: #b8c2cc; color: #fff; } .mm-lb-row:nth-child(3) .mm-lb-rank { background: #c9926b; color: #fff; } .mm-lb-art { flex: 0 0 46px; } .mm-lb-art img { width: 46px; height: 34px; object-fit: contain; display: block; } .mm-lb-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .mm-lb-main .mm-lb-name { font-weight: 600; color: var(--brand-color, #1f7995); text-decoration: none; font-size: 1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mm-lb-main small { color: var(--text-dark, #333); opacity: .7; } .mm-lb-stats { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .mm-lb-pill { color: var(--text-dark, #333); opacity: .8; font-size: .85em; white-space: nowrap; } .mm-lb-pill i { color: var(--brand-color, #1f7995); margin-right: 2px; } .mm-lb-total { min-width: 40px; text-align: center; background: var(--brand-color, #1f7995); color: #fff; border-radius: 14px; padding: 3px 10px; font-size: .9em; } @media (max-width: 560px) { .mm-lb-pill { display: none; } /* phones: rank, name, total */ .mm-lb-art { display: none; } } /* ── Combined floor-map button (#85/#86) ────────────────────────────────────── One button that opens the show's own map with every favourited booth, or every booth you are meeting, highlighted at once. #89/#90: on its own row at the LEFT, directly above the filter chips, and wearing the chip look (.mm-chip is on the element) so it reads as an action rather than as part of the A–Z index. */ .mm-map-row { display: flex; justify-content: flex-start; margin: 0 0 .6em; position: relative; z-index: var(--z-top, 300); /* same stacking as the chip bar it sits on */ } .mm-cal-head .mm-map-row { margin-top: .75em; } .mm-map-btn { white-space: nowrap; font-family: inherit; } a.mm-chip { text-decoration: none; } /* #98 — a floor-map row in the menu drawer is a