Site Builder

Editing: modules-faq2.php

writable 0666

<?php
/**************************************************************************
 *  FAQ DISPLAY MODULE  – gold‑card accordion           © BestDealOn 2025
 *  ----------------------------------------------------------------------
 *  • Expects helpers.php to be included first (`get_faq()` available)
 *  • Simply `require 'faq-display.php';` inside any page template.
 **************************************************************************/

if (!function_exists('get_faq')) {
    // defensive fallback – nothing rendered if helper missing
    return;
}

$cats = array_filter(get_faq(), fn($c) => !empty($c['faqs']));
if (!$cats) return;                                             // nothing to show

/* small escape helper */
function e(string $s): string { return htmlspecialchars($s, ENT_QUOTES, 'UTF-8'); }
?>

<section class="faq-shell">
  <div class="faq-card">
    <h2>Frequently&nbsp;Asked&nbsp;Questions</h2>

<?php foreach ($cats as $ci => $cat): ?>
      <h3 class="faq-cat"><?= e($cat['name'] ?: 'FAQ') ?></h3>

<?php foreach (($cat['faqs'] ?? []) as $qi => $qa):
              if (!($qa['active'] ?? true)) continue;           // skip inactive
              $id = "faq{$ci}_{$qi}";
      ?>
        <details class="faq-item" id="<?= $id ?>">
          <summary>
            <span class="q"><?= e($qa['q'] ?? 'Untitled question') ?></span>
            <svg class="chev" viewBox="0 0 16 16" width="16" height="16"
                 aria-hidden="true"><path d="M4 6l4 4 4-4" fill="none"
                 stroke="currentColor" stroke-width="2" stroke-linecap="round"
                 stroke-linejoin="round"/></svg>
          </summary>
          <div class="a">
            <?= nl2br(e($qa['a'] ?? '')) ?>
          </div>
        </details>
      <?php endforeach; ?>
    <?php endforeach; ?>
  </div>
</section>

<script type="application/ld+json">
<?= json_encode([
      '@context'    => 'https://schema.org',
      '@type'       => 'FAQPage',
      'mainEntity'  => array_merge(...array_map(function ($c) {
          return array_values(array_filter(array_map(function ($qa) {
              if (!($qa['active'] ?? true)) return null;
              return [
                  '@type'          => 'Question',
                  'name'           => $qa['q'],
                  'acceptedAnswer' => [
                      '@type' => 'Answer',
                      'text'  => $qa['a'],
                  ]
              ];
          }, $c['faqs'] ?? [])));
      }, $cats))
  ], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) ?>
</script>

/* ---------- gold card ---------- */
.faq-card{
  background:#fff;
  padding:1.8rem 1.6rem;
  border:3.5px solid #ffb63b;          /* gold outline */
  border-radius:27px;
  box-shadow:0 8px 26px rgb(0 0 0 / 6%);
}
.faq-card h2{
  margin:0 0 1.2rem;
  font-size:1.35rem;
  font-weight:700;
  color:#0F3760;                       /* ⬆ meets 4.5:1 vs white */
  text-align:center;
}
.faq-cat{
  margin:1.6rem 0 .7rem;
  font-size:1.08rem;
  font-weight:700;
  color:#B15A00;                       /* ⬆ 7.1:1 vs white */
}

/* ---------- accordion items ---------- */
.faq-item{
  border:1px solid #FFE3A1;
  border-radius:10px;
  margin:.55rem 0;
  background:#FFFEF9;                  /* warmer off‑white for cards */
  transition:border-color .2s, box-shadow .2s;
}

/* --- summary / question row --- */
.faq-item summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  list-style:none;                     /* remove default marker */
  cursor:pointer;
  padding:.9rem 1.1rem;
  font-weight:600;
  outline:none;                        /* we’ll add our own focus ring */
}
.faq-item summary::-webkit-details-marker{display:none} /* Safari */

.faq-item summary:focus-visible{
  outline:3px solid #0066FF;
  outline-offset:2px;
}

.faq-item .q{                          /* question text */
  color:#934400;                       /* 7.5:1 vs background */
  flex:1;
}
.faq-item .chev{
  flex:none;
  margin-left:.6rem;
  color:#934400;
  transition:transform .25s ease;
}

/* --- open state --- */
.faq-item[open]{
  border-color:#FFB63B;
  box-shadow:0 3px 12px rgb(196 155 99 / 28%);
}
.faq-item[open] .chev{transform:rotate(180deg)}

/* --- answer block --- */
.faq-item .a{
  padding:0 1.1rem 1rem;
  line-height:1.6;
  color:#333;                          /* 12.6:1 vs background */
  border-top:1px solid #FFE3A1;
}

/* ---------- accessibility: reduced‑motion ---------- */
@media (prefers-reduced-motion:reduce){
  .faq-item .chev{transition:none}
}

/* ---------- dark‑mode palette ---------- */
@media (prefers-color-scheme:dark){
  .faq-card{background:#1E1E1E;border-color:#FFB63B;box-shadow:0 6px 20px rgb(0 0 0 / 50%)}
  .faq-card h2{color:#E6EDF3}
  .faq-cat{color:#FFB63B}
  .faq-item{background:#282828;border-color:#605336}
  .faq-item summary:focus-visible{outline-color:#4C8DFF}
  .faq-item .q{color:#FFC26B}
  .faq-item .chev{color:#FFC26B}
  .faq-item .a{color:#D0D4DA;border-top-color:#605336}
}

/* ---------- responsive touch target ---------- */
@media (max-width:500px){
  .faq-item summary{padding:.8rem .9rem}
  .faq-item .a{padding:.4rem .9rem 1rem}
}</style>

Site Builder

Editing: modules-faq2.php

Site Builder