/** * Video Testimonials - Customer Reviews, Social Proof and Trust Slider * * Storefront styles. Replaces 1.x's style.css plus three CDN stylesheets * (owl.carousel, owl.theme and Font Awesome, all pulled on every page). * * Custom properties live on :root, NOT on .mtst. The video dialog gets moved to * by front.js, and a var() only resolves through the DOM ancestors it * still has - scoping them to the wrapper would leave the moved dialog with * transparent surfaces and, worse, "border: 1px solid var(--undefined)" is * invalid at computed-value time, which drops the whole shorthand including * border-style. * * @author MEG Venture * @copyright 2019-2026 MEG Venture * @license Academic Free License 3.0 (AFL-3.0) */ :root { --mtst-surface: #fff; --mtst-surface-alt: #f7f8fa; --mtst-text: #232323; --mtst-muted: #6c757d; --mtst-border: #e3e6ea; --mtst-accent: #2fb5d2; --mtst-accent-text: #fff; --mtst-star: #f5a623; --mtst-star-off: #d8dce1; --mtst-ok: #16a34a; --mtst-error: #dc2626; --mtst-radius: 10px; --mtst-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06); --mtst-gap: 20px; } @media (prefers-color-scheme: dark) { :root { --mtst-surface: #1c1f24; --mtst-surface-alt: #24282e; --mtst-text: #e9ecef; --mtst-muted: #a0a7b0; --mtst-border: #343a41; --mtst-star-off: #454b52; } } .mtst { color: var(--mtst-text); font-size: 15px; line-height: 1.55; } .mtst *, .mtst *::before, .mtst *::after { box-sizing: border-box; } .mtst__inner { max-width: 1200px; margin: 0 auto; padding: 32px 15px; } .mtst__head { text-align: center; margin-bottom: 24px; } .mtst__title { font-size: 24px; margin: 0 0 8px; } .mtst__summary { color: var(--mtst-muted); margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } .mtst__summary strong { color: var(--mtst-text); font-size: 18px; } /* ------------------------------------------------------------------ stars */ .mtst-rating { display: inline-flex; gap: 2px; line-height: 1; } .mtst-star { color: var(--mtst-star-off); font-size: 15px; } .mtst-star--on { color: var(--mtst-star); } .mtst-rating--lg .mtst-star { font-size: 26px; } /* ------------------------------------------------------------------- card */ .mtst-card { background: var(--mtst-surface); border: 1px solid var(--mtst-border); border-radius: var(--mtst-radius); box-shadow: var(--mtst-shadow); padding: 20px; height: 100%; display: flex; flex-direction: column; gap: 12px; } .mtst-card--featured { border-color: var(--mtst-accent); } .mtst-card__head { display: flex; align-items: flex-start; gap: 12px; } .mtst-card__avatar { position: relative; flex: 0 0 auto; line-height: 0; } .mtst-avatar-svg { border-radius: 50%; display: block; width: 56px; height: 56px; } .mtst-card__who { min-width: 0; } .mtst-card__author { margin: 0; font-weight: 600; overflow-wrap: anywhere; } .mtst-card__meta { margin: 2px 0 0; color: var(--mtst-muted); font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .mtst-verified { margin: 4px 0 0; color: var(--mtst-ok); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; } .mtst-card__title { margin: 0; font-size: 16px; overflow-wrap: anywhere; } .mtst-card__text { margin: 0; color: var(--mtst-text); overflow-wrap: anywhere; } /* --------------------------------------------------------- play + dialog */ .mtst-play { position: absolute; right: -4px; bottom: -4px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--mtst-surface); background: var(--mtst-accent); color: var(--mtst-accent-text); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .mtst-play:hover, .mtst-play:focus-visible { filter: brightness(1.08); } .mtst-dialog { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .8); } .mtst-dialog[hidden] { display: none; } .mtst-dialog__box { position: relative; width: min(960px, 100%); } .mtst-dialog__frame { position: relative; padding-top: 56.25%; background: #000; border-radius: var(--mtst-radius); overflow: hidden; } .mtst-dialog__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .mtst-dialog__close { position: absolute; top: -44px; right: 0; background: transparent; border: 0; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; padding: 4px 10px; } /* --------------------------------------------------------------- carousel */ .mtst-strip__wrap { position: relative; } .mtst-strip { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (2 * var(--mtst-gap))) / 3); gap: var(--mtst-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px; /* Room for the shadow, and stops the scrollbar sitting under the cards. */ padding-bottom: 14px; scrollbar-width: thin; } .mtst-strip__item { scroll-snap-align: start; } .mtst-strip:focus-visible { outline: 2px solid var(--mtst-accent); outline-offset: 4px; } @media (max-width: 991px) { .mtst-strip { grid-auto-columns: calc((100% - var(--mtst-gap)) / 2); } } @media (max-width: 640px) { .mtst-strip { grid-auto-columns: 88%; } } .mtst-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--mtst-border); background: var(--mtst-surface); color: var(--mtst-text); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--mtst-shadow); padding: 0; } .mtst-nav[hidden] { display: none; } .mtst-nav--prev { left: -18px; } .mtst-nav--next { right: -18px; } @media (max-width: 1240px) { .mtst-nav--prev { left: 2px; } .mtst-nav--next { right: 2px; } } .mtst__actions { margin: 20px 0 0; display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; } /* ------------------------------------------------------------- list page */ .mtst-page { max-width: 1200px; margin: 0 auto; } .mtst-hero { text-align: center; background: var(--mtst-surface-alt); border: 1px solid var(--mtst-border); border-radius: var(--mtst-radius); padding: 24px; margin-bottom: 24px; } .mtst-hero__score { font-size: 44px; font-weight: 700; margin: 0; line-height: 1; } .mtst-hero__count { margin: 8px 0 0; color: var(--mtst-muted); } .mtst-page__actions { margin-bottom: 20px; text-align: center; } .mtst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--mtst-gap); } .mtst-empty { text-align: center; padding: 48px 20px; color: var(--mtst-muted); } /* -------------------------------------------------------------- pagination */ .mtst-pager { margin: 28px 0 0; } .mtst-pager ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; } .mtst-pager a, .mtst-pager span { display: block; padding: 6px 12px; border: 1px solid var(--mtst-border); border-radius: 6px; text-decoration: none; color: var(--mtst-text); } .mtst-pager__current span { background: var(--mtst-accent); border-color: var(--mtst-accent); color: var(--mtst-accent-text); } .mtst-pager__gap { padding: 6px 4px; color: var(--mtst-muted); } /* ------------------------------------------------------------------- form */ .mtst-form-page { max-width: 720px; margin: 0 auto; } .mtst-intro { color: var(--mtst-muted); margin-bottom: 20px; } .mtst-form { background: var(--mtst-surface); border: 1px solid var(--mtst-border); border-radius: var(--mtst-radius); padding: 24px; } .mtst-field { margin-bottom: 20px; } .mtst-label { display: block; font-weight: 600; margin-bottom: 6px; /* The classic theme sets a global "label, .label { text-align: right }" in _forms.scss, and a bare element selector reaches straight into this form. start/end rather than left so right-to-left shops stay correct. */ text-align: start; } .mtst-req { color: var(--mtst-error); } .mtst-input { width: 100%; padding: 10px 12px; border: 1px solid var(--mtst-border); border-radius: 8px; background: var(--mtst-surface); color: var(--mtst-text); font: inherit; } .mtst-input:focus { outline: 2px solid var(--mtst-accent); outline-offset: 1px; border-color: var(--mtst-accent); } .mtst-textarea { resize: vertical; min-height: 140px; } .mtst-help { margin: 6px 0 0; color: var(--mtst-muted); font-size: 13px; } .mtst-help--over { color: var(--mtst-error); } .mtst-badge { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--mtst-muted); background: var(--mtst-surface-alt); border: 1px solid var(--mtst-border); border-radius: 999px; padding: 1px 8px; margin-left: 6px; } /* Star radios, laid out reversed so CSS can light up "this one and every star before it" with a sibling selector and no JavaScript at all. */ .mtst-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; } .mtst-stars__radio { position: absolute; opacity: 0; width: 1px; height: 1px; } .mtst-stars__label { cursor: pointer; font-size: 30px; line-height: 1; color: var(--mtst-star-off); margin: 0; text-align: start; } .mtst-stars__label:hover, .mtst-stars__label:hover ~ .mtst-stars__label, .mtst-stars__radio:checked ~ .mtst-stars__label { color: var(--mtst-star); } .mtst-stars__radio:focus-visible + .mtst-stars__label { outline: 2px solid var(--mtst-accent); outline-offset: 2px; } .mtst-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; text-align: start; } .mtst-check input { margin-top: 4px; flex: 0 0 auto; } .mtst-form__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; } .mtst-recaptcha-note { margin-top: 14px; } /* Honeypot: out of sight for people, still filled in by bots. Not display:none - some bots skip anything hidden that way. */ .mtst-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ----------------------------------------------------------------- alerts */ .mtst-alert { border-radius: var(--mtst-radius); padding: 20px; margin-bottom: 24px; border: 1px solid var(--mtst-border); background: var(--mtst-surface-alt); } .mtst-alert h2 { margin: 0 0 8px; font-size: 20px; } .mtst-alert p:last-child { margin-bottom: 0; } .mtst-alert--success { border-color: var(--mtst-ok); } .mtst-alert--error { border-color: var(--mtst-error); } .mtst-alert--error ul { margin: 8px 0 0; padding-left: 20px; } .mtst-note { color: var(--mtst-muted); } /* ---------------------------------------------------------------- buttons */ .mtst-btn { display: inline-block; padding: 10px 18px; border-radius: 8px; border: 1px solid transparent; text-decoration: none; cursor: pointer; /* font shorthand first: it resets font-weight, so weight has to follow it. */ font: inherit; font-weight: 600; } .mtst-btn--primary { background: var(--mtst-accent); border-color: var(--mtst-accent); color: var(--mtst-accent-text); } .mtst-btn--primary:hover, .mtst-btn--primary:focus { filter: brightness(1.08); color: var(--mtst-accent-text); } .mtst-btn--ghost { background: transparent; border-color: var(--mtst-border); color: var(--mtst-text); } .mtst-link { color: var(--mtst-accent); text-decoration: underline; } .mtst-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { .mtst-strip { scroll-behavior: auto; } }