Bouldering Gym - defuss-shadcn

Grip, bouldering in Bochum
The Look select switches the wall: Chalk (white, the holds in their tape colours), Night session (dark, the holds glowing) and Granite (grey stone, a grain under everything). The contour lines are a slow Shader (topography), coloured by the look; the holds are corner-blob shapes; the grades are the Fontainebleau scale.
<style>
  @import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&family=Rubik:wght@400;500;700&display=swap');
  /* Grip: a bouldering gym in an old wire factory. Layout: the hero over contour lines with holds stuck around the
     title, the new problems as tape strips by grade, the setter's beta in a bubble, a day pass ticket and the hours. */
  #sc-bouldering {
    --background: oklch(0.975 0.004 90);
    --foreground: oklch(0.2 0.01 260);
    --card: oklch(1 0 0);
    --card-foreground: var(--foreground);
    --muted: oklch(0.94 0.006 90);
    --muted-foreground: oklch(0.45 0.012 260);
    --border: oklch(0.2 0.01 260 / 0.15);
    --input: var(--border);
    --primary: oklch(0.2 0.01 260);
    --primary-foreground: oklch(0.975 0.004 90);
    --secondary: oklch(0.94 0.006 90);
    --secondary-foreground: var(--foreground);
    --accent: oklch(0.72 0.19 45);
    --accent-foreground: oklch(0.2 0.01 260);
    --ring: oklch(0.72 0.19 45);
    --radius: 1rem;
    --radius-sm: max(0px, calc(var(--radius) - 4px));
    --radius-md: max(0px, calc(var(--radius) - 2px));
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --gr-contour: oklch(0.2 0.01 260 / 0.12);
    --gr-topo-1: oklch(0.93 0.008 90);
    --gr-topo-2: oklch(0.86 0.03 55);
    --gr-contour-line: oklch(0.72 0.02 260);
    --gr-glow: 0;
    color-scheme: light;
    box-sizing: border-box;
    width: 100%;
    overflow-x: clip;
    padding: 0 0 clamp(2rem, 5vw, 4rem);
    background: var(--background);
    color: var(--foreground);
    font-family: 'Rubik', var(--font-sans);
  }
  #sc-bouldering[data-look='night'] {
    color-scheme: dark;
    --background: oklch(0.17 0.02 280);
    --foreground: oklch(0.96 0.01 280);
    --card: oklch(0.21 0.025 280);
    --muted: oklch(0.24 0.03 280);
    --muted-foreground: oklch(0.76 0.03 280);
    --border: oklch(0.96 0.01 280 / 0.15);
    --primary: oklch(0.88 0.2 130);
    --primary-foreground: oklch(0.17 0.02 280);
    --secondary: oklch(0.24 0.03 280);
    --secondary-foreground: var(--foreground);
    --accent: oklch(0.88 0.2 130);
    --accent-foreground: oklch(0.17 0.02 280);
    --gr-contour: oklch(0.88 0.2 130 / 0.18);
    --gr-topo-1: oklch(0.3 0.06 285);
    --gr-topo-2: oklch(0.38 0.1 300);
    --gr-contour-line: oklch(0.55 0.15 135);
    --gr-glow: 1;
  }
  #sc-bouldering[data-look='granite'] {
    --background: oklch(0.82 0.008 80);
    --foreground: oklch(0.22 0.01 60);
    --card: oklch(0.88 0.008 80);
    --muted: oklch(0.78 0.01 80);
    --muted-foreground: oklch(0.38 0.012 60);
    --border: oklch(0.22 0.01 60 / 0.25);
    --primary: oklch(0.22 0.01 60);
    --primary-foreground: oklch(0.88 0.008 80);
    --secondary: oklch(0.78 0.01 80);
    --accent: oklch(0.55 0.12 40);
    --accent-foreground: oklch(0.95 0.01 80);
    --radius: 0.25rem;
    --gr-contour: oklch(0.22 0.01 60 / 0.2);
    --gr-topo-1: oklch(0.8 0.006 60);
    --gr-topo-2: oklch(0.7 0.01 60);
    --gr-contour-line: oklch(0.5 0.01 60);
  }
  #sc-bouldering .gr-page {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: clamp(3.5rem, 8vw, 6rem);
    box-sizing: content-box;
    max-width: 72rem;
    margin: clamp(3rem, 7vw, 5rem) auto 0;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
  }
  #sc-bouldering .gr-grain {
    display: none;
    --surface-size: 6px;
    --surface-ink: oklch(0.22 0.01 60 / 0.18);
  }
  #sc-bouldering[data-look='granite'] .gr-grain {
    display: block;
  }
  #sc-bouldering [hidden] {
    display: none !important;
  }
  /* the Site Header: the name in Rubik Mono with a dab of hold colour, the sections - a strip of tape under the
     one you point at -, the look and the mode */
  #sc-bouldering .gr-bar {
    background: none;
    color: inherit;
  }
  #sc-bouldering .mk-header-inner {
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    max-width: none;
    min-height: 4.5rem;
    padding: 0;
  }
  #sc-bouldering :is(.mk-header-brand, .mk-footer-brand) {
    color: inherit;
  }
  #sc-bouldering :is(.mk-header-name, .mk-footer-brand-name) {
    color: inherit;
    font:
      400 1.4rem/1 'Rubik Mono One',
      sans-serif;
  }
  #sc-bouldering :is(.mk-header-name, .mk-footer-brand-name)::after {
    content: '';
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin-inline-start: 0.1em;
    border-radius: 40% 60% 55% 45%;
    background: oklch(0.72 0.19 45);
  }
  #sc-bouldering .mk-header-nav {
    display: flex;
    margin-inline-start: auto;
  }
  #sc-bouldering .nav-menu-list {
    flex-wrap: wrap;
  }
  #sc-bouldering .nav-menu-link {
    color: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    white-space: nowrap;
  }
  #sc-bouldering .nav-menu-link:is(:hover, :focus-visible) {
    background: linear-gradient(transparent 62%, color-mix(in oklch, oklch(0.72 0.19 45) 55%, transparent) 0) no-repeat
      center / calc(100% - 1.5rem) 100%;
    color: inherit;
  }
  #sc-bouldering .mk-header-actions {
    gap: 0.5rem;
  }
  /* the hero over contour lines, holds stuck around the title */
  #sc-bouldering .gr-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 38rem;
    padding: 1.25rem max(clamp(1rem, 3vw, 2.5rem), calc((100% - 72rem) / 2)) clamp(3rem, 7vw, 5rem);
  }
  #sc-bouldering .gr-hero > .gr-bar {
    align-self: stretch;
    margin-block-end: auto;
  }
  #sc-bouldering .gr-hero > h1 {
    margin-block-start: clamp(3rem, 8vw, 6rem);
  }
  /* the contour lines drift slowly: the topography shader, coloured by the look, edge to edge */
  #sc-bouldering .gr-hero > .gr-topo {
    inset: 0;
    border-radius: 0;
    mask-image: linear-gradient(to bottom, #000 75%, transparent);
  }
  #sc-bouldering .gr-hero h1 {
    position: relative;
    margin: 0;
    font:
      400 clamp(2.8rem, 9vw, 7rem)/0.9 'Rubik Mono One',
      sans-serif;
    letter-spacing: -0.04em;
    text-transform: uppercase;
  }
  #sc-bouldering .gr-hero p {
    max-width: 32rem;
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--muted-foreground);
  }
  #sc-bouldering .gr-hold {
    position: absolute;
    z-index: -1;
    width: var(--s, 4rem);
    aspect-ratio: 1;
    background: var(--c);
    box-shadow:
      inset -0.4rem -0.5rem 0 oklch(0 0 0 / 0.18),
      0 0 calc(var(--gr-glow) * 1.5rem) var(--c);
    rotate: var(--r, 0deg);
  }
  #sc-bouldering .gr-hold::after {
    content: '';
    position: absolute;
    inset: 40%;
    border-radius: 50%;
    background: oklch(0 0 0 / 0.35);
  }
  /* the new problems: strips of tape in the problem's colour, the grade on it */
  #sc-bouldering .gr-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    margin-block-end: 1.5rem;
  }
  #sc-bouldering .gr-head h2 {
    margin: 0;
    font:
      400 clamp(1.5rem, 3.5vw, 2.4rem)/1 'Rubik Mono One',
      sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.03em;
  }
  #sc-bouldering .gr-head p {
    margin: 0;
    color: var(--muted-foreground);
  }
  #sc-bouldering .gr-problems {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #sc-bouldering .gr-problem {
    display: grid;
    gap: 0.4rem;
    padding: 1.1rem 1.25rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
  }
  #sc-bouldering .gr-tape {
    justify-self: start;
    padding: 0.3rem 0.9rem;
    background: var(--c);
    color: oklch(0.15 0 0);
    font:
      700 1.1rem/1 'Rubik',
      sans-serif;
    rotate: -3deg;
    clip-path: polygon(2% 0, 100% 6%, 97% 100%, 0 94%);
    box-shadow: 0 0 calc(var(--gr-glow) * 1rem) var(--c);
  }
  #sc-bouldering .gr-problem h3 {
    margin: 0.35rem 0 0;
    font-size: 1.15rem;
  }
  #sc-bouldering .gr-problem p {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
  }
  /* the setter's beta, said */
  #sc-bouldering .gr-beta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
  }
  #sc-bouldering .gr-beta img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-xl);
    rotate: 2deg;
    box-shadow: 0 1.5rem 2.5rem -1.5rem oklch(0 0 0 / 0.5);
  }
  #sc-bouldering .gr-bubble {
    position: relative;
    margin: 0 0 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 1.5rem;
    background: var(--accent);
    color: var(--accent-foreground);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.35;
    rotate: -1.5deg;
  }
  #sc-bouldering .gr-bubble::after {
    content: '';
    position: absolute;
    right: -0.9rem;
    bottom: 1.4rem;
    width: 1.2rem;
    height: 1.2rem;
    background: inherit;
    clip-path: polygon(0 0, 100% 60%, 0 100%);
  }
  #sc-bouldering .gr-who {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--muted-foreground);
  }
  /* the day pass and the hours */
  #sc-bouldering .gr-visit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 2rem;
    align-items: start;
  }
  #sc-bouldering .gr-pass {
    --shape-cut: 0.9rem;
    display: grid;
    gap: 0.5rem;
    padding: 1.5rem 2rem;
    background: var(--primary);
    color: var(--primary-foreground);
    rotate: -2deg;
  }
  #sc-bouldering .gr-pass b {
    font:
      400 2.6rem/0.95 'Rubik Mono One',
      sans-serif;
  }
  #sc-bouldering .gr-pass .btn {
    justify-self: start;
    background: var(--accent);
    color: var(--accent-foreground);
  }
  #sc-bouldering .gr-hours {
    width: 100%;
    border-collapse: collapse;
  }
  #sc-bouldering .gr-hours td {
    padding: 0.6rem 0;
    border-block-end: 1px dashed var(--border);
    font-variant-numeric: tabular-nums;
  }
  #sc-bouldering .gr-hours td:last-child {
    text-align: end;
    font-weight: 500;
  }
  /* the Site Footer: the factory door, the hours, the walls, how to reach the crew and the legal notes */
  #sc-bouldering .mk-footer {
    background: none;
    color: inherit;
  }
  #sc-bouldering .mk-footer-inner {
    max-width: none;
    padding: 2rem 0 0;
    border-block-start: 2px dashed var(--border);
  }
  #sc-bouldering .mk-footer-heading {
    color: inherit;
    font:
      400 0.8125rem/1.2 'Rubik Mono One',
      sans-serif;
  }
  #sc-bouldering .mk-footer address {
    font-style: normal;
    line-height: 1.5;
  }
  #sc-bouldering .gr-note {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    line-height: 1.5;
  }
  #sc-bouldering .gr-open {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
  }
  #sc-bouldering .gr-open dt {
    color: var(--muted-foreground);
  }
  #sc-bouldering .gr-open dd {
    margin: 0;
    font-weight: 500;
  }
  #sc-bouldering .mk-footer-list :is(a, button) {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
  }
  #sc-bouldering .mk-footer-list :is(a, button):is(:hover, :focus-visible) {
    text-decoration: underline;
    text-decoration-color: oklch(0.72 0.19 45);
    text-decoration-thickness: 0.2em;
    text-underline-offset: 0.25em;
  }
  #sc-bouldering .mk-footer-rule {
    margin: 0;
    background: var(--border);
  }
  #sc-bouldering .mk-footer-copy {
    color: var(--muted-foreground);
  }
  /* the dialogs: the slot booking and the legal notes, on the look's card */
  #sc-bouldering .sc-dialog {
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--card-foreground);
  }
  #sc-bouldering .sc-dialog .dialog-title {
    font:
      400 1.35rem/1.15 'Rubik Mono One',
      sans-serif;
  }
  #sc-bouldering .sc-dialog .dialog-description {
    color: var(--muted-foreground);
  }
  #sc-bouldering :is(.sc-form, .sc-done) {
    display: grid;
    gap: 1rem;
  }
  #sc-bouldering .sc-row {
    display: grid;
    gap: 0.4rem;
  }
  #sc-bouldering .sc-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1rem;
  }
  #sc-bouldering .sc-checks {
    display: grid;
    gap: 0.6rem;
  }
  #sc-bouldering .sc-checks .label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 400;
  }
  #sc-bouldering .sc-dialog:not([data-sent]) .sc-done,
  #sc-bouldering .sc-dialog[data-sent] .sc-form {
    display: none;
  }
  #sc-bouldering .sc-legal {
    display: grid;
    gap: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.55;
  }
  #sc-bouldering .sc-legal :is(p, address) {
    margin: 0;
    font-style: normal;
  }
  #sc-bouldering .sc-legal a {
    color: inherit;
  }
  @media (max-width: 48rem) {
    #sc-bouldering :is(.gr-beta, .gr-visit) {
      grid-template-columns: 1fr;
    }
    #sc-bouldering .mk-header-nav {
      order: 3;
      width: 100%;
      margin-inline-start: -0.75rem;
    }
    #sc-bouldering .mk-header-actions {
      margin-inline-start: auto;
    }
    #sc-bouldering .gr-hold {
      display: none;
    }
  }
  /* light or dark: the Swap writes the page's dark class - every look has a light and a dark palette */
  #sc-bouldering .site-mode {
    flex: none;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    color: var(--foreground);
  }
  #sc-bouldering .site-mode:hover {
    background: var(--accent);
    color: var(--accent-foreground);
  }
  /* -- modes: each look in light and dark, derived from the palettes above (the other mode of each look) -- */
  :root:not(.dark) #sc-bouldering[data-look='chalk'] {
    --accent: oklch(0.93 0.045 45);
  }
  .dark #sc-bouldering[data-look='chalk'] {
    color-scheme: dark;
    --background: oklch(0.17 0.004 90);
    --foreground: oklch(0.94 0.01 260);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.94 0.01 260);
    --muted: oklch(0.24 0.006 90);
    --muted-foreground: oklch(0.74 0.012 260);
    --border: oklch(0.95 0.01 260 / 0.14);
    --input: oklch(0.95 0.01 260 / 0.14);
    --primary: oklch(0.93 0.01 260);
    --primary-foreground: oklch(0.17 0.01 260);
    --secondary: oklch(0.25 0.006 90);
    --secondary-foreground: oklch(0.9 0.01 260);
    --accent: oklch(0.26 0.05 45);
    --accent-foreground: oklch(0.94 0.01 260);
    --ring: oklch(0.72 0.18 45);
    --gr-contour: oklch(0.922 0.01 260 / 0.12);
    --gr-topo-1: oklch(0.255 0.008 90);
    --gr-topo-2: oklch(0.36 0.03 55);
    --gr-contour-line: oklch(0.72 0.02 260);
    --popover: oklch(0.215 0 0);
    --popover-foreground: oklch(0.94 0 0);
  }
  .dark #sc-bouldering[data-look='night'] {
    --accent: oklch(0.26 0.05 130);
    --accent-foreground: oklch(0.96 0.01 280);
  }
  :root:not(.dark) #sc-bouldering[data-look='night'] {
    color-scheme: light;
    --background: oklch(0.985 0.02 280);
    --foreground: oklch(0.2 0.01 280);
    --card: oklch(0.997 0.025 280);
    --card-foreground: oklch(0.2 0.01 280);
    --muted: oklch(0.95 0.025 280);
    --muted-foreground: oklch(0.46 0.03 280);
    --border: oklch(0.2 0.01 280 / 0.12);
    --input: oklch(0.2 0.01 280 / 0.12);
    --primary: oklch(0.58 0.2 130);
    --primary-foreground: oklch(0.17 0.03 130);
    --secondary: oklch(0.955 0.025 280);
    --secondary-foreground: oklch(0.25 0.01 280);
    --accent: oklch(0.94 0.025 130);
    --accent-foreground: oklch(0.2 0.01 280);
    --ring: oklch(0.47 0.19 45);
    --gr-contour: oklch(0.58 0.2 130 / 0.18);
    --gr-topo-1: oklch(0.906 0.03 285);
    --gr-topo-2: oklch(0.863 0.03 300);
    --gr-contour-line: oklch(0.55 0.15 135);
    --popover: oklch(0.997 0 0);
    --popover-foreground: oklch(0.2 0 0);
  }
  :root:not(.dark) #sc-bouldering[data-look='granite'] {
    --accent: oklch(0.86 0.045 40);
    --accent-foreground: oklch(0.22 0.01 60);
  }
  .dark #sc-bouldering[data-look='granite'] {
    color-scheme: dark;
    --background: oklch(0.17 0.008 80);
    --foreground: oklch(0.94 0.01 60);
    --card: oklch(0.205 0.008 80);
    --card-foreground: oklch(0.94 0.01 60);
    --muted: oklch(0.24 0.01 80);
    --muted-foreground: oklch(0.74 0.012 60);
    --border: oklch(0.95 0.01 60 / 0.14);
    --input: oklch(0.95 0.01 60 / 0.14);
    --primary: oklch(0.93 0.01 60);
    --primary-foreground: oklch(0.17 0.01 60);
    --secondary: oklch(0.25 0.01 80);
    --secondary-foreground: oklch(0.9 0.01 60);
    --accent: oklch(0.26 0.042 40);
    --accent-foreground: oklch(0.94 0.01 60);
    --ring: oklch(0.72 0.18 45);
    --gr-contour: oklch(0.907 0.01 60 / 0.2);
    --gr-topo-1: oklch(0.8 0.006 60);
    --gr-topo-2: oklch(0.7 0.01 60);
    --gr-contour-line: oklch(0.5 0.01 60);
    --popover: oklch(0.215 0 0);
    --popover-foreground: oklch(0.94 0 0);
  }
  /* -- modes: end -- */
</style>
<div id="sc-bouldering" data-look="chalk">
  <section class="gr-hero" aria-labelledby="gr-title">
    <div
      class="shader gr-topo"
      data-variant="background"
      data-effect="topography"
      data-speed="0.5"
      data-lines="9"
      data-relief="0.5"
      data-zoom="0.8"
      data-fps="30"
      data-colors="var(--gr-topo-1), var(--gr-topo-2), var(--gr-contour-line)"
      data-background="var(--background)"
      aria-hidden="true"
    ></div>
    <header class="mk-header gr-bar">
      <div class="mk-header-inner">
        <a class="mk-header-brand" href="#sc-bouldering"><span class="mk-header-name">Grip</span></a>
        <nav class="mk-header-nav" aria-label="Site">
          <ul class="nav-menu-list">
            <li class="nav-menu-item"><a class="nav-menu-link" href="#gr-new">New problems</a></li>
            <li class="nav-menu-item"><a class="nav-menu-link" href="#gr-beta">Beta</a></li>
            <li class="nav-menu-item"><a class="nav-menu-link" href="#gr-visit">Day pass</a></li>
            <li class="nav-menu-item"><a class="nav-menu-link" href="#gr-find">Find us</a></li>
          </ul>
        </nav>
        <div class="mk-header-actions">
          <select class="select" data-size="sm" data-site-look aria-label="Look" style="width: auto">
            <option value="chalk">Chalk</option>
            <option value="night">Night session</option>
            <option value="granite">Granite</option>
          </select>
          <label class="swap site-mode" data-variant="rotate" data-size="sm">
            <input type="checkbox" data-site-mode aria-label="Dark mode" />
            <span class="swap-on" aria-hidden="true"><i data-lucide="moon"></i></span>
            <span class="swap-off" aria-hidden="true"><i data-lucide="sun"></i></span>
          </label>
        </div>
      </div>
    </header>
    <span
      class="gr-hold corner-blob"
      style="--c: oklch(0.72 0.19 45); --s: 5rem; top: 20%; right: 12%; --r: 20deg"
      aria-hidden="true"
    ></span>
    <span
      class="gr-hold corner-blob-3"
      style="--c: oklch(0.78 0.16 200); --s: 3.25rem; top: 52%; right: 30%; --r: -35deg"
      aria-hidden="true"
    ></span>
    <span
      class="gr-hold corner-blob-2"
      style="--c: oklch(0.86 0.18 100); --s: 2.5rem; bottom: 10%; right: 8%"
      aria-hidden="true"
    ></span>
    <span
      class="gr-hold corner-blob-4"
      style="--c: oklch(0.7 0.2 340); --s: 3.75rem; top: 28%; right: 48%; --r: 60deg"
      aria-hidden="true"
    ></span>
    <h1 id="gr-title">320 problems.<br />No ropes.</h1>
    <p
      >1,400 m² of wall in an old wire factory, reset every week. Shoes to rent, chalk to share, coffee at the
      counter.</p
    >
    <a class="btn" data-size="lg" href="#gr-visit">Get a day pass</a>
  </section>
  <!-- the Granite look's grain: on the whole site, edge to edge -->
  <div class="surface gr-grain" data-variant="background" data-pattern="grain" aria-hidden="true"></div>
  <div class="gr-page">
    <section id="gr-new" aria-labelledby="gr-new-title">
      <div class="gr-head">
        <h2 id="gr-new-title">New this week</h2>
        <p>Set Monday, 10 November · Fontainebleau grades</p>
      </div>
      <ul class="gr-problems">
        <li class="gr-problem" style="--c: oklch(0.86 0.18 100)"
          ><span class="gr-tape">5a</span><h3>Butter side up</h3><p>Wall 2 · slab · big feet, small faith</p></li
        >
        <li class="gr-problem" style="--c: oklch(0.78 0.16 200)"
          ><span class="gr-tape">6a+</span><h3>Wire cutter</h3><p>Wall 5 · 30° overhang · two heel hooks</p></li
        >
        <li class="gr-problem" style="--c: oklch(0.72 0.19 45)"
          ><span class="gr-tape">6c</span><h3>Factory reset</h3><p>The cave · compression · the top is a pinch</p></li
        >
        <li class="gr-problem" style="--c: oklch(0.7 0.2 340)"
          ><span class="gr-tape">7a</span><h3>Night shift</h3><p>Wall 7 · dyno to a sloper · stick it</p></li
        >
      </ul>
    </section>
    <section id="gr-beta" class="gr-beta" aria-labelledby="gr-beta-title">
      <img src="https://picsum.photos/id/177/900/675" alt="A hiker standing in a rocky canyon" />
      <div>
        <p class="gr-bubble"
          >On Factory reset, don't pull - squeeze. Left toe hooks the volume, then the pinch comes to you.</p
        >
        <p class="gr-who"
          ><span class="avatar" data-size="sm"
            ><img class="avatar-image" src="https://i.pravatar.cc/96?img=59" alt="" /></span
          >Kemal, head setter</p
        >
        <h2 id="gr-beta-title" class="gr-head" style="margin: 0"
          ><span
            style="
              font:
                400 clamp(1.5rem, 3.5vw, 2.4rem)/1 'Rubik Mono One',
                sans-serif;
              text-transform: uppercase;
              letter-spacing: -0.03em;
            "
            >Beta from the setters</span
          ></h2
        >
      </div>
    </section>
    <section id="gr-visit" class="gr-visit" aria-labelledby="gr-visit-title">
      <div class="gr-pass ticket">
        <span>Day pass</span>
        <b id="gr-visit-title">€14</b>
        <span>Students €11 · shoes €4 · first time? A 20-minute intro is free.</span>
        <button class="btn" type="button" commandfor="gr-book" command="show-modal">Book a slot</button>
      </div>
      <table class="gr-hours">
        <caption class="sr-only">Opening hours</caption>
        <tbody>
          <tr><td>Monday - Friday</td><td>10:00 - 23:00</td></tr>
          <tr><td>Saturday, Sunday</td><td>09:00 - 22:00</td></tr>
          <tr><td>Night session (Thursday)</td><td>until 01:00</td></tr>
          <tr><td>Route setting (Monday)</td><td>wall 1 - 4 closed until 14:00</td></tr>
        </tbody>
      </table>
    </section>
    <footer id="gr-find" class="mk-footer">
      <div class="mk-footer-inner">
        <nav class="mk-footer-nav" aria-label="Footer">
          <div class="mk-footer-col">
            <h3 class="mk-footer-heading">Find us</h3>
            <address>Grip bouldering<br />Drahtwerkstraße 9<br />Bochum</address>
            <p class="gr-note">Tram 302 to Drahtwerk - the door with the chalk handprints.</p>
          </div>
          <div class="mk-footer-col">
            <h3 class="mk-footer-heading">Open</h3>
            <dl class="gr-open">
              <dt>Mon - Fri</dt>
              <dd>10:00 - 23:00</dd>
              <dt>Sat, Sun</dt>
              <dd>09:00 - 22:00</dd>
              <dt>Thursday</dt>
              <dd>until 01:00</dd>
            </dl>
          </div>
          <div class="mk-footer-col">
            <h3 class="mk-footer-heading">The walls</h3>
            <ul class="mk-footer-list">
              <li><a href="#gr-new">New this week</a></li>
              <li><a href="#gr-beta">Beta from the setters</a></li>
              <li><a href="#gr-visit">Day pass and prices</a></li>
              <li><button type="button" commandfor="gr-book" command="show-modal">Book a slot</button></li>
            </ul>
          </div>
          <div class="mk-footer-col">
            <h3 class="mk-footer-heading">Say hi</h3>
            <ul class="mk-footer-list">
              <li><a href="mailto:hello@example.com">hello@example.com</a></li>
              <li><a href="https://www.instagram.com/" target="_blank" rel="noopener">Instagram</a></li>
              <li><button type="button" commandfor="gr-imprint" command="show-modal">Imprint</button></li>
              <li><button type="button" commandfor="gr-privacy" command="show-modal">Privacy</button></li>
            </ul>
          </div>
        </nav>
        <hr class="separator mk-footer-rule" />
        <div class="mk-footer-bottom">
          <a class="mk-footer-brand" href="#sc-bouldering"><span class="mk-footer-brand-name">Grip</span></a>
          <div class="mk-footer-meta">
            <p class="mk-footer-copy">Brush your holds. Spot your friends. Fall well.</p>
          </div>
        </div>
      </div>
    </footer>
  </div>
  <dialog class="dialog sc-dialog" id="gr-book" aria-labelledby="gr-book-title">
    <div class="dialog-content">
      <form class="sc-form" data-sc-form>
        <div class="dialog-header">
          <h2 class="dialog-title" id="gr-book-title">Book a slot</h2>
          <p class="dialog-description">Two hours on the wall. Pay at the counter - €14, students €11.</p>
        </div>
        <div class="sc-pair">
          <div class="sc-row">
            <label class="label" for="gr-book-day">Day</label>
            <input class="input" id="gr-book-day" name="day" type="date" required />
          </div>
          <div class="sc-row">
            <label class="label" for="gr-book-time">From</label>
            <select class="select" id="gr-book-time" name="time">
              <option>10:00</option>
              <option>12:00</option>
              <option>14:00</option>
              <option>16:00</option>
              <option selected>18:00</option>
              <option>20:00</option>
            </select>
          </div>
        </div>
        <div class="sc-row">
          <label class="label" for="gr-book-people">Climbers</label>
          <input
            class="input"
            id="gr-book-people"
            name="people"
            type="number"
            min="1"
            max="8"
            value="1"
            inputmode="numeric"
            required
          />
        </div>
        <div class="sc-checks">
          <label class="label"
            ><input class="checkbox" type="checkbox" name="intro" /> First time - add the free 20-minute intro</label
          >
          <label class="label"><input class="checkbox" type="checkbox" name="shoes" /> Rent shoes (€4)</label>
        </div>
        <div class="sc-row">
          <label class="label" for="gr-book-mail">Email</label>
          <input class="input" id="gr-book-mail" name="email" type="email" autocomplete="email" required />
        </div>
        <div class="dialog-footer">
          <button class="btn" data-variant="outline" type="button" commandfor="gr-book" command="close">Cancel</button>
          <button class="btn" type="submit">Hold my slot</button>
        </div>
      </form>
      <div class="sc-done" tabindex="-1">
        <h2 class="dialog-title">Slot held</h2>
        <p class="dialog-description"
          >Show the email at the counter. Come ten minutes early if you are new - the intro starts on the hour, and the
          chalk is on us.</p
        >
        <div class="dialog-footer">
          <button class="btn" type="button" commandfor="gr-book" command="close">Close</button>
        </div>
      </div>
    </div>
  </dialog>
  <dialog class="dialog sc-dialog" id="gr-imprint" aria-labelledby="gr-imprint-title">
    <div class="dialog-content">
      <div class="dialog-header">
        <h2 class="dialog-title" id="gr-imprint-title">Imprint</h2>
        <p class="dialog-description">Who runs this site</p>
      </div>
      <div class="sc-legal">
        <address>Grip Boulderhalle GmbH<br />Drahtwerkstraße 9<br />Bochum, Germany</address>
        <p>Managing directors: Kemal Aydın, Sanne Vos<br />Commercial register: Bochum, HRB 00000</p>
        <p>Contact: <a href="mailto:hello@example.com">hello@example.com</a></p>
      </div>
      <div class="dialog-footer">
        <button class="btn" type="button" commandfor="gr-imprint" command="close">Close</button>
      </div>
    </div>
  </dialog>
  <dialog class="dialog sc-dialog" id="gr-privacy" aria-labelledby="gr-privacy-title">
    <div class="dialog-content">
      <div class="dialog-header">
        <h2 class="dialog-title" id="gr-privacy-title">Privacy</h2>
        <p class="dialog-description">What we keep, and why</p>
      </div>
      <div class="sc-legal">
        <p>This site sets no cookies and runs no trackers. The fonts come from Google Fonts, the photos from Picsum.</p>
        <p
          >For a slot we keep your email until the day after your visit, to send the booking and nothing else. The
          waiver you sign at the counter stays on paper, in the office.</p
        >
        <p>Questions or a request to delete: <a href="mailto:privacy@example.com">privacy@example.com</a></p>
      </div>
      <div class="dialog-footer">
        <button class="btn" type="button" commandfor="gr-privacy" command="close">Close</button>
      </div>
    </div>
  </dialog>
