⚙️

Super setup — Order Samples

This page contains the page-level styling and interaction code for the Order Samples page.

Where to install it

Open the Residential Studio Super dashboard.
Select Pages and open Order Samples.
Choose ••• → Edit code.
Paste the first snippet into CSS.
Paste the second snippet into Body.
Save, publish and test on desktop and mobile.

Super supports page-level code through the page menu, so these styles can remain isolated from the rest of the website.

CSS

:root {
  --rs-ink: #34312f;
  --rs-muted: #6f6964;
  --rs-paper: #fbf8f4;
  --rs-warm: #efe8e1;
  --rs-line: #d8d0c8;
  --rs-rust: #a9583d;
}

body {
  background: var(--rs-paper) !important;
  color: var(--rs-ink) !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

.super-content.max-width,
.notion-root {
  max-width: 1280px !important;
}

.notion-header__title {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: clamp(42px, 6vw, 76px) !important;
  font-weight: 400 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  line-height: 1.05 !important;
}

.notion-heading {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-weight: 400 !important;
  letter-spacing: .16em !important;
}

.notion-text__content,
.notion-list-item {
  color: var(--rs-muted) !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
}

.notion-divider {
  border-color: var(--rs-line) !important;
  margin: 48px 0 !important;
}

.notion-column-list {
  gap: 28px !important;
}

.notion-image img {
  border-radius: 0 !important;
  width: 100% !important;
  object-fit: cover !important;
}

.rs-hero {
  align-items: center !important;
  min-height: 620px;
}

.rs-hero .notion-image img {
  min-height: 560px;
  object-fit: cover !important;
}

.rs-values .notion-column {
  border-right: 1px solid var(--rs-line);
  padding-right: 28px;
}

.rs-values .notion-column:last-child {
  border-right: 0;
}

.rs-sample-card {
  cursor: pointer;
  position: relative;
  transition: transform .2s ease;
  outline: 1px solid transparent;
  outline-offset: 6px;
}

.rs-sample-card:hover {
  transform: translateY(-5px);
}

.rs-sample-card.rs-selected {
  outline-color: var(--rs-rust);
}

.rs-sample-card.rs-selected::after {
  content: 'Selected';
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: white;
  color: var(--rs-ink);
  padding: 6px 8px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.notion-callout.bg-brown-light {
  background: var(--rs-warm) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 34px 40px !important;
  margin: 52px 0 !important;
}

.notion-link[href^='mailto:'] {
  display: inline-flex !important;
  min-height: 48px;
  align-items: center;
  padding: 0 24px;
  border: 1px solid var(--rs-ink);
  color: var(--rs-ink) !important;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: .2s ease;
}

.notion-link[href^='mailto:']:hover {
  background: var(--rs-ink);
  color: white !important;
}

.rs-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 9999;
  transform: translate(-50%, 16px);
  background: var(--rs-ink);
  color: white;
  padding: 12px 18px;
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
}

.rs-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 760px) {
  .notion-header__title {
    font-size: 38px !important;
    letter-spacing: .1em !important;
  }
  .notion-column-list {
    gap: 24px !important;
  }
  .rs-hero .notion-image img {
    min-height: 360px;
  }
  .rs-values .notion-column {
    border-right: 0;
    border-bottom: 1px solid var(--rs-line);
    padding: 22px 0;
  }
  .notion-callout.bg-brown-light {
    padding: 26px 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

Body code

This adds selectable material cards and inserts the selections into the email request.

<script>
(function () {
  function textOf(el) {
    return (el && el.textContent || '').trim().toUpperCase();
  }

  function findColumn(title) {
    var headings = Array.from(document.querySelectorAll('.notion-heading, h2, h3'));
    var heading = headings.find(function (el) { return textOf(el) === title; });
    return heading ? heading.closest('.notion-column') : null;
  }

  function initialise() {
    var columnLists = Array.from(document.querySelectorAll('.notion-column-list'));
    if (columnLists[0]) columnLists[0].classList.add('rs-hero');
    if (columnLists[1]) columnLists[1].classList.add('rs-values');

    var sampleNames = ['TIMBER', 'STONE & SURFACES', 'TILES', 'TEXTILES', 'FEATURE FINISHES'];
    var selected = new Set();
    var toast = document.createElement('div');
    toast.className = 'rs-toast';
    toast.setAttribute('role', 'status');
    toast.setAttribute('aria-live', 'polite');
    document.body.appendChild(toast);

    function announce(message) {
      toast.textContent = message;
      toast.classList.add('is-visible');
      clearTimeout(window.rsToastTimer);
      window.rsToastTimer = setTimeout(function () {
        toast.classList.remove('is-visible');
      }, 1600);
    }

    function updateEmailLinks() {
      var list = Array.from(selected).join(', ');
      var subject = 'Residential Studio sample request';
      var body = list
        ? 'Hello Residential Studio,\n\nI would like to request samples from: ' + list + '.\n\nProject location:\n\nPreferred colours or finishes:\n'
        : 'Hello Residential Studio,\n\nI would like to request material samples.\n\nProject location:\n\nPreferred materials, colours or finishes:\n';
      document.querySelectorAll("a[href^='mailto:hi@residentialstudio.com.au']").forEach(function (link) {
        if (textOf(link).indexOf('CONSULTATION') === -1) {
          link.href = 'mailto:hi@residentialstudio.com.au?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body);
        }
      });
    }

    sampleNames.forEach(function (name) {
      var card = findColumn(name);
      if (!card || card.dataset.rsReady) return;
      card.dataset.rsReady = 'true';
      card.classList.add('rs-sample-card');
      card.setAttribute('role', 'button');
      card.setAttribute('tabindex', '0');
      card.setAttribute('aria-pressed', 'false');

      function toggle() {
        var active = card.classList.toggle('rs-selected');
        card.setAttribute('aria-pressed', active ? 'true' : 'false');
        if (active) selected.add(name); else selected.delete(name);
        updateEmailLinks();
        announce(active ? name + ' selected' : name + ' removed');
      }

      card.addEventListener('click', toggle);
      card.addEventListener('keydown', function (event) {
        if (event.key === 'Enter' || event.key === ' ') {
          event.preventDefault();
          toggle();
        }
      });
    });

    updateEmailLinks();
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initialise);
  } else {
    initialise();
  }
})();
</script>

Interaction behaviour

Each material category can be selected or deselected.
Selected categories receive a visible outline and accessible pressed state.
Order Samples and Request Samples open a pre-filled email to hi@residentialstudio.com.au.
The email body automatically includes the selected categories.
Book a Consultation retains its separate consultation subject line.