/** * Reviews — the review card, the homepage carousel, the Reviews page wall, * and the wall's source filter. * * Loaded in the of any page that renders [smyn_reviews], so cards * paint in their final shape rather than jumping into it when a footer * stylesheet arrives. * * SPECIFICITY. The theme's blocks.css is generated from the Elementor page * JSON and still carries the previous wall's rules, up to (0,3,0) for its * hover state. Those are not edited here — they are regenerated wholesale — * so every rule below that competes with one of them is written one class * heavier, and the outcome never depends on which stylesheet loaded last. */ /* ======================================================= THE CARD ======== */ /* (0,3,0): one class over blocks.css's `.smyn-reviews-wall .smyn-review-card`. */ .smyn-rcard.smyn-rcard.smyn-review-card { --smyn-rcard-pad: clamp(24px, 2.2vw, 34px); position: relative; display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; width: 100%; height: 100%; margin: 0; padding: var(--smyn-rcard-pad) var(--smyn-rcard-pad) calc(var(--smyn-rcard-pad) - 4px); background: #FFFDFB; border: 1px solid rgba(213, 201, 184, .7); border-radius: 18px; /* A warm shadow, low and wide: a card resting on the page, not floating. */ box-shadow: 0 1px 2px rgba(26, 23, 20, .04), 0 22px 44px -28px rgba(82, 26, 21, .30); color: var(--smyn-ink, #1A1714); transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s cubic-bezier(.22, .61, .36, 1); } /* --- head: avatar, name, source and date -------------------------------- */ .smyn-rcard .smyn-rcard-head { display: flex; align-items: center; gap: 14px; margin: 0; font-family: var(--smyn-font-body, "Glacial Indifference", Jost, sans-serif); font-size: var(--smyn-fs-micro, 13px); font-weight: 400; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--smyn-mocha, #74615A); } /* * The avatar box is fixed in both the markup (width/height on the image) and * here, so a photo arriving late, or failing and being removed, never moves * anything around it. */ .smyn-rcard .smyn-review-avatar { position: relative; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--smyn-champagne, #D8CCB8); } .smyn-rcard .smyn-review-avatar[data-tone="2"] { background: var(--smyn-petal, #FAE3E3); } .smyn-rcard .smyn-review-avatar[data-tone="3"] { background: var(--smyn-hover-surface, #F1E9DC); } .smyn-rcard .smyn-review-initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--smyn-font-label, "Glacial Indifference", Jost, sans-serif); font-weight: 700; font-size: 15px; letter-spacing: .06em; color: var(--smyn-terracotta-deep, #521A15); } .smyn-rcard .smyn-review-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .smyn-rcard .smyn-rcard-who { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .smyn-rcard .smyn-review-author { font-family: var(--smyn-font-label, "Glacial Indifference", Jost, sans-serif); font-weight: 700; font-size: 15px; letter-spacing: .02em; color: var(--smyn-ink, #1A1714); overflow-wrap: anywhere; } .smyn-rcard .smyn-review-author a { color: inherit; text-decoration: none; } .smyn-rcard .smyn-review-author a:hover, .smyn-rcard .smyn-review-author a:focus-visible { text-decoration: underline; text-underline-offset: 3px; } .smyn-rcard .smyn-rcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } /* * Source: one treatment for both platforms — same size, same outline, same * colour. Google's label is a link (its display terms require one) and * Fresha's is not; nothing else about them differs, so neither reads as the * senior source and neither borrows the other's look. */ .smyn-rcard .smyn-review-source { display: inline-flex; align-items: center; padding: 4px 10px 3px; border: 1px solid var(--smyn-line, #D5C9B8); border-radius: 0; /* square, like the filter chips and every button on the site */ font-family: var(--smyn-font-label, "Glacial Indifference", Jost, sans-serif); font-weight: 700; font-size: var(--smyn-fs-micro, 13px); line-height: 1.1; letter-spacing: .12em; text-transform: uppercase; color: var(--smyn-terracotta, #822E27); } .smyn-rcard .smyn-review-source a { color: inherit; text-decoration: none; } .smyn-rcard .smyn-review-source a:hover, .smyn-rcard .smyn-review-source a:focus-visible { text-decoration: underline; text-underline-offset: 3px; } .smyn-rcard .smyn-review-date { font-size: var(--smyn-fs-micro, 13px); letter-spacing: .04em; color: var(--smyn-muted, #74615A); } /* --- rating ------------------------------------------------------------- */ .smyn-rcard .smyn-review-rating { display: flex; margin: 2px 0 0; line-height: 0; } .smyn-rcard .smyn-review-stars { display: inline-flex; gap: 3px; } /* Filled: the reviewer's stars. Outlined: the distance to five. */ .smyn-rcard .smyn-review-star { display: block; fill: transparent; stroke: var(--smyn-line-champagne, #CDBFA9); stroke-width: 1.2; stroke-linejoin: round; } .smyn-rcard .smyn-review-star.is-on { fill: var(--smyn-terracotta, #822E27); stroke: var(--smyn-terracotta, #822E27); } .smyn-rcard .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- the review itself -------------------------------------------------- */ .smyn-rcard blockquote.smyn-rcard-text { margin: 0; padding: 0; border: 0; quotes: none; font-family: var(--smyn-font-body, "Glacial Indifference", Jost, sans-serif); font-weight: 400; font-style: normal; font-size: clamp(17px, 1.18vw, 19px); line-height: 1.55; letter-spacing: 0; color: var(--smyn-ink, #1A1714); overflow-wrap: anywhere; } .smyn-rcard blockquote.smyn-rcard-text::before, .smyn-rcard blockquote.smyn-rcard-text::after { content: none; } .smyn-rcard .smyn-rcard-text p { margin: 0; white-space: pre-line; } .smyn-rcard .smyn-rcard-more { align-self: flex-start; margin: -4px 0 0; padding: 6px 0; border: 0; background: none; cursor: pointer; font-family: var(--smyn-font-label, "Glacial Indifference", Jost, sans-serif); font-weight: 700; font-size: var(--smyn-fs-micro, 13px); letter-spacing: .12em; text-transform: uppercase; color: var(--smyn-terracotta, #822E27); text-decoration: underline; text-underline-offset: 4px; } .smyn-rcard .smyn-rcard-more[hidden] { display: none; } .smyn-rcard .smyn-rcard-more:focus-visible { outline: 2px solid var(--smyn-terracotta, #822E27); outline-offset: 3px; } .smyn-rcard .smyn-rcard-more-close { display: none; } .smyn-rcard.is-expanded .smyn-rcard-more-open { display: none; } .smyn-rcard.is-expanded .smyn-rcard-more-close { display: inline; } .smyn-rcard a:focus-visible { outline: 2px solid var(--smyn-terracotta, #822E27); outline-offset: 3px; border-radius: 2px; } /* ===================================================== THE CAROUSEL ====== */ /* * Card width comes from container units measured against THIS element — the * content column — so it is known at first paint and does not change when * the script arrives. `--smyn-rcar-per` is how many cards fit the column; the * next one shows in the bleed beyond it, which a theme can open up with * --smyn-rcar-bleed (the SMYN theme does, on the homepage). */ .smyn-rcar { --smyn-rcar-gap: clamp(16px, 1.9vw, 28px); --smyn-rcar-per: 1.12; container-type: inline-size; position: relative; width: 100%; /* The controls come first in the markup (keyboard order: Pause before the moving cards); on screen they sit beneath them. */ display: flex; flex-direction: column; } @container (min-width: 640px) { .smyn-rcar-track { --smyn-rcar-per: 2; } } @container (min-width: 960px) { .smyn-rcar-track { --smyn-rcar-per: 2.6; } } @container (min-width: 1150px) { .smyn-rcar-track { --smyn-rcar-per: 3; } } @container (min-width: 1560px) { .smyn-rcar-track { --smyn-rcar-per: 4; } } .smyn-rcar-viewport { position: relative; /* Room for the card shadows: a scroller clips its overflow on both axes, so the shadow gets padding and the layout gets it back as margin. */ padding: 18px 0 46px; margin: -18px calc(-1 * var(--smyn-rcar-bleed, 0px)) -46px 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .smyn-rcar-viewport::-webkit-scrollbar { display: none; } .smyn-rcar-viewport:focus-visible { outline: 2px solid var(--smyn-terracotta, #822E27); outline-offset: 4px; } /* While the script drags or swaps a copy for its real card, the browser must not snap or animate underneath it. */ .smyn-rcar-viewport.is-dragging, .smyn-rcar-viewport.is-jumping { scroll-snap-type: none; scroll-behavior: auto; } .smyn-rcar-viewport.is-dragging { cursor: grabbing; user-select: none; } .smyn-rcar.is-ready .smyn-rcar-viewport { cursor: grab; } .smyn-rcar-track { --smyn-rcar-w: calc((100cqi - (var(--smyn-rcar-per) - 1) * var(--smyn-rcar-gap)) / var(--smyn-rcar-per)); display: flex; gap: var(--smyn-rcar-gap); margin: 0; padding: 0; } .smyn-rcar-slide { flex: 0 0 var(--smyn-rcar-w); display: flex; margin: 0; padding: 0; scroll-snap-align: start; } /* Browsers without container units (Safari 15, Firefox before 110) cannot size a card from the column; give them a steady width instead of letting every card shrink to its own text. */ @supports not (width: 1cqi) { .smyn-rcar-slide { flex: 0 0 min(84vw, 400px); } } /* Every review already fits: a still row, nothing to drag. */ .smyn-rcar.is-static .smyn-rcar-viewport { cursor: auto; scroll-snap-type: none; } /* * The clamp exists only once the script is running, because only then can * Read more open it. Without the script every word is visible. */ .smyn-rcar.is-ready .smyn-rcard-text p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; } .smyn-rcar.is-ready .smyn-rcard.is-expanded .smyn-rcard-text p { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; } @media (hover: hover) and (pointer: fine) { .smyn-rcar .smyn-rcard.smyn-review-card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(26, 23, 20, .05), 0 28px 52px -26px rgba(82, 26, 21, .36); } } /* --- controls: restrained, and only when there is something to control --- */ .smyn-rcar-controls { order: 2; display: flex; justify-content: flex-end; gap: 10px; margin-top: 30px; } .smyn-rcar-controls[hidden], .smyn-rcar-btn[hidden] { display: none; } /* Pause / Play: set a little apart from the arrows, its icon showing what a press will do. One icon at a time: these must outweigh the buttons' own `.smyn-rcar-btn svg { display: block }` (0,1,1), or both icons show. */ .smyn-rcar-toggle { margin-right: 8px; } .smyn-rcar-btn .smyn-rcar-icon-play, .smyn-rcar.is-stopped .smyn-rcar-btn .smyn-rcar-icon-pause { display: none; } .smyn-rcar.is-stopped .smyn-rcar-btn .smyn-rcar-icon-play { display: block; } .smyn-rcar-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--smyn-line, #D5C9B8); border-radius: 0; /* the site's buttons are square */ background: transparent; color: var(--smyn-ink, #1A1714); cursor: pointer; transition: background-color .3s cubic-bezier(.22, .61, .36, 1), border-color .3s cubic-bezier(.22, .61, .36, 1), color .3s cubic-bezier(.22, .61, .36, 1); } .smyn-rcar-btn svg { display: block; } .smyn-rcar-prev svg { transform: rotate(180deg); } .smyn-rcar-btn:hover { background: var(--smyn-terracotta, #822E27); border-color: var(--smyn-terracotta, #822E27); color: var(--smyn-cream, #FDFAF7); } .smyn-rcar-btn:focus-visible { outline: 2px solid var(--smyn-terracotta, #822E27); outline-offset: 3px; } /* A row with only part of one review left to show, at its start or end: the arrow that has nowhere to go. */ .smyn-rcar-btn[aria-disabled="true"] { opacity: 0.35; cursor: default; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .smyn-rcar-viewport { scroll-behavior: auto; } /* As heavy as the card's own rule (0,3,0), or it loses to it. */ .smyn-rcard.smyn-rcard.smyn-review-card, .smyn-rcar-btn { transition: none; } .smyn-rcar .smyn-rcard.smyn-review-card:hover { transform: none; } } /* ======================================================= THE WALL ======== */ .smyn-rwall.smyn-reviews-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(16px, 1.9vw, 26px); align-items: start; } .smyn-rwall .smyn-rcard.smyn-rcard.smyn-review-card { height: auto; } .smyn-rwall .smyn-rcard.smyn-review-card[hidden] { display: none; } @media (hover: hover) and (pointer: fine) { .smyn-rwall .smyn-rcard.smyn-review-card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(26, 23, 20, .05), 0 28px 52px -26px rgba(82, 26, 21, .36); } } @media (prefers-reduced-motion: reduce) { .smyn-rwall .smyn-rcard.smyn-review-card:hover { transform: none; } } .smyn-reviews-wall .smyn-reviews-empty { grid-column: 1 / -1; margin: 0; padding: 28px 0; font-family: var(--smyn-font-label, "Glacial Indifference", Jost, sans-serif); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--smyn-mocha, #74615A); } /* ---- the source filter ------------------------------------------------- * * Shaped after .smyn-b37-tab, the treatments-hub filter, so the site has one * chip idiom — but at the catalogue's 13px floor rather than that block's * 10px, and with aria-pressed, which .smyn-b37-tab never had. */ .smyn-reviews-filter { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 26px; } .smyn-reviews-chip { display: inline-flex; align-items: center; padding: 11px 18px; border: 1px solid #D5C9B8; border-radius: 0; background: transparent; cursor: pointer; font-family: var(--smyn-font-label, "Glacial Indifference", Jost, sans-serif); font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: 1.4px; text-transform: uppercase; color: #3F332C; transition: background-color .3s cubic-bezier(.22, .61, .36, 1), border-color .3s cubic-bezier(.22, .61, .36, 1), color .3s cubic-bezier(.22, .61, .36, 1); } .smyn-reviews-chip:hover, .smyn-reviews-chip:focus-visible { border-color: var(--smyn-terracotta, #822E27); color: var(--smyn-terracotta, #822E27); } .smyn-reviews-chip:focus-visible { outline: 2px solid var(--smyn-terracotta, #822E27); outline-offset: 2px; } .smyn-reviews-chip.is-active { background: var(--smyn-terracotta, #822E27); border-color: var(--smyn-terracotta, #822E27); color: var(--smyn-cream, #FDFAF7); } @media (prefers-reduced-motion: reduce) { .smyn-reviews-chip { transition: none; } } /* * With scripting off the nav never unhides — the script is what reveals it — * so this only guards a browser that supports the query and has JS disabled * mid-session. Belt and braces, matching catalogue.css's own no-JS block. */ @media (scripting: none) { .smyn-reviews-filter { display: none !important; } .smyn-reviews-wall .smyn-review-card[hidden] { display: flex !important; } .smyn-reviews-wall .smyn-reviews-empty { display: none !important; } } @media (max-width: 767px) { .smyn-reviews-chip { padding: 10px 14px; letter-spacing: 1.2px; } }