Chart fix for Lucrum Vitality Shopify site
Created
August 19, 2025 19:51
-
-
Save deadflowers/427bf515f2141d83621d41941364780b to your computer and use it in GitHub Desktop.
lucrum-chart-element.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| .lucrum-chart-wrapper { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 20px; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| } | |
| .lucrum-chart-container { | |
| background: white; | |
| border-radius: 20px; | |
| padding: 25px 30px 30px 30px; | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); | |
| width: 500px; | |
| max-width: 95vw; | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| box-sizing: border-box; | |
| } | |
| .lucrum-chart-title { | |
| text-align: center; | |
| margin-bottom: 20px; | |
| } | |
| .lucrum-chart-title h2 { | |
| font-size: 22px; | |
| font-weight: 700; | |
| color: #1e293b; | |
| margin: 0 0 4px 0; | |
| } | |
| .lucrum-chart-title p { | |
| font-size: 13px; | |
| color: #64748b; | |
| margin: 0; | |
| } | |
| .lucrum-bar-row { | |
| margin-bottom: 30px; | |
| } | |
| .lucrum-bar-label { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 8px; | |
| } | |
| .lucrum-supplement-icon { | |
| width: 22px; | |
| height: 22px; | |
| border-radius: 50%; | |
| margin-right: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: white; | |
| } | |
| .lucrum-typical-icon { | |
| background: #94a3b8; | |
| } | |
| .lucrum-lucrum-icon { | |
| background: linear-gradient(135deg, #2563eb, #1d4ed8); | |
| box-shadow: 0 0 12px rgba(37, 99, 235, 0.3); | |
| } | |
| .lucrum-bar-title { | |
| font-size: 15px; | |
| font-weight: 600; | |
| color: #1e293b; | |
| } | |
| .lucrum-bar-subtitle { | |
| font-size: 11px; | |
| color: #64748b; | |
| } | |
| .lucrum-bar-container { | |
| height: 45px; | |
| background: #f1f5f9; | |
| border-radius: 22px; | |
| overflow: hidden; | |
| margin-top: 6px; | |
| } | |
| .lucrum-bar-fill { | |
| height: 100%; | |
| border-radius: 22px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: flex-end; | |
| padding-right: 12px; | |
| transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1); | |
| opacity: 0; | |
| transform: scaleX(0); | |
| transform-origin: left; | |
| } | |
| .lucrum-bar-fill.lucrum-animate { | |
| opacity: 1; | |
| transform: scaleX(1); | |
| } | |
| .lucrum-typical-bar { | |
| width: 20%; | |
| background: linear-gradient(90deg, #94a3b8, #64748b); | |
| } | |
| .lucrum-lucrum-bar { | |
| width: 90%; | |
| background: linear-gradient(90deg, #2563eb, #1d4ed8, #3b82f6); | |
| box-shadow: 0 0 15px rgba(37, 99, 235, 0.3); | |
| position: relative; | |
| } | |
| .lucrum-lucrum-bar::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); | |
| border-radius: 22px; | |
| animation: lucrum-shimmer 3s ease-in-out infinite; | |
| } | |
| .lucrum-percentage-label { | |
| font-size: 14px; | |
| font-weight: 700; | |
| color: white; | |
| text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); | |
| } | |
| @keyframes lucrum-shimmer { | |
| 0% { transform: translateX(-100%); } | |
| 50% { transform: translateX(100%); } | |
| 100% { transform: translateX(100%); } | |
| } | |
| </style> | |
| <div class="lucrum-chart-wrapper"> | |
| <div class="lucrum-chart-container"> | |
| <div class="lucrum-chart-title"> | |
| <h2>Bioavailability Comparison</h2> | |
| <p>How much of your supplement actually gets absorbed?</p> | |
| </div> | |
| <!-- Typical supplement --> | |
| <div class="lucrum-bar-row"> | |
| <div class="lucrum-bar-label"> | |
| <div class="lucrum-supplement-icon lucrum-typical-icon">💊</div> | |
| <div> | |
| <div class="lucrum-bar-title">Typical Supplement</div> | |
| <div class="lucrum-bar-subtitle">Limited Absorption</div> | |
| </div> | |
| </div> | |
| <div class="lucrum-bar-container"> | |
| <div class="lucrum-bar-fill lucrum-typical-bar"> | |
| <span class="lucrum-percentage-label">20%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Lucrum Vitality --> | |
| <div class="lucrum-bar-row"> | |
| <div class="lucrum-bar-label"> | |
| <div class="lucrum-supplement-icon lucrum-lucrum-icon">✨</div> | |
| <div> | |
| <div class="lucrum-bar-title">Lucrum Vitality</div> | |
| <div class="lucrum-bar-subtitle">Maximum Absorption</div> | |
| </div> | |
| </div> | |
| <div class="lucrum-bar-container"> | |
| <div class="lucrum-bar-fill lucrum-lucrum-bar"> | |
| <span class="lucrum-percentage-label">90%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener("DOMContentLoaded", function () { | |
| const bars = document.querySelectorAll(".lucrum-bar-fill"); | |
| setTimeout(() => { | |
| bars.forEach(bar => bar.classList.add("lucrum-animate")); | |
| }, 300); | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment