/* Charter — new-locator visual parity with the legacy locator. * * Overrides the provider's :where(.locator-theme-root) token vars + the semantic type/spacing * fallbacks (see store_locator/frontend/styles/main.css KTD4). Values lifted from the legacy * sass/template_system/charter.scss. Loaded on both paths via store_locator.theming; on the widget * this file is cloned into the shadow root by lib/mount.ts (href under /locator_themes/). * * px only — inside the widget's shadow root `rem` tracks the host (14px on storefronts). * @font-face for SpectrumSans is already loaded by the Charter shell override / storefront SCSS; * this file only references the family. */ .locator-theme-root { --locator-font-family: "SpectrumSans", Lato, Helvetica, Arial, sans-serif; /* Brand colors — charter.scss $primary-color / $primary-dark / $secondary-dark. */ --locator-color-primary: #005eff; --locator-color-accent: #005eff; --locator-color-text: #1a1a1a; --locator-color-muted: #4d4d4d; /* Rounded surfaces (desktop): 20px cards, pill CTAs (charter.scss .featured-button 999px). */ --locator-radius-card: 20px; --locator-radius-button: 999px; /* Sidebar: neutral-gray background (body + header) + large bold search heading (charter.scss #f2f2f2, 48px/800). */ --locator-color-sidebar-background: #f2f2f2; --locator-color-sidebar-header-background: #f2f2f2; --locator-font-weight-sidebar-title: 800; /* Results count: 14px/500, 2.8px letter-spacing, uppercase, gray (charter.scss). */ --locator-text-sidebar-results: 14px; --locator-font-weight-sidebar-results: 500; --locator-tracking-sidebar-results: 2.8px; --locator-text-transform-sidebar-results: uppercase; --locator-color-sidebar-results: #4d4d4d; /* "Use my current location" icon in the search row: primary blue instead of the default slate (stroke-only lucide icon, so the color token drives its stroke via currentColor). */ --locator-color-locate-icon: var(--locator-color-primary); --locator-color-locate-icon-fill: var(--locator-color-primary); /* Map marker popover: square corners (legacy Charter popover has no radius) and tighter 20px line-height on its text lines. */ --locator-radius-map-popover: 0px; --locator-line-height-map-popover: 20px; /* Open-hours popover uses the legacy paragraph font stack. */ --locator-font-family-map-hours-tooltip: ParagraphFont, Lato, Helvetica, Arial, sans-serif; /* Selected location card: 2px border (default is 1px). */ --locator-border-width-card-selected: 2px; /* Card display name: 24px bold (charter.scss). */ --locator-text-card-title: 24px; --locator-font-weight-card-title: 700; --locator-space-card-highlight-banner-bottom: 8px; --locator-space-card-header-meta-bottom: 8px; /* Eyebrow + distance: 14px/500, 2px letter-spacing, dark text (charter.scss). */ --locator-text-card-eyebrow: 14px; --locator-tracking-card-eyebrow: 2px; --locator-color-card-eyebrow: #1a1a1a; --locator-font-weight-card-eyebrow: 500; --locator-text-card-distance: 14px; --locator-tracking-card-distance: 2px; --locator-color-card-distance: #1a1a1a; --locator-font-weight-card-distance: 500; /* Hours / address / phone detail lines: 16px text, 24px primary-blue icons (charter.scss). */ --locator-text-card-hours: 16px; --locator-text-card-address: 16px; --locator-text-card-phone: 16px; --locator-text-card-detail-icon: 24px; --locator-color-card-detail-icon: var(--locator-color-primary); /* Card divider: hidden on Charter (T-Mobile keeps the default visible line). */ --locator-card-divider-display: none; /* Hours + phone-number labels: dark text; phone label bold (charter.scss). */ --locator-color-card-hours-label: #1a1a1a; --locator-color-card-phone-label: #1a1a1a; --locator-font-weight-card-phone-label: 800; /* Action buttons: 3-up grid, icon stacked above a dark label; tighter vertical padding + icon/label gap to match the legacy card's compact CTAs (BusinessCard.vue: button padding 5px). */ --locator-actions-grid-columns: 3; /* Content-size the CTAs (min 88px, grow to label) instead of equal 1fr columns — matches legacy. */ --locator-actions-grid-track: minmax(88px, auto); --locator-actions-button-direction: column; --locator-actions-button-gap: 4px; --locator-space-button-y: 10px; --locator-color-button-text: #1a1a1a; --locator-text-button-icon: 24px; --locator-color-button-icon: var(--locator-color-primary); /* "View" as an outline button with a 2px border (charter.scss .featured-button). */ --locator-color-featured-background: #fff; --locator-color-featured-text: var(--locator-color-primary); --locator-color-featured-border: var(--locator-color-primary); --locator-border-width-featured: 2px; /* No inset shadow under the sidebar header (the default look). */ --locator-shadow-sidebar-header: none; /* Sidebar pagination radii */ --locator-radius-pagination-button: 8px; } /* Sidebar title: 48px (charter.scss) reads too big once the title runs long and wraps to many lines. Shrink toward 32px as the character count grows — full size up to ~40 chars, then -0.2px/char (≈37px at 95 chars). Declared here on the

(not with the root tokens above) because --locator-title-char-count is set on that element by LocatorSidebar.vue, and a custom property's var() references resolve in the element that declares them — so the clamp must live where the count is. */ .locator-theme-root .locator-sidebar__title { --locator-text-sidebar-title: 48px; /* Narrow/mobile layout: the 48px wide size overflows the single column, so drop to 32px. */ --locator-text-sidebar-title-mobile: 32px; }