/* * Oceanaire — drifting player. * * There is no build step and no framework. This file is served as written. */ :root { --ink: #f2f0ea; --ground: #0d1420; --accent: #fad719; /* * The height of the arrow. Everything else in the mark — the slashes, the * type, the gaps — is a fixed ratio of it, taken from the artwork, so this is * the only number to change to make the whole control bigger or smaller. * JavaScript overrides it per icon to give the field depth. */ --icon-size: 54px; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; background: var(--ground); color: var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; } /* * Sideways clipping belongs to alone, and there is deliberately no * overscroll-behavior anywhere. Both of those matter more than they look: * * Putting `overflow-x: hidden` on as well makes its own scroll * container — one with nothing to scroll, since it is exactly as tall as its * contents. Add `overscroll-behavior-y: none` and the wheel stops there * instead of passing up to the document, so the page only scrolled when the * pointer was over the scrollbar, which belongs to . Everywhere else the * wheel died on . Tested against the live site: removing * overscroll-behavior fixes it, from any point on the page. * * Icons still drift off both edges by design; clips that. */ html { overflow-x: hidden; } /* * No scrollbar. The page is a picture; a grey bar down the side of it is * furniture. Only the bar goes — the wheel, trackpad, touch, arrow keys and * Page Down all still scroll, which is only true because of the rule above. */ html, body { scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; } /* ---------------------------------------------------------------- stage --- */ /* * The stage is the whole video, at its own shape, however tall that makes the * page. Scrolling walks down the footage; the icons live inside the stage, so * they travel with it and stay where they were left relative to the water. * * min-height keeps a tall narrow window — a phone held upright — filled: there * the frame is already taller than it is wide, so the stage stops at one * screen and the sides are cropped instead. Nothing to scroll, because there * is nothing further down to see. */ .stage { position: relative; width: 100%; aspect-ratio: 3 / 4; min-height: 100vh; min-height: 100dvh; overflow: hidden; } .backdrop, .backdrop-veil { position: absolute; inset: 0; width: 100%; height: 100%; } .backdrop { object-fit: cover; object-position: center; /* Sits behind everything, and is never a tab stop. */ z-index: 0; pointer-events: none; } /* A slight darkening so pale icons stay legible over bright footage. */ .backdrop-veil { z-index: 1; pointer-events: none; background: radial-gradient( ellipse at center, rgba(6, 10, 18, 0.15) 0%, rgba(6, 10, 18, 0.45) 100% ); } /* * Exactly the stage, so JavaScript can read one element to know how tall the * world is and spread the icons over all of it. */ .field { position: absolute; inset: 0; z-index: 2; } /* ------------------------------------------------------------- colophon --- */ /* * At the foot of the video, so it arrives when you reach the bottom rather * than sitting over the picture the whole time. pointer-events: none keeps it * from swallowing a click on an icon drifting underneath. */ .colophon { position: absolute; left: 0; right: 0; bottom: 1.4rem; z-index: 3; text-align: center; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(242, 240, 234, 0.62); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75); pointer-events: none; } /* ------------------------------------------------------------- wordmark --- */ /* * Fixed to the middle of the window, so it holds still while the footage and * the icons scroll past it. A third of the window wide, matching the design. The clamp keeps it from * becoming unreadable on a phone or absurd on an ultrawide monitor. * * pointer-events: none matters: without it the wordmark would swallow clicks * on any icon drifting underneath it. */ .wordmark { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; width: clamp(220px, 33.3vw, 720px); /* Below the icons, so they still drift across the front of it. */ z-index: 1; pointer-events: none; } .wordmark img { display: block; width: 100%; height: auto; } /* ---------------------------------------------------------------- icons --- */ /* * The mark is two slashes and an arrow, taken from Dante's artwork. At rest the * slashes sit tight against the arrow. On hover the name grows out between * them, pushing the slashes left while the arrow stays exactly where it is. * * The arrow staying put is the whole point, and it is why the button is * positioned by its right edge (see the translateX(-100%) in app.js). If it * were positioned from the left, opening the name would shove the arrow across * the screen. */ .icon { position: absolute; top: 0; left: 0; z-index: 2; display: inline-flex; align-items: center; white-space: nowrap; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; /* Position is driven entirely by transform, which stays on the GPU. */ will-change: transform; -webkit-tap-highlight-color: transparent; /* Follows the silhouette, so the mark holds up over bright footage. */ filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.6)); } .icon svg { display: block; fill: currentColor; } .icon-slashes svg { height: calc(var(--icon-size) * 0.464); width: calc(var(--icon-size) * 0.5792); } .icon-arrow svg { height: var(--icon-size); width: calc(var(--icon-size) * 0.8816); } /* * Negative on purpose. The slashes and the arrow's tail are both slanted, so * their boxes overlap even though the ink does not: in the artwork the arrow's * box starts 122 units left of where the slashes' box ends. Anything less than * this and the mark falls apart into two pieces. */ .icon-arrow { margin-left: calc(var(--icon-size) * -0.1952); } /* * The name opens by animating a grid track from nothing to the width of its * own content. This is the one way to transition to "whatever the text * happens to measure" — width and max-width cannot animate to auto. */ .icon-name { display: grid; grid-template-columns: 0fr; transition: grid-template-columns 300ms cubic-bezier(0.2, 0.7, 0.3, 1); } .icon-name-inner { overflow: hidden; min-width: 0; /* Both taken off the artwork, and both are box measurements rather than the gaps you see: the right one has to cancel the arrow's negative margin. */ padding: 0 calc(var(--icon-size) * 0.175) 0 calc(var(--icon-size) * -0.02); /* * The artwork is Helvetica Bold Oblique squeezed to about 80% of its width — * measured off it: the stems and the word are both 0.8 of what upright * Helvetica Bold would give. So ask for a narrow grotesque first and let the * stack fall back through whatever a machine actually has. */ font-family: "Arial Narrow", "Helvetica Neue", "TeX Gyre Heros Cn", "Liberation Sans Narrow", Helvetica, Arial, sans-serif; font-stretch: condensed; font-size: calc(var(--icon-size) * 0.6); font-weight: 700; font-style: italic; line-height: 1; /* letter-spacing carries after the last character too, which is why the right padding below is a little smaller than the artwork's. */ letter-spacing: 0.02em; text-transform: uppercase; opacity: 0; transition: opacity 200ms ease; } /* Hover and keyboard focus are treated identically on purpose: everything reachable with a mouse must be reachable with a keyboard. */ .icon:hover .icon-name, .icon:focus-visible .icon-name, .icon.is-playing .icon-name { grid-template-columns: 1fr; } .icon:hover .icon-name-inner, .icon:focus-visible .icon-name-inner, .icon.is-playing .icon-name-inner { opacity: 1; } .icon:focus { outline: none; } .icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; } /* Whatever is sounding holds still, keeps its name open, and breathes. */ .icon.is-playing { color: var(--accent); } .icon.is-playing .icon-arrow svg { animation: breathe 2.6s ease-in-out infinite; } @keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* * Used for a single frame by app.js to measure how wide an icon would be with * its name open, so a playing icon can be slid fully into view. Never seen. */ .icon.is-measuring .icon-name { grid-template-columns: 1fr; } .icon.is-measuring, .icon.is-measuring * { transition: none !important; } /* --------------------------------------------------------- other states --- */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .noscript { position: relative; z-index: 3; max-width: 32rem; margin: 18vh auto; padding: 0 1.5rem; text-align: center; line-height: 1.7; } .noscript a { color: var(--accent); } @media (max-width: 640px) { :root { --icon-size: 42px; } } /* * Anyone who has asked their system to reduce motion gets a still frame and a * calm arrangement of icons instead of drifting ones. Everything still works; * nothing moves — and every name is open from the start, since there is no * drifting to interrupt. */ @media (prefers-reduced-motion: reduce) { /* The still layout starts near the top of the page, so the wordmark moves up out of its way rather than sitting under a grid of icons. */ .wordmark { top: auto; bottom: 8vh; transform: translateX(-50%); } .icon-name { grid-template-columns: 1fr; transition: none; } .icon-name-inner { opacity: 1; transition: none; } .icon.is-playing .icon-arrow svg { animation: none; } }