{"id":35,"date":"2026-07-30T14:15:56","date_gmt":"2026-07-30T14:15:56","guid":{"rendered":"https:\/\/mahall.org\/?page_id=35"},"modified":"2026-07-30T14:16:36","modified_gmt":"2026-07-30T14:16:36","slug":"venue-details","status":"publish","type":"page","link":"https:\/\/mahall.org\/index.php\/venue-details\/","title":{"rendered":"venue-details"},"content":{"rendered":"\n<!--\n  MAHALL \u2014 venue detail page (v0.2)\n  ------------------------------------------------------------------\n  HOW TO USE\n  This is a static demo of ONE venue (Riad Zahra) so you can see the\n  full page working today. It is NOT yet wired to real per-venue data.\n\n  IMPORTANT LIMITATION TO PLAN AROUND:\n  Pasting this into a single WordPress page only gives you one venue\n  page. To get a unique URL per venue (mahall.org\/venues\/riad-zahra,\n  mahall.org\/venues\/dunes-camp-erg, etc.) without duplicating this\n  file by hand for every listing, you'll eventually want a proper\n  WordPress Custom Post Type (\"Venue\") with this markup turned into\n  a PHP template \u2014 that's scheduled as part of the v1.0 integration\n  pass in CHANGELOG.md. Until then, duplicate this file per venue and\n  edit the VENUE object in the script at the bottom.\n\n  Inquiry form posts to \/wp-json\/mahall\/v1\/inquiry (not yet built \u2014\n  falls back to a local \"submitted\" confirmation so the page still\n  feels complete; wire the real endpoint in the same proxy file used\n  for AI search\/concierge).\n------------------------------------------------------------------- -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,400..600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');\n\n#mahall-venue{\n  --bg:#16130F; --bg-raised:#1E1A14; --bg-card:#241F18;\n  --ink:#F3ECE0; --ink-soft:#BBAE99; --ink-faint:#7A7163;\n  --gold:#D98E33; --gold-soft:#E8B978;\n  --teal:#2F6F62; --teal-soft:#5C988B;\n  --line:rgba(243,236,224,0.12);\n  --radius:14px;\n  font-family:'Inter',sans-serif; background:var(--bg); color:var(--ink);\n  -webkit-font-smoothing:antialiased; overflow-x:hidden;\n}\n#mahall-venue *{box-sizing:border-box; margin:0; padding:0;}\n#mahall-venue a{color:inherit; text-decoration:none;}\n#mahall-venue .wrap{max-width:1100px; margin:0 auto; padding:0 28px;}\n#mahall-venue .eyebrow{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft);}\n#mahall-venue h1,#mahall-venue h2,#mahall-venue h3{font-family:'Fraunces',serif; font-weight:500; line-height:1.1; color:var(--ink);}\n#mahall-venue p{color:var(--ink-soft); line-height:1.65;}\n#mahall-venue .btn{display:inline-flex; align-items:center; gap:8px; font-weight:500; font-size:14px; padding:12px 22px; border-radius:999px; border:1px solid var(--line); cursor:pointer; background:transparent; color:var(--ink); transition:border-color .2s, transform .15s;}\n#mahall-venue .btn:hover{border-color:var(--gold-soft); transform:translateY(-1px);}\n#mahall-venue .btn-solid{background:var(--gold); border-color:var(--gold); color:#1A1305;}\n#mahall-venue .btn-solid:hover{background:var(--gold-soft);}\n#mahall-venue .btn-block{width:100%; justify-content:center;}\n\n#mahall-venue .star{position:relative; width:18px; height:18px; flex:none;}\n#mahall-venue .star span{position:absolute; inset:0; border:1.4px solid var(--gold);}\n#mahall-venue .star span:last-child{transform:rotate(45deg);}\n\n#mahall-venue nav{position:sticky; top:0; z-index:40; backdrop-filter:blur(10px); background:rgba(22,19,15,0.86); border-bottom:1px solid var(--line);}\n#mahall-venue nav .row{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:1100px; margin:0 auto;}\n#mahall-venue .logo{display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-size:20px;}\n#mahall-venue .crumb{font-size:13px; color:var(--ink-faint); display:flex; align-items:center; gap:6px;}\n#mahall-venue .crumb a:hover{color:var(--gold-soft);}\n\n\/* gallery *\/\n#mahall-venue .gallery{padding:28px 0 0;}\n#mahall-venue .gallery-main{\n  height:380px; border-radius:var(--radius); overflow:hidden; position:relative;\n  background:repeating-linear-gradient(45deg, rgba(217,142,51,.10) 0 10px, rgba(47,111,98,.10) 10px 20px);\n  display:flex; align-items:flex-end; padding:18px;\n}\n#mahall-venue .gallery-thumbs{display:flex; gap:10px; margin-top:10px;}\n#mahall-venue .thumb{\n  flex:1; height:74px; border-radius:10px; cursor:pointer; border:1px solid var(--line);\n  background:repeating-linear-gradient(45deg, rgba(47,111,98,.14) 0 8px, rgba(217,142,51,.1) 8px 16px);\n  transition:border-color .2s, opacity .2s; opacity:.65;\n}\n#mahall-venue .thumb.active{border-color:var(--gold); opacity:1;}\n#mahall-venue .tag-pill{font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.06em; background:rgba(22,19,15,0.7); color:var(--gold-soft); padding:5px 11px; border-radius:999px; border:1px solid var(--line);}\n\n\/* layout: info + sidebar *\/\n#mahall-venue .layout{display:grid; grid-template-columns:1fr 340px; gap:40px; padding:36px 0 64px; align-items:start;}\n#mahall-venue .title-row{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:6px; flex-wrap:wrap;}\n#mahall-venue .title-row h1{font-size:32px;}\n#mahall-venue .meta{font-size:13px; color:var(--ink-faint); margin-bottom:24px;}\n#mahall-venue .stat-row{display:flex; gap:28px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:28px;}\n#mahall-venue .stat-row div b{display:block; font-family:'Fraunces',serif; font-size:20px; color:var(--gold-soft);}\n#mahall-venue .stat-row div span{font-size:11px; color:var(--ink-faint); letter-spacing:.05em; text-transform:uppercase;}\n#mahall-venue .block{margin-bottom:32px;}\n#mahall-venue .block h2{font-size:20px; margin-bottom:12px;}\n#mahall-venue .amen-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}\n#mahall-venue .amen{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-soft); padding:10px 12px; background:var(--bg-card); border:1px solid var(--line); border-radius:10px;}\n#mahall-venue .map-box{height:200px; border-radius:var(--radius); border:1px solid var(--line); background:var(--bg-card); display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-size:13px; gap:8px;}\n#mahall-venue .host-card{display:flex; gap:12px; align-items:center; padding:16px; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);}\n#mahall-venue .host-avatar{width:44px; height:44px; border-radius:50%; background:var(--teal); flex:none; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; color:var(--ink);}\n#mahall-venue .host-card b{font-size:14px; font-family:'Inter',sans-serif;}\n#mahall-venue .host-card span{font-size:12px; color:var(--ink-faint);}\n\n\/* sidebar \/ inquiry form *\/\n#mahall-venue .sidebar{position:sticky; top:90px; background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius); padding:22px;}\n#mahall-venue .price-row{display:flex; align-items:baseline; gap:6px; margin-bottom:18px;}\n#mahall-venue .price-row b{font-family:'Fraunces',serif; font-size:26px; color:var(--gold-soft);}\n#mahall-venue .price-row span{font-size:12px; color:var(--ink-faint);}\n#mahall-venue .field{margin-bottom:12px;}\n#mahall-venue .field label{display:block; font-size:12px; color:var(--ink-faint); margin-bottom:6px;}\n#mahall-venue .field input, #mahall-venue .field select, #mahall-venue .field textarea{\n  width:100%; background:var(--bg); border:1px solid var(--line); border-radius:8px;\n  padding:10px 12px; color:var(--ink); font-family:'Inter',sans-serif; font-size:13px; outline:none;\n}\n#mahall-venue .field input:focus, #mahall-venue .field select:focus, #mahall-venue .field textarea:focus{border-color:var(--gold-soft);}\n#mahall-venue .field-row{display:flex; gap:10px;}\n#mahall-venue .field-row .field{flex:1;}\n#mahall-venue .form-msg{font-size:12px; margin-top:10px; display:none;}\n#mahall-venue .form-msg.show{display:block;}\n#mahall-venue .form-msg.ok{color:var(--teal-soft);}\n#mahall-venue .form-msg.err{color:#D9786E;}\n#mahall-venue .form-note{font-size:11px; color:var(--ink-faint); margin-top:10px; text-align:center;}\n\n\/* similar venues *\/\n#mahall-venue .similar-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}\n#mahall-venue .s-card{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .2s, border-color .2s;}\n#mahall-venue .s-card:hover{transform:translateY(-3px); border-color:var(--gold-soft);}\n#mahall-venue .s-img{height:120px; background:repeating-linear-gradient(45deg, rgba(217,142,51,.10) 0 10px, rgba(47,111,98,.10) 10px 20px);}\n#mahall-venue .s-body{padding:14px 16px;}\n#mahall-venue .s-body h3{font-size:14px; font-family:'Inter',sans-serif; font-weight:600; margin-bottom:2px;}\n#mahall-venue .s-body p{font-size:12px; margin:0;}\n\n#mahall-venue footer{border-top:1px solid var(--line); padding:32px 0; text-align:center; font-size:12px; color:var(--ink-faint);}\n\n@media (max-width:900px){\n  #mahall-venue .layout{grid-template-columns:1fr;}\n  #mahall-venue .sidebar{position:static;}\n  #mahall-venue .similar-grid{grid-template-columns:1fr 1fr;}\n}\n@media (max-width:560px){\n  #mahall-venue .amen-grid, #mahall-venue .similar-grid, #mahall-venue .field-row{grid-template-columns:1fr; flex-direction:column;}\n  #mahall-venue .stat-row{flex-wrap:wrap; gap:16px;}\n}\n<\/style>\n\n<div id=\"mahall-venue\">\n\n  <nav>\n    <div class=\"row\">\n      <div class=\"logo\"><span class=\"star\"><span><\/span><span><\/span><\/span> Mahall<\/div>\n      <div class=\"crumb\"><a href=\"#\">Venues<\/a> &rsaquo; <span id=\"crumb-cat\">Heritage &amp; cultural<\/span> &rsaquo; <span id=\"crumb-name\" style=\"color:var(--ink)\">Riad Zahra<\/span><\/div>\n      <a class=\"btn\" href=\"#\">Log in<\/a>\n    <\/div>\n  <\/nav>\n\n  <div class=\"wrap gallery\">\n    <div class=\"gallery-main\" id=\"gallery-main\"><span class=\"tag-pill\">Featured<\/span><\/div>\n    <div class=\"gallery-thumbs\" id=\"gallery-thumbs\"><\/div>\n  <\/div>\n\n  <div class=\"wrap layout\">\n    <div class=\"main-col\">\n      <div class=\"title-row\">\n        <h1 id=\"v-name\">Riad Zahra<\/h1>\n        <span class=\"tag-pill\" id=\"v-cat\">Heritage &amp; cultural<\/span>\n      <\/div>\n      <p class=\"meta\" id=\"v-meta\">Medina, Marrakech &middot; Hosted by Amina K.<\/p>\n\n      <div class=\"stat-row\">\n        <div><b id=\"v-capacity\">80<\/b><span>Max guests<\/span><\/div>\n        <div><b id=\"v-rooms\">12<\/b><span>Rooms<\/span><\/div>\n        <div><b id=\"v-size\">650 m&sup2;<\/b><span>Footprint<\/span><\/div>\n        <div><b>2026<\/b><span>On Mahall since<\/span><\/div>\n      <\/div>\n\n      <div class=\"block\">\n        <h2>About this venue<\/h2>\n        <p id=\"v-desc\">A restored 19th-century riad in the heart of the Marrakech medina, built around a central courtyard with a working fountain and citrus trees. The rooftop terrace seats up to 80 for dinners, with views across the medina toward the Atlas Mountains at sunset. Frequently booked for weddings, engagement dinners, and intimate brand activations.<\/p>\n      <\/div>\n\n      <div class=\"block\">\n        <h2>Amenities<\/h2>\n        <div class=\"amen-grid\" id=\"amen-grid\"><\/div>\n      <\/div>\n\n      <div class=\"block\">\n        <h2>Location<\/h2>\n        <div class=\"map-box\">&#128205; Map embed placeholder &mdash; Medina, Marrakech<\/div>\n      <\/div>\n\n      <div class=\"block\">\n        <h2>Hosted by<\/h2>\n        <div class=\"host-card\">\n          <div class=\"host-avatar\">A<\/div>\n          <div><b>Amina K.<\/b><br><span>Usually responds within a few hours<\/span><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <aside class=\"sidebar\">\n      <div class=\"price-row\"><b id=\"v-price\">4,000 MAD<\/b><span>\/ event, from<\/span><\/div>\n\n      <form id=\"inquiry-form\">\n        <div class=\"field-row\">\n          <div class=\"field\"><label for=\"f-name\">Your name<\/label><input id=\"f-name\" required><\/div>\n          <div class=\"field\"><label for=\"f-email\">Email<\/label><input id=\"f-email\" type=\"email\" required><\/div>\n        <\/div>\n        <div class=\"field\"><label for=\"f-event\">Event type<\/label>\n          <select id=\"f-event\">\n            <option>Wedding<\/option><option>Engagement \/ family celebration<\/option>\n            <option>Corporate dinner<\/option><option>Brand activation \/ production<\/option>\n            <option>Other<\/option>\n          <\/select>\n        <\/div>\n        <div class=\"field-row\">\n          <div class=\"field\"><label for=\"f-date\">Date<\/label><input id=\"f-date\" type=\"date\"><\/div>\n          <div class=\"field\"><label for=\"f-guests\">Guests<\/label><input id=\"f-guests\" type=\"number\" min=\"1\" placeholder=\"80\"><\/div>\n        <\/div>\n        <div class=\"field\"><label for=\"f-msg\">Message<\/label><textarea id=\"f-msg\" rows=\"3\" placeholder=\"Tell the host a bit about your event...\"><\/textarea><\/div>\n        <button type=\"submit\" class=\"btn btn-solid btn-block\">Send inquiry &#10148;<\/button>\n        <div class=\"form-msg\" id=\"form-msg\"><\/div>\n        <p class=\"form-note\">Mahall forwards this to the venue host and logs it for follow-up. No payment is taken here.<\/p>\n      <\/form>\n    <\/aside>\n  <\/div>\n\n  <div class=\"wrap\" style=\"padding-bottom:64px;\">\n    <h2 style=\"font-size:22px; margin-bottom:18px;\">Similar venues<\/h2>\n    <div class=\"similar-grid\" id=\"similar-grid\"><\/div>\n  <\/div>\n\n  <footer>mahall.org &middot; Morocco &rarr; MENA<\/footer>\n<\/div>\n\n<script>\n(function(){\n  \/* In a real per-venue template, this object is the only thing that\n     changes \u2014 everything else renders from it. Swap it for data pulled\n     from a WordPress custom post type once that's built (see CHANGELOG v1.0). *\/\n  var VENUE = {\n    name:'Riad Zahra', category:'Heritage & cultural', city:'Marrakech',\n    area:'Medina, Marrakech', host:'Amina K.', capacity:80, rooms:12, size:'650 m\\u00B2',\n    price:'4,000 MAD', tag:'Featured',\n    amenities:['Rooftop terrace','Central courtyard','In-house catering option','Sound system included','Air conditioning','On-site parking nearby','Photography allowed','Overnight stay (12 rooms)']\n  };\n\n  var SIMILAR = [\n    {name:'Kasbah Ait Noir', city:'Ouarzazate', price:'5,400'},\n    {name:'Villa Janoub', city:'Tangier', price:'8,000'},\n    {name:'Palmeraie Resort', city:'Marrakech', price:'7,200'}\n  ];\n\n  function fillVenue(){\n    document.getElementById('crumb-cat').textContent = VENUE.category;\n    document.getElementById('crumb-name').textContent = VENUE.name;\n    document.getElementById('v-name').textContent = VENUE.name;\n    document.getElementById('v-cat').textContent = VENUE.category;\n    document.getElementById('v-meta').textContent = VENUE.area + ' \\u00B7 Hosted by ' + VENUE.host;\n    document.getElementById('v-capacity').textContent = VENUE.capacity;\n    document.getElementById('v-rooms').textContent = VENUE.rooms;\n    document.getElementById('v-size').textContent = VENUE.size;\n    document.getElementById('v-price').textContent = VENUE.price + ' MAD';\n\n    var amenGrid = document.getElementById('amen-grid');\n    amenGrid.innerHTML = VENUE.amenities.map(function(a){\n      return '<div class=\"amen\">&#10003; ' + a + '<\/div>';\n    }).join('');\n\n    var thumbs = document.getElementById('gallery-thumbs');\n    thumbs.innerHTML = [0,1,2,3,4].map(function(i){\n      return '<div class=\"thumb' + (i===0?' active':'') + '\" data-i=\"' + i + '\"><\/div>';\n    }).join('');\n    thumbs.addEventListener('click', function(e){\n      var t = e.target.closest('.thumb');\n      if(!t) return;\n      document.querySelectorAll('.thumb').forEach(function(x){ x.classList.remove('active'); });\n      t.classList.add('active');\n    });\n\n    var grid = document.getElementById('similar-grid');\n    grid.innerHTML = SIMILAR.map(function(v){\n      return '<div class=\"s-card\"><div class=\"s-img\"><\/div><div class=\"s-body\"><h3>'+v.name+'<\/h3><p>'+v.city+' &middot; from '+v.price+' MAD<\/p><\/div><\/div>';\n    }).join('');\n  }\n\n  function wireForm(){\n    var form = document.getElementById('inquiry-form');\n    var msg = document.getElementById('form-msg');\n    form.addEventListener('submit', async function(e){\n      e.preventDefault();\n      var payload = {\n        venue: VENUE.name,\n        name: document.getElementById('f-name').value,\n        email: document.getElementById('f-email').value,\n        eventType: document.getElementById('f-event').value,\n        date: document.getElementById('f-date').value,\n        guests: document.getElementById('f-guests').value,\n        message: document.getElementById('f-msg').value\n      };\n      msg.className = 'form-msg show';\n      msg.textContent = 'Sending...';\n      try{\n        var res = await fetch('\/wp-json\/mahall\/v1\/inquiry', {\n          method:'POST', headers:{'Content-Type':'application\/json'},\n          body: JSON.stringify(payload)\n        });\n        if(!res.ok) throw new Error('not configured');\n        msg.className = 'form-msg show ok';\n        msg.textContent = 'Inquiry sent \u2014 ' + VENUE.host + ' typically replies within a few hours.';\n        form.reset();\n      }catch(err){\n        \/* Local fallback so the form still feels complete before the\n           inquiry endpoint exists. Replace by adding a handler to\n           mahall-ai-proxy.php (or a separate mahall-inquiry.php) that\n           stores the lead and emails the host. *\/\n        msg.className = 'form-msg show ok';\n        msg.textContent = 'Inquiry captured locally (demo mode) \u2014 connect \/wp-json\/mahall\/v1\/inquiry to send this for real.';\n        form.reset();\n      }\n    });\n  }\n\n  fillVenue();\n  wireForm();\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Mahall Venues &rsaquo; Heritage &amp; cultural &rsaquo; Riad Zahra Log in Featured Riad Zahra Heritage &amp; cultural Medina, Marrakech &middot; Hosted by Amina K. 80Max guests 12Rooms 650 m&sup2;Footprint 2026On Mahall since About this venue A restored 19th-century riad in the heart of the Marrakech medina, built around a central courtyard with a working fountain [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"folder":[],"class_list":["post-35","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/mahall.org\/index.php\/wp-json\/wp\/v2\/pages\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mahall.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mahall.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mahall.org\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mahall.org\/index.php\/wp-json\/wp\/v2\/comments?post=35"}],"version-history":[{"count":2,"href":"https:\/\/mahall.org\/index.php\/wp-json\/wp\/v2\/pages\/35\/revisions"}],"predecessor-version":[{"id":37,"href":"https:\/\/mahall.org\/index.php\/wp-json\/wp\/v2\/pages\/35\/revisions\/37"}],"wp:attachment":[{"href":"https:\/\/mahall.org\/index.php\/wp-json\/wp\/v2\/media?parent=35"}],"wp:term":[{"taxonomy":"folder","embeddable":true,"href":"https:\/\/mahall.org\/index.php\/wp-json\/wp\/v2\/folder?post=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}