–------------------–-----------

dabblet.css

/* –------------------–-----------
BrutalistCss - by @mhekel
*/

/* -------------------------------------------------------
   FONT IMPORTS
------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700&display=swap");
@import url("https://fonts.cdnfonts.com/css/boldonse");

/* -------------------------------------------------------
   BRUTALIST TOKENS
------------------------------------------------------- */
:root {
  --brut-bg: #f1f0e4;
  --brut-surface: #ffffff;
  --brut-border: #000000;
  --brut-text: #000000;
  --brut-muted: #666666;

  --brut-input-bg: #bafca2;
  --brut-btn-bg: #c4a1ff;
  --brut-btn-bg-hover: #b38df5;

  --brut-font-heading: "Boldonse", system-ui;
  --brut-font-body: "Syne", sans-serif;

  --brut-radius: 0.35rem;
  --brut-gap: 1rem;
  --brut-card-padding: 1.5rem;
  --brut-input-padding: 0.9rem 1rem;

  --brut-border-width: 2px;
  --brut-shadow-offset: 4px;
  --brut-shadow-color: #000000;

  --brut-dropdown-padding: 1rem 1.2rem;

  --brut-transition: 0.15s ease-out;
}

/* -------------------------------------------------------
   GLOBAL
------------------------------------------------------- */
body {
  margin: auto;
  background: var(--brut-bg);
  font-family: var(--brut-font-body);
  color: var(--brut-text);
  width: 75vw;
  align-items: center;
  
}

.brut-stack {
  display: flex;
  flex-direction: column;
  gap: var(--brut-gap);
}

/* -------------------------------------------------------
   HEADER
------------------------------------------------------- */
.brut-header {
  width: 75%;
  background: var(--brut-btn-bg);
  border-bottom: var(--brut-border-width) solid var(--brut-border);
  box-shadow: 0 4px 0 var(--brut-shadow-color);
  padding: 1.5rem;
  text-align: center;
}

.brut-header-title {
  margin: 0;
  font-family: var(--brut-font-heading);
  font-size: 2rem;
  text-transform: uppercase;
}

/* -------------------------------------------------------
   BOX SECTION TITLE
------------------------------------------------------- */
.brut-box {
  width: 75%;
  text-align: center;
  padding: 1rem 0;
}

.brut-section-title {
  margin: 0;
  font-family: var(--brut-font-heading);
  font-size: 1.4rem;
  text-transform: uppercase;
}

/* -------------------------------------------------------
   CARD + STICKY CARD
------------------------------------------------------- */
.brut-card {
  background: var(--brut-surface);
  border: var(--brut-border-width) solid var(--brut-border);
  border-radius: var(--brut-radius);
  padding: var(--brut-card-padding);

  width: 75%;
  box-shadow: var(--brut-shadow-offset) var(--brut-shadow-offset) 0 var(--brut-shadow-color);
}

.brut-sticky-wrapper {
  position: relative;
}

.brut-sticky-card {
  position: sticky;
  top: 1rem;
  height: calc(100vh - 2rem);
  overflow: hidden;
}

.brut-sticky-card-inner {
  height: 75%;
  overflow-y: auto;
  padding: var(--brut-card-padding);
  padding-right: calc(var(--brut-card-padding) + 0.5rem);
}

/* -------------------------------------------------------
   TYPOGRAPHY
------------------------------------------------------- */
.brut-label,
.brut-header-title,
.brut-section-title {
  font-family: var(--brut-font-heading);
}

.brut-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* -------------------------------------------------------
   INPUTS
------------------------------------------------------- */
.brut-input,
textarea {
  width: 95%;
  padding: var(--brut-input-padding);
  border-radius: var(--brut-radius);
  border: var(--brut-border-width) solid var(--brut-border);
  background: var(--brut-input-bg);
  font-family: var(--brut-font-body);
  font-size: 1rem;
}

/* -------------------------------------------------------
   RADIO BUTTONS
------------------------------------------------------- */
.brut-radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.brut-radio input[type="radio"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: var(--brut-border-width) solid var(--brut-border);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.brut-radio input[type="radio"]::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: scale(0);
  background: var(--brut-border);
  transition: var(--brut-transition);
}

.brut-radio input[type="radio"]:checked::before {
  transform: scale(1);
}

/* -------------------------------------------------------
   BUTTONS
------------------------------------------------------- */
.brut-btn {
  padding: 0.9rem 1.2rem;
  border-radius: var(--brut-radius);
  border: var(--brut-border-width) solid var(--brut-border);
  background: var(--brut-btn-bg);
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: var(--brut-shadow-offset) var(--brut-shadow-offset) 0 var(--brut-shadow-color);
  cursor: pointer;
  transition: var(--brut-transition);
}

.brut-btn:hover {
  background: var(--brut-btn-bg-hover);
}

/* -------------------------------------------------------
   BRUTALIST DROPDOWN
------------------------------------------------------- */
.brut-dropdown {
  position: relative;
  width: 100%;
}

