⚠️ Notice: This site is being rebuilt and may not function correctly yet.
🎈 Inflatables → LawtonInflatables.com 🪑 Other party rentals → RentJP.com
Party Productions
Lawton, OK • Party & Event Rentals
⚡ Instant price • No email required

Party Rentals in Lawton, OK — get a price in under 1 minute

Tents, tables, chairs, inflatables, concessions, and extras. Build your list and see a price instantly, then request exact availability when you’re ready.

Get quote Call Text
Local rentals in Lawton, OK + surrounding areas.

Popular rentals

Tap to build your list fast.

Tents Tables Chairs Inflatables Concessions Extras
✅ Get a price instantly (no email). Then confirm availability with a quick text.
Get quote Get price

Tent Rentals in Lawton, OK

Need shade and a clean setup for guests? Our tent rentals in Lawton are great for birthdays, graduations, church events, and backyard parties.

Perfect for outdoor events
Helps with sun coverage and a defined party area.
Add tables + chairs easily
Build a complete package in one quote.
Get quote Text about tents
Keywords: tent rentals Lawton OK, party tents Lawton, event tent rental Lawton.

Table & Chair Rentals in Lawton, OK

Hosting guests? Our table and chair rentals in Lawton are an easy add-on for backyard parties, receptions, and school/church events.

Simple quantities
Choose how many you need — the quote updates instantly.
Great with tent packages
Bundle tents + seating + extras for a clean setup.
Get quote Get price
Keywords: table rentals Lawton OK, chair rentals Lawton OK, banquet tables Lawton.

Inflatable Rentals in Lawton, OK

Want the “wow” factor? Add an inflatable to keep kids busy and parents happy. We’ll confirm exact availability for your date.

Get quote Ask for recommendations
Keywords: inflatable rentals Lawton OK, bounce house rentals Lawton OK.

Reviews

Local customers, real results.

⭐️⭐️⭐️⭐️⭐️ Easy quote + on time
“Super smooth process and the setup was fast.”
⭐️⭐️⭐️⭐️⭐️ Clean equipment
“Everything looked great and was ready to go.”
Send me your real review link/quotes and I’ll replace these placeholders.

FAQ

Is the price final?
It’s an estimate. Final pricing depends on date/availability, delivery distance, tax, setup labor, and venue rules.
What’s the fastest way to book?
Text us after you build your list. We’ll confirm availability and your exact total.
Do I need power?
Some items may need power. If outlets are far, a generator may be required.
Get quote Text a question

Ready to get a price?

Build your list and get a price instantly — then we’ll confirm availability.

Get quote Get price Text now
Party Productions • Lawton, OK


