CSS
/* ─── 08 Glassmorphism Floating Sidebar — smart home ──────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');
.sn-gls {
--sn-gls-txt: #f4f6ff;
--sn-gls-muted: rgba(244,246,255,.6);
--sn-gls-glass: rgba(255,255,255,.1);
--sn-gls-glass-brd: rgba(255,255,255,.22);
--sn-gls-active: rgba(255,255,255,.9);
position: relative;
width: 100%;
height: 600px;
font-family: 'Sora', sans-serif;
color: var(--sn-gls-txt);
background:
radial-gradient(700px 700px at 8% 12%, #7c5cff 0%, transparent 55%),
radial-gradient(900px 700px at 95% 20%, #ff5ca8 0%, transparent 50%),
radial-gradient(800px 800px at 70% 100%, #2bd9c9 0%, transparent 55%),
#14102b;
overflow: hidden;
box-sizing: border-box;
}
.sn-gls *, .sn-gls *::before, .sn-gls *::after { box-sizing: border-box; margin: 0; padding: 0; }
.sn-gls::before {
content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%;
background: radial-gradient(circle, #ffb347, transparent 65%);
top: 30%; left: 40%;
filter: blur(40px); opacity: .4;
animation: sn-gls-float 14s ease-in-out infinite;
pointer-events: none;
}
@keyframes sn-gls-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(60px, -50px); } }
.sn-gls .layout { display: flex; height: 100%; padding: 22px; position: relative; z-index: 1; }
.sn-gls .sidebar {
width: 96px;
background: var(--sn-gls-glass);
backdrop-filter: blur(22px) saturate(160%);
-webkit-backdrop-filter: blur(22px) saturate(160%);
border: 1px solid var(--sn-gls-glass-brd);
border-radius: 28px;
box-shadow: 0 18px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.3);
display: flex; flex-direction: column; align-items: center;
padding: 1.4rem 0; gap: .6rem;
flex-shrink: 0;
}
.sn-gls .logo { width: 48px; height: 48px; border-radius: 16px;
background: linear-gradient(135deg, #fff, rgba(255,255,255,.6));
display: grid; place-items: center; color: #14102b; font-weight: 800; font-size: 1.4rem;
margin-bottom: 1rem; box-shadow: 0 8px 24px rgba(0,0,0,.2); flex-shrink: 0; }
.sn-gls .nav-icon {
width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
color: var(--sn-gls-txt); text-decoration: none; position: relative; transition: .25s;
flex-shrink: 0;
}
.sn-gls .nav-icon svg { width: 23px; height: 23px; stroke-width: 1.8; }
.sn-gls .nav-icon:hover { background: rgba(255,255,255,.14); }
.sn-gls .nav-icon.active { background: var(--sn-gls-active); color: #14102b; box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.sn-gls .nav-icon .tip { position: absolute; left: 64px; top: 50%; transform: translateY(-50%) scale(.85);
background: rgba(20,16,43,.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: .76rem;
padding: .35rem .7rem; border-radius: 9px; white-space: nowrap; opacity: 0; pointer-events: none; transition: .2s;
border: 1px solid var(--sn-gls-glass-brd); z-index: 5; }
.sn-gls .nav-icon:hover .tip { opacity: 1; transform: translateY(-50%) scale(1); }
.sn-gls .spacer { flex: 1; }
.sn-gls .avatar { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--sn-gls-glass-brd);
background: linear-gradient(135deg, #ff5ca8, #7c5cff); flex-shrink: 0; }
.sn-gls .contentpane { flex: 1; padding: 1.4rem 2rem; min-width: 0; overflow-y: auto; }
.sn-gls .hello h1 { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; }
.sn-gls .hello p { color: var(--sn-gls-muted); margin-top: .3rem; }
.sn-gls .cards { margin-top: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.1rem; max-width: 720px; }
.sn-gls .gcard {
background: var(--sn-gls-glass); backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
border: 1px solid var(--sn-gls-glass-brd); border-radius: 22px; padding: 1.4rem;
box-shadow: 0 12px 36px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.25);
}
.sn-gls .gcard .ic { width: 42px; height: 42px; border-radius: 13px; background: rgba(255,255,255,.16);
display: grid; place-items: center; margin-bottom: 1rem; }
.sn-gls .gcard .ic svg { width: 21px; height: 21px; stroke: #fff; }
.sn-gls .gcard b { font-size: 1.05rem; font-weight: 600; }
.sn-gls .gcard .v { font-size: 1.9rem; font-weight: 800; margin-top: .5rem; letter-spacing: -.02em; }
.sn-gls .gcard small { color: var(--sn-gls-muted); font-size: .8rem; }
.sn-gls .toggleui { margin-top: .9rem; width: 46px; height: 26px; border-radius: 20px; background: rgba(255,255,255,.9); position: relative; }
.sn-gls .toggleui::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
background: #14102b; top: 3px; right: 3px; }
@media (prefers-reduced-motion: reduce) {
.sn-gls::before { animation: none; }
.sn-gls .nav-icon, .sn-gls .nav-icon .tip { transition: none; }
}