.menuButton { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; padding: 1.5rem 1rem; text-decoration: none; color: var(--fg); width: 150px; height: 150px; cursor: pointer; background: var(--card-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); border-radius: 28px; /* Apple squircle-like */ transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1); position: relative; overflow: hidden; } .menuButton:hover { background: var(--card-hover-bg); border-color: var(--card-hover-border); transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); } .menuButton:active { transform: scale(0.96); transition-duration: 100ms; } /* Icon Container */ .faviconWrapper { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--accent-btn-bg); box-shadow: inset 0 2px 4px rgba(255,255,255,0.05); transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1); } .menuButton:hover .faviconWrapper { transform: scale(1.08); background: var(--accent-btn-hover); } /* Label */ .label { font-size: 0.85rem; font-weight: 600; text-align: center; letter-spacing: -0.01em; color: var(--fg); max-width: 125px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,0.1); }