/* WYN Visual Fixes — v3 (post-transparent-PNG) Add LAST in : Bottles are now transparent PNGs — mask removed, glow boosted. */ /* ─── BOTTLE IMAGES — transparent PNG, strong gold aura ─── */ .bottle-img { filter: drop-shadow(0 30px 50px rgba(0,0,0,0.8)) drop-shadow(0 0 40px rgba(212,174,110,0.30)) drop-shadow(0 0 80px rgba(212,174,110,0.12)) !important; background: transparent !important; mix-blend-mode: normal !important; -webkit-mask-image: none !important; mask-image: none !important; } .bottle-img:hover { filter: drop-shadow(0 30px 60px rgba(0,0,0,0.8)) drop-shadow(0 0 90px rgba(236,200,136,0.85)) drop-shadow(0 0 50px rgba(212,174,110,0.5)) brightness(1.12) !important; transform: translateY(-10px) scale(1.03); } .system-box-img { filter: drop-shadow(0 40px 60px rgba(0,0,0,0.85)) drop-shadow(0 0 60px rgba(212,174,110,0.30)) drop-shadow(0 0 120px rgba(212,174,110,0.12)) !important; background: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; } .final-cta-image img { filter: drop-shadow(0 30px 50px rgba(0,0,0,0.85)) drop-shadow(0 0 50px rgba(212,174,110,0.30)) !important; background: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; } /* ─── SYSTEM CALLOUTS — force proper layout ─── */ .system-callouts { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; max-width: 880px !important; margin: 60px auto 40px !important; padding: 0 32px !important; position: relative; z-index: 2; } .system-callout { text-align: center; } .system-callout .num { font-family: 'Instrument Serif', Georgia, serif !important; font-style: italic !important; font-size: 56px !important; color: #ecc888 !important; line-height: 0.9 !important; margin-bottom: 10px !important; display: block !important; font-weight: 400 !important; } .system-callout .lbl { font-family: 'IBM Plex Mono', monospace !important; font-size: 10px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: #dde0e5 !important; } .system-showcase h2 { text-align: center !important; font-weight: 200 !important; font-size: clamp(40px, 5.5vw, 76px) !important; color: #f1f3f6 !important; margin-bottom: 20px !important; letter-spacing: -0.025em !important; } .system-showcase .lead { text-align: center !important; margin: 0 auto 60px !important; max-width: 680px !important; } .system-showcase .system-eyebrow { text-align: center !important; display: block !important; margin-bottom: 24px !important; } .system-cta { text-align: center !important; } /* ─── 24-HOUR BODY CELLS — much brighter readouts ─── */ .body-cell { background: linear-gradient(135deg, #26262e, #1f1f26) !important; border-color: rgba(208, 211, 216, 0.25) !important; } .body-cell .b-label { color: #ecc888 !important; font-weight: 600 !important; font-size: 10px !important; } .body-cell .b-value { color: #f1f3f6 !important; font-weight: 300 !important; font-size: 28px !important; text-shadow: 0 0 12px rgba(212, 174, 110, 0.20); } .body-cell .b-value .unit { color: #dde0e5 !important; font-size: 12px !important; } .body-cell .b-state { color: #ecc888 !important; font-weight: 500 !important; font-size: 11px !important; } .body-cell.peak { border-color: #ecc888 !important; box-shadow: 0 0 24px rgba(236, 200, 136, 0.20); } .body-cell.peak .b-value { color: #fff !important; text-shadow: 0 0 16px rgba(236, 200, 136, 0.45); } /* ─── 30-DAY SIMULATOR — marker positions ─── */ .sim-marks { position: relative !important; display: block !important; margin-top: 24px !important; height: 18px; } .sim-marks .sim-mark { position: absolute !important; white-space: nowrap; } .sim-marks .sim-mark[data-day="1"] { left: 0% !important; transform: translateX(0) !important; } .sim-marks .sim-mark[data-day="7"] { left: 20.69% !important; transform: translateX(-50%) !important; } .sim-marks .sim-mark[data-day="14"] { left: 44.83% !important; transform: translateX(-50%) !important; } .sim-marks .sim-mark[data-day="30"] { left: 100% !important; transform: translateX(-100%) !important; } /* ─── Defensive — keep gamification sections visible ─── */ #bodyage, #phase-wheel, #dash-preview, .wyn30-banner { display: block; }