/* mobile menu icon and search icon in header: BEGINS */ .cr-mobile-side-icon { display: none; gap: 10px; } .cr-mobile-side-icon img { width:55px; } .cr-navigation-menu > ul > li.cr-mobile-spectrum-search{ display:none; } @media (min-width: 1360px){ .cr-mobile-menu-close { display: none; } } @media (max-width: 1360px){ .search__container-bar { display: none !important; } .icon__arrow-down { margin-right: 45px !important; margin-top: 22px !important; } .navigation-menu ul{ font-size: 0px !important; } .navigation-menu ul li[data-navigation] ul { width: 100vw !important; height: 100vh !important; overflow:scroll; background-color: rgba(250, 250, 250, 1); text-align: center; align-items: center; z-index: 100; top: 0; margin-top:0px !important; display: flex; flex-direction: column; padding : 50px 10px !important; } .navigation-menu ul li[data-navigation] ul:hover li { background-color: transparent!important; } .navigation-menu ul li[data-navigation] ul li a{ font-size:1.5rem; } .navigation-menu ul li:hover ul li { background-color: transparent !important; } .cr-mobile-menu-close{ position:absolute; top:18px; right:50px; padding: 5px 8px; border: 1px solid #000000; color: rgb(0, 0, 0); font-size: 1.05rem; } .cr-menu-hide{ display: none !important; } li[data-gcse]{ display:none; } .cr-body-overflow-hidden{ overflow:hidden; } } @media (max-width: 960px){ .cr-mobile-side-icon { display: flex; } .cr-navigation-menu > ul > li.cr-mobile-spectrum-search{ display:flex; } } @media (max-width: 680px){ .navigation-menu ul li[data-navigation] ul li[data-gcse] { display: none !important; } } .ss-mentry{display:none} @media only screen and (max-width:960px){.ss-mentry{display:block}} .ss-mentry{background:#F5F7FA;border-bottom:1px solid #E6E9EE;padding:16px} .ss-mentry__inner{max-width:560px;margin-left:auto;margin-right:auto} /* phone intro band (navy, same as the desktop "Trusted Partner" band): H1, explainer, Get In Touch */ .ss-mintro{display:none} .ss-svc-sub{display:none} .ss-svc-icon{display:none} @media only screen and (max-width:960px){.ss-mintro{display:block}} .ss-mintro{background:#061A3E;padding:20px 16px 22px} .ss-mintro__inner{max-width:560px;margin-left:auto;margin-right:auto} .ss-mintro__h1{font-family:'Nunito',sans-serif;font-size:24px;font-weight:600;line-height:1.25;letter-spacing:0;color:#fff;text-align:left;margin:0 0 8px} .ss-mintro__lede{font-family:'Nunito',sans-serif;font-size:15px;font-weight:400;line-height:1.45;color:#D3DBEA;text-align:left;margin:0 0 16px} .ss-mintro__btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;box-sizing:border-box;background:#1F64FF;border:1px solid #1F64FF;border-radius:8px;font-family:'Nunito',sans-serif;font-size:15px;font-weight:600;line-height:1.2;color:#fff;text-decoration:none} .ss-mintro__btn:hover,.ss-mintro__btn:focus{color:#fff;text-decoration:none} .ss-mintro__btn:active{background:#1A55DB} .ss-mintro__btn:focus-visible{outline:2px solid transparent;box-shadow:0 0 0 2px #061A3E,0 0 0 4px #fff} @media (forced-colors:active){.ss-mintro__btn{border:2px solid ButtonText}} .ss-mentry__brow{font-family:'Nunito',sans-serif;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#1F64FF;margin:0 0 8px} .ss-mentry__cta{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 8px 0 14px;background:#fff;border:1px solid #7B8AA0;border-radius:8px;box-shadow:0 1px 3px rgba(14,19,48,.10);text-decoration:none} .ss-mentry__cta:hover{border-color:#1F64FF} .ss-mentry__cta:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px #fff,0 0 0 5px #8400A8} .ss-mentry__icon{flex:0 0 auto;font-size:24px;line-height:1;color:#5A6782} .ss-mentry__label{flex:1 1 auto;min-width:0;font-family:'Nunito',sans-serif;font-size:16px;color:#5A6782;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ss-mentry__btn{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;background:#1F64FF;color:#fff;font-family:'Nunito',sans-serif;font-size:15px;font-weight:600;line-height:1.2;padding:0 18px;border-radius:5px} @media only screen and (max-width:374px){.ss-mentry__label{font-size:15px}.ss-mentry__btn{padding:0 12px}} @media (forced-colors:active){.ss-mentry__cta{border:2px solid ButtonText}} @media only screen and (max-width:960px){ .list-container .card-container .item .map-container .image{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#fff} } /* 4. 2.5 GHz notice banner, phones: the whole banner is the link, with a chevron, and " Click Here." is hidden (161px -> 84px tall at 375px). font-size:0 on the

hides both the link text and the stray "." text node after ; the message span gets its size back. The link is stretched over the banner itself (position:absolute; inset:0) - main.css gives a.underline position:relative, so an ::after overlay would only cover the link's own box. */ @media only screen and (max-width:960px){ .section__important-notice{position:relative} .section__important-notice .section__wrapper{width:auto;max-width:none;margin:0;padding:10px 44px 10px 16px} .section__important-notice .section__wrapper p.section__text{font-size:0 !important;line-height:1.4 !important;margin:0;text-align:left} .section__important-notice .set__extra-bold{font-size:15px;line-height:1.4;color:#2B3245} /* navy on the orange (#FF9800) = 8.44:1; white was 2.16:1 - matches the listing cards' NEW tag */ .section__important-notice .new-tag-alert{font-size:12px;padding:2px 6px;margin-right:6px;vertical-align:1px;color:#0E1330} .section__important-notice a.underline{position:absolute;inset:0;font-size:0;z-index:1;text-decoration:none} .section__important-notice a.underline::after{content:"chevron_right";content:"chevron_right" / "";font-family:'Material Icons';font-size:24px;line-height:1;color:#1F64FF;position:absolute;right:12px;top:50%;transform:translateY(-50%);-webkit-font-feature-settings:'liga';font-feature-settings:'liga'} .section__important-notice a.underline:focus-visible{outline:2px solid transparent;outline-offset:-4px;box-shadow:inset 0 0 0 3px #8400A8} } /* 5. "Want to Learn More?" block, phones: replaces the Contact section below 960px (Contact's phone/email were plain text there - nothing was tappable). Email first, call second. Field styled like the .ss-mentry search row above. */ .ss-mlearn{display:none} @media only screen and (max-width:960px){ .cr-contact-section{margin:50px 0;} .ss-mlearn{display:block;background:#F5F7FA;border-top:1px solid #E6E9EE;padding:24px 16px 4px} .ss-mlearn__inner{max-width:560px;margin-left:auto;margin-right:auto} .ss-mlearn__title{font-family:'Nunito',sans-serif;font-size:22px;font-weight:600;line-height:1.25;color:#0E1330;margin:0 0 12px;text-align:left} .ss-mlearn__lede{font-family:'Nunito',sans-serif;font-size:15px;font-weight:400;line-height:1.4;color:#5A6782;margin:4px 0 14px;text-align:left} /* HubSpot contact form slot (the embed draws its own fields; the global .hs-form-frame rule adds a 50px top margin for the desktop "just ask" layout) */ /* min-height ~ the HubSpot form's rendered height at phone width (~890px) so arriving via Get In Touch / the Learn More tab doesn't shift the page while it loads; revisit if the form's fields change in HubSpot */ .ss-mlearn__form{margin:0 0 4px;min-height:860px} .ss-mlearn__form .hs-form-frame{margin-top:0} .ss-mlearn__call{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:0;font-family:'Nunito',sans-serif;font-size:15px;line-height:1.3;color:#2B3245;text-decoration:none} .ss-mlearn__call:hover,.ss-mlearn__call:focus{color:#2B3245;text-decoration:none} .ss-mlearn__call-icon{font-size:20px;line-height:1;color:#1F64FF} .ss-mlearn__call-num{color:#1F64FF;font-weight:600} .ss-mlearn__call:focus-visible{outline:2px solid transparent;outline-offset:2px;border-radius:4px;box-shadow:0 0 0 2px #fff,0 0 0 5px #8400A8} } @media only screen and (max-width:960px) and (forced-colors:active){ } /* 6. Phones: cut "Why Choose Us / Our Mission / Proven Success" (1,301px of text that repeats the 30+ years / 300+ transactions claims) and "Industries" (2,235px, 29% of the page; five large photos). Megan approved "simplify: restyle + cut" 2026-10-06. Desktop keeps both. */ @media only screen and (max-width:960px){ #home-why-choose,#home-industries{display:none} } /* 7. Services, phones: three 240px image cards (1,072px, a full screen per card; Clarity shows the 45% phone drop-off while scrolling them) become one grouped list of tappable rows - 44px round thumbnail, title, chevron; descriptions hidden (each destination page carries the full text). The is already the whole card, so each row stays a single link. */ @media only screen and (max-width:960px){ /* main.css caps .section-container__content and .section__wrapper at 80vw (300px at 375) */ /* both grey sections carry a 3px grey box-shadow that draws a line between them (Megan: "does it need that line between RT and services") */ #home-services,#home-listings{box-shadow:none} #home-services > section{max-width:none;margin:0 16px;padding:6px 0 10px} /* main.css .clearfix:after adds a hidden 22px block (content ".") under the list */ #home-services > section.clearfix:after{content:"";display:block;height:0;line-height:0} #home-services .section__wrapper{max-width:560px;margin:0 auto} #home-services .section_title{font-family:'Nunito',sans-serif;font-size:22px;font-weight:600;line-height:1.25;color:#0E1330;text-align:left;padding:0;margin:0 0 12px} #home-services .section__divider-line{display:none} #home-services .cr-fp-services{display:block;background:#fff;border:1px solid #E6E9EE;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(14,19,48,.08)} #home-services .cr-fp-services .cr-col{width:auto;max-width:none;flex:none;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none} #home-services .cr-fp-services .cr-col + .cr-col{border-top:1px solid #E6E9EE} #home-services .cr-fp-services a.outline.light{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;padding:12px 12px 12px 14px;box-sizing:border-box;background:#fff;border-radius:0;text-decoration:none;transform:none} #home-services .cr-fp-services a.outline.light::after{content:"chevron_right";content:"chevron_right" / "";font-family:'Material Icons';font-size:24px;line-height:1;color:#7B8AA0;flex:0 0 auto;-webkit-font-feature-settings:'liga';font-feature-settings:'liga'} #home-services .cr-fp-services a.outline.light:active{background:#F5F7FA} #home-services .cr-fp-services a.outline.light:focus-visible{outline:2px solid transparent;outline-offset:-4px;box-shadow:inset 0 0 0 3px #8400A8} #home-services .cr-fp-services .content{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center;flex:1 1 auto;min-width:0;text-align:left} /* Material icons replace the round photos (Megan 2026-10-07: "i don't like the images here"); the lazy-loaded photos stay for desktop and are not fetched while display:none */ #home-services .cr-fp-services .content img{display:none} #home-services .cr-fp-services .ss-svc-icon{grid-row:1 / span 2;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:#EEF4FD;color:#1F64FF} #home-services .cr-fp-services .ss-svc-icon .material-icons{font-size:26px;line-height:1} #home-services .cr-fp-services .content h3{grid-column:2;align-self:end;font-family:'Nunito',sans-serif;font-size:17px;font-weight:600;line-height:1.3;color:#0E1330;text-align:left;margin:0} /* one-line phone subtitles (Megan 2026-10-06: the rows felt "a little light") */ #home-services .cr-fp-services .ss-svc-sub{display:block;grid-column:2;align-self:start;font-family:'Nunito',sans-serif;font-size:14px;line-height:1.35;color:#5A6782} #home-services .cr-fp-services .marketing-site-features-desc{display:none} } /* 8. New Listings / Recent Transactions, phones (<=760px) - Megan: the cards "don't look modern and swipe able". From a 3-way design panel she picked the "peek" card, then said it "feels off balance" and chose version B: one full-width centered card (16px gutters), left-aligned 22px headers, a 12px-radius card with title / place / band chip, and the arrows centered under the card (44px targets, thumb reach). Touch swipe works as before. CSS only - listings.js and carousel-slider.js are unchanged; desktop is untouched. Owl 1.3.3 sizes each slide from the

    's own width, so the
      is 100% minus one gutter and each card leaves a gutter-wide right margin (= the gap between cards); a card that has slid off to the left ends exactly at x=0. 601-760px is Owl's 2-up range: two cards per view, same gutters. Never set .owl-item{display:block} (it blanks the carousel, 2026-09-15). */ @media only screen and (max-width:960px){ #as__View-Listings{--ssl-g:16px} /* section: full-bleed; clips the next slide at the screen edge (clip, not hidden, so keyboard focus on an off-screen chip cannot scroll the section sideways) */ #as__View-Listings.section-container__content{max-width:none;width:auto;margin:0;padding:24px 0;overflow:hidden;overflow:clip} #as__View-Listings.clearfix:after{content:"";height:0;line-height:0} #as__View-Listings .section__wrapper{max-width:none;width:auto;margin:0;padding:0} #as__View-Listings .cr-listing-slider-container, #as__View-Listings .section__wrapper .section__wrapper{padding:0 var(--ssl-g)} #as__View-Listings .section__wrapper .section__wrapper{margin-top:28px} /* header: 22px title, then a 44px "Explore all ..." row */ #as__View-Listings.trim-start.mobile-reduce .section__text.title-small.set__before-text{margin:0;font-size:22px;line-height:28px;font-weight:600;letter-spacing:0;color:#0E1330;text-align:left} #as__View-Listings.trim-start.mobile-reduce .section__text.set__after-title{display:flex;align-items:center;min-height:44px;margin:0 0 4px;padding:0;font-size:15px;line-height:20px;text-align:left} #as__View-Listings.trim-start.mobile-reduce .section__text.set__after-title i{order:2;margin-left:4px;font-size:18px;line-height:1;vertical-align:0;color:#1F64FF} #as__View-Listings .set__after-title a.underline{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:#1F64FF;text-decoration:none} #as__View-Listings .set__after-title a.underline:before{display:none} /* main.css gives a.underline position:relative; this stretches the tap area over the launch icon */ #as__View-Listings .set__after-title a.underline:after{content:"";position:absolute;top:0;bottom:0;left:0;right:-24px} /* carousel: the
        width drives Owl's slide width */ #as__View-Listings #New-Listings, #as__View-Listings #Recent-Transactions{width:calc(100% - var(--ssl-g));margin:0 0 0 var(--ssl-g)} #as__View-Listings.trim-start.mobile-reduce #Recent-Transactions{margin-bottom:0} /* reserve the carousel height before listings.js + Owl fill it (Rocket Loader runs them after load): with the listings moved up under the search row, the late fill shifted the rest of the page (CLS 0.26 at 375, 0.30 at 390). 1-up: 16:9 map of (100vw - 32px) + ~137px of text, chip and arrows; a floor, kept a couple of px under the real height. */ #as__View-Listings #New-Listings, #as__View-Listings #Recent-Transactions{min-height:calc(56.25vw + 117px)} /* listings.js stacks all cards for one frame before Owl wraps them (3,038px at 375); clip to the reserved height until Owl has initialised (.owl-carousel). If Owl never runs, the first card still shows. */ #as__View-Listings .list-container:not(.owl-carousel){max-height:calc(56.25vw + 117px);overflow:hidden} /* card: flat white, 12px radius, hairline, soft shadow (!important beats frontpage.css) */ #as__View-Listings .list-container .card-container.small-card{flex:0 0 auto;width:calc(100% - var(--ssl-g))!important;max-width:none!important;margin:0 var(--ssl-g) 0 0;border:1px solid #E6E9EE;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(14,19,48,.06),0 4px 12px rgba(14,19,48,.06)!important} #as__View-Listings .list-container .card-container .item .map-container{display:block} #as__View-Listings .list-container .card-container .item .map-container .image{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#fff;border-radius:0;border-bottom:1px solid #E6E9EE} #as__View-Listings .list-container .card-container .item .content{margin:0;padding:12px 14px 8px;text-align:left} #as__View-Listings .list-container .card-container .item .content .headline{margin:0 0 2px;padding:0;font-size:17px;line-height:22px;font-weight:600;letter-spacing:0;color:#0E1330;text-align:left;overflow-wrap:anywhere} #as__View-Listings .list-container .card-container .item .new-listing ~ .content .headline{padding-right:60px} #as__View-Listings .list-container .card-container .item .content .headline a{position:relative;z-index:1;color:#0E1330;text-decoration:underline;text-decoration-color:#7B8AA0;text-underline-offset:3px} #as__View-Listings .list-container .card-container .item .content .description{margin:0;font-size:15px;line-height:20px;font-weight:400;letter-spacing:0;color:#5A6782;text-align:left} /* location: one line, so a long location cannot make one card taller than its neighbors; pin icon from the already-loaded Material Icons font ("/ ''" keeps it silent for screen readers) */ #as__View-Listings .list-container .card-container .item .content .headline + .description{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #as__View-Listings .list-container .card-container .item .content .headline + .description:before{content:"place";content:"place"/"";display:inline-block;margin:0 4px 0 -1px;font-family:'Material Icons';font-size:16px;line-height:20px;font-weight:400;vertical-align:top;color:#5A6782;text-transform:none;letter-spacing:normal;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga'} #as__View-Listings .list-container .card-container .item .content .description + .description{margin-top:2px} /* band chip: 32px pill drawn by :before inside a 44px-tall tap target; #1F64FF on #F5F8FF = 4.57:1 */ #as__View-Listings .list-container .card-container .item .content .description a.outline{position:relative;z-index:0;display:inline-flex;align-items:center;box-sizing:border-box;min-height:44px;max-width:100%;margin:0;padding:8px 12px;background:transparent;border-radius:8px;font-size:14px;line-height:18px;font-weight:600;color:#1F64FF;text-align:left} #as__View-Listings .list-container .card-container .item .content .description a.outline:before{content:"";position:absolute;top:6px;right:0;bottom:6px;left:0;z-index:-1;border:1px solid #CFDCFF;border-radius:8px;background:#F5F8FF} #as__View-Listings .list-container .card-container .item .content .description a.outline:active:before{border-color:#1F64FF} /* NEW tag: off the map, at the right end of the title row (56.25% of the card width = the 16:9 map height); navy on the brand orange = 7.69:1 (white was 2.37:1) */ #as__View-Listings .item span.new-listing{top:0;right:14px;left:auto;height:20px;margin-top:calc(56.25% + 14px);padding:0 7px;border:1px solid transparent;border-radius:4px;box-shadow:none;background:#F09300;color:#0E1330;font-size:11px;line-height:18px;font-weight:600;letter-spacing:.06em} /* arrows: 34px outlined circles (matches the search row's #7B8AA0 field border) in 44px tap areas, centered under the card (width = the card's width) within thumb reach */ #as__View-Listings .owl-carousel .owl-controls{position:static;top:auto;right:auto;left:auto;display:flex;justify-content:center;width:calc(100% - var(--ssl-g));height:auto;margin-top:10px} #as__View-Listings .owl-controls .owl-buttons{position:static;display:flex;gap:20px;width:auto} #as__View-Listings .owl-controls .owl-buttons .owl-prev, #as__View-Listings .owl-controls .owl-buttons .owl-next{position:relative;width:44px;height:44px} #as__View-Listings .owl-controls .owl-buttons .owl-prev:before, #as__View-Listings .owl-controls .owl-buttons .owl-next:before{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;border:1px solid #7B8AA0;border-radius:50%;background:#fff} #as__View-Listings .owl-controls .owl-buttons .owl-prev:after, #as__View-Listings .owl-controls .owl-buttons .owl-next:after{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;border:solid #2B3245;border-width:0 0 2px 2px;transform:translate(-30%,-50%) rotate(45deg)} #as__View-Listings .owl-controls .owl-buttons .owl-next:after{border-width:2px 2px 0 0;transform:translate(-70%,-50%) rotate(45deg)} #as__View-Listings .owl-controls .owl-buttons .owl-prev:active:before, #as__View-Listings .owl-controls .owl-buttons .owl-next:active:before{border-color:#1F64FF;background:#F5F8FF} /* Owl's arrows stay in place (alt text, click target) but are transparent */ #as__View-Listings .owl-controls .owl-buttons .owl-prev img, #as__View-Listings .owl-controls .owl-buttons .owl-next img{position:absolute;top:0;right:auto;left:0;z-index:1;width:100%;height:100%;margin:0;padding:0;opacity:0;background:none;box-shadow:none} /* focus: purple ring like the search row. The transparent outline becomes the visible ring in forced-colors mode, where box-shadow is dropped. The resting outline color is transparent too, so main.css's a.underline "transition:all" has no blue to fade from. */ #as__View-Listings .set__after-title a.underline, #as__View-Listings .list-container .card-container .item .content .headline a, #as__View-Listings .list-container .card-container .item .content .description a.outline{outline-color:transparent} #as__View-Listings .set__after-title a.underline:focus-visible, #as__View-Listings .list-container .card-container .item .content .headline a:focus-visible{outline:2px solid transparent;outline-offset:2px;border-radius:4px;box-shadow:0 0 0 2px #fff,0 0 0 5px #8400A8} #as__View-Listings .list-container .card-container .item .content .description a.outline:focus-visible{outline:2px solid transparent;outline-offset:0} #as__View-Listings .list-container .card-container .item .content .description a.outline:focus-visible:before{box-shadow:0 0 0 2px #fff,0 0 0 5px #8400A8} } /* 601-960px: the listings sit in a fixed column (item 17), so each card is 272px wide and the carousel ~286px tall at 2-up (and at 3-up, 901-960px, in the wider column) - a fixed floor */ @media only screen and (min-width:601px) and (max-width:960px){ #as__View-Listings #New-Listings, #as__View-Listings #Recent-Transactions{min-height:284px} #as__View-Listings .list-container:not(.owl-carousel){max-height:284px} } /* 8b. Tighter cards - Megan: "how can we reduce space" (New Listings, then "same" for Recent Transactions): location and band chip share one row (the chip mostly repeats the title on New Listings), "Explore all ..." sits beside the section title when it fits (wraps under it when not - "Recent Transactions" + its link are too wide for a phone), and a 6px gap above the arrows. -28px per card; the reserved min-heights above follow. */ @media only screen and (max-width:960px){ #as__View-Listings .list-container .card-container .item .content{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center;padding:10px 14px 6px} #as__View-Listings .list-container .card-container .item .content .headline{grid-column:1 / -1;margin-bottom:0} #as__View-Listings .list-container .card-container .item .content .headline + .description{grid-column:1;min-width:0} #as__View-Listings .list-container .card-container .item .content .description + .description{grid-column:2;margin-top:0;justify-self:end;max-width:60vw} #as__View-Listings .cr-listing-slider-container, #as__View-Listings .section__wrapper .section__wrapper{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:12px} #as__View-Listings.trim-start.mobile-reduce .section__text.set__after-title{margin:0} #as__View-Listings .owl-carousel .owl-controls{margin-top:6px} } @media only screen and (max-width:960px) and (hover:hover){ #as__View-Listings .set__after-title a.underline:hover{text-decoration:underline} #as__View-Listings .list-container .card-container .item .content .description a.outline:hover:before{border-color:#1F64FF} #as__View-Listings .owl-controls .owl-buttons .owl-prev:hover:before, #as__View-Listings .owl-controls .owl-buttons .owl-next:hover:before{border-color:#1F64FF} } @media only screen and (max-width:960px) and (prefers-reduced-motion:reduce){ /* Owl animates the slide with an inline 900ms transition; jump instead */ #as__View-Listings .owl-carousel .owl-wrapper{-webkit-transition:none!important;transition:none!important} } @media only screen and (max-width:960px) and (forced-colors:active){ #as__View-Listings .list-container .card-container.small-card{border-color:CanvasText} #as__View-Listings .item span.new-listing{border-color:CanvasText} #as__View-Listings .list-container .card-container .item .content .description a.outline:before{border-color:LinkText} #as__View-Listings .owl-controls .owl-buttons .owl-prev:before, #as__View-Listings .owl-controls .owl-buttons .owl-next:before, #as__View-Listings .owl-controls .owl-buttons .owl-prev:after, #as__View-Listings .owl-controls .owl-buttons .owl-next:after{border-color:ButtonText} } /* 9. Footer, phones (<=960px) - Megan: "footer is still too tall and seems repetitive" (509px). The Services / Resources / Company link groups repeat the hamburger menu and the page, so they are hidden; "Stay Connected" (News, YouTube, LinkedIn) becomes one row of 44px pills; the "Home" breadcrumb is hidden; copyright + Terms / Privacy / Site Map stay. 172px at 375px. Homepage only - other pages keep the shared footer. */ @media only screen and (max-width:960px){ #cl-footer{padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid #E6E9EE;box-shadow:none} #cl-footer .footer-content{max-width:560px;margin:0 auto;padding:0} #cl-footer .footer-menu{display:block;padding:0;margin:0} /* Services / Resources / Company repeat the hamburger menu and the page itself */ #cl-footer .footer-col{display:none} #cl-footer .footer-col:last-child{display:block;width:auto;margin:0;padding:0;border:0} #cl-footer .footer-col:last-child .item,#cl-footer .footer-col:last-child .col-section{margin:0;padding:0;border:0} /* the accordion takes the list out of flow; put everything back in normal flow */ #cl-footer .footer-menu,#cl-footer .footer-col:last-child,#cl-footer .footer-col:last-child .item,#cl-footer .footer-col:last-child .col-section,#cl-footer .footer-col:last-child .product-list{position:static !important;float:none;height:auto !important;min-height:0;transform:none} #cl-footer .footer-col:last-child input,#cl-footer .footer-col:last-child label{display:none} #cl-footer .footer-col:last-child .product-list{display:flex !important;flex-wrap:wrap;gap:6px;max-height:none !important;height:auto !important;overflow:visible !important;opacity:1 !important;visibility:visible !important;margin:0;padding:0;list-style:none} #cl-footer .footer-col:last-child .product-list li{margin:0;padding:0;border:0} /* phone-only link pills (About, Available Spectrum) above the social pills */ #cl-footer .ss-mfoot-links{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;padding:0;list-style:none} #cl-footer .ss-mfoot-links li{margin:0;padding:0} #cl-footer .ss-mfoot-links a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;box-sizing:border-box;background:#fff;border:1px solid #D5DBE5;border-radius:22px;font-family:'Nunito',sans-serif;font-size:14px;font-weight:600;line-height:1;color:#2B3245;text-decoration:none} #cl-footer .ss-mfoot-links a .material-icons{font-size:18px;line-height:1;color:#1F64FF} #cl-footer .ss-mfoot-links a:focus-visible{outline:2px solid transparent;box-shadow:0 0 0 2px #fff,0 0 0 5px #8400A8} /* Megan 2026-10-06: "remove news button" (phones) */ #cl-footer .footer-col:last-child .product-list li:has(> a[href="/news"]){display:none} #cl-footer .footer-col:last-child .product-list a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;box-sizing:border-box;background:#fff;border:1px solid #D5DBE5;border-radius:22px;font-family:'Nunito',sans-serif;font-size:14px;font-weight:600;line-height:1;color:#2B3245;text-decoration:none} #cl-footer .footer-col:last-child .product-list a img{width:18px;height:18px;margin:0;object-fit:contain} #cl-footer .footer-col:last-child .product-list a:focus-visible{outline:2px solid transparent;box-shadow:0 0 0 2px #fff,0 0 0 5px #8400A8} #footer-breadcrumb,#footer-navigation-breadcrumb{display:none} #cl-footer .footer-base{margin:16px 0 0;padding:12px 0 0;border-top:1px solid #E6E9EE} #cl-footer .footer-more-ways{display:none} #cl-footer .footer-legal{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:0;padding:0} #cl-footer .footer-legal-copyright{margin:0;font-family:'Nunito',sans-serif;font-size:13px;font-weight:400;line-height:1.4;color:#5A6782} #cl-footer .footer-legal-links{display:flex;flex-wrap:wrap;margin:0 0 0 -10px;padding:0} #cl-footer .footer-legal-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;margin:0;border:0;font-family:'Nunito',sans-serif;font-size:14px;font-weight:400;color:#2B3245;text-decoration:none} #cl-footer .footer-legal-links a:focus-visible{outline:2px solid transparent;border-radius:4px;box-shadow:0 0 0 2px #fff,0 0 0 5px #8400A8} } /* 10. "Your Trusted Partner..." band, phones (<=960px): the heading was 42px bold, five lines, 357px tall in a 300px column (788px for the section). Now: heading first (22px 600, left-aligned), then the video thumbnail, then "Get In Touch"; 16px gutters. The video stays until Megan has data on whether anyone plays it. column__second is flattened with display:contents so its heading and button can sit either side of the video. */ @media only screen and (max-width:960px){ /* 2026-10-06: replaced on phones by the navy intro band at the top (#home-mobile-intro) */ #home-trusted{display:none} #home-trusted{margin-top:0} #home-trusted > section{max-width:none;margin:0 16px;padding:24px 0} #home-trusted > section.clearfix:after{content:"";display:block;height:0;line-height:0} #home-trusted .section__wrapper{max-width:560px;margin:0 auto} #home-trusted .column-container__content{display:flex;flex-direction:column;align-items:stretch;gap:0} #home-trusted .column__second{display:contents} #home-trusted .column__second h2{order:0;margin:0 0 14px;font-family:'Nunito',sans-serif;font-size:22px;font-weight:600;line-height:1.3;color:#fff;text-align:left} /* video thumbnail removed on phones - Megan 2026-10-06: "only 1 click in 120 days" */ #home-trusted .column__first{display:none} #home-trusted .cr-video-thumb{max-width:none;margin:0} #home-trusted .column__second .section__text{order:2;display:flex;justify-content:flex-start;align-self:stretch;width:auto;max-width:none;margin:2px 0 0;padding:0;text-align:left} #home-trusted .column__second a.cr-blue-bg-btn{display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:0;max-width:none;min-height:44px;margin:0;padding:0 22px;box-sizing:border-box;background:#1F64FF;border:1px solid #1F64FF;border-radius:8px;font-family:'Nunito',sans-serif;font-size:15px;font-weight:600;line-height:1.2;color:#fff;text-decoration:none} #home-trusted .column__second a.cr-blue-bg-btn:focus-visible{outline:2px solid transparent;box-shadow:0 0 0 2px #061A3E,0 0 0 4px #fff} } /* 11. Phones (<=960px): New Listings + Recent Transactions move up to sit directly under the search row (approved phone plan; on desktop they stay where they are). Done with flex order on , whose sections are all direct children: everything after the search row gets order 1, and the listings wrapper keeps order 0, so it follows the search row. Fixed/absolute children (cookie bar, popups) are unaffected by order. */ @media only screen and (max-width:960px){ body{display:flex;flex-direction:column} body > *{order:1} body > #cl-header,body > .section__important-notice,body > .ss-mintro,body > .ss-mentry,body > #home-listings{order:0} } /* 12. Bottom tab bar, phones (<=960px) - styled after the Spectrum Search app's phone bar (Megan: "i really like the bottom of the spectrum search"): three equal tabs, icon over an 11px label, the in-page tab highlighted while its section is in view (#1F64FF on #EEF4FD). Search opens the app, Bands opens /available-spectrum, Learn More scrolls to the email field. Hidden (and inert) until the search row is under the header and the cookie banner has been answered; then it stays, and the page gets bottom padding so the footer clears it. z-index 998: under the fixed header/menu (999) and popups (999999). */ .ss-mbar{display:none} /* hero video poster, desktop only (moved off the poster="" attribute so phones don't fetch it) */ @media only screen and (min-width:961px){#home-hero-video{background:#061A3E url(/assets/videos/tower-hero-poster.webp) center / cover no-repeat}} @media only screen and (min-width:961px){#cl-footer .ss-mfoot-links{display:none}} @media only screen and (max-width:960px){ .ss-mbar{display:flex;justify-content:space-around;gap:0;position:fixed;left:0;right:0;bottom:0;z-index:998;padding:5px 4px calc(5px + env(safe-area-inset-bottom,0px));background:#fff;box-shadow:0 -1px 6px rgba(0,0,0,.22);transform:translateY(110%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s} .ss-mbar.is-visible{transform:none;visibility:visible;transition:transform .2s ease,visibility 0s} .ss-mbar__tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:52px;border-radius:12px;color:#5A6782;font-family:'Nunito',sans-serif;text-decoration:none;-webkit-tap-highlight-color:transparent} .ss-mbar__tab:hover,.ss-mbar__tab:focus{color:#5A6782;text-decoration:none} .ss-mbar__tab .material-icons{font-size:23px;line-height:1} .ss-mbar__label{font-size:11px;font-weight:600;line-height:1.2;text-align:center} .ss-mbar__tab.is-active,.ss-mbar__tab.is-active:hover,.ss-mbar__tab.is-active:focus{color:#1F64FF;background:#EEF4FD} .ss-mbar__tab:active{background:#EEF4FD} .ss-mbar__tab:focus-visible{outline:2px solid transparent;box-shadow:inset 0 0 0 2px #8400A8} html.ss-mbar-on body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))} } @media only screen and (max-width:960px) and (prefers-reduced-motion:reduce){ .ss-mbar,.ss-mbar.is-visible{transition:none} } @media only screen and (max-width:960px) and (forced-colors:active){ .ss-mbar{border-top:2px solid CanvasText} .ss-mbar__tab.is-active{outline:2px solid Highlight} } /* 13. Phones (<=960px): no full-page loader. body[data-visibility] kept the whole page hidden until window load or a 4 s timer (on a slow 4G phone the content was ready seconds earlier). Desktop keeps the loader. Icon glyphs stay hidden until html.mi-ready (set in once the Material Icons font loads, 3 s fallback) so their ligature words never flash. */ @media only screen and (max-width:960px){ body[data-visibility]{visibility:visible} .loading-screen{display:none} html:not(.mi-ready) .material-icons, html:not(.mi-ready) .section__important-notice a.underline::after, html:not(.mi-ready) #home-services .cr-fp-services a.outline.light::after, html:not(.mi-ready) #as__View-Listings .list-container .card-container .item .content .headline + .description::before{visibility:hidden} } /* 14. Listing carousels, phones (<=760px): 0.3 s slides (Owl sets an inline 900 ms transition) and dimmed end arrows (the script above turns rewindNav off, so Owl marks them .disabled). */ @media only screen and (max-width:960px){ #as__View-Listings .owl-carousel .owl-wrapper{-webkit-transition-duration:.3s!important;transition-duration:.3s!important} #as__View-Listings .owl-controls .owl-buttons .disabled{opacity:.4;pointer-events:none} #as__View-Listings .owl-controls .owl-buttons .owl-prev:focus-visible, #as__View-Listings .owl-controls .owl-buttons .owl-next:focus-visible{outline:2px solid transparent} #as__View-Listings .owl-controls .owl-buttons .owl-prev:focus-visible:before, #as__View-Listings .owl-controls .owl-buttons .owl-next:focus-visible:before{box-shadow:0 0 0 2px #fff,0 0 0 4px #8400A8} } /* 15. Touch feedback, phones (<=960px): pressed states on the controls that had none. */ @media only screen and (max-width:960px){ .ss-mentry__cta,.section__important-notice a.underline,#as__View-Listings .set__after-title a.underline,.ss-mlearn__call,#cl-footer .ss-mfoot-links a,#cl-footer .footer-col:last-child .product-list a,#cl-footer .footer-legal-links a{-webkit-tap-highlight-color:transparent} .ss-mentry__cta:active{background:#F5F7FA;border-color:#1F64FF} .ss-mentry__cta:active .ss-mentry__btn{background:#1A55DB} .section__important-notice a.underline:active{background:rgba(31,100,255,.10)} #as__View-Listings .set__after-title a.underline:active{color:#1A55DB;text-decoration:underline} .ss-mlearn__call:active{background:#E9EDF4;border-radius:6px} #cl-footer .ss-mfoot-links a:active,#cl-footer .footer-col:last-child .product-list a:active{background:#F5F7FA;border-color:#1F64FF} #cl-footer .footer-legal-links a:active{background:#E9EDF4;border-radius:4px} } /* 16. Large text settings, phones (<=960px): at 1.5-2x text the floating bar's labels collided and the search label clipped. The bar may wrap/stack its buttons and the label may take two lines; at normal text sizes nothing changes. (Card locations keep one line with an ellipsis - wrapping them would make card heights uneven and undo the reserved carousel height.) */ @media only screen and (max-width:960px){ .ss-mbar__tab{height:auto;min-height:52px;padding:4px 2px} .ss-mentry__label{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3;padding:6px 0} #as__View-Listings .item span.new-listing{height:auto;min-height:20px} } /* 17. 601-960px (large phones / tablets): the listings join the other sections' centred 560px column (they ran edge to edge from x16 while everything else started at the column), and the floating bar's buttons stay in that column instead of stretching. The card/arrow rules (items 8, 8b, 14) now run to 960px, so tablets get the same cards and 44px controls instead of the old ones. */ @media only screen and (min-width:601px) and (max-width:960px){ #as__View-Listings > .section__wrapper{max-width:592px;margin-left:auto;margin-right:auto} .ss-mbar{padding-left:max(16px, calc((100% - 560px) / 2));padding-right:max(16px, calc((100% - 560px) / 2))} } /* 901-960px: Owl switches to 3 cards per view by window width; widen the listings column so the cards keep their 272px size instead of shrinking to 176px */ @media only screen and (min-width:901px) and (max-width:960px){ #as__View-Listings > .section__wrapper{max-width:880px} } /* 18. Footer links on one row, phones (<=960px) - Megan: "shouldn't these go across horizontally". About / Available Spectrum as text pills on the left, YouTube / LinkedIn as 44px logo-only circles on the right (their text stays in the link at font-size 0, so screen readers still hear "YouTube" / "LinkedIn"). Below ~340px of width the social pair wraps to a second row. */ @media only screen and (max-width:960px){ #cl-footer .footer-content{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;row-gap:8px} /* the text pills stretch to fill the row (no empty gap before the logos) */ #cl-footer .ss-mfoot-links{flex:1 1 auto;margin:0} #cl-footer .ss-mfoot-links li{flex:1 1 auto} #cl-footer .ss-mfoot-links a{width:100%;justify-content:center} #cl-footer .ss-mfoot-links a .material-icons{display:none} #cl-footer .footer-menu{margin-left:0} #cl-footer .footer-base,#cl-footer #footer-breadcrumb{flex:0 0 100%} #cl-footer .footer-col:last-child .product-list a{width:44px;padding:0;justify-content:center;gap:0;font-size:0} #cl-footer .footer-col:last-child .product-list a img{width:20px;height:20px} } /* 19. Footer on one line, phones (<=960px) - Megan: "can all these be on 1 line?". About, Terms, Privacy and Site Map as plain text links, then the YouTube / LinkedIn circles at the right end; the copyright moves to its own small line underneath. .footer-base and .footer-legal are flattened (display:contents) so their links join the same flex row. Item 18's About pill is restyled here as a text link. */ @media only screen and (max-width:960px){ #cl-footer .footer-base,#cl-footer .footer-legal{display:contents} #cl-footer .footer-content{column-gap:0;row-gap:4px} #cl-footer .ss-mfoot-links{order:1;flex:0 0 auto;margin:0 0 0 -7px} #cl-footer .ss-mfoot-links li{flex:0 0 auto} #cl-footer .ss-mfoot-links a{width:auto;min-height:44px;padding:0 7px;background:none;border:0;border-radius:4px;font-size:14px;font-weight:400;color:#2B3245} #cl-footer .ss-mfoot-links a:active{background:#E9EDF4;border-color:transparent} #cl-footer .footer-legal-links{order:2;display:flex;flex-wrap:nowrap;margin:0} #cl-footer .footer-legal-links a{padding:0 7px;font-size:14px} #cl-footer .ss-mfoot-links a,#cl-footer .footer-legal-links a{line-height:20px;align-items:center} #cl-footer .footer-menu{order:3;margin-left:auto} #cl-footer .footer-col:last-child .product-list{gap:4px} #cl-footer .footer-legal-copyright{order:4;flex:0 0 100%;margin:4px 0 0;padding-top:10px;border-top:1px solid #E6E9EE} } /* 20. Phone header and menu (<=960px) - Megan: "does that hamburger look modern?" and, of the open menu, "I think we can modernize this page". Header: white and 56px tall (plus the 3px gradient line) with a smaller logo and a plain 28px menu icon in a 44px tap target on the 16px rail (was a light-grey glyph on a black square in a grey 92px bar that ran 3px over the notice banner). Menu: opens under the header so the logo stays in view, a white sheet of left-aligned 56px rows with a chevron on each, and Spectrum Search as the one blue button; the X sits exactly where the menu icon was. The page behind it doesn't scroll while it is open. This page only - the header is shared, so the other pages keep the old one until this moves into the shared CSS. */ @media only screen and (max-width:960px){ html header#cl-header{height:51px} /* + the body's 8px top margin = the nav's 59px */ #cl-header nav{background:#fff;border-bottom-width:3px;box-shadow:0 1px 4px rgba(14,19,48,.08)} #cl-header .cr-navigation-menu{height:56px;min-height:0;padding:0 8px 0 16px;background:#fff;align-items:center} #cl-header .cr-navigation-menu > a{display:flex;align-items:center;min-height:44px} #cl-header .logo__ssl{float:none;width:43px!important;height:32px;margin:0!important} #cl-header .logo__ssl-name{float:none;width:108px!important;height:32px;margin:0 0 0 6px} #cl-header .cr-mobile-side-icon{display:flex;align-items:center;margin:0;padding:0} #cl-header .cr-mobile-menu,#cl-header .cr-mobile-close-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:10px;background:transparent;color:#0E1330;cursor:pointer;-webkit-tap-highlight-color:transparent} #cl-header .cr-mobile-menu .material-icons,#cl-header .cr-mobile-close-btn .material-icons{font-size:28px;line-height:1;background:transparent;color:#0E1330} #cl-header .cr-mobile-menu:active,#cl-header .cr-mobile-close-btn:active{background:#EEF4FD} /* the open menu: a sheet under the header; the X is pinned over the menu icon */ #cl-header .cr-navigation-menu > ul.menu-clicked{position:fixed;top:59px;right:0;bottom:0;left:0;width:auto;height:auto;margin:0;padding:8px 0 calc(24px + env(safe-area-inset-bottom,0px));flex-direction:column;align-items:stretch;justify-content:flex-start;background:#fff;overflow-y:auto;overscroll-behavior:contain;z-index: 3000;} #cl-header .cr-navigation-menu > ul.menu-clicked > .cr-mobile-close-btn{position:fixed;top:6px;right:8px;font-size:0;background:#fff} html:has(#cl-header .cr-navigation-menu__inner.menu-clicked) #cl-header .cr-mobile-menu{visibility:hidden} #cl-header .cr-navigation-menu > ul.menu-clicked > li.set__menu-show-md{display:none} #cl-header .cr-navigation-menu > ul.menu-clicked > li:not(.set__menu-show-md){display:block;flex:0 0 auto;width:auto;max-width:560px;margin:0 16px;padding:0;border-bottom:1px solid #E6E9EE} #cl-header .cr-navigation-menu > ul.menu-clicked > li > a{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 2px;font-family:'Nunito',sans-serif;font-size:18px;line-height:1.3;font-weight:600;color:#0E1330;text-align:left;text-decoration:none;border:0;-webkit-tap-highlight-color:transparent} #cl-header .cr-navigation-menu > ul.menu-clicked > li > a::after{content:"chevron_right";font-family:'Material Icons';font-size:22px;font-weight:normal;line-height:1;color:#7B8AA0;-webkit-font-feature-settings:'liga';font-feature-settings:'liga'} #cl-header .cr-navigation-menu > ul.menu-clicked > li > a:active{background:#F5F7FA} /* Spectrum Search: the one blue button, at the end of the list */ #cl-header .cr-navigation-menu > ul.menu-clicked > li.cr-mobile-spectrum-search{margin-top:20px;border-bottom:0} #cl-header .cr-navigation-menu > ul.menu-clicked > li.cr-mobile-spectrum-search > a{justify-content:center;gap:8px;min-height:52px;border-radius:10px;background:#1F64FF;color:#fff} #cl-header .cr-navigation-menu > ul.menu-clicked > li.cr-mobile-spectrum-search > a::after{content:none} #cl-header .cr-navigation-menu > ul.menu-clicked > li.cr-mobile-spectrum-search > a::before{content:"search";font-family:'Material Icons';font-size:22px;font-weight:normal;line-height:1;-webkit-font-feature-settings:'liga';font-feature-settings:'liga'} #cl-header .cr-navigation-menu > ul.menu-clicked > li.cr-mobile-spectrum-search > a:active{background:#1A55DB} #cl-header .cr-navigation-menu > ul.menu-clicked > li > a:focus-visible,#cl-header .cr-mobile-menu:focus-visible,#cl-header .cr-mobile-close-btn:focus-visible{outline:2px solid transparent;box-shadow:inset 0 0 0 2px #8400A8;border-radius:8px} html:has(#cl-header .cr-navigation-menu__inner.menu-clicked),html:has(#cl-header .cr-navigation-menu__inner.menu-clicked) body{overflow:hidden} /* html:not(.mi-ready) #cl-header .cr-navigation-menu > ul.menu-clicked > li > a::after,html:not(.mi-ready) #cl-header .cr-navigation-menu > ul.menu-clicked > li > a::before{visibility:hidden} */ html:not(.mi-ready) #cl-header .cr-navigation-menu > ul.menu-clicked > li > a::after{visibility:hidden} } @media only screen and (min-width:601px) and (max-width:960px){ #cl-header .cr-navigation-menu > ul.menu-clicked{align-items:center} #cl-header .cr-navigation-menu > ul.menu-clicked > li:not(.set__menu-show-md){width:calc(100% - 32px)} } /* 21. Phone menu fills the screen (<=960px) - Megan: "if it's on a phone - shouldn't we use the entire space" (the open menu left half the screen empty) and "keep it simple". Each of the six rows gets an icon in a tinted square; the rows share the sheet's height, and Spectrum Search is pinned to the bottom (it stays in view if a short screen has to scroll). The sheet ends above the cookie banner while it shows (--ss-cookie-h, set by the tab-bar script). */ @media only screen and (max-width:960px){ /* overflow-x: main.css gives the sheet overflow:scroll, which draws an empty horizontal scrollbar along its bottom in desktop Chrome; 20px keeps the button off the bottom edge */ #cl-header .cr-navigation-menu > ul.menu-clicked{bottom:var(--ss-cookie-h,0px);overflow-x:hidden;padding:4px 0 calc(20px + env(safe-area-inset-bottom,0px));scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))} /* the six rows: equal shares of the height; the hairline starts after the icon */ #cl-header .cr-navigation-menu > ul.menu-clicked > li.animation__underline-ltr:not(.set__menu-show-md):not(.cr-mobile-spectrum-search){display:flex;flex:1 0 auto;min-height:60px;border-bottom:0;background:linear-gradient(#E6E9EE,#E6E9EE) no-repeat left 66px bottom/calc(100% - 66px) 1px} #cl-header .cr-navigation-menu > ul.menu-clicked > li.animation__underline-ltr:not(.set__menu-show-md):not(.cr-mobile-spectrum-search):has(> a[href="/contact"]){background:none} /* row link: icon | label | chevron */ #cl-header .cr-navigation-menu > ul.menu-clicked > li.animation__underline-ltr:not(.set__menu-show-md):not(.cr-mobile-spectrum-search) > a{flex:1 1 auto;display:grid;grid-template-columns:48px minmax(0,1fr) 22px;column-gap:16px;align-items:center;min-height:0;padding:0 2px;font-size:18px;line-height:1.25;font-weight:600;letter-spacing:0;border-radius:12px} #cl-header .cr-navigation-menu > ul.menu-clicked > li.animation__underline-ltr:not(.set__menu-show-md):not(.cr-mobile-spectrum-search) > a::before{grid-column:1;display:flex;align-items:center;justify-content:center;width:48px;height:48px;overflow:hidden;border-radius:14px;background:#EEF4FD;color:#1F64FF;font-family:'Material Icons';font-size:26px;font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';-webkit-font-smoothing:antialiased} #cl-header .cr-navigation-menu > ul.menu-clicked > li > a[href="/available-spectrum"]::before{content:"graphic_eq"} #cl-header .cr-navigation-menu > ul.menu-clicked > li > a[href="/services"]::before{content:"handshake"} #cl-header .cr-navigation-menu > ul.menu-clicked > li > a[href="/resources"]::before{content:"menu_book"} #cl-header .cr-navigation-menu > ul.menu-clicked > li > a[href="/events/upcomingevents"]::before{content:"event"} #cl-header .cr-navigation-menu > ul.menu-clicked > li > a[href="/about"]::before{content:"business"} #cl-header .cr-navigation-menu > ul.menu-clicked > li > a[href="/contact"]::before{content:"mail_outline"} #cl-header .cr-navigation-menu > ul.menu-clicked > li.animation__underline-ltr:not(.set__menu-show-md):not(.cr-mobile-spectrum-search) > a::after{grid-column:3;justify-self:end} #cl-header .cr-navigation-menu > ul.menu-clicked > li.animation__underline-ltr:not(.set__menu-show-md):not(.cr-mobile-spectrum-search) > a:active::before{background:#DCE8FC} /* the icon squares keep their tint while the icon font loads; only the glyph waits */ /* html:not(.mi-icons) #cl-header .cr-navigation-menu > ul.menu-clicked > li.animation__underline-ltr:not(.set__menu-show-md):not(.cr-mobile-spectrum-search) > a::before{visibility:visible;color:transparent} */ /* Spectrum Search: pushed to the bottom and kept in view if the sheet scrolls; the white shadow covers the sheet's bottom padding so rows don't show under it */ #cl-header .cr-navigation-menu > ul.menu-clicked > li.cr-mobile-spectrum-search:not(.set__menu-show-md){flex:0 0 auto;margin-top:auto;padding-top:16px;position:sticky;bottom:0;z-index:1;background:#fff;box-shadow:0 calc(20px + env(safe-area-inset-bottom,0px)) 0 #fff} #cl-header .cr-navigation-menu > ul.menu-clicked > li.cr-mobile-spectrum-search::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none} }