._root_1nfwo_1 { --button-bg: var(--hs-field); --button-bg-hover: var(--hs-hover); --button-border: var(--hs-control-border); --button-fg: var(--hs-ink); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--hs-space-2); border: var(--hs-line-width) solid var(--button-border); border-radius: var(--hs-radius-md); background: var(--button-bg); color: var(--button-fg); font: inherit; font-size: var(--hs-text-sm); font-weight: var(--hs-font-weight-semibold); line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color var(--hs-transition-fast-effects), border-color var(--hs-transition-fast-effects), color var(--hs-transition-fast-effects), transform var(--hs-transition-fast-spatial); } ._root_1nfwo_1:hover:not(:disabled) { background: var(--button-bg-hover); } ._root_1nfwo_1:active:not(:disabled) { /* Technical geometry: preserves the pressed-state affordance without changing layout. */ transform: translateY(1px); } ._root_1nfwo_1:focus-visible { outline: var(--hs-focus-ring-width) solid var(--hs-focus); outline-offset: var(--hs-focus-ring-width); } ._root_1nfwo_1[data-size="sm"] { height: var(--hs-control-height-sm); padding: 0 var(--hs-space-3); font-size: var(--hs-text-xs); } ._root_1nfwo_1[data-size="md"] { height: var(--hs-control-height-md); padding: 0 var(--hs-space-4); font-size: var(--hs-text-sm); } ._root_1nfwo_1[data-size="lg"] { height: var(--hs-control-height-lg); padding: 0 var(--hs-space-5); font-size: var(--hs-text-md); } ._root_1nfwo_1[data-size="dense"] { height: var(--hs-form-field-size-dense-height); padding: 0 var(--hs-form-field-size-dense-padding-x); font-size: var(--hs-form-field-size-dense-font-size); } ._root_1nfwo_1:disabled { opacity: 0.6; cursor: not-allowed; } ._label_1nfwo_71 { display: inline-flex; align-items: center; } ._icon_1nfwo_76 { display: inline-flex; align-items: center; justify-content: center; color: currentColor; } ._icon_1nfwo_76 svg { display: block; } ._icon_1nfwo_76 svg[fill="none"] { fill: none; stroke: currentColor; } ._icon_1nfwo_76 svg:not([fill="none"]) { fill: currentColor; } ._fullWidth_1nfwo_96 { width: 100%; } ._loading_1nfwo_100 { position: relative; } ._spinner_1nfwo_104 { width: var(--hs-size-icon-sm); height: var(--hs-size-icon-sm); border: var(--hs-line-width) solid currentColor; border-right-color: transparent; border-radius: var(--hs-radius-pill); animation: _buttonSpin_1nfwo_1 0.8s linear infinite; } ._root_1nfwo_1[data-variant="default"] { --button-bg: var(--hs-field); --button-bg-hover: var(--hs-soft); --button-border: var(--hs-control-border); } ._root_1nfwo_1[data-variant="secondary"] { --button-bg: var(--hs-soft); --button-bg-hover: var(--hs-hover); --button-border: var(--hs-line-soft); } ._root_1nfwo_1[data-variant="outline"] { min-width: var(--hs-button-min-width-outline); --button-bg: transparent; --button-bg-hover: var(--hs-hover); --button-border: var(--hs-control-border); } ._root_1nfwo_1[data-variant="primary"] { min-width: var(--hs-button-min-width-primary); --button-bg: var(--hs-ink); --button-bg-hover: var(--hs-action-80); --button-border: var(--hs-ink); --button-fg: var(--hs-bg); } ._root_1nfwo_1[data-variant="ghost"] { --button-bg: transparent; --button-bg-hover: var(--hs-hover); --button-border: transparent; } ._root_1nfwo_1[data-variant="danger"] { --button-bg: transparent; --button-bg-hover: var(--hs-status-danger-soft); --button-border: var(--hs-status-danger); --button-fg: var(--hs-status-danger); } ._root_1nfwo_1[data-variant="link"] { height: auto; min-width: 0; padding: 0; --button-bg: transparent; --button-bg-hover: transparent; --button-border: transparent; border-radius: 0; color: var(--button-fg); text-decoration: underline; /* Technical geometry: keeps link underline spacing visually consistent with adjacent text controls. */ text-underline-offset: 3px; } @keyframes _buttonSpin_1nfwo_1 { to { transform: rotate(360deg); } } /* ========================================================= HMS UI KIT COLOR TOKENS ONLY Palette: charcoal / indigo / teal / grey / dust No khaki, no moss, no foggy green. ========================================================= */ :root { /* Raw palette: Charcoal */ --hs-color-charcoal-950: #000000; --hs-color-charcoal-900: #090909; --hs-color-charcoal-850: #111111; --hs-color-charcoal-800: #232323; --hs-color-charcoal-700: #2c2c2c; --hs-color-charcoal-600: #353535; /* Raw palette: Japanese Indigo */ --hs-color-indigo-900: #16303d; --hs-color-indigo-850: #193746; --hs-color-indigo-800: #1c3e4e; --hs-color-indigo-700: #224d5f; --hs-color-indigo-650: #255468; --hs-color-indigo-600: #285c70; /* Raw palette: Steel Teal */ --hs-color-teal-700: #3f5a66; --hs-color-teal-650: #486675; --hs-color-teal-600: #517380; --hs-color-teal-500: #60899b; --hs-color-teal-450: #6692a4; --hs-color-teal-400: #6c9bad; /* Raw palette: Mid Grey */ --hs-color-grey-700: #757575; --hs-color-grey-650: #7e7e7e; --hs-color-grey-600: #808080; --hs-color-grey-500: #989898; --hs-color-grey-450: #a1a1a1; --hs-color-grey-400: #aaaaaa; /* Raw palette: Star Dust */ --hs-color-dust-300: #cec4c8; --hs-color-dust-250: #d8d3d1; --hs-color-dust-200: #e2ddda; --hs-color-dust-150: #f2edea; --hs-color-dust-100: #f9f3f1; --hs-color-dust-50: #fefaf8; /* Brand accent */ --hs-color-accent-500: #0317fc; --hs-color-accent-600: #0214d4; --hs-color-accent-400: #3d4dff; } :root, [data-theme="dark"] { color-scheme: dark; /* Core semantic colors */ --hs-bg: var(--hs-color-charcoal-950); --hs-surface: var(--hs-color-charcoal-850); --hs-soft: var(--hs-color-charcoal-800); --hs-line-soft: rgba(170, 170, 170, 0.14); --hs-line: rgba(170, 170, 170, 0.26); --hs-ink: var(--hs-color-dust-50); --hs-muted: var(--hs-color-grey-400); --hs-faint: var(--hs-color-grey-600); --hs-control-border: rgba(170, 170, 170, 0.34); /* Accent colors */ --hs-accent: var(--hs-color-accent-500); --hs-accent-hover: var(--hs-color-accent-400); --hs-accent-ink: var(--hs-color-dust-50); /* State colors without khaki */ --hs-success: var(--hs-color-teal-450); --hs-success-soft: rgba(102, 146, 164, 0.16); --hs-warning: var(--hs-color-indigo-600); --hs-warning-soft: rgba(40, 92, 112, 0.18); --hs-danger: #ef4444; --hs-danger-soft: rgba(239, 68, 68, 0.14); /* Skeleton colors */ --hs-skeleton-bg: rgba(170, 170, 170, 0.12); --hs-skeleton-highlight: rgba(170, 170, 170, 0.22); /* Legacy aliases */ --hs-field: var(--hs-surface); --hs-overlay: rgba(0, 0, 0, 0.72); --hs-hover: rgba(170, 170, 170, 0.08); --hs-selected: var(--hs-success-soft); --hs-focus: rgba(3, 23, 252, 0.38); --hs-disabled: rgba(170, 170, 170, 0.34); --hs-ink-muted: var(--hs-muted); --hs-text-link: var(--hs-accent); --hs-neutral-10: var(--hs-color-charcoal-950); --hs-neutral-20: var(--hs-color-charcoal-850); --hs-neutral-40: var(--hs-color-charcoal-700); --hs-neutral-60: var(--hs-color-grey-600); --hs-neutral-90: var(--hs-ink); --hs-action-10: var(--hs-color-dust-150); --hs-action-20: rgba(3, 23, 252, 0.16); --hs-action-40: rgba(3, 23, 252, 0.24); --hs-action-60: var(--hs-accent); --hs-action-80: var(--hs-color-accent-600); --hs-ruby-9: var(--hs-accent); --hs-ruby-10: var(--hs-accent-hover); --hs-ruby-11: var(--hs-accent); --hs-ruby-12: var(--hs-surface); --hs-status-success: var(--hs-success); --hs-status-warning: var(--hs-warning); --hs-status-danger: var(--hs-danger); --hs-status-danger-soft: var(--hs-danger-soft); } [data-theme="light"] { color-scheme: light; --hs-bg: #e3e3e3; --hs-surface: #f2f2f2; --hs-soft: #8f8f8f; --hs-line-soft: #d6d6d6; --hs-line: #808080; --hs-ink: #212121; --hs-muted: #333333; --hs-faint: #808080; --hs-control-border: #c2c2c2; --hs-accent: var(--hs-color-accent-500); --hs-accent-hover: var(--hs-color-accent-400); --hs-accent-ink: #ffffff; --hs-success: #000b9e; --hs-success-soft: #ffdd00; --hs-warning: #000b9e; --hs-warning-soft: #00638a; --hs-danger: #ef4444; --hs-danger-soft: rgba(239, 68, 68, 0.14); --hs-skeleton-bg: rgba(35, 35, 35, 0.06); --hs-skeleton-highlight: rgba(35, 35, 35, 0.1); --hs-field: #f2f2f2; --hs-overlay: #bfbfbf; --hs-hover: rgba(170, 170, 170, 0.08); --hs-selected: #ffffff; --hs-focus: rgba(3, 23, 252, 0.42); --hs-disabled: rgba(126, 126, 126, 0.34); --hs-ink-muted: var(--hs-muted); --hs-text-link: var(--hs-accent); --hs-neutral-10: var(--hs-bg); --hs-neutral-20: var(--hs-surface); --hs-neutral-40: var(--hs-soft); --hs-neutral-60: var(--hs-faint); --hs-neutral-90: var(--hs-ink); --hs-action-10: var(--hs-surface); --hs-action-20: rgba(3, 23, 252, 0.12); --hs-action-40: rgba(3, 23, 252, 0.2); --hs-action-60: var(--hs-accent); --hs-action-80: var(--hs-color-accent-600); --hs-ruby-9: var(--hs-accent); --hs-ruby-10: var(--hs-accent-hover); --hs-ruby-11: var(--hs-accent); --hs-ruby-12: var(--hs-ink); --hs-status-success: var(--hs-success); --hs-status-warning: var(--hs-warning); --hs-status-danger: #ef4444; --hs-status-danger-soft: var(--hs-danger-soft); } :root { /* Reference ramps — semantic use comes from [data-theme] blocks above */ /* Radix Ruby palette (reference steps 1–8; 9–12 mapped in theme) */ --hs-ruby-1: #fffcfd; --hs-ruby-2: #fff7f8; --hs-ruby-3: #feeaed; --hs-ruby-4: #ffdce1; --hs-ruby-5: #ffced6; --hs-ruby-6: #f8bfc8; --hs-ruby-7: #efacb8; --hs-ruby-8: #e592a3; --hs-ruby-a1: #ff005503; --hs-ruby-a2: #ff002008; --hs-ruby-a3: #f3002515; --hs-ruby-a4: #ff002523; --hs-ruby-a5: #ff002a31; --hs-ruby-a6: #e4002440; --hs-ruby-a7: #ce002553; --hs-ruby-a8: #c300286d; --hs-ruby-a9: #db002cb9; --hs-ruby-a10: #d2002cc4; --hs-ruby-a11: #c10030db; --hs-ruby-a12: #550016e8; --hs-ruby-dark-1: #191113; --hs-ruby-dark-2: #1e1517; --hs-ruby-dark-3: #3a141e; --hs-ruby-dark-4: #4e1325; --hs-ruby-dark-5: #5e1a2e; --hs-ruby-dark-6: #6f2539; --hs-ruby-dark-7: #883447; --hs-ruby-dark-8: #b3445a; --hs-ruby-dark-9: #e54666; --hs-ruby-dark-10: #ec5a72; --hs-ruby-dark-11: #ff949d; --hs-ruby-dark-12: #fed2e1; --hs-ruby-dark-a1: #f4124a09; --hs-ruby-dark-a2: #fe5a7f0e; --hs-ruby-dark-a3: #ff235d2c; --hs-ruby-dark-a4: #fd195e42; --hs-ruby-dark-a5: #fe2d6b53; --hs-ruby-dark-a6: #ff447665; --hs-ruby-dark-a7: #ff577d80; --hs-ruby-dark-a8: #ff5c7cae; --hs-ruby-dark-a9: #fe4c70e4; --hs-ruby-dark-a10: #ff617beb; --hs-ruby-dark-a11: #ff949d; --hs-ruby-dark-a12: #ffd3e2fe; /* Legacy alias */ --hs-ink-muted: var(--hs-muted); /* Category tags — pastel production palette */ --hs-tag-gray-bg: #ecece2; --hs-tag-gray-ink: #41453a; --hs-tag-gray-border: #d8d9ca; --hs-tag-cool-gray-bg: #e7ebec; --hs-tag-cool-gray-ink: #374248; --hs-tag-cool-gray-border: #d2dadd; --hs-tag-warm-gray-bg: #eee7e2; --hs-tag-warm-gray-ink: #4a3f3a; --hs-tag-warm-gray-border: #ddd2ca; --hs-tag-red-bg: #f8dddd; --hs-tag-red-ink: #8a2f32; --hs-tag-red-border: #ecc4c4; --hs-tag-orange-bg: #fae8d4; --hs-tag-orange-ink: #8a5528; --hs-tag-orange-border: #ecd4b4; --hs-tag-magenta-bg: #f5dfea; --hs-tag-magenta-ink: #843456; --hs-tag-magenta-border: #e8c5d6; --hs-tag-purple-bg: #e9e1f4; --hs-tag-purple-ink: #5f477f; --hs-tag-purple-border: #d6c7e9; --hs-tag-blue-bg: #dfe8f3; --hs-tag-blue-ink: #315d8e; --hs-tag-blue-border: #c8d7e8; --hs-tag-cyan-bg: #dcecef; --hs-tag-cyan-ink: #326b75; --hs-tag-cyan-border: #c4dfe4; --hs-tag-teal-bg: #d9ece8; --hs-tag-teal-ink: #2f6b60; --hs-tag-teal-border: #bddbd4; --hs-tag-green-bg: #dcebd8; --hs-tag-green-ink: #3f6f3a; --hs-tag-green-border: #c5dbc0; } /* * Shared grid system — single source for column count and breakpoints. * Grid composition reads --hs-grid-columns. * * Breakpoints (Carbon-aligned): * default 4 columns < 42rem * md 8 columns >= 42rem * lg 16 columns >= 66rem */ :root { --hs-grid-columns: 4; } /* @media cannot use var() — values must match --hs-breakpoint-grid-md / --hs-breakpoint-grid-lg */ @media (min-width: 42rem) { :root { --hs-grid-columns: 8; } } @media (min-width: 66rem) { :root { --hs-grid-columns: 16; } } /* HMS UI Kit — metrics contract entrypoint (spacing, sizing, typography, motion, layout). Colors live in hs-ui-kit-tokens.css. Token bodies live in ./metrics/*.css — keep import order stable. */ /* Split from metrics.css — keep import order in ../metrics.css stable. */ :root { /* Lines — one unified line width for borders, dividers, separators */ --hs-line-width: 1px; --hs-line-color: var(--hs-line-soft); --hs-line-dash-length-ref: 2; --hs-line-dash-gap-ref: 4; --hs-line-dash-length: 2px; --hs-line-dash-gap: 4px; --hs-line-dash-period: calc(var(--hs-line-dash-length) + var(--hs-line-dash-gap)); /* Line hierarchy (see design-principles §7): --hs-line — outer shell / strong contour (modal, menu, segmented control) --hs-line-color — hairline dividers (alias → --hs-line-soft) --hs-control-border — form field chrome */ /* Motion */ --hs-transition-fast-effects: 150ms cubic-bezier(0.31, 0.94, 0.34, 1); } /* Split from metrics.css — keep import order in ../metrics.css stable. */ :root { --hs-transition-fast-spatial: 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9); /* === Spacing scale — 4pt grid + Carbon 01–08 (src/docs/spacing-contract.md) === */ --hs-space-1: 4px; --hs-space-2: 8px; --hs-space-3: 12px; --hs-space-4: 16px; --hs-space-5: 24px; --hs-space-6: 32px; --hs-space-7: 48px; /* Inset — padding inside a component/surface */ --hs-inset-xs: var(--hs-space-1); --hs-inset-sm: var(--hs-space-2); --hs-inset-md: var(--hs-space-3); --hs-inset-lg: var(--hs-space-4); --hs-inset-xl: var(--hs-space-5); /* Gap — between child elements or between sibling components (parent-owned) */ --hs-gap-xs: var(--hs-space-1); --hs-gap-sm: var(--hs-space-2); --hs-gap-md: var(--hs-space-3); --hs-gap-lg: var(--hs-space-4); --hs-gap-xl: var(--hs-space-5); /* Page / section */ --hs-page-inset: var(--hs-inset-xl); --hs-page-gap: var(--hs-gap-xl); --hs-section-inset: var(--hs-inset-lg); --hs-section-gap: var(--hs-gap-lg); --hs-toolbar-gap: var(--hs-gap-md); /* Page header — one token per edge role (do not mix --hs-space-* on PageHeader) */ --hs-page-header-gap: var(--hs-space-4); --hs-page-header-block-end: var(--hs-space-5); --hs-page-header-block-end-compact: var(--hs-space-2); --hs-page-header-description-gap: var(--hs-space-2); /* Card */ --hs-card-inset: var(--hs-inset-lg); --hs-card-gap: var(--hs-gap-md); --hs-card-header-gap: var(--hs-gap-sm); --hs-card-body-gap: var(--hs-gap-md); --hs-card-footer-gap: var(--hs-gap-sm); /* Modal */ --hs-modal-backdrop-inset: var(--hs-inset-xl); --hs-modal-inset: var(--hs-inset-lg); --hs-modal-inset-compact: var(--hs-inset-md); --hs-modal-gap: var(--hs-gap-lg); --hs-modal-header-gap: var(--hs-gap-md); --hs-modal-body-gap: var(--hs-gap-lg); --hs-modal-footer-gap: var(--hs-gap-sm); /* Form */ --hs-form-gap: var(--hs-gap-md); --hs-form-section-gap: var(--hs-gap-lg); --hs-form-field-gap: var(--hs-space-label); --hs-form-toolbar-gap: var(--hs-gap-compact); --hs-form-toolbar-checkbox-size: var(--hs-checkbox-size); --hs-form-toolbar-checkbox-hit-size: var(--hs-form-field-size-dense-height); --hs-form-grid-gap: var(--hs-gap-md); --hs-form-footer-gap: var(--hs-gap-sm); /* Legacy aliases — prefer --hs-*-inset / --hs-*-gap in new CSS */ --hs-card-padding: var(--hs-card-inset); --hs-modal-padding: var(--hs-modal-inset); --hs-modal-footer-padding-y: var(--hs-inset-sm); --hs-modal-footer-padding-x: var(--hs-modal-inset); --hs-space-modal: var(--hs-modal-inset); --hs-surface-padding-sm: var(--hs-inset-sm); --hs-surface-padding-md: var(--hs-inset-md); --hs-surface-padding-lg: var(--hs-inset-lg); --hs-surface-gap-sm: var(--hs-gap-sm); --hs-surface-gap-md: var(--hs-gap-md); --hs-surface-gap-lg: var(--hs-gap-lg); /* === Numbered scale + layout roles (Stack, doc) === */ /* Numbered scale — parity with IBM Carbon spacing-01..08 (same px steps where we ship them) */ --hs-spacing-00: 0; --hs-spacing-01: var(--hs-space-tight); --hs-spacing-02: var(--hs-space-1); --hs-spacing-03: var(--hs-space-2); --hs-spacing-04: var(--hs-space-3); --hs-spacing-05: var(--hs-space-4); --hs-spacing-06: var(--hs-space-5); --hs-spacing-07: var(--hs-space-6); --hs-spacing-08: var(--hs-space-7); /* Inward roles — alias inset/gap tiers */ --hs-container-padding-compact: var(--hs-inset-sm); --hs-container-padding-default: var(--hs-inset-md); --hs-container-padding-comfortable: var(--hs-inset-lg); --hs-container-gap-compact: var(--hs-gap-sm); --hs-container-gap-default: var(--hs-gap-md); --hs-container-gap-relaxed: var(--hs-gap-lg); /* Outward roles — parent Stack/page grid only */ --hs-stack-gap-compact: var(--hs-gap-md); --hs-stack-gap-default: var(--hs-section-gap); --hs-stack-gap-relaxed: var(--hs-gap-xl); --hs-stack-gap-loose: var(--hs-page-gap); /* Viewport / overlay gutter */ --hs-overlay-inset-default: var(--hs-modal-backdrop-inset); --hs-overlay-inset-compact: var(--hs-modal-inset-compact); /* Scroll chrome (data-hs-scrollbar="minimal" — scrollbar.css) */ --hs-scrollbar-size: 4px; --hs-scrollbar-thumb-min-length: 2rem; --hs-scrollbar-thumb-radius: var(--hs-radius-pill); --hs-scrollbar-track: transparent; --hs-scrollbar-thumb: color-mix(in srgb, var(--hs-muted) 32%, transparent); --hs-scrollbar-thumb-hover: color-mix(in srgb, var(--hs-muted) 50%, transparent); --hs-scrollbar-thumb-active: color-mix(in srgb, var(--hs-ink) 22%, transparent); /* CssTokenSettingsEditor — compact editor rhythm */ --hs-doc-page-gap: var(--hs-space-3); --hs-doc-section-gap: var(--hs-space-2); --hs-doc-section-pad-top: var(--hs-space-2); --hs-doc-copy-control-gap: var(--hs-space-label); --hs-doc-preview-inline-gap: var(--hs-space-2); --hs-doc-preview-stack-gap: var(--hs-space-3); --hs-doc-copy-button-size: var(--hs-table-action-size); --hs-doc-copy-icon-size: var(--hs-table-action-icon-size); --hs-doc-copy-button-bg: color-mix(in srgb, var(--hs-bg) 72%, var(--hs-soft)); --hs-doc-copy-feedback-duration: 2s; } /* Split from metrics.css — keep import order in ../metrics.css stable. */ :root { /* Layout motion */ --hs-motion-duration-layout: 200ms; /* Control height scale — shared by Button data-size and form field hosts */ --hs-control-height: 36px; --hs-control-height-xs: 22px; --hs-control-height-sm: 27px; --hs-control-height-md: 36px; --hs-control-height-lg: 44px; --hs-control-height-icon: 30px; /* Form field sizes (sm · md · lg) — canonical; dense = toolbar tier */ --hs-form-field-size-sm-height: var(--hs-control-height-sm); --hs-form-field-size-md-height: var(--hs-control-height-md); --hs-form-field-size-lg-height: var(--hs-control-height-lg); --hs-form-field-size-dense-height: 27px; --hs-form-field-size-sm-padding-x: var(--hs-control-padding-x-compact); --hs-form-field-size-md-padding-x: var(--hs-control-padding-x); --hs-form-field-size-lg-padding-x: var(--hs-space-4); --hs-form-field-size-dense-padding-x: var(--hs-control-padding-x-compact); --hs-form-field-size-sm-font-size: var(--hs-text-xs); --hs-form-field-size-md-font-size: var(--hs-text-md); --hs-form-field-size-lg-font-size: var(--hs-text-md); --hs-form-field-size-dense-font-size: var(--hs-text-xs); --hs-form-field-size-sm-label-size: var(--hs-text-label); --hs-form-field-size-md-label-size: var(--hs-text-label); --hs-form-field-size-lg-label-size: var(--hs-text-label); --hs-form-field-size-dense-label-size: calc(var(--hs-text-xs) * 0.8); --hs-form-field-size-sm-description-size: var(--hs-text-sm); --hs-form-field-size-md-description-size: var(--hs-text-sm); --hs-form-field-size-lg-description-size: var(--hs-text-sm); --hs-form-field-size-dense-description-size: calc(var(--hs-text-xs) * 0.8); --hs-form-field-size-sm-textarea-min-height: 64px; --hs-form-field-size-md-textarea-min-height: 76px; --hs-form-field-size-lg-textarea-min-height: 96px; --hs-form-field-size-dense-textarea-min-height: calc(3.25rem + 15px); --hs-form-field-size-dense-textarea-padding-y: var(--hs-space-2); --hs-form-field-size-sm-icon-size: var(--hs-control-height-sm); --hs-form-field-size-md-icon-size: var(--hs-control-height-icon); --hs-form-field-size-lg-icon-size: var(--hs-control-height-icon); --hs-form-field-size-dense-icon-size: var(--hs-size-icon-md); --hs-form-field-size-dense-icon-gap: var(--hs-space-1); --hs-form-field-select-chevron-inset: var(--hs-control-padding-x); --hs-form-field-select-chevron-border-top: 5px; --hs-form-field-select-chevron-border-side: 4px; /* File upload dropzone — FileUpload + ImageUploadDialog */ --hs-file-upload-dropzone-min-height: 16rem; --hs-file-upload-dropzone-padding: var(--hs-space-6); --hs-file-upload-dropzone-icon-circle: 3rem; --hs-file-upload-dropzone-icon-size: 32px; --hs-file-upload-dropzone-gap: var(--hs-space-2); /* Density scale — aliases for control-density.css hosts (legacy names) */ --hs-control-density-default-height: var(--hs-form-field-size-md-height); --hs-control-density-default-padding-x: var(--hs-form-field-size-md-padding-x); --hs-control-density-default-font-size: var(--hs-form-field-size-md-font-size); --hs-control-density-default-label-size: var(--hs-form-field-size-md-label-size); --hs-control-density-default-description-size: var(--hs-form-field-size-md-description-size); --hs-control-density-default-textarea-min-height: var(--hs-form-field-size-md-textarea-min-height); --hs-control-density-default-icon-size: var(--hs-form-field-size-md-icon-size); --hs-control-density-compact-height: var(--hs-form-field-size-sm-height); --hs-control-density-compact-padding-x: var(--hs-form-field-size-sm-padding-x); --hs-control-density-compact-font-size: var(--hs-form-field-size-sm-font-size); --hs-control-density-compact-label-size: var(--hs-form-field-size-sm-label-size); --hs-control-density-compact-description-size: var(--hs-form-field-size-sm-description-size); --hs-control-density-compact-textarea-min-height: var(--hs-form-field-size-sm-textarea-min-height); --hs-control-density-compact-icon-size: var(--hs-form-field-size-sm-icon-size); --hs-control-density-large-height: var(--hs-form-field-size-lg-height); --hs-control-density-large-padding-x: var(--hs-form-field-size-lg-padding-x); --hs-control-density-large-font-size: var(--hs-form-field-size-lg-font-size); --hs-control-density-large-label-size: var(--hs-form-field-size-lg-label-size); --hs-control-density-large-description-size: var(--hs-form-field-size-lg-description-size); --hs-control-density-large-textarea-min-height: var(--hs-form-field-size-lg-textarea-min-height); --hs-control-density-large-icon-size: var(--hs-form-field-size-lg-icon-size); --hs-control-density-dense-height: var(--hs-form-field-size-dense-height); --hs-control-density-dense-padding-x: var(--hs-form-field-size-dense-padding-x); --hs-control-density-dense-font-size: var(--hs-form-field-size-dense-font-size); --hs-control-density-dense-label-size: var(--hs-form-field-size-dense-label-size); --hs-control-density-dense-description-size: var(--hs-form-field-size-dense-description-size); --hs-control-density-dense-textarea-min-height: var(--hs-form-field-size-dense-textarea-min-height); --hs-control-density-dense-icon-size: var(--hs-form-field-size-dense-icon-size); --hs-checkbox-size: 20px; --hs-checkbox-hit-padding: 5px; --hs-checkbox-hit-size: 24px; --hs-checkbox-radius: var(--hs-radius-sm); --hs-checkbox-surface: var(--hs-surface); --hs-checkbox-border-color: var(--hs-control-border); --hs-checkbox-checked-color: var(--hs-accent); --hs-checkbox-checkmark-color: #ffffff; --hs-button-min-width-outline: 116px; --hs-button-min-width-primary: 96px; /* Semantic status */ --hs-status-published: rgba(48, 132, 82, 0.72); --hs-status-published-border: rgba(48, 132, 82, 0.88); --hs-status-draft: rgba(181, 123, 28, 0.62); --hs-status-draft-border: rgba(181, 123, 28, 0.78); --hs-status-hidden: rgba(123, 130, 116, 0.34); --hs-status-hidden-border: rgba(123, 130, 116, 0.48); --hs-status-dot-size: calc(var(--hs-size-icon-sm) * 0.9); --hs-status-info: #175cd3; --hs-tag-density-sm: 20px; --hs-tag-max-width: 220px; --hs-tag-height-md: 24px; --hs-tag-height-lg: 32px; --hs-tag-composer-width: 96px; --hs-tag-remove-size: 18px; --hs-tag-icon-size: 14px; /* Radius */ } /* Split from metrics.css — keep import order in ../metrics.css stable. */ :root { --hs-radius-sm: 6px; --hs-radius-md: 8px; --hs-radius-pill: 999px; /* Public guest menu actions — cards & QR menu (not admin Button) */ --hs-public-menu-action-height: 31px; --hs-public-menu-action-min-width: 88px; --hs-public-menu-action-radius: var(--hs-radius-pill); --hs-public-menu-action-font-size: var(--hs-text-sm); --hs-public-menu-action-font-weight: var(--hs-font-weight-semibold); --hs-public-menu-action-fg: #ffffff; --hs-public-menu-quantity-height: var(--hs-public-menu-quantity-height-md); --hs-public-menu-quantity-text: var(--hs-public-menu-quantity-text-md); --hs-public-menu-quantity-glyph-text: var(--hs-public-menu-quantity-glyph-md); --hs-public-menu-quantity-weight: var(--hs-font-weight-semibold); --hs-public-menu-quantity-value-padding-inline: var(--hs-space-1); --hs-public-menu-quantity-height-sm: var(--hs-public-menu-add-height-sm); --hs-public-menu-quantity-height-md: var(--hs-public-menu-add-height-md); --hs-public-menu-quantity-height-lg: var(--hs-public-menu-add-height-lg); --hs-public-menu-quantity-min-width-sm: var(--hs-public-menu-add-min-width-sm); --hs-public-menu-quantity-min-width-md: var(--hs-public-menu-add-min-width-md); --hs-public-menu-quantity-min-width-lg: var(--hs-public-menu-add-min-width-lg); --hs-public-menu-quantity-text-sm: var(--hs-text-2xs); --hs-public-menu-quantity-text-md: var(--hs-text-xs); --hs-public-menu-quantity-text-lg: var(--hs-text-sm); --hs-public-menu-quantity-glyph-sm: var(--hs-text-sm); --hs-public-menu-quantity-glyph-md: var(--hs-text-md); --hs-public-menu-quantity-glyph-lg: var(--hs-text-md); --hs-public-menu-quantity-outline-bg: #ffffff; --hs-public-menu-quantity-outline-border: var(--hs-public-menu-add-bg); --hs-public-menu-quantity-outline-fg: var(--hs-public-menu-add-bg); --hs-public-menu-quantity-outline-hover: #f9ecee; --hs-public-menu-quantity-soft-bg: #f5e8eb; --hs-public-menu-quantity-soft-fg: var(--hs-public-menu-add-bg); --hs-public-menu-quantity-soft-hover: #ecd8de; --hs-public-menu-icon-size: var(--hs-control-height-sm); /* PublicMenuAddButton — fixed burgundy CTA (guest cards); unified size @ artboard scale */ --hs-public-menu-add-bg: #681c22; --hs-public-menu-add-bg-hover: #521222; --hs-public-menu-add-fg: #ffffff; --hs-public-menu-add-height-ref: 31; --hs-public-menu-add-min-width-ref: 88; --hs-public-menu-add-font-size-ref: 12; --hs-public-menu-add-padding-inline-ref: 12; --hs-public-menu-add-height-sm: calc(var(--hs-public-menu-add-height-ref) * 1px); --hs-public-menu-add-height-md: var(--hs-public-menu-add-height-sm); --hs-public-menu-add-height-lg: var(--hs-public-menu-add-height-sm); --hs-public-menu-add-min-width-sm: calc(var(--hs-public-menu-add-min-width-ref) * 1px); --hs-public-menu-add-min-width-md: var(--hs-public-menu-add-min-width-sm); --hs-public-menu-add-min-width-lg: var(--hs-public-menu-add-min-width-sm); --hs-public-menu-add-font-size-sm: calc(var(--hs-public-menu-add-font-size-ref) * 1px); --hs-public-menu-add-font-size-md: var(--hs-public-menu-add-font-size-sm); --hs-public-menu-add-font-size-lg: var(--hs-public-menu-add-font-size-sm); --hs-public-menu-add-padding-sm: 0 calc(var(--hs-public-menu-add-padding-inline-ref) * 1px); --hs-public-menu-add-padding-md: var(--hs-public-menu-add-padding-sm); --hs-public-menu-add-padding-lg: var(--hs-public-menu-add-padding-sm); /* Public menu actions — unitless refs for cqw scale on guest card hosts */ --hs-public-menu-action-radius-ref: 200; --hs-public-menu-icon-size-ref: 27; --hs-public-menu-add-height-sm-ref: var(--hs-public-menu-add-height-ref); --hs-public-menu-add-height-md-ref: var(--hs-public-menu-add-height-ref); --hs-public-menu-add-height-lg-ref: var(--hs-public-menu-add-height-ref); --hs-public-menu-add-min-width-sm-ref: var(--hs-public-menu-add-min-width-ref); --hs-public-menu-add-min-width-md-ref: var(--hs-public-menu-add-min-width-ref); --hs-public-menu-add-min-width-lg-ref: var(--hs-public-menu-add-min-width-ref); --hs-public-menu-add-font-size-sm-ref: var(--hs-public-menu-add-font-size-ref); --hs-public-menu-add-font-size-md-ref: var(--hs-public-menu-add-font-size-ref); --hs-public-menu-add-font-size-lg-ref: var(--hs-public-menu-add-font-size-ref); --hs-public-menu-add-padding-inline-sm-ref: var(--hs-public-menu-add-padding-inline-ref); --hs-public-menu-add-padding-inline-md-ref: var(--hs-public-menu-add-padding-inline-ref); --hs-public-menu-add-padding-inline-lg-ref: var(--hs-public-menu-add-padding-inline-ref); --hs-public-menu-quantity-text-ref: 10; --hs-public-menu-quantity-glyph-ref: 13; --hs-public-menu-quantity-text-sm-ref: var(--hs-public-menu-quantity-text-ref); --hs-public-menu-quantity-text-md-ref: var(--hs-public-menu-quantity-text-ref); --hs-public-menu-quantity-text-lg-ref: var(--hs-public-menu-quantity-text-ref); --hs-public-menu-quantity-glyph-sm-ref: var(--hs-public-menu-quantity-glyph-ref); --hs-public-menu-quantity-glyph-md-ref: var(--hs-public-menu-quantity-glyph-ref); --hs-public-menu-quantity-glyph-lg-ref: var(--hs-public-menu-quantity-glyph-ref); --hs-public-menu-quantity-value-padding-inline-ref: 4; /* Guest card photo upload — shared refs (cocktail + dish artboards) */ --hs-public-guest-photo-upload-icon-ref: 48; --hs-public-guest-photo-upload-title-ref: 12; --hs-public-guest-photo-upload-help-ref: 10; --hs-public-guest-photo-upload-gap-ref: 8; --hs-public-guest-photo-upload-radius-ref: 12; --hs-public-guest-photo-upload-title-leading: 1.2; --hs-public-guest-photo-upload-help-leading: 1.2; /* Public cocktail card — layout via GridCol span 1 · sm 2 · md 4 (two per row on 4/8/16) */ /* Reference 182×372 — cqw/cqh in publicCocktailCardScale.module.css */ --hs-public-cocktail-width-ref: 182; --hs-public-cocktail-height-ref: 372; --hs-public-cocktail-radius-ref: 28; --hs-radius-public-cocktail: var(--hs-public-cocktail-radius-ref); --hs-public-cocktail-aspect: 182 / 372; /* Guest palette — fixed hex; not tied to data-theme */ --hs-public-cocktail-surface: #ffffff; --hs-public-cocktail-ink: #64172b; --hs-public-cocktail-body-ink: #092715; --hs-public-cocktail-accent: var(--hs-public-cocktail-ink); --hs-public-cocktail-accent-hover: #521222; --hs-public-cocktail-action-fg: #ffffff; --hs-public-cocktail-chrome-surface: #ffffff; --hs-public-cocktail-chrome-muted: rgba(9, 39, 21, 0.56); --hs-public-cocktail-chrome-line: rgba(9, 39, 21, 0.18); --hs-public-cocktail-chrome-control-border: rgba(9, 39, 21, 0.24); --hs-public-cocktail-chrome-hover: rgba(9, 39, 21, 0.08); --hs-public-cocktail-chrome-ink: #092715; --hs-public-cocktail-chrome-focus: #092715; --hs-public-cocktail-emphasis-weight: var(--hs-font-weight-extrabold); --hs-public-cocktail-info-inset-right-ref: 14; --hs-public-cocktail-info-inset-bottom-ref: 16; --hs-public-cocktail-info-width-ref: 104; /* Legacy alias — slot width uses --hs-public-menu-add-min-width-md (guestMenuActionsScale). */ --hs-public-cocktail-action-width-ref: var(--hs-public-menu-add-min-width-md-ref); --hs-public-cocktail-tag-inset-top-ref: 16; --hs-public-cocktail-tag-inset-left-ref: 14; --hs-public-cocktail-tag-text-ref: 10; --hs-public-cocktail-tag-weight: 600; --hs-public-cocktail-tag-leading: 1; --hs-public-cocktail-tag-tracking: -0.01em; --hs-public-cocktail-tag-padding-inline-ref: 8; --hs-public-cocktail-copy-gap-ref: 8; --hs-public-cocktail-meta-inline-gap-ref: 8; --hs-public-cocktail-action-gap-ref: 8; --hs-public-cocktail-info-gap-ref: 8; --hs-public-cocktail-title-size-ref: 17; --hs-public-cocktail-title-weight: 900; --hs-public-cocktail-title-leading: 1.02; --hs-public-cocktail-title-tracking: -0.055em; --hs-public-cocktail-ingredients-text-ref: 7; --hs-public-cocktail-ingredients-weight: 600; --hs-public-cocktail-ingredients-leading: 1.16; --hs-public-cocktail-ingredients-tracking: -0.01em; --hs-public-cocktail-meta-text-ref: 7; --hs-public-cocktail-meta-weight: 600; --hs-public-cocktail-meta-leading: 1.16; --hs-public-cocktail-meta-tracking: -0.01em; --hs-public-cocktail-back-text-ref: 12; --hs-public-cocktail-back-text-weight: 600; --hs-public-cocktail-back-text-leading: 1.16; --hs-public-cocktail-back-text-tracking: -0.01em; --hs-public-cocktail-back-ingredients-text-ref: 10; --hs-public-cocktail-back-ingredients-weight: 600; --hs-public-cocktail-back-ingredients-leading: 1.16; --hs-public-cocktail-back-ingredients-tracking: -0.01em; --hs-public-cocktail-back-ingredients-offset-ref: 24; --hs-public-cocktail-photo-upload-icon-ref: var(--hs-public-guest-photo-upload-icon-ref); --hs-public-cocktail-photo-upload-title-ref: var(--hs-public-guest-photo-upload-title-ref); --hs-public-cocktail-photo-upload-help-ref: var(--hs-public-guest-photo-upload-help-ref); --hs-public-cocktail-photo-upload-gap-ref: var(--hs-public-guest-photo-upload-gap-ref); --hs-public-cocktail-photo-upload-radius-ref: var(--hs-public-guest-photo-upload-radius-ref); --hs-public-cocktail-photo-upload-title-leading: var(--hs-public-guest-photo-upload-title-leading); --hs-public-cocktail-photo-upload-help-leading: var(--hs-public-guest-photo-upload-help-leading); --hs-public-menu-action-bg: var(--hs-public-menu-add-bg); --hs-public-menu-action-bg-hover: var(--hs-public-menu-add-bg-hover); --hs-public-cocktail-action-height: var(--hs-public-menu-action-height); --hs-public-cocktail-action-radius: var(--hs-public-menu-action-radius); --hs-public-cocktail-quantity-text: var(--hs-public-menu-quantity-text); --hs-public-cocktail-quantity-glyph-text: var(--hs-public-menu-quantity-glyph-text); --hs-public-cocktail-quantity-weight: var(--hs-public-menu-quantity-weight); --hs-public-cocktail-quantity-value-padding-inline: var(--hs-public-menu-quantity-value-padding-inline); --hs-quantity-stepper-radius: var(--hs-public-menu-action-radius); /* Photo — height 100%, centered; imagePlacement offsets + scale */ --hs-public-cocktail-image-height: 100%; --hs-public-cocktail-image-offset-x: 0%; --hs-public-cocktail-image-offset-y: 0%; --hs-public-cocktail-image-scale: 1; /* Public menu dish card — 350×350; chroma → public-menu + semantic tokens; cqw in publicMenuDishCardScale */ --hs-public-menu-dish-width-ref: 350; --hs-public-menu-dish-height-ref: 350; --hs-public-menu-dish-radius-ref: 28; --hs-public-menu-dish-aspect: 1 / 1; /* Guest palette — fixed hex; not tied to data-theme (same rule as public cocktail card) */ --hs-public-menu-dish-surface: #ececec; --hs-public-menu-dish-title-ink: var(--hs-public-menu-add-bg); --hs-public-menu-dish-body-ink: var(--hs-public-cocktail-body-ink); --hs-public-menu-dish-price-ink: var(--hs-public-menu-add-bg); --hs-public-menu-dish-media-fallback: #e2e2e2; --hs-public-menu-dish-divider-color: var(--hs-public-menu-card-content-divider-color); --hs-public-menu-dish-image-height-ref: 205; --hs-public-menu-dish-photo-upload-icon-ref: var(--hs-public-guest-photo-upload-icon-ref); --hs-public-menu-dish-photo-upload-title-ref: var(--hs-public-guest-photo-upload-title-ref); --hs-public-menu-dish-photo-upload-help-ref: var(--hs-public-guest-photo-upload-help-ref); --hs-public-menu-dish-photo-upload-gap-ref: var(--hs-public-guest-photo-upload-gap-ref); --hs-public-menu-dish-photo-upload-radius-ref: var(--hs-public-guest-photo-upload-radius-ref); --hs-public-menu-dish-photo-upload-title-leading: var(--hs-public-guest-photo-upload-title-leading); --hs-public-menu-dish-photo-upload-help-leading: var(--hs-public-guest-photo-upload-help-leading); --hs-public-menu-dish-photo-chrome-muted: color-mix(in srgb, var(--hs-ink) 56%, transparent); --hs-public-menu-dish-photo-chrome-line: var(--hs-line-color); --hs-public-menu-dish-photo-chrome-hover: color-mix(in srgb, var(--hs-ink) 8%, transparent); --hs-public-menu-dish-photo-chrome-focus: var(--hs-ink); --hs-public-menu-dish-content-padding-inline-ref: var(--hs-public-menu-card-content-padding-inline-ref); --hs-public-menu-dish-content-padding-block-start-ref: 7; --hs-public-menu-dish-footer-padding-block-end-ref: var(--hs-public-menu-card-shell-padding-block-ref); --hs-public-menu-dish-tag-inset-top-ref: 20; --hs-public-menu-dish-tag-inset-left-ref: 20; --hs-public-menu-dish-tag-inset: var(--hs-public-menu-dish-tag-inset-top); --hs-public-menu-dish-title-size-ref: 18; --hs-public-menu-dish-title-leading-ref: 22; --hs-public-menu-dish-title-gap-ref: 6; --hs-public-menu-dish-description-size-ref: 10; --hs-public-menu-dish-description-leading-ref: 12; --hs-public-menu-dish-combo-size-ref: 13; --hs-public-menu-dish-combo-leading-ref: 15; --hs-public-menu-dish-combo-weight: var(--hs-font-weight-bold); --hs-public-menu-dish-combo-row-gap-ref: 4; --hs-public-menu-dish-combo-divider-gap-ref: 8; --hs-public-menu-dish-combo-checkbox-size-ref: 18; --hs-public-menu-dish-combo-checkbox-hit-size-ref: 24; --hs-public-menu-dish-combo-checkbox-hit-padding-ref: 5; --hs-public-menu-dish-combo-checkbox-gap-ref: 10; --hs-public-menu-dish-divider-dash-ref: var(--hs-public-menu-card-content-divider-dash-ref); --hs-public-menu-dish-divider-stroke-gap-ref: var(--hs-public-menu-card-content-divider-gap-ref); --hs-public-menu-dish-divider-thickness-ref: var(--hs-public-menu-card-content-divider-thickness-ref); --hs-public-menu-dish-footer-gap-ref: var(--hs-public-menu-card-row-inline-gap-ref); /* Legacy alias — dish footer slot uses --hs-public-menu-add-min-width-md. */ --hs-public-menu-dish-action-width-ref: var(--hs-public-menu-add-min-width-md-ref); --hs-public-menu-dish-volume-gap-ref: 8; --hs-public-menu-dish-price-size-ref: 22; --hs-public-menu-dish-price-leading-ref: 26; --hs-public-menu-dish-lift-ref: 4; --hs-public-menu-dish-title-weight: var(--hs-font-weight-extrabold); --hs-public-menu-dish-description-weight: var(--hs-font-weight-medium); --hs-public-menu-dish-price-weight: var(--hs-font-weight-extrabold); --hs-public-menu-dish-title-tracking: var(--hs-tracking-heading); --hs-public-menu-dish-price-tracking: 0; /* Shared guest card shell padding @ dish 350w — scales via --hs-scale-cqw-dish on composed scale hosts. */ --hs-public-menu-card-content-padding-inline-ref: 20; --hs-public-menu-card-shell-padding-block-ref: 20; --hs-public-menu-card-row-inline-gap-ref: 12; --hs-public-menu-card-row-cta-pad-ref: 6.5; /* Shared content dividers — dish .dishRule + list row separators (micro-dash). */ --hs-public-menu-card-content-divider-color: #d6d6d6; --hs-public-menu-card-content-divider-thickness-ref: 1; --hs-public-menu-card-content-divider-dash-ref: 2; --hs-public-menu-card-content-divider-gap-ref: 4; /* Public menu list group card — 350w (dish artboard); cqw in publicMenuListGroupCardScale */ --hs-public-menu-list-group-width-ref: var(--hs-public-menu-dish-width-ref); --hs-public-menu-list-group-radius-ref: var(--hs-public-menu-dish-radius-ref); --hs-public-menu-list-group-title-size-ref: 22; --hs-public-menu-list-group-title-line-ref: 26; --hs-public-menu-list-group-subtitle-size-ref: 11; --hs-public-menu-list-group-subtitle-line-ref: 13; --hs-public-menu-list-group-subtitle-gap-top-ref: 7; --hs-public-menu-list-group-subtitle-max-width-ref: 268; --hs-public-menu-list-group-subtitle-ink: var(--hs-color-charcoal-600); --hs-public-menu-list-row-min-height-ref: 44; --hs-public-menu-list-row-name-size-ref: 16; --hs-public-menu-list-row-name-line-ref: 20; --hs-public-menu-list-row-price-size-ref: 18; --hs-public-menu-list-row-price-line-ref: 20; --hs-public-menu-list-row-tag-gap-ref: 4; --hs-public-menu-list-group-surface: var(--hs-public-menu-dish-surface); --hs-public-menu-list-group-outline: var(--hs-line-soft); --hs-public-menu-list-row-divider: var(--hs-public-menu-card-content-divider-color); --hs-public-menu-list-row-name-ink: var(--hs-public-menu-list-row-price-ink); --hs-public-menu-list-row-meta-ink: var(--hs-public-cocktail-body-ink); --hs-public-menu-list-row-price-ink: var(--hs-public-menu-add-bg); /* Public online menu — Brighton webapp @ 402 cqw; fluid layout in publicMenuPage.css */ --hs-public-online-menu-width-ref: 402; --hs-public-menu-page-work-width-ref: 400; --hs-public-menu-page-logo-size-ref: 30; --hs-public-online-menu-screen-fill-ref: 88; --hs-public-online-menu-page-x-ref: 24; --hs-public-online-menu-page-pad-bottom-ref: 144; --hs-public-online-menu-header-content-top-ref: 25; --hs-public-online-menu-header-h-ref: 80; --hs-public-online-menu-header-sticky-pad-top-ref: 0; --hs-public-online-menu-header-sticky-pad-bottom-ref: 0; --hs-public-online-menu-stack-gap-ref: 6; --hs-public-online-menu-shell-section-gap-ref: 16; --hs-public-online-menu-body-gap-ref: 16; --hs-public-online-menu-menu-section-pad-top-ref: 10; --hs-public-online-menu-menu-section-margin-ref: 10; --hs-public-online-menu-menu-section-description-size-ref: 13; --hs-public-online-menu-menu-section-description-line-ref: 18; --hs-public-online-menu-menu-section-description-gap-ref: 8; --hs-public-online-menu-menu-group-title-size-ref: 30; --hs-public-online-menu-menu-group-title-gap-ref: 20; --hs-public-online-menu-card-grid-gap-ref: 20; --hs-public-online-menu-menu-group-title-tracking: 0; --hs-public-online-menu-scroll-margin-extra-ref: 16; --hs-public-online-menu-scroll-spy-band-ref: 40; --hs-public-online-menu-list-plaque-meta-col-ref: 34; --hs-public-online-menu-list-plaque-price-col-ref: 52; --hs-public-online-menu-list-plaque-bar-height-ref: 11; --hs-public-online-menu-list-plaque-bar-radius-ref: 5; --hs-public-online-menu-list-plaque-name-width-percent-ref: 72; --hs-public-online-menu-list-plaque-row-gap-ratio-ref: 0.75; --hs-public-online-menu-list-plaque-head-gap-ratio-ref: 0.5; --hs-public-online-menu-list-plaque-badge-pad-ratio-ref: 0.25; --hs-public-online-menu-list-plaque-margin-bottom-ref: 26; --hs-public-online-menu-list-plaque-pad-block-ref: 24; --hs-public-online-menu-list-plaque-pad-inline-ref: 16; --hs-public-online-menu-list-plaque-radius-ref: 20; --hs-public-online-menu-list-plaque-title-size-ref: 22; --hs-public-online-menu-list-plaque-title-gap-ref: 12; --hs-public-online-menu-list-plaque-subtitle-size-ref: 11; --hs-public-online-menu-list-plaque-subtitle-gap-ref: 16; --hs-public-online-menu-list-plaque-row-min-h-ref: 40; --hs-public-online-menu-list-plaque-row-gap-ref: 4; --hs-public-online-menu-list-plaque-badge-inset-ref: 12; --hs-public-online-menu-list-plaque-badge-font-size-ref: 10; --hs-public-online-menu-list-plaque-title-weight: 800; --hs-public-online-menu-list-plaque-subtitle-weight: 600; --hs-public-online-menu-list-plaque-badge-weight: 800; --hs-public-online-menu-start-pad-y-ref: 14; --hs-public-menu-page-footer-margin-ref: 24; --hs-public-menu-page-admin-entry-pad-x-ref: 18; --hs-public-menu-page-admin-entry-size-ref: 12; --hs-public-menu-page-admin-entry-weight: 900; --hs-public-online-menu-start-fade-duration: 280ms; --hs-public-online-menu-header-sticky-bg-duration: 260ms; --hs-public-online-menu-header-bg-scroll-y-ref: 40; --hs-public-online-menu-header-compact-scroll-y-ref: 520; --hs-public-online-menu-start-shell-inset-ref: 25; --hs-public-online-menu-start-categories-margin-ref: 32; --hs-public-online-menu-start-pad-bottom-ref: 24; --hs-public-online-menu-start-fade-shift-ref: 24; --hs-public-online-menu-start-logo-gap-ref: 14; --hs-public-online-menu-section-nav-gap-ref: 18; --hs-public-online-menu-header-icon-ref: 40; --hs-public-online-menu-header-chevron-ref: 18; --hs-public-online-menu-logo-size-ref: 31; --hs-public-online-menu-logo-line-ref: 31; --hs-public-online-menu-logo-weight: 950; --hs-public-online-menu-logo-tracking: -0.055em; --hs-public-online-menu-section-title-size-ref: 28; --hs-public-online-menu-search-trigger-ref: 40; --hs-public-online-menu-search-icon-ref: 18; --hs-public-online-menu-search-ring-ref: 1.5; --hs-public-online-menu-search-icon-stroke-ref: 2.05; --hs-public-online-menu-search-input-weight: 800; --hs-public-online-menu-search-input-tracking: -0.045em; --hs-public-online-menu-search-result-weight: 700; --hs-public-online-menu-search-icon-nudge-ref: 0; --hs-public-online-menu-search-icon-nudge-px-ref: 0.75; --hs-public-online-menu-search-close-size-ref: 36; --hs-public-menu-page-search-ease: cubic-bezier(0.19, 1, 0.22, 1); --hs-public-menu-page-search-ui-duration: 180ms; --hs-public-menu-page-search-ui-open-duration: 300ms; --hs-public-menu-page-search-ui-transform-duration: 240ms; --hs-public-menu-page-search-ui-open-ease: cubic-bezier(0.215, 0.61, 0.355, 1); --hs-public-menu-page-normal-opacity-duration: 280ms; --hs-public-online-menu-search-shell-top-ref: 20; --hs-public-online-menu-search-shell-top-active-ref: 16; --hs-public-online-menu-search-field-h-ref: 48; --hs-public-online-menu-search-inner-gap-ref: 6; --hs-public-online-menu-search-input-size-ref: 20; --hs-public-online-menu-search-input-slide-ref: 8; --hs-public-online-menu-normal-hide-shift-ref: 58; --hs-public-online-menu-search-open-delay: 280ms; --hs-public-online-menu-search-close-delay: 250ms; --hs-public-online-menu-category-size-ref: 30.132; --hs-public-online-menu-category-line-ratio-ref: 1.12; --hs-public-online-menu-category-row-min-h-ref: 43.2; --hs-public-online-menu-category-tracking-ref: 0.4; --hs-public-online-menu-category-rule-ref: 2; --hs-public-online-menu-category-gap-ref: 0; --hs-public-online-menu-category-weight: 800; /** Pull lang zone toward categories inside start-shell (negative margin on categories zone). */ --hs-public-online-menu-start-categories-lang-gap-ref: 20; --hs-public-online-menu-lang-pad-bottom-ref: 24; /** Raise lang switch vs baseline bottom pad (Figma tweak). */ --hs-public-online-menu-lang-lift-ref: 30; --hs-public-online-menu-lang-size-ref: 13; --hs-public-online-menu-lang-line-ref: 48; --hs-public-online-menu-lang-tracking-ref: 1.04; --hs-public-online-menu-lang-tracking: 0.08em; --hs-public-online-menu-lang-weight: 900; --hs-public-online-menu-category-nav-gap-ref: 8; --hs-public-online-menu-category-link-min-h-ref: 44; --hs-public-online-menu-category-link-size-ref: 22; --hs-public-online-menu-results-radius-ref: 20; --hs-public-online-menu-results-max-height: 50svh; --hs-public-online-menu-results-shift-y-ref: 8; --hs-public-online-menu-result-row-pad-block-ref: 10; --hs-public-online-menu-result-empty-pad-block-ref: 12; --hs-public-online-menu-close-bar-w-ref: 14; --hs-public-online-menu-close-bar-h-ref: 2; /* Guest #public-menu — each color token is independent (no var() coupling). */ --hs-public-menu-boot-bg: #570d00; --hs-public-menu-boot-stripe: #fdafbc; --hs-public-menu-boot-button-height: 3rem; --hs-public-menu-boot-button-pad-x: 1.35rem; --hs-public-menu-boot-button-pad-y: 0.65rem; --hs-public-menu-boot-button-size: 0.8125rem; --hs-public-menu-boot-button-ring: 1.5px; --hs-public-online-menu-accent: #fff0f3; --hs-public-online-menu-line: #fff0f3; --hs-public-online-menu-ink-muted: #ffe5ea; --hs-public-online-menu-header-bg: #210000; --hs-public-online-menu-header-field: #220000; --hs-public-online-menu-header-field-border: #ffe5ea; --hs-public-online-menu-results-bg: #210006; --hs-public-online-menu-results-border: #4d2028; --hs-public-online-menu-result-divider: #563339; --hs-public-online-menu-result-mark-bg: #491d25; --hs-public-online-menu-lang-active-ink: #210006; --hs-public-online-menu-lang-pill-inset-ref: 4; --hs-public-online-menu-lang-pill-gap-ref: 12; --hs-public-online-menu-lang-pill-pad-x-ref: 28; --hs-public-online-menu-lang-pill-min-w-ref: 92; --hs-public-online-menu-lang-slide-radius-ref: 999; --hs-public-online-menu-menu-ink: #fffafa; --hs-public-online-menu-header-idle-opacity: 1; --hs-public-online-menu-control-disabled-opacity: 0.34; --hs-public-online-menu-search-duration: 620ms; --hs-public-online-menu-search-ease: var(--hs-public-menu-page-search-ease); --hs-public-online-menu-scroll-padding-extra: 20px; --hs-public-online-menu-logo-font: var(--hs-font-ui); /* Guest cart chrome — bar, drawer, line cards (independent tokens; defaults match menu palette) */ --hs-public-menu-cart-bar-bg: #210000; --hs-public-menu-cart-drawer-bg: #210006; --hs-public-menu-cart-drawer-border: #4d2028; --hs-public-menu-cart-divider: #563339; --hs-public-menu-cart-ink: #fff0f3; --hs-public-menu-cart-ink-muted: #ffe5ea; --hs-public-menu-cart-scrim: rgba(33, 0, 0, 0.72); --hs-public-menu-cart-line-surface: #ececec; --hs-public-menu-cart-line-title: #681c22; --hs-public-menu-cart-line-muted: #837a7e; --hs-public-menu-cart-price: #681c22; --hs-public-menu-cart-cta-bg: #681c22; --hs-public-menu-cart-cta-fg: #ffffff; /* Guest QR landing after scan — `#/qr/{code}` / `/qr/{code}` (preview frame = public menu work width) */ --hs-qr-landing-width-ref: var(--hs-public-menu-page-work-width-ref); --hs-qr-landing-pad-x-ref: 24; --hs-qr-landing-pad-y-ref: 28; --hs-qr-landing-footer-pad-bottom-ref: 24; --hs-qr-landing-lang-size-ref: 13; --hs-qr-landing-lang-line-ref: 48; --hs-qr-landing-lang-gap-ref: 12; --hs-qr-landing-lang-pill-inset-ref: 4; --hs-qr-landing-lang-pill-gap-ref: 12; --hs-qr-landing-lang-pill-pad-x-ref: 28; --hs-qr-landing-lang-pill-min-w-ref: 92; --hs-qr-landing-lang-slide-radius-ref: 999; --hs-qr-landing-lang-ring-ref: 1.5; --hs-qr-landing-lead-size-ref: 28; --hs-qr-landing-lead-weight: 900; --hs-qr-landing-lead-tracking: -0.04em; --hs-qr-landing-title-size-ref: 24; --hs-qr-landing-title-weight: 800; --hs-qr-landing-title-tracking: -0.03em; --hs-qr-landing-body-size-ref: 15; --hs-qr-landing-cta-error-mix: #5a1a24; --hs-qr-landing-status-card-pad-ref: 20; --hs-qr-landing-section-gap-ref: 20; --hs-qr-landing-welcome-gap-ref: 10; --hs-qr-landing-welcome-title-gap-ref: 4; --hs-qr-landing-status-card-radius-ref: 20; /* Place plaque scale ref — internal, not exposed in admin editor */ --hs-qr-landing-place-design-w-ref: 438; --hs-qr-landing-place-card-h-ref: 140; --hs-qr-landing-place-card-radius-ref: 30; --hs-qr-landing-place-card-border-ref: 1; --hs-qr-landing-place-image-col-ref: 200; --hs-qr-landing-place-pad-inline-start-ref: 18; --hs-qr-landing-place-pad-inline-end-ref: 12; --hs-qr-landing-place-pad-block-ref: 16; --hs-qr-landing-place-gap-after-type-ref: -1; --hs-qr-landing-place-gap-after-code-ref: 20; --hs-qr-landing-place-type-size-ref: 32; --hs-qr-landing-place-type-weight: 700; --hs-qr-landing-place-type-letter-spacing-ref: -2; --hs-qr-landing-place-code-size-ref: 64; --hs-qr-landing-place-code-weight: 800; --hs-qr-landing-place-code-letter-spacing-ref: -3; --hs-qr-landing-place-hint-size-ref: 10; --hs-qr-landing-place-hint-weight: 600; --hs-qr-landing-place-ink: #ffffff; --hs-qr-landing-place-photo-bg: #ffffff; --hs-qr-landing-place-photo-chrome-ink: var(--hs-qr-landing-on-accent-ink); --hs-qr-landing-place-photo-chrome-muted: color-mix( in srgb, var(--hs-qr-landing-on-accent-ink) 62%, transparent ); --hs-qr-landing-place-photo-upload-icon-bg: #f2f2f2; --hs-qr-landing-cta-gap-ref: 12; --hs-qr-landing-cta-size-ref: 16; --hs-qr-landing-cta-line-ref: 52; --hs-qr-landing-cta-radius-ref: 14; --hs-qr-landing-accent: #ffa1b1; --hs-qr-landing-on-accent-ink: #210006; --hs-qr-landing-ink: #ffffff; --hs-qr-landing-ink-muted: color-mix(in srgb, #ffffff 82%, transparent); --hs-qr-landing-card-bg: #420000; --hs-qr-landing-card-border: #1f0002; /* BRGHT lava background — React Bits Grainient (BrghtLavaBackground) */ --hs-brght-lava-enabled: 1; --hs-brght-lava-color-1: #42000a; --hs-brght-lava-color-2: #570d00; --hs-brght-lava-color-3: #fdafbc; /* Boot / static fill — menu loading screen */ --hs-brght-lava-boot-bg: var(--hs-public-menu-boot-bg); --hs-brght-lava-time-speed: 0.25; --hs-brght-lava-color-balance: 0; --hs-brght-lava-warp-strength: 1; --hs-brght-lava-warp-frequency: 5; --hs-brght-lava-warp-speed: 2; --hs-brght-lava-warp-amplitude: 50; --hs-brght-lava-blend-angle: 0; --hs-brght-lava-blend-softness: 0.05; --hs-brght-lava-rotation-amount: 500; --hs-brght-lava-noise-scale: 2; --hs-brght-lava-grain-amount: 0.1; --hs-brght-lava-grain-scale: 2; --hs-brght-lava-grain-animated: 0; --hs-brght-lava-contrast: 1.5; --hs-brght-lava-gamma: 1; --hs-brght-lava-saturation: 1; --hs-brght-lava-center-x: 0.1; --hs-brght-lava-center-y: 0; --hs-brght-lava-zoom: 1.2; /* iPhone 16 logical screen + catalog device frame */ --hs-iphone16-screen-width-ref: 393; --hs-iphone16-screen-height-ref: 852; --hs-iphone16-scale-width-ref: var(--hs-iphone16-screen-width-ref); --hs-iphone16-chassis-radius-ref: 56; --hs-iphone16-screen-radius-ref: 47; --hs-iphone16-bezel-inline-ref: 10; --hs-iphone16-bezel-block-start-ref: 12; --hs-iphone16-bezel-block-end-ref: 14; --hs-iphone16-chassis-stroke-ref: 2; --hs-iphone16-screen-stroke-ref: 2; --hs-iphone16-chassis-surface: var(--hs-color-charcoal-700); --hs-iphone16-chassis-edge: var(--hs-color-charcoal-900); --hs-iphone16-screen-border: var(--hs-color-charcoal-950); --hs-iphone16-button-fill: var(--hs-color-charcoal-800); --hs-iphone16-island-fill: var(--hs-color-charcoal-950); --hs-iphone16-home-indicator: var(--hs-color-charcoal-600); /* Device mock iPhone — global styles: styles/deviceMockIphone.css */ --hs-device-mock-width: 280px; --hs-device-mock-aspect-w: 433; --hs-device-mock-aspect-h: 882; --hs-admin-guest-settings-panel-height: calc( var(--hs-device-mock-width) * var(--hs-device-mock-aspect-h) / var(--hs-device-mock-aspect-w) ); --hs-device-mock-chassis: #e5e5e5; --hs-device-mock-inner: #ffffff; --hs-device-mock-island: #f5f5f5; --hs-device-mock-screen: #ffffff; /* Safari chrome plates — see docs/DEVICE_MOCK_IPHONE.md + resolveDeviceMockSafariChromePercents() */ --hs-device-mock-safe-top: 11.5023%; } /* Split from metrics.css — keep import order in ../metrics.css stable. */ :root { --hs-device-mock-safe-bottom: 9.507%; --hs-device-mock-safe-chrome: #000000; /* Typography scale */ --hs-text-2xs: 0.5625rem; --hs-text-xs: 0.625rem; --hs-text-sm: 0.75rem; --hs-text-md: 0.8125rem; --hs-text-lg: 1.0625rem; --hs-text-xl: 1.25rem; --hs-text-2xl: 1.75rem; /* Semantic typography */ --hs-text-meta: var(--hs-text-2xs); --hs-text-kicker: var(--hs-text-xs); --hs-text-label: var(--hs-text-xs); --hs-text-body: var(--hs-text-md); --hs-text-modal-title: var(--hs-text-lg); --hs-text-section-title: var(--hs-text-xl); --hs-text-page-title: var(--hs-text-lg); --hs-text-display: 1.5rem; --hs-text-hero: 2.25rem; --hs-text-prose-h1: 2.5rem; --hs-text-prose-h2: 1.625rem; --hs-text-prose-h3: 1.3125rem; --hs-text-prose-h4: 1.125rem; --hs-text-prose-lead: 1.125rem; --hs-text-prose-h1-sm: 2rem; /* Font weight */ --hs-font-weight-regular: 400; --hs-font-weight-medium: 500; --hs-font-weight-semibold: 600; --hs-font-weight-bold: 700; --hs-font-weight-extrabold: 800; /* Letter spacing */ --hs-tracking-kicker: 0.08em; --hs-tracking-title: -0.04em; --hs-tracking-section: -0.03em; --hs-tracking-display: -0.05em; --hs-tracking-display-tight: -0.055em; --hs-tracking-heading: -0.035em; --hs-tracking-body-tight: -0.025em; /* Line height */ --hs-leading-tight: 1.1; --hs-leading-snug: 1.2; --hs-leading-normal: 1.5; --hs-leading-prose: 1.7; --hs-leading-prose-tight: 1.08; --hs-leading-prose-h2: 1.2; --hs-leading-prose-h3: 1.25; --hs-leading-prose-h4: 1.3; --hs-leading-prose-lead: 1.6; /* Layout rhythm */ --hs-space-header: 7px; --hs-space-label: 5px; /** Modal shell inset — header, body, footer (default / wide). */ --hs-space-micro: 3px; --hs-space-tight: 2px; /* Toggle — track and thumb geometry */ --hs-toggle-track-width-sm: 32px; --hs-toggle-track-height-sm: 18px; --hs-toggle-thumb-size-sm: 14px; --hs-toggle-track-width-md: 40px; --hs-toggle-track-height-md: 22px; --hs-toggle-thumb-size-md: 18px; --hs-gap-compact: 6px; --hs-gap-inline: 6px; --hs-underline-offset: 4px; /* Control padding */ --hs-control-padding-x: 10px; --hs-control-padding-x-compact: 8px; --hs-field-message-padding-inline: var(--hs-space-tight); --hs-segmented-padding-x: var(--hs-control-padding-x); --hs-segmented-padding-x-dense: var(--hs-space-header); /* Track height follows the same active scale as TextInput / Select on the host. */ --hs-segmented-track-height: var(--hs-control-active-height, var(--hs-form-field-size-md-height)); } /* Split from metrics.css — keep import order in ../metrics.css stable. */ :root { --hs-segmented-font-size-dense: var(--hs-text-2xs); --hs-segmented-font-weight-dense: var(--hs-font-weight-medium); --hs-segmented-line-height-dense: 1; /* Physical QR badge — 70×150 mm trim @ 4px/mm (280×600 design px, aspect 7:15); cqw in qrPhysicalBadgeScale */ --hs-qr-badge-width-ref: 280; --hs-qr-badge-sheet-width-ref: 640; --hs-qr-badge-sheet-gap-ref: 80; --hs-qr-badge-height-ref: 600; --hs-qr-badge-radius-ref: 30; --hs-qr-badge-aspect: 280 / 600; --hs-qr-badge-surface: #570001; --hs-qr-badge-ink: #e2cf6e; --hs-qr-badge-footer-tone-steps: 4; --hs-qr-badge-footer-tone-step-percent: 8%; --hs-qr-badge-footer-tone-mix: calc( var(--hs-qr-badge-footer-tone-steps) * var(--hs-qr-badge-footer-tone-step-percent) ); --hs-qr-badge-lanyard-slot-color: #ffffff; --hs-qr-badge-lanyard-slot-width-mm: 26; --hs-qr-badge-lanyard-slot-height-mm: 3; --hs-qr-badge-lanyard-slot-width-ref: 104; --hs-qr-badge-lanyard-slot-height-ref: 12; --hs-qr-badge-qr-zone-bg: #570001; --hs-qr-badge-red-surface: #570001; --hs-qr-badge-red-bg-spot-light: #ff8080; --hs-qr-badge-red-bg-spot-deep: #0f0000; --hs-qr-badge-red-ink: #e2cf6e; --hs-qr-badge-red-footer-ink: #e2cf6e; --hs-qr-badge-red-qr-zone-bg: #570001; --hs-qr-badge-blue-surface: #323e7d; --hs-qr-badge-blue-bg-spot-light: #010052; --hs-qr-badge-blue-bg-spot-deep: #9bd0ff; --hs-qr-badge-blue-ink: #f6ffb3; --hs-qr-badge-blue-footer-ink: #f6ffb3; --hs-qr-badge-footer-ink: var(--hs-qr-badge-red-footer-ink); --hs-qr-badge-blue-qr-zone-bg: #6181bd; --hs-qr-badge-content-padding-inline-ref: 24; --hs-qr-badge-work-width-ref: 232; --hs-qr-badge-padding-block-start-ref: 24; --hs-qr-badge-padding-block-end-ref: 24; --hs-qr-badge-gap-lanyard-slot-to-brand-ref: 24; --hs-qr-badge-brand-wordmark-fit-divisor-ref: 7; --hs-qr-badge-brand-font: var(--hs-public-online-menu-logo-font); --hs-qr-badge-brand-weight: 1000; --hs-qr-badge-brand-tracking: -0.05em; --hs-qr-badge-brand-line-height: 1; --hs-qr-badge-brand-line-gap-ref: 0; --hs-qr-badge-gap-brand-to-headline-ref: 14; --hs-qr-badge-headline-padding-block-ref: 0; --hs-qr-badge-headline-lead-to-services-gap-ref: 8; --hs-qr-badge-headline-line-clamp: 5; --hs-qr-badge-gap-headline-to-qr-ref: 10; --hs-qr-badge-headline-max-width-ref: var(--hs-qr-badge-work-width-ref); --hs-qr-badge-headline-size-ref: 18; --hs-qr-badge-headline-leading-ref: 22; --hs-qr-badge-headline-weight: var(--hs-font-weight-extrabold); --hs-qr-badge-headline-services-size-ref: 14; --hs-qr-badge-headline-services-leading-ref: 16; --hs-qr-badge-headline-services-weight: 600; --hs-qr-badge-headline-services-gap-ref: 2; --hs-qr-badge-qr-size-ref: 180; --hs-qr-badge-qr-zone-inset-ref: 4; --hs-qr-badge-qr-zone-radius-offset-ref: 2; --hs-qr-badge-qr-placeholder-size-ref: 160; --hs-qr-badge-qr-placeholder-padding-ref: 2; --hs-qr-badge-qr-placeholder-radius-ref: 8; --hs-qr-badge-qr-fg: #1a1a1a; --hs-qr-badge-qr-bg: #ffffff; --hs-qr-badge-bg-spot-x-pct: 45; --hs-qr-badge-bg-spot-y-pct: 45; --hs-qr-badge-bg-angle-deg: 90; --hs-qr-badge-bg-grain-opacity: 0.1; --hs-qr-badge-location-type-size-ref: 20; --hs-qr-badge-location-type-weight: var(--hs-font-weight-bold); --hs-qr-badge-gap-qr-to-location-ref: 10; --hs-qr-badge-gap-location-type-to-code-ref: 2; --hs-qr-badge-location-code-size-ref: 80; --hs-qr-badge-location-code-width-ref: 232; --hs-qr-badge-location-code-weight: 700; --hs-qr-badge-gap-location-to-footer-ref: 0; --hs-qr-badge-footer-size-ref: 10; --hs-qr-badge-footer-leading-ref: 14; --hs-qr-badge-footer-line-clamp: 3; --hs-qr-badge-footer-max-width-ref: 232; --hs-qr-badge-footer-weight: var(--hs-font-weight-bold); /* Beach location map — see map/README.md; artboard @ 1572×886 */ --hs-location-map-width-ref: 1572; --hs-location-map-height-ref: 886; --hs-location-map-aspect: 1572 / 886; --hs-location-map-sand: #f6f3ee; --hs-location-map-west-fill: #711b1c; --hs-location-map-east-fill: #323e7d; --hs-location-map-marker-ink: #ffffff; --hs-location-map-sea-ink: #323e7d; --hs-location-map-marker-square-ref: 51; --hs-location-map-marker-narrow-width-ref: 32; --hs-location-map-marker-narrow-height-ref: 59; --hs-location-map-marker-radius-ref: 6; --hs-location-map-label-chaise-size-ref: 11; --hs-location-map-label-chaise-leading-ref: 13; --hs-location-map-label-bed-size-ref: 13; --hs-location-map-label-bed-leading-ref: 16; --hs-location-map-sea-label-size-ref: 15; --hs-location-map-sea-label-leading-ref: 18; --hs-location-map-sea-label-top-ref: 848; --hs-location-map-inset-x-ref: 60; --hs-location-map-inset-top-ref: 16; --hs-location-map-inset-bottom-ref: 20; --hs-location-map-chrome-padding-y-ref: 10; --hs-location-map-chrome-content-height-ref: 32; --hs-location-map-chrome-band-height-ref: 52; --hs-location-map-chrome-gap-ref: 10; --hs-location-map-chrome-inner-gap-ref: 12; --hs-location-map-sea-band-height-ref: 22; --hs-location-map-sea-gap-ref: 8; --hs-location-map-overlay-padding-x-ref: 12; --hs-location-map-overlay-padding-y-ref: 7; --hs-location-map-overlay-gap-ref: 6; --hs-location-map-overlay-title-size-ref: 15; --hs-location-map-overlay-title-leading-ref: 18; --hs-location-map-overlay-hint-size-ref: 12; --hs-location-map-overlay-hint-leading-ref: 14; } /* Split from metrics.css — keep import order in ../metrics.css stable. */ :root { /* Table density — admin workspace baseline */ --hs-table-bg: transparent; --hs-table-border-color: var(--hs-line-color); --hs-table-border-width: var(--hs-line-width); --hs-table-caption-padding-y: var(--hs-space-2); --hs-table-caption-color: var(--hs-muted); --hs-table-cell-padding-x: var(--hs-space-2); --hs-table-cell-padding-y: var(--hs-space-header); --hs-table-cell-padding-y-compact: var(--hs-space-micro); --hs-table-cell-divider-color: var(--hs-line-color); /* Column air — must match COLUMN_AIR_* in textMeasure.ts and data-table-column-air on */ --hs-table-column-air-x: 14px; --hs-table-column-air-total: calc(var(--hs-table-column-air-x) * 2); --hs-table-font-scale: 1.08; --hs-table-admin-compact-header-text: calc(var(--hs-text-xs) * var(--hs-table-font-scale)); --hs-table-admin-compact-body-text: calc(var(--hs-text-xs) * var(--hs-table-font-scale)); --hs-table-header-height: var(--hs-control-height-md); /* Same tone as compact/meta column headers (e.g. «Обновлено»). */ --hs-table-header-color: var(--hs-table-mono-color); --hs-table-header-font: var(--hs-font-mono); --hs-table-header-text: var(--hs-table-admin-compact-header-text); --hs-table-header-tracking: 0.02em; --hs-table-header-transform: none; --hs-table-body-text: var(--hs-table-admin-compact-body-text); --hs-table-body-line-height: var(--hs-leading-snug); --hs-table-secondary-text: calc(var(--hs-text-2xs) * var(--hs-table-font-scale)); --hs-table-secondary-color: var(--hs-muted); --hs-table-mono-text: var(--hs-table-admin-compact-body-text); --hs-table-mono-color: var(--hs-muted); --hs-table-primary-weight: var(--hs-font-weight-semibold); --hs-table-row-min-height: 44px; --hs-table-action-size: 24px; --hs-table-action-icon-size: 14px; --hs-table-action-gap: 3px; --hs-table-empty-padding: var(--hs-space-4); --hs-table-empty-color: var(--hs-muted); --hs-table-empty-line-height: var(--hs-leading-normal); --hs-table-admin-col-select-width: 34px; --hs-table-admin-col-name-width: 39%; --hs-table-admin-col-category-width: 27%; --hs-table-admin-col-category-inset: var(--hs-space-header); --hs-table-admin-col-status-width: var(--hs-table-admin-col-side-utility-width); --hs-table-admin-col-volume-width: 72px; --hs-table-admin-col-price-width: var(--hs-table-admin-col-side-utility-width); --hs-table-admin-col-side-utility-width: 64px; --hs-table-admin-col-actions-width: 58px; --hs-table-admin-compact-padding-x: 4px; --hs-table-admin-utility-gap: var(--hs-space-2); --hs-table-admin-utility-group-start: var(--hs-space-2); --hs-table-col-compact-max-share: 0.42; --hs-table-col-name-flex-weight: 31; --hs-table-col-category-flex-weight: 19; --hs-table-col-name-width: 31%; --hs-table-col-category-width: 19%; --hs-table-col-ch-px: 8px; --hs-table-col-fallback-workspace-width: 1040px; --hs-table-col-select-width: 42px; --hs-table-col-status-width: 64px; --hs-table-col-volume-width: 92px; --hs-table-col-price-width: 116px; --hs-table-col-actions-width: 86px; --hs-table-col-badge-width: 88px; --hs-table-col-meta-width: 80px; --hs-table-col-edge-air: 0.15; --hs-table-col-edge-air-compact: 0.12; --hs-table-col-edge-air-dense: 0.1; --hs-table-col-density-slot-px: 72; --hs-table-col-min-share-base: 0.35; --hs-table-col-min-share-density: 0.15; --hs-table-col-sample-rows: 12; /* Must match NAME_INLINE_TAG_GAP_PX in textMeasure.ts */ --hs-table-name-inline-gap: var(--hs-space-2); --hs-table-tag-scale: 0.75; --hs-table-tag-min-height: calc(var(--hs-tag-density-sm) * var(--hs-table-tag-scale)); --hs-table-tag-gap: calc(var(--hs-space-1) * var(--hs-table-tag-scale)); --hs-table-tag-padding-x: calc(var(--hs-control-padding-x-compact) * var(--hs-table-tag-scale)); --hs-table-tag-font-size: calc(var(--hs-text-xs) * var(--hs-table-tag-scale) * var(--hs-table-font-scale)); --hs-table-tag-line-height: 1; --hs-table-tag-icon-size: calc(14px * var(--hs-table-tag-scale)); --hs-table-tag-group-gap: calc(var(--hs-space-2) * var(--hs-table-tag-scale)); --hs-table-select-size: var(--hs-size-icon-md); --hs-table-select-dot-size: 8px; --hs-table-select-border-color: var(--hs-line); --hs-table-select-active-color: var(--hs-ink); --hs-table-mobile-row-gap: var(--hs-space-2); --hs-table-mobile-row-gap-inline: var(--hs-space-3); --hs-table-mobile-row-padding: var(--hs-control-padding-x); --hs-table-mobile-row-radius: var(--hs-radius-sm); --hs-table-mobile-label-gap: var(--hs-space-micro); --hs-table-toolbar-gap: var(--hs-space-3); --hs-table-toolbar-filter-width: 180px; --hs-table-toolbar-stack-breakpoint: var(--hs-breakpoint-stack-sm); --hs-table-toolbar-divider-height: var(--hs-control-height-sm); --hs-search-input-icon-gap: var(--hs-space-2); --hs-search-input-icon-size: var(--hs-control-active-icon-size, var(--hs-control-height-icon)); --hs-search-input-padding-inline-start: calc( var(--hs-control-active-padding-x, var(--hs-control-padding-x)) + var(--hs-search-input-icon-size) + var(--hs-search-input-icon-gap) ); --hs-table-workspace-gap: var(--hs-space-3); --hs-table-section-gap: var(--hs-space-3); --hs-table-footer-color: var(--hs-faint); --hs-table-footer-font-size: calc(var(--hs-text-kicker) * var(--hs-table-font-scale)); --hs-table-footer-gap: var(--hs-space-3); /** @deprecated Use --hs-table-workspace-gap on workspace root; kept for external refs only. */ --hs-table-footer-margin-top: var(--hs-table-workspace-gap); --hs-table-pattern-max-width: var(--hs-content-width-lg); /* Column kind contract — all project tables (see table-column-contract.css) */ --hs-table-header-text-align-default: left; --hs-table-col-align-start: left; --hs-table-col-align-end: right; --hs-table-col-align-center: center; --hs-table-col-text-align: var(--hs-table-header-text-align-default); --hs-table-col-numeric-font-variant: tabular-nums; --hs-table-col-presentation-compact-color: var(--hs-table-mono-color); --hs-table-col-presentation-compact-font-family: var(--hs-table-header-font); --hs-table-col-presentation-compact-font-size: var(--hs-table-mono-text); --hs-table-col-presentation-compact-line-height: var(--hs-leading-normal); } /* Split from metrics.css — keep import order in ../metrics.css stable. */ :root { --hs-table-actions-justify-end: flex-end; --hs-table-actions-justify-center: center; --hs-table-actions-justify: var(--hs-table-actions-justify-end); /* Focus ring */ --hs-focus-ring-width: 2px; --hs-focus-ring-offset: 1px; /* Content width */ --hs-content-width-sm: 620px; --hs-content-width-md: 720px; --hs-content-width-lead: 680px; --hs-content-width-lg: 1040px; --hs-content-width-xl: 1200px; --hs-content-width-prose: 860px; --hs-content-width-prose-h1: 760px; /* Breakpoints — token values for docs/JS; @media must use matching literal px/rem (var() invalid). */ --hs-breakpoint-stack-sm: 560px; --hs-breakpoint-content-md: var(--hs-content-width-md); --hs-breakpoint-reference-wide: 1024px; --hs-breakpoint-reference-narrow: 719px; --hs-breakpoint-grid-embedded: 35rem; --hs-breakpoint-grid-md: 42rem; --hs-breakpoint-grid-lg: 66rem; /* Grid system — column count lives in grid-system.css (--hs-grid-columns) */ --hs-grid-unit: 8px; --hs-page-max-width: var(--hs-content-width-xl); --hs-page-padding-inline: var(--hs-space-6); /* Component sizes */ --hs-z-overlay: 1000; --hs-z-popover: 1200; --hs-modal-max-width: 480px; --hs-modal-max-width-wide: 640px; --hs-modal-editor-viewport-inset: calc(var(--hs-space-5) * 2); --hs-modal-editor-height: 87dvh; /** Target dialog width (preview + fields); capped by viewport in Modal. */ --hs-modal-editor-width: 40rem; --hs-modal-editor-max-width: min(100%, calc(100vw - var(--hs-modal-editor-viewport-inset))); --hs-modal-editor-preview-min-width: 11rem; --hs-modal-editor-preview-column-ratio: 36%; /** Editor modal shell inset — header, body, footer; same rhythm as preview ↔ fields gap. */ --hs-modal-editor-inset: 20px; /** Stack preview above fields when the modal container is narrower than this. */ --hs-modal-editor-stack-breakpoint: 36rem; /** Cap scrollable preview band height in stack layout (content-driven row). */ --hs-modal-editor-stack-preview-max-height: 20rem; --hs-modal-max-width-sm: 400px; /* Menu item editor modal — dense host (see MenuItemEditorModal.module.css, control-density.css) */ --hs-menu-item-editor-gap: var(--hs-space-2); --hs-menu-item-editor-column-gap: var(--hs-modal-editor-inset); /** Fields column: combo/list rows stack below this width (side-by-side modal). */ --hs-menu-item-editor-fields-narrow-breakpoint: 24rem; /** Fields column: volume · price · tag become 2 columns below this width. */ --hs-menu-item-editor-fields-triple-breakpoint: 28rem; /** Scrollport inset so dense control focus rings are not clipped by overflow-x. */ --hs-menu-item-editor-fields-focus-gutter: var(--hs-line-width); --hs-menu-item-editor-fields-scrollbar-gap: 6px; --hs-menu-item-editor-control-height: var(--hs-control-density-dense-height); --hs-menu-item-editor-control-font-size: var(--hs-control-density-dense-font-size); --hs-menu-item-editor-textarea-min-height: var(--hs-control-density-dense-textarea-min-height); --hs-menu-item-editor-label-size: var(--hs-control-density-dense-label-size); --hs-menu-item-editor-description-size: var(--hs-control-density-dense-description-size); --hs-tag-swatch-bg: transparent; --hs-alert-media-size: 40px; --hs-alert-media-bg: color-mix(in srgb, var(--hs-muted) 12%, transparent); --hs-alert-media-ink: var(--hs-muted); --hs-alert-media-bg-danger: color-mix(in srgb, var(--hs-danger) 12%, transparent); --hs-size-icon-sm: 12px; --hs-size-icon-md: 18px; --hs-size-swatch-height: 48px; --hs-token-ref-chip-size: var(--hs-table-action-size); --hs-token-ref-preview-col: calc( var(--hs-token-ref-chip-size) + var(--hs-table-cell-padding-x) + var(--hs-table-column-air-x) ); --hs-token-ref-row-min-height: var(--hs-table-row-min-height); } /* * Unified line contract — solid + micro-dash (2+4 @ 1px). * Tokens: --hs-line-width, --hs-line-color, --hs-line-dash-* in metrics.css. * Scale hosts may override --hs-line-rule-stroke, --hs-line-dash-pattern-length, * --hs-line-dash-pattern-period for proportional guest cards. */ .hs-line-rule-solid { display: block; width: 100%; height: var(--hs-line-width); border: 0; margin: 0; padding: 0; background: var(--hs-line-color); } .hs-line-dash-gradient, .hs-line-rule-dashed, .hs-line-between > * + *::before, .hs-line-edge-bottom::after { background-color: transparent; background-image: repeating-linear-gradient( to right, var(--hs-line-color) 0, var(--hs-line-color) var(--hs-line-dash-pattern-length, var(--hs-line-dash-length)), transparent var(--hs-line-dash-pattern-length, var(--hs-line-dash-length)), transparent var(--hs-line-dash-pattern-period, var(--hs-line-dash-period)) ); background-repeat: repeat-x; background-size: var(--hs-line-dash-pattern-period, var(--hs-line-dash-period)) var(--hs-line-rule-stroke, var(--hs-line-width)); background-position: 0 50%; } .hs-line-rule-dashed { display: block; width: 100%; height: var(--hs-line-rule-stroke, var(--hs-line-width)); border: 0; margin: 0; padding: 0; } .hs-line-between > * + * { position: relative; border-top: none; } .hs-line-between > * + *::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--hs-line-rule-stroke, var(--hs-line-width)); } .hs-line-edge-bottom { position: relative; } .hs-line-edge-bottom::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: var(--hs-line-rule-stroke, var(--hs-line-width)); pointer-events: none; } .hs-line-border-dashed { border: var(--hs-line-width) dashed var(--hs-line-color); } .hs-line-border-dashed-bottom { border-bottom: var(--hs-line-width) dashed var(--hs-line-color); } .hs-line-rule-dashed-vertical { background-color: transparent; background-image: repeating-linear-gradient( to bottom, var(--hs-line-color) 0, var(--hs-line-color) var(--hs-line-dash-pattern-length, var(--hs-line-dash-length)), transparent var(--hs-line-dash-pattern-length, var(--hs-line-dash-length)), transparent var(--hs-line-dash-pattern-period, var(--hs-line-dash-period)) ); background-repeat: repeat-y; background-size: var(--hs-line-rule-stroke, var(--hs-line-width)) var(--hs-line-dash-pattern-period, var(--hs-line-dash-period)); background-position: 50% 0; } /* Solid hairline on container edge — parent gains position: relative */ .hs-line-hairline-top::before, .hs-line-hairline-bottom::after { content: ""; position: absolute; left: 0; right: 0; height: var(--hs-line-rule-stroke, var(--hs-line-width)); background: var(--hs-line-color); pointer-events: none; } .hs-line-hairline-top { position: relative; border-top: none; } .hs-line-hairline-top::before { top: 0; } .hs-line-hairline-bottom { position: relative; border-bottom: none; } .hs-line-hairline-bottom::after { bottom: 0; } /* Micro-dash frame (4 edges) — replaces native border: dashed on upload zones */ .hs-line-frame-dashed { --_hs-line-dash-h: repeating-linear-gradient( to right, var(--hs-line-color) 0, var(--hs-line-color) var(--hs-line-dash-pattern-length, var(--hs-line-dash-length)), transparent var(--hs-line-dash-pattern-length, var(--hs-line-dash-length)), transparent var(--hs-line-dash-pattern-period, var(--hs-line-dash-period)) ); --_hs-line-dash-v: repeating-linear-gradient( to bottom, var(--hs-line-color) 0, var(--hs-line-color) var(--hs-line-dash-pattern-length, var(--hs-line-dash-length)), transparent var(--hs-line-dash-pattern-length, var(--hs-line-dash-length)), transparent var(--hs-line-dash-pattern-period, var(--hs-line-dash-period)) ); border: none; background-image: var(--_hs-line-dash-h), var(--_hs-line-dash-h), var(--_hs-line-dash-v), var(--_hs-line-dash-v); background-size: 100% var(--hs-line-width), 100% var(--hs-line-width), var(--hs-line-width) 100%, var(--hs-line-width) 100%; background-position: top, bottom, left, right; background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; } /* * Local font entrypoint (ported from UI Kit). * Do not import external font CDNs or Google Fonts. */ /* * Material Symbols Outlined — local font, Apache-2.0. * Glyph file: public/fonts/MaterialSymbolsOutlined/MaterialSymbolsOutlined-400.ttf */ @font-face { font-family: "Material Symbols Outlined"; font-style: normal; font-weight: 400; src: url("/fonts/MaterialSymbolsOutlined/MaterialSymbolsOutlined-400.ttf") format("truetype"); font-display: swap; } .hs-material-symbol { font-family: var(--hs-font-material-symbols); font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; color: currentColor; -webkit-font-smoothing: antialiased; font-feature-settings: "liga"; -webkit-font-feature-settings: "liga"; } @font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat/Montserrat-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat/Montserrat-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat/Montserrat-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat/Montserrat-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat/Montserrat-Black.woff2") format("woff2"); font-weight: 900 1000; font-style: normal; font-display: swap; } @font-face { font-family: "Aurulent Sans Mono"; src: url("/fonts/AurulentSansMono/AurulentSansMNerdFontMono-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Jubel Trial"; src: url("/fonts/Jubel/jubeltrial-regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } :root { --hs-font-ui: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --hs-font-mono: "Aurulent Sans Mono", ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace; --hs-font-public-menu-logo: "Jubel Trial", var(--hs-font-ui); --hs-font-material-symbols: "Material Symbols Outlined", sans-serif; } body { font-family: var(--hs-font-ui); } code, pre, kbd, samp { font-family: var(--hs-font-mono); } /* * Minimal scroll chrome — opt in with data-hs-scrollbar="minimal". * Tokens: --hs-scrollbar-* in metrics.css. Contract: src/docs/scroll-chrome.md */ [data-hs-scrollbar="minimal"] { scrollbar-gutter: auto; scrollbar-width: thin; scrollbar-color: var(--hs-scrollbar-thumb) var(--hs-scrollbar-track); } [data-hs-scrollbar="minimal"]::-webkit-scrollbar { width: var(--hs-scrollbar-size); height: var(--hs-scrollbar-size); } [data-hs-scrollbar="minimal"]::-webkit-scrollbar-track { background: var(--hs-scrollbar-track); } [data-hs-scrollbar="minimal"]::-webkit-scrollbar-thumb { background-color: var(--hs-scrollbar-thumb); border-radius: var(--hs-scrollbar-thumb-radius); min-height: var(--hs-scrollbar-thumb-min-length); } [data-hs-scrollbar="minimal"]::-webkit-scrollbar-thumb:hover { background-color: var(--hs-scrollbar-thumb-hover); } [data-hs-scrollbar="minimal"]::-webkit-scrollbar-thumb:active { background-color: var(--hs-scrollbar-thumb-active); } [data-hs-scrollbar="minimal"]::-webkit-scrollbar-corner { background: transparent; } /* Guest #public-menu � prod PublicMenuApp; tokens from metrics/*.css (via metrics.css barrel), layout owned here (not preview kit). */ /* Guest menu page shell — frame scale vars + scroll chrome. * Composed via publicMenuPage.css. */ /* Guest #public-menu — prod PublicMenuApp; token refs in metrics/*.css, layout in publicMenuPageShell.css. */ [data-hs-public-menu-page] { min-height: 100vh; min-height: 100dvh; height: 100dvh; min-width: 0; background: transparent; color: var(--hs-public-online-menu-accent); overflow: hidden; --hs-checkbox-checked-color: var(--hs-public-menu-add-bg); } [data-hs-public-menu-page][data-hs-public-menu-embedded] { min-height: 0; height: 100%; max-height: 100%; overflow: hidden; } [data-hs-public-menu-page][data-hs-public-menu-embedded] [data-hs-brght-lava-bg] { position: absolute; } [data-hs-public-menu-page] .hs-public-menu-page__frame { --hs-pmp-w: var(--hs-public-menu-page-work-width-ref); --hs-scale-cqw: calc(100cqw / var(--hs-pmp-w)); container-type: inline-size; width: min(100%, calc(var(--hs-pmp-w) * 1px)); height: 100%; min-height: 0; margin-inline: auto; position: relative; z-index: 1; --hs-pmp-page-x: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-page-x-ref)); --hs-pmp-header-h: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-header-h-ref)); --hs-pmp-header-icon: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-header-icon-ref)); --hs-pmp-stack-gap: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-stack-gap-ref)); --hs-pmp-card-grid-gap: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-card-grid-gap-ref)); --hs-pmp-page-pad-bottom: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-page-pad-bottom-ref)); --hs-pmp-scroll-margin-extra: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-scroll-margin-extra-ref)); --hs-pmp-logo-size: calc(var(--hs-scale-cqw) * var(--hs-public-menu-page-logo-size-ref)); --hs-pmp-section-title-size: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-section-title-size-ref)); --hs-pmp-search-trigger: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-search-trigger-ref)); --hs-pmp-search-field-h: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-search-field-h-ref)); --hs-pmp-search-shell-top: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-search-shell-top-ref)); --hs-pmp-search-shell-top-active: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-search-shell-top-active-ref)); --hs-pmp-search-close-size: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-search-close-size-ref)); --hs-pmp-search-icon-nudge: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-search-icon-nudge-px-ref)); --hs-pmp-normal-hide-shift: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-normal-hide-shift-ref)); --hs-pmp-start-pad-y: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-start-pad-y-ref)); --hs-pmp-category-size: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-category-size-ref)); --hs-pmp-category-line: calc( var(--hs-pmp-category-size) * var(--hs-public-online-menu-category-line-ratio-ref) ); --hs-pmp-category-min-h: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-category-row-min-h-ref)); --hs-pmp-category-rule: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-category-rule-ref)); --hs-pmp-lang-size: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-lang-size-ref)); --hs-pmp-lang-line: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-lang-line-ref)); --hs-pmp-lang-pad-bottom: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-lang-pad-bottom-ref)); --hs-pmp-lang-lift: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-lang-lift-ref)); --hs-pmp-lang-inset-bottom: max(0px, calc(var(--hs-pmp-lang-pad-bottom) - var(--hs-pmp-lang-lift))); --hs-pmp-lang-pill-inset: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-lang-pill-inset-ref)); --hs-pmp-lang-pill-gap: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-lang-pill-gap-ref)); --hs-pmp-lang-pill-pad-x: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-lang-pill-pad-x-ref)); --hs-pmp-lang-pill-min-w: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-lang-pill-min-w-ref)); --hs-pmp-lang-slide-radius: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-lang-slide-radius-ref)); --hs-pmp-menu-section-pad-top: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-menu-section-pad-top-ref)); --hs-pmp-menu-section-margin: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-menu-section-margin-ref)); --hs-pmp-menu-group-title-size: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-menu-group-title-size-ref)); --hs-pmp-menu-section-description-size: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-menu-section-description-size-ref)); --hs-pmp-menu-section-description-line: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-menu-section-description-line-ref)); --hs-pmp-menu-section-description-gap: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-menu-section-description-gap-ref)); --hs-pmp-results-shift-y: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-results-shift-y-ref)); --hs-pmp-results-radius: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-results-radius-ref)); --hs-pmp-search-ring: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-search-ring-ref)); --hs-pmp-search-icon: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-search-icon-ref)); --hs-pmp-search-inner-gap: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-search-inner-gap-ref)); --hs-pmp-search-input-size: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-search-input-size-ref)); --hs-pmp-search-input-slide: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-search-input-slide-ref)); --hs-pmp-close-bar-w: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-close-bar-w-ref)); --hs-pmp-close-bar-h: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-close-bar-h-ref)); --hs-pmp-start-logo-gap: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-start-logo-gap-ref)); --hs-pmp-section-nav-gap: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-section-nav-gap-ref)); --hs-pmp-footer-margin: calc(var(--hs-scale-cqw) * var(--hs-public-menu-page-footer-margin-ref)); --hs-pmp-admin-entry-pad-x: calc(var(--hs-scale-cqw) * var(--hs-public-menu-page-admin-entry-pad-x-ref)); --hs-pmp-admin-entry-size: calc(var(--hs-scale-cqw) * var(--hs-public-menu-page-admin-entry-size-ref)); --hs-pmp-start-categories-margin: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-start-categories-margin-ref)); --hs-pmp-start-fade-shift: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-start-fade-shift-ref)); --hs-pmp-scroll-spy-band-extra: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-scroll-spy-band-ref)); --hs-pmp-scroll-spy-read-band: calc( var(--hs-pmp-menu-section-pad-top) + var(--hs-pmp-scroll-spy-band-extra) ); } [data-hs-public-menu-page] .hs-public-menu-page__shell { width: 100%; height: 100%; min-height: 0; overflow-x: clip; overflow-y: auto; overscroll-behavior-x: none; background: transparent; color: var(--hs-public-online-menu-accent); font-family: var(--hs-public-online-menu-logo-font); scrollbar-width: none; scroll-padding-top: calc(var(--hs-pmp-header-h) + var(--hs-pmp-scroll-margin-extra)); } [data-hs-public-menu-page] .hs-public-menu-page__shell::-webkit-scrollbar { display: none; width: 0; height: 0; } [data-hs-public-menu-page] .hs-public-menu-page__shell[data-hs-public-menu-cart-pad] { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); } /* Guest cart — hide on start screen via scroll-root attr (no React/GSAP toggle while scrolling). */ [data-hs-public-menu-page]:not([data-hs-public-menu-embedded]) .hs-public-menu-page__shell:not([data-hs-public-menu-compact-header]) ~ [data-hs-public-menu-cart-root] [data-hs-public-menu-cart-reveal]:not([data-hs-public-menu-cart-reveal-open]) > * { opacity: 0 !important; pointer-events: none !important; } /* Fixed header + search (prod .bob-header-root). * Composed via publicMenuPage.css. */ /* —— Fixed header (prod .bob-header-root) —— */ [data-hs-public-menu-page] .hs-public-menu-page__header-root { position: fixed; z-index: 80; top: 0; left: 50%; width: min(100%, calc(var(--hs-public-menu-page-work-width-ref) * 1px)); transform: translateX(-50%); pointer-events: none; } [data-hs-public-menu-page][data-hs-public-menu-embedded] .hs-public-menu-page__header-root, [data-hs-qr-landing-root][data-hs-qr-landing-embedded] .hs-public-menu-page__header-root { position: absolute; left: 0; transform: none; width: 100%; } [data-hs-public-menu-page] .hs-public-menu-page__search-stack { pointer-events: auto; } [data-hs-public-menu-page] .hs-public-menu-page__header { position: relative; width: 100%; height: var(--hs-pmp-header-h); min-height: var(--hs-pmp-header-h); overflow: hidden; box-sizing: border-box; background: transparent; color: var(--hs-public-online-menu-accent); transition: background-color var(--hs-public-online-menu-header-sticky-bg-duration) var(--hs-public-menu-page-search-ease); } [data-hs-public-menu-page] .hs-public-menu-page__header[data-header-bg="true"] { background: var(--hs-public-online-menu-header-bg); } [data-hs-public-menu-page] .hs-public-menu-page__normal { position: absolute; inset: 0; z-index: 1; display: grid; align-items: center; padding-inline: var(--hs-pmp-page-x); color: inherit; transition: transform var(--hs-public-online-menu-search-duration) var(--hs-public-menu-page-search-ease), opacity var(--hs-public-menu-page-normal-opacity-duration) ease; will-change: transform, opacity; } [data-hs-public-menu-page] .hs-public-menu-page__normal[data-mode="start"] { grid-template-columns: minmax(0, 1fr) var(--hs-pmp-search-trigger); grid-template-areas: "logo search-space"; column-gap: var(--hs-pmp-start-logo-gap); } [data-hs-public-menu-page] .hs-public-menu-page__normal[data-mode="section"] { grid-template-columns: var(--hs-pmp-header-icon) minmax(0, 1fr) var(--hs-pmp-header-icon) var(--hs-pmp-search-trigger); grid-template-areas: "prev title next search-space"; column-gap: var(--hs-pmp-section-nav-gap); } [data-hs-public-menu-page] .hs-public-menu-page__normal[data-mode="section"] .hs-public-menu-page__logo { display: none; } [data-hs-public-menu-page] .hs-public-menu-page__normal[data-mode="start"] .hs-public-menu-page__icon-btn, [data-hs-public-menu-page] .hs-public-menu-page__normal[data-mode="start"] .hs-public-menu-page__section-title { display: none; } [data-hs-public-menu-page] .hs-public-menu-page__header[data-search-active="true"] .hs-public-menu-page__normal { transform: translate3d(calc(-100% + var(--hs-pmp-normal-hide-shift)), 0, 0); opacity: var(--hs-public-online-menu-header-idle-opacity); pointer-events: none; } [data-hs-public-menu-page] .hs-public-menu-page__logo { grid-area: logo; min-width: 0; max-width: 100%; font-size: var(--hs-pmp-logo-size); line-height: 1; font-weight: var(--hs-public-online-menu-logo-weight); letter-spacing: var(--hs-public-online-menu-logo-tracking); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-hs-public-menu-page] .hs-public-menu-page__search-space { grid-area: search-space; width: var(--hs-pmp-search-trigger); height: var(--hs-pmp-search-trigger); flex-shrink: 0; pointer-events: none; } [data-hs-public-menu-page] .hs-public-menu-page__normal[data-mode="section"] .hs-public-menu-page__icon-btn:first-of-type { grid-area: prev; } [data-hs-public-menu-page] .hs-public-menu-page__normal[data-mode="section"] .hs-public-menu-page__section-title { grid-area: title; } [data-hs-public-menu-page] .hs-public-menu-page__normal[data-mode="section"] .hs-public-menu-page__icon-btn:last-of-type { grid-area: next; } [data-hs-public-menu-page] .hs-public-menu-page__section-title { min-width: 0; font-size: var(--hs-pmp-section-title-size); line-height: 1; font-weight: var(--hs-public-online-menu-logo-weight); letter-spacing: var(--hs-public-online-menu-logo-tracking); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } [data-hs-public-menu-page] .hs-public-menu-page__icon-btn { width: var(--hs-pmp-header-icon); height: var(--hs-pmp-header-icon); min-width: var(--hs-pmp-header-icon); min-height: var(--hs-pmp-header-icon); display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; } [data-hs-public-menu-page] .hs-public-menu-page__icon-btn:disabled { opacity: var(--hs-public-online-menu-control-disabled-opacity); cursor: default; } [data-hs-public-menu-page] .hs-public-menu-page__icon-btn svg { width: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-header-chevron-ref)); height: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-header-chevron-ref)); fill: currentColor; } [data-hs-public-menu-page] .hs-public-menu-page__search-shell { position: absolute; z-index: 3; top: var(--hs-pmp-search-shell-top); left: calc(100% - var(--hs-pmp-page-x) - var(--hs-pmp-search-trigger)); width: var(--hs-pmp-search-trigger); height: var(--hs-pmp-search-trigger); display: grid; grid-template-columns: var(--hs-pmp-search-trigger) 0 0; grid-template-rows: var(--hs-pmp-search-trigger); align-items: center; justify-items: center; column-gap: 0; padding: 0; overflow: hidden; box-sizing: border-box; border: var(--hs-pmp-search-ring) solid var(--hs-public-online-menu-accent); border-radius: 999px; background: transparent; color: var(--hs-public-online-menu-accent); transition: top var(--hs-public-online-menu-search-duration) var(--hs-public-menu-page-search-ease), left var(--hs-public-online-menu-search-duration) var(--hs-public-menu-page-search-ease), width var(--hs-public-online-menu-search-duration) var(--hs-public-menu-page-search-ease), height var(--hs-public-online-menu-search-duration) var(--hs-public-menu-page-search-ease), grid-template-columns var(--hs-public-online-menu-search-duration) var(--hs-public-menu-page-search-ease), grid-template-rows var(--hs-public-online-menu-search-duration) var(--hs-public-menu-page-search-ease), padding var(--hs-public-online-menu-search-duration) var(--hs-public-menu-page-search-ease), background-color var(--hs-public-menu-page-search-ui-duration) ease, border-color var(--hs-public-menu-page-search-ui-duration) ease; } [data-hs-public-menu-page] .hs-public-menu-page__search-shell[data-hs-search-flip-motion], [data-hs-public-menu-page] .hs-public-menu-page__normal[data-hs-search-flip-motion] { will-change: width, height, left, top; } [data-hs-public-menu-page] .hs-public-menu-page__header[data-search-active="true"] .hs-public-menu-page__search-shell { top: var(--hs-pmp-search-shell-top-active); left: var(--hs-pmp-page-x); width: calc(100% - (var(--hs-pmp-page-x) * 2)); height: var(--hs-pmp-search-field-h); grid-template-columns: var(--hs-pmp-search-trigger) minmax(0, 1fr) var(--hs-pmp-search-close-size); grid-template-rows: var(--hs-pmp-search-field-h); column-gap: var(--hs-pmp-search-inner-gap); padding: 0 var(--hs-pmp-search-inner-gap) 0 0; border-color: var(--hs-public-online-menu-header-field-border); background: var(--hs-public-online-menu-header-field); cursor: text; } [data-hs-public-menu-page] .hs-public-menu-page__search-open { grid-column: 1; grid-row: 1; width: var(--hs-pmp-search-trigger); height: var(--hs-pmp-search-trigger); display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; transition: width var(--hs-public-online-menu-search-duration) var(--hs-public-menu-page-search-ease), height var(--hs-public-online-menu-search-duration) var(--hs-public-menu-page-search-ease); } [data-hs-public-menu-page] .hs-public-menu-page__search-open[data-search-inactive] { cursor: default; opacity: var(--hs-public-online-menu-control-disabled-opacity); } [data-hs-public-menu-page] .hs-public-menu-page__header[data-search-active="true"] .hs-public-menu-page__search-open { width: var(--hs-pmp-search-trigger); height: var(--hs-pmp-search-field-h); pointer-events: none; } [data-hs-public-menu-page] .hs-public-menu-page__search-svg { width: var(--hs-pmp-search-icon); height: var(--hs-pmp-search-icon); display: block; overflow: visible; transform: translate3d(calc(-1 * var(--hs-pmp-search-icon-nudge)), calc(-1 * var(--hs-pmp-search-icon-nudge)), 0); transition: transform var(--hs-public-online-menu-search-duration) var(--hs-public-menu-page-search-ease); } [data-hs-public-menu-page] .hs-public-menu-page__header[data-search-active="true"] .hs-public-menu-page__search-svg { transform: translate3d(0, calc(-1 * var(--hs-pmp-search-icon-nudge)), 0); } [data-hs-public-menu-page] .hs-public-menu-page__search-glass, [data-hs-public-menu-page] .hs-public-menu-page__search-handle { vector-effect: non-scaling-stroke; fill: none; stroke: currentColor; stroke-width: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-search-icon-stroke-ref)); stroke-linecap: round; stroke-linejoin: round; } [data-hs-public-menu-page] .hs-public-menu-page__search-input-wrap { grid-column: 2; grid-row: 1; min-width: 0; width: 100%; height: 100%; display: flex; align-items: center; align-self: stretch; justify-self: stretch; opacity: 0; visibility: hidden; transform: translate3d(var(--hs-pmp-search-input-slide), 0, 0); transition: opacity var(--hs-public-menu-page-search-ui-duration) ease, transform var(--hs-public-menu-page-search-ui-transform-duration) var(--hs-public-menu-page-search-ease), visibility 0s linear var(--hs-public-menu-page-search-ui-transform-duration); } [data-hs-public-menu-page] .hs-public-menu-page__search-input { width: 100%; min-width: 0; height: 100%; box-sizing: border-box; padding: 0; border: 0; background: transparent; color: var(--hs-public-online-menu-accent); caret-color: var(--hs-public-online-menu-accent); font-size: var(--hs-pmp-search-input-size); line-height: var(--hs-pmp-search-field-h); font-weight: var(--hs-public-online-menu-search-input-weight); letter-spacing: var(--hs-public-online-menu-search-input-tracking); outline: none; } [data-hs-public-menu-page] .hs-public-menu-page__search-input::placeholder { color: var(--hs-public-online-menu-ink-muted); opacity: 1; } [data-hs-public-menu-page] .hs-public-menu-page__search-close { grid-column: 3; grid-row: 1; position: relative; width: var(--hs-pmp-search-close-size); height: var(--hs-pmp-search-close-size); display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--hs-public-online-menu-accent); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity var(--hs-public-menu-page-search-ui-duration) ease, visibility 0s linear var(--hs-public-menu-page-search-ui-duration); } [data-hs-public-menu-page] .hs-public-menu-page__search-close::before, [data-hs-public-menu-page] .hs-public-menu-page__search-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: var(--hs-pmp-close-bar-w); height: var(--hs-pmp-close-bar-h); background: currentColor; border-radius: var(--hs-pmp-close-bar-h); } [data-hs-public-menu-page] .hs-public-menu-page__search-close::before { transform: translate(-50%, -50%) rotate(45deg); } [data-hs-public-menu-page] .hs-public-menu-page__search-close::after { transform: translate(-50%, -50%) rotate(-45deg); } [data-hs-public-menu-page] .hs-public-menu-page__search-results { margin: var(--hs-pmp-stack-gap) var(--hs-pmp-page-x) 0; max-height: var(--hs-public-online-menu-results-max-height); overflow: auto; border-radius: var(--hs-pmp-results-radius); background: var(--hs-public-online-menu-results-bg); border: var(--hs-line-width) solid var(--hs-public-online-menu-results-border); opacity: 0; transform: translate3d(0, calc(-1 * var(--hs-pmp-results-shift-y)), 0); pointer-events: none; transition: opacity var(--hs-public-menu-page-search-ui-duration) ease, transform var(--hs-public-menu-page-search-ui-transform-duration) var(--hs-public-menu-page-search-ease); } [data-hs-public-menu-page] .hs-public-menu-page__search-results[data-visible="true"] { opacity: 1; transform: none; pointer-events: auto; } [data-hs-public-menu-page] .hs-public-menu-page__search-result-empty, [data-hs-public-menu-page] .hs-public-menu-page__search-result-row { display: block; width: 100%; padding: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-result-row-pad-block-ref)) var(--hs-pmp-page-x); border: 0; background: transparent; color: var(--hs-public-online-menu-accent); text-align: left; font-size: var(--hs-pmp-lang-size); font-weight: var(--hs-public-online-menu-search-result-weight); cursor: pointer; } [data-hs-public-menu-page] .hs-public-menu-page__search-result-row + .hs-public-menu-page__search-result-row { border-top: var(--hs-line-width) solid var(--hs-public-online-menu-result-divider); } /* Start screen (prod .start-screen). * Composed via publicMenuPage.css. */ /* —— Start screen — scroll-linked fade on category headings (PublicMenuApp parity) —— */ [data-hs-public-menu-page] .hs-public-menu-page__start-screen { min-height: 100svh; color: var(--hs-public-online-menu-accent); background: transparent; padding: calc(var(--hs-pmp-start-pad-y) + var(--hs-pmp-header-h)) var(--hs-pmp-page-x) calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-start-pad-bottom-ref)); display: grid; grid-template-rows: minmax(0, 1fr) auto; box-sizing: border-box; opacity: var(--hs-pmp-start-fade-opacity, 1); } /* Opacity-only fade — transform on every scroll tick was janky in Chrome. */ [data-hs-public-menu-page] .hs-public-menu-page__start-screen:not([data-start-screen-faded]) { will-change: opacity; } /* Admin iPhone mock: content slot height, not Safari svh — docs/DEVICE_MOCK_IPHONE.md */ [data-hs-public-menu-page][data-hs-public-menu-embedded] .hs-public-menu-page__start-screen { min-height: 100%; height: 100%; } [data-hs-public-menu-page] .hs-public-menu-page__start-screen[data-start-screen-faded] { pointer-events: none; } @media (prefers-reduced-motion: reduce) { [data-hs-public-menu-page] .hs-public-menu-page__start-screen { will-change: auto; transform: none; } [data-hs-public-menu-page] .hs-public-menu-page__start-link-mask > span, [data-hs-public-menu-page] .hs-public-menu-page__start-link-line-inner { will-change: auto; } [data-hs-public-menu-page] .hs-public-menu-page__header, [data-hs-public-menu-page] .hs-public-menu-page__normal, [data-hs-public-menu-page] .hs-public-menu-page__search-shell, [data-hs-public-menu-page] .hs-public-menu-page__search-svg, [data-hs-public-menu-page] .hs-public-menu-page__search-input-wrap, [data-hs-public-menu-page] .hs-public-menu-page__search-close, [data-hs-public-menu-page] .hs-public-menu-page__search-results { transition-duration: 0.01ms; } } [data-hs-public-menu-page] .hs-public-menu-page__start-categories { align-self: center; display: grid; margin-bottom: var(--hs-pmp-start-categories-margin); } [data-hs-public-menu-page] .hs-public-menu-page__start-link { position: relative; display: flex; align-items: center; min-height: var(--hs-pmp-category-min-h); padding: 0; border: 0; background: transparent; color: inherit; font-size: var(--hs-pmp-category-size); line-height: var(--hs-pmp-category-line); font-weight: var(--hs-public-online-menu-category-weight); letter-spacing: calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-category-tracking-ref)); text-align: left; cursor: pointer; } [data-hs-public-menu-page] .hs-public-menu-page__start-link-mask { display: inline-block; overflow: hidden; width: 100%; line-height: var(--hs-pmp-category-line); } [data-hs-public-menu-page] .hs-public-menu-page__start-link-mask > span { display: inline-block; will-change: transform; } [data-hs-public-menu-page] .hs-public-menu-page__start-link-line { position: absolute; left: 0; bottom: 0; width: 100%; height: var(--hs-pmp-category-rule); overflow: hidden; } [data-hs-public-menu-page] .hs-public-menu-page__start-link-line-inner { display: block; width: 100%; height: 100%; background: var(--hs-public-online-menu-line, var(--hs-public-online-menu-accent)); will-change: transform; } [data-hs-public-menu-page] .hs-public-menu-page__lang-switch { position: relative; isolation: isolate; justify-self: center; display: inline-flex; align-items: center; gap: var(--hs-pmp-lang-pill-gap); padding: var(--hs-pmp-lang-pill-inset); margin-bottom: var(--hs-pmp-lang-inset-bottom); box-sizing: border-box; color: var(--hs-public-online-menu-accent); } [data-hs-public-menu-page] .hs-public-menu-page__lang-slide-indicator { position: absolute; top: var(--hs-pmp-lang-pill-inset); left: 0; bottom: var(--hs-pmp-lang-pill-inset); z-index: 0; width: 0; box-sizing: border-box; border: var(--hs-pmp-search-ring) solid var(--hs-public-online-menu-accent); border-radius: var(--hs-pmp-lang-slide-radius); background: transparent; pointer-events: none; will-change: transform; } [data-hs-public-menu-page] .hs-public-menu-page__lang-link { position: relative; z-index: 1; min-width: var(--hs-pmp-lang-pill-min-w); height: var(--hs-pmp-lang-line); display: grid; place-items: center; padding: 0 var(--hs-pmp-lang-pill-pad-x); border: 0; background: transparent; color: inherit; font-size: var(--hs-pmp-lang-size); line-height: 1; font-weight: var(--hs-public-online-menu-lang-weight); letter-spacing: var(--hs-public-online-menu-lang-tracking); text-transform: uppercase; cursor: pointer; appearance: none; -webkit-tap-highlight-color: transparent; } [data-hs-public-menu-page] .hs-public-menu-page__lang-link:active { background: transparent; color: inherit; } [data-hs-public-menu-page] .hs-public-menu-page__lang-link:focus { outline: none; } [data-hs-public-menu-page] .hs-public-menu-page__lang-link:focus-visible { outline: var(--hs-focus-ring-width) solid var(--hs-focus); outline-offset: calc(-1 * var(--hs-focus-ring-offset)); } @media (prefers-reduced-motion: reduce) { [data-hs-public-menu-page] .hs-public-menu-page__lang-slide-indicator { will-change: auto; } } [data-hs-public-menu-page] .hs-public-menu-page__page-footer { margin-top: var(--hs-pmp-footer-margin); margin-bottom: max(env(safe-area-inset-bottom, 0px), var(--hs-pmp-footer-margin)); } [data-hs-public-menu-page] .hs-public-menu-page__admin-entry { width: 100%; display: grid; min-height: var(--hs-pmp-lang-line); place-items: center; padding: 0 var(--hs-pmp-admin-entry-pad-x); border: var(--hs-pmp-category-rule) solid var(--hs-public-online-menu-accent); background: #371017; color: var(--hs-public-online-menu-accent); font-size: var(--hs-pmp-admin-entry-size); line-height: 1; font-weight: var(--hs-public-menu-page-admin-entry-weight); letter-spacing: var(--hs-public-online-menu-lang-tracking); text-transform: uppercase; text-decoration: none; box-sizing: border-box; } [data-hs-public-menu-page] .hs-public-menu-page__admin-entry:hover { background: #491d25; } [data-hs-public-menu-page] .hs-public-menu-page__admin-entry:focus-visible { outline: var(--hs-focus-ring-width) solid var(--hs-focus); outline-offset: var(--hs-focus-ring-offset); } /* Menu body sections. * Composed via publicMenuPage.css. */ /* —— Menu body —— */ [data-hs-public-menu-page] .hs-public-menu-page__menu-body { padding: 0 var(--hs-pmp-page-x) var(--hs-pmp-page-pad-bottom); color: var(--hs-public-online-menu-menu-ink); background: transparent; } [data-hs-public-menu-page] .hs-public-menu-page__menu-section { scroll-margin-top: calc(var(--hs-pmp-header-h) + var(--hs-pmp-scroll-margin-extra)); margin: 0 0 var(--hs-pmp-menu-section-margin); padding-top: var(--hs-pmp-menu-section-pad-top); } [data-hs-public-menu-page] .hs-public-menu-page__menu-section-head { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; margin: 0 0 calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-menu-group-title-gap-ref)); } [data-hs-public-menu-page] .hs-public-menu-page__menu-section-title { margin: 0; color: var(--hs-public-online-menu-accent); font-size: var(--hs-pmp-menu-group-title-size); line-height: 1; font-weight: var(--hs-public-online-menu-category-weight); letter-spacing: var(--hs-public-online-menu-menu-group-title-tracking); } [data-hs-public-menu-page] .hs-public-menu-page__menu-section-description { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; margin: var(--hs-pmp-menu-section-description-gap) 0 0; color: var(--hs-public-online-menu-menu-ink); font-size: max(12px, var(--hs-pmp-menu-section-description-size)); line-height: max(16px, var(--hs-pmp-menu-section-description-line)); font-weight: 500; white-space: pre-line; } [data-hs-public-menu-page] .hs-public-menu-page__menu-node-anchor[data-search-hit] { animation: hs-public-menu-page-search-hit 1.35s ease; } @keyframes hs-public-menu-page-search-hit { 0%, 100% { box-shadow: none; background: transparent; } 18%, 42% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--hs-public-online-menu-accent) 55%, transparent); background: var(--hs-public-online-menu-result-mark-bg); } } /* Card layout preview specimens. * Composed via publicMenuPage.css. */ /* Card layout preview — guest menu specimens */ [data-hs-public-menu-page] .hs-public-menu-page__card-preview { scroll-margin-top: calc(var(--hs-pmp-header-h) + var(--hs-pmp-scroll-margin-extra)); margin: 0 0 var(--hs-pmp-menu-section-margin); padding-top: var(--hs-pmp-menu-section-pad-top); } [data-hs-public-menu-page] .hs-public-menu-page__card-preview-title { margin: 0 0 calc(var(--hs-scale-cqw) * var(--hs-public-online-menu-menu-group-title-gap-ref)); color: var(--hs-public-online-menu-accent); font-size: var(--hs-pmp-menu-group-title-size); line-height: 1; font-weight: var(--hs-public-online-menu-category-weight); letter-spacing: var(--hs-public-online-menu-menu-group-title-tracking); } [data-hs-public-menu-page] .hs-public-menu-page__card-cocktail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hs-pmp-card-grid-gap); margin: 0 0 var(--hs-pmp-card-grid-gap); } [data-hs-public-menu-page] .hs-public-menu-page__card-dish-stack, [data-hs-public-menu-page] .hs-public-menu-page__card-list-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hs-pmp-card-grid-gap); margin: 0 0 var(--hs-pmp-card-grid-gap); } /* Shared search phase motion — consumed by guest page + preview kit. */ /* GSAP Flip ref: search_integration_files/bob-header.js */ :is( [data-hs-public-menu-page] .hs-public-menu-page__header, .hs-public-online-menu-search-header )[data-search-motion="flip"] :is(.hs-public-menu-page__normal, .hs-public-online-menu-search-normal), :is( [data-hs-public-menu-page] .hs-public-menu-page__header, .hs-public-online-menu-search-header )[data-search-motion="flip"] :is(.hs-public-menu-page__search-shell, .hs-public-online-menu-search-shell) { transition: none !important; } :is( [data-hs-public-menu-page] .hs-public-menu-page__header, .hs-public-online-menu-search-header )[data-search-phase="opening"] :is(.hs-public-menu-page__search-input-wrap, .hs-public-online-menu-search-input-wrap), :is( [data-hs-public-menu-page] .hs-public-menu-page__header, .hs-public-online-menu-search-header )[data-search-phase="open"] :is(.hs-public-menu-page__search-input-wrap, .hs-public-online-menu-search-input-wrap) { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0); transition-delay: var(--hs-public-online-menu-search-open-delay), var(--hs-public-online-menu-search-open-delay), 0s; transition-duration: var(--hs-public-menu-page-search-ui-open-duration), var(--hs-public-menu-page-search-ui-transform-duration), 0s; transition-timing-function: var(--hs-public-menu-page-search-ui-open-ease), var(--hs-public-menu-page-search-ui-open-ease), linear; } :is( [data-hs-public-menu-page] .hs-public-menu-page__header, .hs-public-online-menu-search-header )[data-search-phase="opening"] :is(.hs-public-menu-page__search-close, .hs-public-online-menu-search-close), :is( [data-hs-public-menu-page] .hs-public-menu-page__header, .hs-public-online-menu-search-header )[data-search-phase="open"] :is(.hs-public-menu-page__search-close, .hs-public-online-menu-search-close) { opacity: 1; visibility: visible; transition-delay: var(--hs-public-online-menu-search-close-delay), 0s; } @media (prefers-reduced-motion: reduce) { :is( [data-hs-public-menu-page] .hs-public-menu-page__header, .hs-public-online-menu-search-header ) :is(.hs-public-menu-page__search-input-wrap, .hs-public-online-menu-search-input-wrap), :is( [data-hs-public-menu-page] .hs-public-menu-page__header, .hs-public-online-menu-search-header ) :is(.hs-public-menu-page__search-close, .hs-public-online-menu-search-close) { transition-duration: 0.01ms; } } /* iOS-like scrollport — native touch momentum + optional wheel inertia (JS). */ [data-hs-ios-scroll-root] { scroll-behavior: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior-x: none; overscroll-behavior-y: auto; } @media (hover: hover) and (pointer: fine) { [data-hs-ios-scroll-root] { overscroll-behavior-y: contain; } } *, *::before, *::after { box-sizing: border-box; } html, body, #root { margin: 0; min-height: 100%; max-width: 100%; overflow-x: clip; background: transparent; } body { color: var(--hs-ink); font-size: var(--hs-text-md); line-height: 1.5; } button, input, textarea, select { font: inherit; } /* React Bits Grainient — fullscreen WebGL canvas (tokens on :root). */ ._root_12lge_3 { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; isolation: isolate; /* Flat dark burgundy (Grainient color-2) until WebGL canvas fades in. */ background-color: var(--hs-brght-lava-boot-bg, var(--hs-public-menu-boot-bg, #570d00)); } ._canvas_12lge_14 { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; transform: translateZ(0); opacity: 0; transition: opacity 600ms ease-out; } ._canvasReady_12lge_26 { opacity: 1; } @media (prefers-reduced-motion: reduce) { ._canvas_12lge_14 { opacity: 1; } }