/* Bellhop design-system custom properties, recovered verbatim from the :root block captured in snapshots/page-0/0001-navigation.html of the reference rrweb trace. The component stylesheets reference these tokens heavily (z-index, color, border-radius, etc.); without them var() falls back to unset and stacking order / colors break. */ /* Stencil pre-hydration unhide override. * * The hyatt design-system CSS hides every `be-*` custom element with * `visibility: hidden` until Stencil's runtime sets `bellhop-hydrated=""` on * the host. We render ``, ``, etc. directly in JSX * without the Stencil runtime, so the attribute never gets set and every * custom element stays invisible. This rule unhides all of them globally. * * Selector list mirrors the original Stencil hide rule. If a new `be-*` * element appears in the JSX, append it here. Specificity matches the * original (single tag selector) so this works without `!important`. */ be-datepicker, be-dropdown-panel, be-alert, be-stepper, be-badge-promo, be-benefit, be-checkbox-group, be-header, be-icon-social, be-input, be-link, be-popover, be-radio-group, be-select, be-textarea, be-toggle, be-app-store, be-apple-wallet, be-badge-status, be-brand-explorer, be-brand-flag, be-brand-square, be-carousel-button, be-certification, be-checkbox, be-currency, be-date, be-distance, be-logo-corporate, be-logo-footer, be-logo-inclusive, be-logo-slh, be-logo-world, be-navigate, be-number, be-pagination, be-payment-card, be-percent, be-pill-filter, be-placeholder, be-play-store, be-radio, be-rating, be-separator, be-tab, be-tag, be-telephone, be-time, be-calendar, be-logo-header, be-button, be-fieldset, be-button-icon, be-label, be-icon { /* !important needed because the Stencil hide rule lives in * search-results.css (and the per-page CSS for each other page), which * loads AFTER bellhop-tokens.css via usePageStyle and would otherwise win * at equal specificity. The original hide rule does NOT use !important so * this is safe and minimal. */ visibility: visible !important; } /* ------------------------------------------------------------------ */ /* Light-DOM shims for Bellhop web-component shadow styles */ /* ------------------------------------------------------------------ */ /* The Stencil runtime never loads, so shadow-DOM adopted stylesheets */ /* for be-icon, be-rating, and be-carousel-button are absent. Rules */ /* below are translated from :host selectors found in rrweb event */ /* batches (page-0/batch-0001 styleId 1, page-1/batch-0002 styleId 2,*/ /* page-1/batch-0013 styleId 6) into light-DOM equivalents. */ /* ------------------------------------------------------------------ */ /* be-icon — shadow :host { display:inline-block; vertical-align:bottom; } + :host([size="N"]) { height: Npx; } */ be-icon { display: inline-block; vertical-align: bottom; } be-icon svg { fill: currentColor; width: 24px; height: 24px; } be-icon[size="16"], be-icon[size="16"] svg { height: 16px; width: 16px; } be-icon[size="20"], be-icon[size="20"] svg { height: 20px; width: 20px; } be-icon[size="22"], be-icon[size="22"] svg { height: 22px; width: 22px; } be-icon[size="24"], be-icon[size="24"] svg { height: 24px; width: 24px; } be-icon[size="32"], be-icon[size="32"] svg { height: 32px; width: 32px; } be-icon[size="48"], be-icon[size="48"] svg { height: 48px; width: 48px; } be-icon[size="64"], be-icon[size="64"] svg { height: 64px; width: 64px; } be-icon[size="96"], be-icon[size="96"] svg { height: 96px; width: 96px; } be-icon .flip { transform: scaleX(-1); } /* be-rating — shadow :host { display:flex; } The shadow DOM renders star tags from the Hyatt CDN; since we lack the shadow root we synthesize stars via ::before using the rating attribute. The label is rendered in light DOM already. */ be-rating { display: flex; align-items: center; } be-rating::before { color: #0072ce; font-size: 16px; letter-spacing: 2px; line-height: 1; margin-inline-end: 4px; } /* Generate star content from rating attribute */ be-rating[rating="1"]::before { content: "\2605\2606\2606\2606\2606"; } be-rating[rating="2"]::before { content: "\2605\2605\2606\2606\2606"; } be-rating[rating="3"]::before { content: "\2605\2605\2605\2606\2606"; } be-rating[rating="4"]::before { content: "\2605\2605\2605\2605\2606"; } be-rating[rating="5"]::before { content: "\2605\2605\2605\2605\2605"; } /* be-carousel-button — shadow :host { display:inline-block; height:32px; } The shadow DOM renders a