/* * Customer reviews ([bp_reviews], new layout). Everything lives below ".customerReviews". * ":is(#content, body)" gives the selectors the weight of an id, so theme rules like "#content p" do not win. * Colors come from the theme variables (--color-primary, --color-font, --color-white, --color-black-rgb, --color-primary-rgb), with fallbacks; * only the star gold and the green "verified" badge are fixed. */ :is(#content, body) .customerReviews { --crPrimary: var(--color-primary, #0f4594); --crText: var(--color-font, #333333); --crMuted: rgba(var(--color-black-rgb, 0, 0, 0), .5); --crBorder: rgba(var(--color-primary-rgb, 15, 69, 148), .15); --crTint: rgba(var(--color-primary-rgb, 15, 69, 148), .1); --crSoft: rgba(var(--color-primary-rgb, 15, 69, 148), .07); --crArrow: rgba(var(--color-primary-rgb, 15, 69, 148), .3); --crWhite: var(--color-white, #ffffff); --crPill: #f7f7f9; --crStar: #f5a000; --crGap: 16px; position: relative; box-sizing: border-box; max-width: 100%; margin: 40px auto 0; color: var(--crText); } :is(#content, body) .customerReviews *, :is(#content, body) .customerReviews *::before, :is(#content, body) .customerReviews *::after { box-sizing: border-box; } :is(#content, body) .customerReviews [hidden] { display: none !important; } /* ---- summary pill ---- */ :is(#content, body) .customerReviews .summary { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; width: fit-content; max-width: 100%; margin: 0 auto 24px; padding: 10px 24px; border: 1px solid var(--crBorder); border-radius: 999px; background: var(--crPill); color: var(--crMuted); text-decoration: none; } :is(#content, body) .customerReviews .summary .ratingNumber { font-size: 26px; line-height: 1; font-weight: 700; color: var(--crPrimary); } :is(#content, body) .customerReviews .summary .stars { font-size: 18px; letter-spacing: 2px; color: var(--crStar); } :is(#content, body) .customerReviews .summary .summaryText { font-size: 14px; line-height: 1.4; } :is(#content, body) .customerReviews .summary .summaryText .updated { white-space: nowrap; } :is(#content, body) .customerReviews .summary:hover .summaryText { color: var(--crPrimary); } :is(#content, body) .customerReviews.summaryOnly { margin: 0 auto; } :is(#content, body) .customerReviews.summaryOnly .summary { margin-bottom: 0; } /* ---- tabs ---- */ :is(#content, body) .customerReviews .tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 28px; padding: 0; } :is(#content, body) .customerReviews .tabs .tab { appearance: none; margin: 0; padding: 7px 18px; border: 1px solid var(--crBorder); border-radius: 999px; background: var(--crWhite); color: var(--crPrimary); font: inherit; font-size: 14px; line-height: 20px; font-weight: 700; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; } :is(#content, body) .customerReviews .tabs .tab:hover { border-color: var(--crPrimary); } :is(#content, body) .customerReviews .tabs .tab.active { background: var(--crPrimary); border-color: var(--crPrimary); color: var(--crWhite); } /* no outline after a click (the theme draws a dotted one on :focus); keyboard users keep the visible focus ring below */ :is(#content, body) .customerReviews :is(.arrow, .tab, .thumb, .expand, .moreButton, .status button, .summary):is(:focus, :active):not(:focus-visible) { outline: none; box-shadow: none; } :is(#content, body) .customerReviews .tabs .tab:focus-visible, :is(#content, body) .customerReviews .arrow:focus-visible, :is(#content, body) .customerReviews .thumb:focus-visible, :is(#content, body) .customerReviews .expand:focus-visible, :is(#content, body) .customerReviews .moreButton:focus-visible { outline: 2px solid var(--crPrimary); outline-offset: 2px; } /* ---- panels, slider and grid ---- */ :is(#content, body) .customerReviews .panel { position: relative; } :is(#content, body) .customerReviews .track { display: flex; align-items: flex-start; gap: var(--crGap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } :is(#content, body) .customerReviews .track::-webkit-scrollbar { display: none; } :is(#content, body) .customerReviews.slider .track .review { flex: 0 0 calc((100% - 2 * var(--crGap)) / 3); scroll-snap-align: start; } :is(#content, body) .customerReviews.slider .track { margin-inline: -2px; padding-inline: 2px; scroll-padding-inline: 2px; } /* 2px of room so the border of the first card is never cut by a fractional scroll position (Chrome) */ :is(#content, body) .customerReviews.grid .track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } :is(#content, body) .customerReviews .track .empty { flex: 1 1 100%; margin: 0; padding: 24px 0; text-align: center; color: var(--crMuted); } :is(#content, body) .customerReviews .panel.loading .track { opacity: .4; transition: opacity .2s; } :is(#content, body) .customerReviews .status { margin: 0; text-align: center; color: var(--crMuted); font-size: 14px; } :is(#content, body) .customerReviews .status:empty { display: none; } :is(#content, body) .customerReviews .status button { appearance: none; margin-left: 8px; padding: 0; border: 0; background: none; color: var(--crPrimary); font: inherit; text-decoration: underline; cursor: pointer; } :is(#content, body) .customerReviews .more { margin-top: 24px; text-align: center; } :is(#content, body) .customerReviews .moreButton { appearance: none; padding: 8px 22px; border: 1px solid var(--crBorder); border-radius: 999px; background: var(--crWhite); color: var(--crPrimary); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } :is(#content, body) .customerReviews .moreButton:hover { border-color: var(--crPrimary); } :is(#content, body) .customerReviews .panel.loading .moreButton { opacity: .5; cursor: progress; } /* ---- arrows (desktop only; touch devices swipe) ---- */ :is(#content, body) .customerReviews .arrow { appearance: none; position: absolute; top: 50%; z-index: 2; width: 36px; height: 48px; margin: -24px 0 0; padding: 0; border: 0; background: none; color: var(--crArrow); cursor: pointer; transition: color .2s, opacity .2s; } :is(#content, body) .customerReviews .arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: solid currentColor; border-width: 0 0 4px 4px; } :is(#content, body) .customerReviews .arrow.prev { left: -48px; } :is(#content, body) .customerReviews .arrow.prev::before { transform: translateX(3px) rotate(45deg); } :is(#content, body) .customerReviews .arrow.next { right: -48px; } :is(#content, body) .customerReviews .arrow.next::before { transform: translateX(-3px) rotate(-135deg); } :is(#content, body) .customerReviews .arrow:hover:not(:disabled) { color: var(--crPrimary); } :is(#content, body) .customerReviews .arrow:disabled { opacity: .35; cursor: default; } :is(#content, body) .customerReviews.slider { padding-inline: 52px; } /* ---- card ---- */ :is(#content, body) .customerReviews .review { margin: 0; padding: 16px; border: 1px solid var(--crBorder); border-radius: 14px; background: var(--crWhite); } :is(#content, body) .customerReviews.grey .review { border-color: transparent; } :is(#content, body) .customerReviews .review .head { display: flex; align-items: flex-start; gap: 10px; } :is(#content, body) .customerReviews .review .head .avatar { position: relative; overflow: hidden; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--crTint); color: var(--crPrimary); font-size: 15px; font-weight: 700; } :is(#content, body) .customerReviews .review .head .avatar img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; background: var(--crTint); } :is(#content, body) .customerReviews .review .head .who { flex: 1 1 auto; min-width: 0; } :is(#content, body) .customerReviews .review .head .who .name { display: block; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--crPrimary); overflow-wrap: anywhere; } :is(#content, body) .customerReviews .review .head .who .source { display: block; font-size: 11px; line-height: 16px; color: var(--crMuted); } :is(#content, body) .customerReviews .review .head .who .source .localGuide { font-weight: 700; color: var(--crText); } :is(#content, body) .customerReviews .review .head .rating { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } :is(#content, body) .customerReviews .review .head .rating .stars { font-size: 15px; line-height: 16px; letter-spacing: 1px; color: var(--crStar); white-space: nowrap; } :is(#content, body) .customerReviews .review .head .rating .verified { padding: 2px 8px; border-radius: 6px; background: #e6f5ee; color: #1d8a5a; font-size: 10px; line-height: 16px; font-weight: 600; white-space: nowrap; } :is(#content, body) .customerReviews .review .title { margin: 14px 0 0; padding: 0; font-size: 15px; line-height: 21px; font-weight: 700; color: var(--crPrimary); } :is(#content, body) .customerReviews .review .text { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--crText); overflow-wrap: anywhere; } :is(#content, body) .customerReviews .review .text .expand { appearance: none; padding: 0 2px; border: 0; background: none; color: var(--crPrimary); font: inherit; cursor: pointer; } /* photos: big picture on top, the other ones small below it; the small ones swap with the big one */ :is(#content, body) .customerReviews .review .gallery { margin: 0 0 14px; } :is(#content, body) .customerReviews .review .gallery .big { overflow: hidden; border-radius: 12px; background: var(--crSoft); aspect-ratio: 4 / 3; } :is(#content, body) .customerReviews .review .gallery .big img { display: block; width: 100%; height: 100%; object-fit: cover; } :is(#content, body) .customerReviews .review .thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } :is(#content, body) .customerReviews .review .thumbs .thumb { appearance: none; display: block; width: 56px; height: 56px; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 8px; background: var(--crSoft); cursor: pointer; } :is(#content, body) .customerReviews .review .thumbs .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } :is(#content, body) .customerReviews .review .thumbs.small { margin-top: 14px; } :is(#content, body) .customerReviews .review .thumbs.small .thumb { width: 72px; height: 72px; cursor: default; } /* ---- smaller screens ---- */ @media (max-width: 1100px) { :is(#content, body) .customerReviews.slider { padding-inline: 0; } :is(#content, body) .customerReviews .arrow { display: none; } :is(#content, body) .customerReviews.slider .track .review { flex-basis: calc((100% - var(--crGap)) / 2); } :is(#content, body) .customerReviews.grid .track { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { :is(#content, body) .customerReviews { margin-top: 24px; } /* overall rating: number on the left, stars above the text on the right, full width */ :is(#content, body) .customerReviews .summary { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "num stars" "num text"; justify-content: start; align-items: center; gap: 3px 14px; width: 100%; padding: 11px 20px; } :is(#content, body) .customerReviews .summary .ratingNumber { grid-area: num; font-size: 32px; } :is(#content, body) .customerReviews .summary .stars { grid-area: stars; align-self: end; line-height: 1; } :is(#content, body) .customerReviews .summary .summaryText { grid-area: text; align-self: start; font-size: 15px; line-height: 1.4; text-align: left; } :is(#content, body) .customerReviews .tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: -15px; padding: 2px 15px; scrollbar-width: none; } :is(#content, body) .customerReviews .tabs::-webkit-scrollbar { display: none; } :is(#content, body) .customerReviews .tabs .tab { flex: 0 0 auto; } :is(#content, body) .customerReviews.slider .track .review { flex-basis: 88%; } :is(#content, body) .customerReviews.grid .track { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { :is(#content, body) .customerReviews * { transition: none !important; scroll-behavior: auto !important; } }