FAQ block

BBryan jay U. Amero·Published Oct 23, 2026
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Safe Sip+ FAQ</title>

<style>
:root {
  --navy: #1B1B4F;
  --midnight: #080820;
  --text: #25254F;
  --muted: #596783;
  --border: #D9E1EF;
  --soft-bg: #F4F6FA;
  --white: #FFFFFF;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 28px 24px;
  background: var(--white);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.7;
}

.faq-section {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.faq-heading {
  margin: 0 0 24px;
  color: var(--navy);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.faq-list {
  width: 100%;
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
  background: var(--white);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 23px 4px;
  border: 0;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.faq-question:hover {
  color: #41417A;
}

.faq-question:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -3px;
  border-radius: 4px;
}

.faq-icon {
  position: relative;
  display: inline-flex;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--navy);
  background: var(--white);
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.faq-icon::after {
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.faq-question[aria-expanded="true"] .faq-icon {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.faq-question[aria-expanded="true"] .faq-icon::after {
  transform: rotate(0deg);
}

.faq-answer {
  padding: 0 42px 24px 4px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
  animation: fadeIn 0.2s ease;
}

.faq-answer p {
  margin: 0 0 12px;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 600px) {
  body {
    padding: 20px 16px;
  }

  .faq-heading {
    font-size: 22px;
    margin-bottom: 18px;
  }

  .faq-question {
    padding: 19px 2px;
    font-size: 15px;
    gap: 12px;
  }

  .faq-icon {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
  }

  .faq-answer {
    padding: 0 8px 21px 2px;
    font-size: 15px;
    line-height: 1.75;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-answer,
  .faq-icon::after {
    animation: none;
    transition: none;
  }
}
</style>
</head>

<body>
<section class="faq-section">
  <h2 class="faq-heading">FAQ block</h2>

  <div class="faq-list" id="safeSipFaq">

    <!-- QUESTION 1: OPEN BY DEFAULT -->
    <div class="faq-item">
      <button class="faq-question"
        type="button"
        id="faq-question-1"
        aria-expanded="true"
        aria-controls="faq-answer-1">
        <span>Can you test a drink for spiking at home or at a venue?</span>
        <span class="faq-icon" aria-hidden="true"></span>
      </button>

      <div class="faq-answer"
        id="faq-answer-1"
        role="region"
        aria-labelledby="faq-question-1">
        <p>
          Yes. A drink test sticker like Safe Sip+ checks a drop of your
          drink for GHB, Ketamine and Rohypnol in 3 minutes, with no tools
          needed.
        </p>
      </div>
    </div>

    <!-- QUESTION 2 -->
    <div class="faq-item">
      <button class="faq-question"
        type="button"
        id="faq-question-2"
        aria-expanded="false"
        aria-controls="faq-answer-2">
        <span>What does Safe Sip+ Drink Test Sticker detect?</span>
        <span class="faq-icon" aria-hidden="true"></span>
      </button>

      <div class="faq-answer"
        id="faq-answer-2"
        role="region"
        aria-labelledby="faq-question-2"
        hidden>
        <p>
          Gamma-Hydroxybutyrate (GHB), Ketamine (KET) and Rohypnol (FLZ).
        </p>
      </div>
    </div>

    <!-- QUESTION 3 -->
    <div class="faq-item">
      <button class="faq-question"
        type="button"
        id="faq-question-3"
        aria-expanded="false"
        aria-controls="faq-answer-3">
        <span>How long does Safe Sip+ Drink Test Sticker take?</span>
        <span class="faq-icon" aria-hidden="true"></span>
      </button>

      <div class="faq-answer"
        id="faq-answer-3"
        role="region"
        aria-labelledby="faq-question-3"
        hidden>
        <p>
          3 minutes. Read the result once the spots are dry, and not after
          5 minutes.
        </p>
      </div>
    </div>

    <!-- QUESTION 4 -->
    <div class="faq-item">
      <button class="faq-question"
        type="button"
        id="faq-question-4"
        aria-expanded="false"
        aria-controls="faq-answer-4">
        <span>Does a negative result mean my drink is safe?</span>
        <span class="faq-icon" aria-hidden="true"></span>
      </button>

      <div class="faq-answer"
        id="faq-answer-4"
        role="region"
        aria-labelledby="faq-question-4"
        hidden>
        <p>
          No. It means GHB, Ketamine and Rohypnol weren't detected.
          Drinks can be spiked with alcohol or other drugs, so trust how
          you feel and get help if you feel unwell.
        </p>
      </div>
    </div>

    <!-- QUESTION 5 -->
    <div class="faq-item">
      <button class="faq-question"
        type="button"
        id="faq-question-5"
        aria-expanded="false"
        aria-controls="faq-answer-5">
        <span>Can I use Safe Sip+ Drink Test Sticker with any drink?</span>
        <span class="faq-icon" aria-hidden="true"></span>
      </button>

      <div class="faq-answer"
        id="faq-answer-5"
        role="region"
        aria-labelledby="faq-question-5"
        hidden>
        <p>
          Safe Sip+ is for alcoholic and non-alcoholic drinks. The test
          should not be used with milk products or beverages containing
          milk products.
        </p>
      </div>
    </div>

    <!-- QUESTION 6 -->
    <div class="faq-item">
      <button class="faq-question"
        type="button"
        id="faq-question-6"
        aria-expanded="false"
        aria-controls="faq-answer-6">
        <span>What should I do if the test is positive?</span>
        <span class="faq-icon" aria-hidden="true"></span>
      </button>

      <div class="faq-answer"
        id="faq-answer-6"
        role="region"
        aria-labelledby="faq-question-6"
        hidden>
        <p>
          Don't drink it. Keep the drink if you can, tell venue staff or
          a friend, and contact police.
        </p>
      </div>
    </div>

  </div>
</section>

<script>
(function () {
  const faq = document.getElementById("safeSipFaq");
  if (!faq) return;

  const questions = faq.querySelectorAll(".faq-question");

  questions.forEach(function (question) {
    question.addEventListener("click", function () {
      const isOpen = question.getAttribute("aria-expanded") === "true";

      // Close all questions first
      questions.forEach(function (item) {
        item.setAttribute("aria-expanded", "false");

        const answerId = item.getAttribute("aria-controls");
        const answer = document.getElementById(answerId);

        if (answer) answer.hidden = true;
      });

      // Open the clicked question if it was previously closed
      if (!isOpen) {
        question.setAttribute("aria-expanded", "true");

        const answerId = question.getAttribute("aria-controls");
        const answer = document.getElementById(answerId);

        if (answer) answer.hidden = false;
      }
    });
  });
})();
</script>
</body>
</html>
Explore more drops →