Reserve a Booth — Tanaad | تناد/title> <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Cormorant+SC:wght@300;400;500&family=Scheherazade+New:wght@400;500;700&family=DM+Sans:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet"/> <style> :root { --ivory:#F4EFE6; --plaster:#E3D9CC; --sand:#C9B99A; --brass:#A8845A; --brass-lt:#C9A96E; --sage:#7A8C78; --smoke:#B2ADA5; --mist:#8C8680; --umber:#2B1F14; --espresso:#1A120A; --kohl:#161210; --font-display:'Cormorant Garamond',serif; --font-sc:'Cormorant SC',serif; --font-arabic:'Scheherazade New',serif; --font-body:'DM Sans',sans-serif; --pad-v:160px; --pad-h:88px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{background:var(--ivory);color:var(--umber);font-family:var(--font-body);font-weight:300;font-size:15px;line-height:1.75;overflow-x:hidden;} body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");background-size:220px;pointer-events:none;z-index:9000;opacity:0.6;} a{text-decoration:none;color:inherit;} .lbl{display:flex;align-items:center;gap:16px;font-family:var(--font-body);font-size:9.5px;font-weight:400;letter-spacing:0.26em;text-transform:uppercase;color:var(--mist);margin-bottom:48px;} .lbl::before{content:'';display:block;width:24px;height:1px;background:var(--sand);flex-shrink:0;} .lbl.inv{color:rgba(255,255,255,0.3);} .lbl.inv::before{background:rgba(255,255,255,0.18);} .ar{font-family:var(--font-arabic);direction:rtl;text-align:right;text-transform:none!important;unicode-bidi:isolate;} .reveal{opacity:0;transform:translateY(22px);transition:opacity 800ms cubic-bezier(.25,.46,.45,.94),transform 800ms cubic-bezier(.25,.46,.45,.94);} .reveal.in{opacity:1;transform:translateY(0);} .reveal-d1{transition-delay:.1s;} .reveal-d2{transition-delay:.2s;} .reveal-d3{transition-delay:.32s;} /* ── NAV ── */ nav{position:fixed;top:0;left:0;right:0;z-index:800;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad-h);height:72px;transition:background 420ms ease-out,backdrop-filter 420ms ease-out;} nav.scrolled{background:rgba(244,239,230,0.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);} .nav-wordmark{display:flex;align-items:baseline;gap:10px;} .nav-wordmark .wm-ar{font-family:var(--font-arabic);font-size:26px;color:var(--brass);direction:rtl;line-height:1;} .nav-wordmark .wm-sep{width:1px;height:16px;background:rgba(255,255,255,0.25);display:inline-block;vertical-align:middle;flex-shrink:0;} .nav-wordmark .wm-en{font-family:var(--font-sc);font-size:16px;letter-spacing:0.14em;color:var(--ivory);} nav.scrolled .wm-sep{background:var(--sand);} nav.scrolled .wm-en{color:var(--umber);} .nav-links{display:flex;align-items:center;gap:36px;list-style:none;} .nav-links a{font-family:var(--font-body);font-size:11px;font-weight:400;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.55);transition:color 280ms ease;position:relative;} .nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:1px;background:var(--brass-lt);transform:scaleX(0);transition:transform 280ms ease;transform-origin:left;} .nav-links a:hover{color:var(--ivory);} .nav-links a:hover::after{transform:scaleX(1);} nav.scrolled .nav-links a{color:rgba(43,31,20,0.55);} nav.scrolled .nav-links a:hover{color:var(--umber);} nav.scrolled .nav-links a::after{background:var(--brass);} .nav-reserve{font-family:var(--font-body);font-size:10px;font-weight:400;letter-spacing:0.2em;text-transform:uppercase;border:1px solid rgba(255,255,255,0.35);color:var(--ivory);padding:9px 20px;transition:background 280ms ease,border-color 280ms ease,color 280ms ease;} .nav-reserve:hover{background:rgba(255,255,255,0.1);} nav.scrolled .nav-reserve{border-color:var(--umber);color:var(--umber);} nav.scrolled .nav-reserve:hover{background:var(--umber);color:var(--ivory);} .nav-menu-btn{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none;} .nav-menu-btn span{display:block;width:22px;height:1px;background:var(--ivory);} nav.scrolled .nav-menu-btn span{background:var(--umber);} /* ── PAGE HERO ── */ .page-hero{height:55vh;min-height:440px;background:var(--kohl);display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--pad-h) 80px;position:relative;overflow:hidden;} .page-hero-geo{position:absolute;right:-80px;top:50%;transform:translateY(-50%);width:min(520px,50vw);height:min(520px,50vw);opacity:0.05;pointer-events:none;} .page-eyebrow{font-family:var(--font-body);font-size:9.5px;letter-spacing:0.28em;text-transform:uppercase;color:var(--brass);margin-bottom:28px;animation:fadeUp .9s ease both;} .page-h1-en{font-family:var(--font-display);font-weight:300;font-size:clamp(38px,5.5vw,80px);line-height:0.94;letter-spacing:-0.02em;color:var(--ivory);animation:fadeUp .9s .1s ease both;} .page-h1-ar{font-family:var(--font-arabic);font-size:clamp(24px,3.5vw,52px);line-height:1.25;color:var(--brass-lt);direction:rtl;display:block;margin-top:8px;animation:fadeUp .9s .22s ease both;} @keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}} section{padding:var(--pad-v) var(--pad-h);} section+section{border-top:1px solid var(--plaster);} .dark{background:var(--umber);} .dark+section,section+.dark{border-top:none;} .kohl-bg{background:var(--kohl);} .plaster-bg{background:var(--plaster);} .section-h2{font-family:var(--font-display);font-weight:300;font-size:clamp(32px,4vw,54px);line-height:1.08;letter-spacing:-0.01em;} .section-h2 em{font-style:italic;color:var(--brass);} /* ── BOOKING LAYOUT ── */ .booking-wrap{display:grid;grid-template-columns:1fr 1.5fr;gap:80px;align-items:start;border-top:none;} /* ── BOOTH TYPE SELECTOR ── */ .type-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--sand);margin-top:52px;} .type-card{background:var(--ivory);padding:36px 32px;cursor:pointer;border:2px solid transparent;transition:background 300ms ease,border-color 200ms ease;position:relative;} .type-card:hover{background:#EDE5D8;} .type-card.selected{border-color:var(--brass);background:var(--ivory);} .type-card.selected::after{content:'✓';position:absolute;top:16px;right:16px;font-family:var(--font-body);font-size:10px;color:var(--brass);background:rgba(168,132,90,0.1);width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;} .type-num{font-family:var(--font-display);font-style:italic;font-size:11px;color:var(--brass);letter-spacing:0.18em;display:block;margin-bottom:12px;} .type-name-en{font-family:var(--font-sc);font-size:15px;font-weight:400;letter-spacing:0.05em;color:var(--umber);display:block;margin-bottom:3px;} .type-name-ar{font-family:var(--font-arabic);font-size:18px;line-height:1.3;color:var(--brass);direction:rtl;display:block;margin-bottom:10px;} .type-cap{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--mist);} /* ── FORM ── */ .booking-form{background:var(--plaster);padding:60px 52px;} .form-title{font-family:var(--font-display);font-weight:300;font-size:clamp(22px,2.5vw,30px);color:var(--umber);margin-bottom:8px;} .form-title-ar{font-family:var(--font-arabic);font-size:clamp(18px,2vw,24px);color:var(--brass);direction:rtl;display:block;margin-bottom:40px;line-height:1.3;} .form-field{margin-bottom:32px;} .form-label{display:block;font-size:9px;letter-spacing:0.24em;text-transform:uppercase;color:var(--mist);margin-bottom:10px;} .form-input,.form-select,.form-textarea{width:100%;background:transparent;border:none;border-bottom:1px solid var(--sand);color:var(--umber);font-family:var(--font-body);font-size:14px;font-weight:300;padding:12px 0;outline:none;transition:border-color 280ms ease;appearance:none;-webkit-appearance:none;line-height:1.5;border-radius:0;} .form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--brass);} .form-input::placeholder,.form-textarea::placeholder{color:var(--smoke);} .form-select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238C8680' stroke-width='1'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;} .form-select option{background:var(--ivory);color:var(--umber);} .form-textarea{resize:none;min-height:80px;} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:32px;} .form-note{font-size:11.5px;color:var(--mist);line-height:1.7;margin-bottom:36px;padding-left:16px;border-left:1px solid var(--sand);} .form-submit{width:100%;background:var(--umber);color:var(--ivory);font-family:var(--font-body);font-size:10px;font-weight:400;letter-spacing:0.22em;text-transform:uppercase;border:none;padding:18px;cursor:pointer;transition:background 280ms ease;margin-top:8px;} .form-submit:hover{background:var(--kohl);} .form-submit:disabled{background:var(--sand);cursor:not-allowed;} .form-small{font-size:10.5px;color:var(--mist);line-height:1.65;margin-top:16px;text-align:center;} /* ── LEFT SIDEBAR INFO ── */ .sidebar-heading{font-family:var(--font-display);font-weight:300;font-size:clamp(28px,3.5vw,44px);line-height:1.1;color:var(--umber);margin-bottom:10px;} .sidebar-ar{font-family:var(--font-arabic);font-size:clamp(22px,2.8vw,34px);line-height:1.3;color:var(--brass);direction:rtl;display:block;margin-bottom:36px;} .sidebar-body{font-size:13.5px;color:var(--mist);line-height:1.82;margin-bottom:48px;max-width:360px;} .sidebar-rules{list-style:none;} .sidebar-rules li{display:flex;gap:16px;align-items:start;padding:16px 0;border-bottom:1px solid var(--plaster);} .sidebar-rules li:last-child{border-bottom:none;} .rule-icon{flex-shrink:0;width:18px;height:18px;margin-top:3px;} .rule-text{font-size:12.5px;color:var(--mist);line-height:1.7;} .rule-text strong{font-weight:400;color:var(--umber);display:block;margin-bottom:2px;font-family:var(--font-sc);font-size:13px;letter-spacing:0.04em;} /* ── CONFIRMATION STATE ── */ .confirmation{display:none;text-align:center;padding:80px 40px;} .confirmation.show{display:block;} .conf-ar{font-family:var(--font-arabic);font-size:72px;color:rgba(168,132,90,0.15);direction:rtl;display:block;margin-bottom:24px;line-height:1;} .conf-heading{font-family:var(--font-display);font-weight:300;font-size:clamp(26px,3vw,40px);color:var(--umber);margin-bottom:12px;} .conf-sub{font-size:13.5px;color:var(--mist);line-height:1.8;max-width:400px;margin:0 auto 36px;} .conf-back{display:inline-block;font-family:var(--font-body);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--brass);border-bottom:1px solid rgba(168,132,90,0.3);padding-bottom:2px;} /* ── WHAT HAPPENS NEXT ── */ .next-strip{background:var(--umber);} .next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(255,255,255,0.06);margin-top:64px;} .next-item{background:var(--umber);padding:52px 44px;} .next-num{font-family:var(--font-display);font-style:italic;font-size:42px;font-weight:300;color:rgba(201,169,110,0.15);display:block;margin-bottom:16px;line-height:1;} .next-en{font-family:var(--font-sc);font-size:15px;font-weight:400;letter-spacing:0.05em;color:var(--ivory);display:block;margin-bottom:5px;} .next-ar{font-family:var(--font-arabic);font-size:19px;line-height:1.35;color:var(--brass-lt);direction:rtl;display:block;margin-bottom:14px;} .next-desc{font-size:12.5px;color:var(--smoke);line-height:1.75;} /* ── WALK-IN STRIP ── */ .walkin-strip{background:var(--plaster);display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;} .walkin-h{font-family:var(--font-display);font-weight:300;font-size:clamp(26px,3.2vw,42px);line-height:1.1;color:var(--umber);margin-bottom:8px;} .walkin-ar{font-family:var(--font-arabic);font-size:clamp(20px,2.5vw,32px);line-height:1.3;color:var(--brass);direction:rtl;display:block;margin-bottom:20px;} .walkin-body{font-size:13.5px;color:var(--mist);line-height:1.8;max-width:400px;} /* ── FOOTER ── */ footer{background:var(--espresso);border-top:1px solid rgba(255,255,255,0.04);} .footer-upper{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:64px;padding:88px var(--pad-h);border-bottom:1px solid rgba(255,255,255,0.05);} .footer-signup-head{font-family:var(--font-display);font-style:italic;font-size:20px;font-weight:300;color:rgba(255,255,255,0.7);line-height:1.4;margin-bottom:24px;} .footer-signup-form{display:flex;margin-bottom:12px;} .footer-signup-form input{flex:1;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,0.18);color:var(--ivory);font-family:var(--font-body);font-size:12px;font-weight:300;padding:10px 0;outline:none;} .footer-signup-form input::placeholder{color:rgba(255,255,255,0.2);} .footer-signup-btn{background:none;border:none;border-bottom:1px solid rgba(255,255,255,0.18);color:var(--brass-lt);font-family:var(--font-body);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;padding:10px 0 10px 20px;cursor:pointer;} .footer-signup-note{font-size:10.5px;color:rgba(255,255,255,0.18);line-height:1.6;} .footer-col-head{font-family:var(--font-sc);font-size:13px;font-weight:400;letter-spacing:0.07em;color:var(--brass-lt);margin-bottom:24px;} .footer-links{list-style:none;} .footer-links li{margin-bottom:10px;} .footer-links a{font-size:12.5px;color:rgba(255,255,255,0.32);transition:color 250ms;} .footer-links a:hover{color:rgba(255,255,255,0.7);} .footer-lower{display:flex;justify-content:space-between;align-items:center;padding:28px var(--pad-h);} .footer-copy,.footer-location{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.15);} .footer-wordmark{font-family:var(--font-arabic);font-size:30px;color:var(--brass);direction:rtl;line-height:1;} /* ── MOBILE NAV ── */ .mobile-nav{display:none;position:fixed;inset:0;background:var(--kohl);z-index:850;flex-direction:column;justify-content:center;align-items:center;gap:32px;opacity:0;pointer-events:none;transition:opacity 350ms ease;} .mobile-nav.open{display:flex;opacity:1;pointer-events:all;} .mobile-nav a{font-family:var(--font-display);font-weight:300;font-size:clamp(32px,7vw,52px);color:rgba(255,255,255,0.7);transition:color 250ms;} .mobile-nav a:hover{color:var(--ivory);} .mobile-nav-close{position:absolute;top:28px;right:var(--pad-h);font-size:13px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.3);cursor:pointer;background:none;border:none;font-family:var(--font-body);} @media(max-width:1100px){:root{--pad-v:120px;--pad-h:52px;}.booking-wrap{grid-template-columns:1fr;}.walkin-strip{grid-template-columns:1fr;gap:40px;}.next-grid{grid-template-columns:1fr;}.footer-upper{grid-template-columns:1fr 1fr;gap:40px;}} @media(max-width:768px){:root{--pad-v:88px;--pad-h:28px;}nav{padding:0 28px;}.nav-links,.nav-reserve{display:none;}.nav-menu-btn{display:flex;}.type-grid{grid-template-columns:1fr;}.booking-form{padding:40px 28px;}.form-row{grid-template-columns:1fr;gap:0;}.footer-upper{grid-template-columns:1fr;gap:44px;}.footer-lower{flex-direction:column;gap:20px;text-align:center;}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}.reveal{opacity:1;transform:none;}} </style> <script src="/assets/adhan.umd.min.js"></script> <script src="/assets/prayer-times.js" defer></script> </head> <body> <nav id="main-nav"> <a href="/" class="nav-wordmark"> <span class="wm-ar">تناد</span><span class="wm-sep"></span><span class="wm-en">Tanaad</span> </a> <ul class="nav-links"> <li><a href="/booths">Booths</a></li> <li><a href="/menu">Tea Menu</a></li> <li><a href="/members">Members</a></li> <li><a href="/visit">Visit</a></li> </ul> <a href="/reserve" class="nav-reserve">Reserve</a> <button class="nav-menu-btn" id="menu-toggle" aria-label="Open menu"><span></span><span></span></button> </nav> <div class="mobile-nav" id="mobile-nav"> <button class="mobile-nav-close" id="mobile-nav-close">Close</button> <a href="/booths">Booths</a> <a href="/menu">Tea Menu</a> <a href="/members">Members</a> <a href="/visit">Visit</a> </div>  <div class="page-hero"> <svg class="page-hero-geo" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg"> <g stroke="#A8845A" stroke-width="0.6" fill="none"> <circle cx="300" cy="300" r="270"/><circle cx="300" cy="300" r="200"/><circle cx="300" cy="300" r="130"/><circle cx="300" cy="300" r="60"/> <polygon points="300,30 570,300 300,570 30,300"/> <polygon points="300,30 570,300 300,570 30,300" transform="rotate(45 300 300)"/> <line x1="300" y1="30" x2="300" y2="570"/><line x1="30" y1="300" x2="570" y2="300"/> <line x1="115" y1="115" x2="485" y2="485"/><line x1="485" y1="115" x2="115" y2="485"/> </g> </svg> <p class="page-eyebrow">Reserve · احجز</p> <h1 class="page-h1-en">Choose your booth.<br>Tell us when.</h1> <span class="page-h1-ar ar">اختر بوثك. أخبرنا متى.</span> </div>  <section style="border-top:none;" id="booking-section"> <div class="booking-wrap">  <div class="reveal"> <p class="lbl">Your reservation</p> <h2 class="sidebar-heading">A few details<br>and the rest<br><em>is yours.</em></h2> <span class="sidebar-ar ar">كل شيء يبدأ من هنا.</span> <p class="sidebar-body">We don't need much. Your name, when you're coming, how many. We'll do the rest. Reservations are free — no card required unless you're booking the private room.</p> <p style="font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--mist);margin-bottom:20px;">Choose booth type</p> <div class="type-grid" id="type-grid"> <div class="type-card selected" data-type="solo"> <span class="type-num">01</span> <span class="type-name-en">Solo Booth</span> <span class="type-name-ar ar">البوث المنفرد</span> <span class="type-cap">1 person</span> </div> <div class="type-card" data-type="pair"> <span class="type-num">02</span> <span class="type-name-en">Pair Booth</span> <span class="type-name-ar ar">بوث الاثنين</span> <span class="type-cap">2 people</span> </div> <div class="type-card" data-type="group"> <span class="type-num">03</span> <span class="type-name-en">Group Booth</span> <span class="type-name-ar ar">بوث المجموعة</span> <span class="type-cap">3 – 6 people</span> </div> <div class="type-card" data-type="room"> <span class="type-num">04</span> <span class="type-name-en">Private Room</span> <span class="type-name-ar ar">الغرفة الخاصة</span> <span class="type-cap">Up to 10 people</span> </div> </div> <ul class="sidebar-rules" style="margin-top:52px;"> <li> <svg class="rule-icon" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="9" cy="9" r="7.5" stroke="var(--sand)" stroke-width="0.8"/><path d="M6 9l2 2 4-4" stroke="var(--brass)" stroke-width="0.8" fill="none"/></svg> <span class="rule-text"><strong>Cancellation</strong>Free cancellation up to 2 hours before your reservation. No questions.</span> </li> <li> <svg class="rule-icon" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="9" cy="9" r="7.5" stroke="var(--sand)" stroke-width="0.8"/><path d="M6 9l2 2 4-4" stroke="var(--brass)" stroke-width="0.8" fill="none"/></svg> <span class="rule-text"><strong>No card required</strong>Solo, pair and group booths are booked by name only. The private room requires a small refundable deposit.</span> </li> <li> <svg class="rule-icon" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="9" cy="9" r="7.5" stroke="var(--sand)" stroke-width="0.8"/><path d="M6 9l2 2 4-4" stroke="var(--brass)" stroke-width="0.8" fill="none"/></svg> <span class="rule-text"><strong>No time limit</strong>Your booth is yours until you leave. We hold it for 20 minutes past your reservation time if you're running late.</span> </li> <li> <svg class="rule-icon" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="9" cy="9" r="7.5" stroke="var(--sand)" stroke-width="0.8"/><path d="M6 9l2 2 4-4" stroke="var(--brass)" stroke-width="0.8" fill="none"/></svg> <span class="rule-text"><strong>Confirmation in minutes</strong>You'll receive an SMS confirmation shortly after submitting. If we're full at your chosen time we'll suggest the next available slot.</span> </li> </ul> </div>  <div class="reveal reveal-d1"> <div class="booking-form" id="booking-form-wrap"> <h3 class="form-title">Your details</h3> <span class="form-title-ar ar">تفاصيل الحجز</span> <form id="reservation-form" onsubmit="handleSubmit(event)"> <div class="form-row"> <div class="form-field"> <label class="form-label">First name</label> <input class="form-input" type="text" placeholder="Your name" required/> </div> <div class="form-field"> <label class="form-label">Family name</label> <input class="form-input" type="text" placeholder="Family name" required/> </div> </div> <div class="form-field"> <label class="form-label">Phone number</label> <input class="form-input" type="tel" placeholder="+20 · Your number" required/> </div> <div class="form-row"> <div class="form-field"> <label class="form-label">Date</label> <input class="form-input" type="date" required id="date-field"/> </div> <div class="form-field"> <label class="form-label">Arrival time</label> <select class="form-select" required id="time-field"> <option value="" disabled selected>Choose a time</option> <option>10:00</option><option>10:30</option><option>11:00</option><option>11:30</option> <option>12:00</option><option>12:30</option><option>13:00</option><option>13:30</option> <option>14:00</option><option>14:30</option><option>15:00</option><option>15:30</option> <option>16:00</option><option>16:30</option><option>17:00</option><option>17:30</option> <option>18:00</option><option>18:30</option><option>19:00</option><option>19:30</option> <option>20:00</option><option>20:30</option><option>21:00</option><option>21:30</option> <option>22:00</option> </select> </div> </div> <div class="form-field"> <label class="form-label">Number of guests</label> <select class="form-select" required id="guests-field"> <option value="" disabled selected>How many?</option> <option>1 — just me</option> <option>2 people</option> <option>3 people</option> <option>4 people</option> <option>5 people</option> <option>6 people</option> <option>7 – 10 people (private room)</option> </select> </div> <div class="form-field"> <label class="form-label">Anything we should know? <span style="opacity:.5;">(Optional)</span></label> <textarea class="form-textarea" placeholder="Dietary needs, occasion, accessibility requirements — anything that helps us look after you well."></textarea> </div> <p class="form-note">Your first tea is included with your reservation. You'll choose from the full menu when you arrive. If you have a preference, mention it in the notes and we'll have it ready.</p> <button class="form-submit" type="submit" id="submit-btn">Confirm reservation</button> <p class="form-small">Free to book · No card required · Cancel anytime up to 2 hours before</p> </form>  <div class="confirmation" id="confirmation"> <span class="conf-ar ar">تناد</span> <h3 class="conf-heading">Your booth is reserved.</h3> <p class="conf-sub">We'll send a confirmation to your phone shortly. Your booth will be ready when you arrive. No need to check in — just tell us your name at the door.</p> <a href="/" class="conf-back">Back to Tanaad →</a> </div> </div> </div> </div> </section>  <section class="next-strip dark"> <p class="lbl inv reveal">After you book</p> <h2 class="section-h2 reveal reveal-d1" style="color:var(--ivory);max-width:480px;">What happens<br><em>between now and then.</em></h2> <div class="next-grid reveal reveal-d2"> <div class="next-item"> <span class="next-num">١</span> <span class="next-en">Confirmation SMS</span> <span class="next-ar ar">رسالة تأكيد</span> <p class="next-desc">Within a few minutes of booking, you'll receive a text with your reservation details. No app. No account. Just a message with everything you need.</p> </div> <div class="next-item"> <span class="next-num">٢</span> <span class="next-en">Arrive as yourself</span> <span class="next-ar ar">تعال كما أنت</span> <p class="next-desc">When you arrive, tell us your name. We'll take you to your booth. No check-in counter, no queue, no barcode to scan. Your name is enough.</p> </div> <div class="next-item"> <span class="next-num">٣</span> <span class="next-en">First tea arrives</span> <span class="next-ar ar">أول كوب شاي</span> <p class="next-desc">Once you're seated, your server will ask which tea you'd like. It will arrive within a few minutes. Everything else is yours to decide, at whatever pace you need.</p> </div> </div> </section>  <section class="walkin-strip plaster-bg"> <div class="reveal"> <p class="lbl" style="margin-bottom:32px;">Prefer to walk in?</p> <h2 class="walkin-h">No booking.<br>Just come.</h2> <span class="walkin-ar ar">تعال بدون حجز.</span> <p class="walkin-body">Solo and pair booths are often available for walk-ins, especially outside peak hours (12–3pm and 6–9pm). If every booth is taken, we'll tell you honestly and give you an accurate wait time. We won't make you hover.</p> </div> <div class="reveal reveal-d1"> <p style="font-family:var(--font-sc);font-size:13px;letter-spacing:0.07em;color:var(--brass);margin-bottom:24px;">Opening hours</p> <div style="border-top:1px solid var(--sand);"> <div style="display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--sand);font-size:13px;"><span style="color:var(--umber);">Saturday – Wednesday</span><span style="color:var(--mist);">10:00 – 23:00</span></div> <div style="display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--sand);font-size:13px;"><span style="color:var(--umber);">Thursday</span><span style="color:var(--mist);">10:00 – 01:00</span></div> <div style="display:flex;justify-content:space-between;padding:14px 0;font-size:13px;"><span style="color:var(--umber);">Friday</span><span style="color:var(--mist);">13:00 – 01:00</span></div> </div> <p style="margin-top:20px;font-size:11px;color:var(--mist);">12 Ismail Mohamed Street, Zamalek · <a href="/visit" style="color:var(--brass);border-bottom:1px solid rgba(168,132,90,0.3);font-size:11px;">Getting here →</a></p> </div> </section>  <footer> <div class="footer-upper"> <div> <p class="footer-signup-head">Occasional notes<br>from the booth.</p> <form class="footer-signup-form" onsubmit="return false;"><input type="email" placeholder="Your email"/><button class="footer-signup-btn" type="submit">Stay in touch</button></form> <p class="footer-signup-note">No newsletters. Just the things worth knowing.</p> </div> <div><p class="footer-col-head">Visit</p><ul class="footer-links"><li><a href="/booths">Reserve a Booth</a></li><li><a href="/menu">Menu</a></li><li><a href="/visit">Location & Hours</a></li><li><a href="/visit">Getting Here</a></li><li><a href="/faq">FAQ</a></li></ul></div> <div><p class="footer-col-head">Tanaad</p><ul class="footer-links"><li><a href="/about">Our Story</a></li><li><a href="/members">Members</a></li><li><a href="/press">Press</a></li><li><a href="/careers">Careers</a></li><li><a href="/contact">Contact</a></li></ul></div> <div><p class="footer-col-head">Follow us</p><ul class="footer-links"><li><a href="#">Instagram</a></li><li><a href="#">TikTok</a></li><li><a href="#">YouTube</a></li><li><a href="#">LinkedIn</a></li></ul></div> </div> <div class="footer-prayer"> <div class="prayer-strip" id="prayer-strip"></div> <div class="prayer-meta"> <span class="prayer-meta-note">Prayer times · Cairo</span> <span class="prayer-meta-date" id="prayer-date"></span> </div> </div> <div class="footer-lower"> <span class="footer-copy">© Tanaad 2026</span> <span class="footer-wordmark">تناد</span> <span class="footer-location">Cairo · Est. 2026</span> </div> </footer> <script> // Nav const nav = document.getElementById('main-nav'); window.addEventListener('scroll', () => { nav.classList.toggle('scrolled', window.scrollY > 72); }, { passive: true }); // Reveal const ro = new IntersectionObserver((e) => { e.forEach(x => { if (x.isIntersecting) { x.target.classList.add('in'); ro.unobserve(x.target); } }); }, { threshold: .12, rootMargin: '0px 0px -40px 0px' }); document.querySelectorAll('.reveal').forEach(el => ro.observe(el)); // Mobile nav document.getElementById('menu-toggle').addEventListener('click', () => { document.getElementById('mobile-nav').classList.add('open'); document.body.style.overflow = 'hidden'; }); document.getElementById('mobile-nav-close').addEventListener('click', () => { document.getElementById('mobile-nav').classList.remove('open'); document.body.style.overflow = ''; }); // Booth type selector document.getElementById('type-grid').addEventListener('click', (e) => { const card = e.target.closest('.type-card'); if (!card) return; document.querySelectorAll('.type-card').forEach(c => c.classList.remove('selected')); card.classList.add('selected'); // Update guests dropdown based on type const type = card.dataset.type; const gf = document.getElementById('guests-field'); if (type === 'solo') gf.value = '1 — just me'; if (type === 'pair') gf.value = '2 people'; if (type === 'room') gf.value = '7 – 10 people (private room)'; }); // Set min date to today const dateField = document.getElementById('date-field'); const today = new Date().toISOString().split('T')[0]; dateField.min = today; // Form submission function handleSubmit(e) { e.preventDefault(); const btn = document.getElementById('submit-btn'); btn.textContent = 'Sending…'; btn.disabled = true; setTimeout(() => { document.getElementById('reservation-form').style.display = 'none'; document.getElementById('confirmation').classList.add('show'); // Scroll to confirmation document.getElementById('booking-form-wrap').scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 1200); } </script> </body> </html>