/* ─────────────────────────────────────────────────────────────────── * Business Partner Finder widget — ported 1:1 from the source template * at src/Uop.CMS.Widgets/BusinessPartnerFinder/businesspartnerfinder.css * (+ index.html). Scoped under `.business-partner-finder-widget` so rules * cannot leak outside the widget. Asset paths reference * /img/widgets/business-partner-finder/ * * ── Hardening policy (why the !important + high-specificity selectors) ── * The standalone template runs in a naked with only 4 CSS files. * Inside the MVC shell the widget is wrapped by _Layout.cshtml with: * - * - Bootstrap `.layout-content.container` wrapper (non-AEM mode) * - site.css / coreclient.css / style-static.css / AEM clientlibs already loaded * * That injects typography (font-family: "Unbeatable" on body+button+input), * background, link color, heading resets + body font-size=14/16px, Bootstrap * container max-width (1140–1320px) + gutter padding. To render the widget * identically to the template, each rule below either beats an inherited * host-page style or escapes a parent width constraint — every selector * stays scoped under `.business-partner-finder-widget`, so no other widget * or the outer layout is affected. * ─────────────────────────────────────────────────────────────────── */ .business-partner-finder-widget { --primary_orange: #FF7B00; --i_location_map: url("/img/widgets/business-partner-finder/i_location_map.svg"); /* Parent may be Bootstrap .layout-content.container with max-width 1140–1320px + gutter padding 12px. Widget centers inside via its own max-width. */ max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; font-size: 16px !important; line-height: 1.5 !important; color: #1a1a1a !important; /* NOTE: font-family intentionally NOT set. Template inherits 'Unbeatable' from rule in coreclient.css:5273 — MVC's coreclient.css has the same rule, so descendants (h2/h3/span/button/input) inherit the same font by default. Any earlier hardcoded Arial override here caused the widget to render in Arial while the template renders in Unbeatable. */ } /* Box-sizing + inherit for form controls. Font-family is intentionally NOT reset here — let widget descendants inherit the html/body font chain so headings and text match the standalone template exactly. */ .business-partner-finder-widget h1, .business-partner-finder-widget h2, .business-partner-finder-widget h3, .business-partner-finder-widget h4, .business-partner-finder-widget h5, .business-partner-finder-widget h6, .business-partner-finder-widget p, .business-partner-finder-widget span, .business-partner-finder-widget div, .business-partner-finder-widget a, .business-partner-finder-widget button, .business-partner-finder-widget input, .business-partner-finder-widget select, .business-partner-finder-widget textarea, .business-partner-finder-widget label { box-sizing: border-box !important; } /* Form controls: coreclient + site.css apply `font-family: Unbeatable` + custom padding/line-height directly (specificity 0,0,1). We inherit them back from the widget root so buttons/inputs use the same typography chain as text. */ .business-partner-finder-widget button, .business-partner-finder-widget input, .business-partner-finder-widget select, .business-partner-finder-widget textarea { font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important; } .business-partner-finder-widget .i_location_map { background-image: var(--i_location_map); background-repeat: no-repeat; background-size: contain; background-position: left; width: 23px !important; height: 23px !important; display: inline-block !important; margin-left: -4px; flex-shrink: 0; } /* ── Title ───────────────────────────────────────────────────────── */ .business-partner-finder-widget .partner-title { text-align: center !important; font-size: 28px !important; font-weight: 600 !important; line-height: 1.25 !important; margin: 30px 0 !important; color: #2B2B2B !important; } /* ── Search box ──────────────────────────────────────────────────── */ .business-partner-finder-widget .partner-search-box { background: #fff !important; padding: 20px !important; border-radius: 16px !important; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05) !important; display: flex !important; align-items: center !important; gap: 20px !important; margin: 0 auto 40px !important; max-width: 700px !important; } .business-partner-finder-widget .search-input { flex: 1 !important; display: flex !important; align-items: center !important; gap: 12px !important; background: #f5f5f5 !important; padding: 14px 18px !important; border-radius: 12px !important; } .business-partner-finder-widget .search-input i, .business-partner-finder-widget .search-input svg.search-icon { color: #999 !important; font-size: 18px !important; } .business-partner-finder-widget .search-input svg.search-icon{ width: 20px; height:20px; } .business-partner-finder-widget .search-input input { border: none !important; background: transparent !important; width: 100% !important; font-size: 16px !important; font-weight: 400 !important; outline: none !important; color: #191919 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } .business-partner-finder-widget .search-input input::placeholder { color: #999 !important; opacity: 1 !important; } .business-partner-finder-widget .use-location { display: flex !important; align-items: center !important; gap: 8px !important; border: none !important; background: transparent !important; color: #FF7300 !important; font-weight: 600 !important; font-size: 14px !important; line-height: 1.5 !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; white-space: nowrap !important; box-shadow: none !important; } .business-partner-finder-widget .use-location i { font-size: 20px !important; color: var(--primary_orange) !important; } .business-partner-finder-widget .use-location:disabled { opacity: 0.6 !important; cursor: not-allowed !important; } /* ── Partner grid / card ─────────────────────────────────────────── */ .business-partner-finder-widget .partner-grid { display: grid !important; gap: 14px !important; margin: 0 !important; padding: 0 !important; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; } .business-partner-finder-widget .partner-card { background: #fff !important; border-radius: 12px !important; padding: 20px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; transition: 0.3s !important; min-width: 294px !important; min-height: 296px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; border: none !important; list-style: none !important; } .business-partner-finder-widget .partner-card:hover { transform: translateY(-4px) !important; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1) !important; } .business-partner-finder-widget .partner-card h3 { font-size: 20px !important; font-weight: bold !important; line-height: 1.25 !important; margin: 0 0 15px !important; color: #000000 !important; } .business-partner-finder-widget .partner-info { display: flex !important; gap: 10px !important; align-items: flex-start !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.5 !important; margin: 0 0 12px !important; color: #191919 !important; } .business-partner-finder-widget .partner-info i { width: 23px !important; font-size: 16px !important; margin-top: 4px !important; color: #1E1E1E !important; flex-shrink: 0 !important; } .business-partner-finder-widget .partner-info span { flex: 1 !important; line-height: 1.5 !important; font-size: 16px !important; font-weight: 500 !important; color: #191919 !important; } .business-partner-finder-widget .partner-info.email, .business-partner-finder-widget .partner-info.email span, .business-partner-finder-widget .partner-info.email a { color: var(--primary_orange) !important; font-weight: 600 !important; } .business-partner-finder-widget .partner-info.email a { text-decoration: none !important; cursor: pointer !important; word-break: break-all !important; color: #FF7B00 !important; } .business-partner-finder-widget .partner-info.email a:hover { text-decoration: underline !important; color: var(--primary_orange) !important; } .business-partner-finder-widget .store-link { font-size: 16px !important; display: inline-block !important; margin-top: 10px !important; color: var(--primary_orange) !important; text-decoration: none !important; font-weight: 600 !important; background: transparent !important; } .business-partner-finder-widget .store-link:hover { text-decoration: none !important; color: var(--primary_orange) !important; } .business-partner-finder-widget .store-link i { padding-left: 8px !important; font-size: 13px !important; color: var(--primary_orange) !important; } /* ── Lazy-load sentinel + spinner ───────────────────────────────────── Replaces the old `.pagination` UI (mirrors StoreFinder's `.sf-sentinel`). Hidden by default; business-partner-finder.js toggles `display:flex` when there are more matches to reveal. */ .business-partner-finder-widget .bpf-sentinel { display: none; justify-content: center; align-items: center; padding: 28px 0 12px; } .business-partner-finder-widget .bpf-sentinel-spinner { width: 32px; height: 32px; border: 3px solid #f0f0f0; border-top-color: var(--primary_orange); border-radius: 50%; animation: bpf-sentinel-spin 0.8s linear infinite; } @keyframes bpf-sentinel-spin { to { transform: rotate(360deg); } } /* Hide utility — beats `display: flex !important` on .partner-card, .partner-info and .detail-item via specificity (0,0,3 > 0,0,2). Used by the JS module to toggle card visibility during lazy-load, hide the today-hours row when absent, and hide the email row in the modal when a partner has no email. */ .business-partner-finder-widget .partner-card.bpf-hidden, .business-partner-finder-widget .partner-info.bpf-hidden, .business-partner-finder-widget .detail-item.bpf-hidden { display: none !important; } /* ── Modal ───────────────────────────────────────────────────────── */ /* z-index must beat `.main-global-footer-root { z-index: 1000 }` from nd-footer.css; otherwise the overlay + modal content render behind the sticky footer. Kept below `.pac-container` (100000) so the Google Places suggestions list still floats above the modal search field if one is added later. */ .business-partner-finder-widget .store-modal { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: rgba(0, 0, 0, 0.35) !important; display: none; align-items: center !important; justify-content: center !important; z-index: 10000 !important; padding: 20px !important; } .business-partner-finder-widget .store-modal-content { background: #fff !important; width: 720px !important; max-width: 100% !important; border-radius: 22px !important; padding: 30px !important; position: relative !important; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15) !important; animation: bpfModalFade .25s ease; } @keyframes bpfModalFade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .business-partner-finder-widget .modal-close { position: absolute !important; top: 40px !important; right: 28px !important; border: none !important; background: none !important; font-size: 28px !important; line-height: 1 !important; cursor: pointer !important; color: #1C1B1F !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } .business-partner-finder-widget .store-modal-content h2 { font-size: 32px !important; font-weight: 700 !important; line-height: 1.25 !important; margin: 0 0 24px !important; color: #000000 !important; } .business-partner-finder-widget .store-modal-content .store-modal-inner { max-height: 80vh; overflow: auto; } .business-partner-finder-widget .store-detail { margin-bottom: 25px !important; } .business-partner-finder-widget .detail-item { display: flex !important; gap: 14px !important; align-items: flex-start !important; margin: 0 0 14px !important; font-size: 17px !important; color: #191919 !important; line-height: 1.5 !important; } .business-partner-finder-widget .detail-item i { width: 22px !important; color: #191919 !important; margin-top: 4px !important; flex-shrink: 0 !important; } .business-partner-finder-widget .detail-item span { font-size: 17px !important; line-height: 1.5 !important; color: #000000 !important; } .business-partner-finder-widget .detail-item .bpf-store-email { color: var(--primary_orange) !important; font-weight: 600 !important; text-decoration: none !important; cursor: pointer !important; word-break: break-all !important; } .business-partner-finder-widget .detail-item a.bpf-store-email:hover { text-decoration: underline !important; color: var(--primary_orange) !important; } .business-partner-finder-widget .direction-btn { display: inline-block !important; background: var(--primary_orange) !important; color: #fff !important; padding: 12px 24px !important; border-radius: 28px !important; font-weight: 600 !important; font-size: 16px !important; line-height: 1.25 !important; text-decoration: none !important; margin-top: 12px !important; border: none !important; transition: .2s !important; } .business-partner-finder-widget .direction-btn:hover { background: #e95e00 !important; color: #fff !important; text-decoration: none !important; } /* Appointment button — outline pill, mirrors StoreFinder's `btn btn-outline` (White Button). Sits inline with .direction-btn; gap matches StoreFinder's .button-group gap (12px). `hidden` attr (set by JS when makeappointmenturl is empty) must override display:inline-block. */ .business-partner-finder-widget .appointment-btn { display: inline-block !important; background: transparent !important; color: var(--primary_orange) !important; padding: 12px 24px !important; border-radius: 28px !important; font-weight: 600 !important; font-size: 16px !important; line-height: 1.25 !important; text-decoration: none !important; margin-top: 12px !important; margin-left: 12px !important; border: 2px solid var(--primary_orange) !important; transition: .2s !important; box-sizing: border-box !important; } .business-partner-finder-widget .appointment-btn:hover { background: var(--primary_orange) !important; color: #fff !important; text-decoration: none !important; } .business-partner-finder-widget .appointment-btn[hidden] { display: none !important; } @media (max-width: 600px) { .business-partner-finder-widget .direction-btn, .business-partner-finder-widget .appointment-btn { display: block !important; width: 100% !important; margin-left: 0 !important; text-align: center !important; } .business-partner-finder-widget .appointment-btn[hidden] { display: none !important; } } .business-partner-finder-widget .store-modal hr { border: none !important; border-top: 1px solid #e5e5e5 !important; margin: 30px 0 !important; background: transparent !important; opacity: 1 !important; height: 0 !important; } .business-partner-finder-widget .store-modal h3 { font-size: 18px !important; font-weight: 700 !important; line-height: 1.25 !important; margin: 0 0 16px !important; color: #000000 !important; display: flex !important; align-items: center !important; gap: 10px !important; } .business-partner-finder-widget .bpf-store-hours { max-width: 420px !important; } .business-partner-finder-widget .hour-row { display: flex !important; justify-content: space-between !important; padding: 7px 0 !important; font-size: 16px !important; font-weight: 500 !important; color: #000000 !important; line-height: 1.5 !important; } .business-partner-finder-widget .hour-row span { font-size: 16px !important; font-weight: 500 !important; color: #000000 !important; } /* Google Places dropdown is appended to document.body (outside widget root). Float above widget's modal (z-index 999). Not scoped — Places widgets across the site share this expectation. */ .pac-container { z-index: 100000 !important; } /* Note on width under Bootstrap `.layout-content.container` (non-AEM mode): Bootstrap's `.container` caps content at 540/720/960/1140/1320px per breakpoint. At XL (1200–1399px viewport) that means ~1140px — ~60px narrower than the standalone template's 1200px cap. We accept this as within-tolerance visual drift rather than altering `.container` (which would leak to sibling widgets). The widget stays centered via margin:auto and its own max-width:1200px handles ≥XXL viewports. */ /* ── Responsive ──────────────────────────────────────────────────── */ @media (max-width: 900px) { .business-partner-finder-widget .partner-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 768px) { .business-partner-finder-widget .partner-search-box { flex-direction: column !important; align-items: stretch !important; } .business-partner-finder-widget .use-location { justify-content: center !important; } .business-partner-finder-widget .partner-title { padding: 0 60px; } } @media (max-width: 500px) { .business-partner-finder-widget .partner-grid { grid-template-columns: 1fr !important; } .business-partner-finder-widget .partner-title { font-size: 24px !important; padding: 0 12px; } .business-partner-finder-widget .use-location { font-size: 14px !important; } }