/* ============================================================================ PRODUCTS PAGE ONLY — css/products.css Loaded AFTER css/style.css, so anything in here wins on this page only. Changing this file cannot affect any other page. ============================================================================ */ /* Page background, moved off the tag and into the stylesheet. */ body{ background-position:center; width:100%; } .logo-banner{ width:100%; background:var(--void); text-align:center; padding-top:0; /* clears the fixed nav so the image starts below it */ padding-bottom:0; } .logo-banner img{ display:block; width:100%; max-height:100%; object-fit:cover; object-position:center top; /* Solid and fully opaque on top/left/right — only the bottom edge fades out */ -webkit-mask-image:linear-gradient(to bottom, black 0%, black 70%, transparent 100%); mask-image:linear-gradient(to bottom, black 0%, black 70%, transparent 100%); } /* Replace the grid pattern behind the hero with the purple swirl art */ .hero::before{ content:""; position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; mask-image:radial-gradient(ellipse 900px 600px at 60% 20%, black, transparent 75%); -webkit-mask-image:radial-gradient(ellipse 900px 600px at 60% 20%, black, transparent 75%); opacity:0.55; } /* FIX: sections were staying invisible because the scroll-reveal script that's supposed to add ".in-view" isn't running. This makes all content visible by default instead of depending on that script. */ [data-reveal]{ opacity:1 !important; transform:none !important; } .hero-stats-row { display: flex; flex-direction: row; gap: 2px; justify-content: space-between; align-items: left; margin: 0px 0; flex-wrap: nowrap; } .hero-stat { flex: 1; min-width: 120px; text-align: left; } .stack-section { margin-top: 60px; } .stack-layers-horizontal { display: flex; flex-direction: row; gap: 20px; margin-top: 30px; flex-wrap: nowrap; } .stack-layers-horizontal .stack-layer { flex: 1; min-width: 200px; }