/* site/audio.css — the soundtrack pill (window.PhosAudio) * * A small fixed pill bottom-left: playing bars, the track title in small * caps, mute (M), next. Dark translucent ground, one hairline. Colours * come from the shell's variables with fallbacks; fonts are loaded by the * shell (IBM Plex Mono / Inter) and fall back to system stacks. Fades to * nothing while , returns on hover. */ .phos-audio { --pa-ink: var(--ink, #e6eaf5); --pa-muted: var(--muted, #8b93ad); --pa-line: var(--line, #1c2338); --pa-accent: var(--accent, #8ab4ff); --pa-ground: var(--ground, #07090f); --pa-h: 32px; position: fixed; left: max(18px, env(safe-area-inset-left, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: 10px; min-height: var(--pa-h); max-width: min(72vw, 420px); padding: 0 4px 0 14px; border: 1px solid var(--pa-line); border-radius: 999px; background: rgba(7, 9, 15, 0.72); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px rgba(0, 0, 0, 0.35); color: var(--pa-ink); font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 11px; line-height: 1; user-select: none; -webkit-user-select: none; opacity: 1; transition: opacity 600ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); } /* phones: no blur behind a fixed pill (it re-composites the page on every scroll frame); a heavier ground reads the same */ @media (hover: none) { .phos-audio { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(7, 9, 15, 0.86); } } /* before enter(): present in the DOM (the title is already recorded), but out of the way — the gate owns the screen */ .phos-audio.is-pre { opacity: 0; pointer-events: none; transform: translateY(6px); } /* the shell's idle state: fade to 0, return on hover / focus */ body.idle .phos-audio { opacity: 0; } body.idle .phos-audio:hover, body.idle .phos-audio:focus-within { opacity: 1; } /* ---- playing bars -------------------------------------------------- */ .phos-audio__bars { display: inline-flex; align-items: flex-end; gap: 2px; width: 12px; height: 10px; flex: none; color: var(--pa-accent); } .phos-audio__bars i { display: block; width: 2px; height: 3px; background: currentColor; border-radius: 1px; opacity: 0.55; transform-origin: bottom; } .phos-audio.is-playing .phos-audio__bars i { opacity: 1; animation: phos-audio-bar 1.1s ease-in-out infinite; } .phos-audio.is-playing .phos-audio__bars i:nth-child(2) { animation-duration: 0.9s; animation-delay: -0.35s; } .phos-audio.is-playing .phos-audio__bars i:nth-child(3) { animation-duration: 1.3s; animation-delay: -0.7s; } @keyframes phos-audio-bar { 0%, 100% { height: 3px; } 50% { height: 10px; } } .phos-audio.is-muted .phos-audio__bars, .phos-audio.is-stopped .phos-audio__bars { color: var(--pa-muted); } .phos-audio.is-ducked .phos-audio__bars { opacity: 0.5; } /* ---- title ---------------------------------------------------------- */ .phos-audio__title { font-variant: small-caps; font-variant-caps: small-caps; letter-spacing: 0.18em; font-weight: 500; color: var(--pa-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding-right: 2px; transition: color 300ms ease; } .phos-audio.is-muted .phos-audio__title, .phos-audio.is-stopped .phos-audio__title { color: var(--pa-muted); } .phos-audio__title:empty::before { content: "\2014"; /* — while nothing is chosen */ color: var(--pa-muted); } /* ---- buttons -------------------------------------------------------- */ .phos-audio__btn { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--pa-muted); font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0; line-height: 1; cursor: pointer; flex: none; transition: color 200ms ease, background-color 200ms ease; } .phos-audio__btn:hover { color: var(--pa-ink); background: rgba(230, 234, 245, 0.06); } .phos-audio__btn:active { background: rgba(230, 234, 245, 0.1); } .phos-audio__btn:focus { outline: none; } .phos-audio__btn:focus-visible { outline: 1px solid var(--pa-accent); outline-offset: 1px; } .phos-audio__mute { position: relative; } /* muted: the M struck through, hairline in accent */ .phos-audio.is-muted .phos-audio__mute { color: var(--pa-ink); } .phos-audio.is-muted .phos-audio__mute::after { content: ""; position: absolute; left: 7px; right: 7px; top: 50%; height: 1px; background: var(--pa-accent); transform: rotate(-28deg); } .phos-audio__next svg { display: block; } /* ---- touch ---------------------------------------------------------- */ @media (max-width: 640px) { .phos-audio { --pa-h: 40px; left: max(12px, env(safe-area-inset-left, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 24px); gap: 8px; padding: 0 2px 0 14px; font-size: 12px; } .phos-audio__btn { width: 40px; height: 40px; font-size: 12px; } .phos-audio__next svg { width: 13px; height: 13px; } } /* ---- reduced motion ------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .phos-audio { transition: opacity 200ms linear; transform: none; } .phos-audio.is-playing .phos-audio__bars i { animation: none; height: 7px; } }