/* soundscapes - design tokens and the base components every page shares. * * One theme: light text on dark glass, floating over the animated background * canvas (#bg, drawn by visual.js). The background changes with the mix - it * can be a bright beach or a black night. Here, for the sign-in and users * pages, the glass is dark with a strong blur, which keeps text legible on * every scene. The mixer (app.css) uses see-through, hardly blurred glass * instead, whose opacity visual.js sets from the painting (--glass-a), and * lighter greys (--ink-2, --ink-3) that let that glass be clearer. * * --accent is live: visual.js rewrites --accent / --accent-rgb on from * the colours of whatever is playing, so buttons, sliders and glows follow * the mix. Everything that should follow it must use the variable, never a * literal teal. */ @font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); } :root { color-scheme: dark; /* The deep sea of the ipBerg deck: #15505A at the surface, #0A1E27 below. */ --sea-top: #15505A; --sea-deep: #0A1E27; --bg: #0A1E27; --ink: #EAF4F3; --ink-2: rgba(234, 244, 243, .74); /* .64, not less: small grey text must still reach 4.5:1 over the brightest scenes (a summer beach lifts the glass to slate grey). */ --ink-3: rgba(234, 244, 243, .64); --ink-4: rgba(234, 244, 243, .30); /* Rewritten at run time by visual.js. rgb triplet kept alongside so translucent tints can be built from it: rgba(var(--accent-rgb), .2). */ --accent: #5CC8C0; --accent-rgb: 92, 200, 192; --accent-ink: #06201F; /* text on a solid accent fill */ --danger: #FF8A7A; --danger-rgb: 255, 138, 122; --ok: #86DDA0; --glass: rgba(7, 18, 26, .58); --glass-strong: rgba(7, 18, 26, .78); --glass-soft: rgba(255, 255, 255, .06); --glass-line: rgba(255, 255, 255, .11); --glass-line-strong: rgba(255, 255, 255, .2); --blur: 18px; --r-xl: 24px; --r-lg: 18px; --r-md: 13px; --r-sm: 9px; --r-pill: 999px; --shadow: 0 18px 50px -18px rgba(0, 0, 0, .6), 0 2px 10px rgba(0, 0, 0, .18); --ring: 0 0 0 3px rgba(var(--accent-rgb), .45); --font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-cond: "Barlow Condensed", "Barlow", system-ui, sans-serif; --gutter: clamp(16px, 2.2vw, 32px); --ease: cubic-bezier(.2, .7, .2, 1); /* Safe areas: notch and home indicator when installed or in landscape. */ --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); } body { margin: 0; min-height: 100vh; min-height: 100dvh; background: linear-gradient(180deg, var(--sea-top) 0%, var(--sea-deep) 70%) fixed, var(--bg); color: var(--ink); font: 400 16px/1.45 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; } /* The animated background. Fixed, behind everything, never interactive. */ #bg { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; display: block; pointer-events: none; } /* :where() keeps this at zero specificity, so a child of that sets its own position (the users page's sticky top bar) still gets it. */ :where(body > :not(#bg)) { position: relative; z-index: 1; } h1, h2, h3 { font-family: var(--font-cond); font-weight: 600; letter-spacing: .01em; line-height: 1.1; margin: 0 0 .5em; } h1 { font-size: clamp(28px, 3.2vw, 36px); } h2 { font-size: 22px; } h3 { font-size: 18px; } p { margin: 0 0 .8em; } a { color: var(--accent); text-decoration: none; } code, .secret { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); } ::selection { background: rgba(var(--accent-rgb), .35); } /* ---------------------------------------------------------------- glass */ .glass { background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.25); backdrop-filter: blur(var(--blur)) saturate(1.25); box-shadow: var(--shadow); } /* No backdrop-filter (old Firefox ESR, some Android WebViews): a darker panel instead, so text never sits on the raw scene. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--glass-strong); } } /* ---------------------------------------------------------------- brand */ .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; } .brand-mark { width: 30px; height: 30px; display: block; flex: none; } .brand-word { font-family: var(--font-cond); font-weight: 600; font-size: 22px; letter-spacing: .02em; line-height: 1; } /* ---------------------------------------------------------------- buttons */ .btn { --btn-bg: var(--glass-soft); --btn-line: var(--glass-line-strong); --btn-ink: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--btn-line); background: var(--btn-bg); color: var(--btn-ink); font: 600 15px/1 var(--font); letter-spacing: .01em; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease), color .18s; -webkit-user-select: none; user-select: none; } .btn:active { transform: scale(.97); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; } .btn svg { width: 18px; height: 18px; flex: none; } .btn-primary { --btn-bg: var(--accent); --btn-line: transparent; --btn-ink: var(--accent-ink); } .btn-ghost { --btn-bg: transparent; --btn-line: transparent; --btn-ink: var(--ink-2); } .btn-danger { --btn-bg: rgba(var(--danger-rgb), .14); --btn-line: rgba(var(--danger-rgb), .45); --btn-ink: var(--danger); } .btn-small { min-height: 32px; padding: 0 12px; font-size: 13px; } .btn-block { width: 100%; } /* ---------------------------------------------------------------- forms */ .stack { display: flex; flex-direction: column; gap: 14px; } .field { display: flex; flex-direction: column; gap: 6px; } .field-label { font: 600 13px/1.2 var(--font); letter-spacing: .02em; color: var(--ink-2); } .input, select.input, textarea.input { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--glass-line-strong); background: rgba(0, 0, 0, .25); color: var(--ink); /* 16px, not less: iOS Safari zooms the page into any input under 16px. */ font: 400 16px/1.3 var(--font); transition: border-color .15s, box-shadow .15s, background .15s; } .input::placeholder { color: var(--ink-4); } /* background-color, not the shorthand: a select's arrow is a background image, and must survive the focus. */ .input:focus { outline: none; border-color: rgba(var(--accent-rgb), .8); box-shadow: var(--ring); background-color: rgba(0, 0, 0, .32); } /* The browser's own arrow is drawn in its own style (and colour); this one is two CSS gradients - a chevron in --ink-2 - so it needs no image. */ select.input { -webkit-appearance: none; appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; } select.input option { background: var(--bg); color: var(--ink); } .form-error, .flash-error { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r-md); background: rgba(var(--danger-rgb), .12); border: 1px solid rgba(var(--danger-rgb), .38); color: #FFD4CD; font-size: 14px; } .flash { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--r-md); font-size: 14px; } .flash-ok { background: rgba(134, 221, 160, .12); border: 1px solid rgba(134, 221, 160, .38); color: #D5F5DE; } .form-note { margin: 16px 0 0; color: var(--ink-3); font-size: 14px; } .secret { display: inline-block; padding: 3px 9px; border-radius: var(--r-sm); background: rgba(0, 0, 0, .35); border: 1px solid var(--glass-line-strong); font-size: 15px; letter-spacing: .04em; user-select: all; } form.inline { display: inline; margin: 0; } .inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .inline-form .field { flex: 1 1 180px; } /* As tall as the fields beside it, so tops and bottoms both line up. */ .inline-form .btn { min-height: 44px; } /* ---------------------------------------------------------------- auth pages */ .auth { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: calc(24px + var(--safe-t)) calc(var(--gutter) + var(--safe-r)) calc(24px + var(--safe-b)) calc(var(--gutter) + var(--safe-l)); } .auth-card { width: min(400px, 100%); padding: 30px 28px 26px; border-radius: var(--r-xl); } .auth-card .brand { margin-bottom: 26px; } .auth-card h1 { font-size: 30px; margin-bottom: 18px; } .auth-card .btn-block { margin-top: 6px; min-height: 46px; } /* ---------------------------------------------------------------- plain pages (users) */ .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: calc(8px + var(--safe-t)) calc(var(--gutter) + var(--safe-r)) 8px calc(var(--gutter) + var(--safe-l)); border-width: 0 0 1px; border-radius: 0; } .topbar-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } @media (max-width: 640px) { /* One row on a phone, never a sticky header three lines tall. */ .topbar-nav { flex-wrap: nowrap; gap: 0; } .topbar-nav .btn-small { padding: 0 8px; } } @media (max-width: 420px) { .topbar .brand-word { display: none; } } .page-main { width: min(1100px, 100%); margin: 0 auto; padding: 28px calc(var(--gutter) + var(--safe-r)) calc(40px + var(--safe-b)) calc(var(--gutter) + var(--safe-l)); display: flex; flex-direction: column; gap: 20px; } .panel { border-radius: var(--r-lg); padding: 22px 24px; } .panel > h2:first-child { margin-top: 0; } .table { width: 100%; border-collapse: collapse; font-size: 15px; } .table th, .table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--glass-line); vertical-align: middle; } .table th { font: 600 13px/1.2 var(--font); color: var(--ink-3); letter-spacing: .02em; } .table tr:last-child td { border-bottom: 0; } .table td.actions { text-align: right; white-space: nowrap; } .table td.actions form + form { margin-left: 6px; } /* A count, a date and a tag are read whole: never "2026-09-" over "27". */ .table td:nth-child(3), .table td:nth-child(4), .table .tag { white-space: nowrap; } /* A ghost button's text sits 13 px (padding and border) inside its box; at the end of the column that text ends where the other rows' outlined buttons do. */ .table td.actions > .btn-ghost:last-child, .table td.actions > form:last-child > .btn-ghost { margin-right: -13px; } .tag { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); background: rgba(var(--accent-rgb), .16); color: var(--accent); font: 600 12px/1.5 var(--font); } /* Too narrow for five columns: each user becomes a short block, every line starting at the same left edge - name and tags; the password; presets and the date; the actions. A flow, not a grid per row, so no row sizes its columns on its own. */ @media (max-width: 900px) { .table thead { display: none; } .table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; padding: 12px 0; border-bottom: 1px solid var(--glass-line); } .table tr:last-child { border-bottom: 0; padding-bottom: 0; } .table td { border: 0; padding: 0; } .table td:first-child, .table td:nth-child(2), .table td.actions { flex: 0 0 100%; } .table td:nth-child(2) { color: var(--ink-2); font-size: 14px; } /* The column heading is gone; the date says what it is. */ .table td:nth-child(4)::before { content: " \00B7 added "; white-space: pre; color: var(--ink-3); } .table td.actions { text-align: left; padding-top: 6px; } /* Now at the start of the line: the text lines up with the name above. */ .table td.actions > .btn-ghost:last-child, .table td.actions > form:last-child > .btn-ghost { margin-right: 0; } .table td.actions > .btn-ghost:first-child, .table td.actions > form:first-child > .btn-ghost { margin-left: -13px; } } @media (max-width: 640px) { .panel { padding: 18px 16px; } } /* ---------------------------------------------------------------- confirm dialog The users page asks before a reset or a delete (confirm.js), in the mixer's dialog style. Its own class names: the mixer loads this file as well, and has its own .dlg in app.css. position: fixed spelled out, since the rule above for 's children would otherwise make it relative, which the top layer turns into absolute - at the top of a scrolled page. */ .ask { position: fixed; width: min(440px, calc(100vw - 32px)); max-width: none; margin: auto; padding: 24px 24px 20px; border-radius: var(--r-xl); border: 1px solid var(--glass-line-strong); background: rgba(6, 15, 22, .86); color: var(--ink); } .ask::backdrop { background: rgba(2, 8, 12, .55); } .ask[open] { animation: ask-in .2s var(--ease); } @keyframes ask-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } } .ask-form { margin: 0; display: flex; flex-direction: column; } .ask-title { margin: 0 0 10px; font-size: 26px; overflow-wrap: anywhere; } .ask-text { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; } .ask-text:empty { display: none; } .ask-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; } .ask-actions .btn { min-width: 96px; } /* Near the top on a phone, as the mixer's are. */ @media (max-width: 700px) { .ask { margin: max(16px, 9vh) auto auto; } } @media (pointer: coarse) { .ask-actions .btn { min-height: 44px; } } /* Hover styles only where there is a real hover: on a touch screen a tapped button would otherwise stay highlighted until the next tap elsewhere. */ @media (hover: hover) { a:hover { text-decoration: underline; } .brand:hover { text-decoration: none; } .btn:hover { --btn-bg: rgba(255, 255, 255, .12); text-decoration: none; } .btn-primary:hover { --btn-bg: var(--accent); filter: brightness(1.08); } .btn-ghost:hover { --btn-bg: var(--glass-soft); --btn-ink: var(--ink); } .btn-danger:hover { --btn-bg: rgba(var(--danger-rgb), .24); } .input:hover:not(:focus) { border-color: rgba(255, 255, 255, .3); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }