/* __OM_HERO_LAYOUT_V20_CSS__ */ /* ========================================================== TOP HERO — ONE SINGLE ROW ========================================================== */ #om-v20-hero-row { width: 100%; display: grid; grid-template-columns: minmax(260px, 1fr) minmax(460px, 620px) max-content; align-items: center; gap: 28px; margin: 6px 0 22px 0; box-sizing: border-box; } /* ---------------------------------------------------------- LEFT — AREA NAME / STATUS ---------------------------------------------------------- */ #om-v20-area-slot { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } #om-v20-area-slot h1, #om-v20-area-slot h2, #om-v20-area-slot h3 { margin-top: 0 !important; margin-bottom: 6px !important; letter-spacing: -.025em; } #om-v20-live-slot { margin-top: 10px; display: flex; align-items: center; min-height: 27px; } #om-v20-live-slot .om-v20-live { position: static !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 6px 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; border: 1px solid rgba(34,197,94,.35) !important; background: rgba(7,74,47,.30) !important; color: #71e7a5 !important; box-shadow: none !important; filter: none !important; font-size: 10px !important; font-weight: 850 !important; letter-spacing: .055em !important; text-transform: uppercase !important; } /* ---------------------------------------------------------- CENTER — CANONICAL TIMELINE ---------------------------------------------------------- */ #om-v20-timeline-slot { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; } #om-v20-timeline-slot #omCanonicalTimelineV7 { width: 100% !important; max-width: 620px !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box !important; } #om-v20-timeline-slot .om-v7-timeline-panel { width: 100% !important; max-width: 620px !important; margin: 0 !important; } /* ---------------------------------------------------------- RIGHT — ACTIONS ---------------------------------------------------------- */ #om-v20-actions-slot { display: flex; align-items: center; justify-content: flex-end; min-width: max-content; } #om-v20-actions-slot #om-v18-actions { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; gap: 9px !important; margin: 0 !important; position: static !important; } /* * User requested: * * New Area first, * Compare second. */ #om-v20-actions-slot #om-new-area-launch, #om-v20-actions-slot #om-v18-compare { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; margin: 0 !important; width: auto !important; min-width: 128px !important; height: 42px !important; padding: 0 15px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; border-radius: 10px !important; box-shadow: none !important; filter: none !important; white-space: nowrap !important; font-size: 12px !important; font-weight: 800 !important; } /* New Area = primary */ #om-v20-actions-slot #om-new-area-launch { border: 1px solid rgba(56,189,248,.50) !important; background: linear-gradient( 180deg, #1683b1, #0c638a ) !important; color: #ffffff !important; } #om-v20-actions-slot #om-new-area-launch:hover { background: linear-gradient( 180deg, #1a90c3, #0e709b ) !important; } /* Compare = secondary */ #om-v20-actions-slot #om-v18-compare { border: 1px solid rgba(125,211,252,.29) !important; background: rgba(8,40,61,.82) !important; color: #eaf7fe !important; } #om-v20-actions-slot #om-v18-compare:hover { background: rgba(13,59,86,.94) !important; } /* ========================================================== MAP LAYERS — PILLS MUST LIVE INSIDE DETAILS ========================================================== */ #omLayerPanel { width: 100% !important; box-sizing: border-box; overflow: hidden; border: 1px solid rgba(125,211,252,.15); border-radius: 10px; background: rgba(4,20,31,.42); } /* * Closed means: * absolutely NO pills outside. */ #omLayerPanel:not([open]) #layerButtons { display: none !important; } /* * Open means: * compact pills inside the collapsible body. */ #omLayerPanel[open] #layerButtons { display: grid !important; grid-template-columns: repeat( auto-fit, minmax(125px,1fr) ) !important; gap: 6px !important; max-height: 190px; overflow-y: auto; width: 100% !important; box-sizing: border-box; margin: 0 !important; padding: 10px !important; border-top: 1px solid rgba(255,255,255,.055); } #omLayerPanel #layerButtons button { width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 7px 8px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 7px !important; font-size: 9px !important; line-height: 1.1 !important; } /* no leftover duplicate pills */ .om-v20-orphan-layer-pills { display: none !important; } /* ========================================================== RESPONSIVE ========================================================== */ @media(max-width: 1250px) { #om-v20-hero-row { grid-template-columns: minmax(220px, .8fr) minmax(380px, 1.5fr) max-content; gap: 16px; } #om-v20-actions-slot #om-new-area-launch, #om-v20-actions-slot #om-v18-compare { min-width: 110px !important; } } @media(max-width: 900px) { #om-v20-hero-row { grid-template-columns: 1fr; align-items: stretch; } #om-v20-timeline-slot { justify-content: flex-start; } #om-v20-actions-slot { justify-content: flex-start; } } /* ========================================================== __OM_TIMELINE_WIDE_V21__ Timeline expands until just before action buttons ========================================================== */ #om-v20-hero-row { /* * LEFT: * keep Area name reasonably compact * * CENTER: * consume ALL remaining available width * * RIGHT: * only as much width as buttons require */ grid-template-columns: minmax(240px, 270px) minmax(520px, 1fr) max-content !important; column-gap: 24px !important; } /* timeline slot occupies the full middle column */ #om-v20-timeline-slot { width: 100% !important; max-width: none !important; min-width: 0 !important; justify-content: stretch !important; } /* remove old 620px cap */ #om-v20-timeline-slot #omCanonicalTimelineV7 { width: 100% !important; max-width: none !important; min-width: 0 !important; } #om-v20-timeline-slot .om-v7-timeline-panel { width: 100% !important; max-width: none !important; min-width: 0 !important; } /* * Keep actions compact on the far right. */ #om-v20-actions-slot { width: max-content !important; min-width: max-content !important; justify-self: end !important; } /* * On medium screens allow the Area block to become * slightly narrower before collapsing the whole layout. */ @media(max-width: 1250px) { #om-v20-hero-row { grid-template-columns: minmax(210px, 230px) minmax(430px, 1fr) max-content !important; column-gap: 16px !important; } } /* ========================================================== __OM_REMOVE_LAYER_COLLAPSE_V22__ No Map layers collapsible bar above map. ========================================================== */ #omLayerPanel { display: contents !important; } /* * Actual product-layer pills remain available directly. */ #layerButtons { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; width: 100% !important; max-height: none !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } #layerButtons button { width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 6px 10px !important; border-radius: 999px !important; font-size: 9px !important; }