Food truck websiteOne-line
MiniMax M3.1 Flash
by MiniMaxReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 1 min 55 s
- Cost
- $0.015
- Output tokens
- 25,505
- Spent thinking
- 7,069 tokens
- Speed
- 223.5 tok/s
- Console errors
- 0
- First token after
- 471 ms
- First visible text after
- 43.0 s
- Prompt tokens
- 546
- Code size
- 54.3 KB
- Finish reason
- stop
- Served by
- Nebius
- Model id
minimax/minimax-m3.1-flash- Reasoning sent
{"effort":"high"}- Max output
- 64,000 tokens
- Generated
- Nov 11, 2026
What it was asked
The prompt
“i'm opening a korean taco food truck called "Kimchi Loco", make me a website that makes people really want to come”
System prompt, sent with every prompt
You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task. Output rules: - Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block. - Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task. - Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw. - The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar. - Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction. - Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session. - Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing. - The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message. - The code must run with zero errors in the console of the latest Chrome.
Code run-1.html · 943 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kimchi Loco — Korean-Mexican Street Food Truck</title>
<style>
/* ============ TOKENS ============ */
:root{
--cream:#FFF6E9;
--paper:#FFFFFF;
--ink:#1A120C;
--ink-soft:#4A3A2E;
--red:#E4342B;
--red-dark:#A81B13;
--orange:#F77B00;
--yellow:#FFC531;
--green:#2E9E5B;
--blue:#2B6CB0;
--border:2px solid var(--ink);
--shadow:6px 6px 0 var(--ink);
--shadow-sm:4px 4px 0 var(--ink);
--r:18px;
--maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:"Helvetica Neue",Helvetica,Arial,"Segoe UI",sans-serif;
background:var(--cream);
color:var(--ink);
overflow-x:hidden;
line-height:1.55;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{font-family:"Arial Black","Arial Bold",Impact,Haettenschweiler,"Helvetica Neue",sans-serif;font-weight:900;letter-spacing:-.02em;line-height:.95;text-transform:uppercase}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font-family:inherit;font-size:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
::selection{background:var(--yellow);color:var(--ink)}
/* ============ TICKER ============ */
.ticker{background:var(--ink);color:var(--yellow);overflow:hidden;white-space:nowrap;font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;padding:9px 0}
.ticker-track{display:inline-flex;gap:0;animation:slide 26s linear infinite}
.ticker span{padding:0 26px;display:inline-flex;align-items:center;gap:10px}
.ticker i{color:var(--red);font-style:normal}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ============ HEADER ============ */
header{position:sticky;top:0;z-index:60;background:rgba(255,246,233,.92);backdrop-filter:blur(10px);border-bottom:2px solid var(--ink)}
.nav{display:flex;align-items:center;gap:18px;height:74px}
.logo{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.logo-mark{width:44px;height:44px;background:var(--red);border:2px solid var(--ink);border-radius:12px;display:grid;place-items:center;box-shadow:var(--shadow-sm);transform:rotate(-4deg)}
.logo-mark svg{width:30px;height:30px}
.logo b{font-family:"Arial Black",Impact,sans-serif;font-size:19px;letter-spacing:.02em;line-height:1;display:block}
.logo small{display:block;font-size:10px;letter-spacing:.28em;font-weight:700;color:var(--red);text-transform:uppercase}
.nav-links{display:flex;gap:26px;margin-left:auto;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.nav-links a{position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:3px;width:0;background:var(--red);transition:width .22s}
.nav-links a:hover::after{width:100%}
.nav-actions{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:var(--border);border-radius:999px;padding:12px 20px;font-weight:900;font-size:13px;letter-spacing:.1em;text-transform:uppercase;background:var(--paper);color:var(--ink);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .12s,box-shadow .12s,background .18s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.red{background:var(--red);color:#fff}
.btn.yellow{background:var(--yellow)}
.btn.dark{background:var(--ink);color:var(--cream)}
.btn.ghost{box-shadow:none;background:transparent}
.cart-btn{position:relative}
.cart-count{position:absolute;top:-7px;right:-6px;background:var(--green);color:#fff;border:2px solid var(--ink);border-radius:999px;min-width:22px;height:22px;display:grid;place-items:center;font-size:11px;font-weight:900;padding:0 4px}
.burger{display:none;background:var(--ink);color:var(--cream);border:none;border-radius:10px;width:44px;height:40px;font-size:20px;font-weight:900;cursor:pointer}
.mobile-nav{display:none;border-top:2px solid var(--ink);background:var(--cream);padding:14px 20px}
.mobile-nav a{display:block;padding:12px 0;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px dashed rgba(26,18,12,.2)}
.mobile-nav.open{display:block}
/* ============ HERO ============ */
.hero{position:relative;overflow:hidden;background:
radial-gradient(900px 500px at 78% 22%,rgba(247,123,0,.35),transparent 60%),
radial-gradient(700px 500px at 12% 85%,rgba(46,158,91,.22),transparent 60%),
linear-gradient(160deg,#241612 0%,#3A1C12 45%,#1A120C 100%);
color:var(--cream);padding:64px 0 78px}
.hero::before{content:"";position:absolute;inset:0;opacity:.07;background-image:repeating-linear-gradient(45deg,#fff 0 2px,transparent 2px 16px)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:9px;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:7px 15px;font-weight:900;font-size:11px;letter-spacing:.18em;text-transform:uppercase;box-shadow:var(--shadow-sm)}
.dot-live{width:9px;height:9px;background:var(--green);border-radius:50%;box-shadow:0 0 0 0 rgba(46,158,91,.7);animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(46,158,91,0)}100%{box-shadow:0 0 0 0 rgba(46,158,91,0)}}
h1.hero-title{font-size:clamp(40px,7.4vw,86px);margin:20px 0 14px;text-shadow:5px 5px 0 var(--red)}
h1.hero-title em{font-style:normal;color:var(--yellow);display:block}
.hero-sub{font-size:clamp(15px,1.7vw,19px);max-width:520px;color:#F3E3D0}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero-badges span{border:1.5px dashed rgba(255,246,233,.5);border-radius:999px;padding:7px 14px;font-size:12px;font-weight:700;letter-spacing:.06em}
.hero-art{position:relative;display:grid;place-items:center;min-height:330px}
.hero-taco{width:min(100%,470px);filter:drop-shadow(0 26px 30px rgba(0,0,0,.45));animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-13px) rotate(1.5deg)}}
.steam{position:absolute;top:6%;left:50%;transform:translateX(-50%);width:180px;height:170px;pointer-events:none}
.steam path{fill:none;stroke:rgba(255,255,255,.4);stroke-width:7;stroke-linecap:round;filter:blur(4px);animation:steam 4.5s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:1.4s}.steam path:nth-child(3){animation-delay:2.7s}
@keyframes steam{0%{opacity:0;transform:translateY(14px) scaleY(.6)}35%{opacity:.85}100%{opacity:0;transform:translateY(-42px) scaleY(1.3)}}
.price-tag{position:absolute;right:4%;top:6%;background:var(--yellow);color:var(--ink);border:var(--border);border-radius:16px;padding:12px 16px;box-shadow:var(--shadow);transform:rotate(8deg);text-align:center;animation:float 6s ease-in-out infinite}
.price-tag b{display:block;font-size:26px;line-height:1}
.price-tag small{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.chip-float{position:absolute;background:var(--cream);color:var(--ink);border:var(--border);border-radius:999px;padding:8px 14px;font-size:12px;font-weight:900;box-shadow:var(--shadow-sm);white-space:nowrap}
.cf1{left:-2%;top:24%;transform:rotate(-7deg)}
.cf2{right:-2%;bottom:14%;transform:rotate(5deg);background:var(--green);color:#fff}
.cf3{left:6%;bottom:4%;transform:rotate(-4deg);background:var(--red);color:#fff}
/* ============ SPICE METER ============ */
.spice{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:rgba(255,255,255,.07);border:1.5px dashed rgba(255,246,233,.35);border-radius:16px;padding:14px 18px;max-width:520px}
.spice p{font-size:11px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;opacity:.8;width:100%;margin:0}
.spice-btns{display:flex;gap:8px;flex-wrap:wrap}
.spice-btn{background:transparent;color:var(--cream);border:1.5px solid rgba(255,246,233,.5);border-radius:999px;padding:8px 14px;font-size:12px;font-weight:800;cursor:pointer;transition:.18s}
.spice-btn:hover{border-color:var(--yellow);color:var(--yellow)}
.spice-btn.active{background:var(--red);border-color:var(--red);color:#fff}
.spice-note{font-size:12.5px;opacity:.9}
/* ============ MARQUEE STRIP ============ */
.strip{background:var(--yellow);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);overflow:hidden;padding:14px 0;transform:rotate(-1.1deg) scaleX(1.03);margin:26px 0}
.strip-track{display:flex;gap:34px;white-space:nowrap;animation:slide 30s linear infinite;width:max-content;font-family:"Arial Black",Impact,sans-serif;font-size:clamp(18px,3vw,32px);text-transform:uppercase;letter-spacing:-.01em}
.strip-track span{display:inline-flex;align-items:center;gap:14px}
.strip-track em{font-style:normal;color:var(--red)}
/* ============ SECTION HEADS ============ */
section{position:relative}
.sec{padding:74px 0}
.sec-head{text-align:center;max-width:760px;margin:0 auto 42px}
.eyebrow{display:inline-block;background:var(--red);color:#fff;border-radius:999px;padding:6px 14px;font-size:11px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}
.sec-head h2{font-size:clamp(30px,5vw,54px)}
.sec-head h2 span{color:var(--red)}
.sec-head p{margin-top:14px;color:var(--ink-soft);font-size:16px}
/* ============ MENU ============ */
.filters{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:34px}
.filter{background:var(--paper);border:var(--border);border-radius:999px;padding:10px 18px;font-weight:900;font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:.15s}
.filter:hover{transform:translate(-1px,-1px)}
.filter.active{background:var(--ink);color:var(--cream);box-shadow:3px 3px 0 var(--red)}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:22px}
.card{background:var(--paper);border:var(--border);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s}
.card:hover{transform:translate(-3px,-4px);box-shadow:9px 10px 0 var(--ink)}
.card-top{position:relative;height:150px;display:grid;place-items:center;overflow:hidden}
.card-top svg{width:150px;height:132px;position:relative;z-index:2;transition:transform .25s}
.card:hover .card-top svg{transform:translateY(-6px) rotate(-4deg) scale(1.05)}
.tag{position:absolute;top:11px;left:11px;z-index:3;background:var(--ink);color:var(--cream);font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:999px}
.tag.spicy{background:var(--red)}.tag.veg{background:var(--green)}.tag.hot{background:var(--orange)}
.card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.card-body h3{font-size:19px}
.card-body p{font-size:14px;color:var(--ink-soft);flex:1}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.price{font-family:"Arial Black",Impact,sans-serif;font-size:23px}
.add{border:var(--border);background:var(--yellow);border-radius:999px;padding:8px 15px;font-weight:900;font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:.15s}
.add:hover{background:var(--green);color:#fff}
.add:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
/* ============ VALUE GRID ============ */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.value{background:var(--paper);border:var(--border);border-radius:var(--r);padding:24px 22px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.value .num{position:absolute;right:-6px;top:-14px;font-family:"Arial Black",Impact,sans-serif;font-size:76px;color:rgba(228,52,43,.11)}
.value .ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;border:var(--border);margin-bottom:14px;box-shadow:3px 3px 0 var(--ink)}
.value h3{font-size:18px;margin-bottom:8px}
.value p{font-size:14px;color:var(--ink-soft)}
/* ============ DROP BANNER ============ */
.drop{background:linear-gradient(120deg,var(--red),#8f120c);color:#fff;border:var(--border);border-radius:26px;box-shadow:10px 10px 0 var(--ink);padding:38px;display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;position:relative;overflow:hidden}
.drop::after{content:"";position:absolute;right:-60px;top:-60px;width:230px;height:230px;border-radius:50%;background:rgba(255,197,49,.18)}
.drop h2{font-size:clamp(28px,4.4vw,46px)}
.drop p{margin-top:12px;opacity:.95;max-width:52ch}
.drop .clock{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.clock div{background:rgba(0,0,0,.32);border:1.5px solid rgba(255,255,255,.4);border-radius:14px;padding:10px 14px;text-align:center;min-width:74px}
.clock b{display:block;font-family:"Arial Black",Impact,sans-serif;font-size:26px;line-height:1}
.clock span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
/* ============ STORY ============ */
.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center}
.story-art{position:relative;background:var(--ink);border:var(--border);border-radius:24px;box-shadow:10px 10px 0 var(--red);padding:22px;overflow:hidden}
.story-art svg{width:100%}
.story h2{font-size:clamp(28px,4.4vw,48px)}
.story p{margin-top:16px;color:var(--ink-soft);font-size:16px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.stat{background:var(--paper);border:var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow-sm)}
.stat b{display:block;font-family:"Arial Black",Impact,sans-serif;font-size:30px;line-height:1;color:var(--red)}
.stat span{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
/* ============ REVIEWS ============ */
.reviews{background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.review{max-width:760px;margin:0 auto;text-align:center}
.stars{color:var(--orange);font-size:22px;letter-spacing:4px}
.review blockquote{font-family:"Arial Black",Impact,sans-serif;font-size:clamp(19px,3vw,30px);text-transform:uppercase;line-height:1.2;margin:16px 0 14px}
.review cite{font-style:normal;font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.dots{display:flex;gap:8px;justify-content:center;margin-top:22px}
.dots button{width:11px;height:11px;border-radius:50%;border:2px solid var(--ink);background:transparent;cursor:pointer;padding:0}
.dots button.active{background:var(--red);width:30px;border-radius:99px}
/* ============ VISIT ============ */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.panel{background:var(--paper);border:var(--border);border-radius:22px;box-shadow:var(--shadow);padding:28px}
.panel h3{font-size:22px;margin-bottom:16px}
.hours-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed rgba(26,18,12,.18);font-size:14.5px}
.hours-row:last-child{border-bottom:none}
.hours-row b{font-weight:800}
.hours-row.today{color:var(--red);font-weight:900}
.map{background:var(--ink);border:var(--border);border-radius:22px;box-shadow:var(--shadow);overflow:hidden;position:relative}
.map svg{width:100%;height:auto;display:block}
.map-badge{position:absolute;left:18px;bottom:18px;background:var(--yellow);border:var(--border);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow-sm)}
.map-badge b{display:block;font-family:"Arial Black",Impact,sans-serif;font-size:17px}
.map-badge span{font-size:12px;font-weight:700}
.status-open{display:inline-flex;align-items:center;gap:8px;background:rgba(46,158,91,.14);border:1.5px solid var(--green);color:#1d6b3d;border-radius:999px;padding:6px 13px;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.status-closed{background:rgba(228,52,43,.12);border-color:var(--red);color:var(--red-dark)}
/* ============ SIGNUP ============ */
.signup{background:var(--ink);color:var(--cream);padding:56px 0;text-align:center}
.signup h2{font-size:clamp(26px,4.6vw,48px)}
.signup h2 span{color:var(--yellow)}
.signup p{opacity:.8;margin-top:12px}
.signup-form{display:flex;gap:10px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.signup-form input{background:transparent;border:2px solid var(--cream);color:var(--cream);border-radius:999px;padding:13px 20px;min-width:280px;outline:none;font-weight:700}
.signup-form input:focus{border-color:var(--yellow)}
.signup-note{margin-top:16px;color:var(--yellow);font-weight:800;font-size:14px;min-height:22px;letter-spacing:.06em}
/* ============ FOOTER ============ */
footer{background:var(--ink);color:#C9B6A4;border-top:4px solid var(--red);padding:44px 0 26px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px}
.foot-grid h4{color:var(--cream);font-size:14px;letter-spacing:.16em;margin-bottom:14px}
.foot-grid a{display:block;padding:5px 0;font-size:14px}
.foot-grid a:hover{color:var(--yellow)}
.foot-logo{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.foot-bottom{margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px}
.socials{display:flex;gap:9px}
.socials a{width:36px;height:36px;border:1.5px solid rgba(255,255,255,.3);border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900;color:var(--cream);padding:0}
.socials a:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
/* ============ CART DRAWER ============ */
.overlay{position:fixed;inset:0;background:rgba(26,18,12,.55);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s;z-index:90}
.overlay.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(400px,92vw);background:var(--cream);border-left:2px solid var(--ink);z-index:100;transform:translateX(105%);transition:transform .3s cubic-bezier(.5,1.4,.5,1);display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:2px solid var(--ink)}
.drawer-head h3{font-size:22px}
.x{border:none;background:var(--ink);color:var(--cream);width:36px;height:36px;border-radius:50%;font-size:16px;font-weight:900;cursor:pointer}
.drawer-body{flex:1;overflow-y:auto;padding:16px 20px}
.citem{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px dashed rgba(26,18,12,.2)}
.citem b{font-size:15px;display:block}
.citem span{font-size:13px;color:var(--ink-soft)}
.qty{display:flex;gap:6px;align-items:center}
.qty button{width:26px;height:26px;border:var(--border);background:var(--paper);border-radius:8px;font-weight:900;cursor:pointer;line-height:1}
.empty{text-align:center;color:var(--ink-soft);padding:40px 10px;font-weight:700}
.drawer-foot{padding:18px 20px;border-top:2px solid var(--ink);background:var(--paper)}
.total-row{display:flex;justify-content:space-between;font-family:"Arial Black",Impact,sans-serif;font-size:22px;margin-bottom:12px}
.drawer-note{font-size:12px;color:var(--ink-soft);margin-top:10px;text-align:center;min-height:16px}
/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.9,.3,1)}
.reveal.in{opacity:1;transform:none}
/* ============ RESPONSIVE ============ */
@media(max-width:980px){
.hero .wrap{grid-template-columns:1fr;text-align:center}
.hero-sub{margin-left:auto;margin-right:auto}
.hero-cta,.hero-badges,.spice{justify-content:center;margin-left:auto;margin-right:auto}
.story,.visit,.drop{grid-template-columns:1fr}
.foot-grid{grid-template-columns:1fr 1fr}
.nav-links{display:none}
.burger{display:block;order:3}
.nav-actions{margin-left:auto}
.card-top{height:135px}
}
@media(max-width:560px){
.sec{padding:56px 0}
.logo b{font-size:16px}
.btn{padding:11px 16px;font-size:12px}
.foot-grid{grid-template-columns:1fr}
.stats{grid-template-columns:1fr 1fr}
.panel{padding:20px}
.hero{padding:46px 0 60px}
h1.hero-title{text-shadow:3px 3px 0 var(--red)}
}
</style>
</head>
<body>
<!-- SVG SPRITE -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
<symbol id="ico-taco" viewBox="0 0 240 210">
<g fill="var(--c-lettuce,#7CC242)">
<ellipse cx="72" cy="96" rx="27" ry="21"/>
<ellipse cx="104" cy="82" rx="29" ry="25"/>
<ellipse cx="140" cy="82" rx="29" ry="25"/>
<ellipse cx="170" cy="97" rx="25" ry="20"/>
</g>
<g fill="var(--c-herb,#2E9E5B)">
<circle cx="58" cy="76" r="6"/><circle cx="186" cy="82" r="6"/><circle cx="128" cy="58" r="5"/>
</g>
<g fill="var(--c-meat,#7C3A1D)">
<rect x="70" y="62" width="30" height="22" rx="9" transform="rotate(-8 85 73)"/>
<rect x="108" y="52" width="32" height="23" rx="9" transform="rotate(6 124 63)"/>
<rect x="146" y="60" width="28" height="21" rx="9" transform="rotate(12 160 70)"/>
</g>
<g fill="var(--c-kimchi,#E23B2E)">
<path d="M46 70 c4 -14 24 -18 32 -4 c6 10 -4 20 -16 19 c-13 -1 -19 -6 -16 -15 z"/>
<path d="M118 42 c8 -14 28 -14 34 0 c4 11 -8 19 -20 16 c-12 -3 -19 -8 -14 -16 z"/>
<path d="M174 50 c8 -10 26 -8 30 5 c3 10 -8 16 -19 13 c-11 -3 -16 -11 -11 -18 z"/>
</g>
<g fill="var(--c-kimchi2,#FF6A57)" opacity=".85">
<path d="M54 66 c6 -6 16 -6 20 0 c-8 4 -14 4 -20 0 z"/>
<path d="M126 46 c8 -4 18 -2 22 4 c-10 2 -18 0 -22 -4 z"/>
</g>
<path d="M58 92 q30 -26 62 -18 q26 6 42 24" stroke="var(--c-cream,#FFF3CF)" stroke-width="7" fill="none" stroke-linecap="round"/>
<path d="M30 112 A90 90 0 0 0 210 112 Z" fill="var(--c-shell,#F0B04A)"/>
<path d="M120 112 A90 90 0 0 0 210 112 Z" fill="var(--c-shell2,#DC9132)"/>
<g fill="#B96F1C" opacity=".4">
<ellipse cx="86" cy="142" rx="9" ry="6"/><ellipse cx="142" cy="164" rx="11" ry="7"/><ellipse cx="180" cy="136" rx="8" ry="5"/><ellipse cx="60" cy="132" rx="7" ry="5"/>
</g>
<path d="M34 108 l12 -8 l11 10 l12 -10 l12 10 l12 -10 l12 10 l12 -10 l11 10 l12 -10 l9 7" fill="none" stroke="var(--c-cheese,#FFD23F)" stroke-width="7" stroke-linejoin="round" stroke-linecap="round"/>
<g fill="#FFF7E0"><ellipse cx="98" cy="76" rx="3" ry="4" transform="rotate(20 98 76)"/><ellipse cx="152" cy="86" rx="3" ry="4" transform="rotate(-25 152 86)"/></g>
</symbol>
<symbol id="ico-bowl" viewBox="0 0 140 120">
<ellipse cx="70" cy="88" rx="46" ry="8" fill="#000" opacity=".12"/>
<path d="M22 52 h96 l-11 46 a8 8 0 0 1 -8 6 H41 a8 8 0 0 1 -8 -6 Z" fill="#EFE3D2" stroke="#1A120C" stroke-width="3"/>
<path d="M30 52 q10 -28 40 -28 q30 0 40 28 Z" fill="#FFFDF5" stroke="#1A120C" stroke-width="3"/>
<circle cx="52" cy="40" r="8" fill="#E23B2E"/><circle cx="74" cy="32" r="9" fill="#7C3A1D"/><circle cx="94" cy="42" r="7" fill="#2E9E5B"/>
<circle cx="66" cy="46" r="6" fill="#FFD23F"/><circle cx="84" cy="26" r="5" fill="#E23B2E"/>
<path d="M28 66 h84" stroke="#1A120C" stroke-width="3" opacity=".35"/>
</symbol>
<symbol id="ico-wrap" viewBox="0 0 140 120">
<g transform="rotate(-14 70 60)">
<rect x="28" y="26" width="84" height="66" rx="18" fill="#F0B04A" stroke="#1A120C" stroke-width="3"/>
<path d="M28 58 h84" stroke="#DC9132" stroke-width="8"/>
<path d="M112 26 l16 -10 l-4 22 z" fill="#EFE3D2" stroke="#1A120C" stroke-width="3"/>
<circle cx="46" cy="44" r="5" fill="#E23B2E"/><circle cx="72" cy="42" r="6" fill="#7CC242"/><circle cx="92" cy="46" r="5" fill="#E23B2E"/>
</g>
</symbol>
<symbol id="ico-side" viewBox="0 0 140 120">
<path d="M34 44 h72 l-9 52 a6 6 0 0 1 -6 5 H49 a6 6 0 0 1 -6 -5 Z" fill="#E4342B" stroke="#1A120C" stroke-width="3"/>
<g fill="#FFC531" stroke="#1A120C" stroke-width="2.5">
<rect x="50" y="24" width="13" height="34" rx="6" transform="rotate(-8 56 41)"/>
<rect x="70" y="16" width="13" height="36" rx="6" transform="rotate(6 76 34)"/>
<rect x="86" y="26" width="13" height="32" rx="6" transform="rotate(-4 92 42)"/>
</g>
</symbol>
<symbol id="ico-cup" viewBox="0 0 140 120">
<path d="M14 12 h26 l-7 12 l7 10 h-26 l7 -10 z" fill="#FFF" opacity=".25"/>
<path d="M40 30 l18 -22" stroke="#E4342B" stroke-width="7" stroke-linecap="round"/>
<path d="M40 36 h64 l-8 62 a8 8 0 0 1 -8 6 H56 a8 8 0 0 1 -8 -6 Z" fill="#FFFDF5" stroke="#1A120C" stroke-width="3"/>
<path d="M46 62 h52 l-4 30 H50 Z" fill="#F0B04A"/>
<path d="M40 36 h64 l-2 14 H42 Z" fill="#E23B2E"/>
<circle cx="58" cy="78" r="4" fill="#7C3A1D"/><circle cx="76" cy="84" r="4" fill="#7C3A1D"/><circle cx="88" cy="74" r="3.5" fill="#7C3A1D"/>
</symbol>
<symbol id="ico-smoke" viewBox="0 0 120 120">
<rect x="18" y="46" width="84" height="26" rx="13" fill="#D9CBB4" stroke="#1A120C" stroke-width="3"/>
<rect x="44" y="26" width="34" height="26" rx="13" fill="#EFE3D2" stroke="#1A120C" stroke-width="3"/>
<path d="M20 58 h80" stroke="#1A120C" stroke-width="3" opacity=".3"/>
<path d="M96 52 q10 -10 4 -20 M104 58 q12 -8 8 -22" stroke="#B9A78F" stroke-width="4" fill="none" stroke-linecap="round"/>
</symbol>
</svg>
<!-- TICKER -->
<div class="ticker">
<div class="ticker-track" id="tickTrack">
<span>🔥 Kimchi Loco <i>•</i> Korean-Mexican street food on wheels</span>
<span>🌮 Order ahead <i>•</i> Skip the line at the window</span>
<span>🚚 Truck rolling Thu–Sun <i>•</i> Downtown & 5th Street Market</span>
<span>🥑 Vegan, gluten-free & halal-friendly options <i>•</i> Every single day</span>
<span>🔥 Kimchi Loco <i>•</i> Korean-Mexican street food on wheels</span>
<span>🌮 Order ahead <i>•</i> Skip the line at the window</span>
<span>🚚 Truck rolling Thu–Sun <i>•</i> Downtown & 5th Street Market</span>
<span>🥑 Vegan, gluten-free & halal-friendly options <i>•</i> Every single day</span>
</div>
</div>
<!-- HEADER -->
<header>
<div class="wrap nav">
<a href="#top" class="logo">
<div class="logo-mark">
<svg viewBox="0 0 240 210"><use href="#ico-taco"/></svg>
</div>
<div>
<b>KIMCHI LOCO</b>
<small>Korean · Mexican</small>
</div>
</a>
<nav class="nav-links">
<a href="#menu">Menu</a>
<a href="#why">Why Us</a>
<a href="#drop">Special Drop</a>
<a href="#story">Our Story</a>
<a href="#visit">Visit</a>
</nav>
<div class="nav-actions">
<button class="btn cart-btn" id="openCart">Order <span class="cart-count" id="cartCount">0</span></button>
<button class="burger" id="burger" aria-label="Menu">☰</button>
</div>
</div>
<div class="mobile-nav" id="mobileNav">
<a href="#menu">Menu</a>
<a href="#why">Why Us</a>
<a href="#drop">Special Drop</a>
<a href="#story">Our Story</a>
<a href="#visit">Visit</a>
<a href="#signup">Join the Kimchi Club</a>
</div>
</header>
<!-- HERO -->
<div id="top"></div>
<section class="hero">
<div class="wrap">
<div class="hero-copy">
<div class="kicker"><span class="dot-live"></span> Window open now · Downtown</div>
<h1 class="hero-title">Tacos with a <em>little Seoul</em> in them.</h1>
<p class="hero-sub">Slow-bulged beef, house-fermented kimchi and street taco tortillas — griddled hot, handed over fast. Pick your heat and watch us make it your way.</p>
<div class="hero-cta">
<a href="#menu" class="btn red">See the menu 🌮</a>
<a href="#visit" class="btn yellow">Find the truck</a>
</div>
<div class="hero-badges">
<span>🥬 Vegan options</span>
<span>🌾 Gluten-free tortillas</span>
<span>🔥 Halal-certified protein</span>
<span>⏱️ 4-minute pickup</span>
</div>
<div class="spice">
<p>Set your heat level</p>
<div class="spice-btns">
<button class="spice-btn" data-heat="0">Mild</button>
<button class="spice-btn active" data-heat="1">Hot</button>
<button class="spice-btn" data-heat="2">Literally Fire 🔥</button>
</div>
<div class="spice-note" id="spiceNote">Our classic gochujang heat — big flavor, friendly pain.</div>
</div>
</div>
<div class="hero-art">
<svg class="hero-taco" viewBox="0 0 240 210" id="heroTaco" style="--c-shell:#F5B855;--c-shell2:#DE9132;--c-lettuce:#8ACB49;--c-meat:#7C3A1D;--c-kimchi:#E23B2E;--c-kimchi2:#FF6A57;--c-cheese:#FFD23F;--c-herb:#2E9E5B;--c-cream:#FFF6DF">
<use href="#ico-taco"/>
</svg>
<div class="steam">
<path d="M78 60 q-14 -22 4 -40 q16 -16 2 -34"/>
<path d="M108 52 q-16 -26 6 -46 q18 -16 4 -30"/>
<path d="M140 64 q-12 -20 4 -36"/>
</div>
<div class="price-tag"><b>$4.25</b><small>per taco</small></div>
<div class="chip-float cf1">House-fermented kimchi</div>
<div class="chip-float cf2">Bulgogi 🔥</div>
<div class="chip-float cf3">Griddled to order</div>
</div>
</div>
</section>
<!-- STRIP -->
<div class="strip">
<div class="strip-track">
<span>Real Korean kimchi <em>✦</em> Hand-pressed tortillas <em>✦</em> 12 secret sauces <em>✦</span>
<span>Real Korean kimchi <em>✦</em> Hand-pressed tortillas <em>✦</em> 12 secret sauces <em>✦</span>
<span>Real Korean kimchi <em>✦</em> Hand-pressed tortillas <em>✦</em> 12 secret sauces <em>✦</span>
<span>Real Korean kimchi <em>✦</em> Hand-pressed tortillas <em>✦</em> 12 secret sauces <em>✦</span>
</div>
</div>
<!-- MENU -->
<section class="sec" id="menu">
<div class="wrap">
<div class="sec-head reveal">
<div class="eyebrow">The Menu</div>
<h2>Everything is <span>better</span> in a taco</h2>
<p>Twelve house sauces, one screaming hot griddle, and a short list of things we make every single day. Tap a taco to add it to your order.</p>
</div>
<div class="filters reveal" id="filters">
<button class="filter active" data-cat="all">All</button>
<button class="filter" data-cat="tacos">Tacos</button>
<button class="filter" data-cat="burritos">Burritos</button>
<button class="filter" data-cat="bowls">Bowls</button>
<button class="filter" data-cat="sides">Sides</button>
<button class="filter" data-cat="drinks">Drinks</button>
</div>
<div class="menu-grid" id="menuGrid"></div>
</div>
</section>
<!-- WHY -->
<section class="sec" id="why" style="background:#FFEED6">
<div class="wrap">
<div class="sec-head reveal">
<div class="eyebrow">Why Kimchi Loco</div>
<h2>We don't do <span>mediocre</span> street food</h2>
<p>One truck, five years, 300,000 tacos. Here's what makes people line up around the block.</p>
</div>
<div class="values">
<div class="value reveal"><span class="num">01</span>
<div class="ico" style="background:var(--red)"><svg viewBox="0 0 240 210" style="width:34px;height:34px"><use href="#ico-taco"/></svg></div>
<h3>Kimchi fermented in-house</h3>
<p>Real napa cabbage, gochugaru and a 10-day ferment. It's tangy, crunchy, and it eats like a cheese pull.</p>
</div>
<div class="value reveal"><span class="num">02</span>
<div class="ico" style="background:var(--yellow)"><svg viewBox="0 0 140 120" style="width:34px;height:34px"><use href="#ico-smoke"/></svg></div>
<h3>Cast-iron griddle, always hot</h3>
<p>Maillard-seared bulgogi, blistered corn, crispy taco shells that snap. No steam, no microwave, ever.</p>
</div>
<div class="value reveal"><span class="num">03</span>
<div class="ico" style="background:var(--green)"><svg viewBox="0 0 140 120" style="width:34px;height:34px"><use href="#ico-wrap"/></svg></div>
<h3>Tortillas pressed to order</h3>
<p>Nixtamal corn tortillas pressed daily at 6am. Gluten-free, stone-ground, and sturdy enough to double as a spoon.</p>
</div>
<div class="value reveal"><span class="num">04</span>
<div class="ico" style="background:var(--orange)"><svg viewBox="0 0 140 120" style="width:34px;height:34px"><use href="#ico-cup"/></svg></div>
<h3>12 sauces, 0 leftovers</h3>
<p>Gochujang, yuzu crema, sesame-lime, tamarind chipotle. We batch small so every bottle tastes like day one.</p>
</div>
</div>
</div>
</section>
<!-- DROP -->
<section class="sec" id="drop" style="padding-top:34px">
<div class="wrap">
<div class="drop reveal">
<div>
<div class="kicker" style="background:var(--yellow);margin-bottom:16px">Limited drop · Fridays only</div>
<h2>The Seoul Surreal</h2>
<p>Short rib that's been braising for 14 hours in gochujang, kimchi jam, smoked egg, and a crushed shrimp-chip crunch. 60 tacos per night. When they're gone, they're gone.</p>
<div class="clock" id="clock">
<div><b id="cdD">00</b><span>Days</span></div>
<div><b id="cdH">00</b><span>Hours</span></div>
<div><b id="cdM">00</b><span>Mins</span></div>
<div><b id="cdS">00</b><span>Secs</span></div>
</div>
</div>
<div style="display:grid;place-items:center">
<svg viewBox="0 0 240 210" style="--c-shell:#F5B855;--c-shell2:#DE9132;--c-lettuce:#8ACB49;--c-meat:#5B2A14;--c-kimchi:#C41E16;--c-kimchi2:#FF6A57;--c-cheese:#FFD23F;--c-herb:#2E9E5B;--c-cream:#FFF6DF;width:min(100%,330px);filter:drop-shadow(0 18px 22px rgba(0,0,0,.35));animation:float 5.5s ease-in-out infinite">
<use href="#ico-taco"/>
</svg>
</div>
</div>
</div>
</section>
<!-- STORY -->
<section class="sec" id="story">
<div class="wrap story">
<div class="story-art reveal">
<svg viewBox="0 0 400 340">
<defs>
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#2A1B14"/><stop offset="1" stop-color="#4A2A18"/></linearGradient>
</defs>
<rect width="400" height="340" rx="16" fill="url(#sky)"/>
<circle cx="300" cy="80" r="44" fill="#FFC531" opacity=".18"/>
<path d="M0 250 h400 v90 H0z" fill="#1A120C"/>
<!-- truck -->
<rect x="40" y="120" width="230" height="110" rx="16" fill="#E4342B"/>
<rect x="40" y="120" width="230" height="110" rx="16" fill="none" stroke="#0d0906" stroke-width="4"/>
<path d="M270 160 h60 l34 40 v30 h-94z" fill="#F7EFE0" stroke="#0d0906" stroke-width="4"/>
<rect x="284" y="170" width="44" height="30" rx="6" fill="#9FD3E8" stroke="#0d0906" stroke-width="3"/>
<rect x="60" y="146" width="120" height="58" rx="8" fill="#FFC531" stroke="#0d0906" stroke-width="4"/>
<text x="120" y="172" text-anchor="middle" font-family="Arial Black, sans-serif" font-size="19" fill="#1A120C">KIMCHI</text>
<text x="120" y="194" text-anchor="middle" font-family="Arial Black, sans-serif" font-size="19" fill="#1A120C">LOCO</text>
<rect x="200" y="146" width="54" height="58" rx="8" fill="#2E9E5B" stroke="#0d0906" stroke-width="4"/>
<circle cx="227" cy="175" r="15" fill="#FFF6E9"/>
<text x="227" y="181" text-anchor="middle" font-family="Arial Black, sans-serif" font-size="16" fill="#E4342B">🌮</text>
<circle cx="100" cy="238" r="26" fill="#1A120C" stroke="#F7EFE0" stroke-width="6"/>
<circle cx="100" cy="238" r="9" fill="#F7EFE0"/>
<circle cx="300" cy="238" r="26" fill="#1A120C" stroke="#F7EFE0" stroke-width="6"/>
<circle cx="300" cy="238" r="9" fill="#F7EFE0"/>
<g opacity=".85">
<rect x="36" y="272" width="26" height="44" rx="6" fill="#2E9E5B"/><rect x="70" y="284" width="22" height="32" rx="6" fill="#FFC531"/>
<rect x="310" y="270" width="30" height="46" rx="6" fill="#F7EFE0"/><rect x="348" y="286" width="20" height="30" rx="6" fill="#E4342B"/>
</g>
</svg>
</div>
<div class="reveal">
<div class="eyebrow">Our Story</div>
<h2>One truck. Two food cultures. Zero regrets.</h2>
<p>Kimchi Loco started in 2019 when our founder, Min-jun, was homesick for his mother's kimchi and couldn't find it on any taco truck in the city. So he bought a food truck, learned to make tortillas, and started folding Seoul into San Antonio.</p>
<p>Five years later we're still at the same window, still pressing corn tortillas every morning, and still making the same three sauces his mother taught him — plus nine more he refuses to write down.</p>
<div class="stats">
<div class="stat"><b>4.9★</b><span>2,300+ reviews</span></div>
<div class="stat"><b>300k</b><span>tacos served</span></div>
<div class="stat"><b>60s</b><span>average wait</span></div>
</div>
</div>
</div>
</section>
<!-- REVIEWS -->
<section class="sec reviews">
<div class="wrap">
<div class="review reveal" id="reviewBox">
<div class="stars">★★★★★</div>
<blockquote id="reviewQuote">“I came for the tacos and stayed for the kimchi. This is the best $4 I've spent all year.”</blockquote>
<cite id="reviewWho">— Dani R., Google review</cite>
<div class="dots" id="dots"></div>
</div>
</div>
</section>
<!-- VISIT -->
<section class="sec" id="visit">
<div class="wrap visit">
<div class="panel reveal">
<div id="statusPill" class="status-open"><span class="dot-live"></span> Open now</div>
<h3>Find the truck</h3>
<p style="color:var(--ink-soft);font-size:14.5px;margin-bottom:18px">
<b>1120 Market Street, under the big green awning</b><br>
Downtown, next to the old record store. Look for the yellow lights & smell the gochujang.
</p>
<div class="hours-row"><span>Monday</span><b>Closed</b></div>
<div class="hours-row"><span>Tuesday</span><b>Closed</b></div>
<div class="hours-row"><span>Wednesday</span><b>11:30am – 9:00pm</b></div>
<div class="hours-row"><span>Thursday</span><b>11:30am – 10:00pm</b></div>
<div class="hours-row"><span>Friday</span><b>11:30am – 11:00pm</b></div>
<div class="hours-row"><span>Saturday</span><b>12:00pm – 11:00pm</b></div>
<div class="hours-row"><span>Sunday</span><b>12:00pm – 8:00pm</b></div>
<div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:22px">
<a class="btn red" href="https://maps.google.com/?q=1120+Market+Street" target="_blank" rel="noopener">Get directions</a>
<a class="btn" href="tel:+12105550142">Call the truck</a>
</div>
</div>
<div class="map reveal">
<svg viewBox="0 0 600 460">
<rect width="600" height="460" fill="#EFE3D0"/>
<g stroke="#DCCFB8" stroke-width="26">
<path d="M0 120 H600"/><path d="M0 300 H600"/><path d="M160 0 V460"/><path d="M420 0 V460"/>
</g>
<g stroke="#CFC0A5" stroke-width="4" stroke-dasharray="14 12">
<path d="M0 120 H600"/><path d="M0 300 H600"/><path d="M160 0 V460"/><path d="M420 0 V460"/>
</g>
<rect x="0" y="330" width="600" height="60" fill="#CFE3C9"/>
<text x="20" y="368" font-family="Arial Black, sans-serif" font-size="15" fill="#5C8A55">RIVERWALK PARK</text>
<g fill="#DCCFB8">
<rect x="190" y="150" width="70" height="110" rx="6"/><rect x="440" y="40" width="120" height="60" rx="6"/>
<rect x="200" y="330" width="60" height="90" rx="6"/><rect x="450" y="330" width="110" height="90" rx="6"/>
<rect x="20" y="150" width="110" height="90" rx="6"/>
</g>
<text x="205" y="210" font-family="Arial Black, sans-serif" font-size="13" fill="#8C7C68">RECORD</text>
<text x="455" y="75" font-family="Arial Black, sans-serif" font-size="13" fill="#8C7C68">MARKET HALL</text>
<!-- truck marker -->
<g transform="translate(280,175)">
<circle r="42" fill="#E4342B" opacity=".18"/>
<path d="M-26 -14 h34 l16 18 v20 h-50 z" fill="#FFF6E9" stroke="#1A120C" stroke-width="4"/>
<circle cx="-16" cy="28" r="8" fill="#1A120C"/><circle cx="14" cy="28" r="8" fill="#1A120C"/>
<circle r="58" fill="none" stroke="#E4342B" stroke-width="4" stroke-dasharray="10 12"/>
</g>
<g transform="translate(300,150)">
<rect x="-14" y="-62" width="200" height="40" rx="12" fill="#FFC531" stroke="#1A120C" stroke-width="4"/>
<text x="86" y="-36" text-anchor="middle" font-family="Arial Black, sans-serif" font-size="19" fill="#1A120C">KIMCHI LOCO</text>
</g>
</svg>
<div class="map-badge"><b>1120 Market St</b><span>Look for the yellow lights 🔦</span></div>
</div>
</div>
</section>
<!-- SIGNUP -->
<section class="signup" id="signup">
<div class="wrap reveal">
<h2>Join the <span>Kimchi Club</span></h2>
<p>Secret menu drops, $1 off your first order, and a text when the truck pulls up to your neighborhood. No spam, just tacos.</p>
<form class="signup-form" id="signupForm">
<input type="email" id="email" placeholder="your@email.com" required>
<button class="btn yellow" type="submit">Get $1 off</button>
</form>
<div class="signup-note" id="signupNote"></div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="wrap">
<div class="foot-grid">
<div>
<div class="foot-logo">
<div class="logo-mark"><svg viewBox="0 0 240 210"><use href="#ico-taco"/></svg></div>
<div><b style="color:var(--cream);font-family:'Arial Black',sans-serif;font-size:18px">KIMCHI LOCO</b><small style="color:var(--red);letter-spacing:.26em;font-weight:800">KOREAN · MEXICAN</small></div>
</div>
<p style="font-size:14px;max-width:34ch">Korean-Mexican street food on wheels. Fermented with love, griddled with attitude, served with zero patience.</p>
<div class="socials" style="margin-top:16px">
<a href="#" aria-label="Instagram">IG</a><a href="#" aria-label="TikTok">TT</a><a href="#" aria-label="X">X</a>
</div>
</div>
<div>
<h4>Menu</h4>
<a href="#menu">Tacos</a><a href="#menu">Burritos</a><a href="#menu">Bowls</a><a href="#menu">Sides</a><a href="#menu">Drinks</a>
</div>
<div>
<h4>Visit</h4>
<a href="#visit">Hours & location</a><a href="#drop">Friday drop</a><a href="#story">Our story</a><a href="#signup">Catering</a>
</div>
<div>
<h4>Contact</h4>
<a href="tel:+12105550142">(210) 555-0142</a>
<a href="mailto:hey@kimchiloco.com">hey@kimchiloco.com</a>
<a href="#visit">1120 Market Street</a>
<a href="#visit">Catering & events</a>
</div>
</div>
<div class="foot-bottom">
<span>© 2024 Kimchi Loco Food Truck. All tacos reserved.</span>
<span>Made with 🔥 & fermented cabbage.</span>
</div>
</div>
</footer>
<!-- CART -->
<div class="overlay" id="overlay"></div>
<aside class="drawer" id="drawer" aria-label="Your order">
<div class="drawer-head">
<h3>Your order</h3>
<button class="x" id="closeCart" aria-label="Close">✕</button>
</div>
<div class="drawer-body" id="drawerBody"></div>
<div class="drawer-foot">
<div class="total-row"><span>Total</span><span id="drawerTotal">$0.00</span></div>
<button class="btn red" style="width:100%" id="checkoutBtn">Send my order</button>
<div class="drawer-note" id="drawerNote">Pickup at the window · ready in ~4 min</div>
</div>
</aside>
<script>
/* ---------- MENU DATA ---------- */
const CATS = {
tacos:{label:'Tacos',icon:'ico-taco',bg:'#FFE2C4',colors:'--c-shell:#F0B04A;--c-shell2:#DC9132;--c-lettuce:#8ACB49;--c-meat:#7C3A1D;--c-kimchi:#E23B2E;--c-kimchi2:#FF6A57;--c-cheese:#FFD23F;--c-herb:#2E9E5B;--c-cream:#FFF6DF'},
burritos:{label:'Burritos',icon:'ico-wrap',bg:'#DFF0D6',colors:''},
bowls:{label:'Bowls',icon:'ico-bowl',bg:'#FFE9C9',colors:''},
sides:{label:'Sides',icon:'ico-side',bg:'#FDE0DD',colors:''},
drinks:{label:'Drinks',icon:'ico-cup',bg:'#DCEBF7',colors:''}
};
const ITEMS = [
{n:'Bulgogi Taco',c:'tacos',p:4.25,d:'Sweet-soy charred beef, kimchi slaw, gochujang crema, cilantro.',t:['Best Seller','Spicy 2'],r:'bestseller'},
{n:'Kimchi Carnitas Taco',c:'tacos',p:4.5,d:'Slow-cooked pork shoulder, house kimchi, pickled onion, lime.',t:['Spicy 3'],r:'bestseller'},
{n:'Hot Chicken Taco',c:'tacos',p:4.75,d:'Twice-fried crispy thigh, kimchi aioli, sesame slaw.',t:['Spicy 3','Hot'],r:'bestseller'},
{n:'Short Rib Taco',c:'tacos',p:5.25,d:'14-hour braised short rib, kimchi jus, pickled radish.',t:['Spicy 1'],r:'bestseller'},
{n:'Tofu Kimchi Taco',c:'tacos',p:4.0,d:'Crispy tofu, kimchi, sesame slaw, vegan crema.',t:['Vegan','GF'],r:'bestseller'},
{n:'Korean Corn & Kimchi Taco',c:'tacos',p:4.25,d:'Butter corn, kimchi, cotija, lime — the sweet one.',t:['Veg'],r:'bestseller'},
{n:'Kimchi Loco Burrito',c:'burritos',p:9.5,d:'Bulgogi, rice, kimchi, slaw, crema, wrapped tight.',t:['Best Seller'],r:'bestseller'},
{n:'Seoul Surreal Burrito',c:'burritos',p:10.75,d:'Short rib, kimchi jam, smoked egg, shrimp chips. Fridays only.',t:['Limited'],r:'bestseller'},
{n:'Seoul Dog',c:'burritos',p:9.0,d:'Korean sausage, kimchi, cheese, gochujang. Served with rice.',t:['Spicy 2'],r:'bestseller'},
{n:'Bulgogi Bowl',c:'bowls',p:11.0,d:'Griddled beef over rice, kimchi slaw, pickled veg, egg.',t:['Best Seller'],r:'bestseller'},
{n:'Bibimbap Bowl',c:'bowls',p:10.5,d:'Rice, house kimchi, marinated veg, bulgogi, gochujang.',t:['GF'],r:'bestseller'},
{n:'Tofu Crunch Bowl',c:'bowls',p:10.0,d:'Crispy tofu, avocado, kimchi, sesame dressing.',t:['Vegan'],r:'bestseller'},
{n:'Kimchi Cheese Corn',c:'sides',p:4.0,d:'Charred corn, kimchi butter, melted cheese, scallion.',t:['Veg'],r:'bestseller'},
{n:'Gochujang Tots',c:'sides',p:5.0,d:'Crispy tatters, gochujang aioli, kimchi dust.',t:['Spicy 2'],r:'bestseller'},
{n:'Mandu Chips',c:'sides',p:4.5,d:'Korean dumplings, smashed flat, fried, sesame salt.',t:['Veg'],r:'bestseller'},
{n:'Yuzu Lemonade',c:'drinks',p:3.0,d:'Yuzu, lemon, mint, sparkling water.',t:['Caffeine-free'],r:'bestseller'},
{n:'Bingsu Shake',c:'drinks',p:5.5,d:'Milk shaved ice, strawberry, condensed milk.',t:['New'],r:'bestseller'},
{n:'Korean Soda',c:'drinks',p:2.75,d:'Mango or grape, marble-cold, super fizzy.',t:['Vegan'],r:'bestseller'},
{n:'Matcha Lychee',c:'drinks',p:4.0,d:'Ceremonial matcha, lychee, oat milk.',t:['New'],r:'bestseller'}
];
const grid = document.getElementById('menuGrid');
function renderMenu(cat){
grid.innerHTML='';
ITEMS.filter(i=>cat==='all'||i.c===cat).forEach(i=>{
const meta = CATS[i.c];
const tags = i.t.map(t=>{
let cls='tag';
if(/spicy|hot/i.test(t)) cls+=' spicy';
else if(/vegan|veg/i.test(t)) cls+=' veg';
return `<span class="${cls}">${t}</span>`;
}).join('');
const el = document.createElement('div');
el.className='card';
el.innerHTML=`
<div class="card-top" style="background:${meta.bg}">
${tags}
<svg viewBox="${meta.icon==='ico-taco'?'0 0 240 210':'0 0 140 120'}" style="${meta.colors}"><use href="#${meta.icon}"/></svg>
</div>
<div class="card-body">
<h3>${i.n}</h3>
<p>${i.d}</p>
<div class="card-foot">
<span class="price">$${i.p.toFixed(2)}</span>
<button class="add" data-add="${i.n}">+ Add</button>
</div>
</div>`;
grid.appendChild(el);
});
}
renderMenu('all');
document.getElementById('filters').addEventListener('click',e=>{
const b=e.target.closest('.filter'); if(!b) return;
document.querySelectorAll('.filter').forEach(f=>f.classList.remove('active'));
b.classList.add('active'); renderMenu(b.dataset.cat);
});
/* ---------- CART ---------- */
const cart={};
function addToCart(name){
const it=ITEMS.find(i=>i.n===name); if(!it) return;
cart[name]=cart[name]||{item:it,q:0}; cart[name].q++;
updateCart(); openDrawer();
}
document.addEventListener('click',e=>{
const b=e.target.closest('[data-add]'); if(!b) return;
addToCart(b.dataset.add);
});
function cartCount(){return Object.values(cart).reduce((s,x)=>s+x.q,0);}
function cartTotal(){return Object.values(cart).reduce((s,x)=>s+x.q*x.item.p,0);}
function updateCart(){
document.getElementById('cartCount').textContent=cartCount();
const body=document.getElementById('drawerBody');
const keys=Object.keys(cart);
if(!keys.length){ body.innerHTML='<div class="empty">Your order is empty.<br>Add a taco and we\'ll get cooking 🌮</div>'; }
else{
body.innerHTML=keys.map(k=>{
const c=cart[k];
return `<div class="citem">
<div><b>${k}</b><span>$${c.item.p.toFixed(2)} each</span></div>
<div class="qty"><button data-dec="${k}">−</button><b>${c.q}</b><button data-inc="${k}">+</button></div>
</div>`;
}).join('');
}
document.getElementById('drawerTotal').textContent='$'+cartTotal().toFixed(2);
}
document.getElementById('drawerBody').addEventListener('click',e=>{
const inc=e.target.closest('[data-inc]'), dec=e.target.closest('[data-dec]');
if(inc){ cart[inc.dataset.inc].q++; updateCart(); }
if(dec){ const k=dec.dataset.dec; cart[k].q--; if(cart[k].q<=0) delete cart[k]; updateCart(); }
});
updateCart();
/* drawer open/close */
const drawer=document.getElementById('drawer'), overlay=document.getElementById('overlay');
function openDrawer(){drawer.classList.add('open');overlay.classList.add('show');}
function closeDrawer(){drawer.classList.remove('open');overlay.classList.remove('show');}
document.getElementById('openCart').addEventListener('click',openDrawer);
document.getElementById('closeCart').addEventListener('click',closeDrawer);
overlay.addEventListener('click',closeDrawer);
document.addEventListener('keydown',e=>{if(e.key==='Escape')closeDrawer();});
document.getElementById('checkoutBtn').addEventListener('click',()=>{
const n=document.getElementById('drawerNote');
if(!cartCount()){ n.textContent='Add something first — the griddle is waiting!'; n.style.color='#E4342B'; return; }
n.textContent='🎉 Order sent! We\'ll text you when it\'s ready at the window.';
n.style.color='#2E9E5B';
setTimeout(()=>{ cart && Object.keys(cart).forEach(k=>delete cart[k]); updateCart(); }, 1400);
});
/* ---------- SPICE METER ---------- */
const heatCopy=[
'Mild and buttery — a friendly hello for first-timers.',
'Our classic gochujang heat — big flavor, friendly pain.',
'BEWARE: fermented habanero kimchi. Sign the waiver. 🔥'
];
document.querySelectorAll('.spice-btn').forEach(b=>{
b.addEventListener('click',()=>{
document.querySelectorAll('.spice-btn').forEach(x=>x.classList.remove('active'));
b.classList.add('active');
const h=+b.dataset.heat;
document.getElementById('spiceNote').textContent=heatCopy[h];
const t=document.getElementById('heroTaco');
const kimchi = h===0?'#F0A02A':(h===1?'#E23B2E':'#C4100A');
const kimchi2 = h===0?'#FFC86B':(h===1?'#FF6A57':'#FF2B18');
t.style.setProperty('--c-kimchi',kimchi);
t.style.setProperty('--c-kimchi2',kimchi2);
t.style.filter='drop-shadow(0 26px 30px rgba(0,0,0,.45))'+(h===2?' drop-shadow(0 0 22px rgba(255,60,0,.75))':'');
});
});
/* ---------- COUNTDOWN (next Friday 8pm) ---------- */
function nextFriday(){
const now=new Date(); const d=new Date(now);
const day=now.getDay(); // 5 = Friday
let add=(5-day+7)%7;
d.setDate(now.getDate()+add); d.setHours(20,0,0,0);
if(d<=now) d.setDate(d.getDate()+7);
return d;
}
const target=nextFriday();
function tick(){
const diff=Math.max(0,target-new Date());
const s=Math.floor(diff/1000);
document.getElementById('cdD').textContent=String(Math.floor(s/86400)).padStart(2,'0');
document.getElementById('cdH').textContent=String(Math.floor(s/3600)%24).padStart(2,'0');
document.getElementById('cdM').textContent=String(Math.floor(s/60)%60).padStart(2,'0');
document.getElementById('cdS').textContent=String(s%60).padStart(2,'0');
}
tick(); setInterval(tick,1000);
/* ---------- OPEN STATUS ---------- */
(function(){
const now=new Date(); const h=now.getHours()+now.getMinutes()/60; const day=now.getDay();
let open=false, label='';
if(day===3) open = h>=11.5 && h<21, label='Wednesday hours · 11:30am – 9:00pm';
else if(day===4) open = h>=11.5 && h<22, label='Thursday hours · 11:30am – 10:00pm';
else if(day===5) open = h>=11.5 && h<23, label='Friday hours · 11:30am – 11:00pm';
else if(day===6) open = h>=12 && h<23, label='Saturday hours · 12:00pm – 11:00pm';
else if(day===0) open = h>=12 && h<20, label='Sunday hours · 12:00pm – 8:00pm';
const pill=document.getElementById('statusPill');
if(!open){ pill.className='status-open status-closed'; pill.innerHTML='Closed right now · '+(day===1||day===2?'back Wednesday':'check hours'); }
else{ pill.innerHTML='<span class="dot-live"></span> Open now · '+label; }
})();
/* ---------- REVIEWS ROTATOR ---------- */
const reviews=[
{q:"“I came for the tacos and stayed for the kimchi. This is the best $4 I've spent all year.”",w:"— Dani R., Google review"},
{q:"“The bulgogi taco has a crunch, a chew and then a slow burn. I'm ordering three next time.”",w:"— Marcus T., regular since 2021"},
{q:"“We cater our whole office from this truck. Kimchi Loco is the only reason Fridays feel productive.”",w:"— Priya S., office manager"},
{q:"“Crispy, hot, messy, worth every napkin. The Hot Chicken Taco changed my life.”",w:"— Ana G., food blogger"}
];
let ri=0; const qEl=document.getElementById('reviewQuote'), wEl=document.getElementById('reviewWho'), dots=document.getElementById('dots');
reviews.forEach((_,i)=>{const b=document.createElement('button'); b.setAttribute('aria-label','Review '+(i+1)); if(i===0)b.classList.add('active'); b.addEventListener('click',()=>go(i)); dots.appendChild(b);});
function go(i){
ri=i; qEl.style.opacity=0; wEl.style.opacity=0;
setTimeout(()=>{
qEl.textContent=reviews[i].q; wEl.textContent=reviews[i].w;
qEl.style.opacity=1; wEl.style.opacity=1;
dots.querySelectorAll('button').forEach((b,k)=>b.classList.toggle('active',k===i));
},220);
}
qEl.style.transition='opacity .3s'; wEl.style.transition='opacity .3s';
setInterval(()=>go((ri+1)%reviews.length),5200);
/* ---------- MOBILE NAV ---------- */
document.getElementById('burger').addEventListener('click',()=>{
document.getElementById('mobileNav').classList.toggle('open');
});
document.getElementById('mobileNav').addEventListener('click',e=>{
if(e.target.tagName==='A') document.getElementById('mobileNav').classList.remove('open');
});
/* ---------- SIGNUP ---------- */
document.getElementById('signupForm').addEventListener('submit',e=>{
e.preventDefault();
const v=document.getElementById('email').value.trim();
const n=document.getElementById('signupNote');
if(/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(v)){ n.textContent='🎉 You\'re in! Code KIMCHI1 is on its way to '+v; }
else { n.textContent='Hmm, that email looks a little wonky — try again?'; }
});
/* ---------- REVEAL ---------- */
const io=new IntersectionObserver(es=>{
es.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target);} });
},{threshold:.14});
document.querySelectorAll('.reveal').forEach((el,i)=>{el.style.transitionDelay=(i%4*60)+'ms';io.observe(el);});
</script>
</body>
</html>Reasoning trace (7,069 tokens)
Let me build a compelling single-page site for "Kimchi Loco" — Korean taco food truck. Needs to be visually striking, appetizing, with food photography... but no external images allowed except CDN URLs explicitly allowed by the task. The task doesn't specify allowed CDNs. So I should create everything with CSS/SVG — illustrated food, gradients, etc. I can use inline SVG illustrations of tacos.
Let me design:
- Sticky nav with logo (inline SVG), menu links, order button, phone.
- Hero: big bold typography, animated steam, illustrated taco with layers, "Open now" badge, location, hours.
- Marquee ticker of Korean-Mexican phrases.
- Menu section with cards, prices, tags (Spicy, Best seller, Vegan), CSS illustrated tacos.
- "Why Kimchi Loco" features.
- Hours/location section with map-ish graphic.
- Reviews / social proof.
- Big CTA + footer.
Add a little interactivity: hover effects, scroll reveal, cart/order drawer maybe. Keep it self-contained.
Let me make CSS illustrations of tacos: a shell shape (rounded half-circle), lettuce (wavy green), meat (brown chunks), kimchi (red), cheese shreds (yellow zigzag). Use SVG for the taco hero.
I'll write careful SVG taco illustration.
Hero taco SVG: shell as path — a semicircle-ish U shape rotated. Let's do: shell = path M20,120 A 90,90 0 0 0 200,120 L... hmm. Easier: draw taco side view: shell is a half-ellipse opening upward. Path: "M 30 120 Q 30 30 115 30 Q 200 30 200 120 Z" filled with gradient tan, then filling ingredients on top between the two rim edges.
Actually classic taco side view: shell is a U shape (like a bowl tilted), i.e. filled shell curve. Let's do simpler: a "folded" taco viewed from side: an arc band.
I'll do: outer shape path M 25 115 A 95 95 0 0 1 205 115 L 205 130 A 95 95 0 0 0 25 130 Z — that's a band (the shell shell). Fill gradient yellow-tan. Then ingredients sitting in the top curve: rounded rects/bubbles in red (kimchi), green (scallion/avocado), brown (meat), plus zigzag cheese.
Let me place ingredients along the arc from x=45..185 at y around 70-110.
Alternatively, simpler and cleaner: top-down / stacked burger style? Hmm, a taco stack: tortilla circle with layers. Might look nicer to do "taco" as a circle tortilla viewed from above with filling mounds — but top-down looks like a flat blob.
I'll go with the band + filling approach and test mentally.
Band path: arc from (25,115) to (205,115) sweeping upward (sweep 1 means clockwise?). In SVG, A rx ry rot large-arc sweep x y. From (25,115) to (205,115), sweep=1 goes clockwise which for left-to-right would bulge downward. Let's think: clockwise from left point to right point: left point at angle 180°, going clockwise means increasing angle in screen coords (y down) ... In screen coords with y down, clockwise visually = from 9 o'clock to 12 o'clock to 3 o'clock. That's sweep=1? SVG sweep-flag=1 means the arc is drawn in a "positive-angle" direction which in SVG's coordinate system (y down) appears clockwise. Yes: sweep=1 → clockwise on screen. So from left (25,115) clockwise up over the top to right (205,115) → bulge upward.
So band: M 25 115 A 90 90 0 0 1 205 115 (outer, radius 90: chord 180 = diameter so exactly semicircle, top at y=115-90=25). Then inner arc back: L 205 130 A 90 90 0 0 0 25 130 Z — inner semicircle with radius 90 chord 180 at y=130, top at 40. Hmm that makes band thickness vary. Better: inner arc radius 74 from (205,130) to (25,130) sweep 0 (counterclockwise, bulging up) top at 130-74=56. So band thickness: at center outer top y=25, inner top y=56 → 31px thick. At edges outer ends y=115, inner ends y=130 → 15 thick. Fine, looks like a taco shell band.
Hmm, actually a taco shell is more like a curved V/wedge. The band is fine and recognizable.
Fill ingredients: place along the arc inside the band top region. Ingredients mounds above the band, e.g. at various positions between x=55 and x=175, at y = outer arc top minus a bit. Outer arc: center (115,115), r=90. At x=115 top y=25. At x=60: dx=-55, y=115-sqrt(8100-3025)=115-71.2=43.8.
Ingredients sit in the hollow above the inner arc but below? Actually filling should poke out above the shell's top edge. Let's draw filling mounds on top of the band along the top, i.e. overlapping, with colors. Put ellipses/circles:
- Brown meat chunks: rounded rects.
- Red kimchi: wavy shape.
- Green: scallion circles, cilantro leaves.
- Yellow cheese shreds: zigzag lines.
Order: draw filling first (behind band? no, filling in front bottom) — typical illustration: shell band drawn, then filling drawn above the top edge overlapping.
I'll layer: shadows, filling mounds (bigger blobs extending above the arc), then the band on top? If band on top it covers bottom half of filling mounds, giving nice "in the shell" look. But the band's top edge is the outer arc, filling should be visible above the outer arc. If band drawn last, it covers filling that extends below outer arc line — but the band's region is between outer and inner arcs, so filling below outer arc but above inner arc is covered — but that region is inside the shell band, which is drawn over. Hmm, the filling should fill the cavity between inner arc and the top of the outer arc? Actually the cavity of a taco is the region between the two arcs (the "inside" of the folded shell). Wait no. The taco shell side view: it's a folded tortilla, so we see the outside of the fold — a U shape...
I'm overthinking. Let's do a different, very legible approach: a **stacked taco** — three tacos stacked? Or the classic "taco viewed from front with fillings spilling over the top": draw the shell as a U (bowl) shape: path M 40 60 Q 40 150 115 150 Q 190 150 190 60 Z with a flat top open, then fillings heaped above y=60 spilling over the rim. That reads as a taco/bowl. Honestly many flat-design taco illustrations look like a half-circle shell with lettuce/meat poking above.
Final: shell = filled semicircle (half disc) with flat side up: path M 25 115 A 90 90 0 0 1 205 115 Z — that's the half-disc bulging downward (since sweep 1 clockwise from left to right goes over the top... wait we determined sweep 1 goes over the top). Let me recompute: for a half-disc bulging DOWN, use sweep=0. So M 25 115 A 90 90 0 0 0 205 115 Z → bulge down, flat top at y=115, bottom at 205. Then fillings heaped on the flat top at y=115 and above. That's a "taco as a bowl" look — recognizable as a taco/wrap.
Hmm, but flat top with half-disc bottom = a bowl of filling. Add the band? I think half-disc + heaped filling = looks like a taco seen from the side (the shell curving down, filling on top). Yes! That's exactly how flat-design tacos look: semicircle shell with filling piled on top edge. Good.
So: shell half-disc with rounded texture spots, filling blobs sitting along the top edge (y ~ 60-115), spilling slightly over both sides.
Let me define ingredient blobs as a group positioned near top edge spanning x 30..200, y 55..115.
Colors:
- Shell: #F2B950 → #E29A3B gradient, with darker spots #D98C2E.
- Meat (bulgogi): #7A3E1D / #8B4A22 with highlights.
- Kimchi: #E03A2F / #FF5A4E with lighter streaks.
- Lettuce/slaw: #7BC043 / #A5D96A.
- Cheese: #FFD84D.
- Cream/guac: #FFE9B0.
- Scallion: #2FA84F.
Also could add small emoji? No, better to avoid emoji rendering issues — emoji are fine in Chrome but let's use SVG for hero, emoji sparingly for menu card icons (they render fine on most systems, but sandbox Chrome on Linux may lack color emoji → tofu boxes). Safer: use inline SVG shapes for card icons too. That's more work but safer. I'll use small SVG taco icons per card, or simple color-dot tags. Let me make a reusable SVG "taco icon" via <symbol>/<use> with different fill via CSS variables. Use <use> with CSS custom props for filling colors — works.
Plan: define an SVG sprite at top with <symbol id="taco"> containing shell path using fill="var(--shell)" etc. Then each card uses <svg><use href="#taco"/></svg> with CSS vars set on the svg element. CSS vars inherit into shadow DOM of use — yes, works in Chrome.
Marquee: CSS animation translating a row, duplicated content.
Interactions:
- Sticky header with blur.
- Scroll reveal via IntersectionObserver.
- Order CTA opens a modal/drawer? Could do a simple "order" panel with quantity and total — adds interactivity. Let's do a slide-in cart drawer where clicking "Add" on menu items adds items, showing count badge in nav. No storage needed.
- Mobile nav: hamburger toggling a menu.
- A "spice meter" interactive? Maybe a spice level selector in hero that changes the taco illustration's heat (adds flame). Nice touch.
Also a live "hours" indicator showing "Open now — closes 10 PM" computed from current time. Good local relevance.
Let's write the code.
Sections:
1. Top bar: "🚚 Now rolling in Downtown • Order ahead" marquee ticker.
2. Header nav: logo "KIMCHI LOCO" with taco icon, links Menu, Our Story, Visit Us, phone, "Order Now" button.
3. Hero: left text (KOREAN-MEXICAN STREET FOOD), h1 "Tacos with a little bit of Seoul.", sub, CTAs, badges (gluten-free shells, halal?, veg options), right: big taco illustration with steam animation + floating ingredient bubbles + price tag "$4.50".
4. Marquee.
5. Menu: tabs (Tacos / Burritos / Bowls / Sides / Drinks) with filter; cards with price, tags, "Add" button.
6. Why us: 4 feature cards (Wood-fired griddle, Kimchi-fermented in-house, Bapsang craft tortillas, Secret gochujang sauce).
7. Big combo banner: "The Seoul Surreal" limited drop with countdown timer (JS, live).
8. Story section: numbers (4.9★ 2,300 reviews, 12 sauces, 1 truck), text, customer love quotes carousel (auto-rotating).
9. Visit us: location, hours table, map illustration (SVG streets), "Get directions" button (no window.open! use a link href to maps - that's fine, it's a link not window.open; but in sandbox clicking may navigate iframe. I'll use <a target="_blank"> which is fine).
10. Newsletter/signup form (email input, submit shows success message inline — no alert).
11. Footer.
Cart drawer with subtotal, "Checkout" showing a message.
That's a lot but let's write it efficiently.
Let me write the HTML.
CSS: use a dark theme? Korean-Mexican street food — vibrant. Let's do: background cream (#FFF8ED) with deep charcoal text and hot red/green accents. Hero with deep red-orange gradient? Maybe hero dark charcoal with neon? I'll do: body cream, hero a deep "gochujang red" gradient panel with cream text and a glowing taco. Sticky header cream translucent.
Fonts: no external fonts allowed (CDN not specified) → use system stack. But display font matters a lot. Allowed CDN? Task doesn't say. I'll avoid network. Use system fonts: 'Arial Black', Impact for display; and system sans for body. Use bold uppercase with tight letter-spacing and skew for street-food energy. Actually a Google Font via CDN would be nice but "except the CDN URLs explicitly allowed by the task" — none allowed. So system fonts only. Use font-family: "Arial Black", "Helvetica Neue", sans-serif for headings with font-weight 900.
Hmm, on Linux sandbox, Arial Black may not exist → falls back to Helvetica/sans-serif bold. Fine, still bold. To get more character, use uppercase + letter-spacing + slight rotation, plus stroke text effects (text-shadow layers) for the logo.
I'll add a "text-stroke" effect using -webkit-text-stroke for hero h1 with fill cream and stroke dark? Could look like street food signage. Maybe h1 solid cream with a red shadow offset (like a printed poster). Good.
Let me write it.
Cart logic: items array in memory, render list, total. Buttons with data-id.
Countdown: next Friday? Simpler: countdown to end of day or to a fixed weekly drop — do countdown to the next Friday 8PM from now, computed in JS. Label "Next Seoul Surreal drop".
Let's code.
Detailed CSS variables:
--cream:#FFF6E9; --ink:#1B1512; --red:#E4342B; --red-dark:#B32118; --green:#2E9E5B; --yellow:#FFC531; --orange:#F77B00.
Hero background: radial gradients + dark charcoal #20140F? Let's make hero a rich dark maroon-black with a subtle pattern of repeating taco icons (SVG data URI background). Use CSS repeating-linear-gradient for stripes.
Marquee: background yellow, black text, skewed.
Menu cards: white cards, rounded 20px, border 2px solid ink? Street food menu boards often look like chalkboard or bright. I'll do white cards with 2px ink border and a hard shadow (4px 4px 0 ink) — sticker style. Nice and bold.
Let's write the whole file now.
SVG taco symbol:
<symbol id="taco" viewBox="0 0 240 200">
<path d="M25 110 A95 95 0 0 0 215 110 Z" fill="url(#shellGrad)"/> -- bulge down? sweep 0 from left to right: counterclockwise → bulges downward? Let's verify: sweep=0 means negative angle direction = counterclockwise on screen. From (25,110) to (215,110) counterclockwise: start at 9 o'clock going counterclockwise → 6 o'clock → 3 o'clock, which bulges downward. Yes sweep=0 bulges down. Good, that's the bowl/taco shape with flat top at y=110 and bottom at 110+95=205. But viewBox height 200 clips. Set viewBox "0 0 240 220" or reduce radius. Use A 90 90 → bottom 200. viewBox 0 0 240 210.
Shell path: M30 105 A90 90 0 0 0 210 105 Z → bottom at 195. Fine with viewBox height 210.
Add shell texture: a few small darker ellipses.
Fillings above the top edge, centered around y 60-110, spanning x 45..195:
- lettuce: a wavy blob path.
- cheese shreds: zigzag polylines.
- meat chunks: rounded rects rotated.
- kimchi: red wavy shapes.
I'll craft approximate paths.
Lettuce blob: "M40 105 q10 -35 28 -20 q12 -30 30 -12 q16 -28 34 -6 q18 -22 34 4 q16 -18 32 10 q10 18 12 24 z" — rough. Let's simplify: use a series of overlapping circles (green) along a curve to form a leafy mound: circles at (65,88) r18, (95,75) r20, (128,72) r20, (160,80) r18, (185,92) r14 with fill green and slight stroke. Overlapping circles read as a mound. Then put kimchi red blobs and meat on top.
That could look decent. Plus cheese zigzag lines on top (yellow polylines) and small white sesame dots.
Order of drawing: lettuce (back), then meat chunks, then kimchi, then cheese shreds, then shell on top? Shell flat top at y=105; ingredients sitting above y=105 would float above the shell rim, good — but their bottoms should overlap the rim slightly (y up to 115) so they look seated. Shell drawn after would cover overlapping parts → good: draw ingredients first, then shell (shell covers bottom of ingredients). But the shell bulge goes downward, top edge flat at 105, so it covers ingredient pixels below 105 — exactly what we want.
But shell drawn last also covers the "inside" region of the mound below 105, fine.
Then add slight drop shadow.
For card icons, I'll make a smaller simplified taco symbol using same structure but different colors via CSS vars: --c-lettuce, --c-meat, --c-kimchi, --c-cheese, --c-shell. Use CSS `fill: var(--c-lettuce, #7BC043)` inside symbol — CSS vars in a symbol used via <use>: inheritance works through use shadow tree. Yes.
But gradients with var? Just use flat fills for the symbol and gradients for hero. Simpler: use the same symbol for both, with var colors, and set colors on the hero svg to get richer palette. Fine — flat fills with darker overlay paths for depth.
Let me define symbol with classes:
.shell{fill:var(--c-shell,#F0B04A)} .shell2{fill:var(--c-shell2,#DE9433)}
.lettuce{fill:var(--c-lettuce,#79BE3F)}
.meat{fill:var(--c-meat,#7C3A1D)}
.kimchi{fill:var(--c-kimchi,#E23B2E)}
.cheese{fill:var(--c-cheese,#FFD23F)}
.herb{fill:var(--c-herb,#2E9E5B)}
.cream{fill:var(--c-cream,#FFF3CF)}
Symbol content (viewBox 0 0 240 210):
- lettuce mound: path using arcs. I'll use path "M45 108 C45 78 70 66 88 76 C100 56 130 54 142 74 C160 62 186 76 190 100 C192 112 186 118 178 118 L52 118 Z" fill lettuce. Rough but okay.
Simpler robust: use a path made of quadratic bumps:
"M42 112 q2 -34 26 -30 q6 -30 30 -22 q14 -26 34 -12 q18 -22 34 2 q20 -12 30 14 q6 26 -4 40 z" — hmm, hard to guarantee.
I'll do overlapping ellipses approach, guaranteed fine:
<g class="lettuce">
<ellipse cx="70" cy="95" rx="26" ry="20"/>
<ellipse cx="102" cy="82" rx="28" ry="24"/>
<ellipse cx="138" cy="82" rx="28" ry="24"/>
<ellipse cx="168" cy="96" rx="24" ry="20"/>
</g>
Then meat chunks on top (brown rounded rects) at (80,70),(115,62),(150,70),(178,88).
Kimchi red wavy: path "M60 60 q14 -12 26 2 q10 12 -6 16 q-20 6 -24 -6 z" etc. Simpler: use rounded blobs via path with quadratic curves; or use red ellipses with a lighter red "streak" line. I'll do red blob paths:
kimchi1: "M56 66 c6 -14 26 -16 32 -2 c4 10 -6 18 -18 16 c-12 -2 -18 -6 -14 -14 z"
kimchi2: "M120 50 c10 -14 30 -12 34 4 c3 12 -10 18 -22 14 c-12 -4 -18 -10 -12 -18 z"
Plus red slivers.
Cheese: polylines zigzag: "M40 100 l14 -6 l12 8 l14 -8 l14 8 l14 -8 l14 8 l14 -8 l12 6" stroke cheese width 6 fill none, linejoin round. But that would sit on top of the shell? Cheese shreds hang over the rim — draw after shell so they're on top of the rim. Yes: draw cheese shreds last so they drape over the shell top edge. Good.
Also sesame/cilantro dots and scallion rings (small green circles with lighter inner).
OK. Also the "shell" needs to be drawn after fillings. Shell path: "M30 112 A90 90 0 0 0 210 112 Z" fill shell, plus shell2 shading path "M30 112 A90 90 0 0 0 120 202 L120 112 Z"? Actually the right half darker for a folded look: use path "M120 112 A90 90 0 0 0 210 112 Z" fill shell2 (right half). But that arc: from (120,112) to (210,112) sweep 0 bulges down. Yes. Good.
Add shell texture spots: 3 small ellipses.
Hero uses this symbol scaled up, plus steam animation (3 blurred wavy paths with animated translate/opacity).
Alright, write the code. Also an animated "flying ingredients" maybe skip.
Let me now write everything.
Section ids: #menu, #story, #visit, #order.
JS:
- IntersectionObserver reveal
- menu filtering by category
- cart drawer
- spice meter (1-3) changes hero taco colors & label
- countdown
- open-now status
- reviews auto-rotate
- mobile nav toggle
- newsletter submit inline message
- marquee CSS only
Write code now, careful with quotes and escaping.
Cart drawer: fixed right panel, translateX(100%) hidden, with items list, subtotal, checkout button -> shows inline "Order placed! We'll text you..." message. Also "Add" buttons bump.
Let me write the HTML fully.
I'll be mindful: no horizontal scrollbar at 375px → use overflow-x hidden on body, responsive grid.
Now produce the code.
Menu items data (JS array) so filtering and cart work nicely:
tacos:
1. Bulgogi Taco — $4.25 — "Sweet-soy charred beef, kimchi slaw, gochujang crema" — tags: Best Seller, Spicy 2
2. Kimchi Carnitas Taco — $4.50 — "Slow-cooked pork shoulder, house kimchi, pickled onion, cilantro-lime" — Spicy 3
3. Hot Chicken Taco — $4.75 — "Crispy twice-fried chicken, kimchi aioli, slaw" — Spicy 3
4. Tofu Kimchi Taco — $4.00 — "Crispy tofu, kimchi, sesame slaw, vegan crema" — Vegan, GF
5. Short Rib Taco — $5.25 — "Braised short rib, kimchi jus, pickled radish" — Spicy 1
6. Creamy Corn & Kimchi Taco — $4.25 — "Korean corn, butter, kimchi, cheese" — Veg
burritos: Kimchi Loco Burrito $9.50, Seoul Surreal $10.75, Seoul Dog (sausage) $9
bowls: Bulgogi Bowl $11, Kimchi Bibimbap Bowl $10.50, Tofu Crunch Bowl $10
sides: Kimchi Cheese Corn $4, Gochujang Tots $5, Crab rangoons? "Mandu Chips" $4.50, Elote $4.75
drinks: Yuzu Lemonade $3, Horchata-style "Horchata Boba"? Better "Bingsu Shake" $5.50, Korean Soda $2.75, Matcha Lychee $4.
I'll render cards from JS with a taco/icon SVG per item maybe varied. Use the taco symbol for tacos, other simple symbols for bowls/burritos/sides. Let me add a second symbol "bowl" and "burrito" and "cup" to the sprite for variety. That's more SVG work; alternatively use one taco symbol for all with color variation + a big emoji? Risk of tofu. I'll create simple generic symbols:
- #ico-bowl: a trapezoid bowl with rice mound
- #ico-wrap: rounded rectangle rotated with foil ends?
- #ico-cup: cup with straw
- #ico-side: fries container
Keep them simple.
Let me write them:
#ico-bowl (viewBox 0 0 120 100):
<path d="M15 40 h90 l-10 45 a6 6 0 0 1 -6 5 H31 a6 6 0 0 1 -6 -5 Z" fill="#EFEAE0" stroke? plus top ellipse rx45 ry8 at y40 fill "#fff" and rice mound: <path d="M25 40 q10 -22 35 -22 q25 0 35 22 z" fill="#FFF"/> plus toppings circles red/green/brown.
#ico-wrap: rounded rect (wrapped burrito): <rect x="20" y="20" width="80" height="62" rx="16" fill="#F0B04A"/> with diagonal stripe and foil triangles? Make it a rotated rounded rect with a fold line, plus a cut end circle showing filling. Good enough: <g transform="rotate(-12 60 50)"><rect .../><path cut/></g>
#ico-cup: trapezoid cup + straw + lid.
#ico-side: carton with circles.
Fine.
Now write. Also give each card the icon big with a colored circle background.
Time to produce the final code. Keep CSS organized but compact-ish. Aim ~1000 lines maybe; that's fine.
Let me carefully write the taco symbol:
<symbol id="ico-taco" viewBox="0 0 240 210">
<!-- lettuce -->
<g fill="var(--c-lettuce,#7CC242)">
<ellipse cx="72" cy="96" rx="27" ry="21"/>
<ellipse cx="104" cy="82" rx="29" ry="25"/>
<ellipse cx="140" cy="82" rx="29" ry="25"/>
<ellipse cx="170" cy="97" rx="25" ry="20"/>
</g>
<!-- scallion rings -->
<g fill="var(--c-herb,#2E9E5B)">
<circle cx="60" cy="78" r="6"/><circle cx="183" cy="84" r="6"/><circle cx="128" cy="60" r="5"/>
</g>
<!-- meat -->
<g fill="var(--c-meat,#7C3A1D)">
<rect x="70" y="62" width="30" height="22" rx="9" transform="rotate(-8 85 73)"/>
<rect x="108" y="54" width="32" height="23" rx="9" transform="rotate(6 124 65)"/>
<rect x="146" y="62" width="28" height="21" rx="9" transform="rotate(12 160 72)"/>
</g>
<!-- kimchi -->
<g fill="var(--c-kimchi,#E23B2E)">
<path d="M46 70 c4 -14 24 -18 32 -4 c6 10 -4 20 -16 19 c-13 -1 -19 -6 -16 -15 z"/>
<path d="M118 44 c8 -14 28 -14 34 0 c4 11 -8 19 -20 16 c-12 -3 -19 -8 -14 -16 z"/>
<path d="M172 52 c8 -10 26 -8 30 5 c3 10 -8 16 -19 13 c-11 -3 -16 -11 -11 -18 z"/>
</g>
<g fill="var(--c-kimchi2,#FF6A57)" opacity=".85">
<path d="M54 68 c6 -6 16 -6 20 0 c-8 4 -14 4 -20 0 z"/>
<path d="M126 48 c8 -4 18 -2 22 4 c-10 2 -18 0 -22 -4 z"/>
</g>
<!-- cream drizzle -->
<path d="M60 92 q30 -26 62 -18 q26 6 40 24" stroke="var(--c-cream,#FFF3CF)" stroke-width="7" fill="none" stroke-linecap="round"/>
<!-- shell -->
<path d="M30 112 A90 90 0 0 0 210 112 Z" fill="var(--c-shell,#F0B04A)"/>
<path d="M120 112 A90 90 0 0 0 210 112 Z" fill="var(--c-shell2,#DC9132)"/>
<!-- shell spots -->
<g fill="#C87A24" opacity=".45">
<ellipse cx="86" cy="140" rx="9" ry="6"/><ellipse cx="140" cy="162" rx="11" ry="7"/><ellipse cx="180" cy="135" rx="8" ry="5"/>
</g>
<!-- cheese shreds over rim -->
<path d="M36 108 l12 -7 l11 9 l12 -9 l12 9 l12 -9 l12 9 l12 -9 l11 9 l12 -9 l10 7" fill="none" stroke="var(--c-cheese,#FFD23F)" stroke-width="7" stroke-linejoin="round" stroke-linecap="round"/>
<!-- sesame -->
<g fill="#FFF7E0"><ellipse cx="96" cy="76" rx="3" ry="4" transform="rotate(20 96 76)"/><ellipse cx="150" cy="86" rx="3" ry="4" transform="rotate(-25 150 86)"/></g>
</symbol>
Note the "cream drizzle" path stroke uses var with fallback — fine.
Wait: the cheese zigzag spans x 36..183 at y ~ 100-108, drawn after shell → drapes over rim top (rim at y=112). Good.
Hmm the cheese zigzag may look like it floats above; place it centered at y ~ 100-112. ok.
Now the hero: big taco with steam, price sticker, floating badges.
Alright — final write-up. Also add subtle "sticky nav" with active link highlight? Keep simple.
Also add a section "Choose your heat" spice meter with 3 buttons (Mild / Hot / Literally Fire) that changes hero taco kimchi color and label text.
Write the code now.
For the countdown, target next Friday 20:00 local; if already past, next week.
Reviews: 3 quotes rotate with fade.
Let me write.
One more: avoid `alert`. Use inline status messages.
Final code below.