/* ============================================================ AHGsm — Services / Apps Download Glassmorphic 3D Layer The apps page ships as a LIGHT green theme. This inverts it into dark glass floating over the persistent 3D world. Scoped under [data-ah-zone="apps"] body (apps page only). ============================================================ */ /* ---------- root inversion ---------- */ body[data-ah-zone="apps"] { background: transparent !important; color: #e8f1f9; } html.no-webgl body[data-ah-zone="apps"] { background: radial-gradient(circle at 12% -6%, rgba(167, 139, 250, 0.14), transparent 34rem), radial-gradient(circle at 88% 4%, rgba(14, 116, 144, 0.14), transparent 32rem), #040a16 !important; } /* ---------- page shell ---------- */ body[data-ah-zone="apps"] .wrap { background: transparent !important; max-width: 980px; margin: 0 auto; padding: 28px 18px 60px; } /* ---------- top bar ---------- */ body[data-ah-zone="apps"] .top { background: rgba(7, 17, 29, 0.55) !important; backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(103, 232, 249, 0.16) !important; border-radius: 16px !important; box-shadow: 0 16px 36px -20px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; padding: 14px 18px !important; margin-bottom: 22px; } body[data-ah-zone="apps"] .top .back { color: #67e8f9 !important; } body[data-ah-zone="apps"] .top h1, body[data-ah-zone="apps"] .hero h1, body[data-ah-zone="apps"] .hero h2 { color: #eaf3fb !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55); } body[data-ah-zone="apps"] .top p, body[data-ah-zone="apps"] .hero p { color: #9db4ca !important; } /* ---------- hero ---------- */ body[data-ah-zone="apps"] .hero { background: linear-gradient(160deg, rgba(22, 42, 66, 0.6), rgba(5, 13, 24, 0.6)) !important; backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(103, 232, 249, 0.18) !important; border-radius: 20px !important; box-shadow: 0 24px 54px -24px rgba(0, 0, 0, 0.9), 0 0 44px -20px rgba(167, 139, 250, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important; padding: 26px !important; margin-bottom: 22px; } /* ---------- app cards ---------- */ body[data-ah-zone="apps"] .list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } body[data-ah-zone="apps"] .card { background: linear-gradient(165deg, rgba(14, 38, 60, 0.62), rgba(5, 13, 24, 0.56)) !important; backdrop-filter: blur(16px) saturate(155%); -webkit-backdrop-filter: blur(16px) saturate(155%); border: 1px solid rgba(103, 232, 249, 0.14) !important; border-radius: 16px !important; box-shadow: 0 18px 38px -20px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.35) !important; transition: transform 0.25s cubic-bezier(0.22, 0.72, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease !important; color: #e8f1f9 !important; } body[data-ah-zone="apps"] .card:hover { transform: translateY(-4px); border-color: rgba(167, 139, 250, 0.42) !important; box-shadow: 0 28px 56px -22px rgba(0, 0, 0, 0.95), 0 0 26px -12px rgba(167, 139, 250, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.13) !important; } body[data-ah-zone="apps"] .card .icon, body[data-ah-zone="apps"] .card .icon-fallback { border: 1px solid rgba(0, 0, 0, 0.35) !important; border-radius: 14px !important; background: rgba(9, 26, 42, 0.55) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 3px rgba(0, 0, 0, 0.4) !important; overflow: hidden; } body[data-ah-zone="apps"] .card .icon img { border-radius: 12px; } body[data-ah-zone="apps"] .card .meta h3 { color: #eaf3fb !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55); } body[data-ah-zone="apps"] .card .meta p, body[data-ah-zone="apps"] .card small { color: #9db4ca !important; } /* ---------- download button: glossy 3D ---------- */ body[data-ah-zone="apps"] .card .btn, body[data-ah-zone="apps"] .btn { border: 1px solid rgba(6, 60, 48, 0.85) !important; background: linear-gradient(180deg, #34d399, #059669 60%, #047857) !important; color: #ecfdf5 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -2px 0 rgba(4, 30, 24, 0.5), 0 3px 0 #052e22, 0 10px 22px -12px rgba(52, 211, 153, 0.8) !important; transition: transform 0.2s cubic-bezier(0.22, 0.72, 0.2, 1), box-shadow 0.2s ease !important; } body[data-ah-zone="apps"] .card .btn:hover, body[data-ah-zone="apps"] .btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(4, 30, 24, 0.5), 0 5px 0 #052e22, 0 16px 30px -12px rgba(52, 211, 153, 1) !important; } body[data-ah-zone="apps"] .card .btn:active, body[data-ah-zone="apps"] .btn:active { transform: translateY(2px) scale(0.985); box-shadow: inset 0 2px 4px rgba(4, 30, 24, 0.6), 0 1px 0 #052e22 !important; } /* ---------- empty state ---------- */ body[data-ah-zone="apps"] .empty { background: rgba(9, 26, 42, 0.5) !important; border: 1px solid rgba(103, 232, 249, 0.14) !important; border-radius: 16px !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 40px 20px !important; color: #9db4ca !important; } body[data-ah-zone="apps"] .empty a { color: #6ee7b7; } /* ---------- low-end handhelds ---------- */ @media (max-width: 620px) { body[data-ah-zone="apps"] .top, body[data-ah-zone="apps"] .hero, body[data-ah-zone="apps"] .card, body[data-ah-zone="apps"] .empty { backdrop-filter: blur(10px) saturate(135%); -webkit-backdrop-filter: blur(10px) saturate(135%); } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { body[data-ah-zone="apps"] .card, body[data-ah-zone="apps"] .btn { transition: none !important; } }