{"id":5940,"date":"2025-09-29T11:16:34","date_gmt":"2025-09-29T05:46:34","guid":{"rendered":"https:\/\/tbspanthers.british-school.org\/?page_id=5940"},"modified":"2026-10-24T14:54:53","modified_gmt":"2026-10-24T09:24:53","slug":"wall-of-fame","status":"publish","type":"page","link":"https:\/\/tbspanthers.british-school.org\/index.php\/wall-of-fame\/","title":{"rendered":""},"content":{"rendered":"\n<!-- TBS Panthers | wall-of-fame \u2014 paste this whole file into ONE Custom HTML block (older WordPress without HTML\/CSS\/JS tabs) -->\n<section id=\"wof\" aria-label=\"Wall of Fame\">\n  <div class=\"wof-hero\">\n    <span class=\"wof-word\" aria-hidden=\"true\">Legends<\/span>\n    <span class=\"wof-laurel\" aria-hidden=\"true\">\u2605<\/span>\n    <p class=\"wof-kick\">The Panthers honour roll<\/p>\n    <p class=\"wof-intro\">Celebrating our standout students for their dedication, sportsmanship and achievements across events. Explore highlights from recent competitions, discover the stories behind each win, and get inspired by the effort that made it happen.<\/p>\n    <div class=\"wof-count\" id=\"wofCount\" hidden><\/div>\n  <\/div>\n  <div class=\"wof-bar\">\n    <label class=\"wof-search\">\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"\/><path d=\"M20 20l-4-4\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"square\"\/><\/svg>\n      <input id=\"searchStudent\" type=\"search\" placeholder=\"Search student by name\u2026\" aria-label=\"Search student by name\">\n    <\/label>\n  <\/div>\n  <div id=\"achieverCards\" class=\"wof-grid\" aria-live=\"polite\">\n    <p class=\"wof-load\">Loading achievers <i><\/i><i><\/i><i><\/i><\/p>\n  <\/div>\n<\/section>\n<style>\n\/* Panthers | Wall of Fame \u2014 paste into the CSS tab (no <style> tags needed).\n   Everything is scoped to #wof and uses the theme's colours and fonts. *\/\n#wof{\n  --ink: var(--tbsp-ink, #051F52);\n  --coal: var(--tbsp-coal, #031538);\n  --navy2: var(--tbsp-coal-2, #0B2B6B);\n  --gold: var(--tbsp-accent, #EEC058);\n  --gold-text: var(--tbsp-accent-text, #7D5E12);\n  --beige: var(--tbsp-beige, #DECABA);\n  --paper: var(--tbsp-paper, #F3EEE8);\n  --fd: var(--tbsp-font-display, \"Barlow Condensed\", \"Arial Narrow\", sans-serif);\n  --fb: var(--tbsp-font-body, Inter, system-ui, sans-serif);\n  --foil: linear-gradient(135deg, #FFF3C4 0%, #EEC058 22%, #A97A1C 48%, #F6D98A 70%, #B98A2A 100%);\n  --cut: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);\n  box-sizing: border-box; width: 100%; max-width: 1680px; margin: 0 auto; padding: 0 0 clamp(40px, 6vw, 90px);\n  font-family: var(--fb); color: var(--ink);\n}\n#wof *, #wof *::before, #wof *::after{ box-sizing: border-box; }\n\/* ---------- Intro: a dark \"honour roll\" band ---------- *\/\n#wof .wof-hero{ position: relative; overflow: hidden; isolation: isolate; padding: clamp(34px, 5vw, 60px) clamp(22px, 4vw, 60px); background: radial-gradient(70% 120% at 100% 0, rgba(238,192,88,.20), transparent 55%), linear-gradient(120deg, var(--coal), var(--ink) 60%, var(--navy2)); color: #fff; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%); }\n#wof .wof-hero::after{ content: \"\"; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--foil); }\n#wof .wof-word{ position: absolute; right: -12px; bottom: -34px; z-index: -1; font: 800 clamp(110px, 16vw, 260px)\/.8 var(--fd); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px rgba(238,192,88,.13); white-space: nowrap; pointer-events: none; }\n#wof .wof-laurel{ position: absolute; right: clamp(22px, 5vw, 70px); top: clamp(22px, 4vw, 44px); display: grid; place-items: center; width: 74px; height: 74px; background: var(--foil); color: var(--ink); font-size: 34px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); box-shadow: 0 0 40px rgba(238,192,88,.4); animation: wofGlow 4s ease-in-out infinite; }\n@keyframes wofGlow{ 50%{ filter: brightness(1.15); transform: rotate(6deg); } }\n#wof .wof-kick{ display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 700 15px\/1 var(--fd); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }\n#wof .wof-kick::before{ content: \"\"; width: 38px; height: 2px; background: var(--gold); }\n#wof .wof-intro{ max-width: 760px; margin: 0; font-size: clamp(15.5px, 1.5vw, 18px); line-height: 1.7; color: rgba(255,255,255,.86); }\n#wof .wof-count{ display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 44px); margin-top: 26px; }\n#wof .wof-count span{ display: grid; font: 700 12px\/1.2 var(--fd); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.75); }\n#wof .wof-count b{ font: 800 clamp(38px, 4vw, 54px)\/1 var(--fd); letter-spacing: 0; background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }\n\/* ---------- Search ---------- *\/\n#wof .wof-bar{ display: flex; justify-content: flex-start; margin: clamp(22px, 3vw, 34px) 0 clamp(20px, 2.6vw, 32px); }\n#wof .wof-search{ position: relative; display: block; width: min(100%, 480px); margin: 0; }\n#wof .wof-search input{ width: 100%; height: 54px; margin: 0; padding: 0 16px 0 50px; border: 2px solid rgba(5,31,82,.14); border-radius: 0; background: #fff; font: 500 16px var(--fb); color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s; }\n#wof .wof-search input:focus{ border-color: var(--gold); box-shadow: 0 0 0 4px rgba(238,192,88,.18); }\n#wof .wof-search svg{ position: absolute; left: 17px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: #4E5C78; }\n\/* ---------- Grid ---------- *\/\n#wof .wof-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: clamp(18px, 2.2vw, 30px); }\n#wof .wof-grid.is-few{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 420px)); justify-content: center; }\n\/* ---------- The card: a navy trophy card in a gold-foil frame ---------- *\/\n@keyframes wofIn{ from{ opacity: 0; transform: translateY(22px) scale(.98); } to{ opacity: 1; transform: none; } }\n#wof .wof-card{ position: relative; padding: 3px; background: var(--foil); clip-path: var(--cut); filter: drop-shadow(0 24px 30px rgba(5,31,82,.22)); opacity: 0; animation: wofIn .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i, 0) * 55ms); transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .45s; }\n#wof .wof-card:hover{ transform: translateY(-8px); filter: drop-shadow(0 34px 40px rgba(5,31,82,.32)); }\n#wof .wof-in{ position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; background: linear-gradient(180deg, var(--ink), var(--coal)); color: #fff; clip-path: var(--cut); }\n\/* gold shine that sweeps across on hover *\/\n#wof .wof-in::after{ content: \"\"; position: absolute; inset: 0; z-index: 5; background: linear-gradient(115deg, transparent 30%, rgba(255,240,190,.35) 47%, transparent 62%); transform: translateX(-130%); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); pointer-events: none; }\n#wof .wof-card:hover .wof-in::after{ transform: translateX(130%); }\n#wof .wof-media{ position: relative; aspect-ratio: 4 \/ 3.2; overflow: hidden; background: radial-gradient(70% 70% at 50% 40%, var(--navy2), var(--coal)); }\n#wof .wof-media img{ width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }\n#wof .wof-card:hover .wof-media img{ transform: scale(1.08); }\n#wof .wof-media img.is-ph{ object-fit: contain; padding: 16% 16% 24%; opacity: .9; }\n#wof .wof-media::after{ content: \"\"; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,21,56,.25) 0, transparent 28%, transparent 55%, var(--ink) 100%); pointer-events: none; }\n\/* corner ribbon *\/\n#wof .wof-ribbon{ position: absolute; top: 18px; right: -42px; z-index: 3; width: 170px; padding: 7px 0; text-align: center; background: var(--foil); color: var(--ink); font: 800 12px\/1 var(--fd); letter-spacing: .24em; text-transform: uppercase; transform: rotate(45deg); box-shadow: 0 6px 14px rgba(0,0,0,.25); }\n#wof .wof-who{ position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; margin-top: -58px; padding: 0 20px; text-align: center; }\n#wof .wof-avatar{ width: 104px; height: 104px; padding: 4px; background: var(--foil); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }\n#wof .wof-avatar img{ width: 100%; height: 100%; object-fit: cover; display: block; clip-path: inherit; background: #e9eef6; }\n#wof .wof-name{ margin: 12px 0 0; font: 800 clamp(26px, 2.2vw, 31px)\/1 var(--fd); text-transform: uppercase; letter-spacing: .02em; color: #fff; }\n#wof .wof-act{ display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font: 700 13px\/1 var(--fd); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }\n#wof .wof-act::before, #wof .wof-act::after{ content: \"\"; width: 18px; height: 1px; background: currentColor; opacity: .6; }\n#wof .wof-body{ display: flex; flex-direction: column; flex: 1; padding: 16px 22px 20px; }\n#wof .wof-desc{ margin: 0 0 12px; font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.82); text-align: center; word-break: break-word; }\n#wof .wof-desc.is-clamped{ display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }\n#wof .wof-more{ align-self: center; margin: -2px 0 14px; padding: 0 0 3px; border: 0; border-bottom: 2px solid var(--gold); background: none; cursor: pointer; font: 800 12.5px\/1 var(--fd); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }\n#wof .wof-foot{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(238,192,88,.22); }\n#wof .wof-date{ display: inline-flex; align-items: center; gap: 8px; font: 700 13px\/1 var(--fd); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.75); }\n#wof .wof-date::before{ content: \"\"; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }\n#wof .wof-share{ display: flex; gap: 6px; }\n#wof .wof-share a{ display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(238,192,88,.35); color: var(--gold); text-decoration: none; transition: background .2s, color .2s, border-color .2s; }\n#wof .wof-share a:hover, #wof .wof-share a:focus-visible{ background: var(--gold); border-color: var(--gold); color: var(--ink); }\n#wof .wof-share svg{ width: 15px; height: 15px; }\n\/* ---------- Spotlight: the newest achievement, shown wide ---------- *\/\n#wof .wof-card.is-spot{ grid-column: span 2; }\n#wof .wof-card.is-spot .wof-in{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }\n#wof .wof-card.is-spot .wof-media{ aspect-ratio: auto; min-height: 100%; }\n#wof .wof-card.is-spot .wof-media::after{ background: linear-gradient(90deg, transparent 55%, var(--ink)); }\n#wof .wof-card.is-spot .wof-side{ display: flex; flex-direction: column; justify-content: center; }\n#wof .wof-card.is-spot .wof-who{ margin-top: 0; padding-top: 30px; }\n#wof .wof-card.is-spot .wof-name{ font-size: clamp(32px, 3vw, 44px); }\n#wof .wof-spot-tag{ display: inline-block; margin-bottom: 14px; padding: 6px 12px; border: 1px solid var(--gold); font: 800 12px\/1 var(--fd); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }\n@media (max-width: 760px){ #wof .wof-card.is-spot{ grid-column: auto; } #wof .wof-card.is-spot .wof-in{ display: flex; } #wof .wof-card.is-spot .wof-media{ aspect-ratio: 4 \/ 3.2; min-height: 0; } #wof .wof-card.is-spot .wof-who{ margin-top: -58px; padding-top: 0; } }\n\/* ---------- Loading \/ empty ---------- *\/\n#wof .wof-empty, #wof .wof-load{ grid-column: 1 \/ -1; padding: 44px 20px; text-align: center; background: var(--paper); font: 700 18px var(--fd); letter-spacing: .08em; text-transform: uppercase; color: #4E5C78; }\n#wof .wof-load i{ display: inline-block; width: 10px; height: 10px; margin: 0 3px; background: var(--gold); animation: wofDot 1s infinite alternate; }\n#wof .wof-load i:nth-child(2){ animation-delay: .2s; } #wof .wof-load i:nth-child(3){ animation-delay: .4s; }\n@keyframes wofDot{ to{ opacity: .2; transform: translateY(-4px); } }\n@media (max-width: 560px){ #wof .wof-laurel{ width: 54px; height: 54px; font-size: 24px; } #wof .wof-intro{ padding-right: 40px; } }\n@media (prefers-reduced-motion: reduce){ #wof .wof-card{ animation: none; opacity: 1; transition: none; } #wof .wof-media img, #wof .wof-in::after, #wof .wof-laurel{ transition: none; animation: none; } }\n<\/style>\n<script>\n\/* Panthers | Wall of Fame \u2014 paste into the JavaScript tab (no <script> tags needed).\n   Reads the same Google Sheet: Date | Category | Activity | Gender | Student | ProfilePhoto | Description | Event Photo\n   (No \"and\" signs are written in this script: WordPress sometimes rewrites them.) *\/\n(function () {\n  var A = String.fromCharCode(38);\n  var csvUrl = [\"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vRQmnqZg28u6ywwpGsFs7HHcBF5uf_bj9jppYDmuSAqf1NY67RpVXCtbUB0Qkgf2lA6K6zdbJy0Sdfr\/pub?gid=0\", \"single=true\", \"output=csv\"].join(A);\n  \/\/ Shown when a photo is missing or blocked: the Panthers badge from the theme.\n  var FALLBACK = \"\/wp-content\/themes\/tbs-panthers\/assets\/img\/panthers-badge.png\";\n  function start() {\n    var grid = document.getElementById(\"achieverCards\");\n    var box = document.getElementById(\"searchStudent\");\n    var countEl = document.getElementById(\"wofCount\");\n    if (!grid) return;\n    var all = [];\n    \/* ---------- Google Drive photos ---------- *\/\n    function driveId(url) {\n      if (!url) return \"\";\n      var m = url.match(\/\\\/file\\\/d\\\/([a-zA-Z0-9_-]{20,})\/) || url.match(\/[?\\x26]id=([a-zA-Z0-9_-]{20,})\/) || url.match(\/\\\/d\\\/([a-zA-Z0-9_-]{20,})\/);\n      if (m) return m[1];\n      if (\/drive\\.google|googleusercontent\/.test(url)) { m = url.match(\/([a-zA-Z0-9_-]{25,})\/); return m ? m[1] : \"\"; }\n      return \"\";\n    }\n    function pickImage(url, size) {\n      if (!url) return { src: \"\", fb: [] };\n      var id = driveId(url);\n      if (!id) return { src: url, fb: [] };\n      return { src: \"https:\/\/lh3.googleusercontent.com\/d\/\" + id + \"=s\" + size,\n               fb: [\"https:\/\/drive.google.com\/thumbnail?id=\" + id + A + \"sz=w\" + size, \"https:\/\/drive.google.com\/uc?export=view\" + A + \"id=\" + id] };\n    }\n    window.wofImgFallback = function (img) {\n      var list = (img.getAttribute(\"data-fallbacks\") || \"\").split(\"||\").filter(Boolean);\n      var next = list.shift();\n      img.setAttribute(\"data-fallbacks\", list.join(\"||\"));\n      if (next) { img.src = next; return; }\n      img.onerror = null; img.src = FALLBACK;\n      if (img.closest(\".wof-media\")) img.className = \"is-ph\";\n    };\n    \/* ---------- Helpers ---------- *\/\n    function esc(s) { return (s == null ? \"\" : String(s)).replace(\/\\x26\/g, A + \"amp;\").replace(\/<\/g, A + \"lt;\").replace(\/>\/g, A + \"gt;\").replace(\/\"\/g, A + \"quot;\").replace(\/'\/g, A + \"#39;\"); }\n    function parseDate(mdy) {\n      var m = (mdy || \"\").trim().match(\/^(\\d{1,2})\\\/(\\d{1,2})\\\/(\\d{4})$\/);\n      if (!m) return null;\n      var d = new Date(+m[3], +m[1] - 1, +m[2]);\n      if (d.getMonth() + 1 !== +m[1]) return null;\n      return d.getDate() === +m[2] ? d : null;\n    }\n    function niceDate(mdy) { var d = parseDate(mdy); return d ? d.toLocaleDateString(\"en-GB\", { day: \"numeric\", month: \"short\", year: \"numeric\" }) : (mdy || \"\"); }\n    \/\/ CSV reader that copes with commas and line breaks inside \"quoted\" cells.\n    function parseCSV(text) {\n      var rows = [], row = [], cell = \"\", q = false;\n      for (var i = 0; i < text.length; i++) {\n        var c = text[i];\n        if (q) {\n          if (c === '\"') { if (text[i + 1] === '\"') { cell += '\"'; i++; } else { q = false; } } else { cell += c; }\n        } else if (c === '\"') { q = true; }\n        else if (c === \",\") { row.push(cell); cell = \"\"; }\n        else if (c === \"\\n\" || c === \"\\r\") { if (c === \"\\r\") { if (text[i + 1] === \"\\n\") i++; } row.push(cell); rows.push(row); row = []; cell = \"\"; }\n        else { cell += c; }\n      }\n      if (cell !== \"\" || row.length) { row.push(cell); rows.push(row); }\n      return rows.filter(function (r) { return r.some(function (x) { return x.trim() !== \"\"; }); });\n    }\n    var ICON = {\n      fb: '<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M13.5 21v-7.5H16l.4-3h-2.9V8.6c0-.9.3-1.5 1.5-1.5h1.5V4.4c-.3 0-1.2-.1-2.2-.1-2.2 0-3.7 1.3-3.7 3.8v2.4H8v3h2.6V21h2.9z\"\/><\/svg>',\n      x: '<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M17.8 3h3.1l-6.8 7.8L22 21h-6.2l-4.9-6.3L5.3 21H2.2l7.3-8.3L2 3h6.3l4.4 5.8L17.8 3zm-1.1 16.2h1.7L7.4 4.7H5.6l11.1 14.5z\"\/><\/svg>',\n      wa: '<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M12 2a10 10 0 00-8.6 15.1L2 22l5-1.3A10 10 0 1012 2zm0 18.2c-1.5 0-3-.4-4.3-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1112 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 01-3.3-2.9c-.3-.4.3-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 00-.7.3 2.9 2.9 0 00-.9 2.2 5 5 0 001 2.7 11.5 11.5 0 004.4 3.9c1.6.7 2.3.8 3.1.6.5-.1 1.5-.6 1.7-1.2s.2-1.1.2-1.2-.2-.2-.5-.3z\"\/><\/svg>'\n    };\n    function shareLinks(p) {\n      var url = encodeURIComponent(location.href.split(\"#\")[0].split(\"?\")[0]);\n      var txt = encodeURIComponent(p.student + \" \u2014 \" + p.activity + \" \u00b7 TBS Panthers Wall of Fame\");\n      return '<a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=' + url + '\" target=\"_blank\" rel=\"noopener\" aria-label=\"Share on Facebook\">' + ICON.fb + '<\/a>' +\n             '<a href=\"https:\/\/twitter.com\/intent\/tweet?url=' + url + A + 'text=' + txt + '\" target=\"_blank\" rel=\"noopener\" aria-label=\"Share on X\">' + ICON.x + '<\/a>' +\n             '<a href=\"https:\/\/wa.me\/?text=' + txt + '%20' + url + '\" target=\"_blank\" rel=\"noopener\" aria-label=\"Share on WhatsApp\">' + ICON.wa + '<\/a>';\n    }\n    \/* ---------- Load the sheet ---------- *\/\n    fetch(csvUrl)\n      .then(function (r) { return r.text(); })\n      .then(function (csv) {\n        all = parseCSV(csv).slice(1).map(function (v) {\n          v = v.map(function (c) { return (c || \"\").trim(); });\n          return { date: v[0] || \"\", nice: niceDate(v[0]), event: v[1] || \"\", activity: v[2] || \"\", student: v[4] || \"\", photo: v[5] || \"\",\n                   description: v.length > 8 ? v.slice(6, -1).join(\", \") : (v[6] || \"\"), eventPhoto: v.length > 7 ? v[v.length - 1] : \"\" };\n        }).filter(function (p) { return p.student; });\n        \/\/ Newest achievements first\n        all.sort(function (a, b) { return (parseDate(b.date) || 0) - (parseDate(a.date) || 0); });\n        counts(); render();\n      })\n      .catch(function (e) { grid.innerHTML = '<p class=\"wof-empty\">Could not load the Wall of Fame right now.<\/p>'; console.error(\"Wall of Fame:\", e); });\n    function counts() {\n      if (!countEl) return;\n      var acts = {}, kids = {};\n      all.forEach(function (p) { if (p.activity) acts[p.activity.toLowerCase()] = 1; kids[p.student.toLowerCase()] = 1; });\n      countEl.innerHTML = '<span><b>' + all.length + '<\/b>Achievements<\/span><span><b>' + Object.keys(kids).length + '<\/b>Students<\/span><span><b>' + Object.keys(acts).length + '<\/b>Sports<\/span>';\n      countEl.hidden = !all.length;\n    }\n    \/* ---------- Draw the cards ---------- *\/\n    function card(p, i, spot) {\n      var av = pickImage(p.photo, 400), hero = pickImage(p.eventPhoto, 1600);\n      var long = p.description.length > (spot ? 420 : 200);\n      var media = '<div class=\"wof-media\"><img' + (hero.src ? '' : ' class=\"is-ph\"') + ' src=\"' + esc(hero.src || FALLBACK) + '\" alt=\"' + esc(p.activity + \" \u2014 \" + p.student) + '\" loading=\"lazy\" decoding=\"async\" referrerpolicy=\"no-referrer\" data-fallbacks=\"' + esc(hero.fb.join(\"||\")) + '\" onerror=\"wofImgFallback(this)\"><span class=\"wof-ribbon\">\u2605 Achiever<\/span><\/div>';\n      var who = '<div class=\"wof-who\">' + (spot ? '<span class=\"wof-spot-tag\">Latest achievement<\/span>' : '') +\n        '<span class=\"wof-avatar\"><img decoding=\"async\" src=\"' + esc(av.src || FALLBACK) + '\" alt=\"\" loading=\"lazy\" referrerpolicy=\"no-referrer\" data-fallbacks=\"' + esc(av.fb.join(\"||\")) + '\" onerror=\"wofImgFallback(this)\"><\/span>' +\n        '<h3 class=\"wof-name\">' + esc(p.student) + '<\/h3>' + (p.activity ? '<span class=\"wof-act\">' + esc(p.activity) + '<\/span>' : '') + '<\/div>';\n      var body = '<div class=\"wof-body\">' +\n        (p.description ? '<p class=\"wof-desc' + (long ? ' is-clamped' : '') + '\">' + esc(p.description).replace(\/\\r?\\n\/g, \"<br>\") + '<\/p>' + (long ? '<button type=\"button\" class=\"wof-more\">Read more<\/button>' : '') : '') +\n        '<div class=\"wof-foot\"><span class=\"wof-date\">' + esc(p.nice) + '<\/span><span class=\"wof-share\">' + shareLinks(p) + '<\/span><\/div><\/div>';\n      return '<article class=\"wof-card' + (spot ? ' is-spot' : '') + '\" style=\"--i:' + Math.min(i, 12) + '\"><div class=\"wof-in\">' + media + (spot ? '<div class=\"wof-side\">' + who + body + '<\/div>' : who + body) + '<\/div><\/article>';\n    }\n    function render() {\n      var q = (box ? box.value : \"\").trim().toLowerCase();\n      var list = all.filter(function (p) { return !q || p.student.toLowerCase().indexOf(q) !== -1; });\n      grid.classList.toggle(\"is-few\", list.length === 1 || list.length === 2);\n      if (!list.length) { grid.innerHTML = '<p class=\"wof-empty\">No achievers found.<\/p>'; return; }\n      var spotlight = !q;\n      if (spotlight) { if (list.length < 3) spotlight = false; }\n      grid.innerHTML = list.map(function (p, i) { return card(p, i, spotlight ? i === 0 : false); }).join(\"\");\n    }\n    grid.addEventListener(\"click\", function (e) {\n      var b = e.target.closest(\".wof-more\"); if (!b) return;\n      var open = b.previousElementSibling.classList.toggle(\"is-clamped\");\n      b.textContent = open ? \"Read more\" : \"Show less\";\n    });\n    var t;\n    if (box) box.addEventListener(\"input\", function () { clearTimeout(t); t = setTimeout(render, 150); });\n  }\n  if (document.readyState === \"loading\") { document.addEventListener(\"DOMContentLoaded\", start); } else { start(); }\n})();\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Legends \u2605 The Panthers honour roll Celebrating our standout students for their dedication, sportsmanship and achievements across events. Explore highlights from recent&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5940","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tbspanthers.british-school.org\/index.php\/wp-json\/wp\/v2\/pages\/5940","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tbspanthers.british-school.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tbspanthers.british-school.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tbspanthers.british-school.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tbspanthers.british-school.org\/index.php\/wp-json\/wp\/v2\/comments?post=5940"}],"version-history":[{"count":16,"href":"https:\/\/tbspanthers.british-school.org\/index.php\/wp-json\/wp\/v2\/pages\/5940\/revisions"}],"predecessor-version":[{"id":8723,"href":"https:\/\/tbspanthers.british-school.org\/index.php\/wp-json\/wp\/v2\/pages\/5940\/revisions\/8723"}],"wp:attachment":[{"href":"https:\/\/tbspanthers.british-school.org\/index.php\/wp-json\/wp\/v2\/media?parent=5940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}