/* Customer Reviews for WooCommerce — front-end UI */ :root { --crw-primary: #4f46e5; --crw-primary-dark: #4338ca; --crw-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); --crw-star: #f59e0b; --crw-border: #e9e9f2; --crw-text-muted: #6b7280; --crw-shadow-soft: 0 2px 10px rgba(17, 24, 39, 0.05); --crw-shadow-lift: 0 16px 32px rgba(17, 24, 39, 0.1); --crw-widget-radius: 16px; /* Surface/text tokens — used throughout for card backgrounds and body text so a single dark-mode block (below) can retheme every widget at once. Light-mode values match the plugin's original hardcoded colors. */ --crw-surface: #ffffff; --crw-surface-alt: #f9fafb; --crw-surface-hover: #f3f4f6; --crw-track: #e5e7eb; --crw-text: #111827; --crw-text-secondary: #374151; box-sizing: border-box; } /* * Dark mode support. * * Themes implement dark mode in wildly different ways — some just honour the * OS-level `prefers-color-scheme`, others toggle a class or data-attribute on * or via JS, and there's no reliable way to "detect" a theme's * dark mode from CSS alone. The --crw-surface/--crw-text/etc. tokens above * are what every widget/review/Q&A rule below is built from; the actual dark * palette is generated in PHP (CRW_Widgets::enqueue_assets()) based on the * Settings → General → "Dark mode support" option, and injected as either a * `prefers-color-scheme: dark` media query and/or rules scoped to whatever * selector(s) the site's theme uses to toggle dark mode (a bundled list of * common ones, plus any custom selector the site owner enters). */ /* Toast notifications (review submitted, question posted, etc.) */ .crw-toast-container { position: fixed; z-index: 100001; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; } .crw-toast { pointer-events: auto; cursor: pointer; max-width: min(90vw, 420px); padding: 14px 20px; border-radius: 12px; font-size: 14px; font-weight: 600; color: #fff; box-shadow: 0 12px 28px -8px rgba(17, 24, 39, 0.35); opacity: 0; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease; } .crw-toast.is-visible { opacity: 1; transform: translateY(0); } .crw-toast-success { background: #111827; } .crw-toast-success::before { content: "✓ "; } .crw-toast-error { background: #dc2626; } .crw-toast-error::before { content: "! "; } @media ( max-width: 600px ) { .crw-toast-container { left: 16px; right: 16px; transform: none; bottom: 16px; } .crw-toast { max-width: none; } } /* Widget theme: Minimal — flat, monochrome, no gradients or soft shadows. */ body.crw-widget-theme-minimal { --crw-primary: #111827; --crw-primary-dark: #000000; --crw-gradient: #111827; --crw-star: #111827; --crw-shadow-soft: none; --crw-shadow-lift: none; --crw-widget-radius: 8px; } /* Widget theme: Bold — vivid gradient, larger radius, deeper shadow, bolder type. */ body.crw-widget-theme-bold { --crw-primary: #db2777; --crw-primary-dark: #be185d; --crw-gradient: linear-gradient(135deg, #db2777 0%, #7c3aed 60%, #4f46e5 100%); --crw-star: #f59e0b; --crw-shadow-soft: 0 6px 18px rgba(219, 39, 119, 0.12); --crw-shadow-lift: 0 20px 40px rgba(124, 58, 237, 0.22); --crw-widget-radius: 24px; } body.crw-widget-theme-bold .crw-review, body.crw-widget-theme-bold .crw-carousel-card, body.crw-widget-theme-bold .crw-summary, body.crw-widget-theme-bold .crw-widget-preview-card, body.crw-widget-theme-bold .crw-trust-badge { font-weight: 600; } .crw-reviews-layout { display: flex; align-items: flex-start; gap: 40px; max-width: 1100px; margin: 0 auto; } .crw-reviews-sidebar { flex: 0 0 280px; position: sticky; top: var(--crw-sticky-offset, 32px); } .crw-reviews-main { flex: 1; min-width: 0; } .crw-reviews-app { max-width: 100%; } .crw-summary { display: flex; flex-direction: column; align-items: stretch; gap: 20px; max-width: 100%; padding: 26px 28px; border: 1px solid var(--crw-border); border-radius: var(--crw-widget-radius); margin-bottom: 0; background: var(--crw-summary-bg, linear-gradient(180deg, #fbfbff 0%, #f7f7fc 100%)); box-shadow: var(--crw-shadow-soft); } .crw-summary-score { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 140px; } a.crw-leave-review-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 12px 20px; border: none; border-radius: 999px; background: var(--crw-leave-review-bg, var(--crw-gradient)) !important; color: var(--crw-leave-review-text, #fff) !important; font-size: 14px; font-weight: 700; text-decoration: none; box-sizing: border-box; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } a.crw-leave-review-btn:hover, a.crw-leave-review-btn:focus, a.crw-leave-review-btn:visited { color: var(--crw-leave-review-text, #fff) !important; } a.crw-leave-review-btn:hover { transform: translateY(-1px); box-shadow: var(--crw-shadow-lift); } /* Below the sidebar breakpoint, drop back to a single stacked column and disable the sticky positioning so the score block doesn't overlap content. */ @media (max-width: 782px) { .crw-reviews-layout { flex-direction: column; } .crw-reviews-sidebar { position: static; width: 100%; flex-basis: auto; } } .crw-summary-average { font-size: 40px; font-weight: 800; line-height: 1; color: var(--crw-text, #111827); } .crw-summary-count { font-size: 13px; color: var(--crw-text-muted); } .crw-summary-bars { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; } .crw-summary-bar-row { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; gap: 10px; background: none; border: none; color: var(--crw-text, #111827); cursor: pointer; padding: 2px 0; font-size: 13px; opacity: 1; transition: opacity 0.15s ease; } /* When a star row is selected as the active filter, fade the rest out a bit so the selection reads clearly at a glance; clearing the filter (handled in JS by removing both classes from every row) brings everything back to full opacity. */ .crw-summary-bar-row.is-dimmed { opacity: 0.45; } .crw-summary-bar-row.is-selected { opacity: 1; } .crw-bar-track { height: 8px; background: var(--crw-track, #e5e7eb); border-radius: 999px; overflow: hidden; } .crw-bar-fill { display: block; height: 100%; background: var(--crw-star); border-radius: 999px; } .crw-bar-count { text-align: right; color: var(--crw-text-muted); } /* Star display (read-only) */ .crw-stars { display: inline-flex; gap: 2px; } .crw-star-display { position: relative; width: 16px; height: 16px; background: var(--crw-track, #e5e7eb); -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; } .crw-star-fill { position: absolute; inset: 0; background: var(--crw-star); } /* Star input (clickable) */ .crw-star-input { display: inline-flex; gap: 4px; } .crw-star-input .crw-star { background: none; border: none; cursor: pointer; padding: 2px; width: 28px; height: 28px; transition: transform 0.15s ease; } .crw-star-input .crw-star:hover { transform: scale(1.15); } .crw-star-input .crw-star.is-hover { transform: scale(1.15); } .crw-star-input-sm .crw-star { width: 20px; height: 20px; } .crw-star-input .crw-star svg { width: 100%; height: 100%; fill: #d1d5db; transition: fill 0.15s ease; } .crw-star-input .crw-star.is-active svg, .crw-star-input .crw-star.is-hover svg { fill: var(--crw-star); } /* Toolbar */ .crw-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; } .crw-toolbar-filters { display: flex; gap: 8px; flex-wrap: wrap; } .crw-chip { border: 1px solid var(--crw-border); background: var(--crw-surface, #fff); color: var(--crw-text, #111827); border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .crw-chip:hover { border-color: var(--crw-primary); color: var(--crw-primary-dark); } .crw-chip.is-active { background: var(--crw-gradient); border-color: transparent; color: #fff; } .crw-toolbar-sort select { border-radius: 999px; border-color: var(--crw-border); } .crw-toolbar-sort { display: flex; align-items: center; gap: 8px; } .crw-select { position: relative; } /* Visually hidden once the JS enhancement runs, but still present/functional as the single source of truth for the current value (screen readers + no-JS fallback both still see a plain, working