/* * Bootstrap-utility shim for the vendored stellar-map / stellar-search components. * * The shared components (public/stellarmap/, folded in unmodified) are authored for a Bootstrap theme this * site does not load — they lean on Bootstrap's grid, display, flex, and spacing utility classes. This * supplies just those classes, SCOPED under so they cannot collide with the site's own * .row/.col-* system, so the component renders as designed (side-by-side header, viewport-correct "OR", * two-column flyout card) without editing the inherited component. * * Display utilities carry !important to match Bootstrap: the component sets inline display:block on the * "OR" separators, and only !important beats an inline style. Values are Bootstrap 4 (1rem spacer; * breakpoints md=768, lg=992, xl=1200). */ stellar-map .stellar-map-header { border-radius: 9px; margin: 5%; padding: 25px 0px; } /* Custom elements default to display:inline; make the search fill its cell (FYF header + standalone). */ stellar-search { display: block; } /* --- Grid --- `gap: 0` is load-bearing. The SITE's own .row (styles.css) is a 12-col CSS Grid with `gap: var(--gutter)`, and that selector still matches these elements inside . Overriding `display` to flex does NOT neutralise `gap` — it applies to flex containers too — so every component row silently inherited a 24px gutter between columns, which is why Bootstrap col pairs (e.g. the flyout's status icon + label) sat far apart despite their widths being correct. Reset it here rather than per-row downstream. */ stellar-map .row { display: flex; flex-wrap: wrap; gap: 0; } stellar-map .col-12 { flex: 0 0 100%; max-width: 100%; } stellar-map .col-9 { flex: 0 0 75%; max-width: 75%; } stellar-map .col-6 { flex: 0 0 50%; max-width: 50%; } stellar-map .col-3 { flex: 0 0 25%; max-width: 25%; } stellar-map .col-md { flex: 0 0 100%; max-width: 100%; min-width: 0; } stellar-map .w-100 { width: 100%; } /* --- Flex + text alignment --- */ stellar-map .d-flex { display: flex !important; } stellar-map .align-items-center { align-items: center; } stellar-map .justify-content-center { justify-content: center; } stellar-map .text-center { text-align: center; } /* --- Spacing (Bootstrap spacer = 1rem) --- */ stellar-map .m-0 { margin: 0; } stellar-map .ml-0 { margin-left: 0; } stellar-map .mt-2 { margin-top: .5rem; } stellar-map .mb-2 { margin-bottom: .5rem; } stellar-map .my-2 { margin-top: .5rem; margin-bottom: .5rem; } stellar-map .ml-3 { margin-left: 1rem; } stellar-map .mr-3 { margin-right: 1rem; } stellar-map .p-0 { padding: 0; } stellar-map .p-2 { padding: .5rem; } stellar-map .p-3 { padding: 1rem; } stellar-map .px-3 { padding-left: 1rem; padding-right: 1rem; } stellar-map .pb-3 { padding-bottom: 1rem; } stellar-map .pt-3 { padding-top: 1rem; } stellar-map .pl-1 { padding-left: .25rem; } stellar-map .pl-3 { padding-left: 1rem; } stellar-map .pr-1 { padding-right: .25rem; } /* --- Display utilities (!important, so they beat the component's inline display:block) --- */ stellar-map .d-none { display: none !important; } stellar-map .d-inline { display: inline !important; } stellar-map .d-block { display: block !important; } div#city-selector-container { width: 100%; display: contents; } div#or-separator-desktop { width: 100%; } @media (min-width: 768px) { stellar-map .col-md { flex: 1 0 0%; } stellar-map .d-md-none { display: none !important; } stellar-map .d-md-inline { display: inline !important; } } @media (min-width: 992px) { stellar-map .col-lg-8 { flex: 0 0 85.6667%; max-width: 85.6667%; } stellar-map .offset-lg-2 { margin-left: 6.6667%; } stellar-map .d-lg-none { display: none !important; } } @media (min-width: 1200px) { stellar-map .d-xl-none { display: none !important; } } /* --- Inputs: match the original FYF placeholder's soft light-blue fields (public/assets/css/styles.css .fiberhood__form, retired when this vendored component replaced it) instead of the component's own white search box / solid-blue city button. --- */ stellar-search .search-box { background: #eef8fd; border: 1px solid #bcdcf0; border-radius: 10px; box-shadow: none; } stellar-search .search-box:focus-within { border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(30,111,208,.15); } stellar-search .search-icon, stellar-search .search-clear { color: var(--muted); } stellar-map #city-selector-button, stellar-map .city-selector-btn { background: #eef8fd; color: var(--ink); border: 1px solid #bcdcf0; border-radius: 10px; box-shadow: none; font-weight: 600; } stellar-map #city-selector-button:hover, stellar-map .city-selector-btn:hover { background: #e3f2fb; border-color: var(--blue-600); } /* "Browse by City" caret — a black triangle pointing DOWN, drawn with borders. The vendored rule renders it as a text glyph (`content: '▼'`, U+25BC), which silently depends on two things we do not control: the stylesheet being DECODED as UTF-8, and the resolved font actually containing that codepoint. Neither is guaranteed — stellarmap.css carries no @charset, and Apache serves .css with no charset parameter unless AddDefaultCharset is set, so the three UTF-8 bytes (E2 96 BC) get read as Latin-1 and paint "â–¼"; a font without the glyph paints a tofu box instead. Both failures look like "weird content" in the button. Borders need no glyph, no font and no encoding, so this renders identically everywhere. Colouring only the TOP border, with left/right transparent, puts the apex at the bottom. */ stellar-map #city-selector-button::after, stellar-map .city-selector-btn::after { content: ""; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid #000; border-bottom: 0; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); } /* Location-flyout header strip. The vendored component points this at an external legacy asset (https://stellarbb.com/media_uploads/pop_up_banner_graphic_451x166.png), so the popup's header depends on the OLD production server staying up and renders blank if that path moves. Repoint it at the site's own login background — same image .auth__bg-image and .fiberhood use, so the flyout matches the page it sits on, and it now ships with the repo instead of being fetched cross-origin. Scoped + loaded after stellarmap.css, so it overrides without editing the inherited component. */ stellar-map .modal_header_background_image_1 { background-image: url("../img/login-bg.webp"); background-position: left center; background-size: cover; background-repeat: no-repeat; } /* Map pins drop in instead of appearing instantly. google.maps.Animation.DROP is NOT an option here: it only works on the legacy google.maps.Marker, and this component builds google.maps.marker.AdvancedMarkerElement (see addMarker() in assets/ts/stellarmap/stellarmap.ts), which ignores the `animation` property entirely. So the drop is animated on the marker's own content . Hooked on the src prefix because the component sets no class on that img. That keeps this CSS-only — no edit to the vendored component, and no dependency on Google's wrapper markup, which is versioned and changes. Google positions the wrapper; transforming the content inside it moves the artwork without disturbing the marker's geographic anchor. transform-origin is the bottom centre: a pin is anchored at its tip, so the settle should squash from the tip, not the middle. `both` fill holds the 0% frame during any delay, so a pin never flashes at its final position before dropping. The overshoot in the bezier carries it just past the anchor and back, which is what reads as weight. */ stellar-map img[src*="stellar-marker-"] { animation: stellar-pin-drop 0.6s cubic-bezier(0.32, 1.5, 0.55, 1) both; transform-origin: 50% 100%; } @keyframes stellar-pin-drop { 0% { transform: translateY(-120px) scale(0.9); opacity: 0; } 22% { opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } } /* Best-effort cascade so a dense field doesn't land as one block. Current Maps builds wrap each advanced marker in ; if that ever stops being true these rules simply do not match and every pin drops together — still animated, just simultaneous. Deliberately a progressive enhancement rather than a hard dependency on Google's DOM. A true per-pin stagger would need addMarker() to set an index (e.g. --pin-i) on the content element. */ stellar-map gmp-advanced-marker:nth-of-type(5n+2) img[src*="stellar-marker-"] { animation-delay: 0.06s; } stellar-map gmp-advanced-marker:nth-of-type(5n+3) img[src*="stellar-marker-"] { animation-delay: 0.12s; } stellar-map gmp-advanced-marker:nth-of-type(5n+4) img[src*="stellar-marker-"] { animation-delay: 0.18s; } stellar-map gmp-advanced-marker:nth-of-type(5n+5) img[src*="stellar-marker-"] { animation-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { stellar-map img[src*="stellar-marker-"] { animation: none; } } /* ============================================================================ Location flyout — modern property card. Reading order the component emits is: name, details(col-6), image(col-6),
, CTA. Wanted: name, IMAGE, details, CTA — image promoted to a full-width banner right under the name. Done with flex `order` on the row children rather than by editing the vendored showInfoWindow() template, so the component stays re-vendorable. .row is already display:flex from the grid shim above, so order/flex-basis apply directly. The :nth-child indices below are that emitted order — they are positional, so if showInfoWindow() ever changes its column order these need revisiting. ============================================================================ */ stellar-map #location-flyout { width: 340px; max-width: calc(100% - 40px); border-radius: 14px; box-shadow: 0 18px 40px rgba(7, 29, 57, .28), 0 2px 6px rgba(7, 29, 57, .14); } stellar-map #flyout-content { background: #fff; } stellar-map #flyout-content .row { margin: 0; } /* NOTE the `>` before .row: the details column contains its OWN nested .row (status icon + text). With a descendant combinator these nth-child rules also matched that inner row's children — col-9 is its 2nd child, so it inherited `flex: 0 0 100%` and the status label wrapped onto the line below its dot. Only the outer row, a direct child of #flyout-content, may be reordered. */ stellar-map #flyout-content > .row > *:nth-child(1) { order: 1; } /* name */ stellar-map #flyout-content > .row > *:nth-child(3) { order: 2; flex: 0 0 100%; max-width: 100%; padding: 0; } /* image */ stellar-map #flyout-content > .row > *:nth-child(2) { order: 3; flex: 0 0 100%; max-width: 100%; } /* details */ stellar-map #flyout-content > .row > *:nth-child(4) { order: 4; } /* divider */ stellar-map #flyout-content > .row > *:nth-child(5) { order: 5; } /* CTA */ /* Property name — the card's headline. */ stellar-map #flyout-content .bubble_title { padding: 16px 18px 12px; font-size: 17px; line-height: 1.25; letter-spacing: -0.01em; color: var(--navy-900); } /* Image as a full-bleed banner. !important is required, not lazy: showInfoWindow() sets max-width/max-height/object-fit as INLINE styles on this img, and only !important beats an inline style. */ stellar-map #flyout-content .row > *:nth-child(3) img { display: block; width: 100% !important; max-width: 100% !important; height: 152px !important; max-height: 152px !important; object-fit: cover !important; border-radius: 0 !important; } /* Details block under the banner. */ stellar-map #flyout-content .bubble_street_address { padding-top: 14px; font-weight: 600; color: var(--navy-900); } stellar-map #flyout-content .bubble_locale { color: var(--muted); } /* Status line: swap the externally-hosted icon (stellarbb.com/stellar-theme/...) for a drawn dot. Same reasoning as the flyout header image — that URL is a live dependency on the OLD production server. Scoped to the status column so the property-image fallback, which uses the very same asset URL, is left alone. */ stellar-map #flyout-content .col-3 img[src*="Asset"] { display: none; } /* Collapse the icon column to just the dot's width. Left at its grid 25% the dot sat ~80px from the label it belongs to, reading as two unrelated items. */ stellar-map #flyout-content .col-3 { position: relative; flex: 0 0 16px; max-width: 16px; min-height: 12px; } /* Let the label take the remaining space instead of its grid 75%, so it sits beside the dot rather than at the 25% column boundary. */ stellar-map #flyout-content .col-3 + .col-9 { flex: 1 1 auto; max-width: none; padding-left: 7px; } stellar-map #flyout-content .col-3::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: var(--brand-teal, #00a8b5); box-shadow: 0 0 0 3px rgba(0, 168, 181, .18); } stellar-map #flyout-content hr { border: 0; border-top: 1px solid #e6eef5; margin: 14px 0 0; } stellar-map #flyout-content .row > *:nth-child(5) { padding: 14px 18px 18px; } /* CTA matched to the home hero button (.btn / .btn--hero in styles.css): same 8px radius, 2px border, 13px/30px padding, 600 weight, and the same transparent -> cyan fill with a 1px lift on hover. The resting colours are navy rather than the hero's white-on-transparent because this sits on a WHITE card — copying those verbatim would render an invisible button. Applied to all three states (.btn-order / .btn-preorder / .btn-check): availability is already carried by the status line and the button's own label, so the colour no longer has to encode it, and the card reads as one system. */ stellar-map .flyout-action-btn, stellar-map a.btnSubscribe.flyout-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 13px 30px; border: 2px solid var(--navy-900); border-radius: 8px; background: transparent; color: var(--navy-900); font-weight: 600; font-size: 15px; text-decoration: none; transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease; } stellar-map .flyout-action-btn:hover, stellar-map a.btnSubscribe.flyout-action-btn:hover { background: var(--cyan-400); border-color: var(--cyan-400); color: var(--navy-900); transform: translateY(-1px); }