/* Beatomat — the site chassis, shared by the library (/) and a mix page (/mix). Every token, radius, shadow and type size here is lifted from docs/design/beatomat-library.html; where a rule is new it is because the real catalogue needs something the placeholder page did not have (a filter notice, a not-found state, a link inside a track row). Scoping: the deck's app.css owns the same generic names (.wrap, .top, .mark, .readout, .credit, .art). Every component rule below is written under `.site`, which only these pages set on , so the two files can live in one document later without either one restyling the other. The custom properties are the same names with the same values as app.css on purpose — one identity, declared twice rather than shared through a third file nobody links. */ :root { --paper: #f1f2ef; --card: #ffffff; --ink: #14160f; --ink-2: #5f6459; --hair: #dcded8; --screen: #14160f; --accent: #0b5c50; --face: 'Archivo', ui-sans-serif, system-ui, sans-serif; --lift: 0 1px 2px rgba(20, 22, 15, .05), 0 12px 28px -18px rgba(20, 22, 15, .35); --lift-2: 0 2px 4px rgba(20, 22, 15, .06), 0 30px 60px -30px rgba(20, 22, 15, .45); } .site * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body.site { background: var(--paper); color: var(--ink); font-family: var(--face); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } .site img { display: block; max-width: 100%; } .site a { color: inherit; text-decoration: none; } .site .wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px 120px; } .site .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* facts about the thing, set in the same face at a smaller size */ .site .facts { font-size: 13.5px; color: var(--ink-2); letter-spacing: .01em; } /* The skip link. Off-screen until it takes focus, then the first thing on the page — without it every keyboard user tabs through the whole header on every page before reaching anything they came for. */ .skip { position: absolute; left: -9999px; top: 0; z-index: 50; background: var(--card); color: var(--ink); border-radius: 0 0 10px 0; padding: 12px 18px; font-size: 14px; font-weight: 500; box-shadow: var(--lift-2); } .skip:focus { left: 0; } /* ── header ───────────────────────────────────────────── */ .site .top { display: flex; align-items: center; gap: 36px; padding: 26px 0 32px; } .site .mark { display: inline-flex; align-items: center; gap: 1px; font-weight: 700; font-size: 20px; letter-spacing: -.02em; } /* The O is the logo on these pages, so it always wears the accent — the approved design carries `live` on the header mark for exactly that reason. It reads as a status lamp only on the deck, where something is either playing or not; a library page has no playback state to report, and an ink-coloured ring there just looks like the brand rendered wrong. app.css keeps the lamp behaviour for /live. */ .site .mark .ring { width: 15px; height: 15px; border-radius: 50%; border: 3px solid var(--accent); background: var(--accent); box-shadow: 0 0 0 3px rgba(11, 92, 80, .16); margin: 0 1.5px; flex: none; } .site .nav { display: flex; gap: 26px; font-size: 15px; color: var(--ink-2); } .site .nav a.on { color: var(--ink); font-weight: 500; } .site .nav a:hover { color: var(--ink); } /* The deck is the point of the site, so it gets a control and not a nav item. Nothing is playing on a page that is not the deck, so the button reads as an invitation: the lamp holds still and the label offers. */ .site .live-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 13px; background: var(--screen); color: var(--paper); border: 0; border-radius: 999px; padding: 9px 20px 9px 16px; font-family: var(--face); font-size: 14px; cursor: pointer; text-align: left; } .site .live-btn:hover { background: #20241a; } .site .live-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .site .live-btn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 0 4px rgba(11, 92, 80, .28); animation: bm-beat 2.4s ease-in-out infinite; } .site .live-btn.idle .dot { animation: none; box-shadow: 0 0 0 4px rgba(11, 92, 80, .18); } @keyframes bm-beat { 0%, 100% { opacity: 1 } 50% { opacity: .35 } } .site .live-btn .txt { display: flex; flex-direction: column; line-height: 1.25; } .site .live-btn .txt em { font-style: normal; font-size: 11px; color: rgba(241, 242, 239, .55); } .site .live-btn .txt b { font-weight: 500; font-size: 14px; white-space: nowrap; } .site .live-btn .arrow { opacity: .5; font-size: 15px; } /* provenance: who built the set. the disclosure, as information. */ .site .built { font-size: 12px; color: var(--ink-2); letter-spacing: .01em; display: inline-flex; align-items: center; gap: 7px; } .site .built::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; } .site .built.human::before { background: var(--ink-2); } /* ── page head ────────────────────────────────────────── */ .site .head { padding: 4px 0 34px; max-width: 60ch; } .site .head h1 { font-size: clamp(38px, 5.2vw, 62px); line-height: 1.02; letter-spacing: -.035em; margin: 0 0 14px; font-weight: 700; } .site .head p { margin: 0; color: var(--ink-2); font-size: 18px; max-width: 52ch; } /* ── hero ─────────────────────────────────────────────── */ .site .hero { display: grid; grid-template-columns: 1.35fr 1fr; background: var(--card); border-radius: 20px; overflow: hidden; box-shadow: var(--lift-2); margin-bottom: 64px; } /* No max-height: the plate is one half of a two-column card and has to be as tall as the other half. Capping it left a white band under the artwork at every desktop width, because the side column is taller than 440px as soon as the blurb runs to three lines. min-height is the floor for the stacked layout, where there is nothing beside it to match. */ .site .hero .plate { position: relative; background: var(--screen); min-height: 380px; } /* Absolute, so the artwork fills whatever height the row ends up being. As a normal flow child, `height: 100%` against an auto-height parent resolves to auto — the square artwork rendered at its full 570px, which is what the old max-height was really hiding. */ .site .hero .plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .94; } .site .hero .stamp { position: absolute; top: 20px; left: 20px; font-size: 12px; font-weight: 500; background: var(--paper); color: var(--ink); padding: 7px 13px; border-radius: 4px; } .site .hero .side { padding: 36px 38px 32px; display: flex; flex-direction: column; } .site .hero h1, .site .hero h2 { font-size: 33px; line-height: 1.08; letter-spacing: -.025em; margin: 10px 0 12px; font-weight: 600; overflow-wrap: anywhere; } .site .hero .desc { color: var(--ink-2); margin: 0 0 26px; font-size: 16px; } /* the readout stays dark — the one rule the whole system runs on */ .site .readout { background: var(--screen); border-radius: 12px; padding: 18px 20px; margin-bottom: 24px; } .site .readout .k { font-size: 12px; color: rgba(241, 242, 239, .55); } .site .readout .v { color: var(--paper); font-size: 38px; font-weight: 700; letter-spacing: -.01em; line-height: 1.05; margin-top: 5px; } .site .readout .v small { font-size: 15px; color: rgba(241, 242, 239, .5); font-weight: 400; margin-left: 10px; letter-spacing: 0; } /* `margin-top: auto` pinned the buttons to the bottom of the column, which worked when the plate capped the hero's height. With the cap gone (it was what left a white band under the artwork) the column is as tall as its own content, and pinning left a 230px hole in the middle of it. */ .site .row { display: flex; align-items: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; } .site .play { display: inline-flex; align-items: center; gap: 11px; background: var(--accent); color: #fff; border: 0; border-radius: 999px; font-family: var(--face); font-size: 15px; font-weight: 500; padding: 14px 24px; cursor: pointer; } .site .play:hover { background: #0a4c43; } .site .play:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .site .ghost { display: inline-flex; align-items: center; border: 1px solid var(--hair); background: var(--card); border-radius: 999px; padding: 13px 20px; font-family: var(--face); font-size: 15px; color: var(--ink); cursor: pointer; } .site .ghost:hover { border-color: var(--ink-2); } /* ── sections ─────────────────────────────────────────── */ .site .sec { display: flex; align-items: baseline; gap: 16px; margin: 0 0 20px; } .site .sec h3 { font-size: 25px; letter-spacing: -.02em; margin: 0; font-weight: 600; overflow-wrap: anywhere; } .site .sec .more { margin-left: auto; font-size: 14px; color: var(--accent); font-weight: 500; white-space: nowrap; background: none; border: 0; padding: 6px 0; font-family: var(--face); cursor: pointer; } .site .sec .more:hover { text-decoration: underline; text-underline-offset: 2px; } /* The count is a fact, not a control. It used to be a span wearing the link colour, which invited a click that did nothing. */ .site .sec .tally { margin-left: auto; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; } .site .sec .tally + .more { margin-left: 16px; } /* A capped shelf keeps every card in the DOM and hides the overflow, so the browser's own Find still reaches them and opening the shelf is a class toggle rather than a rebuild. */ .site .grid.capped > *:nth-child(n+9) { display: none; } /* The line under a shelf heading that says what the shelf is for. Sits between the heading and the grid, so it is read before the cards rather than after. */ .site .pitch { margin: -8px 0 20px; max-width: 62ch; font-size: 15px; color: var(--ink-2); } .site .pitch[hidden], .site .sec[hidden], .site .grid[hidden] { display: none; } /* ── mood grid — cover art, because it is the content ─── */ .site .moods { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 64px; } .site .mood { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 1; background: var(--screen); box-shadow: var(--lift); } .site .mood img { width: 100%; height: 100%; object-fit: cover; opacity: .86; transition: transform .5s ease, opacity .3s ease; } .site .mood:hover img { transform: scale(1.04); opacity: 1; } .site .mood.on { outline: 2px solid var(--accent); outline-offset: 2px; } .site .mood .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 16px 14px; background: linear-gradient(transparent, rgba(20, 22, 15, .86) 58%); color: #fff; } .site .mood .cap b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.015em; } .site .mood .cap span { font-size: 12.5px; opacity: .78; } /* ── mix cards ────────────────────────────────────────── */ .site .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 22px; margin-bottom: 64px; } .site .mix { display: block; background: var(--card); border-radius: 16px; overflow: hidden; box-shadow: var(--lift); } .site .mix:hover { box-shadow: var(--lift-2); } .site a.mix:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .site .mix .art { position: relative; aspect-ratio: 1; background: var(--screen); } .site .mix .art img { width: 100%; height: 100%; object-fit: cover; } .site .mix .len { position: absolute; right: 10px; bottom: 10px; font-size: 12px; font-weight: 500; background: rgba(20, 22, 15, .85); color: #fff; padding: 5px 9px; border-radius: 5px; } .site .mix .body { padding: 15px 17px 17px; } .site .mix .tag { font-size: 12.5px; color: var(--accent); font-weight: 500; display: flex; align-items: center; gap: 7px; } /* Which shelf a set is from, as a mark rather than a second line of text: a hollow dot for the discoveries, a filled one for the names you know. The difference has to survive a mood filter that puts both in one grid. */ .site .mix .tag i { width: 6px; height: 6px; border-radius: 50%; flex: none; border: 1.5px solid var(--accent); } .site .mix .tag.known { color: var(--ink); } .site .mix .tag.known i { background: var(--accent); border-color: var(--accent); } .site .mix h4 { margin: 6px 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; overflow-wrap: anywhere; } .site .mix p { margin: 0 0 11px; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; } /* ── tracklist: the attribution the licence requires ──── */ .site .panel { background: var(--card); border-radius: 20px; box-shadow: var(--lift); overflow: hidden; } .site .panel .ph { padding: 24px 28px 18px; border-bottom: 1px solid var(--hair); } .site .panel .ph h3 { margin: 0 0 5px; font-size: 23px; font-weight: 600; letter-spacing: -.02em; } .site .panel .ph p { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; } .site .tr { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 18px; align-items: center; padding: 12px 28px; border-bottom: 1px solid var(--hair); } .site .tr:last-of-type { border-bottom: 0; } .site .tr:hover { background: #f7f8f5; } .site .tr .n { font-size: 13px; color: var(--ink-2); } .site .tr .t b { display: block; font-weight: 500; font-size: 15.5px; overflow-wrap: anywhere; } .site .tr .t span { display: block; color: var(--ink-2); font-size: 13.5px; overflow-wrap: anywhere; } /* Every Audius row links back to the track and names the artist: OML §1.5, which is why the tracklist exists at all. */ .site .tr .t a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--hair); } .site .tr .t a:hover { text-decoration-color: var(--accent); color: var(--accent); } .site .tr .mo { font-size: 13px; color: var(--ink-2); } .site .tr .at { font-size: 13.5px; color: var(--ink-2); } .site .credit { padding: 16px 28px 22px; color: var(--ink-2); font-size: 12.5px; line-height: 1.6; margin: 0; } .site .credit a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } /* ── states the placeholder page never had ────────────── */ /* a filter that is on has to say so and offer the way out */ .site .notice { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--hair); border-radius: 12px; padding: 13px 18px; margin: 0 0 22px; font-size: 14px; color: var(--ink-2); } .site .notice[hidden] { display: none; } .site .notice b { color: var(--ink); font-weight: 500; } .site .notice a { color: var(--accent); font-weight: 500; margin-left: auto; } .site .notice a:hover { text-decoration: underline; text-underline-offset: 2px; } .site .empty { background: var(--card); border-radius: 16px; box-shadow: var(--lift); padding: 34px 28px; color: var(--ink-2); font-size: 15px; margin-bottom: 64px; } .site .empty h2 { margin: 0 0 8px; font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; } .site .empty p { margin: 0 0 16px; } .site .crumb { font-size: 14px; color: var(--ink-2); margin: 0 0 18px; } .site .crumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; } .site .foot { margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--hair); font-size: 12.5px; color: var(--ink-2); } /* ── the account corner ───────────────────────────────── */ /* Ships signed-out in the HTML and is filled in after /api/me answers, so it has to hold its shape at either width without moving the deck button. */ .site .acct { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; } .site .acct-in { color: var(--ink-2); white-space: nowrap; } .site .acct-in:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .site .acct-who { color: var(--ink); max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .site .acct-out { border: 1px solid var(--hair); background: var(--card); border-radius: 999px; padding: 6px 13px; font-family: var(--face); font-size: 13px; color: var(--ink-2); cursor: pointer; } .site .acct-out:hover { border-color: var(--ink-2); color: var(--ink); } .site .acct-out:focus-visible, .site .acct-in:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ── the save control ─────────────────────────────────── */ /* The card is a link and this is a button, so they are siblings in a positioned cell rather than one inside the other. */ .site .cell { position: relative; display: block; } .site .save { border: 1px solid var(--hair); background: var(--card); border-radius: 999px; font-family: var(--face); color: var(--ink); cursor: pointer; } .site .save:hover { border-color: var(--ink-2); } .site .save:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .site .save[disabled] { opacity: .6; cursor: default; } .site .save.on { background: var(--accent); border-color: var(--accent); color: #fff; } /* on a card: pinned over the artwork, dark enough to read on any cover */ .site .save.pin { position: absolute; top: 10px; left: 10px; padding: 6px 12px; font-size: 12.5px; font-weight: 500; background: rgba(20, 22, 15, .85); border-color: transparent; color: #fff; } .site .save.pin:hover { background: rgba(20, 22, 15, .95); } .site .save.pin.on { background: var(--accent); } /* in a hero row: the same size as the ghost button beside it */ .site .ghost.save { padding: 13px 20px; font-size: 15px; } .site .ghost.small { padding: 9px 16px; font-size: 13.5px; } /* a saved slug the library no longer has: still a card, plainly empty */ .site .mix.gone { background: var(--card); border: 1px dashed var(--hair); box-shadow: none; } .site .mix.gone .tag { color: var(--ink-2); } .site .cell .ghost.small { margin-top: 4px; } /* Touch targets. The pin, the sign-out and the deck button are all under 44px tall by design — they are small on purpose — so the hit area grows without the ink moving: a transparent box centred on the control. */ @media (pointer: coarse) { .site .save.pin, .site .acct-out, .site .acct-in, .site .sec .more { position: relative; } .site .save.pin::after, .site .acct-out::after, .site .acct-in::after, .site .sec .more::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 44px; min-height: 44px; width: 100%; height: 100%; } } /* Every control, one ring. Components used to bring their own or go without; going without means the browser's default, which is invisible against this paper on several of them. */ .site a:focus-visible, .site button:focus-visible, .site input:focus-visible, .site [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ── sign in / create an account ──────────────────────── */ .site .auth { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; margin-bottom: 64px; align-items: start; } .site .card { background: var(--card); border-radius: 20px; box-shadow: var(--lift); padding: 30px 30px 26px; display: flex; flex-direction: column; } .site .card h2 { margin: 0 0 6px; font-size: 25px; font-weight: 600; letter-spacing: -.025em; } .site .card label { font-size: 13px; color: var(--ink-2); margin: 18px 0 6px; letter-spacing: .01em; } .site .card input { font-family: var(--face); font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--hair); border-radius: 10px; padding: 12px 14px; width: 100%; } .site .card input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } .site .card .hint { margin: 7px 0 0; font-size: 12.5px; color: var(--ink-2); } .site .card .play.wide { justify-content: center; margin-top: 22px; } .site .card .alt { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-2); text-align: center; } .site .card .alt a { color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; } /* Errors sit with the field that caused them, never in an alert(). */ .site .err { margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; background: #fbeeea; border: 1px solid #e8cfc6; color: #7a2e19; font-size: 13.5px; line-height: 1.45; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; } .site .err[hidden] { display: none; } .site .err .err-link { color: #7a2e19; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 900px) { .site .wrap { padding: 0 22px 100px; } .site .hero { grid-template-columns: 1fr; } .site .hero .plate { min-height: 240px; } .site .hero .side { padding: 26px 24px 24px; } /* The nav stays. It is two short words, and hiding it took away the only route to /saved on a phone — the deck button is not a nav, and the account corner does not link there either. The header wraps instead (below), which costs a row and keeps the site navigable. */ .site .top { flex-wrap: wrap; row-gap: 12px; } .site .nav { order: 3; width: 100%; gap: 20px; } .site .acct { margin-left: auto; } .site .live-btn { padding: 8px 14px 8px 12px; gap: 10px; } .site .live-btn .txt em { display: none; } .site .live-btn .txt b { font-size: 13px; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; } .site .tr { grid-template-columns: 28px 1fr auto; gap: 12px; padding: 11px 20px; } .site .tr .mo { display: none; } .site .panel .ph { padding: 20px 20px 16px; } .site .credit { padding: 16px 20px 20px; } } /* 380px: the mood tiles stop being able to hold two columns, and the header gap has to give before the wordmark and the deck button collide. */ @media (max-width: 430px) { .site .top { gap: 14px; padding: 20px 0 26px; } .site .moods { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .site .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .site .mix .body { padding: 12px 13px 14px; } .site .mix h4 { font-size: 16px; } .site .hero .side { padding: 22px 18px 20px; } .site .readout .v { font-size: 32px; } .site .play, .site .ghost { flex: 1 1 auto; justify-content: center; } /* Wrapping is already on from 900px down (the nav needs its own row); here the account corner only has to tighten. A sign-out control half off the screen is not a control. */ .site .acct { gap: 8px; } .site .acct-who { max-width: 34vw; } .site .acct-out { padding: 6px 12px; } .site .card { padding: 24px 20px 22px; } .site .auth { grid-template-columns: 1fr; gap: 16px; } .site .save.pin { top: 7px; left: 7px; padding: 5px 10px; font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .site * { animation: none !important; transition: none !important; } }