/* * Searchable locations map. * * Layout/visuals come from the Webflow "map-concept" classes in css/webflow.css * (.map-section, .location-search-column, .search-loc, .location-link-block, * .map-column). The rules below are the glue that wires those classes to the live * Google map: filling the map column, styling the live search input/button and the * info window, and adapting the standalone concept page for in-page use. * */ /* ------------------------------------------------------------------ * * Google InfoWindow chrome (Google injects this markup around our HTML) * ------------------------------------------------------------------ */ .gm-style-iw-ch { padding: 0 !important; } /* Close (X) button. Google masks button.gm-ui-hover-effect > span into the X and its background-color paints it; the default here was white-on-white (invisible), so force a visible color — navy, gold on hover. */ body .gm-style-iw-chr button.gm-ui-hover-effect { position: absolute !important; top: -8px; right: -8px; opacity: 1 !important; } body .gm-style-iw-chr button.gm-ui-hover-effect > span { background-color: var(--color-2, #001543) !important; opacity: 1 !important; transition: background-color .15s; } body .gm-style-iw-chr button.gm-ui-hover-effect:hover > span { background-color: var(--color-6, #d29f13) !important; } .gm-style .gm-style-iw-d { overflow-y: auto !important; } .gm-style-iw-d { padding: 0 !important; margin: 0 !important; } .gm-style { font-family: inherit !important; } .gm-style-iw { width: 320px !important; max-width: 100%; padding: 0 !important; margin: 0 !important; background-color: var(--color, #fff); border-radius: 0 !important; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); font-size: 16px !important; } /* Info window content — matches the concept's .map-info-div card */ .map-info-window { padding: 18px 20px; font-size: .95em; line-height: 1.45; } .map-info-window .h3-marg { margin: 0 0 10px; } /* ------------------------------------------------------------------ * * Two-column map section * ------------------------------------------------------------------ */ section.map-section { /* Webflow's 100vh/800px is for a standalone page; bound it for in-page use. */ height: 80vh; min-height: 560px; max-height: 860px; } /* Webflow pads the column 175px to clear the standalone page's fixed navbar; in-page it already sits below the page title, so reclaim that space. */ section.map-section .location-search-column { padding-top: 20px; } /* ----- Search bar ----- */ .search-loc { gap: 12px; } #locationSearch { position: relative; /* anchor for the clear (X) button */ flex: 1; min-width: 0; /* allow the field to shrink instead of overflowing the row */ line-height: 1; } #locationSearch input, #pac-input { width: 100%; height: 40px; margin: 0; padding: 0 34px 0 12px; /* right padding leaves room for the clear (X) button */ border: 1px solid #c9c9c9; background: #fff; font-size: 1em; line-height: 40px; } #clearSearch { position: absolute; top: 0; right: 0; width: 34px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: transparent; color: #75787b; font-size: 22px; line-height: 1; cursor: pointer; transition: color .15s; } #clearSearch:hover { color: var(--color-2, #001543); } #clearSearch[hidden] { display: none; /* beats the display:flex above so the attribute hides it */ } #locationSearch input:focus, #pac-input:focus { outline: none; border-color: var(--color-2, #001543); } /* ----- Google Places Autocomplete dropdown ----- Google appends .pac-container to and ships its own stylesheet, so these need !important to win. (The "powered by Google" logo row is left untouched.) */ .pac-container { margin-top: 4px; border: 1px solid #c9c9c9 !important; border-radius: 0 !important; background-color: #fff !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important; font-family: inherit !important; } .pac-item { padding: 9px 12px !important; border-top: 1px solid #ededed !important; color: #4a4f5a !important; font-size: .9em !important; line-height: 1.4 !important; cursor: pointer; } .pac-item:first-child { border-top: 0 !important; } .pac-item:hover, .pac-item-selected, .pac-item-selected:hover { background-color: var(--color-2, #001543) !important; color: #fff !important; } .pac-item-query { color: #1a1a1a !important; font-size: 1em !important; } .pac-item:hover .pac-item-query, .pac-item-selected .pac-item-query { color: #fff !important; } .pac-matched { font-weight: 700 !important; } /* hide Google's default grey pin sprite for a cleaner, text-only list */ .pac-icon { display: none !important; } #getLocation { flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; color: #fff; background-color: var(--color-2, #001543); cursor: pointer; transition: background-color .2s; } #getLocation:hover { background-color: var(--color-10, #002d72); } #getLocation svg { width: 22px; height: 22px; } #getLocation.is-loading { pointer-events: none; cursor: wait; opacity: 0.35; } /* ----- Location cards ----- */ #panel { display: flex; flex-direction: column; } .location-link-block { cursor: pointer; /* whole card opens the info window */ transition: background-color .15s, color .15s; } .location-link-block .open-info-window { display: block; text-decoration: none; } .location-link-block .location-title { margin: 0 0 10px; cursor: pointer; transition: color .15s; } .location-link-block:hover .location-title, .location-link-block.is-open .location-title { color: var(--color-6, #d29f13); } /* Active card — the one whose info window is open on the map — plus hover. Scoped under #panel so it overrides the .color stripe regardless of stylesheet load order. */ #panel .location-link-block:hover, #panel .location-link-block.is-open { background-color: #001543; color: #fff; } #panel .location-link-block:hover a:not(.open-info-window), #panel .location-link-block.is-open a:not(.open-info-window) { color: #fff; } .location-data-container { padding: 0; } .location-links { margin-top: 12px; } .location-distance { margin: 8px 0 0; font-weight: 700; font-style: italic; } body .map-section p { line-height: 1.4; margin-bottom: 0; } /* ----- Map column ----- */ section.map-section .map-column { position: relative; } .glacial-map-div { position: absolute; inset: 0; width: 100%; height: 100%; } /* ------------------------------------------------------------------ * * Responsive — stack the search column above a full-width map. We set * this explicitly (higher specificity than Webflow's base .map-section) * so the map always gets full width on phones/small tablets. * ------------------------------------------------------------------ */ @media screen and (max-width: 767px) { section.map-section { flex-direction: column; height: auto; min-height: 0; max-height: none; } section.map-section .location-search-column { width: 100%; max-height: 55vh; padding-top: 20px; } section.map-section .map-column { width: 100%; min-height: 0; } /* Drop the absolute fill on mobile; render the map as a normal block with an explicit height so it can't escape its (now full-width) column. */ section.map-section .glacial-map-div { position: relative; inset: auto; width: 100%; height: 65vh; } } @media screen and (max-width: 479px) { .gm-style-iw { width: 250px !important; } }