.brut-dropdown-toggle {
  padding: var(--brut-dropdown-padding);
  border: var(--brut-border-width) solid var(--brut-border);
  background: var(--brut-surface);
  box-shadow: var(--brut-shadow-offset) var(--brut-shadow-offset) 0 var(--brut-shadow-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--brut-font-body);
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

.brut-dropdown-toggle::after {
  content: "▼";
  font-size: 0.8rem;
}

.brut-dropdown-menu {
  display: none;
  position: absolute;
  width: 100%;
  background: var(--brut-surface);
  border: var(--brut-border-width) solid var(--brut-border);
  box-shadow: var(--brut-shadow-offset) var(--brut-shadow-offset) 0 var(--brut-shadow-color);
  z-index: 10;
}

.brut-dropdown-item {
  padding: var(--brut-dropdown-padding);
  border-bottom: var(--brut-border-width) solid var(--brut-border);
  font-family: var(--brut-font-body);
  font-weight: 600;
  cursor: pointer;
}

.brut-dropdown-item:hover {
  background: var(--brut-btn-bg);
}

.brut-dropdown:hover .brut-dropdown-menu {
  display: block;
}

/* -------------------------------------------------------
   FOOTER
------------------------------------------------------- */
.brut-footer {
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}

.brut-footer-text {
  font-family: var(--brut-font-body);
  font-size: 0.9rem;
  color: var(--brut-muted);
}

dabblet.html

<body><header class="brut-header">
  <h1 class="brut-header-title">Survey Form</h1>
</header>

<div class="brut-box">
  <h2 class="brut-section-title">Does Pineapple Belong on Pizza?</h2>
</div>

<main class="brut-stack">
  <div class="brut-sticky-wrapper">
    <section class="brut-card brut-sticky-card brut-stack">
      <div class="brut-sticky-card-inner brut-stack">

        <form id="survey-form" class="brut-stack">

          <div class="brut-stack">
            <label class="brut-label" for="name">Name</label>
            <input id="name" class="brut-input" type="text" required>
          </div>

          <div class="brut-stack">
            <label class="brut-label" for="email">Email</label>
            <input id="email" class="brut-input" type="email" required>
          </div>

          <div class="brut-stack">
            <label class="brut-label" for="phone">Phone Number</label>
            <input id="phone" class="brut-input" type="tel" required>
          </div>

          <div class="brut-stack">
            <span class="brut-label">Does pineapple belong on pizza?</span>

            <div class="brut-radio-group">
              <label class="brut-radio">
                <input type="radio" name="pineapple" value="yes" required> Yes
              </label>

              <label class="brut-radio">
                <input type="radio" name="pineapple" value="no"> No
              </label>
            </div>
          </div>

          <div class="brut-stack">
            <label class="brut-label">If yes, which combo is better?</label>

            <div class="brut-dropdown">
              <div class="brut-dropdown-toggle">Select one</div>

              <div class="brut-dropdown-menu">
                <div class="brut-dropdown-item">Pepperoni & Pineapple</div>
                <div class="brut-dropdown-item">Canadian Bacon & Pineapple</div>
                <div class="brut-dropdown-item">Neither</div>
              </div>
            </div>
          </div>

          <div class="brut-stack">
            <span class="brut-label">Favorite toppings</span>

            <label><input type="checkbox" value="pepperoni"> Pepperoni</label>
            <label><input type="checkbox" value="pineapple"> Pineapple</label>
            <label><input type="checkbox" value="sausage"> Sausage</label>
            <label><input type="checkbox" value="ham"> Ham</label>
            <label><input type="checkbox" value="green-peppers"> Green Peppers</label>
            <label><input type="checkbox" value="olives"> Olives</label>
          </div>

          <div class="brut-stack">
            <label class="brut-label" for="comments">Your topping masterpiece</label>
            <textarea id="comments" class="brut-input" rows="4"></textarea>
          </div>

          <button class="brut-btn" type="submit">Submit Survey</button>

        </form>

      </div>
    </section>
  </div>
</main>

<footer class="brut-footer">
  <p class="brut-footer-text">© 2026 Brutalist Survey</p>
</footer>
<script>
document.querySelectorAll(".brut-dropdown").forEach(drop => {
  const toggle = drop.querySelector(".brut-dropdown-toggle");
  const items = drop.querySelectorAll(".brut-dropdown-menu-item");

  items.forEach(item => {
    item.addEventListener("click", () => {
      toggle.textContent = item.textContent;
    });
  });
});
</script>
</body>

dabblet.js

document.querySelectorAll(".brut-dropdown").forEach(drop => {
  const toggle = drop.querySelector(".brut-dropdown-toggle");
  const items = drop.querySelectorAll(".brut-dropdown-menu-item");

  items.forEach(item => {
    item.addEventListener("click", () => {
      toggle.textContent = item.textContent;
    });
  });
});

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}