{"id":372,"date":"2026-09-02T05:40:54","date_gmt":"2026-09-02T05:40:54","guid":{"rendered":"https:\/\/kalhonaho.online\/?page_id=372"},"modified":"2026-09-02T05:58:07","modified_gmt":"2026-09-02T05:58:07","slug":"batman","status":"publish","type":"page","link":"https:\/\/kalhonaho.online\/?page_id=372","title":{"rendered":"BATMAN"},"content":{"rendered":"\n<!DOCTYPE html>\n<!--\n  GOTHAM WATCH \u2014 a Batman-themed one-pager\n  ------------------------------------------------------\n  HOW TO USE THIS IN WORDPRESS\n  1. In the WP editor, add a \"Custom HTML\" block (or a Code block \/ Elementor\n     \"HTML\" widget if you use a page builder) and paste this ENTIRE file into it.\n     If your theme wraps pages in <html><head><body>, you can instead paste just\n     everything between <body> ... <\/body> into the block, and put the\n     <style> block into Appearance > Customize > Additional CSS.\n  2. Replace GTM-XXXXXXX (two spots below) with your real GTM container ID,\n     and G-XXXXXXXXXX with your GA4 Measurement ID if you're using gtag.js\n     directly instead of GTM.\n  3. Every button below already calls trackEvent(...) on click, which does\n     window.dataLayer.push({ event: 'bw_button_click', button_id, button_label }).\n     In GTM: Trigger > Custom Event > Event name = bw_button_click, then\n     build a GA4 Event tag that reads {{button_id}} \/ {{button_label}} as\n     event parameters (Variables > new Data Layer Variable for each).\n  ------------------------------------------------------\n-->\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\" \/>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n<title>Gotham Watch<\/title>\n\n<!-- ========== GOOGLE TAG MANAGER (replace GTM-XXXXXXX) ========== -->\n<script>\nwindow.dataLayer = window.dataLayer || [];\n<\/script>\n<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':\nnew Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],\nj=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=\n'https:\/\/www.googletagmanager.com\/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);\n})(window,document,'script','dataLayer','GTM-XXXXXXX');<\/script>\n<!-- ========== END GTM ========== -->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&#038;family=Barlow:wght@400;500;600;700&#038;family=Barlow+Condensed:wght@600;700&#038;display=swap\" rel=\"stylesheet\">\n\n<style>\n  :root{\n    --bg:#07070b;\n    --panel:#101018;\n    --panel-2:#15151f;\n    --ink:#eceef2;\n    --ink-dim:#9aa0ac;\n    --signal:#f5c518;\n    --signal-dim:#7a6210;\n    --blood:#a3273c;\n    --line:#2a2c35;\n    --maxw:1100px;\n  }\n  *{box-sizing:border-box;}\n  html{scroll-behavior:smooth;}\n  body{\n    margin:0;\n    background:var(--bg);\n    color:var(--ink);\n    font-family:'Barlow', sans-serif;\n    line-height:1.55;\n    -webkit-font-smoothing:antialiased;\n  }\n  h1,h2,h3,.display{\n    font-family:'Anton', sans-serif;\n    font-weight:400;\n    letter-spacing:0.5px;\n    line-height:1.02;\n    margin:0;\n  }\n  a{color:inherit;}\n  img,svg{display:block;max-width:100%;}\n  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}\n  .rule{height:2px; background:var(--line);}\n  .signal-line{height:3px; background:var(--signal);}\n\n  \/* focus visibility *\/\n  a:focus-visible, button:focus-visible, input:focus-visible{\n    outline:2px solid var(--signal);\n    outline-offset:3px;\n  }\n\n  \/* ---------- NAV ---------- *\/\n  header.nav{\n    position:sticky; top:0; z-index:40;\n    background:rgba(7,7,11,0.9);\n    backdrop-filter:blur(6px);\n    border-bottom:1px solid var(--line);\n  }\n  .nav-inner{\n    max-width:var(--maxw); margin:0 auto; padding:16px 24px;\n    display:flex; align-items:center; justify-content:space-between;\n  }\n  .brand{\n    display:flex; align-items:center; gap:10px;\n    font-family:'Anton', sans-serif; font-size:20px; letter-spacing:1px;\n  }\n  .brand svg{width:26px; height:26px;}\n  .nav-links{display:flex; gap:28px; font-family:'Barlow Condensed', sans-serif; font-weight:600; font-size:16px; letter-spacing:0.5px;}\n  .nav-links a{text-decoration:none; color:var(--ink-dim); transition:color .15s ease;}\n  .nav-links a:hover{color:var(--signal);}\n  @media (max-width:640px){ .nav-links{display:none;} }\n\n  \/* ---------- HERO ---------- *\/\n  .hero{\n    position:relative;\n    overflow:hidden;\n    padding:96px 0 110px;\n    background:\n      radial-gradient(560px circle at var(--mx,80%) var(--my,15%), rgba(245,197,24,0.16), transparent 60%),\n      var(--bg);\n  }\n  .hero-inner{max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative; z-index:2;}\n  .hero .eyebrow{\n    color:var(--signal); font-family:'Barlow Condensed', sans-serif;\n    font-weight:600; font-size:15px; letter-spacing:0.5px; margin-bottom:14px;\n  }\n  .hero h1{\n    font-size:clamp(42px, 8vw, 84px);\n    max-width:760px;\n    text-transform:uppercase;\n  }\n  .hero h1 .line2{color:var(--signal);}\n  .hero p.lede{\n    max-width:520px; margin-top:22px; font-size:18px; color:var(--ink-dim);\n  }\n  .hero .cta-row{margin-top:34px; display:flex; align-items:center; gap:18px; flex-wrap:wrap;}\n  .hero .cta-note{font-size:14px; color:var(--ink-dim); font-style:italic; min-height:20px;}\n\n  \/* bat mark used sparingly, hand-drawn geometric silhouette (original, not a copied logo) *\/\n  .bat-mark{ fill:var(--signal); }\n\n  \/* ---------- BUTTONS ---------- *\/\n  .btn{\n    appearance:none; border:none; cursor:pointer;\n    font-family:'Barlow Condensed', sans-serif; font-weight:700; font-size:17px; letter-spacing:0.5px;\n    padding:14px 28px;\n    border-radius:2px;\n    transition:transform .12s ease, box-shadow .12s ease, background .12s ease;\n  }\n  .btn:active{transform:translateY(1px);}\n  .btn-primary{\n    background:var(--signal); color:#161200;\n    box-shadow:0 0 0 0 rgba(245,197,24,0.0);\n  }\n  .btn-primary:hover{box-shadow:0 0 26px rgba(245,197,24,0.45);}\n  .btn-outline{\n    background:transparent; color:var(--ink); border:2px solid var(--line);\n  }\n  .btn-outline:hover{border-color:var(--signal); color:var(--signal);}\n  .btn-blood{\n    background:var(--blood); color:#fff;\n  }\n  .btn-blood:hover{box-shadow:0 0 22px rgba(163,39,60,0.5);}\n\n  \/* ---------- SECTIONS \/ PANELS ---------- *\/\n  section{padding:88px 0;}\n  .section-head{\n    display:flex; justify-content:space-between; align-items:flex-end; gap:24px;\n    margin-bottom:44px; flex-wrap:wrap;\n    border-bottom:1px solid var(--line); padding-bottom:20px;\n  }\n  .section-head h2{font-size:clamp(30px,4.5vw,46px); text-transform:uppercase;}\n  .section-head p{color:var(--ink-dim); max-width:360px; margin:0;}\n\n  \/* About *\/\n  .about-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;}\n  @media (max-width:760px){ .about-grid{grid-template-columns:1fr;} }\n  .about-grid p{color:var(--ink-dim); font-size:17px; margin:0 0 16px;}\n  .stat-row{display:flex; gap:36px; margin-top:28px; flex-wrap:wrap;}\n  .stat b{display:block; font-family:'Anton',sans-serif; font-size:34px; color:var(--signal);}\n  .stat span{color:var(--ink-dim); font-size:14px;}\n  .panel-frame{\n    border:1px solid var(--line); background:var(--panel);\n    padding:26px; position:relative;\n  }\n  .panel-frame::before{\n    content:\"\"; position:absolute; inset:10px; border:1px solid var(--line);\n    pointer-events:none;\n  }\n\n  \/* Arsenal \/ gadgets *\/\n  .gadget-grid{\n    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;\n    background:var(--line); border:1px solid var(--line);\n  }\n  @media (max-width:760px){ .gadget-grid{grid-template-columns:1fr 1fr;} }\n  @media (max-width:480px){ .gadget-grid{grid-template-columns:1fr;} }\n  .gadget-card{\n    background:var(--panel); padding:26px; min-height:150px;\n    display:flex; flex-direction:column; justify-content:flex-end;\n  }\n  .gadget-card h3{font-size:20px; text-transform:uppercase; margin-bottom:6px;}\n  .gadget-card p{margin:0; color:var(--ink-dim); font-size:14.5px;}\n  .gadget-card.locked{\n    opacity:0; max-height:0; padding:0 26px; min-height:0; overflow:hidden;\n    transition:opacity .35s ease, max-height .5s ease, padding .35s ease;\n  }\n  .gadget-card.locked.revealed{\n    opacity:1; max-height:220px; padding:26px;\n  }\n  .arsenal-cta{margin-top:30px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;}\n\n  \/* Case files \/ villains *\/\n  .files-gate{\n    border:1px dashed var(--line); padding:40px; text-align:center; background:var(--panel);\n  }\n  .files-gate p{color:var(--ink-dim); max-width:480px; margin:0 auto 22px;}\n  #filesGrid{display:none; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:6px;}\n  #filesGrid.revealed{display:grid;}\n  @media (max-width:760px){ #filesGrid{grid-template-columns:1fr 1fr;} }\n  @media (max-width:480px){ #filesGrid{grid-template-columns:1fr;} }\n  .file-card{\n    background:var(--panel); border:1px solid var(--line); padding:20px;\n    position:relative;\n  }\n  .file-card .case-no{\n    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:13px;\n    color:var(--blood); letter-spacing:0.5px; margin-bottom:10px;\n  }\n  .file-card h3{font-size:19px; text-transform:uppercase; margin-bottom:8px;}\n  .file-card p{margin:0; color:var(--ink-dim); font-size:14px;}\n\n  \/* Join *\/\n  .join-panel{\n    background:var(--panel); border:1px solid var(--line); padding:48px;\n    display:grid; grid-template-columns:1fr auto; gap:28px; align-items:end;\n  }\n  @media (max-width:700px){ .join-panel{grid-template-columns:1fr;} }\n  .join-panel h2{font-size:clamp(26px,4vw,38px); text-transform:uppercase; margin-bottom:10px;}\n  .join-panel p{color:var(--ink-dim); margin:0; max-width:420px;}\n  form.join-form{display:flex; gap:12px; flex-wrap:wrap;}\n  form.join-form input[type=email]{\n    background:var(--bg); border:1px solid var(--line); color:var(--ink);\n    padding:14px 16px; font-family:'Barlow',sans-serif; font-size:15px; min-width:220px; flex:1;\n  }\n  form.join-form input[type=email]::placeholder{color:var(--ink-dim);}\n  .form-msg{margin-top:12px; font-size:14px; color:var(--signal); min-height:18px;}\n\n  \/* Footer *\/\n  footer{border-top:1px solid var(--line); padding:56px 0 40px;}\n  .footer-grid{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;}\n  .footer-grid p{margin:0; color:var(--ink-dim); font-size:14px;}\n  .footer-note{margin-top:10px; font-size:13px; color:var(--ink-dim);}\n\n  \/* siren flash effect for the report-a-crime button *\/\n  .siren-overlay{\n    position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:0;\n    background:radial-gradient(circle at 50% 40%, rgba(163,39,60,0.35), transparent 65%);\n  }\n  .siren-overlay.flash{animation:siren 1.1s ease-in-out 2;}\n  @keyframes siren{\n    0%,100%{opacity:0;}\n    50%{opacity:1;}\n  }\n\n  @media (prefers-reduced-motion: reduce){\n    html{scroll-behavior:auto;}\n    .siren-overlay.flash{animation:none; opacity:0;}\n    .gadget-card.locked, .gadget-card.locked.revealed{transition:none;}\n  }\n<\/style>\n<\/head>\n<body>\n\n<!-- ========== GTM (noscript) ========== -->\n<noscript><iframe src=\"https:\/\/www.googletagmanager.com\/ns.html?id=GTM-XXXXXXX\"\nheight=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"><\/iframe><\/noscript>\n<!-- ========== END GTM (noscript) ========== -->\n\n<div class=\"siren-overlay\" id=\"sirenOverlay\"><\/div>\n\n<header class=\"nav\">\n  <div class=\"nav-inner\">\n    <div class=\"brand\">\n      <svg viewBox=\"0 0 100 60\" class=\"bat-mark\" aria-hidden=\"true\">\n        <path d=\"M50 8 L58 22 L72 14 L66 30 L100 26 L70 40 L84 52 L58 42 L50 60 L42 42 L16 52 L30 40 L0 26 L34 30 L28 14 L42 22 Z\"\/>\n      <\/svg>\n      GOTHAM WATCH\n    <\/div>\n    <nav class=\"nav-links\">\n      <a href=\"#about\">About<\/a>\n      <a href=\"#arsenal\">Arsenal<\/a>\n      <a href=\"#files\">Case Files<\/a>\n      <a href=\"#join\">Join<\/a>\n    <\/nav>\n  <\/div>\n<\/header>\n\n<!-- ========== HERO ========== -->\n<section class=\"hero\" id=\"heroSection\">\n  <div class=\"hero-inner\">\n    <div class=\"eyebrow\">Gotham City, tonight<\/div>\n    <h1>GOTHAM DOESN&#8217;T SLEEP.<br><span class=\"line2\">NEITHER DO WE.<\/span><\/h1>\n    <p class=\"lede\">One symbol, one light in the clouds, one promise: somebody&#8217;s watching. Send up the signal and see who answers.<\/p>\n    <div class=\"cta-row\">\n      <button class=\"btn btn-primary\" id=\"btnSignal\">Signal the Bat<\/button>\n      <a href=\"#about\" class=\"btn btn-outline\">Read the file<\/a>\n      <span class=\"cta-note\" id=\"signalNote\"><\/span>\n    <\/div>\n  <\/div>\n<\/section>\n\n<div class=\"signal-line\"><\/div>\n\n<!-- ========== ABOUT ========== -->\n<section id=\"about\">\n  <div class=\"wrap\">\n    <div class=\"about-grid\">\n      <div>\n        <div class=\"eyebrow\" style=\"color:var(--signal); font-family:'Barlow Condensed',sans-serif; font-weight:600; margin-bottom:12px;\">Who watches the watchman<\/div>\n        <h2 style=\"font-size:clamp(28px,4vw,42px); text-transform:uppercase; margin-bottom:18px;\">One man. One mission. One city.<\/h2>\n        <p>No powers, no oath, no badge. Just a decade of training, a workshop full of gadgets, and a refusal to let Gotham&#8217;s worst night win. He doesn&#8217;t show up to be thanked \u2014 he shows up because nobody else will.<\/p>\n        <p>The signal isn&#8217;t a summons. It&#8217;s a question the city keeps asking, and an answer that keeps coming.<\/p>\n        <div class=\"stat-row\">\n          <div class=\"stat\"><b>0<\/b><span>Years off duty<\/span><\/div>\n          <div class=\"stat\"><b>1<\/b><span>Rule he won&#8217;t break<\/span><\/div>\n          <div class=\"stat\"><b>\u221e<\/b><span>Reasons to keep going<\/span><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"panel-frame\">\n        <svg viewBox=\"0 0 100 100\" style=\"width:100%; height:auto;\" aria-hidden=\"true\">\n          <circle cx=\"50\" cy=\"50\" r=\"46\" fill=\"none\" stroke=\"#2a2c35\" stroke-width=\"1\"\/>\n          <circle cx=\"50\" cy=\"50\" r=\"30\" fill=\"none\" stroke=\"#f5c518\" stroke-width=\"0.6\" opacity=\"0.5\"\/>\n          <path d=\"M50 20 L56 32 L68 26 L62 38 L88 36 L64 46 L74 56 L56 50 L50 66 L44 50 L26 56 L36 46 L12 36 L38 38 L32 26 L44 32 Z\" fill=\"#f5c518\"\/>\n        <\/svg>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ========== ARSENAL ========== -->\n<section id=\"arsenal\" style=\"background:var(--panel-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);\">\n  <div class=\"wrap\">\n    <div class=\"section-head\">\n      <h2>The arsenal<\/h2>\n      <p>Everything gets used eventually. Nothing gets used twice the same way.<\/p>\n    <\/div>\n\n    <div class=\"gadget-grid\">\n      <div class=\"gadget-card\">\n        <h3>Utility belt<\/h3>\n        <p>Twenty-two compartments, never the same loadout two nights running.<\/p>\n      <\/div>\n      <div class=\"gadget-card\">\n        <h3>Grapple gun<\/h3>\n        <p>The fastest way between a rooftop and a decision.<\/p>\n      <\/div>\n      <div class=\"gadget-card\">\n        <h3>Batarang<\/h3>\n        <p>A calling card that also happens to be a weapon.<\/p>\n      <\/div>\n      <div class=\"gadget-card locked\" id=\"gadget4\">\n        <h3>Smoke pellets<\/h3>\n        <p>The last thing a room remembers before he&#8217;s gone.<\/p>\n      <\/div>\n      <div class=\"gadget-card locked\" id=\"gadget5\">\n        <h3>The cowl<\/h3>\n        <p>Comms, night vision, and a face Gotham has learned to fear for the right reasons.<\/p>\n      <\/div>\n      <div class=\"gadget-card locked\" id=\"gadget6\">\n        <h3>The Batmobile<\/h3>\n        <p>Armored, fast, and never where the GCPD expects it.<\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"arsenal-cta\">\n      <button class=\"btn btn-outline\" id=\"btnBatcave\">Enter the Batcave<\/button>\n      <span class=\"cta-note\" id=\"batcaveNote\"><\/span>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ========== CASE FILES \/ VILLAINS ========== -->\n<section id=\"files\">\n  <div class=\"wrap\">\n    <div class=\"section-head\">\n      <h2>Rogues&#8217; gallery<\/h2>\n      <p>Sealed GCPD case files. Open at your own risk.<\/p>\n    <\/div>\n\n    <div class=\"files-gate\" id=\"filesGate\">\n      <p>These files are restricted to Gotham&#8217;s worst. Clearance required.<\/p>\n      <button class=\"btn btn-primary\" id=\"btnFiles\">Open the Case Files<\/button>\n    <\/div>\n\n    <div id=\"filesGrid\">\n      <div class=\"file-card\">\n        <div class=\"case-no\">CASE NO. 001 \u2014 JOKER<\/div>\n        <h3>The Joker<\/h3>\n        <p>No motive, no pattern, no mercy. The one file that never closes.<\/p>\n      <\/div>\n      <div class=\"file-card\">\n        <div class=\"case-no\">CASE NO. 014 \u2014 TWO-FACE<\/div>\n        <h3>Two-Face<\/h3>\n        <p>Former D.A. Harvey Dent. Justice, decided by a coin flip.<\/p>\n      <\/div>\n      <div class=\"file-card\">\n        <div class=\"case-no\">CASE NO. 027 \u2014 PENGUIN<\/div>\n        <h3>The Penguin<\/h3>\n        <p>Runs the Iceberg Lounge. Runs half of Gotham&#8217;s secrets, too.<\/p>\n      <\/div>\n      <div class=\"file-card\">\n        <div class=\"case-no\">CASE NO. 033 \u2014 RIDDLER<\/div>\n        <h3>The Riddler<\/h3>\n        <p>Can&#8217;t help leaving a clue. Can&#8217;t stand it when nobody solves it.<\/p>\n      <\/div>\n      <div class=\"file-card\">\n        <div class=\"case-no\">CASE NO. 041 \u2014 SCARECROW<\/div>\n        <h3>Scarecrow<\/h3>\n        <p>Weaponized fear, delivered as a gas and a diagnosis.<\/p>\n      <\/div>\n      <div class=\"file-card\">\n        <div class=\"case-no\">CASE NO. 052 \u2014 BANE<\/div>\n        <h3>Bane<\/h3>\n        <p>Broke out of a prison built to be inescapable. Then broke worse things.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ========== JOIN ========== -->\n<section id=\"join\" style=\"background:var(--panel-2); border-top:1px solid var(--line);\">\n  <div class=\"wrap\">\n    <div class=\"join-panel\">\n      <div>\n        <h2>Join the night watch<\/h2>\n        <p>Get case updates, gadget breakdowns, and the next time the sky over Gotham lights up.<\/p>\n        <form class=\"join-form\" id=\"joinForm\">\n          <input type=\"email\" id=\"joinEmail\" placeholder=\"you@gotham.city\" required aria-label=\"Email address\" \/>\n          <button type=\"submit\" class=\"btn btn-primary\" id=\"btnJoin\">Join the Watch<\/button>\n        <\/form>\n        <div class=\"form-msg\" id=\"joinMsg\"><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ========== FOOTER ========== -->\n<footer>\n  <div class=\"wrap\">\n    <div class=\"footer-grid\">\n      <div>\n        <p>Wayne Enterprises &middot; Gotham City<\/p>\n        <p class=\"footer-note\">This is a student project \u2014 not affiliated with or endorsed by DC Comics or Warner Bros.<\/p>\n      <\/div>\n      <button class=\"btn btn-blood\" id=\"btnReport\">Report a Crime<\/button>\n    <\/div>\n  <\/div>\n<\/footer>\n\n<!-- ========== GA4 via gtag.js (optional \u2014 skip if you're only using GTM) ========== -->\n<script async src=\"https:\/\/www.googletagmanager.com\/gtag\/js?id=G-XXXXXXXXXX\"><\/script>\n<script>\n  window.dataLayer = window.dataLayer || [];\n  function gtag(){dataLayer.push(arguments);}\n  gtag('js', new Date());\n  gtag('config', 'G-XXXXXXXXXX');\n<\/script>\n<!-- ========== END GA4 ========== -->\n\n<script>\n  \/\/ ---------- shared tracking helper ----------\n  \/\/ Pushes a custom event to the dataLayer. In GTM, catch this with a\n  \/\/ Custom Event trigger where Event name = bw_button_click, then read\n  \/\/ {{button_id}} \/ {{button_label}} as Data Layer Variables.\n  function trackEvent(buttonId, buttonLabel){\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n      event: 'bw_button_click',\n      button_id: buttonId,\n      button_label: buttonLabel\n    });\n  }\n\n  \/\/ ---------- hero spotlight follows the cursor ----------\n  var heroSection = document.getElementById('heroSection');\n  heroSection.addEventListener('mousemove', function(e){\n    var rect = heroSection.getBoundingClientRect();\n    var mx = ((e.clientX - rect.left) \/ rect.width) * 100;\n    var my = ((e.clientY - rect.top) \/ rect.height) * 100;\n    heroSection.style.setProperty('--mx', mx + '%');\n    heroSection.style.setProperty('--my', my + '%');\n  });\n\n  \/\/ ---------- Button 1: Signal the Bat ----------\n  document.getElementById('btnSignal').addEventListener('click', function(){\n    trackEvent('btn_signal', 'Signal the Bat');\n    document.getElementById('signalNote').textContent = 'Signal sent. Someone is already on the roof.';\n    document.getElementById('about').scrollIntoView({behavior:'smooth'});\n  });\n\n  \/\/ ---------- Button 2: Enter the Batcave (reveal locked gadgets) ----------\n  document.getElementById('btnBatcave').addEventListener('click', function(){\n    trackEvent('btn_batcave', 'Enter the Batcave');\n    ['gadget4','gadget5','gadget6'].forEach(function(id){\n      document.getElementById(id).classList.add('revealed');\n    });\n    document.getElementById('batcaveNote').textContent = 'Access granted. Three more items unlocked.';\n    this.disabled = true;\n    this.style.opacity = '0.6';\n  });\n\n  \/\/ ---------- Button 3: Open the Case Files ----------\n  document.getElementById('btnFiles').addEventListener('click', function(){\n    trackEvent('btn_files', 'Open the Case Files');\n    document.getElementById('filesGrid').classList.add('revealed');\n    document.getElementById('filesGate').style.display = 'none';\n  });\n\n  \/\/ ---------- Button 4: Join the Watch (form submit) ----------\n  document.getElementById('joinForm').addEventListener('submit', function(e){\n    e.preventDefault();\n    var email = document.getElementById('joinEmail').value;\n    trackEvent('btn_join', 'Join the Watch');\n    \/\/ also push a dedicated GA4-style event with the value, useful for a\n    \/\/ \"generate_lead\" style conversion in GTM if you want one\n    window.dataLayer.push({ event: 'newsletter_signup', signup_location: 'join_section' });\n    document.getElementById('joinMsg').textContent = 'You\\'re on the list, ' + email + '. Watch the skies.';\n    this.reset();\n  });\n\n  \/\/ ---------- Button 5: Report a Crime (footer) ----------\n  document.getElementById('btnReport').addEventListener('click', function(){\n    trackEvent('btn_report', 'Report a Crime');\n    var overlay = document.getElementById('sirenOverlay');\n    overlay.classList.add('flash');\n    setTimeout(function(){ overlay.classList.remove('flash'); }, 2300);\n    alert('Message received. Commissioner Gordon has been notified.');\n  });\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>GOTHAM WATCH About Arsenal Case Files Join Gotham City, tonight GOTHAM DOESN&#8217;T SLEEP.NEITHER DO WE. One symbol, one light in the clouds, one promise: somebody&#8217;s watching. Send up the signal and see who answers. Signal the Bat Read the file Who watches the watchman One man. One mission. One city. No powers, no oath, no [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-template-blank.php","meta":{"footnotes":"","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","_yoast_wpseo_focuskw":"","rank_math_title":"","rank_math_description":"","rank_math_focus_keyword":""},"class_list":["post-372","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kalhonaho.online\/index.php?rest_route=\/wp\/v2\/pages\/372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kalhonaho.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kalhonaho.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kalhonaho.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kalhonaho.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=372"}],"version-history":[{"count":2,"href":"https:\/\/kalhonaho.online\/index.php?rest_route=\/wp\/v2\/pages\/372\/revisions"}],"predecessor-version":[{"id":380,"href":"https:\/\/kalhonaho.online\/index.php?rest_route=\/wp\/v2\/pages\/372\/revisions\/380"}],"wp:attachment":[{"href":"https:\/\/kalhonaho.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}