(() => { "use strict"; // ===== Config ===== const TEXT_TO = "15809193040"; // 580-919-3040 const CART_KEY = "pp_cart_v1"; const FORM_KEY = "pp_book_form_v1"; // ===== Elements ===== const page = document.body?.getAttribute("data-page") || ""; const cartBtn = document.getElementById("cartBtn"); const cartCount = document.getElementById("cartCount"); const cartOverlay = document.getElementById("cartOverlay"); const closeCartBtn = document.getElementById("closeCartBtn"); const cartList = document.getElementById("cartList"); const clearCartBtn = document.getElementById("clearCartBtn"); const getPriceBtn = document.getElementById("getPriceBtn"); const getPriceBtn2 = document.getElementById("getPriceBtn2"); // ✅ second button on estimate.html drawer // Estimate page elements (only exist on estimate.html) const priceTotalEl = document.getElementById("priceTotal"); const priceListEl = document.getElementById("priceList"); const textNowBtn = document.getElementById("textNowBtn"); // Hidden email form (you DO have this on inventory.html / estimate.html) const priceForm = document.getElementById("priceForm"); const priceItemsField = document.getElementById("priceItemsField"); const priceTotalField = document.getElementById("priceTotalField"); // Book form draft fields (estimate.html only) const nameEl = document.getElementById("name"); const phoneEl = document.getElementById("phone"); const emailEl = document.getElementById("email"); const eventDateEl = document.getElementById("eventDate"); const locationEl = document.getElementById("location"); const notesEl = document.getElementById("notes"); // ===== Inventory source ===== function inventoryFromDom() { const btns = Array.from(document.querySelectorAll(".cardBtn[data-id]")); return btns.map((btn) => ({ id: btn.dataset.id, name: btn.dataset.name || "Item", category: btn.dataset.cat || "extras", est: Number(btn.dataset.price || 0), note: "", })); } // Seed fallback (if someone lands on estimate.html directly) const INV_KEY = "pp_inventory_cache_v1"; const FALLBACK_INVENTORY = [ { id: "tent_20x20", name: "20×20 Pole Tent", category: "tents", est: 250, note: "" }, { id: "table_6ft", name: "6ft Banquet Table", category: "tables", est: 10, note: "" }, { id: "chair_white", name: "White Folding Chair", category: "chairs", est: 2.5, note: "" }, { id: "conc_popcorn", name: "Popcorn Machine", category: "concessions", est: 75, note: "" }, { id: "extra_generator", name: "Generator (Park/No Power)", category: "extras", est: 85, note: "" }, // placeholders { id: "inflatable1", name: "Inflatable 1", category: "inflatables", est: 0, note: "" }, { id: "inflatable2", name: "Inflatable 2", category: "inflatables", est: 0, note: "" }, { id: "inflatable3", name: "Inflatable 3", category: "inflatables", est: 0, note: "" }, { id: "inflatable4", name: "Inflatable 4", category: "inflatables", est: 0, note: "" }, { id: "inflatable5", name: "Inflatable 5", category: "inflatables", est: 0, note: "" }, { id: "inflatable6", name: "Inflatable 6", category: "inflatables", est: 0, note: "" }, { id: "inflatable7", name: "Inflatable 7", category: "inflatables", est: 0, note: "" }, { id: "inflatable8", name: "Inflatable 8", category: "inflatables", est: 0, note: "" }, { id: "inflatable9", name: "Inflatable 9", category: "inflatables", est: 0, note: "" }, { id: "inflatable10", name: "Inflatable 10", category: "inflatables", est: 0, note: "" }, ]; function getInventory() { const domItems = inventoryFromDom(); // If we're on inventory.html (where the cards exist), cache the full inventory if (domItems.length) { try { localStorage.setItem(INV_KEY, JSON.stringify(domItems)); } catch {} return domItems; } // On other pages, use cached inventory so cart can render correctly try { const cached = JSON.parse(localStorage.getItem(INV_KEY) || "[]"); if (Array.isArray(cached) && cached.length) return cached; } catch {} // Last resort return FALLBACK_INVENTORY; } // ===== Cart state ===== let cart = loadCart(); function money(n) { return Number(n || 0).toLocaleString(undefined, { style: "currency", currency: "USD" }); } function loadCart() { try { return JSON.parse(localStorage.getItem(CART_KEY) || "{}") || {}; } catch { return {}; } } function saveCart() { localStorage.setItem(CART_KEY, JSON.stringify(cart)); renderBadge(); } function cartQty(id) { return Number(cart[id] || 0); } function setQty(id, qty) { const n = Math.max(0, Number(qty || 0)); if (n <= 0) delete cart[id]; else cart[id] = n; saveCart(); } function addToCart(id, qty = 1) { setQty(id, cartQty(id) + Math.max(1, Number(qty || 1))); renderCart(); } function removeOne(id) { setQty(id, cartQty(id) - 1); renderCart(); } function clearCart() { cart = {}; saveCart(); renderCart(); renderPriceUI(); } function cartLines() { const INV = getInventory(); return Object.entries(cart) .map(([id, qty]) => { const it = INV.find((x) => x.id === id); if (!it) return null; return { ...it, qty: Number(qty || 0) }; }) .filter(Boolean); } function computePrice() { const lines = cartLines(); const total = lines.reduce((sum, l) => sum + Number(l.est || 0) * l.qty, 0); return { total, lines }; } function buildItemsText(lines) { return lines.map((l) => `${l.qty}x ${l.name}`).join("\n"); } // ===== UI ===== function openOverlay(el) { if (!el) return; el.style.display = "block"; el.setAttribute("aria-hidden", "false"); document.body.style.overflow = "hidden"; } function closeOverlay(el) { if (!el) return; el.style.display = "none"; el.setAttribute("aria-hidden", "true"); document.body.style.overflow = ""; } function renderBadge() { if (!cartCount) return; const total = Object.values(cart).reduce((a, b) => a + Number(b || 0), 0); cartCount.textContent = String(total); cartCount.style.display = total > 0 ? "flex" : "none"; } function renderCart() { if (!cartList) return; const lines = cartLines(); if (!lines.length) { cartList.innerHTML = `
No items yet. Tap “+” to add items.
`; return; } cartList.innerHTML = lines .map( (l) => `
${escapeHtml(l.name)}
${money(l.est)} ${l.qty > 1 ? "ea" : ""}
${l.qty}
` ) .join(""); } function renderPriceUI() { // only matters on estimate.html if (!priceTotalEl && !priceListEl && !textNowBtn) return; const est = computePrice(); if (priceTotalEl) priceTotalEl.textContent = money(est.total); if (priceListEl) { if (!est.lines.length) { priceListEl.innerHTML = `
No items in your cart. Add items first.
`; } else { priceListEl.innerHTML = est.lines .map( (l) => `
${l.qty}× ${escapeHtml(l.name)}
${money(Number(l.est) * l.qty)}
` ) .join(""); } } // SMS link (estimate.html) if (textNowBtn) { const draft = loadFormDraft() || {}; const linesText = buildItemsText(est.lines); const details = (draft.name ? `Name: ${draft.name}\n` : "") + (draft.event_date ? `Date: ${draft.event_date}\n` : "") + (draft.location ? `Address/Venue: ${draft.location}\n` : "") + (draft.notes ? `Notes: ${draft.notes}\n` : ""); const msg = `Party Productions — Exact Rate Request ${details ? details + "\n" : ""}Items: ${linesText || "(none)"} Price: ${money(est.total)} (Please confirm exact price + availability.)`; textNowBtn.href = `sms:${TEXT_TO}?&body=${encodeURIComponent(msg)}`; } } function doGetPrice() { const est = computePrice(); if (!est.lines.length) { alert("Add at least one item to get a price."); return; } // Email ourselves the list (no personal info) if (priceItemsField) priceItemsField.value = buildItemsText(est.lines) || "(none)"; if (priceTotalField) priceTotalField.value = money(est.total); if (priceForm) { try { priceForm.submit(); } catch {} } // Go to estimate page if (!location.pathname.endsWith("estimate.html")) { window.location.href = "estimate.html"; } else { renderPriceUI(); } } function escapeHtml(s) { return String(s || "") .replaceAll("&", "&") .replaceAll("<", "<") .replaceAll(">", ">") .replaceAll('"', """); } // ===== Draft (estimate page) ===== function saveFormDraft() { const data = { name: (nameEl?.value || "").trim(), phone: (phoneEl?.value || "").trim(), email: (emailEl?.value || "").trim(), event_date: (eventDateEl?.value || "").trim(), location: (locationEl?.value || "").trim(), notes: (notesEl?.value || "").trim(), }; try { sessionStorage.setItem(FORM_KEY, JSON.stringify(data)); } catch {} } function loadFormDraft() { try { const raw = sessionStorage.getItem(FORM_KEY); return raw ? JSON.parse(raw) : null; } catch { return null; } } // ===== Events ===== document.addEventListener("click", (e) => { // Add item (+) on inventory cards const addBtn = e.target.closest(".cardBtn[data-id]"); if (addBtn) { addToCart(addBtn.dataset.id, 1); renderBadge(); return; } // Cart open/close if (e.target.closest("#cartBtn")) { openOverlay(cartOverlay); renderCart(); return; } if (e.target.closest("#closeCartBtn")) { closeOverlay(cartOverlay); return; } // Click outside drawer closes if (cartOverlay && e.target === cartOverlay) { closeOverlay(cartOverlay); return; } // Cart inc/dec buttons (inside drawer) const inc = e.target.closest("button[data-inc]"); if (inc) { addToCart(inc.getAttribute("data-inc"), 1); return; } const dec = e.target.closest("button[data-dec]"); if (dec) { removeOne(dec.getAttribute("data-dec")); return; } }); clearCartBtn?.addEventListener("click", () => { if (confirm("Clear your list?")) clearCart(); }); getPriceBtn?.addEventListener("click", () => { closeOverlay(cartOverlay); doGetPrice(); }); getPriceBtn2?.addEventListener("click", () => { closeOverlay(cartOverlay); doGetPrice(); }); // Draft save on estimate page [nameEl, phoneEl, emailEl, eventDateEl, locationEl, notesEl].forEach((el) => { el?.addEventListener("input", saveFormDraft); el?.addEventListener("change", saveFormDraft); }); // ===== Init ===== renderBadge(); renderCart(); if (page === "estimate") { const draft = loadFormDraft(); if (draft) { if (nameEl) nameEl.value = draft.name || ""; if (phoneEl) phoneEl.value = draft.phone || ""; if (emailEl) emailEl.value = draft.email || ""; if (eventDateEl) eventDateEl.value = draft.event_date || ""; if (locationEl) locationEl.value = draft.location || ""; if (notesEl) notesEl.value = draft.notes || ""; } saveFormDraft(); renderPriceUI(); } })();

 Your Price | Party Productions
Party Productions
Your Price
Total price
$0
Important: This price is an estimate only. Final price may change based on date, availability, delivery distance, tax, setup labor, generators/power, and venue requirements.
Text us (fastest)

Request exact rate + availability

Submit this form, or text for the fastest response.

Edit items
Emails can take time. Texting helps us see your request immediately.


 Inventory | Party Rentals in Lawton, OK | Party Productions
Party Productions
Lawton, OK • Inventory
🔎 Browse + build your list
Tap “+” to add items. Use categories to jump fast.
10×10 Pop-Up Tent
Quick shade for small setups • $75
20×20 Pole Tent
Great for parties + seating • $250
20×30 Pole Tent
Bigger coverage for events • $350
Tent Sidewalls
Wind/privacy/rain protection • $120
Tent Lighting Strands
Premium evening vibe • $45
Tent Weight Bags
For concrete/patio setups • $25
6ft Banquet Table
Seats 6–8 • $10
8ft Banquet Table
Seats 8–10 • $12
60” Round Table
Classic party seating • $15
Cocktail / Highboy Table
Standing table for mingling • $15
Kids Table
Perfect for cake/crafts • $8
White Folding Chair
Clean + classic • $2.50
Black Folding Chair
Great for formal setups • $3.00
Kids Chair
Sized for little guests • $1.50
Popcorn Machine
Crowd favorite • $75
Cotton Candy Machine
Big wow factor • $85
Snow Cone Machine
Perfect for hot days • $75
Nacho Cheese Warmer
Easy event add-on • $45
Hot Dog Roller
Great for big groups • $45
Supplies Bundle
Cups/syrups/kits • $20
Bluetooth Speaker
Easy party music • $35
Generator (Park/No Power)
For parks/outdoors • $85
Extension Cords + Power Strips
Recommended add-on • $10
Yard Games Bundle
Party add-on fun • $25
Drink Cooler
Keeps drinks cold • $10
Trash Can
Keeps the party clean • $8
Hand Washing Station
Huge for outdoor events • $35
Folding Serving Table
Food/cake/gifts • $10
Tablecloth (Black or White)
Instant upgrade • $8
Chair Covers (each)
Formal upgrade • $1.25


:root{ --bg:#060913; --panel:rgba(255,255,255,.06); --panel2:rgba(255,255,255,.10); --text:#eef3ff; --muted:rgba(238,243,255,.72); --brand:#7c5cff; --brand2:#2db7ff; --border:1px solid rgba(255,255,255,.12); --radius:18px; --shadow:0 18px 44px rgba(0,0,0,.55); } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; background: radial-gradient(1000px 520px at 10% -10%, rgba(124,92,255,.22), transparent 60%), radial-gradient(1000px 520px at 92% 0%, rgba(45,183,255,.18), transparent 55%), linear-gradient(180deg, var(--bg) 0%, #040614 55%, var(--bg) 100%); color:var(--text); } /* ===== Home page: 1-swipe sections ===== */ .page{ height: 100svh; /* better than 100vh on mobile */ overflow-y: auto; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; /* Make sure dock never covers content */ padding-bottom: calc(96px + env(safe-area-inset-bottom)); } .screen{ min-height: 100svh; scroll-snap-align: start; display:flex; align-items:flex-start; /* ✅ removes huge empty top space */ justify-content:flex-start; /* ✅ removes huge empty top space */ /* extra bottom padding so content never dips into dock */ padding: 16px 16px calc(96px + env(safe-area-inset-bottom)); } .screen .frame{ position:relative; z-index:2; } /* Keep each screen from requiring extra swipes */ .screen .panel{ max-width:980px; } /* ===== Section backgrounds ===== */ .screen{ position:relative; overflow:hidden; } .screen::before{ content:""; position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; filter:saturate(1.05); z-index:0; } /* dark overlay so text stays readable */ .screen::after{ content:""; position:absolute; inset:0; background:linear-gradient( 180deg, rgba(6,9,19,.70) 0%, rgba(6,9,19,.55) 45%, rgba(6,9,19,.78) 100% ); z-index:1; } /* ensure your content is above the background */ .screen > .frame{ position:relative; z-index:2; } #home::before{ background-image:url("/assets/img/home.webp"); } #categories::before{ background-image:url("/assets/img/popular.webp"); } #tent-rentals::before{ background-image:url("/assets/img/tents.webp"); } #table-chair-rentals::before{ background-image:url("/assets/img/tables.webp"); } #inflatables::before{ background-image:url("/assets/img/inflatables.webp"); } #reviews::before{ background-image:url("/assets/img/reviews.webp"); } #faq::before{ background-image:url("/assets/img/faq.webp"); } #final-cta::before{ background-image:url("/assets/img/price.webp"); } a{color:inherit} h1,h2{margin:0} .sub{color:var(--muted);line-height:1.5;margin-top:10px} .fine{color:rgba(238,243,255,.65);font-size:12px;margin-top:14px} .snap{ height:100vh; overflow-y:auto; scroll-snap-type:y mandatory; padding-bottom:96px; /* Make room so dock doesn't cover content */ } .slide{ min-height:100vh; scroll-snap-align:start; display:flex; align-items:center; justify-content:center; padding:22px 16px; } .frame{ width:min(980px, 100%); } .brand{ display:flex;gap:12px;align-items:center; margin-bottom:18px; } .logo{ width:44px;height:44px;border-radius:12px; border:var(--border);object-fit:cover;background:rgba(255,255,255,.05); } .brandName{font-weight:900} .brandSub{font-size:12px;color:var(--muted);margin-top:2px} .hero{ background:linear-gradient(180deg,var(--panel2),var(--panel)); border:var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; } .pill{ display:inline-flex;gap:8px;align-items:center; padding:8px 12px;border-radius:999px; border:var(--border);background:rgba(255,255,255,.06); font-weight:900;font-size:13px; } .hero h1{font-size:38px;line-height:1.08;margin-top:12px} .heroCtas{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:11px 14px;border-radius:14px; border:var(--border);background:rgba(255,255,255,.06); color:var(--text);text-decoration:none;font-weight:900; cursor:pointer; } .btn:active{transform:translateY(1px)} .btn.primary{border:0;background:linear-gradient(90deg,var(--brand),var(--brand2))} .btn.big{padding:14px 16px;border-radius:16px;font-size:16px} .topRow{ display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;justify-content:space-between; margin-bottom:12px; } .input{ padding:10px 12px;border-radius:14px; border:var(--border);background:rgba(255,255,255,.06); color:var(--text);outline:none;min-width:240px; } .area{min-height:110px;resize:vertical} .hScroll{ display:flex;gap:10px; overflow-x:auto; padding:10px 2px 14px; scroll-snap-type:x mandatory; } .cat{ flex:0 0 auto; scroll-snap-align:start; padding:10px 12px;border-radius:999px; border:var(--border);background:rgba(255,255,255,.05); font-weight:900;cursor:pointer; white-space:nowrap; } .cat.active{background:rgba(124,92,255,.18);border:1px solid rgba(124,92,255,.35)} .cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; } @media(max-width:720px){.cards{grid-template-columns:1fr}} .card{ background:rgba(255,255,255,.05); border:var(--border); border-radius:16px; padding:14px; } .cardTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .cardTitle{font-weight:900} .cardMeta{font-size:12px;color:var(--muted);margin-top:6px} .cardBtn{ width:42px;height:42px;border-radius:14px; border:var(--border);background:rgba(10,14,26,.6); color:var(--text);cursor:pointer;font-size:18px; } .panel{ background:linear-gradient(180deg,var(--panel2),var(--panel)); border:var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; margin-top:14px; } .row{display:flex;align-items:center;justify-content:space-between;gap:12px} .k{color:var(--muted);font-weight:900;font-size:12px} .v{font-weight:900;font-size:28px} .list{margin-top:12px;display:flex;flex-direction:column;gap:10px} .line{ padding:12px;border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); display:flex;justify-content:space-between;gap:12px; } .notice{ margin-top:14px; padding:12px;border-radius:14px; border:1px solid rgba(45,183,255,.22); background:rgba(45,183,255,.08); color:rgba(238,243,255,.92); } .rowBtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px} .form{margin-top:14px} .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} @media(max-width:720px){.grid2{grid-template-columns:1fr}} /* Bottom app-dock (replaces right-side rail) */ .dock{ position:fixed; left:12px; right:12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index:60; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:10px; border-radius:20px; border:var(--border); background:rgba(10,14,26,.75); backdrop-filter:blur(14px); box-shadow:0 18px 44px rgba(0,0,0,.55); } .dockBtn{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; height:58px; border-radius:16px; border:var(--border); background:rgba(255,255,255,.06); color:var(--text); font-weight:900; cursor:pointer; transition:all .18s ease; } .dockBtn:active{ transform:translateY(1px) scale(.98); } .dockBtn .ico{ display:flex; align-items:center; justify-content:center; height:20px; line-height:1; } .dockBtn .lbl{ font-size:11px; letter-spacing:.3px; color:rgba(238,243,255,.82); } /* 🔥 THIS is what your JS is trying to use */ .dockBtn.isActive{ background:rgba(124,92,255,.22); border:1px solid rgba(124,92,255,.45); box-shadow:0 0 14px rgba(124,92,255,.6); transform:translateY(-2px); } .dockPrimary{ border:0; background:linear-gradient(90deg,var(--brand),var(--brand2)); } .dockCart .badge{ right:10px; top:8px; } .badge{ position:absolute; min-width:20px;height:20px; padding:0 6px;border-radius:999px; background:#ff3b3b; font-size:12px;font-weight:900; display:flex;align-items:center;justify-content:center; } .overlay{ position:fixed;inset:0; display:none; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); z-index:100; } .drawer{ position:absolute; right:16px;top:16px; width:min(520px, calc(100% - 32px)); max-height:calc(100% - 32px); overflow:hidden; border-radius:18px; border:var(--border); background:rgba(10,14,26,.92); box-shadow:var(--shadow); display:flex; flex-direction:column; } .drawerTop{ padding:14px; border-bottom:1px solid rgba(255,255,255,.10); display:flex;justify-content:space-between;gap:12px;align-items:flex-start; } .drawerTitle{font-weight:900} .drawerBody{padding:12px 14px;overflow:auto;display:flex;flex-direction:column;gap:10px} .drawerBottom{ padding:14px;border-top:1px solid rgba(255,255,255,.10); display:flex;gap:10px;justify-content:flex-end; background:rgba(255,255,255,.03); } .iconBtn{ border:var(--border);background:rgba(255,255,255,.06); color:var(--text);border-radius:14px;padding:10px 12px;cursor:pointer; } .popup{ position:absolute;left:50%;top:50%; transform:translate(-50%,-50%); width:min(360px, calc(100% - 32px)); border-radius:18px;border:var(--border); background:rgba(10,14,26,.92); box-shadow:var(--shadow); overflow:hidden; } .popupTop{ padding:14px;border-bottom:1px solid rgba(255,255,255,.10); display:flex;justify-content:space-between;align-items:center; } .qtyRow{display:flex;gap:12px;align-items:center;justify-content:center;padding:16px} .qtyBtn{ width:46px;height:46px;border-radius:16px; border:var(--border);background:rgba(255,255,255,.06); color:var(--text);cursor:pointer;font-size:20px;font-weight:900; } .qtyNum{font-weight:900;font-size:22px;min-width:36px;text-align:center} .popup .btn{margin:0 14px 14px;width:calc(100% - 28px)} @media(max-width:720px){ .drawer{left:10px;right:10px;top:auto;bottom:10px;width:auto;max-height:78vh} } /* ========================= Desktop polish (>= 920px) Keeps mobile swipe UX, makes desktop feel like a real site ========================= */ @media (min-width: 920px){ /* On desktop, don’t force every section to be a full screen “slide” */ .page{ scroll-snap-type: none; padding-bottom: 40px; } .screen{ min-height: auto; /* stops the huge empty space feel */ padding: 72px 24px; /* comfortable desktop spacing */ align-items: center; /* center the content vertically */ justify-content: center; } /* Make the content feel premium and centered */ .screen > .frame{ width: min(1100px, 100%); } /* Give panels better desktop proportions */ .panel{ max-width: 860px; margin: 0 auto; } /* Make hero headline scale better on desktop */ .hero h1{ font-size: 52px; line-height: 1.05; } /* Optional: make hero CTA row feel more “desktop” */ .heroCtas{ gap: 12px; } /* Dock: keep it, but make it less “mobile app” feeling on desktop */ .dock{ left: 50%; right: auto; transform: translateX(-50%); width: min(520px, calc(100% - 24px)); } } /* ===== TEMP SITE NOTICE BAR ===== */ .siteNotice{ position: sticky; top: 0; z-index: 9999; background: #111827; color: #fff; border-bottom: 1px solid rgba(255,255,255,.12); } .siteNoticeInner{ max-width: 1100px; margin: 0 auto; padding: 12px 14px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .siteNoticeText{ font-size: 14px; line-height: 1.35; opacity: .95; } .siteNoticeBtns{ display: flex; gap: 10px; flex-wrap: wrap; } .siteNoticeBtn{ display: inline-flex; align-items: center; justify-content: center; padding: 9px 12px; border-radius: 12px; font-weight: 900; font-size: 13px; text-decoration: none; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); color: #fff; white-space: nowrap; } .siteNoticeBtn.primary{ background: linear-gradient(90deg, #00a3ff, #2ee6a6); border: 0; color: #061018; } .siteNoticeBtn:hover{ filter: brightness(1.05); }