/* ─── Floating Nutrition Widget ──────────────────────────────────────── */ .nutrition-widget { position: absolute; bottom: -2rem; right: 2rem; background: var(--surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 20px; padding: 1.5rem; width: 320px; box-shadow: 0 15px 40px rgba(0,0,0,0.15); border: 1px solid var(--border); z-index: 3; animation: floatUp 1s ease-out; } @keyframes floatUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .widget-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; } .widget-header h4 { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); } .widget-header svg { color: var(--text-muted); } .widget-content { display: flex; align-items: center; gap: 1.5rem; } .donut-chart { position: relative; width: 90px; height: 90px; } .circular-chart { display: block; margin: 0 auto; max-width: 100%; max-height: 250px; } .circle-bg { fill: none; stroke: rgba(0,0,0,0.05); stroke-width: 3.5; } [data-theme="dark"] .circle-bg { stroke: rgba(255,255,255,0.05); } .circular-chart path:not(.circle-bg) { fill: none; stroke-width: 3.5; stroke-linecap: round; animation: donut-fill 1s ease-out forwards; } @keyframes donut-fill { from { stroke-dasharray: 0, 100; } } .circle-protein { stroke: #28a745; } .circle-carbs { stroke: #ffc107; } .circle-fats { stroke: #6f42c1; } .circle-fiber { stroke: #20c997; } .donut-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; display: flex; flex-direction: column; } .donut-title { font-size: 0.75rem; font-weight: 700; color: var(--green-dark); } [data-theme="dark"] .donut-title { color: var(--green-accent); } .donut-subtitle { font-size: 0.6rem; color: var(--text-secondary); } .macro-list { list-style: none; flex: 1; display: flex; flex-direction: column; gap: 0.6rem; } .macro-list li { display: flex; align-items: center; font-size: 0.8rem; color: var(--text-secondary); } .macro-list .dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 0.5rem; } .dot-protein { background: #28a745; } .dot-carbs { background: #ffc107; } .dot-fats { background: #6f42c1; } .dot-fiber { background: #20c997; } .macro-name { flex: 1; } .macro-val { font-weight: 700; color: var(--text-primary); } .widget-footer { margin-top: 1.25rem; font-size: 0.75rem; color: var(--text-muted); text-align: center; border-top: 1px solid var(--border); padding-top: 0.75rem; } /* ─── Bottom Trust Bar ──────────────────────────────────────────────── */ .bottom-trust-bar { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; gap: 2rem; background: var(--surface); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border); padding: 1rem 2.5rem; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); z-index: 5; animation: floatUp 1.2s ease-out; } .trust-item { display: flex; align-items: center; gap: 0.75rem; } .trust-item svg { width: 20px; height: 20px; color: var(--green-dark); } [data-theme="dark"] .trust-item svg { color: var(--green-accent); } .trust-text { display: flex; flex-direction: column; } .trust-text strong { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); } .trust-text span { font-size: 0.75rem; color: var(--text-secondary); } @media (max-width: 1200px) { .nutrition-widget { display: none; } .bottom-trust-bar { display: none; } }