/* Verified Reviews front end. All colour from theme tokens: card = --theme-area_background_reset, recessed = --theme-page_background, hairline = 8% text colour, edge = --form-field--borderColor */ /* .vrRevForm renders in a dialog appended to , outside the page wrappers, so it needs the tokens too */ .vrReviews, .vrRevForm, .vrRating { --vr-card: rgb(var(--theme-area_background_reset)); --vr-recessed: rgb(var(--theme-page_background)); /* 8% of the text colour: a hairline that holds on dark and light themes */ --vr-hairline: rgba(var(--theme-text_color), 0.08); /* Sunken controls borrow the theme's field border colour */ --vr-edge: var(--form-field--borderColor, rgba(var(--theme-text_color), 0.2)); --vr-ink: rgb(var(--theme-text_dark)); --vr-body: rgb(var(--theme-text_color)); --vr-muted: rgb(var(--theme-text_light)); --vr-accent: rgb(var(--theme-brand_primary)); --vr-good: rgb(var(--theme-featured)); --vr-warn: rgb(var(--theme-rating_on)); --vr-bad: rgb(var(--theme-moderated_text)); --vr-radius: 20px; --vr-radius-sm: 14px; --vr-pill: 980px; --vr-btn: 10px; /* Edge shadow for light themes; invisible on dark */ --vr-lift: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 20px -16px rgba(0, 0, 0, 0.25); } /* ---- Shared furniture ---- */ .vrPanel { background: var(--vr-card); border: 1px solid var(--vr-hairline); border-radius: var(--vr-radius); padding: 28px; box-shadow: var(--vr-lift); } .vrPanel + .vrPanel { margin-top: 18px; } .vrPanel__head { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; } .vrPanel__title { display: flex; align-items: center; gap: 11px; margin: 0; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--vr-ink); } .vrPanel__title .fa { color: var(--vr-accent); font-size: 18px; } .vrPanel__count { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--vr-muted); } .vrLabel { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--vr-muted); } .vrEmpty { padding: 34px 0; text-align: center; font-size: 14px; color: var(--vr-muted); } .vrEmpty--big { padding: 76px 0; } .vrEmpty--big .fa { display: block; margin-bottom: 14px; font-size: 30px; opacity: .35; } /* Buttons */ .vrBtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 18px; border-radius: var(--vr-btn); border: 1px solid rgba(var(--theme-text_color), 0.18); background: transparent; color: var(--vr-ink); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease; } .vrBtn:hover { background: rgba(var(--theme-text_color), 0.08); color: var(--vr-ink); text-decoration: none; } .vrBtn--primary { background: var(--vr-accent); border-color: var(--vr-accent); color: rgb(var(--theme-primary_button_font)); } .vrBtn--primary:hover { background: var(--vr-accent); color: rgb(var(--theme-primary_button_font)); filter: brightness(1.12); } .vrBtn--danger { border-color: rgba(var(--theme-moderated_text), 0.45); color: var(--vr-bad); } .vrBtn--danger:hover { background: rgba(var(--theme-moderated_text), 0.1); color: var(--vr-bad); } .vrBtn--big { height: 46px; padding: 0 30px; font-size: 15px; } .vrBtn--block { width: 100%; } .vrBtn--copy { height: 32px; padding: 0 14px; font-size: 12px; } .vrBtn[disabled] { opacity: .4; cursor: not-allowed; } .vrBtn[disabled]:hover { background: transparent; } .vrRevSelect { height: 38px; padding: 0 12px; background: var(--vr-recessed); border: 1px solid var(--vr-edge); border-radius: var(--vr-btn); font-size: 13px; color: var(--vr-body); } .vrPager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; } .vrPager__state { font-size: 13px; color: var(--vr-muted); font-variant-numeric: tabular-nums; } /* ---- Stars and the product rating badge (store tiles, product page, review list) ---- */ .vrStars { display: inline-flex; gap: 2px; } .vrStars .fa { font-size: 13px; color: rgba(var(--theme-text_light), 0.4); } .vrStars .fa.is-on { color: rgb(var(--theme-featured)); } .vrStars--big .fa { font-size: 19px; } .vrStars--sm .fa { font-size: 11px; } .vrRating { display: inline-flex; align-items: center; gap: 7px; } .vrRating:hover { text-decoration: none; } .vrRating:hover .vrRating__value { color: rgb(var(--theme-brand_primary)); } .vrRating__value { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: rgb(var(--theme-text_dark)); font-variant-numeric: tabular-nums; transition: color .15s ease; } .vrRating__count { font-size: 12px; color: rgb(var(--theme-text_light)); } .vrRating--title { margin: 10px 0 4px; } .vrRating--title .vrRating__value { font-size: 15px; } .vrRating--card { margin-top: 2px; } .vrRating--card .vrRating__value { font-size: 13px; } .vrRating--card .vrStars .fa { font-size: 11px; } /* ---- Embed / widget: minimal defaults, meant to be restyled per theme ---- */ .vrEmbed { display: grid; gap: 14px; } .vrEmbed__item { padding: 16px 18px; border: 1px solid rgba(var(--theme-text_color), 0.08); border-radius: 14px; background: rgb(var(--theme-area_background_reset)); } .vrEmbed__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .vrEmbed__product { font-size: 13px; font-weight: 600; color: rgb(var(--theme-text_dark)); } .vrEmbed__text { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: rgb(var(--theme-text_color)); } .vrEmbed__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: rgb(var(--theme-text_light)); } .vrEmbed__author { font-weight: 600; color: rgb(var(--theme-text_dark)); } .vrEmbed__verified { color: rgb(var(--theme-featured)); } .vrWidget__all { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; } /* ---- Reviews ---- */ .vrReviews { display: flex; flex-direction: column; gap: 18px; } /* Summary: score, distribution, trust; bar width is capped */ .vrRevSummary { display: grid; grid-template-columns: auto minmax(240px, 400px) auto; gap: 34px; align-items: center; justify-content: center; padding: 26px 30px; background: var(--vr-card); border: 1px solid var(--vr-hairline); border-radius: var(--vr-radius-sm); box-shadow: var(--vr-lift); } @media (max-width: 920px) { .vrRevSummary { grid-template-columns: 1fr; gap: 22px; justify-items: center; } } .vrRevScore { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 4px 30px 4px 4px; border-right: 1px solid var(--vr-hairline); } @media (max-width: 920px) { .vrRevScore { padding: 0 0 20px; border-right: 0; border-bottom: 1px solid var(--vr-hairline); width: 100%; } } .vrRevScore__value { font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -0.045em; color: var(--vr-ink); font-variant-numeric: tabular-nums; } .vrRevScore__count { font-size: 12px; color: var(--vr-muted); } .vrRevBars { display: grid; gap: 6px; width: 100%; } .vrRevBar { display: grid; grid-template-columns: 34px minmax(0, 1fr) 26px; gap: 12px; align-items: center; } .vrRevBar:hover { text-decoration: none; } .vrRevBar:hover .vrRevBar__fill { filter: brightness(1.2); } .vrRevBar__label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--vr-muted); } .vrRevBar__label .fa { font-size: 9px; } .vrRevBar__track { height: 9px; overflow: hidden; border-radius: var(--vr-pill); background: rgba(var(--theme-text_color), 0.08); } .vrRevBar__fill { display: block; height: 100%; border-radius: var(--vr-pill); background: var(--vr-good); transition: filter .15s ease; } .vrRevBar__count { text-align: right; font-size: 12px; color: var(--vr-muted); font-variant-numeric: tabular-nums; } .vrRevFacts { display: grid; gap: 10px; max-width: 250px; } .vrRevFact { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: var(--vr-radius-sm); background: rgba(var(--theme-featured), 0.07); box-shadow: inset 0 0 0 1px rgba(var(--theme-featured), 0.18); font-size: 12.5px; line-height: 1.45; color: var(--vr-body); } .vrRevFact .fa { margin-top: 2px; color: var(--vr-good); } .vrRevPrompt { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding: 16px 18px; border: 1px dashed rgba(var(--theme-brand_primary), 0.4); border-radius: var(--vr-radius-sm); } .vrRevPrompt__text { font-size: 13px; font-weight: 600; color: var(--vr-ink); } .vrRevPrompt__items { display: flex; gap: 8px; flex-wrap: wrap; } .vrRevFilters { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--vr-hairline); } .vrRevFilters__group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Bare selects: caret drawn as a background image, explicit width so they do not wrap */ /* Extra specificity to beat .vrSelect (full width, 44px) defined later */ .vrRevFilters .vrRevSelect { appearance: none; -webkit-appearance: none; width: auto; max-width: 230px; height: 36px; padding: 0 32px 0 13px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 10px; text-overflow: ellipsis; cursor: pointer; } /* IPS phone stylesheet forces padding:9px / font-size:16px on every