/* custom overrides (loaded last) */ /* Typekit's async loader hides the site's key content (nav, headings, body blocks, footer) behind a `wf-loading` class on until the webfont resolves, then flips it to `wf-active`/`wf-inactive` to reveal them. On some published domains that flip never happens: the loader's onload handler cancels its own 3s safety timeout and then throws on an undefined html5shiv/Modernizr global before Typekit.load() runs (the error is swallowed), so the page stays stuck in `wf-loading` and ALL of that text renders invisible. Force these elements visible so text always shows regardless of the font loader; the real webfont still swaps in when the kit resolves, otherwise it falls back to the Arial stack already declared in the base CSS. */ .wf-loading .siteName, .wf-loading .pageTitleContent, .wf-loading .navContent, .wf-loading .blockContent, .wf-loading .footerContent { visibility: visible !important; } /* Newsletter (Lumistry capture) — single centered column after removing the duplicate plain heading; overrides the template two-column image/text layout. */ .newsletterCapture { display: block !important; text-align: center; } .newsletterCapture .blockImg, .newsletterCapture .blockForm { width: 100% !important; max-width: 640px; margin-left: auto !important; margin-right: auto !important; float: none !important; } .newsletterCapture [data-lumistry-capture] { margin-left: auto; margin-right: auto; } /* The platform script hoists the (now empty) footer quick-links block into a bar above the header at runtime; hide it so the eyebrow sits flush at the top of the page exactly like the reference site. */ .secondaryNav, .blockWrap_df681ace7cbe460cb9fad1cdafff205a { display: none !important; } /* Desktop: the eyebrow now lives outside the header, so let the logo/nav stick to the top on scroll (position:sticky flows below the eyebrow first, then pins at the top) instead of the base template's position:fixed, which would overlap the eyebrow and tuck the hero wording under the header. */ @media (min-width: 768px) { .headerAndNavContainer.fixedNav { position: sticky !important; top: 0 !important; } } @media (max-width: 767px) { .headerAndNavContainer { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 1000 !important; } /* eyebrow collapses on scroll to reclaim space */ .headerContactLine { overflow: hidden; max-height: 300px; transition: max-height 0.25s ease, opacity 0.2s ease; } .headerContactLine.eyebrow-collapsed { max-height: 0 !important; opacity: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-bottom: 0 !important; } } /* Mobile ("app") page RX Local promo: force the reference two-column layout (screenshot left ~50%, headline + copy right, vertically centered) since the base template's layoutC flex classes don't reliably apply for this injected block. Stacks to one column on small screens. The store badges below sit in a two-column grid, one under each side, matching the reference. */ .blockContent.mobileInfo.layoutC--vAlign1 { display: flex !important; flex-wrap: nowrap !important; align-items: center; justify-content: center; gap: 4%; } .blockContent.mobileInfo.layoutC--vAlign1 .blockImg { flex: 0 0 48% !important; width: 48% !important; max-width: 48% !important; float: none !important; margin: 0 !important; } .blockContent.mobileInfo.layoutC--vAlign1 .blockText { flex: 0 1 48% !important; width: 48% !important; margin: 0 !important; clear: none !important; text-align: center; } .blockContent.mobileInfo .blockImg .contentImg { max-width: 100%; height: auto; max-height: 400px; } /* Store badges as plain links (no gallery lightbox): two columns, centered, one under each side of the promo above, matching the reference /app page. */ .appStoreBadges { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2% 4%; } .appStoreBadges .appStoreBadge { flex: 0 0 auto; text-align: center; } .appStoreBadges .appStoreBadge a { display: inline-block; } .appStoreBadges .appStoreBadge img { width: auto; height: 44px; max-width: 100%; } @media (max-width: 767px) { .blockContent.mobileInfo.layoutC--vAlign1 { display: block !important; } .blockContent.mobileInfo.layoutC--vAlign1 .blockImg, .blockContent.mobileInfo.layoutC--vAlign1 .blockText { flex: none !important; width: 100% !important; max-width: 100% !important; } }