/* Floating dock — vertical glass pill fixed to the right edge (desktop/ tablet), converting to a bottom-center glass dock on mobile. Rendered by (js/custom/float-menu.js) into light DOM, on every page. Its two on-page-anchor links reuse .wm-nav__link, so index.html's existing scroll-spy/offset-scroll script (see its bottom inline script) drives active-state + smooth scrolling for those, there; page links (Work/About/ Résumé) get a static .is-current on whichever page you're on instead. This file only owns look and micro-interactions. See ./README.md */ /* ---- Theme tokens ------------------------------------------------------- Dark default (index.html/work.html/inventory-management.html): dark glass, white icons/border, matches those pages' dark backgrounds. Light override further down (about.html/resume.html — see their own color-scheme="light" attribute, the same signal about.css/ resume.css already key their own header-contrast fix off) swaps in a dedicated light-glass/navy-icon set instead of inverting these — plain white-on-white glass is illegible on those pages' light backgrounds, which was the actual bug. The navy (#1b2947) matches --wm-about-navy/ --wm-resume-navy, the same accent those two pages already use for contrast-safe text, so the dock reads as native to each page rather than a bolted-on dark widget. The purple/blue accent (--wm-fm-accent-1/2) and the is-current glow stay identical in both — only the neutral glass/icon tones adapt. */ wm-float-menu { --wm-fm-bg: rgba(255, 255, 255, 0.08); --wm-fm-border: rgba(255, 255, 255, 0.16); --wm-fm-highlight: rgba(255, 255, 255, 0.18); --wm-fm-shadow-lift: 0 0 0 rgba(0, 0, 0, 0); --wm-fm-icon: rgba(255, 255, 255, 0.7); --wm-fm-icon-hover: #fff; --wm-fm-item-bg: rgba(255, 255, 255, 0.02); --wm-fm-item-hover-bg: rgba(255, 255, 255, 0.1); --wm-fm-item-hover-border: rgba(255, 255, 255, 0.18); --wm-fm-item-hover-glow: rgba(255, 255, 255, 0.22); --wm-fm-tip-bg: rgba(20, 20, 26, 0.55); --wm-fm-tip-border: rgba(255, 255, 255, 0.12); --wm-fm-tip-color: rgba(255, 255, 255, 0.9); --wm-fm-shimmer: rgba(255, 255, 255, 0.85); --wm-fm-focus: rgba(255, 255, 255, 0.85); } html[color-scheme="light"] wm-float-menu { --wm-fm-bg: rgba(255, 255, 255, 0.55); --wm-fm-border: rgba(27, 41, 71, 0.16); --wm-fm-highlight: rgba(255, 255, 255, 0.7); --wm-fm-shadow-lift: 0 1.2rem 2.8rem rgba(27, 41, 71, 0.16); --wm-fm-icon: rgba(27, 41, 71, 0.72); --wm-fm-icon-hover: #1b2947; --wm-fm-item-bg: rgba(27, 41, 71, 0.04); --wm-fm-item-hover-bg: rgba(27, 41, 71, 0.08); --wm-fm-item-hover-border: rgba(27, 41, 71, 0.22); --wm-fm-item-hover-glow: rgba(27, 41, 71, 0.16); --wm-fm-tip-bg: rgba(255, 255, 255, 0.85); --wm-fm-tip-border: rgba(27, 41, 71, 0.16); --wm-fm-tip-color: #1b2947; --wm-fm-shimmer: rgba(27, 41, 71, 0.55); --wm-fm-focus: rgba(27, 41, 71, 0.75); } wm-float-menu { position: fixed; top: 50%; right: 3rem; z-index: 8; opacity: 0; transform: translateY(-50%) translateX(2.4rem) scale(0.94); animation: wmFmEnter 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 3.3s forwards; } /* Loader already seen this session (see index.html's early inline script) — no 3s hold to wait out. */ html.wm-no-loader wm-float-menu { animation-delay: 0.15s; } @keyframes wmFmEnter { to { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); } } @media (prefers-reduced-motion: reduce) { wm-float-menu { animation: none; opacity: 1; transform: translateY(-50%); } } body.wm-menu-open wm-float-menu { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .wm-float-menu { --wm-fm-accent-1: 43, 80, 255; --wm-fm-accent-2: 138, 92, 255; position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem 0.7rem; border-radius: 999px; background: var(--wm-fm-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--wm-fm-border); box-shadow: inset 0 1px 0 var(--wm-fm-highlight), inset 0 0 0 1px rgba(255, 255, 255, 0.03), var(--wm-fm-shadow-lift); transform: translate(var(--wm-fm-px, 0px), var(--wm-fm-py, 0px)); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), gap 0.25s cubic-bezier(0.4, 0, 0.2, 1), padding 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease; } /* Slight expansion on hover, per spec */ .wm-float-menu:hover { gap: 0.65rem; padding: 1.2rem 0.9rem; } /* Ambient shimmer that slowly travels the border. @property lets the browser tween the conic angle smoothly; browsers without it just keep the shimmer static at its start position (no console error either way). */ @property --wm-fm-angle { syntax: ""; inherits: false; initial-value: 0deg; } .wm-float-menu::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient( from var(--wm-fm-angle, 0deg), transparent 0%, var(--wm-fm-shimmer) 6%, rgba(var(--wm-fm-accent-2), 0.7) 11%, transparent 22%, transparent 100% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.9; pointer-events: none; animation: wmFmShimmer 7s linear infinite; transition: background-color 0.28s ease; } @keyframes wmFmShimmer { to { --wm-fm-angle: 360deg; } } @media (prefers-reduced-motion: reduce) { .wm-float-menu::before { animation: none; } } .wm-float-menu__item { position: relative; display: flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; color: var(--wm-fm-icon); background: var(--wm-fm-item-bg); border: 1px solid transparent; transition: color 0.28s ease, background-color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .wm-float-menu__item:hover, .wm-float-menu__item:focus-visible { color: var(--wm-fm-icon-hover); background: var(--wm-fm-item-hover-bg); border-color: var(--wm-fm-item-hover-border); transform: scale(1.1); box-shadow: 0 0 1.6rem var(--wm-fm-item-hover-glow), 0 0.5rem 1.2rem rgba(0, 0, 0, 0.35); } .wm-float-menu__item:focus-visible { outline: 2px solid var(--wm-fm-focus); outline-offset: 2px; } .wm-float-menu__item.is-current { color: #fff; background: linear-gradient( 145deg, rgba(var(--wm-fm-accent-1), 0.4), rgba(var(--wm-fm-accent-2), 0.4) ); border-color: rgba(var(--wm-fm-accent-2), 0.55); box-shadow: 0 0 0 1px rgba(var(--wm-fm-accent-2), 0.35), 0 0.7rem 2rem rgba(var(--wm-fm-accent-1), 0.5); } .wm-float-menu__icon { display: flex; width: 1.5rem; height: 1.5rem; } .wm-float-menu__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .wm-float-menu__tip { position: absolute; right: calc(100% + 1.4rem); top: 50%; transform: translate(0.6rem, -50%); padding: 0.5rem 0.9rem; border-radius: 999px; white-space: nowrap; font: normal 700 1rem/1 var(--_font-accent); text-transform: uppercase; letter-spacing: 0.12em; color: var(--wm-fm-tip-color); background: var(--wm-fm-tip-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--wm-fm-tip-border); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease; } .wm-float-menu__item:hover .wm-float-menu__tip, .wm-float-menu__item:focus-visible .wm-float-menu__tip { opacity: 1; transform: translate(0, -50%); } /* Tablet: slightly smaller, closer to the edge. */ @media (min-width: 899px) and (max-width: 1199px) { wm-float-menu { right: 1.8rem; } .wm-float-menu { padding: 0.9rem 0.55rem; gap: 0.4rem; } .wm-float-menu__item { width: 3.2rem; height: 3.2rem; } .wm-float-menu__icon { width: 1.35rem; height: 1.35rem; } } /* Mobile: floating bottom dock instead of a right-edge rail. Same glass container/items — only position, entrance axis, and tooltip side change. */ @media (max-width: 898px) { wm-float-menu { top: auto; right: auto; bottom: calc(1.8rem + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%) translateY(1.6rem) scale(0.94); } @keyframes wmFmEnterUp { to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } wm-float-menu { animation-name: wmFmEnterUp; } @media (prefers-reduced-motion: reduce) { wm-float-menu { transform: translateX(-50%); } } .wm-float-menu { flex-direction: row; padding: 0.7rem; gap: 0.35rem; } .wm-float-menu:hover { gap: 0.5rem; padding: 0.8rem; } .wm-float-menu__item { width: 3.5rem; height: 3.5rem; } .wm-float-menu__tip { right: auto; left: 50%; bottom: calc(100% + 1.4rem); top: auto; transform: translate(-50%, 0.6rem); } .wm-float-menu__item:hover .wm-float-menu__tip, .wm-float-menu__item:focus-visible .wm-float-menu__tip { transform: translate(-50%, 0); } }