position: fixed; inset: 0; z-index: 99999; pointer-events: all; display: flex; flex-direction: column; } .garage-panel { flex: 1; background: #111; position: relative; transform-origin: top center; overflow: hidden; border-bottom: 1px solid #222; } .garage-panel::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent 50%, rgba(255,255,255,.03) 100%); } /* Rivets on each slat */ .garage-panel::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 5%, rgba(232,0,111,.35) 20%, rgba(232,0,111,.6) 50%, rgba(232,0,111,.35) 80%, transparent 95%); } @keyframes panelLift { 0% { transform: translateY(0); } 100% { transform: translateY(-110vh); } } .garage-panel.lifting { animation: panelLift 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.34) forwards; } /* Rivet dots on slats */ .garage-rivet { position: absolute; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #555, #222); border: 1px solid #333; box-shadow: 0 1px 2px rgba(0,0,0,.5); } /* Centre logo */ #garage-logo-wrap { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } #garage-logo { width: min(200px, 52vw); filter: drop-shadow(0 0 40px rgba(232,0,111,.8)) drop-shadow(0 0 80px rgba(232,0,111,.3)); animation: logoPulse 1.8s ease-in-out infinite; } @keyframes logoPulse { 0%, 100% { filter: drop-shadow(0 0 28px rgba(232,0,111,.7)) drop-shadow(0 0 60px rgba(232,0,111,.25)); } 50% { filter: drop-shadow(0 0 56px rgba(232,0,111,1)) drop-shadow(0 0 110px rgba(232,0,111,.5)); } } #garage-tagline { margin-top: 16px; font-family: 'Bebas Neue', sans-serif; font-size: clamp(.9rem, 3vw, 1.3rem); letter-spacing: .4em; color: #fff; opacity: 0; animation: fadeUpIn 0.5s 0.6s ease forwards; } #garage-hint { margin-top: 22px; font-family: 'DM Sans', sans-serif; font-size: .7rem; letter-spacing: .22em; color: rgba(232,0,111,.75); text-transform: uppercase; opacity: 0; animation: fadeUpIn 0.5s 1.1s ease forwards; display: flex; align-items: center; gap: 8px; } #garage-hint::before, #garage-hint::after { content: ''; width: 24px; height: 1px; background: rgba(232,0,111,.5); } @keyframes fadeUpIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Progress bar */ #garage-progress-track { position: fixed; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.05); z-index: 100001; } #garage-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--pk), var(--pk2), var(--pk3)); box-shadow: 0 0 14px rgba(232,0,111,.9); transition: width 0.08s linear; } /* Fade-out the whole overlay */ #garage-intro.done { animation: introOut 0.4s 0.1s ease forwards; } #garage-logo-wrap.done { animation: introOut 0.4s ease forwards; } #garage-progress-track.done { animation: introOut 0.4s ease forwards; } @keyframes introOut { to { opacity: 0; pointer-events: none; visibility: hidden; } } /* ══════════════════════════════════════ PRODUCT CATALOGUE ══════════════════════════════════════ */ .catalogue-section { padding: 80px 24px; } .catalogue-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 36px 0 32px; } .cat-tab { padding: 10px 24px; border-radius: 100px; border: 1.5px solid var(--line); background: transparent; color: var(--muted); font-family: 'DM Sans', sans-serif; font-size: .82rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 7px; } .cat-tab:hover { border-color: var(--pk); color: var(--pk); } .cat-tab.active { background: var(--pk); border-color: var(--pk); color: white; box-shadow: 0 4px 16px rgba(232,0,111,.35); } .product-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; } .product-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s; position: relative; } .product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(232,0,111,.18); border-color: rgba(232,0,111,.4); } .product-img-wrap { aspect-ratio: 1; overflow: hidden; position: relative; background: linear-gradient(135deg, var(--blk2), var(--blk3)); display: flex; align-items: center; justify-content: center; } .product-img-wrap img, .product-img-wrap .prod-real-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, opacity .3s; opacity: 0; } .product-img-wrap .prod-real-img.loaded { opacity: 1; } .product-card:hover .product-img-wrap img { transform: scale(1.05); } .product-img-placeholder-icon { font-size: 3.5rem; opacity: .25; position: relative; z-index: 0; } .product-badge { position: absolute; top: 12px; left: 12px; background: var(--pk); color: white; font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; z-index: 2; } .product-badge.new { background: #00b050; } .product-badge.custom { background: #7b00e8; } .product-body { padding: 16px 18px 18px; } .product-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.15rem; letter-spacing: .08em; color: var(--text); margin-bottom: 4px; } .product-desc { font-size: .8rem; color: var(--muted); line-height: 1.5; margin-bottom: 12px; } .product-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; } .product-tag { padding: 3px 10px; border: 1px solid var(--line); border-radius: 100px; font-size: .68rem; color: var(--muted); } .product-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); } .product-price { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; color: var(--pk); letter-spacing: .04em; } .product-price small { font-size: .65rem; color: var(--muted); font-family: 'DM Sans',sans-serif; display: block; letter-spacing: 0; } .product-cta { padding: 7px 16px; background: rgba(232,0,111,.12); border: 1px solid var(--pk); color: var(--pk); border-radius: 100px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; cursor: pointer; text-transform: uppercase; transition: all .2s; font-family: 'DM Sans',sans-serif; } .product-cta:hover { background: var(--pk); color: white; } /* Add Product card */ .product-card.add-card { border: 2px dashed rgba(232,0,111,.3); background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 320px; gap: 12px; transition: border-color .2s, background .2s; } .product-card.add-card:hover { border-color: var(--pk); background: rgba(232,0,111,.04); transform: none; box-shadow: none; } .add-card-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(232,0,111,.1); border: 1.5px solid var(--pk); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; transition: background .2s; } .product-card.add-card:hover .add-card-icon { background: rgba(232,0,111,.2); } .add-card-label { font-family: 'Bebas Neue', sans-serif; font-size: 1rem; letter-spacing: .12em; color: var(--pk); } .add-card-sub { font-size: .75rem; color: var(--muted); text-align: center; padding: 0 20px; } /* Product Modal + Add Modal */ .modal-overlay { display: none; position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,.88); backdrop-filter: blur(8px); align-items: center; justify-content: center; padding: 20px; } .modal-overlay.open { display: flex; } .modal-box { background: var(--blk2); border: 1px solid var(--line); border-radius: 24px; padding: 32px; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; position: relative; animation: lbFadeIn .25s ease; } .modal-box h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; letter-spacing: .1em; color: var(--pk); margin-bottom: 6px; } .modal-box > p { font-size: .84rem; color: var(--muted); margin-bottom: 22px; } .modal-close { position: absolute; top: 20px; right: 20px; background: var(--blk3); border: 1px solid var(--line); color: var(--muted); border-radius: 50%; width: 34px; height: 34px; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; } .modal-close:hover { border-color: var(--pk); color: var(--pk); } .modal-input { width: 100%; padding: 11px 14px; background: var(--blk3); border: 1.5px solid var(--line); border-radius: 10px; font-family: 'DM Sans',sans-serif; font-size: .88rem; color: var(--text); outline: none; transition: border-color .2s; margin-bottom: 12px; } .modal-input:focus { border-color: var(--pk); } .modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .modal-label { font-size: .72rem; font-weight: 700; color: var(--pk3); letter-spacing: .08em; text-transform: uppercase; display: block; margin-bottom: 5px; } .modal-submit { width: 100%; padding: 14px; background: var(--pk); color: white; border: none; border-radius: 12px; font-family: 'DM Sans',sans-serif; font-size: .95rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: all .2s; box-shadow: 0 4px 20px rgba(232,0,111,.35); margin-top: 8px; } .modal-submit:hover { background: var(--pk2); transform: translateY(-1px); } /* Product detail view inside modal */ .product-detail-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; margin-bottom: 20px; } .product-detail-img-placeholder { width: 100%; aspect-ratio: 1; border-radius: 16px; margin-bottom: 20px; background: linear-gradient(135deg, var(--blk3), var(--blk2)); display: flex; align-items: center; justify-content: center; font-size: 5rem; opacity: .3; } .product-detail-price { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: var(--pk); } .product-detail-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; } .product-detail-desc { font-size: .9rem; color: var(--muted); line-height: 1.7; margin-bottom: 20px; } /* Upload zones */ .upload-zone { border: 2px dashed rgba(232,0,111,.35); border-radius: 14px; padding: 28px 16px; text-align: center; cursor: pointer; transition: all .2s; background: rgba(232,0,111,.03); margin-bottom: 14px; position: relative; overflow: hidden; } .upload-zone:hover, .upload-zone.drag-over { border-color: var(--pk); background: rgba(232,0,111,.07); } .upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .upload-zone-icon { font-size: 2.2rem; display: block; margin-bottom: 8px; } .upload-zone-label { font-size: .85rem; color: var(--text); font-weight: 600; } .upload-zone-sub { font-size: .72rem; color: var(--muted); margin-top: 3px; } .upload-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; justify-content: center; } .upload-thumb-wrap { position: relative; display: inline-block; } .upload-thumb { width: 68px; height: 68px; border-radius: 10px; object-fit: cover; border: 2px solid var(--pk); display: block; } .upload-remove { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--pk); color: white; border: none; font-size: .65rem; cursor: pointer; display: flex; align-items: center; justify-content: center; } @media (max-width: 600px) { .modal-row { grid-template-columns: 1fr; } .product-grid { grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); } .catalogue-tabs { gap: 6px; } .cat-tab { padding: 8px 16px; font-size: .75rem; } }
Catering · Furniture · Apparel · Custom Printing
One brand, four world-class services. From luxury catering events to custom furniture, branded apparel and personalised drinkware — Zil Creations delivers excellence at every touchpoint.
Zil Creations was built to serve every celebration, space, and statement piece in your life — with the same luxury-first standard across every category.
Luxury catering for weddings, graduations, corporate events and private dinners. Led by Chef Zilander — 20 years of international culinary excellence.
● Live & BookingBespoke furniture pieces designed for luxury homes, event spaces and office environments. Custom sizes, finishes and upholstery available.
Coming SoonCustom branded apparel for events, businesses, teams and personal collections. DTF, screen print, and embroidery options.
Coming SoonPersonalised drinkware — tumblers, mugs, cups and bottles with your logo, design or message. Ideal for gifts, events and brand merch.
Coming SoonBrowse our available ready-made and customisable products. Click any item for details, or request a fully custom order below.
Tell us about your project in 3 quick steps and we'll get back to you with a tailored quote within 24 hours.
Select all that apply
Fill in as much as you know — we'll handle the rest
We'll reply within 24 hours
Thank you! We'll review your details and reach back out within 24 hours with a custom quote.
For urgent enquiries: 951-807-1929 (WhatsApp welcome)
Everything you need to know before booking.
From your first enquiry to the final reveal — we bring your vision to life with uncompromising quality and attention to detail.
Zil Creations is a multi-service premium brand born from a deep love of craftsmanship, hospitality and beautifully made things.
Chef Zilander is the visionary behind Zil Creations — an entrepreneur and culinary artist whose 20 years of international experience span some of the world's most celebrated luxury establishments.
Trained at world-class venues including the Four Seasons Hotel Dubai, Mövenpick Hotel Aqaba, Jordan, and Rite Bite Dubai, she brings refined global technique to everything she creates — from a gourmet dining spread to a custom-printed tumbler.
What began as a catering vision in 2015 has grown into a full creative brand serving clients across the United States — now proudly based in Southern California.
Luxury catering for weddings, graduations, birthday parties, corporate events and private dinners. Led by Chef Zilander with 20+ years of international excellence.
All items served by full or ½ tray · Weddings · Graduations · Corporate Events
Ready to browse the full menu with photos and ordering?
Each dish crafted from premium ingredients, prepared fresh for your event.
All items served by full or ½ tray
Rice & Starch
Rice & Starch
Rice & Starch
Rice & Starch
Proteins
Proteins
Proteins
Vegetarian
Vegetarian
Snacks
Snacks
Snacks
Snacks
Snacks
Kids Menu
Kids Menu
Kids Menu
Kids Menu
Beverages
BeveragesBespoke, handcrafted furniture pieces for luxury homes, event spaces and offices. Built to order — your space, your vision, our craftsmanship.
Portfolio images will be added as projects are completed. Be among the first to get a custom piece.
Saw Table + Storage
Raised Garden Planter
Mobile Work Station
Custom Colour Builds
Have a design, photo, or idea you love? Upload it here and we'll use it as reference when crafting your custom piece.
Leave your email and we'll reach out the moment our furniture service is ready to take orders.
🎉 You're on the list! We'll be in touch.
Custom branded apparel for events, businesses, teams, churches and personal collections. Premium fabrics, vibrant prints, fast turnaround.
Sample designs will appear here. Place an early order or enquire for custom designs.
Custom Swahili Tee
Graphic Full-Print Tee
DTF Print Quality
Branded Design
Have a design, photo, or idea you love? Upload it here and we'll use it as reference when crafting your custom piece.
Be the first to know when we start taking apparel orders.
🎉 You're on the list! We'll be in touch.
Personalised drinkware with your logo, design or message. Perfect for gifts, event giveaways, wedding favours, and branded merchandise.
Sample pieces will be shown here. Enquire now for early pricing and design consultation.
Custom Tumblers
Custom Mugs
Full-Wrap Prints
Bold Graphic Mugs
Have a design, photo, or idea you love? Upload it here and we'll use it as reference when crafting your custom piece.
Drop your email and we'll reach out when tumbler printing is live.
🎉 You're on the list! We'll be in touch.
Follow along on Instagram for live updates, behind-the-scenes moments, event reels and food content.
@ZilCreations · Follow on Instagram
Browse the full menu, select quantities, enter event details and submit your catering order.
Full Menu Ordering
Our dedicated ordering app features our complete 29-item menu across 8 categories — with photos, tray options, quantity controls and instant order confirmation.
Launch Catering Order App →Questions about a custom order or large event?
Whether it's catering, furniture, apparel or drinkware — we'd love to hear about your project.
Reach out via phone, email or the form. We respond to all enquiries within 24 hours.
75% deposit at contract signing. Balance due before event.
Thank you! We'll be in touch within 24 hours.
951-807-1929
Call or WhatsApp for a faster response.
Zil Creations · Restricted Access