</div>
<script type="module">
  // the look: one of the site's designs
  addEventListener('DOMContentLoaded', () => {
    // light or dark: the switch writes the page's dark class (every look has both palettes); it follows the class when
    // something else sets it (the docs card follows the site's mode)
    const siteMode = df$('#sc-bouldering [data-site-mode]');
    const syncMode = () => siteMode.prop('checked', document.documentElement.classList.contains('dark'));
    siteMode.on('change', () => {
      document.documentElement.classList.toggle('dark', siteMode.prop('checked'));
      document.dispatchEvent(new CustomEvent('defuss-theme-change'));
    });
    new MutationObserver(syncMode).observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
    syncMode();

    // the booking form: sending shows the confirmation (a demo - nothing leaves the page); closing resets it
    df$('#sc-bouldering [data-sc-form]').each((_i, form) => {
      const dialog = df$(form).closest('dialog');
      df$(form).on('submit', (event) => {
        event.preventDefault();
        dialog.attr('data-sent', '');
        dialog.find('.sc-done').get(0).focus();
      });
      dialog.on('close', () => {
        dialog.attr('data-sent', null);
        form.reset();
      });
    });

    const root = df$('#sc-bouldering').get(0);
    const look = df$('#sc-bouldering [data-site-look]');
    look.val(root.dataset.look).on('change', () => {
      root.dataset.look = look.val();
      document.dispatchEvent(new CustomEvent('defuss-theme-change'));
    });
  });
</script>
Composed from Button, Select, Avatar, a Shader (the contour lines drifting under the hero), a Surface (grain under the Granite look) and shapes.css (the corner-blob holds, the ticket pass). The grades are the Fontainebleau scale the gym's tape uses.
Comments, ideas or improvements? Edit this page's source on GitHub