/*!
 * SmartParallax Styles v1.0.0
 * (c) 2025 SmartParallax — https://smartparallax.com/
 * Licensed under GPL-2.0-or-later
 */
.sv { font-family: inherit; } .sv-item { white-space: nowrap; } .sv-score--good, .sv-lcp--good, .sv-cls--good, .sv-inp--good { color: #1e8e3e; } .sv-score--ok, .sv-lcp--ok, .sv-cls--ok, .sv-inp--ok { color: #f9ab00; } .sv-score--bad, .sv-lcp--bad, .sv-cls--bad, .sv-inp--bad { color: #d93025; } .sv.sv-design-1 { display: grid; grid-template-columns: 140px 1fr; gap: 1rem 1rem; padding: 1rem 1rem; background: #fff; border: 1px solid #e0e0e0; border-radius: 16px; width: 100%; } .sv.sv-design-1 .sv-score { grid-row: span 3; width: 140px; height: 140px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 2.6rem; font-weight: 700; background: #f8f9fa; box-sizing: border-box; position: relative; } .sv.sv-design-1 .sv-score::after { content: "Performance"; font-size: 0.75rem; color: #555; margin-top: 2px; } .sv.sv-design-1 .sv-score.sv-device--mobile::before, .sv.sv-design-1 .sv-score.sv-device--desktop::before { display: block; font-size: 0.65rem; font-weight: 600; color: #888; margin-top: 2px; } .sv.sv-design-1 .sv-score.sv-device--mobile::before { content: "Mobile"; } .sv.sv-design-1 .sv-score.sv-device--desktop::before { content: "Desktop"; } .sv.sv-design-1 .sv-lcp::before { content: "Largest Contentful Paint"; } .sv.sv-design-1 .sv-cls::before { content: "Cumulative Layout Shift"; } .sv.sv-design-1 .sv-inp::before { content: "Interaction to Next Paint"; } .sv.sv-design-1 .sv-lcp, .sv.sv-design-1 .sv-cls, .sv.sv-design-1 .sv-inp { display: flex; flex-direction: column; font-weight: 600; } .sv.sv-design-1 .sv-lcp::before, .sv.sv-design-1 .sv-cls::before, .sv.sv-design-1 .sv-inp::before { font-size: 0.75rem; color: #666; } .sv.sv-design-1 .sv-timestamp { grid-column: span 2; text-align: right; font-size: 0.75rem; color: #777; } .sv.sv-design-2 { display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.4rem 0.6rem; background: #f8f9fa; border-radius: 8px; font-size: 0.9rem; } .sv.sv-design-2 .sv-item::before { font-weight: 500; color: #555; margin-right: 0.25rem; } .sv.sv-design-2 .sv-score::before { content: "Score:"; } .sv.sv-design-2 .sv-lcp::before { content: "LCP:"; } .sv.sv-design-2 .sv-cls::before { content: "CLS:"; } .sv.sv-design-2 .sv-inp::before { content: "INP:"; } .sv.sv-design-2 .sv-timestamp { font-size: 0.75rem; color: #666; } .sv.sv-design-3 { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; } .sv.sv-design-3 .sv-score { font-weight: 600; } .sv.sv-design-3 .sv-lcp, .sv.sv-design-3 .sv-cls, .sv.sv-design-3 .sv-inp { opacity: 0.75; } .sv.sv-design-3 .sv-timestamp { font-size: 0.7rem; color: #888; }