/* ========================================================================== O'Reilly campaign experience -------------------------------------------------------------------------- Loaded globally but inert unless has `oreilly-mode` (added client-side by oreilly_head_bootstrap in functions.php — required because WP Engine serves a shared full-page cache). `oreilly-landing` is added only on the /oreilly path. Critical hide rules live inline in ; this file is the fuller styling. See oreilly-experience-plan.md. ========================================================================== */ /* --- Co-brand lockup (header) ------------------------------------------- */ .oreilly-cobrand { align-items: center; gap: 10px; margin-left: 14px; padding-left: 16px; border-left: 1px solid #d0d0d0; vertical-align: middle; } .oreilly-cobrand-plus { font-size: 22px; font-weight: 700; color: #9a9a9a; line-height: 1; } .oreilly-cobrand-name { font-size: 18px; font-weight: 700; letter-spacing: .2px; color: #00853f; /* O'Reilly green; replace with logo asset later */ white-space: nowrap; } /* Keep the trimmed masthead tidy now that the nav is gone. */ html.oreilly-mode #masthead .navbar { justify-content: flex-start; } html.oreilly-mode #masthead { padding: 6px 0; } @media (max-width: 767px) { .oreilly-cobrand { margin-left: 8px; padding-left: 8px; gap: 6px; } .oreilly-cobrand-name { font-size: 14px; } } /* --- Landing hero finder ------------------------------------------------- */ /* Promote the standard BrakeFinder (normally a hidden sticky bar) into a centered hero, and reveal its vehicle-selection drawer. Completing the finder uses the normal redirect flow (specific product page, else /products/). */ /* The stock bar is `height:74px; position:relative` (and goes `position:fixed` when `.sticky`). On the landing page that clips the drawer and pushes the wizard questions outside the box — so give it real room and never stick. */ html.oreilly-landing #brake_finder_bar, html.oreilly-landing #brake_finder_bar.sticky { display: block !important; position: static !important; height: auto !important; overflow: visible !important; z-index: auto !important; border: 0 !important; background: #fff; padding-top: 24px; } /* Hide the collapsed-bar chrome row (title / "Match Your Vehicle" / next steps). */ html.oreilly-landing #brake_finder_bar > .container { display: none !important; } html.oreilly-landing #vehicle-drawer-container { display: block !important; max-width: 960px; margin: 0 auto; padding: 40px 28px 28px; } /* Nothing in the finder should clip on this page — let every drawer breathe. */ html.oreilly-landing #vehicle-drawer-container, html.oreilly-landing #vehicle-drawer-container [id^="drawer-"], html.oreilly-landing .drawer-container { overflow: visible !important; height: auto !important; } html.oreilly-landing .drawer-container { padding: 8px 0 24px; } /* Reveal the vehicle picker by default. No !important so the finder JS can still hide it when advancing to the usage-question drawers. */ html.oreilly-landing #drawer-vehicle-selection { display: block; } html.oreilly-landing #vehicle-drawer-container .home_finder_title { text-align: center; font-size: 30px; margin-bottom: 26px; } /* Center the vehicle dropdowns and the wizard yes/no questions. */ html.oreilly-landing .select-dd-wrap { justify-content: center; } html.oreilly-landing .what-vehicle, html.oreilly-landing .wizard1-buttons, html.oreilly-landing #usage-question-1, html.oreilly-landing #usage-question-2, html.oreilly-landing #bbk-question-1 { text-align: center; } /* No dark dimmer on the landing page — the finder is shown inline, not as an overlay. */ html.oreilly-landing #overlay { display: none !important; } /* --- Listing pages (products archive + product-type) --------------------- */ /* Drop the sidebar and center the (allow-listed) product offerings. */ html.oreilly-mode #products_main .sidebar { display: none !important; } html.oreilly-mode #products_main .content-right, html.oreilly-mode #products_main #category-products { flex: 0 0 100%; max-width: 1040px; margin: 0 auto; } html.oreilly-mode #product_page_results .row { justify-content: center; } /* --- Product detail page ------------------------------------------------- */ /* Remove the Pixlee social/UGC widget at the bottom in oreilly-mode. */ html.oreilly-mode .pixlee-section, html.oreilly-mode #pixleeoaderdiv, html.oreilly-mode #pixlee_container { display: none !important; } .oreilly-landing-main .oreilly-landing-tagline { text-align: center; max-width: 720px; margin: 8px auto 56px; color: #4a4a4a; font-size: 17px; line-height: 1.45; } /* --- White loader overlay ------------------------------------------------ */ #oreilly-loader { position: fixed; inset: 0; background: #ffffff; z-index: 100000; align-items: center; justify-content: center; /* Fallback: fade out after 4s even if JS never removes it. */ animation: oreillyLoaderHide 0s linear 4s forwards; } .oreilly-loader-spinner { width: 46px; height: 46px; border: 4px solid #e6e6e6; border-top-color: #ed1c24; /* PowerStop red */ border-radius: 50%; animation: oreillySpin 0.8s linear infinite; } #oreilly-loader.oreilly-loader-done { opacity: 0; visibility: hidden; transition: opacity .25s ease; } @keyframes oreillySpin { to { transform: rotate(360deg); } } @keyframes oreillyLoaderHide { to { opacity: 0; visibility: hidden; } } /* --- Exit bar (replaces footer in oreilly-mode) -------------------------- */ .oreilly-exit-bar { background: #1a1a1a; text-align: center; padding: 18px 0; } .oreilly-exit-bar a#oreilly-exit-link { color: #ffffff; font-size: 14px; font-weight: 600; letter-spacing: .3px; text-decoration: underline; } .oreilly-exit-bar a#oreilly-exit-link:hover { color: #ed1c24; }