/* ============================================================================ Alpha View — "Liquid Glass" material (Apple, June 2025 design language). Refines the SOC skin so cards, charts, stock tiles and controls become a real translucent glass material — a VISIBLE beveled light edge, a glossy top reflection, refraction of the colourful capital-flow field behind, and a pointer-reactive lens. Bold enough to clearly read as glass on the dark console, while every figure stays sharp ON the glass (never behind the blur). PURELY VISUAL. Scoped under .gw2-alphaDash (super-admin Alpha View only). Loads AFTER alpha-soc.css so it wins. Pointer lens via --gx/--gy (alpha-glass.js). ========================================================================== */ :root{ --glass-radius: 21px; /* squircle lozenge, like the iOS 26 icons */ --glass-blur: 22px; /* frost so the backdrop refracts */ --glass-lens: rgba(255,255,255,.16); /* the moving specular spot (subtle) */ } /* ── The glass body. Mirrors Apple's Liquid Glass app-icon look: a FROSTED, convex lozenge — a bright specular dome up top, the colourful backdrop bending through a frosty translucent body, a crisp bright rim, and a soft float. Every light layer is concentrated in the TOP/edges and sits BELOW the text, so the readable tinted lower body keeps figures crisp on the dark console. ────────── */ .gw2-alphaDash .gw2-alphaKpi, .gw2-alphaDash .gw2-alphaChartCard, .gw2-alphaDash .gw2-alphaMoversCol, .gw2-alphaDash .gw2-alphaTableWrap, .gw2-alphaDash .gw2-alphaHeatBox, .gw2-alphaDash .gw2-alphaFullHeatCol, .gw2-alphaDash .gw2-alphaFocusCard, .gw2-alphaDash .gw2-alphaSmartScoreCard, .gw2-alphaDash .gw2-alphaDdCard, .gw2-alphaDash .gw2-alphaDdChartCard, .gw2-alphaDash .gw2-alphaDdIntelCard, .gw2-alphaDash .gw2-alphaDdPanel, .gw2-alphaDash .scht-box{ position:relative; isolation:isolate; /* keep the bevel/sheen pseudos contained */ border:1px solid rgba(255,255,255,.16) !important; border-radius:var(--glass-radius) !important; background: radial-gradient(280px 220px at var(--gx,26%) var(--gy,-18%), var(--glass-lens), transparent 56%), /* pointer lens (subtle) */ radial-gradient(150% 72% at 30% -40%, rgba(255,255,255,.20), rgba(255,255,255,.05) 26%, transparent 52%), /* convex dome — TOP only */ linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.03) 13%, transparent 34%), /* top gloss — fades fast */ linear-gradient(158deg, rgba(22,34,56,.78), rgba(8,13,24,.82)) !important; /* DARK glass body — legible */ -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%) brightness(1.02) !important; backdrop-filter:blur(var(--glass-blur)) saturate(150%) brightness(1.02) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), /* crisp top reflection line */ inset 0 8px 22px -16px rgba(255,255,255,.28), /* faint convex inner sheen */ inset 0 -34px 56px -34px rgba(2,6,14,.62), /* base depth */ 0 24px 56px -18px rgba(0,0,0,.6), /* soft float shadow */ 0 0 0 .5px rgba(255,255,255,.07) !important; /* hairline crispness */ transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, border-color .22s, background .25s; } /* The BEVELLED LIGHT EDGE — the single most "glass" cue. A gradient border that follows the rounded corners (masked ring): bright at the top-left where light hits, fading, then a cool cyan refraction at the bottom-right. Overrides the SOC corner-bracket pseudos on KPI/chart cards. Sits at the edge, under text. */ .gw2-alphaDash .gw2-alphaKpi::before, .gw2-alphaDash .gw2-alphaChartCard::before, .gw2-alphaDash .gw2-alphaMoversCol::before, .gw2-alphaDash .gw2-alphaTableWrap::before, .gw2-alphaDash .gw2-alphaHeatBox::before, .gw2-alphaDash .gw2-alphaFullHeatCol::before, .gw2-alphaDash .gw2-alphaFocusCard::before, .gw2-alphaDash .gw2-alphaSmartScoreCard::before, .gw2-alphaDash .gw2-alphaDdCard::before, .gw2-alphaDash .gw2-alphaDdChartCard::before, .gw2-alphaDash .gw2-alphaDdIntelCard::before, .gw2-alphaDash .gw2-alphaDdPanel::before, .gw2-alphaDash .gw2-alphaDayHeatTile::before, .gw2-alphaDash .scht-box::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; border-radius:inherit;padding:1.4px; background:linear-gradient(135deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.22) 20%, rgba(200,235,255,.03) 46%, rgba(120,210,255,.12) 72%, rgba(120,210,255,.5) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.75; } /* A slow diagonal glass GLINT sweeping across each panel — the "liquid", living quality. z-index:-1 keeps it under the text (legibility-safe); screen blend so it only adds light. */ .gw2-alphaDash .gw2-alphaKpi::after, .gw2-alphaDash .gw2-alphaChartCard::after, .gw2-alphaDash .gw2-alphaMoversCol::after, .gw2-alphaDash .gw2-alphaFocusCard::after, .gw2-alphaDash .gw2-alphaSmartScoreCard::after, .gw2-alphaDash .gw2-alphaDdCard::after, .gw2-alphaDash .gw2-alphaDdIntelCard::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;overflow:hidden; background:linear-gradient(116deg, transparent 38%, rgba(255,255,255,.16) 49%, rgba(255,255,255,.03) 56%, transparent 64%); background-size:260% 100%;background-repeat:no-repeat; mix-blend-mode:screen;opacity:.55; animation:glassGlint 9s ease-in-out infinite; } @keyframes glassGlint{ 0%{background-position:170% 0} 60%,100%{background-position:-70% 0} } /* Touch on glass → it lifts, the rim flares and the lens brightens. */ .gw2-alphaDash .gw2-alphaKpi:hover, .gw2-alphaDash .gw2-alphaChartCard:hover, .gw2-alphaDash .gw2-alphaMoversCol:hover, .gw2-alphaDash .gw2-alphaFocusCard:hover, .gw2-alphaDash .gw2-alphaSmartScoreCard:hover, .gw2-alphaDash .gw2-alphaDdCard:hover, .gw2-alphaDash .gw2-alphaDdIntelCard:hover{ transform:translateY(-3px); border-color:rgba(120,230,255,.34) !important; --glass-lens:rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.62), inset 0 8px 22px -16px rgba(255,255,255,.32), inset 0 -34px 56px -34px rgba(2,6,14,.6), 0 32px 68px -18px rgba(0,0,0,.66), 0 0 0 1px rgba(68,241,255,.18) !important; } .gw2-alphaDash .gw2-alphaKpi:hover::before, .gw2-alphaDash .gw2-alphaChartCard:hover::before, .gw2-alphaDash .gw2-alphaMoversCol:hover::before, .gw2-alphaDash .gw2-alphaFocusCard:hover::before, .gw2-alphaDash .gw2-alphaSmartScoreCard:hover::before, .gw2-alphaDash .gw2-alphaDdCard:hover::before, .gw2-alphaDash .gw2-alphaDdIntelCard:hover::before{ opacity:1; padding:1.6px; } /* ── Charts ───────────────────────────────────────────────────────────────── The drawn line/area (canvas) stays vivid; the panel + controls go glass. */ .gw2-alphaDash .scht-tabs{ gap:4px;padding:4px;border-radius:14px !important; background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)) !important; border:1px solid rgba(255,255,255,.14) !important; -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%); box-shadow:inset 0 1px 0 rgba(255,255,255,.22); } .gw2-alphaDash .scht-tab{ border-radius:10px !important;border:1px solid transparent !important; color:var(--soc-ink,#dff6ff) !important;background:transparent !important; transition:background .18s, color .18s, box-shadow .18s, transform .12s; } .gw2-alphaDash .scht-tab:hover{ background:rgba(255,255,255,.08) !important; transform:translateY(-1px); } .gw2-alphaDash .scht-tab.is-active{ color:#04121a !important; background:linear-gradient(180deg, rgba(180,248,255,.97), rgba(64,212,230,.94)) !important; border-color:rgba(255,255,255,.55) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 6px 16px -6px rgba(68,241,255,.6) !important; } .gw2-alphaDash .scht-copy{ border-radius:11px !important;border:1px solid rgba(255,255,255,.16) !important; background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)) !important; -webkit-backdrop-filter:blur(10px) saturate(150%); backdrop-filter:blur(10px) saturate(150%); box-shadow:inset 0 1px 0 rgba(255,255,255,.3);color:var(--soc-ink,#dff6ff) !important; transition:box-shadow .18s, transform .12s, border-color .18s; } .gw2-alphaDash .scht-copy:hover{ transform:translateY(-1px);border-color:rgba(120,230,255,.5) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 0 16px rgba(68,241,255,.4) !important; } .gw2-alphaDash .scht-tip{ border-radius:12px !important; background:linear-gradient(160deg, rgba(16,28,46,.84), rgba(8,13,24,.82)) !important; border:1px solid rgba(255,255,255,.18) !important; -webkit-backdrop-filter:blur(16px) saturate(170%); backdrop-filter:blur(16px) saturate(170%); box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 12px 30px -10px rgba(0,0,0,.7) !important; } /* ── Stock cards (Day-Movers tiles): TRANSLUCENT colour-tinted LIQUID GLASS, mirroring the Apple app-icon look. The gain/loss colour is now a see-through tint (set in app.js), so the frost blur + dark console refract through it; we add the convex dome gloss, a bright bevel edge, a top reflection and a float. The base tile has overflow:hidden so the 16px radius clips cleanly. ───────── */ .gw2-alphaDash .gw2-alphaDayHeatTile{ position:relative;isolation:isolate; border:1px solid rgba(255,255,255,.18) !important; /* light glass rim (over the dark base border) */ border-radius:16px !important; -webkit-backdrop-filter:blur(12px) saturate(165%); backdrop-filter:blur(12px) saturate(165%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.5), /* crisp top reflection */ inset 0 10px 26px -16px rgba(255,255,255,.4), /* convex dome inner sheen */ inset 0 -16px 30px -18px rgba(2,6,14,.55), /* convex thickness at the base */ 0 10px 26px -8px rgba(0,0,0,.5) !important; /* float */ } /* Convex top-gloss dome — a bright specular highlight up top (under the text). */ .gw2-alphaDash .gw2-alphaDayHeatTile::after{ content:"";position:absolute;left:0;right:0;top:0;height:62%;z-index:-1;pointer-events:none;border-radius:inherit; background:radial-gradient(120% 100% at 32% -28%, rgba(255,255,255,.34), rgba(255,255,255,.08) 34%, transparent 60%); } .gw2-alphaDash .gw2-alphaDayHeatTile::before{ opacity:.85; } /* bright bevel ring (defined above) */ .gw2-alphaDash .gw2-alphaDayHeatTile:hover{ transform:translateY(-2px) scale(1.03); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.72), inset 0 10px 26px -16px rgba(255,255,255,.5), 0 18px 38px -8px rgba(0,0,0,.6) !important; } /* ── Rank-change FLIP: when a stock overtakes the one beside it, its tile slides from its old slot to the new one and LEANS FORWARD (climbed) or BACKWARD (slipped) — a clean 3D card flip. The slide delta is carried in --dx/--dy so a single GPU animation does both the move and the lean (no transform conflict). */ .gw2-alphaDayHeatTile.gw2-flip{ will-change:transform; z-index:6; } @keyframes gw2RankUp{ 0% { transform:translate(var(--dx,0),var(--dy,0)) perspective(760px) rotateX(0deg); } 40% { transform:translate(calc(var(--dx,0)*.42),calc(var(--dy,0)*.42)) perspective(760px) rotateX(-26deg) scale(1.04); } 100%{ transform:translate(0,0) perspective(760px) rotateX(0deg) scale(1); } } @keyframes gw2RankDn{ 0% { transform:translate(var(--dx,0),var(--dy,0)) perspective(760px) rotateX(0deg); } 40% { transform:translate(calc(var(--dx,0)*.42),calc(var(--dy,0)*.42)) perspective(760px) rotateX(26deg) scale(.97); } 100%{ transform:translate(0,0) perspective(760px) rotateX(0deg) scale(1); } } @keyframes gw2Slide{ 0% { transform:translate(var(--dx,0),var(--dy,0)); } 100%{ transform:translate(0,0); } } @keyframes gw2RankIn{ 0% { opacity:0; transform:scale(.9) perspective(760px) rotateX(-20deg); } 100%{ opacity:1; transform:scale(1) perspective(760px) rotateX(0deg); } } .gw2-alphaDayHeatTile.gw2-rankup{ animation:gw2RankUp .62s cubic-bezier(.2,.85,.25,1) both; } .gw2-alphaDayHeatTile.gw2-rankdn{ animation:gw2RankDn .62s cubic-bezier(.2,.85,.25,1) both; } .gw2-alphaDayHeatTile.gw2-slide { animation:gw2Slide .5s cubic-bezier(.2,.85,.25,1) both; } .gw2-alphaDayHeatTile.gw2-rankin{ animation:gw2RankIn .45s ease both; } @media (prefers-reduced-motion:reduce){ .gw2-alphaDayHeatTile.gw2-flip{ animation:none !important; } } /* ── Controls: nav / range / eye toggles → glass pills (inactive only — the SOC high-contrast active states stay, so they remain perfectly legible). ──────── */ .gw2-alphaDash .gw2-modeBtn:not(.is-active), .gw2-alphaDash .gw2-alphaRangeBtn:not(.is-active), .gw2-alphaDash .gw2-alphaEye:not([aria-pressed="true"]){ border:1px solid rgba(255,255,255,.16) !important;border-radius:12px !important; background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.025)) !important; -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px -8px rgba(0,0,0,.5) !important; } .gw2-alphaDash .gw2-modeBtn:not(.is-active):hover, .gw2-alphaDash .gw2-alphaRangeBtn:not(.is-active):hover{ border-color:rgba(150,235,255,.55) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 0 18px rgba(68,241,255,.35) !important; } /* ── Legibility guards ────────────────────────────────────────────────────── Text sits on the glass, so it's sharp — but give the headline figures a faint contrast scrim so a bright reflection can never wash them out. */ .gw2-alphaDash .gw2-alphaKpiVal, .gw2-alphaDash .gw2-alphaKpiLbl, .gw2-alphaDash .gw2-alphaDdPrice, .gw2-alphaDash .gw2-alphaFocusName, .gw2-alphaDash .gw2-alphaSmartScoreVal{ text-shadow:0 1px 2px rgba(0,4,10,.7), 0 1px 14px rgba(0,4,10,.7), 0 0 16px rgba(68,241,255,.18); } /* The lighter frost lifts the whole pane — give body copy a tighter dark halo so small white/grey text on glass keeps its contrast. */ .gw2-alphaDash .gw2-alphaKpiSub, .gw2-alphaDash .gw2-alphaChartHd, .gw2-alphaDash .gw2-alphaTable td, .gw2-alphaDash .gw2-alphaTable th{ text-shadow:0 1px 2px rgba(0,4,10,.55); } /* Fallback: no backdrop-filter → make the material near-opaque so the busy console grid can't bleed through the text. Still reads as glass, just static. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .gw2-alphaDash .gw2-alphaKpi, .gw2-alphaDash .gw2-alphaChartCard, .gw2-alphaDash .gw2-alphaMoversCol, .gw2-alphaDash .gw2-alphaTableWrap, .gw2-alphaDash .gw2-alphaHeatBox, .gw2-alphaDash .gw2-alphaFocusCard, .gw2-alphaDash .gw2-alphaSmartScoreCard, .gw2-alphaDash .gw2-alphaDdCard, .gw2-alphaDash .gw2-alphaDdChartCard, .gw2-alphaDash .gw2-alphaDdIntelCard, .gw2-alphaDash .scht-box{ background: radial-gradient(140% 78% at 28% -34%, rgba(255,255,255,.2), transparent 56%), linear-gradient(180deg, rgba(255,255,255,.16), transparent 42%), linear-gradient(158deg, rgba(30,46,70,.95), rgba(10,16,28,.96)) !important; } } @media (prefers-reduced-motion:reduce){ .gw2-alphaDash .gw2-alphaKpi::after, .gw2-alphaDash .gw2-alphaChartCard::after, .gw2-alphaDash .gw2-alphaMoversCol::after, .gw2-alphaDash .gw2-alphaFocusCard::after, .gw2-alphaDash .gw2-alphaSmartScoreCard::after, .gw2-alphaDash .gw2-alphaDdCard::after, .gw2-alphaDash .gw2-alphaDdIntelCard::after{ animation:none !important; } }