/* ========================================================================== #Helpers ========================================================================== */ #pjWrapper .pjYpTestImage { width: 100%; height: 100%; } /* ========================================================================== #Transitions ========================================================================== */ #pjWrapper .btn, #pjWrapper .pjYpNav a, #pjWrapper .pjYpNav a:after, #pjWrapper .form-control, #pjWrapper .pjYpNavLang a, #pjWrapper .pjYpNavLang .pjYpBtnNavLangTrigger .caret, #pjWrapper .pjYpOrderBy a, #pjWrapper .pjYpOrderBy a .caret, #pjWrapper .panel, #pjWrapper .panel-heading, #pjWrapper .panel-title, #pjWrapper .pjYpPagination a, #pjWrapper .pjYpPagination span, #pjWrapper .pjYpResultInner .pjYpThumb .thumbnail, #pjWrapper .pjYpResultInner .pjYpThumb .thumbnail img, #pjWrapper .pjYpSocials a, #pjWrapper .pjYpListLinks a, #pjWrapper .pjYpMapResult { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } #pjWrapper .pjYpListingDesc p{word-wrap: break-word;} /* ========================================================================== #Forms ========================================================================== */ #pjWrapper select.form-control { cursor: pointer; } #pjWrapper textarea.form-control { height: 100px; } #pjWrapper .form-control::-webkit-input-placeholder { opacity: .5; } #pjWrapper .form-control:-moz-placeholder { opacity: .5; } #pjWrapper .form-control::-moz-placeholder { opacity: .5; } #pjWrapper .form-control:-ms-input-placeholder { opacity: .5; } #pjWrapper .help-block, #pjWrapper .help-block ul, #pjWrapper .help-block li { margin: 0; font-size: 13px; } #pjWrapper .help-block ul li { padding: 5px 0 0; } /* ========================================================================== #Buttons ========================================================================== */ #pjWrapper .btn:hover { text-decoration: none; } #pjWrapper .btn-primary { height: 34px; padding: 0 15px; border: 0; border-bottom: 3px solid #126fb5; font-size: 16px; line-height: 34px; font-weight: bold; text-transform: capitalize; } #pjWrapper .btn-primary span { font-size: 12px; } #pjWrapper .btn-default { height: 34px; padding: 0 15px; border: 1px solid #b3bcc0; font-size: 16px; line-height: 32px; font-weight: bold; text-transform: capitalize; } #pjWrapper .btn-default.pjYpBtnBack { padding: 0 15px 0 10px; } #pjWrapper .btn-default span { font-size: 13px; } #pjWrapper .btn-link { padding: 0; font-size: 16px; text-transform: capitalize; } /* ========================================================================== #pjYpContainer ========================================================================== */ #pjWrapper .pjYpContainer { padding: 15px; } /* ========================================================================== #pjYpHeader ========================================================================== */ #pjWrapper .pjYpHeader { border: 0; } /* ========================================================================== #pjYpNav ========================================================================== */ #pjWrapper .pjYpNav a { position: relative; border-left: 1px solid #47494b; font-weight: bold; } #pjWrapper .pjYpNav a:after { position: absolute; bottom: 0; left: 0; display: none; width: 100%; height: 4px; content: ''; } #pjWrapper .pjYpNav .active a:after { display: inline-block; bottom: -4px; } #pjWrapper .pjYpNav li:first-of-type a { border: 0; } /* ========================================================================== #pjYpSearch ========================================================================== */ #pjWrapper .pjYpSearch { margin: 0; padding: 8px 15px; border-left: 1px solid #47494b; } #pjWrapper .pjYpSearch .form-group { position: relative; padding-right: 20px; } #pjWrapper .pjYpSearch .pjYpBtnSearch { position: absolute; top: 0; right: 0; overflow: hidden; width: 34px; height: 34px; padding: 0; border: 0; font-size: 18px; border-radius: 0 4px 4px 0; } #pjWrapper .pjYpSearch .pjYpBtnSearch span { margin-top: 4px; } /* ========================================================================== #pjYpNavLang ========================================================================== */ #pjWrapper .pjYpNavLang { margin: 0; } #pjWrapper .pjYpNavLang .pjYpBtnNavLangTrigger { font-weight: bold; } #pjWrapper .pjYpNavLang .dropdown.open .pjYpBtnNavLangTrigger .caret { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } #pjWrapper .pjYpNavLang .pjYpNavLangDropdown { border: 0; } #pjWrapper .pjYpNavLang .pjYpNavLangDropdown a { font-weight: bold; } #pjWrapper .pjYpNavLang .pjYpNavLangDropdown li { border-bottom: 1px solid #353738; } #pjWrapper .pjYpNavLang .pjYpNavLangDropdown li:last-of-type { border: 0; } /* ========================================================================== #pjYpResultsActions ========================================================================== */ #pjWrapper .pjYpResultsActions { margin-bottom: 20px; } /* ========================================================================== #pjYpOrderBy ========================================================================== */ #pjWrapper .pjYpOrderBy { padding-top: 5px; } #pjWrapper .pjYpOrderBy p, #pjWrapper .pjYpOrderBy ul { display: inline-block; margin: 0; vertical-align: middle; } #pjWrapper .pjYpOrderBy p { font-size: 16px; font-weight: bold; } #pjWrapper .pjYpOrderBy ul { padding-left: 10px; } #pjWrapper .pjYpOrderBy li { padding: 0; } #pjWrapper .pjYpOrderBy a { display: inline-block; line-height: 1.6; padding: 0 8px; border-radius: 4px; } #pjWrapper .pjYpOrderBy a:hover, #pjWrapper .pjYpOrderBy .active a { text-decoration: none; } #pjWrapper .pjYpOrderBy a .caret { margin-top: -1px; } #pjWrapper .pjYpOrderBy a.pjYpOrderAsc .caret { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } #pjWrapper .pjYpOrderBy a.pjYpOrderDesc .caret { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } /* ========================================================================== #pjYpResults ========================================================================== */ #pjWrapper .pjYpNoResultsText { margin: 0; padding: 15px 0; font-size: 16px; text-align: center; } #pjWrapper .pjYpResults { font-size: 0; } #pjWrapper .pjYpResult { display: inline-block; float: none; padding-bottom: 20px; vertical-align: top; } #pjWrapper .pjYpResult > a { display: block; text-decoration: none; } #pjWrapper .panel { margin: 0; } #pjWrapper .panel-title { font-size: 17px; font-weight: bold; } #pjWrapper .pjYpResult .pjYpResultImage { padding-top: 5px; } #pjWrapper .pjYpResult .pjYpResultImage img { max-width: 100%; } #pjWrapper .panel-body { border-radius: 0 0 4px 4px; } #pjWrapper .panel-body p { font-size: 14px; line-height: 1.43; } #pjWrapper .panel-body p.wrap{ white-space: pre-wrap; /* CSS3 */ white-space: -moz-pre-wrap; /* Firefox */ white-space: -pre-wrap; /* Opera <7 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* IE */ } /* ========================================================================== #pjYpPagination ========================================================================== */ #pjWrapper .pjYpPagination { padding: 15px 0; font-size: 0; } #pjWrapper .pjYpPagination .pagination { margin: 0; } #pjWrapper .pjYpPagination li, #pjWrapper .pjYpPagination a, #pjWrapper .pjYpPagination span { display: inline-block; margin: 0; padding: 0; vertical-align: middle; border-radius: 0; } #pjWrapper .pjYpPagination li { padding-right: 5px; } #pjWrapper .pjYpPagination a, #pjWrapper .pjYpPagination span { height: 34px; width: 34px; font-size: 16px; line-height: 32px; text-align: center; border-radius: 4px; } #pjWrapper .pjYpPagination span { cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } #pjWrapper .pjYpPagination .active a, #pjWrapper .pjYpPagination .active span { border: 1px solid #126fb5; } /* ========================================================================== #pjYpResultInner ========================================================================== */ #pjWrapper .pjYpResultInner .panel-title { font-size: 30px; font-weight: bold; } #pjWrapper .pjYpResultInner .pjYpResultMainImage { padding-bottom: 10px; } #pjWrapper .pjYpResultInner .pjYpResultMainImage img { width: 40%; } #pjWrapper .pjYpResultInner .pjYpThumbs { padding: 0 10px; font-size: 0; } #pjWrapper .pjYpResultInner .pjYpThumb { padding: 5px; } #pjWrapper .pjYpResultInner .pjYpThumb .thumbnail { display: inline-block; width: 100%; margin: 0; } #pjWrapper .pjYpResultInner .pjYpThumbInner { overflow: hidden; } #pjWrapper .pjYpResultInner .pjYpThumb .thumbnail img { width: 100%; height: auto; } #pjWrapper .pjYpResultInner .pjYpThumb .thumbnail:hover img { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } #pjWrapper .pjYpResultInner .pjYpContacts { margin: 0; } #pjWrapper .pjYpResultInner .pjYpContact p, #pjWrapper .pjYpResultInner .pjYpContact a { font-size: 15px; line-height: 1.2; } #pjWrapper .pjYpResultInner .pjYpContact p { margin: 0; } #pjWrapper .pjYpResultInner .pjYpContact a:hover { text-decoration: none; } #pjWrapper .pjYpResultInner .pjYpContact span { min-width: 20px; font-size: 13px; } #pjWrapper .pjYpSocials { margin: 0; font-size: 0; } #pjWrapper .pjYpSocials li { padding: 0 5px 0 0; } #pjWrapper .pjYpSocials a { overflow: hidden; display: inline-block; width: 32px; height: 32px; background: url(../img/sprite.png) no-repeat 0 0; white-space: nowrap; text-indent: 100%; } #pjWrapper .pjYpSocials a:hover { opacity: .7; } #pjWrapper .pjYpSocials .pjYpLinkFacebook { background-position: -4px -4px; } #pjWrapper .pjYpSocials .pjYpLinkTwitter { background-position: -56px -4px; } #pjWrapper .pjYpSocials .pjYpLinkGooglePlus { background-position: -108px -4px; } #pjWrapper .pjYpSocials .pjYpLinkLinkedIn { background-position: -160px -4px; } #pjWrapper .pjYpSocials .pjYpLinkContact { background-position: -212px -4px; } #pjWrapper .pjYpSocials .pjYpLinkDirection { background-position: -260px -4px; } #pjWrapper .pjYpResultInner .pjYpContact .pjYpMap { width: 100%; height: 205px; } #pjWrapper .pjYpResultInner .pjYpContact .pjYpFormDirection { padding-top: 10px; } #pjWrapper .pjYpMapDirection { height: 370px; padding-top: 10px; } #pjWrapper .pjYpDirectionResultsTitle { margin: 0; padding-top: 10px; font-size: 16px; line-height: 1.4; text-transform: capitalize; font-weight: bold; } #pjWrapper .pjYpResultInner .panel-footer p { margin: 0; padding-bottom: 10px; line-height: 1.4; } #pjWrapper .pjYpResultInner .panel-footer p:last-of-type { padding-bottom: 0; } #pjWrapper .pjYpResultInner .panel-footer p strong { font-size: 16px; font-weight: bold; } #pjWrapper .pjYpFormContact { overflow: hidden; border: 1px solid #b3bcc0; border-radius: 4px; } #pjWrapper .pjYpFormContact .pjYpFormHead { padding: 10px 15px; } #pjWrapper .pjYpFormContact .pjYpFormHead .pjYpFormTitle { font-size: 18px; line-height: 1.4; font-weight: bold; } #pjWrapper .pjYpFormContact .pjYpFormHead .close { font-size: 27px; } #pjWrapper .pjYpFormContact .pjYpFormBody label { font-size: 14px; } /* ========================================================================== #pjYpListLinks ========================================================================== */ #pjWrapper .pjYpListLinks { margin: 0; } #pjWrapper .pjYpListLinks3Cols { -webkit-columns: 3; -moz-columns: 3; columns: 3; } #pjWrapper .pjYpListLinks li { padding: 10px 0; } #pjWrapper .pjYpListLinks a { font-size: 15px; line-height: 1.4; } #pjWrapper .pjYpListLinks a:hover { text-decoration: none; } /* ========================================================================== #pjYpResultsMaped ========================================================================== */ #pjWrapper .pjYpResultsMaped .pjYpFilters { padding-bottom: 15px; } #pjWrapper .pjYpResultsMaped .pre-scrollable { min-height: 500px; max-height: 500px; overflow-y: auto; } #pjWrapper .pjYpMapResults { margin: 0; } #pjWrapper .pjYpMapResult { margin: 0; cursor: pointer;} #pjWrapper .pjYpMapResult, #pjWrapper .pjYpMapResults .pjYpNoResultsText { border-right: 0; border-top: 0; border-left: 0; } #pjWrapper .pjYpMapResults .pjYpNoResultsText { border-radius: 4px 0 0 4px; } #pjWrapper .pjYpMapResult:first-of-type { border-radius: 0; } #pjWrapper .pjYpMapResult:last-of-type { border-radius: 0; } #pjWrapper .pjYpMapResultTitle { margin: 0; font-size: 17px; line-height: 1.4; font-weight: bold; } #pjWrapper .pjYpMapResultAddress { margin: 0; padding: 0 0 10px; font-size: 0; } #pjWrapper .pjYpMapResultAddress dt, #pjWrapper .pjYpMapResultAddress dd { display: inline; width: auto; margin: 0; font-size: 16px; line-height: 1.4; font-weight: normal; vertical-align: middle; } #pjWrapper .pjYpResultsMap { height: 500px; } #pjWrapper .pjYpResultsMaped .pjYpSearch { border: 0; padding: 0; } .modal-dialog{z-index: 999999;} .modal-backdrop.fade { opacity: 0 !important; filter: alpha(opacity=0) !important; } .modal-backdrop.fade.in { opacity: 0.5 !important; filter: alpha(opacity=50) !important; } /* ========================================================================== #pjYpAccess ========================================================================== */ #pjWrapper .pjYpAccess .pjYpAccessTitle { font-size: 17px; font-weight: bold; } #pjWrapper .pjYpAccess .pjYpFormActions .btn-link { margin-left: 10px; } #pjWrapper .pjYpCaptcha label { display: block; } #pjWrapper .pjYpCaptcha .form-control, #pjWrapper .pjYpCaptcha img { display: inline-block; vertical-align: middle; } #pjWrapper .pjYpCaptcha .form-control { width: auto; max-width: 170px; } /* ========================================================================== #Map window ========================================================================== */ .yp-map-info-window{ width: 300px; overflow: hidden; } .yp-map-info-window label.title{ display: block; margin-bottom: 5px; } .yp-map-info-window label.title a{ font-weight: bold; font-size: 16px; } .yp-map-info-window span{ display: block; margin-bottom: 3px; font-size: 13px; } .yp-map-info-window span label{ color: #59443c; } .yp-map-info-window span label a{ color: #1d8bdf; } /* ========================================================================== #Responsive ========================================================================== */ @media only screen and (max-width: 840px) { /* ========================================================================== #pjYpListLinks ========================================================================== */ #pjWrapper .pjYpListLinks3Cols { -webkit-columns: 2; -moz-columns: 2; columns: 2; } } @media only screen and (max-width: 767px) { /* ========================================================================== #pjYpNav ========================================================================== */ #pjWrapper .pjYpNav a { padding: 0 15px; border: 0; line-height: 1.8; } #pjWrapper .pjYpNav .active a:after { display: none; } /* ========================================================================== #pjYpSearch ========================================================================== */ #pjWrapper .pjYpSearch { padding: 0 0 10px; border: 0; } /* ========================================================================== #pjYpNavLang ========================================================================== */ #pjWrapper .pjYpNavLang { margin: 0 -15px; padding-bottom: 10px; } #pjWrapper .pjYpNavLang .pjYpNavLangDropdown { border-radius: 0; } #pjWrapper .pjYpNavLang a { padding: 0 15px; line-height: 1.8; } /* ========================================================================== #pjYpResultsActions ========================================================================== */ #pjWrapper .pjYpOrderBy { padding-bottom: 10px; } /* ========================================================================== #pjYpResultInner ========================================================================== */ #pjWrapper .pjYpResultInner .pjYpResultMainImage { text-align: center; } #pjWrapper .pjYpResultInner .pjYpResultMainImage img { width: auto; max-width: 100%; } #pjWrapper .pjYpResultInner .pjYpThumbs { padding-bottom: 10px; } #pjWrapper .pjYpResultInner .panel-title { font-size: 24px; } #pjWrapper .pjYpDirectionResultsTitle { padding: 10px 0 5px; } /* ========================================================================== #pjYpResultsMaped ========================================================================== */ #pjWrapper .pjYpResultsMap { height: 270px; padding-bottom: 15px; } #pjWrapper .pjYpResultsMaped .pre-scrollable { min-height: 1px; max-height: 99999px; } #pjWrapper .pjYpMapResult, #pjWrapper .pjYpMapResults .pjYpNoResultsText { border-right-width: 1px; border-style: solid; } #pjWrapper .pjYpMapResults .pjYpNoResultsText { border-radius: 4px; } #pjWrapper .pjYpMapResult:first-of-type { border-radius: 4px 4px 0 0; } #pjWrapper .pjYpMapResult:last-of-type { border-radius: 0 0 4px 4px; } #pjWrapper .pjYpMapResultAddress dt, #pjWrapper .pjYpMapResultAddress dd { display: block; width: 100%; } } @media only screen and (max-width: 480px) { /* ========================================================================== #pjYpResults ========================================================================== */ #pjWrapper .pjYpResult .pjYpResultImage { padding-right: 0; } /* ========================================================================== #pjYpPagination ========================================================================== */ #pjWrapper .pjYpPagination li { padding-right: 2px; } /* ========================================================================== #pjYpResultsActions ========================================================================== */ #pjWrapper .pjYpOrderBy p { font-size: 14px; font-weight: normal; } #pjWrapper .pjYpOrderBy ul { padding-left: 0; } /* ========================================================================== #pjYpListLinks ========================================================================== */ #pjWrapper .pjYpListLinks { text-align: center; } #pjWrapper .pjYpListLinks3Cols { -webkit-columns: 1; -moz-columns: 1; columns: 1; } #pjWrapper .pjYpListLinks li { padding: 2px 0; } /* ========================================================================== #pjYpResultInner ========================================================================== */ #pjWrapper .pjYpResultInner .panel-title { font-size: 18px; } #pjWrapper .pjYpResultInner .pjYpContact span { min-width: 1px; } }/* ========================================================================== #Downriver UI restyle (structure only — colors live in theme*.css) Appended to style.css. Rules are scoped to #pjWrapper to match the existing specificity and are placed last so they win on the shared selectors they override. ========================================================================== */ /* ---- Container / card-panel chrome ---------------------------------- */ #pjWrapper .pjYpContainer { padding: 24px; border-radius: 14px; } #pjWrapper .pjYpBody { padding-top: 4px; } /* ---- Header / nav bar ------------------------------------------------ */ #pjWrapper .pjYpHeader { min-height: 0; margin-bottom: 0; border: 0; border-radius: 0; background: transparent !important; } #pjWrapper .pjYpHeader .navbar-collapse { padding: 0; } #pjWrapper .pjYpNav { display: inline-block; margin: 0; } /* Desktop: lay the nav row out with flex so the search sits on the far right. Scoped to >=768px so Bootstrap's mobile collapse still works. The !important overrides Bootstrap's own `.navbar-collapse{display:block!important}` and `.navbar-left{float:left!important}`. */ @media (min-width: 768px) { #pjWrapper .pjYpHeader .navbar-collapse { display: flex !important; align-items: center; flex-wrap: wrap; } #pjWrapper .pjYpNav { float: none !important; } #pjWrapper .pjYpSearch { float: none !important; margin-left: auto !important; } } #pjWrapper .pjYpNav > li > a { position: relative; padding: 14px 22px 18px; border: 0 !important; font-size: 15px; font-weight: 600; background: transparent !important; } #pjWrapper .pjYpNav > li > a:after { position: absolute; left: 12px; right: 12px; bottom: 0; width: auto; height: 3px; content: ''; display: none; border-radius: 3px 3px 0 0; } #pjWrapper .pjYpNav > li.active > a:after, #pjWrapper .pjYpNav > li > a:hover:after { display: block; } /* Search box pushed to the far right of the nav row (see the >=768px block above) */ #pjWrapper .pjYpSearch { margin: 8px 0; padding: 0; border: 0; } #pjWrapper .pjYpSearch .form-group { padding-right: 0; } #pjWrapper .pjYpSearch .form-control { width: 260px; height: 40px; padding: 0 40px 0 38px; border-radius: 22px; font-size: 14px; } #pjWrapper .pjYpSearch .pjYpBtnSearch { left: 0; right: auto; width: 38px; height: 40px; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 22px 0 0 22px; } #pjWrapper .pjYpSearch .pjYpBtnSearch span { margin-top: 0; font-size: 15px; opacity: .55; } /* thin rule under the header, like the mockup */ #pjWrapper .pjYpHeader:after { content: ''; display: block; clear: both; border-bottom: 1px solid #e9ecef; margin: 0 0 22px; } /* ---- Filter / sort row ---------------------------------------------- */ #pjWrapper .pjYpResultsActions { margin: 0 0 24px; display: flex; align-items: center; flex-wrap: wrap; } #pjWrapper .pjYpResultsActions:before, #pjWrapper .pjYpResultsActions:after, #pjWrapper .pjYpResults:before, #pjWrapper .pjYpResults:after { display: none; } #pjWrapper .pjYpOrderBy { width: auto; flex: 1 1 auto; float: none; padding: 0; } #pjWrapper .pjYpOrderBy p { font-size: 14px; font-weight: 600; } #pjWrapper .pjYpOrderBy ul { padding-left: 8px; } #pjWrapper .pjYpOrderBy li { margin: 0 4px; } #pjWrapper .pjYpOrderBy a { padding: 5px 12px; border-radius: 16px; font-size: 13px; font-weight: 600; } #pjWrapper .pjYpFilters { width: auto; flex: 0 0 auto; float: none; padding: 0; } #pjWrapper .pjYpFilters .form-control { width: 210px; height: 40px; border-radius: 8px; font-size: 14px; font-weight: 600; } /* ---- Results grid --------------------------------------------------- */ #pjWrapper .pjYpResults { display: flex; flex-wrap: wrap; } #pjWrapper .pjYpResult { float: none; margin-bottom: 26px; display: flex; } #pjWrapper .pjYpResult > a { display: flex; width: 100%; text-decoration: none; } /* Card */ #pjWrapper .pjYpResult .panel { display: flex; flex-direction: column; width: 100%; margin: 0; border-radius: 12px; border: 1px solid #e6e8eb; overflow: hidden; box-shadow: 0 1px 3px rgba(16,24,40,.06); height: 100%; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } #pjWrapper .pjYpResult > a:hover .panel { box-shadow: 0 8px 24px rgba(16,24,40,.12); transform: translateY(-2px); } /* Card header: title + category badge */ #pjWrapper .pjYpResult .panel-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 10px; padding: 16px 18px; border: 0; border-bottom: 1px solid #eef0f2; border-radius: 0; } #pjWrapper .pjYpResult .panel-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: .1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #pjWrapper .pjYpBadge { flex: 0 0 auto; max-width: 46%; margin-left: auto; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; line-height: 1.6; cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Card body */ #pjWrapper .pjYpResult .panel-body { padding: 18px; flex: 1 1 auto; display: flex; flex-direction: column; } #pjWrapper .pjYpResultInfo { display: flex; align-items: flex-start; gap: 14px; } #pjWrapper .pjYpResultImage { flex: 0 0 78px; width: 78px; } #pjWrapper .pjYpResultImage img { width: 78px; height: 78px; object-fit: cover; border-radius: 8px; display: block; } #pjWrapper .pjYpResultContent { flex: 1 1 auto; min-width: 0; } #pjWrapper .pjYpResultContent .wrap { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Star rating */ #pjWrapper .pjYpStars { position: relative; display: inline-block; font-size: 15px; line-height: 1; font-family: Arial, sans-serif; letter-spacing: 2px; } #pjWrapper .pjYpStars:before { content: '\2605\2605\2605\2605\2605'; color: #dcdfe4; } #pjWrapper .pjYpStarsInner { position: absolute; top: 0; left: 0; white-space: nowrap; overflow: hidden; } #pjWrapper .pjYpStars .pjYpStarsInner:before { content: '\2605\2605\2605\2605\2605'; color: #f5a623; } /* View Profile button */ #pjWrapper .pjYpResultActions { margin-top: auto; padding-top: 18px; } #pjWrapper .pjYpResult .btn-primary { display: block; width: 100%; height: 44px; line-height: 44px; padding: 0; border: 0; border-radius: 8px; font-size: 15px; font-weight: 600; text-align: center; } /* ---- Interactive star widget (View page) ---------------------------- */ #pjWrapper .pjYpRateBox { margin: 4px 0 0; } #pjWrapper .pjYpRateStars { display: inline-block; font-size: 26px; line-height: 1; letter-spacing: 3px; cursor: pointer; } #pjWrapper .pjYpRateStars span { color: #dcdfe4; transition: color .1s ease; } #pjWrapper .pjYpRateStars span.on, #pjWrapper .pjYpRateStars span.hover { color: #f5a623; } #pjWrapper .pjYpRateMeta { margin-left: 10px; font-size: 13px; color: #707577; vertical-align: middle; } /* ---- Responsive ----------------------------------------------------- */ @media only screen and (max-width: 991px) { #pjWrapper .pjYpSearch .form-control { width: 200px; } } @media only screen and (max-width: 767px) { #pjWrapper .pjYpContainer { padding: 16px; } #pjWrapper .pjYpNav { float: none; display: block; } #pjWrapper .pjYpSearch { float: none; margin: 10px 0 0; } #pjWrapper .pjYpSearch .form-control { width: 100%; } #pjWrapper .pjYpResultsActions { display: block; } #pjWrapper .pjYpFilters { margin-top: 12px; } #pjWrapper .pjYpFilters .form-control { width: 100%; } } /* ========================================================================== #Featured business widget (embeddable) ========================================================================== */ #pjWrapper .pjYpFeaturedWrap { padding: 18px; } #pjWrapper .pjYpFeaturedCol { margin-bottom: 26px; display: flex; } #pjWrapper .pjYpFeaturedCard { display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0; border: 1px solid #e6e8eb; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(16,24,40,.06); transition: box-shadow .15s ease, transform .15s ease; } #pjWrapper .pjYpFeaturedCol:hover .pjYpFeaturedCard { box-shadow: 0 8px 24px rgba(16,24,40,.12); transform: translateY(-2px); } /* Photo collage header */ #pjWrapper .pjYpFeaturedMedia { display: flex; gap: 6px; height: 200px; background: #f2f4f7; } #pjWrapper .pjYpFeaturedMedia .big, #pjWrapper .pjYpFeaturedMedia .sm { display: block; background-size: cover; background-position: center; background-repeat: no-repeat; } #pjWrapper .pjYpFeaturedMedia .big { flex: 2; } #pjWrapper .pjYpFeaturedMedia.single .big { flex: 1; } #pjWrapper .pjYpFeaturedMedia .col { flex: 1; display: flex; flex-direction: column; gap: 6px; } #pjWrapper .pjYpFeaturedMedia .col .sm { flex: 1; } /* Body */ #pjWrapper .pjYpFeaturedCard .panel-body { padding: 18px; flex: 1 1 auto; display: flex; flex-direction: column; } #pjWrapper .pjYpFeaturedHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } #pjWrapper .pjYpFeaturedTitle { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 19px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #pjWrapper .pjYpFeaturedHead .pjYpBadge { flex: 0 0 auto; max-width: 46%; } #pjWrapper .pjYpFeaturedStars { display: block; margin-bottom: 10px; font-size: 16px; } #pjWrapper .pjYpFeaturedDesc { margin: 0 0 18px; font-size: 14px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Outlined View Profile button */ #pjWrapper .pjYpFeaturedBtn { display: block; width: 100%; margin-top: auto; height: 46px; line-height: 42px; padding: 0; text-align: center; border-radius: 8px; font-size: 15px; font-weight: 600; border: 2px solid; background: transparent; text-decoration: none; transition: background .15s ease, color .15s ease; }