/* ==================================================================== VCM — iOS 26 "Liquid Glass" layer. Loads AFTER tokens/ui/brand. Adds translucent depth, specular highlights and refraction to surfaces, and floats icons on glass tiles. ==================================================================== */ :root{ --lg-blur: 24px; --lg-spec: rgba(255,255,255,.55); /* specular highlight */ --lg-edge: rgba(255,255,255,.16); /* bright glass edge */ --lg-sheenA: rgba(255,255,255,.22); --lg-sheenB: rgba(255,255,255,.04); } /* Richer, more colourful canvas so the glass has something to refract */ body{ background: radial-gradient(1200px 760px at 6% -12%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 58%), radial-gradient(1000px 820px at 104% -6%, rgba(95,179,244,.16), transparent 54%), radial-gradient(1100px 900px at 50% 128%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%), radial-gradient(700px 560px at 88% 70%, var(--gold-ghost), transparent 60%), var(--canvas) !important; } /* ---- Core surfaces → liquid glass -------------------------------- */ .glass,.card,.mcard,.modal,.sheet,.sidebar,.topbar,.notif,.cmdk .modal{ background: linear-gradient(176deg, var(--lg-sheenA), var(--lg-sheenB) 34%, transparent 60%), var(--glass-2) !important; backdrop-filter: blur(var(--lg-blur)) saturate(185%) !important; -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(185%) !important; border:1px solid var(--lg-edge) !important; box-shadow: inset 0 1px 0 var(--lg-spec), inset 0 -16px 28px rgba(0,0,0,.20), 0 10px 34px rgba(0,0,0,.40) !important; } .card.tight{box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 6px 18px rgba(0,0,0,.30) !important;} .sidebar,.topbar{box-shadow:inset 0 1px 0 var(--lg-spec), 0 12px 36px rgba(0,0,0,.34) !important;} /* ---- Liquid-glass icon tiles ------------------------------------- */ /* a frosted squircle with an inner specular sweep; the glyph floats on top */ .brand .logo, .ai, .nic, .iconbtn, .tab.fab .ic, .stat .ictile, .lgtile{ position:relative; overflow:hidden; isolation:isolate; background: linear-gradient(155deg, var(--lg-sheenA), var(--lg-sheenB) 46%, rgba(255,255,255,.10)), var(--accent-ghost) !important; border:1px solid rgba(255,255,255,.20) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -7px 12px rgba(0,0,0,.22), 0 6px 16px rgba(0,0,0,.30) !important; backdrop-filter: blur(7px) saturate(160%); -webkit-backdrop-filter: blur(7px) saturate(160%); color:var(--accent); } .brand .logo{color:var(--accent-fg) !important; background:linear-gradient(155deg, rgba(255,255,255,.32), rgba(255,255,255,.05) 50%), linear-gradient(140deg,var(--accent),var(--accent-press)) !important;} .tab.fab .ic{color:var(--accent-fg) !important; background:linear-gradient(155deg, rgba(255,255,255,.34), rgba(255,255,255,.06) 50%), linear-gradient(140deg,var(--accent),var(--accent-press)) !important;} /* specular sweep highlight on every tile */ .brand .logo::after, .ai::after, .nic::after, .iconbtn::after, .tab.fab .ic::after, .lgtile::after{ content:""; position:absolute; left:-25%; top:-70%; width:150%; height:130%; background:radial-gradient(58% 46% at 32% 22%, rgba(255,255,255,.55), transparent 62%); opacity:.55; pointer-events:none; z-index:-1; } /* keep the glyph crisp above the sheen */ .brand .logo svg.i, .ai svg.i, .nic svg.i, .iconbtn svg.i, .tab.fab .ic svg.i{position:relative; z-index:1; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));} /* ---- Active nav / tab → frosted glass lozenge -------------------- */ .navItem.active{ background: linear-gradient(176deg, rgba(255,255,255,.16), transparent 60%), var(--accent-ghost) !important; border:1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.40), 0 4px 14px rgba(0,0,0,.22); } .tab.active{position:relative;} .tab.active .ic:not(.fab *)::before{ content:""; position:absolute; inset:-7px -12px; border-radius:999px; z-index:-1; background:linear-gradient(176deg, rgba(255,255,255,.18), transparent), var(--accent-ghost); box-shadow: inset 0 1px 0 rgba(255,255,255,.40); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } /* ---- Buttons → glassy primary ----------------------------------- */ .btn{ background: linear-gradient(176deg, rgba(255,255,255,.26), rgba(255,255,255,.04) 52%), var(--accent) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 16px color-mix(in srgb, var(--accent) 40%, transparent) !important; border:1px solid rgba(255,255,255,.14) !important; } .btn.secondary,.btn.ghost{background:linear-gradient(176deg, rgba(255,255,255,.10), transparent 55%), var(--surface-3) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22) !important;} .btn.ghost{background:transparent !important; box-shadow:none !important; border-color:transparent !important;} .btn.success{background:linear-gradient(176deg, rgba(255,255,255,.14), transparent 55%), var(--ok-ghost) !important;} .btn.danger{background:linear-gradient(176deg, rgba(255,255,255,.10), transparent 55%), var(--danger-ghost) !important;} /* ---- Pills get a subtle glass sheen ------------------------------ */ .pill{backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:inset 0 1px 0 rgba(255,255,255,.18);} /* ---- Phone frame → premium glass slab --------------------------- */ .phone{ box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) !important; } .tabbar{box-shadow:inset 0 1px 0 var(--lg-spec) !important;} /* ---- Stat tile icon helper (optional, if markup uses .ictile) ---- */ .stat .ictile{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;margin-bottom:var(--space-2);} /* hover: glass reacts with a touch more light */ .card:hover,.mcard:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.62), inset 0 -16px 28px rgba(0,0,0,.18), 0 14px 40px rgba(0,0,0,.46) !important;} .iconbtn:hover,.ai:hover{filter:brightness(1.08);} @media (prefers-reduced-motion: reduce){ *{transition:none !important;} }