/* * Tool rating chip — visible "★ 4.7 · 47 ratings" pill. * * Used by views/partials/_tool-rating-chip.ejs. Two sizes: * .rw-tool-rating--sm for tool-card grids on the marketplace * .rw-tool-rating--md for tool-page heroes * * Theme-aware via --rw-* tokens. No transitions on the chip itself * (it's a static informational badge, not interactive). */ .rw-tool-rating { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--rw-text, #0a0a0a); font-family: 'Inter Tight', Inter, sans-serif; font-weight: 600; line-height: 1.2; white-space: nowrap; vertical-align: baseline; } .rw-tool-rating-star { flex-shrink: 0; fill: #f59e0b; stroke: none; /* Slight optical bump so the star sits centred against the text baseline (SVG paths sit a touch high vs. text x-height). */ transform: translateY(0.05em); } .rw-tool-rating-value { font-weight: 700; color: var(--rw-text, #0a0a0a); } .rw-tool-rating-count { color: var(--rw-text-muted, var(--rw-muted, #6b6b6b)); font-weight: 500; } /* Small — for crowded tool-card grids on /tools marketplace */ .rw-tool-rating--sm { font-size: 0.8rem; } .rw-tool-rating--sm .rw-tool-rating-star { width: 0.95rem; height: 0.95rem; } /* Medium — for tool landing-page heroes */ .rw-tool-rating--md { font-size: 0.92rem; } .rw-tool-rating--md .rw-tool-rating-star { width: 1.1rem; height: 1.1rem; } /* Dark mode tweak: keep the star amber (universal "rated" cue) but lighten the text + muted sibling for legibility on dark surfaces. .dark is set on by the existing theme toggle. */ .dark .rw-tool-rating, .dark .rw-tool-rating-value { color: #e5e7eb; } .dark .rw-tool-rating-count { color: #9ca3af; } /* ─── Public testimonials section ──────────────────────────────── * * Used by views/partials/_tool-testimonials.ejs. Embedded on each * tool landing page once approved comments accrue. Theme-aware via * --rw-* tokens. Mobile-first single column; 2-up at ≥720px; 3-up * at ≥1024px so the section never feels too sparse on wide displays. */ .rw-testimonials { padding: clamp(2.5rem, 5vw, 4rem) 0; } .rw-testimonials-head { text-align: center; margin: 0 auto clamp(1.5rem, 3vw, 2.25rem); max-width: 38rem; } .rw-testimonials-title { font-family: 'Inter Tight', Inter, sans-serif; font-weight: 800; font-size: clamp(1.5rem, 3.2vw, 2.25rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--rw-text, #0a0a0a); margin: 0 0 0.6rem; } .dark .rw-testimonials-title { color: #e5e7eb; } .rw-testimonials-summary { margin: 0; display: inline-flex; align-items: center; } /* Flexbox (not grid) so the layout adapts gracefully to ANY count: 1 card sits centred at its natural width instead of being trapped in column 1 of 3; 2 cards sit side-by-side; 3+ wrap normally. */ .rw-testimonials-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; } .rw-testimonials-list > .rw-testimonials-card { /* Don't grow past the ideal width when there are few cards; can shrink on narrow screens; ideal flex-basis ~22rem makes each card ~352px wide at desktop, comfortably 3-up at >1100px. */ flex: 0 1 22rem; min-width: 0; } @media (max-width: 480px) { .rw-testimonials-list > .rw-testimonials-card { flex-basis: 100%; } } .rw-testimonials-card { display: flex; flex-direction: column; gap: 0.85rem; padding: 1.25rem 1.4rem; background-color: var(--rw-card-bg, #ffffff); border: 1px solid var(--rw-border, #e5e5e0); border-radius: 0.85rem; box-shadow: var(--rw-shadow-sm, 0 1px 3px rgba(0,0,0,0.06)); transition: transform 0.18s ease, box-shadow 0.18s ease; } .dark .rw-testimonials-card { background-color: #1f2937; border-color: #374151; } .rw-testimonials-card:hover { transform: translateY(-2px); box-shadow: var(--rw-shadow-md, 0 4px 12px rgba(0,0,0,0.08)); } .rw-testimonials-card-stars { display: inline-flex; gap: 0.15rem; } .rw-testimonials-star { width: 0.95rem; height: 0.95rem; fill: #e5e7eb; } .rw-testimonials-star--on { fill: #f59e0b; } .dark .rw-testimonials-star { fill: #4b5563; } .rw-testimonials-card-quote { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--rw-text, #0a0a0a); /* Preserve user-entered line breaks while still allowing wrapping. */ white-space: pre-wrap; word-break: break-word; flex: 1; } .dark .rw-testimonials-card-quote { color: #e5e7eb; } .rw-testimonials-card-meta { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--rw-text-muted, #6b6b6b); border-top: 1px solid var(--rw-border, #e5e5e0); padding-top: 0.85rem; } .dark .rw-testimonials-card-meta { color: #9ca3af; border-top-color: #374151; } .rw-testimonials-card-author { font-weight: 600; color: var(--rw-text, #0a0a0a); } .dark .rw-testimonials-card-author { color: #e5e7eb; } @media (prefers-reduced-motion: reduce) { .rw-testimonials-card { transition: none; } .rw-testimonials-card:hover { transform: none; } }