/* --------------------------------------------------------------------------- One star for the whole site. --------------------------------------------------------------------------- Replaces two different stars that were in use at the same time: FontAwesome's `fa-star` on the product page and the catalog cards, and the plain text character U+2605 on the seller storefront and collection pages. The same product was drawn with two different shapes depending on where you looked at it. The shape is a polygon picture (SVG) rather than a glyph, so it does not depend on an icon font loading, and - the reason this file exists at all - the geometry lives in exactly ONE place. OpenCart's Twig runs on an ArrayLoader, so the markup loop still has to be copied into each template that draws stars (ReviewReadSideTest guards those copies against drift), but the polygon that defines what a star IS cannot drift, because there is only one of it. WHY THE FILL WIDTHS LOOK WRONG ------------------------------ A star's ink is not spread evenly across its width: the right-hand fifth is just the tip of one arm. Filling 80% of the WIDTH leaves 95.3% of the INK visible, which is why a 3.8 used to be indistinguishable from a 4.0 - while a 3.5 looked right, because 50% width happens to be exactly 50% ink, the one honest point on the curve. So the templates do not pass the fraction as a width. They look it up in a table computed by integrating this exact polygon: .1 -> 26.2% .4 -> 45.4% .7 -> 60.2% .2 -> 33.1% .5 -> 50.0% .8 -> 66.9% .3 -> 39.8% .6 -> 54.6% .9 -> 73.8% Nine entries is all that is ever needed: the rating is printed to one decimal, so the fractional part is always one of these. IF THE POLYGON BELOW IS EVER EDITED, THE TABLE IN THE TEMPLATES IS WRONG. Recompute it by integrating the new shape - do not adjust it by eye. --------------------------------------------------------------------------- */ .mv-stars { display: inline-flex; align-items: center; gap: .1em; line-height: 1; vertical-align: middle; font-size: 15px; /* matches the .fa-stack size this replaced */ } .mv-star { position: relative; display: inline-block; width: 1em; height: 1em; flex: none; /* A STAR PICTURE, NOT A CUT-OUT (2026-10-15). The star used to be a grey box cut to shape with clip-path (and, for one day, a mask), with the gold fill a plain rectangle inside it. Chrome left the box's left-most pixel column outside the cut whenever the star sat on a fractional pixel - Windows 125%, or browser zoom - so stars carried a thin line down their left edge that came and went with the zoom level. Measured on screenshots: the column was the top layer's colour at 50% (gold, and grey once the gold was fixed), outside the polygon. Clip-path and mask both did it. So nothing is cut any more. The grey star and the gold star are pictures (SVG, transparent outside the polygon), and a picture has no edge to leak. The empty grey star is #dcdcdc; the gold one, below, is #f5a623. These used to be --mv-star-empty / --mv-star-full; nothing ever set those, and a colour inside a data: URI cannot read a variable, so they are written in. The polygon is the same one in the same 0-100 units (viewBox 0 0 100 100, stretched to the box), so the fill table above still holds: 50,2 60.78,35.17 95.65,35.17 67.44,55.67 78.21,88.83 50,68.33 21.79,88.83 32.56,55.67 4.35,35.17 39.22,35.17 */ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon fill='%23dcdcdc' points='50,2 60.78,35.17 95.65,35.17 67.44,55.67 78.21,88.83 50,68.33 21.79,88.83 32.56,55.67 4.35,35.17 39.22,35.17'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; } /* The gold star, drawn at the full star's size from the left edge; the element is only as wide as the fill (an inline width from the template), so the picture is cut straight down at that point - by the element's own box, which is a plain rectangle, not by a clip. */ .mv-star > i { position: absolute; top: 0; bottom: 0; left: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon fill='%23f5a623' points='50,2 60.78,35.17 95.65,35.17 67.44,55.67 78.21,88.83 50,68.33 21.79,88.83 32.56,55.67 4.35,35.17 39.22,35.17'/%3E%3C/svg%3E") 0 0 / 1em 1em no-repeat; } /* --------------------------------------------------------------------------- The number next to the stars. --------------------------------------------------------------------------- Lives here rather than in each template for the same reason the star does: the product page, the catalog cards and the two seller surfaces all print the same figure and it should not be four different sizes. It used to be 400 weight at 0.82-0.9em, which read as a caption beside the stars rather than as the headline number it actually is. No new font family: the site is on Inter, and a heavier cut of it is what makes this stand out. A second family here would fight the price and the title, which are the only other bold things in a product card. 600, not 700. Inter is loaded with wght@400;500;600;700;800, so 600 is a real cut rather than something the browser synthesises. 700 read as heavy next to the product title at the same weight; 600 still leads the eye without competing with it. ONE SIZE EVERYWHERE was the rule, and it is now ONE SIZE PER SURFACE, SET HERE. The product page's rating was enlarged on 2026-08-31 at the site owner's request (22px stars over an 18px number). The point of the original rule survives: the sizes are still all in this file, so there is one place to look and nothing can drift silently. What is still banned is setting font-size on .mv-stars or .mv-rating-value inside a template - that is how the page ended up at 17px and the cards at 14px in the first place. The product page's h1 used to carry a hand-tuned optical nudge measured against this number's left side bearing, which made the two settings depend on each other. The constant was removed on 2026-08-31 - it was fitted to the 23 of 1256 visible products that show a number at all - and the alignment is now measured per product at runtime instead (rvAlignTitleInk() in product/product.twig). Changing the size below is a self-contained decision: the measurement simply re-runs at the new size. See the .product-details h1.page-title comment in product/product.twig. tabular-nums matters in a grid: proportional digits make "4.1" narrower than "3.8", so a row of cards has its stars starting at slightly different x-positions. Tabular figures line them up. */ .mv-rating-value { font-weight: 600; font-size: 14px; color: #1c1c1c; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; align-self: center; /* no-op outside a flex row; keeps templates free of it */ } /* The product page's own rating, and only that row: it is the headline figure for the thing the page is about, not a caption on a card in a grid. Scoped to .rv-rating-score, which exists on that one row - the breakdown panel's stars keep the standard size, since they sit beside their own 16px heading. */ .rv-rating-score .mv-stars { font-size: 22px; } .rv-rating-score .mv-rating-value { font-size: 18px; } /* The Customer reviews histogram under the product (.mv-cr in product/product.twig): the same headline size as the rating row above, beside its 18px "x out of 5". */ .mv-cr-head .mv-stars { font-size: 22px; } /* The mini card in the block above a category listing. Its column is about a third of a listing card's width, so the figure sits a notch below the 14px the listing uses - level with the price, which is the other number in that caption. The stars keep their own size; only the digits move. */ .side-product .mv-rating-value { font-size: 12px; }