logo.css

/* The logo page, the lab. Dark as the site's devices; inverted, the site's paper. */
@font-face { font-family: 'Geist'; src: url('./assets/geist.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  color-scheme: dark;
  --ground: var(--color-screen-low);
  --figure: var(--color-paper);
  --panel: var(--color-screen);
  --panel-rule: var(--color-screen-rule);
  --panel-edge: var(--color-screen-edge);
  --panel-hover: var(--color-screen-pill-hover);
  --panel-ink: var(--color-screen-ink);
  --panel-muted: var(--color-screen-muted);
  --panel-dim: var(--color-screen-dim);
  --panel-knob: var(--color-screen-bright);
}
:root.invert {
  color-scheme: light;
  --ground: var(--color-paper);
  --figure: var(--color-ink);
  --panel: var(--color-hover);
  --panel-rule: var(--color-rule);
  --panel-edge: var(--color-rule);
  --panel-hover: var(--color-rule);
  --panel-ink: var(--color-ink);
  --panel-muted: var(--color-muted);
  --panel-dim: var(--color-muted);
  --panel-knob: var(--color-ink);
}
body { display: grid; grid-template-rows: minmax(min(360px, 60svh), 1fr) auto; min-height: 100%; margin: 0; background: var(--ground); color: var(--panel-ink); font: 400 var(--text-sm)/1 var(--font-body); }

/* A page is one stage: the drawing, with its controls in a band beneath */
html { height: 100%; }
.stage { position: relative; min-height: 0; }
/* Dragging sideways turns the phase; vertical swipes still scroll the page */
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
canvas.turning { cursor: grabbing; }
canvas:focus-visible { outline: 2px solid var(--panel-knob); outline-offset: -4px; }
.fail { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding-inline: var(--space-md); color: var(--figure); text-align: center; }
.fail[hidden] { display: none; }

/* The controls are a band of the screen, soft-lit from above: its tint and divider strongest at the top middle,
   falling away wide and slow, easing out as light does, toward the sides and down */
.bar { position: relative; isolation: isolate; padding: 22px var(--space-md) 24px; }
.bar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-top: 1px solid var(--panel-rule);
  background: var(--panel);
  mask-image: radial-gradient(ellipse 70% 180% at 50% 0, #000, rgb(0 0 0 / .8) 30%, rgb(0 0 0 / .45) 60%, rgb(0 0 0 / .15) 85%, transparent);
}
/* Groups side by side, a divider between: pairs of label and control, running down in columns of four */
.grid { display: flex; justify-content: center; align-items: start; gap: 40px; }
.group + .group { padding-left: 40px; border-left: 1px solid var(--panel-rule); }
/* Every row a slider's height, so the rows of both groups line up */
.pairs { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, 28px); grid-auto-columns: max-content; align-items: center; gap: 16px 12px; }
.pair { display: grid; grid-column: span 2; grid-template-columns: subgrid; align-items: center; }
.pair > label { justify-self: end; padding-left: 12px; color: var(--panel-muted); cursor: pointer; }
.grid select { width: 100%; min-width: 10.5rem; }
.slider { display: flex; align-items: center; gap: 10px; }
@media (max-width: 800px) {
  .grid { flex-direction: column; align-items: stretch; gap: 16px; }
  .group + .group { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--panel-rule); }
  .pairs { grid-auto-flow: row; grid-template-rows: none; grid-auto-rows: 28px; grid-template-columns: 4.5rem minmax(0, 1fr); }
  .pair { grid-column: 1 / -1; }
  .pair > label { padding-left: 0; }
}

/* A toggle: the Invert disc. Pressed, it turns over, its light half swapping sides as the page's tones do */
.toggle { display: grid; place-items: center; margin: 0; padding: 4px; border: 0; border-radius: 50%; background: none; color: var(--panel-dim); cursor: pointer; }
.toggle svg { width: 18px; height: 18px; }
.toggle:hover, .toggle[aria-pressed=true] { color: var(--panel-ink); }
.toggle[aria-pressed=true] svg { transform: scaleX(-1); }

output { min-width: 7ch; color: var(--panel-ink); font-variant-numeric: tabular-nums; }
:is(input, select, button):focus-visible { outline: 2px solid var(--panel-knob); outline-offset: 2px; }
:disabled { opacity: .4; cursor: default; }

/* A picker is a pill outlined like the site's; where the browser allows, its list shows each choice drawn */
select {
  margin: 0;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--panel-rule);
  color: var(--panel-ink);
  font: inherit;
  cursor: pointer;
}
select:hover { background: var(--panel-hover); }
.icon { flex: none; width: 24px; height: 12px; }
.swatch { height: 8px; border-radius: 2px; }
.mask { background: currentColor; mask: center / contain no-repeat; }
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }
  select { display: flex; align-items: center; gap: 8px; }
  select::picker-icon { color: var(--panel-muted); }
  selectedcontent { display: flex; align-items: center; gap: 8px; }
  ::picker(select) {
    max-height: min(60svh, 480px);
    margin-block: 6px;
    padding: 4px;
    border: 0;
    border-radius: 12px;
    background: var(--panel);
    box-shadow: var(--shadow-menu);
    color: var(--panel-muted);
    scrollbar-width: thin;
    scrollbar-color: var(--panel-rule) transparent;
  }
  option { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
  option::checkmark { display: none; }
  option:is(:hover, :focus-visible) { background: var(--panel-hover); color: var(--panel-ink); outline: 0; }
  option:checked { color: var(--panel-ink); }
  select hr { margin: 4px 10px; border: 0; border-top: 1px solid var(--panel-rule); }
}

/* The site's slider: a recessed track outlined a step lighter, a quieter fill from zero to the value, a bright knob */
input[type=range] {
  --track: 6px;
  --knob: 14px;
  --from: 0%;
  --to: 0%;
  --fill: linear-gradient(to right, transparent var(--from), var(--panel-muted) var(--from) var(--to), transparent var(--to)), var(--ground);
  width: 104px;
  height: 28px;
  margin: 0;
  appearance: none;
  background: none;
  cursor: ew-resize;
}
input[type=range]::-webkit-slider-runnable-track { height: var(--track); border-radius: calc(var(--track) / 2); background: var(--fill); box-shadow: inset 0 0 0 1px var(--panel-edge); }
input[type=range]::-moz-range-track { height: var(--track); border-radius: calc(var(--track) / 2); background: var(--fill); box-shadow: inset 0 0 0 1px var(--panel-edge); }
input[type=range]::-webkit-slider-thumb { appearance: none; width: var(--knob); height: var(--knob); margin-top: calc((var(--track) - var(--knob)) / 2); border: 0; border-radius: 50%; background: var(--panel-knob); }
input[type=range]::-moz-range-thumb { width: var(--knob); height: var(--knob); border: 0; border-radius: 50%; background: var(--panel-knob); }
input[type=range]:focus-visible { border-radius: 4px; }