/* ============================================================ Glass Icons Theme (scoped) Enable by adding .theme-glass to a parent (e.g., ). Add .theme-glass-vibrant alongside it for the vibrant variant. Your base/main.css styles remain the default when theme is off. ============================================================ */ /* Base glass vars – scoped so they don't affect main.css */ .theme-glass { --glass-bg: rgba(77, 77, 77, 0.16); --glass-blur: 34px; --glass-sat: 180%; --glass-contrast: 105%; --glass-border: rgba(255, 255, 255, 0.32); --glass-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 6px 18px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(255, 255, 255, 0.06); --gloss-start: rgba(255, 255, 255, 0.40); --gloss-end: rgba(255, 255, 255, 0.06); } /* Vibrant override – also scoped */ .theme-glass.theme-glass-vibrant { --glass-bg: rgba(77, 77, 77, 0.16); --glass-blur: 34px; --glass-sat: 220%; --glass-contrast: 115%; --glass-border: rgba(255, 255, 255, 0.40); --glass-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), 0 10px 24px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(255, 255, 255, 0.08); --gloss-start: rgba(255, 255, 255, 0.48); --gloss-end: rgba(255, 255, 255, 0.10); } .theme-glass body, .preloader { background-image: url('./img/background.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-color: #000000; /* fallback */ } /* Parallax bg (scoped; remove .theme-glass prefix if you want it always on) */ .theme-glass .mobileBackground { position: relative; min-height: 100vh; z-index: 0; --parallax-y: 0px; /* set via JS if you use parallax */ } .theme-glass .mobileBackground::before { content: ""; position: fixed; inset: 0; z-index: -1; background-image: var(--bg-image, url('../img/background.jpg')); background-size: cover; background-position: center; background-repeat: no-repeat; transform: translate3d(0, calc(var(--parallax-y) * -1), 0); will-change: transform; } /* Core glass treatment for tiles – scoped */ .theme-glass .grid-tile, .theme-glass .grid-tile-mini, .theme-glass .grid-tile-lg { position: relative; overflow: hidden; background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) contrast(var(--glass-contrast)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) contrast(var(--glass-contrast)); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); transition: backdrop-filter 140ms ease, -webkit-backdrop-filter 140ms ease, box-shadow 140ms ease, transform 140ms ease; } /* Gloss highlight – scoped */ .theme-glass .grid-tile::before, .theme-glass .displayCards::before. .theme-glass .grid-tile-mini::before, .theme-glass .grid-tile-lg::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, var(--gloss-start), var(--gloss-end)); mask: radial-gradient(120% 90% at 0% 0%, #000 42%, transparent 94%); } .theme-glass .bannerCard:before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mask: radial-gradient(120% 90% at 0% 0%, #000 24%, transparent 90%); } /* Subtle inner rim – scoped */ .theme-glass .grid-tile::after, .theme-glass .bannerCard::after, .theme-glass .displayCards::after, .theme-glass .grid-tile-mini::after, .theme-glass .grid-tile-lg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 1px rgba(255,255,255,0.35), inset 0 -1px 2px rgba(0,0,0,0.18); } /* Keep icon art above gloss – scoped */ .theme-glass .grid-tile img, .theme-glass .grid-tile-mini img, .theme-glass .grid-tile-lg img { position: relative; z-index: 1; max-width: 65%; max-height: 65%; object-fit: contain; filter: grayscale(1) contrast(0) brightness(200%) !important; } /* Hover/press feedback – scoped */ .grid-tile:is(:hover, :focus-visible), .grid-tile-mini:is(:hover, :focus-visible), .grid-tile-lg:is(:hover, :focus-visible) { transform: translateY(-1px); } /* Performance-friendly: cheaper visuals during scroll – scoped to theme */ .theme-glass.is-scrolling .grid-tile, .theme-glass.is-scrolling .grid-tile-mini, .theme-glass.is-scrolling .grid-tile-lg { backdrop-filter: blur(calc(var(--glass-blur) * 0.6)) saturate(calc(var(--glass-sat) * 0.9)) contrast(100%); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.6)) saturate(calc(var(--glass-sat) * 0.9)) contrast(100%); box-shadow: 0 4px 12px rgba(0,0,0,0.22); } /* --- BRAND TINTS: only change when theme is ON (scoped) --- */ /* Your main.css can keep opaque hex colors; these only apply under .theme-glass */ .theme-glass .internal { background-color: rgba(0, 0, 0, 0.027); } .theme-glass .wiser { background-color: rgba(0, 113, 189, 0.5); } .theme-glass .bestbuy { background-color: rgba(10, 74, 191, 0.5); } .theme-glass .adapp { background-color: rgba(195, 195, 195, 0.5); } .theme-glass .bestbuyyellow { background-color: rgba(246, 235, 22, 0.5); } .theme-glass .ring { background-color: rgba(28, 154, 214, 0.5); } .theme-glass .slack { background-color: rgba(30, 28, 33, 0.5); } .theme-glass .lowes { background-color: rgba(0, 71, 146, 0.5); } .theme-glass .staples { background-color: rgba(206, 0, 0, 0.5); } .theme-glass .target { background-color: rgba(204, 0, 0, 0.5); } .theme-glass .homedepot { background-color: rgba(249, 99, 2, 0.5); } .theme-glass .bannerCard {background-color: rgba(0, 0, 0, 0.343); } /* Respect reduced motion – scoped */ @media (prefers-reduced-motion: reduce) { .theme-glass .mobileBackground::before { transform: none !important; } .theme-glass .grid-tile, .theme-glass .grid-tile-mini, .theme-glass .grid-tile-lg { transition: none; } } /* Graceful fallback for browsers without backdrop-filter – scoped */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .theme-glass .grid-tile, .theme-glass .grid-tile-mini, .theme-glass .grid-tile-lg { background: rgba(255, 255, 255, 0.28); } }