*, *::before, *::after { box-sizing: border-box; } :root { --edge: 20px; --shadow-text: 0 1px 6px rgba(0, 0, 0, 0.5); } html, body { margin: 0; padding: 0; height: 100%; } /* Background lives on only. A background on would paint over .hero-bg, which sits at a negative z-index. */ html { background: #0b0b0b; } body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #fff; overflow: hidden; -webkit-font-smoothing: antialiased; } /* ---------- background ---------- */ .hero-bg { position: fixed; inset: 0; z-index: -10; overflow: hidden; } /* One still, overscaled so the drift never exposes an edge. The two animations use separate CSS properties, so they compose instead of overwriting each other, and their durations are deliberately not multiples of one another — the combined pattern takes minutes to repeat and never reads as a metronome. */ .bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; scale: 1.06; animation: drift 41s ease-in-out infinite alternate, sway 29s ease-in-out infinite alternate; will-change: translate, rotate; } @keyframes drift { from { translate: -0.8% 0.5%; } to { translate: 0.8% -0.5%; } } @keyframes sway { from { rotate: -0.12deg; } to { rotate: 0.12deg; } } /* Top and bottom only, to keep the fixed UI readable. The middle stays clear so the artwork reads on its own. */ .scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 58%, rgba(0,0,0,0.55) 100%); } /* ---------- film grain ---------- */ /* Above the artwork at -10, below the UI. Overlay blending lifts the flat painting without washing out the whites in the player. */ .grain { position: fixed; inset: 0; z-index: -5; pointer-events: none; opacity: 0.4; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); } /* ---------- top bar ---------- */ /* Centred and large, the way saloon.wtf hangs its wordmark near the top of the frame rather than in a corner. The height is a variable because it is tuned to this painting: it drops the title into the clear band of marigold wall, below the shrine picture and above the row of kids, so it covers neither the deity nor the langoor's face. */ .brand { position: fixed; top: var(--brand-y, 23%); left: 50%; translate: -50% -50%; z-index: 20; width: calc(100% - var(--edge) * 2); text-align: center; } .brand-name { margin: 0; font-family: "Rozha One", Mukta, serif; font-weight: 400; font-size: clamp(58px, 9vw, 108px); line-height: 1; letter-spacing: 0; filter: drop-shadow(0 4px 18px rgba(0,0,0,0.55)); } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; background: rgba(255,255,255,0.07); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); font-family: Mukta, Inter, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: rgba(255,255,255,0.9); font-variant-numeric: tabular-nums; } /* The wordmark is centred on this page, so the status pill keeps the top-left corner to itself. */ .status { position: fixed; top: calc(var(--edge) + env(safe-area-inset-top)); left: var(--edge); z-index: 20; } .badge-dot { width: 5px; height: 5px; border-radius: 999px; background: #fff; animation: ping 2.6s ease-in-out infinite; } @keyframes ping { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .links { position: fixed; top: calc(var(--edge) + env(safe-area-inset-top)); right: var(--edge); z-index: 20; display: flex; gap: 8px; filter: drop-shadow(var(--shadow-text)); } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; transition: opacity 0.2s ease, transform 0.1s ease; } .pill:hover { opacity: 0.8; } .pill:active { transform: scale(0.95); } .pill-arrow { display: inline-flex; rotate: -45deg; opacity: 0.5; transition: opacity 0.2s ease; } .pill:hover .pill-arrow { opacity: 0.9; } /* ---------- player ---------- */ .player { position: fixed; left: 50%; bottom: calc(var(--edge) + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 16px; width: min(640px, calc(100vw - var(--edge) * 2)); padding: 12px 16px; border-radius: 999px; background: rgba(28, 24, 22, 0.44); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); } .disc { position: relative; flex: 0 0 auto; width: 68px; height: 68px; border-radius: 999px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.14); animation: spin 7s linear infinite; animation-play-state: paused; } .player.is-playing .disc { animation-play-state: running; } .disc img { display: block; width: 100%; height: 100%; object-fit: cover; } .disc-sheen { position: absolute; inset: 0; border-radius: 999px; background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 0 2px, rgba(0,0,0,0.05) 2px 4px), linear-gradient(115deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 62%, rgba(255,255,255,0.14) 100%); mix-blend-mode: screen; pointer-events: none; } .disc-hole { position: absolute; top: 50%; left: 50%; width: 26%; height: 26%; transform: translate(-50%, -50%); border-radius: 999px; background: rgba(18,16,15,0.92); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 0 0 3px rgba(255,255,255,0.06); } @keyframes spin { to { rotate: 360deg; } } .meta { flex: 1 1 auto; min-width: 0; } .title, .artist { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .artist { margin-top: 1px; font-size: 14px; color: rgba(255,255,255,0.7); } .seek { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 14px; margin: 6px 0 0; background: transparent; cursor: pointer; } .seek::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(to right, #fff var(--progress, 0%), rgba(255,255,255,0.28) var(--progress, 0%)); } .seek::-moz-range-track { height: 4px; border-radius: 999px; background: linear-gradient(to right, #fff var(--progress, 0%), rgba(255,255,255,0.28) var(--progress, 0%)); } /* The thumb only appears on hover, so the resting state is a clean hairline. */ .seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 999px; background: #fff; opacity: 0; transition: opacity 0.15s ease; } .seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 999px; background: #fff; opacity: 0; transition: opacity 0.15s ease; } .player:hover .seek::-webkit-slider-thumb, .seek:focus-visible::-webkit-slider-thumb { opacity: 1; } .player:hover .seek::-moz-range-thumb, .seek:focus-visible::-moz-range-thumb { opacity: 1; } .time { margin-top: 2px; font-size: 12px; color: rgba(255,255,255,0.65); font-variant-numeric: tabular-nums; } .controls { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; } .ctl { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #fff; cursor: pointer; transition: opacity 0.2s ease, transform 0.1s ease, background 0.2s ease; } .ctl:hover { background: rgba(255,255,255,0.12); } .ctl:active { transform: scale(0.92); } .ctl.play { width: 52px; height: 52px; background: #fff; color: #16130f; box-shadow: 0 4px 14px rgba(0,0,0,0.28); } .ctl.play:hover { background: #fff; opacity: 0.9; } .ctl.play .i-pause { display: none; } .player.is-playing .ctl.play .i-play { display: none; } .player.is-playing .ctl.play .i-pause { display: block; } :focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* ---------- hidden youtube host ---------- */ .yt-host { position: fixed; width: 1px; height: 1px; bottom: 0; left: 0; opacity: 0; pointer-events: none; overflow: hidden; } @media (prefers-reduced-motion: reduce) { .disc, .bg-img, .badge-dot { animation: none !important; } } /* ---------- mobile ---------- */ @media (max-width: 767px) { :root { --edge: 16px; } .brand { --brand-y: 21%; } .pill { padding: 10px; } .pill-label, .pill-arrow { display: none; } .player { gap: 12px; padding: 10px 12px; } .disc { width: 60px; height: 60px; } .title { font-size: 15px; } .artist { font-size: 13px; } .ctl { width: 32px; height: 32px; } .ctl.play { width: 48px; height: 48px; } .seek::-webkit-slider-thumb { opacity: 1; } .seek::-moz-range-thumb { opacity: 1; } } @media (max-width: 400px) { .controls { gap: 2px; } .ctl { width: 30px; height: 30px; } }