/* ====== BASE STYLES ====== NOTE: Do NOT set html/body { overflow: hidden; height: 100% } here. That was fine for the standalone S3 demo page but freezes the whole Sitecore page (breaks page scroll) when this component is embedded. Scope everything to .interactive-map-wrapper instead. */ .interactive-map-wrapper { font-family: "Montserrat", sans-serif; background-color: #ffffff; color: #2c2c2c; /* Establish a low, isolated stacking context so leaflet's internal panes (marker pane z-index 600, popup pane 700, control pane 1000) and the state-label divIcons cannot paint above the site nav / mega-dropdown. Modals are portaled to at runtime by interactive-map.js so they are NOT affected by this isolation. */ position: relative; z-index: 0; isolation: isolate; } /* ====== PAGE TITLE ====== */ .map-title-container { width: 100%; text-align: center; padding-top: 2rem; } .map-title { font-size: 2.2rem; color: #2c2c2c; margin: 0; padding: 1.5rem 0; font-weight: 600; } .underlined-word { position: relative; display: inline-block; } .underlined-word::after { content: ""; position: absolute; bottom: -6px; left: 0; width: 100%; height: 4px; background-color: #b1001c; border-radius: 2px; } /* ====== MAIN LAYOUT (MAP + CONTENT) ====== */ .map-layout {} /* Legacy inline layout (kept for backward-compat if used elsewhere). */ .map-layout-with-list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; } .map-layout-with-list #us-map { flex: 0 0 70%; max-width: 70%; min-width: 320px; } .map-layout-with-list .region-link-list-container { flex: 0 0 calc(30% - 24px); max-width: calc(30% - 24px); min-width: 200px; padding: 8px 0; } .region-link-list-title { font-size: 1.5rem; color: #2c2c2c; margin: 0 0 12px; font-weight: 400; } .region-link-list-container { padding-top: 4.25rem; } .region-link-list { list-style: disc outside; padding-left: 20px; margin: 0; } .region-link-list li { margin: 8px 0; font-size: 1rem; } .region-link-list a { color: #00495b; text-decoration: none; } .region-link-list a:hover, .region-link-list a:focus { text-decoration: underline; } .region-list-reset { margin-top: 16px; background: transparent; border: 1px solid #00495b; color: #00495b; padding: 6px 12px; font-size: 0.9rem; cursor: pointer; border-radius: 4px; } .region-list-reset:hover, .region-list-reset:focus { background: #00495b; color: #fff; } @media (max-width: 768px) { .map-layout-with-list { flex-direction: column; } .map-layout-with-list #us-map, .map-layout-with-list .region-link-list-container { flex: 1 1 100%; max-width: 100%; } } .map-left { position: relative; z-index: 1; } #us-map { width: 100%; height: 580px; max-height: 580px; overflow: hidden; background-color: #ffffff; } /* Background balance image (visible behind text/logo) */ .balance-bg { position: absolute; bottom: 60px; right: 190px; width: 700px; height: 700px; background-image: url("https://stewart-files.s3.amazonaws.com/interactive-map/balance-bg.png"); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.05; z-index: 1; pointer-events: none; } /* ====== INFO TEXT + LOGO ====== */ .map-info-text { padding: 1rem 2rem; font-size: 1.1rem; color: #000; max-width: 290px; margin-bottom: 1rem; } .stewart-link { background-color: #b1001c; color: #fff; padding: 2px 6px; text-decoration: none; border-radius: 3px; font-weight: 500; } .logo-container { display: none; text-align: center; } .stewart-logo { height: 50px; object-fit: contain; } /* ====== MODALS (STATE + DISCLAIMER) ====== */ .disclaimer-overlay, .state-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.6); z-index: 9999; display: flex; align-items: center; justify-content: center; } .disclaimer-overlay.hidden, .state-modal.hidden { display: none; } .disclaimer-modal, .state-modal-content { background-color: #fff; border-radius: 10px; padding: 1.25rem 1.5rem; max-width: 600px; width: 90%; font-size: 0.82rem; line-height: 1.4; color: #333; position: relative; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); } .state-modal-content { max-width: 90vw; width: 90vw; max-height: 95vh; height: 95vh; padding: 20px 28px; overflow-y: auto; box-sizing: border-box; display: flex; flex-direction: column; } .state-modal-content .state-modal-richtext { flex: 1 1 auto; overflow-y: auto; } .disclaimer-close, .state-modal-close { position: absolute; top: 10px; right: 15px; font-size: 1.8rem; font-weight: bold; color: #333; background: transparent; border: none; cursor: pointer; } .state-modal-close { position: absolute; top: 20px; right: 28px; width: 40px; height: 40px; padding: 0; font-size: 2.4rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; color: #2c2c2c; z-index: 1; } .disclaimer-close { font-size: 1.25rem; color: #00495b; } .state-modal-close:hover { color: #b1001c; } /* Print button inside the state info modal. The close button is a sibling of the header (absolutely positioned in the modal-content top-right), so reserve right-padding here so the title/toolbar never sit under it. */ .state-modal-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 12px; padding: 6px 60px 6px 0; min-height: 40px; border-bottom: 1px solid #999; margin-bottom: 12px; } .state-modal-header .modal-title { margin: 0; flex: 1 1 auto; min-width: 0; word-break: break-word; overflow-wrap: anywhere; } .state-modal-toolbar { flex: 0 0 auto; } /* Print button keeps its icon; hide the label on narrow viewports so a long title never displaces the button to a new row. */ .state-modal-print { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } @media (max-width: 600px) { .state-modal-print span { display: none; } } /* Scope the authored rich-text so page-wide heading/list styles don't distort it */ .state-modal-richtext { color: #2c2c2c; font-size: 0.95rem; line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word; } .state-modal-richtext h1, .state-modal-richtext h2, .state-modal-richtext h3, .state-modal-richtext h4, .state-modal-richtext h5, .state-modal-richtext h6 { margin: 0.8em 0 0.4em; color: #000; border: 0; text-decoration: none; background: none; position: static; } .state-modal-richtext h1::after, .state-modal-richtext h2::after, .state-modal-richtext h3::after, .state-modal-richtext h4::after { content: none !important; display: none !important; } .state-modal-richtext p { margin: 0 0 0.6em; } .state-modal-richtext ul, .state-modal-richtext ol { margin: 0 0 0.6em 1.4em; padding: 0; } .state-modal-richtext table { border-collapse: collapse; width: 100%; margin: 0 0 0.6em; } .state-modal-richtext table, .state-modal-richtext th, .state-modal-richtext td { border: 1px solid #ccc; } .state-modal-richtext th, .state-modal-richtext td { padding: 6px 8px; text-align: left; } .state-modal-richtext img { max-width: 100%; height: auto; } .state-modal-print { display: inline-flex; align-items: center; gap: 6px; background: #6f6f6f; color: #fff; border: none; border-radius: 4px; padding: 6px 12px; font-size: 0.8rem; font-weight: 600; cursor: pointer; line-height: 1; transition: background-color 0.15s ease-in-out; } .state-modal-print:hover, .state-modal-print:focus { background: #4d4d4d; outline: none; } .state-modal-print svg { display: block; } /* ====== FOOTER ====== */ .footer-disclaimer { display: none; font-size: 0.75rem; text-align: left; padding: 1rem 2rem; color: #555; } .footer-disclaimer a { color: #555; text-decoration: underline; cursor: pointer; } /* ====== LEAFLET TOOLTIP ====== */ .leaflet-tooltip { background-color: #333; color: #fff; border-radius: 4px; padding: 2px 6px; font-size: 0.75rem; font-weight: 500; } .leaflet-control-attribution { display: none !important; } path.leaflet-interactive:focus { outline: none; } /* ====== STATE MODAL GRID CONTENT ====== */ .modal-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; row-gap: 10px; } .modal-grid div { font-size: 0.95rem; line-height: 1.5; color: #222; } .modal-title { font-size: 1rem; color: #000; margin: 10px 0; } .modal-grid strong { display: block; margin-bottom: 2px; font-weight: 600; color: #000; } /* ====== STATE LABELS ====== */ .state-label { font-size: 0.9rem; font-weight: 600; color: #00495b; text-align: center; pointer-events: none; } .state-label-small { font-size: 0.65rem; font-weight: 600; color: #00495b; text-align: center; pointer-events: none; } /* ====== RESPONSIVE STYLES (MOBILE) ====== */ @media (max-width: 1024px) { #us-map { height: 450px; max-height: 450px; } .state-label { font-size: 0.8rem; } .state-label-small { font-size: 0.5rem; } } @media (max-width: 768px) { #us-map { height: 350px; max-height: 350px; } .map-title { font-size: 1.7rem; } .state-label { font-size: 0.7rem; } .state-label-small { font-size: 0.4rem; } } /* Disabled state labels: dimmed, no pointer */ .state-label-disabled, .state-label-disabled div { color: #9a9a9a !important; cursor: default !important; pointer-events: none; } @media (max-width: 480px) { #us-map { height: 250px; max-height: 250px; } } /* ====== RESPONSIVE MODAL (MOBILE) ====== The close button is already in the flex flow at every viewport, so only the modal size and font tweaks are needed here. */ @media (max-width: 768px) { .state-modal-content { max-width: 100vw; width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; padding: 12px 14px; } .state-modal-header .modal-title { flex: 1 1 100%; font-size: 1rem; } .state-modal-close { width: 32px; height: 32px; font-size: 1.8rem; } .state-modal-richtext { font-size: 0.9rem; } .state-modal-richtext img, .state-modal-richtext table { max-width: 100%; height: auto; } .state-modal-richtext table { display: block; overflow-x: auto; } } /* Region focus mode: hide tooltips on non-focused states. */ #us-map.interactive-map--focused .leaflet-tooltip { display: block; }