/* ReviewForge front-end styles. Everything is scoped under .rvfg to avoid theme conflicts. Logical properties (inline/block) are used so layouts mirror automatically in RTL. */ .rvfg { --rvfg-star: #f5a623; --rvfg-primary: #1f2937; --rvfg-text: #1f2937; --rvfg-muted: #6b7280; --rvfg-card-bg: #fff; --rvfg-card-border: #e5e7eb; --rvfg-radius: 10px; --rvfg-gap: 20px; --rvfg-cols: 3; --rvfg-cols-t: 2; --rvfg-cols-m: 1; --rvfg-cols-cur: var(--rvfg-cols); --rvfg-slides: 3; --rvfg-slides-t: 2; --rvfg-slides-m: 1; --rvfg-slides-cur: var(--rvfg-slides); --rvfg-focus: 0 0 0 3px rgba(37, 99, 235, .45); color: var(--rvfg-text); box-sizing: border-box; line-height: 1.55; } .rvfg *, .rvfg *::before, .rvfg *::after { box-sizing: inherit; } .rvfg :focus-visible { outline: none; box-shadow: var(--rvfg-focus); border-radius: 4px; } .rvfg .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .rvfg-block { margin-block: 1.5em; position: relative; } .rvfg-block__title { margin: 0 0 .75em; } .rvfg-is-loading .rvfg-items { opacity: .45; pointer-events: none; transition: opacity .15s; } .rvfg-product-reviews { clear: both; } /* Stars */ .rvfg-stars { position: relative; display: inline-block; font-size: 1rem; line-height: 1; letter-spacing: 2px; white-space: nowrap; vertical-align: middle; font-family: Arial, sans-serif; } .rvfg-stars--sm { font-size: .85rem; letter-spacing: 1px; } .rvfg-stars--lg { font-size: 1.35rem; } .rvfg-stars__bg { color: #d1d5db; } .rvfg-stars__fg { position: absolute; inset-block-start: 0; inset-inline-start: 0; overflow: hidden; color: var(--rvfg-star); } [dir="rtl"] .rvfg-stars__fg { direction: rtl; } /* Buttons & links */ .rvfg-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; padding: .6em 1.2em; border-radius: 999px; border: 1px solid var(--rvfg-primary); background: transparent; color: var(--rvfg-primary); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.2; } .rvfg-btn:hover { background: var(--rvfg-primary); color: #fff; } .rvfg-btn--primary { background: var(--rvfg-primary); color: #fff; } .rvfg-btn--primary:hover { filter: brightness(1.15); } .rvfg-btn--ghost { border-color: var(--rvfg-card-border); color: var(--rvfg-text); } .rvfg-btn[disabled] { opacity: .6; cursor: progress; } .rvfg-link { background: none; border: 0; padding: 0; color: var(--rvfg-primary); text-decoration: underline; cursor: pointer; font: inherit; } /* Summary */ .rvfg-summary { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: calc(var(--rvfg-gap) * 1.5); align-items: center; margin-block-end: var(--rvfg-gap); } .rvfg-summary__score { display: flex; flex-direction: column; gap: .3em; } .rvfg-summary__avg { font-size: 2.6rem; font-weight: 700; line-height: 1; } .rvfg-summary__count, .rvfg-summary__verified { color: var(--rvfg-muted); font-size: .9em; } .rvfg-summary__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .35em; } .rvfg-summary__cta { grid-column: 1 / -1; } .rvfg-bar { display: grid; grid-template-columns: 2.4em 1fr 3em; align-items: center; gap: .6em; width: 100%; background: none; border: 0; padding: .15em 0; font: inherit; color: inherit; text-align: start; } button.rvfg-bar { cursor: pointer; } button.rvfg-bar:hover .rvfg-bar__track, button.rvfg-bar[aria-pressed="true"] .rvfg-bar__track { outline: 2px solid var(--rvfg-star); } .rvfg-bar__track { height: .55em; background: #eef0f3; border-radius: 99px; overflow: hidden; } .rvfg-bar__fill { display: block; height: 100%; background: var(--rvfg-star); border-radius: inherit; } .rvfg-bar__count { color: var(--rvfg-muted); font-size: .85em; text-align: end; } .rvfg-summary-only .rvfg-summary { margin: 0; } /* Image bar */ .rvfg-imagebar { margin-block-end: var(--rvfg-gap); } .rvfg-imagebar__title { font-weight: 600; margin: 0 0 .4em; } .rvfg-imagebar__list { list-style: none; margin: 0; padding: 0 0 .25em; display: flex; gap: .5em; overflow-x: auto; scrollbar-width: thin; } .rvfg-imagebar__item { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; overflow: hidden; flex: 0 0 auto; } .rvfg-imagebar__item img { display: block; width: 72px; height: 72px; object-fit: cover; } /* Toolbar */ .rvfg-toolbar { display: flex; flex-wrap: wrap; gap: .75em 1.25em; align-items: center; justify-content: space-between; padding-block: .75em; border-block: 1px solid var(--rvfg-card-border); margin-block-end: var(--rvfg-gap); } .rvfg-toolbar__sort { display: flex; gap: .5em; align-items: center; margin: 0; } .rvfg-toolbar select { padding: .4em 2em .4em .7em; border: 1px solid var(--rvfg-card-border); border-radius: 8px; background-color: #fff; font: inherit; color: inherit; max-width: 100%; } .rvfg-toolbar__filters { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; } .rvfg-toolbar__rating { margin: 0; } .rvfg-chip { padding: .35em .9em; border-radius: 999px; border: 1px solid var(--rvfg-card-border); background: #fff; color: inherit; font: inherit; font-size: .9em; cursor: pointer; } .rvfg-chip[aria-pressed="true"] { background: var(--rvfg-primary); border-color: var(--rvfg-primary); color: #fff; } /* Shared review pieces */ .rvfg-review { color: var(--rvfg-text); min-width: 0; } .rvfg-review__head, .rvfg-review__top, .rvfg-review__byline, .rvfg-review__inline, .rvfg-review__footer { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; } .rvfg-review__top { justify-content: space-between; } .rvfg-review__who { display: flex; flex-direction: column; gap: .15em; min-width: 0; } .rvfg-review__head .rvfg-review__date { margin-inline-start: auto; } .rvfg-review__author { font-weight: 600; } .rvfg-review__date { color: var(--rvfg-muted); font-size: .85em; } .rvfg-review__title { margin: .5em 0 .25em; font-size: 1.05em; line-height: 1.35; } .rvfg-review__body { margin-block: .35em; overflow-wrap: anywhere; } .rvfg-review__body p { margin: 0 0 .6em; } .rvfg-review__body p:last-child { margin-bottom: 0; } .rvfg-review__meta { display: flex; flex-wrap: wrap; gap: .25em .6em; align-items: center; color: var(--rvfg-muted); font-size: .88em; margin: .5em 0 0; } .rvfg-review__meta .rvfg-review__author { color: var(--rvfg-text); } .rvfg-review__product { margin: .2em 0; font-size: .85em; } .rvfg-review__product a { color: var(--rvfg-muted); } .rvfg-review__footer { margin-block-start: .75em; } .rvfg-review__byline { margin-block-start: .9em; padding-block-start: .75em; border-block-start: 1px solid var(--rvfg-card-border); } .rvfg-review__byline--center { justify-content: center; border: 0; } .rvfg-spacer { flex: 1 1 auto; } .rvfg-avatar { flex: 0 0 auto; display: inline-grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: color-mix(in srgb, var(--rvfg-primary) 12%, #fff); color: var(--rvfg-primary); font-weight: 700; font-size: .9em; } .rvfg-badge { display: inline-flex; align-items: center; gap: .3em; color: #047857; font-size: .8em; font-weight: 600; } .rvfg-disclosure { font-size: .82em; color: var(--rvfg-muted); background: #f8fafc; border-inline-start: 3px solid var(--rvfg-star); padding: .4em .7em; margin: .6em 0 0; border-radius: 4px; } .rvfg-fields { margin: .5em 0 0; display: grid; gap: .2em; font-size: .88em; } .rvfg-fields__row { display: flex; gap: .4em; } .rvfg-fields dt { font-weight: 600; margin: 0; } .rvfg-fields dt::after { content: ":"; } .rvfg-fields dd { margin: 0; } .rvfg-replies { margin-block-start: .75em; } .rvfg-reply { background: #f8fafc; border-radius: 8px; padding: .6em .8em; font-size: .9em; } .rvfg-reply__author { font-weight: 600; margin: 0 0 .25em; } .rvfg-readmore { font-size: .88em; margin-block-start: .25em; } /* Media thumbnails */ .rvfg-media { display: flex; flex-wrap: wrap; gap: .4em; margin-block: .6em; } .rvfg-media--center { justify-content: center; } .rvfg-media__item { position: relative; padding: 0; border: 0; background: #f3f4f6; border-radius: 8px; overflow: hidden; cursor: zoom-in; width: 76px; height: 76px; } .rvfg-media--small .rvfg-media__item { width: 56px; height: 56px; } .rvfg-media__item img, .rvfg-media__item video { width: 100%; height: 100%; object-fit: cover; display: block; } .rvfg-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1.2em; background: rgba(0, 0, 0, .3); } /* Votes */ .rvfg-votes { display: inline-flex; align-items: center; gap: .4em; font-size: .85em; color: var(--rvfg-muted); } .rvfg-vote { display: inline-flex; align-items: center; gap: .3em; padding: .25em .6em; border: 1px solid var(--rvfg-card-border); border-radius: 999px; background: #fff; color: inherit; font: inherit; cursor: pointer; } .rvfg-vote[aria-pressed="true"] { border-color: var(--rvfg-primary); color: var(--rvfg-primary); font-weight: 600; } .rvfg-vote[disabled] { cursor: default; opacity: .6; } /* ---------- Layouts ---------- */ .rvfg-items { position: relative; } .rvfg-grid { display: grid; grid-template-columns: repeat(var(--rvfg-cols-cur), minmax(0, 1fr)); gap: var(--rvfg-gap); align-items: start; } .rvfg-list { display: flex; flex-direction: column; gap: var(--rvfg-gap); } .rvfg-align-center .rvfg-list { align-items: center; text-align: center; } .rvfg-align-center .rvfg-list > .rvfg-review { width: 100%; max-width: 760px; } .rvfg-align-center .rvfg-list .rvfg-review__top, .rvfg-align-center .rvfg-list .rvfg-review__meta, .rvfg-align-center .rvfg-list .rvfg-media { justify-content: center; } /* Slider (scroll-snap) */ .rvfg-slider { position: relative; } .rvfg-slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--rvfg-slides-cur) - 1) * var(--rvfg-gap)) / var(--rvfg-slides-cur)); gap: var(--rvfg-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 4px; overscroll-behavior-x: contain; } .rvfg-slider__track::-webkit-scrollbar { display: none; } .rvfg-slide { scroll-snap-align: start; display: flex; min-width: 0; } .rvfg-slide > .rvfg-review { width: 100%; } .rvfg-slider__nav { position: absolute; inset-block-start: 50%; transform: translateY(-50%); z-index: 2; width: 2.4em; height: 2.4em; border-radius: 50%; border: 1px solid var(--rvfg-card-border); background: #fff; color: var(--rvfg-text); font-size: 1.3em; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); } .rvfg-slider__prev { inset-inline-start: -1em; } .rvfg-slider__next { inset-inline-end: -1em; } [dir="rtl"] .rvfg-slider__nav { transform: translateY(-50%) scaleX(-1); } .rvfg-slider__dots { display: flex; justify-content: center; gap: .4em; margin-block-start: .9em; } .rvfg-slider__dots[hidden] { display: none; } .rvfg-slider__dot { width: .65em; height: .65em; border-radius: 50%; border: 0; padding: 0; background: #d1d5db; cursor: pointer; } .rvfg-slider__dot[aria-current="true"] { background: var(--rvfg-primary); } .rvfg-clamp .rvfg-review__body:not([data-rvfg-expandable]) { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .rvfg-center { text-align: center; } .rvfg-center .rvfg-media { justify-content: center; } /* ---------- Templates ---------- */ /* Classic card */ .rvfg-card { background: var(--rvfg-card-bg); border: 1px solid var(--rvfg-card-border); border-radius: var(--rvfg-radius); padding: 1.1em 1.2em; } /* Elevated */ .rvfg-card--elevated { border-color: transparent; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(15, 23, 42, .08); } .rvfg-card--elevated .rvfg-review__title { font-size: 1.15em; } .rvfg-score { flex: 0 0 auto; display: grid; place-items: center; width: 3.6em; height: 3.6em; border-radius: var(--rvfg-radius); background: var(--rvfg-primary); color: #fff; font-size: 1.1em; font-weight: 700; line-height: 1; } .rvfg-score small { font-size: .6em; opacity: .75; } /* Minimal */ .rvfg-tile { padding: .25em 0; } .rvfg-grid .rvfg-tile { border-block-start: 2px solid var(--rvfg-text); padding-block-start: .9em; } .rvfg-line { padding-block: 1em; border-block-end: 1px solid var(--rvfg-card-border); } .rvfg-line:first-child { padding-block-start: 0; } /* Quote */ .rvfg-bubble { position: relative; margin: 0; padding: 1.1em 1.2em; background: var(--rvfg-card-bg); border: 1px solid var(--rvfg-card-border); border-radius: var(--rvfg-radius); quotes: none; font-style: normal; } .rvfg-bubble::after { content: ""; position: absolute; inset-block-end: -9px; inset-inline-start: 1.6em; width: 16px; height: 16px; background: inherit; border-inline-end: 1px solid var(--rvfg-card-border); border-block-end: 1px solid var(--rvfg-card-border); transform: rotate(45deg); } .rvfg-bubble__mark { position: absolute; inset-block-start: -.2em; inset-inline-end: .35em; font-size: 3.2em; line-height: 1; color: color-mix(in srgb, var(--rvfg-star) 45%, transparent); font-family: Georgia, serif; } .rvfg-quote__author { display: flex; align-items: center; gap: .6em; margin-block-start: 1em; padding-inline-start: .8em; } .rvfg-quote__author cite { font-style: normal; display: block; } .rvfg-quote--side { display: flex; gap: 1em; align-items: flex-start; } .rvfg-quote--side .rvfg-quote__author { margin: 0; padding: 0; } .rvfg-bubble--side::after { inset-block-start: 1.1em; inset-block-end: auto; inset-inline-start: -9px; transform: rotate(135deg); } [dir="rtl"] .rvfg-bubble--side::after { transform: rotate(-45deg); } /* Media first */ .rvfg-card--media { padding: 0; overflow: hidden; } .rvfg-card--media.rvfg-card--nocover { padding: 1.1em 1.2em; } .rvfg-card--media .rvfg-card__inner { padding: 1em 1.2em 1.1em; } .rvfg-card--nocover .rvfg-card__inner { padding: 0; } .rvfg-cover { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #f3f4f6; cursor: zoom-in; aspect-ratio: 4 / 3; overflow: hidden; } .rvfg-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; } .rvfg-cover:hover img { transform: scale(1.03); } .rvfg-cover__count { position: absolute; inset-block-end: .6em; inset-inline-end: .6em; background: rgba(0, 0, 0, .65); color: #fff; font-size: .8em; border-radius: 999px; padding: .15em .6em; } .rvfg-cover__rating { position: absolute; inset-block-end: .6em; inset-inline-start: .6em; background: rgba(255, 255, 255, .92); border-radius: 999px; padding: .2em .55em; } /* Rows (list layout) */ .rvfg-row { display: flex; gap: 1.2em; align-items: flex-start; } .rvfg-row__side { flex: 0 0 9em; display: flex; flex-direction: column; gap: .3em; align-items: flex-start; } .rvfg-row__main { flex: 1 1 auto; min-width: 0; } .rvfg-row--media { padding: 0; overflow: hidden; align-items: stretch; } .rvfg-row--media .rvfg-row__main { padding: 1.1em 1.2em 1.1em 0; } [dir="rtl"] .rvfg-row--media .rvfg-row__main { padding: 1.1em 0 1.1em 1.2em; } .rvfg-row--nomedia .rvfg-row__main { padding: 1.1em 1.2em; } .rvfg-row__media { flex: 0 0 34%; max-width: 280px; background: #f3f4f6; } .rvfg-media--stack { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; margin: 0; height: 100%; } .rvfg-media--stack .rvfg-media__item { width: 100%; height: auto; aspect-ratio: 1; border-radius: 0; } .rvfg-media--stack .rvfg-media__item:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; } /* Empty / notices */ .rvfg-empty { color: var(--rvfg-muted); padding: 1em 0; margin: 0; grid-column: 1 / -1; } .rvfg-notice { padding: .8em 1em; border-radius: 8px; margin-block: 1em; background: #f1f5f9; } .rvfg-notice--success { background: #ecfdf5; color: #065f46; } .rvfg-notice--info { background: #eff6ff; color: #1e3a8a; } .rvfg-notice a { margin-inline-start: .4em; } /* Pagination */ .rvfg-pagination { margin-block-start: calc(var(--rvfg-gap) * 1.2); display: flex; justify-content: center; } .rvfg-pagination[hidden] { display: none; } .rvfg-pagination ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35em; } .rvfg-pagination button { min-width: 2.3em; height: 2.3em; padding: 0 .6em; border-radius: 8px; border: 1px solid var(--rvfg-card-border); background: #fff; color: inherit; font: inherit; cursor: pointer; } .rvfg-pagination button[aria-current="page"] { background: var(--rvfg-primary); color: #fff; border-color: var(--rvfg-primary); } .rvfg-pagination__gap { padding: 0 .3em; align-self: center; color: var(--rvfg-muted); } [dir="rtl"] .rvfg-pagination button[aria-label] { transform: scaleX(-1); } /* ---------- Form (5 designs) ---------- */ .rvfg-form-wrap { margin-block: 1.5em; } .rvfg-form { margin-block-start: 1em; } .rvfg-form[hidden] { display: none; } .rvfg-form__title { margin: 0 0 .6em; font-size: 1.2em; } .rvfg-form__identity { font-size: .9em; color: var(--rvfg-muted); display: flex; gap: .6em; flex-wrap: wrap; align-items: center; } .rvfg-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1em 1.2em; } .rvfg-field { margin: 0; display: flex; flex-direction: column; gap: .35em; min-width: 0; } .rvfg-field--full, .rvfg-field--upload, .rvfg-field--choice, .rvfg-field--rating { grid-column: 1 / -1; } .rvfg-field label, .rvfg-field legend { font-weight: 600; font-size: .92em; } .rvfg-field fieldset, fieldset.rvfg-field { border: 0; padding: 0; margin: 0; } .rvfg-form input[type=text], .rvfg-form input[type=email], .rvfg-form textarea, .rvfg-form select { width: 100%; padding: .65em .8em; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; font: inherit; color: inherit; } .rvfg-form input[aria-invalid="true"], .rvfg-form textarea[aria-invalid="true"], .rvfg-form select[aria-invalid="true"] { border-color: #dc2626; } .rvfg-form input[type=file] { font-size: .9em; } .rvfg-req { color: #dc2626; } .rvfg-field__hint { font-size: .82em; color: var(--rvfg-muted); margin: 0; } .rvfg-field__error { color: #b91c1c; font-size: .85em; margin: 0; } .rvfg-form__errors { background: #fef2f2; color: #991b1b; padding: .7em .9em; border-radius: 8px; margin-block-end: 1em; } .rvfg-form__errors[hidden] { display: none; } .rvfg-choice { display: inline-flex; gap: .45em; align-items: flex-start; font-weight: 400 !important; margin-inline-end: 1em; } .rvfg-field--consent { margin-block: 1em .5em; font-size: .9em; } .rvfg-form__actions { margin-block-start: 1.1em; } .rvfg-previews { display: flex; flex-wrap: wrap; gap: .4em; } .rvfg-previews img, .rvfg-previews video { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; } .rvfg-hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; } .rvfg-recaptcha-note { margin-block-start: .5em; } /* Star picker (radios rendered 5→1 and reversed with flex). */ .rvfg-rate { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .1em; } [dir="rtl"] .rvfg-rate { flex-direction: row-reverse; } .rvfg-rate input { position: absolute; opacity: 0; width: 1px; height: 1px; } .rvfg-rate label { cursor: pointer; font-size: 1.9em; line-height: 1; color: #d1d5db; transition: color .1s, transform .1s; font-weight: 400; } .rvfg-rate label:hover, .rvfg-rate label:hover ~ label, .rvfg-rate input:checked ~ label { color: var(--rvfg-star); } .rvfg-rate input:focus-visible + label { box-shadow: var(--rvfg-focus); border-radius: 4px; } .rvfg-rate label:active { transform: scale(.9); } /* Design: card */ .rvfg-form--card .rvfg-form { background: var(--rvfg-card-bg); border: 1px solid var(--rvfg-card-border); border-radius: calc(var(--rvfg-radius) + 4px); padding: 1.5em; box-shadow: 0 10px 30px rgba(15, 23, 42, .08); } /* Design: minimal (underlined inputs) */ .rvfg-form--minimal .rvfg-form input[type=text], .rvfg-form--minimal .rvfg-form input[type=email], .rvfg-form--minimal .rvfg-form textarea, .rvfg-form--minimal .rvfg-form select { border: 0; border-block-end: 2px solid #cbd5e1; border-radius: 0; padding-inline: 0; background: transparent; } .rvfg-form--minimal .rvfg-form input:focus, .rvfg-form--minimal .rvfg-form textarea:focus { border-block-end-color: var(--rvfg-primary); } .rvfg-form--minimal .rvfg-form__grid { grid-template-columns: 1fr; } /* Design: boxed (tinted panel) */ .rvfg-form--boxed .rvfg-form { background: color-mix(in srgb, var(--rvfg-primary) 6%, #fff); border-radius: var(--rvfg-radius); padding: 1.5em; } .rvfg-form--boxed .rvfg-form__title { text-transform: uppercase; letter-spacing: .06em; font-size: 1em; } .rvfg-form--boxed .rvfg-btn--primary { width: 100%; border-radius: 8px; } /* Design: split (two columns: rating & text left, details right) */ .rvfg-form--split .rvfg-form { border-block-start: 3px solid var(--rvfg-primary); padding-block-start: 1em; } .rvfg-form--split .rvfg-form__grid { grid-template-columns: 1.4fr 1fr; } .rvfg-form--split .rvfg-field--rating, .rvfg-form--split .rvfg-field--full { grid-column: 1; } .rvfg-form--split .rvfg-field:not(.rvfg-field--full):not(.rvfg-field--rating) { grid-column: 2; } /* Design: classic uses the base styles */ /* ---------- Lightbox ---------- */ .rvfg-lightbox { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; } .rvfg-lightbox[hidden] { display: none; } .rvfg-lightbox__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .82); } .rvfg-lightbox__panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px; width: min(1100px, 94vw); max-height: 90vh; background: #fff; border-radius: 12px; overflow: hidden; } .rvfg-lightbox__stage { background: #0b0b0c; display: grid; place-items: center; min-height: 320px; max-height: 90vh; } .rvfg-lightbox__stage img, .rvfg-lightbox__stage video { max-width: 100%; max-height: 90vh; object-fit: contain; display: block; } .rvfg-lightbox__info { padding: 1.4em; overflow-y: auto; max-height: 90vh; } .rvfg-lightbox__stars { color: var(--rvfg-star, #f5a623); font-size: 1.2em; margin: 0 0 .4em; letter-spacing: 2px; } .rvfg-lightbox__title { font-weight: 700; margin: 0 0 .4em; } .rvfg-lightbox__text { white-space: pre-line; margin: 0 0 .8em; } .rvfg-lightbox__meta { color: #6b7280; font-size: .85em; margin: 0; } .rvfg-lightbox__close { position: absolute; inset-block-start: .4em; inset-inline-end: .5em; z-index: 3; width: 2em; height: 2em; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); font-size: 1.4em; line-height: 1; cursor: pointer; } .rvfg-lightbox__nav { position: absolute; inset-block-start: 50%; transform: translateY(-50%); z-index: 3; width: 2.4em; height: 2.4em; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); font-size: 1.4em; cursor: pointer; } .rvfg-lightbox__nav[hidden] { display: none; } .rvfg-lightbox__prev { inset-inline-start: .6em; } .rvfg-lightbox__next { inset-inline-end: calc(300px + .6em); } [dir="rtl"] .rvfg-lightbox__nav { transform: translateY(-50%) scaleX(-1); } html.rvfg-lightbox-open { overflow: hidden; } @media (max-width: 760px) { .rvfg-lightbox__panel { grid-template-columns: 1fr; overflow-y: auto; } .rvfg-lightbox__stage { max-height: 60vh; } .rvfg-lightbox__next { inset-inline-end: .6em; } .rvfg-row__side { flex-basis: auto; flex-direction: row; align-items: center; } .rvfg-row__media { max-width: none; } .rvfg-row--media .rvfg-row__main, [dir="rtl"] .rvfg-row--media .rvfg-row__main { padding: 1em; } .rvfg-slider__prev { inset-inline-start: 0; } .rvfg-slider__next { inset-inline-end: 0; } .rvfg-form__grid { grid-template-columns: 1fr; } } /* Shop loop rating bar */ .rvfg-loop-rating { display: flex; align-items: center; gap: .4em; flex-wrap: wrap; margin: .25em 0 .5em; font-size: .9em; } .rvfg-loop-rating__count { color: var(--rvfg-muted); text-decoration: none; } /* Review hub page */ .rvfg-hub-page { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: #f3f4f6; } .rvfg-hub { max-width: 640px; margin: 4vh auto; background: #fff; padding: 2em; border-radius: 14px; } .rvfg-hub__list { list-style: none; padding: 0; margin: 1.5em 0; display: grid; gap: .8em; } .rvfg-hub__item { display: flex; align-items: center; gap: 1em; padding: .8em; border: 1px solid #e5e7eb; border-radius: 10px; } .rvfg-hub__item img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; } .rvfg-hub__name { flex: 1; font-weight: 600; } @media (prefers-reduced-motion: reduce) { .rvfg *, .rvfg *::before, .rvfg *::after { transition: none !important; scroll-behavior: auto !important; } } /* ---------- Theme hardening ---------- Some themes style every