/** * Trustie - Standalone Styles * * All --tracksies-* CSS variables are defined by Brand Hub inline in . * This file ONLY defines backwards-compatible aliases for themes that * may have used the old --trustie-* variable names. * * DO NOT define --tracksies-* variables here - they will override Brand Hub! * * @package Trustie */ /* ========================================================================== Backwards-Compatible Aliases Themes using old --trustie-* names will still work by mapping to the --tracksies-* variables defined by Brand Hub. ========================================================================== */ :root { /* Backwards-compatible aliases with fallbacks for standalone use */ --trustie-rating-star-color: var(--tracksies-rating-star-color, #FFB800); --trustie-rating-star-empty: var(--tracksies-rating-star-empty, #E0E0E0); --trustie-rating-star-size: var(--tracksies-rating-star-size, 18px); --trustie-color-primary: var(--tracksies-color-primary, #3b82f6); --trustie-color-text: var(--tracksies-color-text, #1f2937); --trustie-color-text-light: var(--tracksies-color-text-light, #6b7280); --trustie-color-border: var(--tracksies-color-border, #e5e7eb); --trustie-color-background: var(--tracksies-color-background, #ffffff); --trustie-color-surface: var(--tracksies-color-surface, #f9fafb); --trustie-color-success: var(--tracksies-color-success, #10b981); --trustie-color-error: var(--tracksies-color-error, #ef4444); --trustie-font-body: var(--tracksies-font-body, inherit); --trustie-font-size-small: var(--tracksies-font-size-small, 13px); --trustie-font-size-base: var(--tracksies-font-size-base, 15px); --trustie-radius-small: var(--tracksies-radius-small, 4px); --trustie-radius-medium: var(--tracksies-radius-medium, 8px); --trustie-shadow-card: var(--tracksies-shadow-card, none); --trustie-shadow-card-hover: var(--tracksies-shadow-card-hover, 0 4px 12px rgba(0,0,0,0.08)); --trustie-transition-fast: var(--tracksies-transition-fast, 0.15s ease); --trustie-transition-normal: var(--tracksies-transition-normal, 0.25s ease); --trustie-hover-lift: var(--tracksies-hover-lift, translateY(-2px)); } /* ========================================================================== Rating Display ========================================================================== */ .trustie-rating { display: inline-flex; align-items: center; gap: 4px; } .trustie-rating-link { text-decoration: none; } .trustie-rating-link:hover .trustie-rating-stars { opacity: 0.8; } .trustie-rating-stars { display: inline-flex; line-height: 1; font-size: var(--trustie-rating-star-size); } .trustie-star { display: inline-block; } .trustie-star--full, .trustie-star--half { color: var(--trustie-rating-star-color); } .trustie-star--empty { color: var(--trustie-rating-star-empty); } /* FontAwesome icon alignment */ .trustie-star.fa-solid, .trustie-star.fa-regular { font-style: normal; } .trustie-rating-count, .trustie-rating-value { margin-left: 5px; color: var(--trustie-color-text-light); font-size: var(--trustie-font-size-small); } /* ========================================================================== Rating Badge (Compact) ========================================================================== */ .trustie-rating-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--trustie-color-surface); border: 1px solid var(--trustie-color-border); border-radius: var(--trustie-radius-small); font-size: var(--trustie-font-size-small); } .trustie-rating-badge .badge-rating { font-weight: 600; color: var(--trustie-color-text); } .trustie-rating-badge .badge-count { color: var(--trustie-color-text-light); } /* ========================================================================== Review Summary ========================================================================== */ .trustie-review-summary { display: flex; flex-wrap: wrap; gap: 20px; padding: 24px; background: var(--trustie-color-background); border: 1px solid var(--trustie-color-border); border-radius: var(--trustie-radius-medium); margin-bottom: 30px; } .trustie-review-summary .summary-rating { font-size: 48px; font-weight: 700; line-height: 1; color: var(--trustie-color-text); } .trustie-review-summary .summary-rating .summary-max { font-size: 20px; font-weight: 400; color: var(--trustie-color-text-light); } .trustie-review-summary .summary-stars { align-self: center; font-size: 20px; } .trustie-review-summary .summary-count { width: 100%; color: var(--trustie-color-text-light); font-size: var(--trustie-font-size-base); } .trustie-review-summary .summary-breakdown { width: 100%; max-width: 300px; } .trustie-review-summary .breakdown-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .trustie-review-summary .breakdown-label { width: 50px; font-size: var(--trustie-font-size-small); text-align: right; color: var(--trustie-color-text-light); display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; } .trustie-review-summary .breakdown-label i { color: var(--trustie-rating-star-color); font-size: 12px; } .trustie-review-summary .breakdown-bar { flex: 1; height: 8px; background: var(--tracksies-rating-star-empty, #E0E0E0); border-radius: 4px; overflow: hidden; } .trustie-review-summary .breakdown-fill { height: 100%; background: var(--trustie-rating-star-color); border-radius: 4px; transition: width 0.3s ease; } .trustie-review-summary .breakdown-count { width: 35px; font-size: 12px; color: var(--trustie-color-text-light); } /* ========================================================================== Reviews Section (Product Page Container) ========================================================================== */ .trustie-reviews-section { padding: 30px 0; font-family: var(--trustie-font-body, inherit); } .trustie-reviews-section h2, .trustie-reviews-section h3 { color: var(--trustie-color-text, #333); margin-bottom: 20px; } /* No reviews message */ .trustie-no-reviews { padding: 40px 20px; text-align: center; color: var(--trustie-color-text-light, #666); background: var(--trustie-color-background, #f9fafb); border-radius: var(--trustie-radius-medium, 8px); font-size: var(--trustie-font-size-base, 15px); } /* ========================================================================== Reviews List ========================================================================== */ .trustie-reviews-list { margin-bottom: 30px; } .trustie-review { padding: 20px; border-bottom: 1px solid var(--trustie-color-border); } .trustie-review:last-child { border-bottom: none; } .trustie-review .review-header { display: flex; gap: 15px; margin-bottom: 12px; } .trustie-review .review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .trustie-review .review-author { font-weight: 600; color: var(--trustie-color-text); font-size: var(--trustie-font-size-base); } .trustie-review .review-verified { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--tracksies-color-review-verified, var(--tracksies-color-primary, #28a745)); font-weight: 500; background: color-mix(in srgb, var(--tracksies-color-review-verified, var(--tracksies-color-primary, #28a745)) 10%, transparent); padding: 2px 8px; border-radius: var(--trustie-radius-small); } .trustie-review .review-date { font-size: var(--trustie-font-size-small); color: var(--trustie-color-text-light); } .trustie-review .review-rating { margin-bottom: 10px; font-size: var(--trustie-rating-star-size); } .trustie-review .review-product { margin-bottom: 12px; } .trustie-review .review-product a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--trustie-color-text); font-size: var(--trustie-font-size-small); padding: 10px; background: var(--trustie-color-background); border-radius: var(--trustie-radius-small); transition: background 0.2s ease; } .trustie-review .review-product a:hover { background: var(--trustie-color-border); } .trustie-review .review-product img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--trustie-radius-small); } .trustie-review .review-content { line-height: 1.6; color: var(--trustie-color-text); font-size: var(--trustie-font-size-base); } .trustie-review .review-content p:last-child { margin-bottom: 0; } /* ========================================================================== No Reviews ========================================================================== */ .trustie-no-reviews { text-align: center; padding: 40px 20px; color: var(--trustie-color-text-light); font-size: var(--trustie-font-size-base); background: var(--trustie-color-background); border-radius: var(--trustie-radius-medium); } /* ========================================================================== All Reviews Grid ========================================================================== */ .trustie-all-reviews { display: grid; gap: 20px; } .trustie-all-reviews.trustie-columns-1 { grid-template-columns: 1fr; } .trustie-all-reviews.trustie-columns-2 { grid-template-columns: repeat(2, 1fr); } .trustie-all-reviews.trustie-columns-3 { grid-template-columns: repeat(3, 1fr); } .trustie-all-reviews.trustie-columns-4 { grid-template-columns: repeat(4, 1fr); } .trustie-all-reviews .trustie-review { background: var(--trustie-color-surface); border: 1px solid var(--trustie-color-border); border-radius: var(--trustie-radius-medium); padding: 20px; box-shadow: var(--trustie-shadow-card, none); transition: box-shadow var(--trustie-transition-fast, 0s), transform var(--trustie-transition-fast, 0s); } .trustie-all-reviews .trustie-review:hover { box-shadow: var(--trustie-shadow-card-hover, none); transform: var(--trustie-hover-lift, none); } /* ========================================================================== Review Form ========================================================================== */ .trustie-review-form { margin-top: 30px; padding-top: 24px; } .trustie-review-form h3 { margin-top: 0; margin-bottom: 20px; color: var(--trustie-color-text); } .trustie-review-form__field { margin-bottom: 20px; } .trustie-review-form__field label { display: block; margin-bottom: 6px; font-weight: 500; color: var(--trustie-color-text); font-size: var(--trustie-font-size-base); } .trustie-review-form__field label .required { color: var(--trustie-color-error); } .trustie-review-form__field input[type="text"], .trustie-review-form__field input[type="email"], .trustie-review-form__field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--trustie-color-border); border-radius: var(--trustie-radius-small); font-size: var(--trustie-font-size-base); color: var(--trustie-color-text); background: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .trustie-review-form__field input:focus, .trustie-review-form__field textarea:focus { outline: none; border-color: var(--tracksies-color-primary, var(--trustie-color-primary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tracksies-color-primary, #0073aa) 15%, transparent); } .trustie-review-form__field textarea { min-height: 120px; resize: vertical; } .trustie-review-form__logged-in { margin-bottom: 20px; padding: 12px 16px; background: var(--trustie-color-background); border-radius: var(--trustie-radius-small); font-size: var(--trustie-font-size-small); color: var(--trustie-color-text); } .trustie-review-form__logged-in a { color: var(--trustie-color-primary); } /* Star Rating Input */ .trustie-star-rating { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; } .trustie-star-rating input[type="radio"] { display: none; } .trustie-star-rating label { font-size: 28px; color: var(--trustie-rating-star-empty); cursor: pointer; transition: color 0.15s ease; margin: 0 !important; line-height: 1; } .trustie-star-rating label i { font-style: normal; } .trustie-star-rating label:hover, .trustie-star-rating label:hover ~ label, .trustie-star-rating input:checked ~ label { color: var(--trustie-rating-star-color); } /* Submit Button */ .trustie-review-form__submit { margin-top: 24px; } .trustie-review-form__button { display: inline-block; padding: 14px 28px; border: none; border-radius: var(--trustie-radius-small, var(--tracksies-radius-small, 4px)); font-size: var(--trustie-font-size-base, 14px); font-weight: 600; background-color: var(--tracksies-color-primary, #0073aa); color: var(--tracksies-button-primary-text, #fff); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .trustie-review-form__button:hover { background-color: var(--tracksies-color-secondary, #005d8c); color: var(--tracksies-button-secondary-text, #fff); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 992px) { .trustie-all-reviews.trustie-columns-3, .trustie-all-reviews.trustie-columns-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .trustie-all-reviews.trustie-columns-2, .trustie-all-reviews.trustie-columns-3, .trustie-all-reviews.trustie-columns-4 { grid-template-columns: 1fr; } .trustie-review-summary { flex-direction: column; text-align: center; } .trustie-review-summary .summary-breakdown { max-width: 100%; } .trustie-review .review-header { flex-direction: column; align-items: flex-start; } } /* ========================================================================== Layout: Masonry ========================================================================== */ .trustie-layout-masonry.trustie-all-reviews, .trustie-layout-masonry.tracksies-reviews-grid { display: block; column-gap: 20px; } .trustie-layout-masonry .trustie-review, .trustie-layout-masonry .trustie-review-card { break-inside: avoid; margin-bottom: 20px; } /* Masonry respects column count */ .trustie-layout-masonry.trustie-columns-1 { columns: 1; } .trustie-layout-masonry.trustie-columns-2 { columns: 2; } .trustie-layout-masonry.trustie-columns-3 { columns: 3; } .trustie-layout-masonry.trustie-columns-4 { columns: 4; } /* Masonry responsive - reduce columns on smaller screens */ @media (max-width: 1024px) { .trustie-layout-masonry.trustie-columns-4 { columns: 3; } } @media (max-width: 768px) { .trustie-layout-masonry.trustie-columns-3, .trustie-layout-masonry.trustie-columns-4 { columns: 2; } } @media (max-width: 480px) { .trustie-layout-masonry.trustie-columns-2, .trustie-layout-masonry.trustie-columns-3, .trustie-layout-masonry.trustie-columns-4 { columns: 1; } } /* ========================================================================== Reduced Motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { .trustie-all-reviews .trustie-review, .trustie-review-summary .breakdown-fill, .trustie-star-rating label { transition: none; } } /* ========================================================================== Reviews Page Shortcode ========================================================================== */ .trustie-reviews-page { max-width: 1200px; margin: 0 auto; padding: 20px 0; } .trustie-reviews-page__summary { text-align: center; padding: 30px; background: var(--trustie-color-surface, #fff); border: 1px solid var(--trustie-color-border, #e0e0e0); border-radius: var(--trustie-radius-medium, 8px); margin-bottom: 30px; } .trustie-reviews-page__score { margin-bottom: 10px; } .trustie-reviews-page__average { font-size: 48px; font-weight: 700; color: var(--trustie-color-text, #333); line-height: 1; } .trustie-reviews-page__max { font-size: 24px; color: var(--trustie-color-text-light, #666); } .trustie-reviews-page__stars { margin-bottom: 10px; } .trustie-reviews-page__count { font-size: 14px; color: var(--trustie-color-text-light, #666); } .trustie-reviews-page__list { display: grid; gap: 20px; } .trustie-reviews-page__list.trustie-columns-1 { grid-template-columns: 1fr; } .trustie-reviews-page__list.trustie-columns-2 { grid-template-columns: repeat(2, 1fr); } .trustie-reviews-page__list.trustie-columns-3 { grid-template-columns: repeat(3, 1fr); } .trustie-reviews-page__list.trustie-columns-4 { grid-template-columns: repeat(4, 1fr); } .trustie-reviews-page__empty { text-align: center; padding: 40px; color: var(--trustie-color-text-light, #666); } .trustie-reviews-page__pagination { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 30px; padding: 20px 0; } .trustie-reviews-page__prev, .trustie-reviews-page__next { display: inline-block; padding: 10px 20px; background: var(--trustie-color-primary); color: #fff; text-decoration: none; border-radius: var(--trustie-radius-small, 4px); font-weight: 500; transition: background 0.2s ease; } .trustie-reviews-page__prev:hover, .trustie-reviews-page__next:hover { background-color: var(--tracksies-color-secondary, #005d8c); color: #fff; } .trustie-reviews-page__page-info { color: var(--trustie-color-text-light, #666); font-size: 14px; } @media (max-width: 768px) { .trustie-reviews-page__list.trustie-columns-2, .trustie-reviews-page__list.trustie-columns-3, .trustie-reviews-page__list.trustie-columns-4 { grid-template-columns: 1fr; } } /* ========================================================================== Floating Reviews Widget ========================================================================== */ .trustie-widget { position: fixed; z-index: 99999; font-family: var(--trustie-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif); } /* Right position - tab centered, panel full height */ .trustie-widget--right { right: 0; top: 0; bottom: 0; } /* Tab Button */ .trustie-widget__tab { position: absolute; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; text-orientation: mixed; padding: 16px 10px; background: var(--tracksies-widget-header-bg, var(--tracksies-color-primary, var(--trustie-color-primary))); color: var(--tracksies-widget-header-text, #fff); border: none; border-radius: var(--tracksies-radius-medium, 8px) 0 0 var(--tracksies-radius-medium, 8px); cursor: pointer; font-size: 14px; font-weight: 600; transition: background 0.2s ease, opacity 0.3s ease; white-space: nowrap; z-index: 99999; } /* No hover color change - keep consistent appearance */ .trustie-widget.is-open .trustie-widget__tab { right: 400px; } .trustie-widget__tab-icon { font-size: 14px; } .trustie-widget__tab-icon i { color: inherit; } /* Panel */ .trustie-widget__panel { position: fixed; right: -400px; top: 0; bottom: 0; width: 400px; max-width: 100vw; height: 100vh; height: 100dvh; background: var(--trustie-color-surface, #fff); box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; overflow: hidden; transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 99998; } .trustie-widget.is-open .trustie-widget__panel { right: 0; } /* Header */ .trustie-widget__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--tracksies-widget-header-bg, var(--tracksies-color-primary, var(--trustie-color-primary))); color: var(--tracksies-widget-header-text, #fff); } .trustie-widget__title { margin: 0; font-size: 16px; font-weight: 500; font-family: var(--tracksies-font-body, inherit); color: var(--tracksies-widget-header-text, #fff); } .trustie-widget__close { background: none; border: none; padding: 4px; cursor: pointer; color: var(--tracksies-widget-header-text, #fff); font-size: 18px; line-height: 1; opacity: 0.8; } .trustie-widget__close:hover { opacity: 1; } /* Summary */ .trustie-widget__summary { padding: 16px 20px; border-bottom: 1px solid var(--trustie-color-border, #e0e0e0); background: var(--trustie-color-background, #f9f9f9); } .trustie-widget__rating { display: flex; align-items: center; gap: 10px; } .trustie-widget__rating-value { font-size: 28px; font-weight: 700; color: var(--trustie-color-text, #333); line-height: 1; } .trustie-widget__rating-stars { font-size: 16px; } .trustie-widget__rating-count { color: var(--trustie-color-text-light, #666); font-size: 13px; } /* Content */ .trustie-widget__content { flex: 1; overflow-y: auto; padding: 0; } /* Individual Review */ .trustie-widget__review { padding: 16px 20px; border-bottom: 1px solid var(--trustie-color-border, #e0e0e0); } .trustie-widget__review:last-child { border-bottom: none; } .trustie-widget__review-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .trustie-widget__review-stars { font-size: 12px; } .trustie-widget__review-verified { color: var(--tracksies-color-review-verified, var(--tracksies-color-primary, #28a745)); font-size: 12px; } .trustie-widget__review-content { font-size: 13px; line-height: 1.5; color: var(--trustie-color-text, #333); margin-bottom: 8px; } .trustie-widget__review-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; } .trustie-widget__review-author { font-weight: 600; color: var(--trustie-color-text, #333); } .trustie-widget__review-product { color: var(--trustie-color-primary); text-decoration: none; } .trustie-widget__review-product:hover { text-decoration: underline; } /* Empty state */ .trustie-widget__empty { padding: 40px 20px; text-align: center; color: var(--trustie-color-text-light, #666); font-size: 14px; } /* Footer */ .trustie-widget__footer { padding: 16px 20px; border-top: 1px solid var(--trustie-color-border, #e0e0e0); background: var(--trustie-color-background, #f9f9f9); } /* CTA styles defined in trustie.css */ /* Responsive */ @media (max-width: 480px) { .trustie-widget__panel { width: 100vw; max-width: 100vw; right: -100vw; } .trustie-widget.is-open .trustie-widget__panel { right: 0; } .trustie-widget.is-open .trustie-widget__tab { display: none; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .trustie-widget__panel { transition: none; } }