Food truck websiteOne-line
GLM 5.3 Flash
by Z.aiReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 5 min 14 s
- Cost
- $0.019
- Output tokens
- 38,691
- Spent thinking
- 18,991 tokens
- Speed
- 123.3 tok/s
- Console errors
- 0
- First token after
- 377 ms
- First visible text after
- 2 min 43 s
- Prompt tokens
- 362
- Code size
- 60.1 KB
- Finish reason
- stop
- Served by
- Crusoe
- Model id
z-ai/glm-5.3-flash- Reasoning sent
{"effort":"high"}- Max output
- 64,000 tokens
- Generated
- Nov 10, 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 · 1103 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 Tacos, Zero Chill</title>
<style>
:root{
--paper:#F4EDE0;
--paper2:#EFE4CF;
--ink:#181310;
--red:#D9331F;
--red-dk:#A82415;
--yellow:#F2B33D;
--green:#2E7D46;
--cream:#FFFDF6;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{
background:var(--paper);
color:var(--ink);
font:16px/1.65 "Helvetica Neue",Helvetica,"Segoe UI",sans-serif;
-webkit-font-smoothing:antialiased;
}
body.lock{overflow:hidden}
::selection{background:var(--red);color:var(--paper)}
:focus-visible{outline:3px dashed var(--red);outline-offset:2px}
img,svg{display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.disp{
font-family:Impact,"Arial Black","Franklin Gothic Bold",sans-serif;
font-weight:400;text-transform:uppercase;line-height:.92;
letter-spacing:.005em;
}
.mono{
font-family:"Courier New",ui-monospace,Menlo,monospace;
font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
section{scroll-margin-top:96px}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;gap:10px;
border:3px solid var(--ink);background:var(--cream);color:var(--ink);
padding:13px 22px;font-family:"Courier New",ui-monospace,monospace;
font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;
box-shadow:5px 5px 0 var(--ink);text-decoration:none;
transition:transform .15s,box-shadow .15s,background .15s;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn-red{background:var(--red);color:var(--paper)}
.btn-red:hover{background:var(--red-dk)}
.btn svg{width:18px;height:18px}
/* ---------- marquees ---------- */
.marquee{overflow:hidden;white-space:nowrap;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.mq-track{display:inline-block;white-space:nowrap;animation:mq 26s linear infinite}
.mq-track span{display:inline-block;padding-right:12px}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-top{background:var(--ink);color:var(--yellow);font-family:"Courier New",monospace;font-weight:700;font-size:12px;letter-spacing:.22em;padding:7px 0;text-transform:uppercase}
.mq-red{background:var(--red);color:var(--paper);font-family:Impact,"Arial Black",sans-serif;font-size:clamp(18px,2.6vw,26px);text-transform:uppercase;padding:12px 0;letter-spacing:.04em}
/* ---------- nav ---------- */
header.nav{
position:sticky;top:0;z-index:50;background:var(--paper);
border-bottom:3px solid var(--ink);
}
.nav-in{display:flex;align-items:center;gap:28px;height:66px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo svg{width:38px;height:26px}
.logo b{font-family:Impact,"Arial Black",sans-serif;font-weight:400;font-size:22px;letter-spacing:.02em}
.logo b i{font-style:normal;color:var(--red)}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{font-family:"Courier New",monospace;font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;background:var(--red);transition:right .2s}
.nav-links a:hover::after{right:0}
.cart-btn{margin-left:auto;position:relative}
.nav-links + .cart-btn{margin-left:0}
.badge{
position:absolute;top:-10px;right:-10px;min-width:22px;height:22px;
background:var(--red);color:var(--paper);border:2px solid var(--ink);
border-radius:50%;font-size:12px;font-weight:700;display:none;
align-items:center;justify-content:center;padding:0 4px;
font-family:"Courier New",monospace;
}
.badge.show{display:inline-flex}
.cart-btn.bump{animation:bump .3s}
@keyframes bump{40%{transform:scale(1.12)}}
/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding-top:56px;padding-bottom:64px;min-height:calc(88vh - 100px)}
.halftone{position:absolute;inset:0;pointer-events:none;opacity:.5}
.hero-copy{position:relative;z-index:2}
.eyebrow{font-size:13px;letter-spacing:.2em;margin-bottom:18px;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:34px;height:3px;background:var(--red)}
.hero h1{font-size:clamp(72px,11.5vw,164px);color:var(--ink)}
.hero h1 .loco{
color:var(--red);display:inline-block;
text-shadow:5px 5px 0 var(--ink);
}
.hero-tag{max-width:46ch;font-size:clamp(16px,1.6vw,19px);margin:22px 0 26px;line-height:1.55}
.hero-tag b{background:var(--yellow);padding:0 5px;box-decoration-break:clone}
.hero-ctas{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.pill{
display:inline-flex;align-items:center;gap:9px;border:2.5px solid var(--ink);
background:var(--cream);border-radius:999px;padding:9px 18px;
font-family:"Courier New",monospace;font-weight:700;font-size:12.5px;
letter-spacing:.12em;text-transform:uppercase;box-shadow:4px 4px 0 var(--ink);
margin-top:30px;
}
.pill .dot{width:11px;height:11px;border-radius:50%;background:#B5AA93;flex:none}
.pill.is-open .dot{background:var(--green);animation:blink 1.4s infinite}
.pill:not(.is-open) .dot{background:var(--red)}
@keyframes blink{50%{opacity:.35}}
.taco-stage{position:relative;z-index:1}
.taco-main{width:min(100%,480px);margin:0 auto;animation:bob 5.5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-12px) rotate(-2deg)}}
.steam path{opacity:0;animation:steam 2.8s ease-in-out infinite}
.steam .s2{animation-delay:.9s}.steam .s3{animation-delay:1.7s}
@keyframes steam{
0%{transform:translateY(8px);opacity:0}
35%{opacity:.5}
100%{transform:translateY(-16px);opacity:0}
}
.sticker{
position:absolute;border:3px solid var(--ink);background:var(--yellow);
padding:10px 16px;font-family:"Courier New",monospace;font-weight:700;
font-size:12px;letter-spacing:.14em;text-transform:uppercase;
box-shadow:4px 4px 0 var(--ink);z-index:3;
}
.st-1{top:6%;left:-4%;transform:rotate(-7deg)}
.spin-badge{
position:absolute;bottom:2%;right:-2%;width:118px;height:118px;z-index:3;
animation:spin 15s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
/* ---------- sections ---------- */
.sec{padding:clamp(56px,8vw,96px) 0}
.sec-head{margin-bottom:44px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 40px}
.sec-head h2{font-size:clamp(44px,6.5vw,84px)}
.sec-head h2 em{font-style:normal;color:var(--red);-webkit-text-stroke:2.5px var(--ink)}
.sec-note{font-family:"Courier New",monospace;font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;max-width:34ch;margin-left:auto;padding-bottom:10px;border-bottom:3px solid var(--ink)}
/* ---------- menu ---------- */
.menu-list{border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.mi{position:relative;display:block;padding:26px 18px 22px 22px;border-bottom:2.5px solid var(--ink);transition:background .2s;cursor:default}
.mi:last-child{border-bottom:none}
.mi::before{content:"";position:absolute;left:0;top:-2.5px;bottom:-2.5px;width:0;background:var(--red);transition:width .22s}
.mi:hover{background:var(--paper2)}
.mi:hover::before{width:9px}
.mi-top{display:flex;align-items:baseline;gap:16px}
.mi-num{color:var(--red);font-size:14px;flex:none}
.mi-name{font-size:clamp(21px,2.7vw,31px)}
.dots{flex:1;border-bottom:3px dotted var(--ink);transform:translateY(-6px);min-width:30px}
.mi-price{font-size:clamp(20px,2.4vw,27px);flex:none}
.mi-add{
flex:none;align-self:center;width:40px;height:40px;border-radius:50%;
border:2.5px solid var(--ink);background:var(--cream);display:grid;place-items:center;
transition:transform .25s,background .2s,color .2s;
}
.mi-add svg{width:16px;height:16px}
.mi-add:hover{background:var(--red);color:var(--paper);transform:rotate(90deg)}
.mi-foot{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:8px;padding-left:44px;align-items:center}
.mi-desc{font-size:14.5px;color:#4d443a;max-width:62ch}
.tag{font-family:"Courier New",monospace;font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;border:2px solid var(--ink);padding:2px 8px}
.tag-red{background:var(--red);color:var(--paper);border-color:var(--red-dk)}
.tag-hot{background:var(--yellow)}
.tag-veg{background:#DDEBD3;border-color:var(--green);color:var(--green)}
.tag-ink{background:var(--ink);color:var(--paper)}
/* ---------- builder ---------- */
#build{background:var(--ink);color:var(--paper)}
#build .sec-note{border-color:var(--paper);color:var(--paper)}
.builder{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}
.b-label{font-size:12.5px;color:var(--yellow);margin:26px 0 14px}
.b-label:first-child{margin-top:0}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chip{
display:inline-flex;align-items:center;gap:9px;border:2.5px solid var(--paper);
background:transparent;color:var(--paper);padding:9px 15px;
font-family:"Courier New",monospace;font-weight:700;font-size:13px;letter-spacing:.06em;
box-shadow:3px 3px 0 rgba(244,237,224,.25);transition:all .18s;
}
.chip .dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--paper);flex:none}
.chip .cp{opacity:.65;font-size:12px}
.chip:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 rgba(244,237,224,.4)}
.chip.on{background:var(--red);border-color:var(--red);box-shadow:3px 3px 0 var(--yellow)}
.chip.on .cp{opacity:1;color:var(--yellow)}
.heat{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.flames{display:flex;gap:5px}
.flames svg{width:30px;height:30px;color:#5c5348;transition:color .25s,transform .25s}
.flames svg.lit{color:var(--red);transform:scale(1.12)}
.heat button#heatWord{
font-family:"Courier New",monospace;font-weight:700;font-size:13px;letter-spacing:.14em;
text-transform:uppercase;border-bottom:2px dashed var(--paper);padding-bottom:2px;
}
.heat button#heatWord.max{color:var(--yellow)}
.heat button#heatWord.max::after{content:" →"}
.linkish{
margin-top:18px;font-family:"Courier New",monospace;font-weight:700;font-size:12.5px;
letter-spacing:.12em;text-transform:uppercase;color:var(--yellow);
border-bottom:2px solid var(--yellow);padding-bottom:2px;
}
.linkish:hover{color:var(--paper);border-color:var(--paper)}
.taco-box{background:var(--paper);border:3px solid var(--paper);box-shadow:8px 8px 0 var(--red);padding:10px}
.taco-svg{width:100%;height:auto}
.ing{opacity:0;transform:translateY(16px) scale(.88);transform-box:fill-box;transform-origin:center;transition:opacity .3s,transform .38s cubic-bezier(.34,1.56,.64,1)}
.ing.on{opacity:1;transform:none}
.ticket{
background:var(--cream);color:var(--ink);border:3px dashed var(--ink);
padding:22px 24px;margin-top:26px;transform:rotate(-1deg);
box-shadow:6px 6px 0 rgba(0,0,0,.35);
}
.ticket .t-head{display:flex;justify-content:space-between;font-family:"Courier New",monospace;font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:14px}
.ticket h3{font-size:clamp(26px,3vw,36px);margin-bottom:14px;color:var(--red)}
.ticket ul{list-style:none;font-family:"Courier New",monospace;font-weight:700;font-size:13.5px}
.ticket li{display:flex;justify-content:space-between;gap:14px;padding:4px 0;border-bottom:1px dotted #b9ad97}
.t-total{display:flex;justify-content:space-between;margin:16px 0 18px;font-size:15px}
.t-total b{font-size:20px;color:var(--red)}
.ticket .btn{width:100%;justify-content:center}
/* ---------- truck ---------- */
.truck-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,60px);align-items:start}
.sched{border-top:3px solid var(--ink)}
.sched-row{display:flex;align-items:center;gap:18px;padding:15px 12px;border-bottom:2px solid var(--ink);position:relative;transition:background .2s}
.sched-row .d{font-family:Impact,"Arial Black",sans-serif;font-size:19px;width:100px;flex:none;text-transform:uppercase}
.sched-row .l{flex:1}
.sched-row .l b{display:block;font-size:16px}
.sched-row .l span{font-family:"Courier New",monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#6d6154}
.sched-row .h{font-family:"Courier New",monospace;font-weight:700;font-size:12.5px;letter-spacing:.08em;flex:none}
.sched-row.closed{opacity:.45}
.sched-row.closed .d::after{content:" — dark";font-family:"Courier New",monospace;font-size:12px;font-weight:700}
.sched-row.today{background:var(--yellow)}
.sched-row.today::before{content:"TODAY";position:absolute;left:-2px;top:-11px;background:var(--red);color:var(--paper);font-family:"Courier New",monospace;font-weight:700;font-size:10px;letter-spacing:.16em;padding:3px 8px;border:2px solid var(--ink);transform:rotate(-4deg);z-index:2}
.map-card{border:3px solid var(--ink);background:var(--cream);box-shadow:8px 8px 0 var(--ink)}
.map-card svg{width:100%;height:auto}
.map-foot{padding:18px 20px;border-top:3px solid var(--ink)}
.map-foot .js-status{display:block;font-family:"Courier New",monospace;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.map-foot .addr{display:block;margin-top:6px;font-size:15px}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 1.7s ease-out infinite}
@keyframes pulse{0%{transform:scale(.4);opacity:.8}100%{transform:scale(1.5);opacity:0}}
/* ---------- story ---------- */
#story{background:var(--paper2);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,70px)}
.pull{font-size:clamp(30px,4.2vw,54px)}
.pull em{font-style:normal;color:var(--red)}
.story-copy p{margin-bottom:16px;font-size:17px;max-width:58ch}
.facts{display:flex;flex-wrap:wrap;margin-top:34px;border-top:3px solid var(--ink)}
.fact{flex:1 1 150px;padding:20px 18px 6px;border-right:2.5px solid var(--ink)}
.fact:last-child{border-right:none}
.fact b{display:block;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(34px,4vw,52px);color:var(--red)}
.fact span{font-family:"Courier New",monospace;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--paper);padding:60px 0 30px}
.foot-word{font-size:clamp(52px,10.5vw,138px);color:transparent;-webkit-text-stroke:2.5px var(--paper);white-space:nowrap;line-height:1;margin-bottom:40px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px;padding-bottom:44px;border-bottom:1px solid #4b4038}
.foot-grid h4{font-family:"Courier New",monospace;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);margin-bottom:14px}
.foot-grid p,.foot-grid li{font-size:14.5px;color:#cfc4b2}
.foot-grid ul{list-style:none}
.foot-grid li{padding:2px 0}
.socials{display:flex;gap:12px;margin-top:14px}
.socials a{width:42px;height:42px;border:2.5px solid var(--paper);border-radius:50%;display:grid;place-items:center;transition:all .2s}
.socials a svg{width:18px;height:18px}
.socials a:hover{background:var(--red);border-color:var(--red);transform:translateY(-3px)}
.fine{display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;padding-top:22px;font-family:"Courier New",monospace;font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8d8172}
/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
/* ---------- modal / toast ---------- */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(24,19,16,.62);opacity:0;pointer-events:none;transition:opacity .25s;padding:20px}
.modal.open{opacity:1;pointer-events:auto}
.dialog{
background:var(--paper);border:3px solid var(--ink);box-shadow:10px 10px 0 var(--ink);
width:min(520px,100%);max-height:86vh;overflow:auto;padding:30px;
transform:translateY(18px) rotate(-.5deg);transition:transform .3s cubic-bezier(.34,1.4,.64,1);
}
.modal.open .dialog{transform:none}
.m-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.m-head h3{font-size:clamp(24px,3vw,32px)}
.m-close{width:40px;height:40px;border:2.5px solid var(--ink);display:grid;place-items:center;flex:none;transition:all .2s}
.m-close:hover{background:var(--red);color:var(--paper);border-color:var(--red)}
.m-close svg{width:16px;height:16px}
.waiver-list{list-style:none;font-family:"Courier New",monospace;font-weight:700;font-size:13px;line-height:1.5}
.waiver-list li{padding:9px 0;border-bottom:1px dotted #b9ad97;display:flex;gap:10px}
.waiver-list li::before{content:"§";color:var(--red)}
.w-row{display:flex;gap:10px;align-items:flex-start;margin:20px 0 8px;font-size:14.5px}
.w-row input{width:20px;height:20px;accent-color:var(--red);margin-top:2px;flex:none}
.w-name{width:100%;border:2.5px solid var(--ink);background:var(--cream);padding:11px 14px;font-family:"Courier New",monospace;font-weight:700;letter-spacing:.06em;margin:8px 0 18px}
#cartList{list-style:none}
#cartList li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dotted #b9ad97;font-weight:700}
.cart-line{display:flex;align-items:center;gap:12px;flex:none}
.rm{width:28px;height:28px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-weight:700;transition:all .2s}
.rm:hover{background:var(--red);color:var(--paper);border-color:var(--red)}
.cart-empty{padding:18px 0;font-style:italic;color:#6d6154}
.c-total{display:flex;justify-content:space-between;font-family:"Courier New",monospace;font-weight:700;font-size:16px;margin:18px 0}
.toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:10px;align-items:center;width:max-content;max-width:92vw}
.toast{
background:var(--ink);color:var(--paper);border:2.5px solid var(--paper);
box-shadow:4px 4px 0 rgba(0,0,0,.4);padding:12px 20px;
font-family:"Courier New",monospace;font-weight:700;font-size:13px;letter-spacing:.05em;
opacity:0;transform:translateY(14px);transition:all .3s;max-width:92vw;text-align:center;
}
.toast.show{opacity:1;transform:none}
#flash{position:fixed;inset:0;z-index:150;pointer-events:none;background:var(--red);opacity:0;transition:opacity .4s}
#flash.on{opacity:.4}
body.quake{animation:quake .55s}
@keyframes quake{
10%{transform:translate(-6px,2px) rotate(-.5deg)}30%{transform:translate(5px,-3px) rotate(.5deg)}
50%{transform:translate(-4px,3px)}70%{transform:translate(4px,-2px)}90%{transform:translate(-2px,1px)}
}
/* ---------- responsive ---------- */
@media (max-width:960px){
.nav-links{display:none}
.hero .wrap{grid-template-columns:1fr;padding-top:40px;min-height:0}
.builder,.truck-grid,.story-grid{grid-template-columns:1fr}
.foot-grid{grid-template-columns:1fr 1fr}
.spin-badge{width:92px;height:92px;right:0}
}
@media (max-width:560px){
.wrap{padding:0 16px}
.mi-foot{padding-left:0}
.mi-top{flex-wrap:wrap;row-gap:4px}
.dots{display:none}
.mi-add{margin-left:auto}
.foot-grid{grid-template-columns:1fr}
.sched-row .d{width:74px;font-size:16px}
.st-1{left:0;top:-14px}
.btn{padding:11px 16px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
html{scroll-behavior:auto}
}
</style>
</head>
<body>
<!-- icon symbols -->
<svg style="display:none" aria-hidden="true">
<symbol id="i-flame" viewBox="0 0 24 24">
<path fill="currentColor" d="M12 1.8c1.2 4.2-3.2 5.6-3.2 9.4 0 1.4.7 2.6 1.8 3.2-.3-1.9.8-3 2-3.9-.2 1.7 1.2 2.4 2 3.5.5.7.8 1.5.8 2.4h.2c1.5-1 2.6-2.9 2.6-5.2 0-4-2.7-5.7-3.9-8.6-.9.9-1.3 1.8-1.3 2.9-1-1.3-.9-2.4-1-3.7zM9.4 16.2c-1.5 1-2.4 2.5-2.4 4 0 .7.2 1.4.5 2h9c.3-.6.5-1.3.5-2 0-1.5-.9-3-2.4-4-1 .8-2.3 1.2-3.6 1.2s-2.6-.4-3.6-1.2z"/>
</symbol>
<symbol id="i-star" viewBox="0 0 24 24">
<path fill="currentColor" d="M12 2l2.9 6.2 6.6.8-4.9 4.6 1.3 6.6L12 17l-5.9 3.2 1.3-6.6L2.5 9l6.6-.8z"/>
</symbol>
<symbol id="i-plus" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" d="M12 5v14M5 12h14"/>
</symbol>
<symbol id="i-x" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" d="M6 6l12 12M18 6L6 18"/>
</symbol>
<symbol id="i-arrow" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" d="M4 12h15M13 6l6 6-6 6"/>
</symbol>
<symbol id="i-pin" viewBox="0 0 24 24">
<path fill="currentColor" fill-rule="evenodd" d="M12 1.8a7.2 7.2 0 0 0-7.2 7.2c0 5.2 7.2 13.2 7.2 13.2s7.2-8 7.2-13.2A7.2 7.2 0 0 0 12 1.8zm0 4.4a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/>
</symbol>
<symbol id="i-ig" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="2"><rect x="3.5" y="3.5" width="17" height="17" rx="4.5"/><circle cx="12" cy="12" r="4"/><circle cx="17.2" cy="6.8" r="1.3" fill="currentColor" stroke="none"/></g>
</symbol>
<symbol id="i-mail" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3.5 6.5L12 13l8.5-6.5"/></g>
</symbol>
<symbol id="i-tw" viewBox="0 0 24 24">
<path fill="currentColor" d="M17.5 3h3.2l-7 8 8.2 10h-6.4l-5-6.1L4.9 21H1.7l7.5-8.6L1.3 3h6.6l4.5 5.5zm-1.1 16h1.8L7.7 4.9H5.8z"/>
</symbol>
</svg>
<!-- top marquee -->
<div class="marquee mq-top" aria-hidden="true">
<div class="mq-track">
<span>KIMCHI BULGOGI TACOS ★ 18-DAY FERMENT ★ PRESSED DAILY ★ GOCHUJANG EVERYTHING ★ NO MICROWAVE ON THIS TRUCK ★ </span>
<span>KIMCHI BULGOGI TACOS ★ 18-DAY FERMENT ★ PRESSED DAILY ★ GOCHUJANG EVERYTHING ★ NO MICROWAVE ON THIS TRUCK ★ </span>
</div>
</div>
<!-- nav -->
<header class="nav">
<div class="wrap nav-in">
<a class="logo" href="#top" aria-label="Kimchi Loco home">
<svg viewBox="0 0 40 28" aria-hidden="true">
<path d="M3 22 a17 17 0 0 1 34 0 z" fill="#EFC15E" stroke="#181310" stroke-width="3"/>
<circle cx="13" cy="16" r="2.6" fill="#E2492B"/><circle cx="21" cy="13" r="2.6" fill="#4C8C55"/><circle cx="28" cy="17" r="2.6" fill="#E2492B"/>
</svg>
<b>KIMCHI <i>LOCO</i></b>
</a>
<nav class="nav-links">
<a href="#menu">Menu</a>
<a href="#build">Build-a-Taco</a>
<a href="#truck">Find the Truck</a>
<a href="#story">Story</a>
</nav>
<button class="btn btn-red cart-btn" id="cartBtn" style="padding:10px 16px">
Order Ahead <span class="badge" id="cartCount">0</span>
</button>
</div>
</header>
<main id="top">
<!-- hero -->
<section class="hero">
<svg class="halftone" aria-hidden="true">
<defs>
<pattern id="ht" width="18" height="18" patternUnits="userSpaceOnUse">
<circle cx="3" cy="3" r="1.6" fill="#181310" opacity=".07"/>
<circle cx="12" cy="12" r="1.1" fill="#D9331F" opacity=".12"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#ht)"/>
</svg>
<div class="wrap">
<div class="hero-copy">
<p class="eyebrow mono">Korean × Mexican — one truck, zero chill</p>
<h1 class="disp">Kimchi<br><span class="loco">Loco</span></h1>
<p class="hero-tag">Seoul spice folded into Mexico City soul. <b>18-day kimchi</b>, pear-marinated bulgogi, tortillas pressed at 6 AM — served out a red window that people line up for.</p>
<div class="hero-ctas">
<a class="btn btn-red" href="#build">Build your taco <svg><use href="#i-arrow"/></svg></a>
<a class="btn" href="#menu">See the menu</a>
</div>
<div class="pill js-status"><span class="dot"></span><span class="st-txt">Checking the grill…</span></div>
</div>
<div class="taco-stage">
<div class="sticker st-1">18-day kimchi<br>· no shortcuts</div>
<svg class="spin-badge" viewBox="0 0 120 120" aria-hidden="true">
<defs><path id="circ" d="M60,60 m-45,0 a45,45 0 1,1 90,0 a45,45 0 1,1 -90,0"/></defs>
<circle cx="60" cy="60" r="57" style="fill:var(--red)" stroke="#181310" stroke-width="3"/>
<text style="font:700 10px 'Courier New',monospace;letter-spacing:1.6px;fill:#F4EDE0">
<textPath href="#circ">KIMCHI LOCO ★ SEOUL SOUL ★ SINCE 2021 ★</textPath>
</text>
<g transform="translate(60 60)"><use href="#i-star" x="-10" y="-10" width="20" height="20" style="color:#F2B33D"/></g>
</svg>
<svg class="taco-svg taco-main" viewBox="0 0 400 300" aria-label="Illustration of a loaded Korean taco">
<!-- steam (behind shell) -->
<g class="steam" stroke="#181310" stroke-width="4" fill="none" stroke-linecap="round">
<path class="s1" d="M148 92 q-10 -18 4 -34 q12 -14 2 -30"/>
<path class="s2" d="M205 86 q-10 -18 4 -34 q12 -14 2 -30"/>
<path class="s3" d="M258 94 q-10 -18 4 -34 q12 -14 2 -30"/>
</g>
<ellipse cx="200" cy="252" rx="140" ry="12" fill="#181310" opacity=".12"/>
<path d="M50 208 A150 150 0 0 1 350 208 Z" fill="#EFC15E" stroke="#181310" stroke-width="6" stroke-linejoin="round"/>
<path d="M200 58 Q188 130 197 208" fill="none" stroke="#181310" stroke-width="3" opacity=".25"/>
<path d="M120 84 Q120 140 128 202" fill="none" stroke="#181310" stroke-width="3" opacity=".18"/>
<path d="M280 84 Q280 140 272 202" fill="none" stroke="#181310" stroke-width="3" opacity=".18"/>
<g class="ing on" id="h-rice"></g>
<!-- bulgogi -->
<g class="ing on" stroke="#181310" stroke-width="3">
<rect x="80" y="168" width="70" height="14" rx="7" fill="#7A4A2B" transform="rotate(-8 115 175)"/>
<rect x="150" y="158" width="80" height="14" rx="7" fill="#8A5631" transform="rotate(5 190 165)"/>
<rect x="235" y="165" width="72" height="14" rx="7" fill="#7A4A2B" transform="rotate(-6 271 172)"/>
<rect x="105" y="185" width="66" height="13" rx="6" fill="#8A5631" transform="rotate(6 138 191)"/>
<rect x="205" y="186" width="76" height="13" rx="6" fill="#7A4A2B" transform="rotate(-4 243 192)"/>
<rect x="285" y="188" width="52" height="12" rx="6" fill="#8A5631" transform="rotate(8 311 194)"/>
</g>
<!-- kimchi -->
<g class="ing on" stroke="#181310" stroke-width="3">
<path d="M88 196 l14 -22 16 6 -4 20 z" fill="#E2492B"/>
<path d="M140 182 l18 -14 14 10 -8 20 z" fill="#F2762E"/>
<path d="M198 176 l20 -8 12 14 -14 14 z" fill="#E2492B"/>
<path d="M255 184 l16 -16 16 10 -10 18 z" fill="#F2762E"/>
<path d="M300 196 l12 -18 16 8 -6 18 z" fill="#E2492B"/>
</g>
<!-- slaw -->
<g class="ing on" fill="none" stroke-linecap="round">
<path d="M85 190 q14 -18 30 -4 q10 10 24 2" stroke="#4C8C55" stroke-width="7"/>
<path d="M160 178 q16 -16 32 -2 q12 10 26 0" stroke="#6FA05C" stroke-width="7"/>
<path d="M240 186 q14 -18 30 -4 q10 8 24 2" stroke="#4C8C55" stroke-width="7"/>
<path d="M120 200 q12 -12 26 -2" stroke="#9BC178" stroke-width="5"/>
<path d="M195 202 q12 -12 26 -2" stroke="#9BC178" stroke-width="5"/>
<path d="M285 202 q12 -12 26 -2" stroke="#9BC178" stroke-width="5"/>
</g>
<!-- queso -->
<g class="ing on" fill="#FBF6EA" stroke="#181310" stroke-width="2.5">
<circle cx="105" cy="188" r="7"/><circle cx="145" cy="176" r="6"/><circle cx="205" cy="182" r="7"/><circle cx="250" cy="172" r="6"/><circle cx="300" cy="186" r="7"/>
</g>
<!-- aioli drizzle -->
<g class="ing on">
<path d="M75 172 q12 -14 24 0 t24 0 t24 0 t24 0 t24 0 t24 0 t24 0 t24 0 t24 0" fill="none" stroke="#E2492B" stroke-width="8" stroke-linecap="round"/>
</g>
<!-- toasted spots -->
<g fill="#D89A2B">
<ellipse cx="92" cy="192" rx="15" ry="8" opacity=".55" transform="rotate(-20 92 192)"/>
<ellipse cx="308" cy="190" rx="13" ry="7" opacity=".55" transform="rotate(18 308 190)"/>
<ellipse cx="140" cy="204" rx="12" ry="6" opacity=".4"/>
<ellipse cx="262" cy="205" rx="12" ry="6" opacity=".4"/>
</g>
</svg>
</div>
</div>
</section>
<div class="marquee mq-red" aria-hidden="true">
<div class="mq-track">
<span>Seoul spice ★ Mexico City soul ★ One tortilla ★ 18-day kimchi ★ Pear-marinated bulgogi ★ Line starts early ★ </span>
<span>Seoul spice ★ Mexico City soul ★ One tortilla ★ 18-day kimchi ★ Pear-marinated bulgogi ★ Line starts early ★ </span>
</div>
</div>
<!-- menu -->
<section id="menu" class="sec">
<div class="wrap">
<div class="sec-head rv">
<div>
<p class="eyebrow mono">The menu</p>
<h2 class="disp">Everything we <em>make</em></h2>
</div>
<p class="sec-note">One page, like our menu board. We run a truck, not a novel.</p>
</div>
<div class="menu-list rv">
<article class="mi">
<div class="mi-top"><span class="mi-num mono">01</span><h3 class="mi-name disp">Kimchi Bulgogi Taco</h3><span class="dots"></span><span class="mi-price disp">$4.50</span>
<button class="mi-add" data-name="Kimchi Bulgogi Taco" data-price="4.5" aria-label="Add Kimchi Bulgogi Taco to order"><svg><use href="#i-plus"/></svg></button></div>
<div class="mi-foot"><p class="mi-desc">18-day kimchi grilled crisp, soy-pear bulgogi, sesame slaw, gochujang aioli.</p><span class="tag tag-red">Signature</span><span class="tag tag-hot">Spicy</span></div>
</article>
<article class="mi">
<div class="mi-top"><span class="mi-num mono">02</span><h3 class="mi-name disp">Short Rib Quesadilla</h3><span class="dots"></span><span class="mi-price disp">$9.00</span>
<button class="mi-add" data-name="Short Rib Quesadilla" data-price="9" aria-label="Add Short Rib Quesadilla to order"><svg><use href="#i-plus"/></svg></button></div>
<div class="mi-foot"><p class="mi-desc">Braised galbi, double Oaxaca cheese, pickled daikon, scallion oil wash.</p><span class="tag tag-ink">Heavy Hitter</span></div>
</article>
<article class="mi">
<div class="mi-top"><span class="mi-num mono">03</span><h3 class="mi-name disp">Gochujang Chicken Taco</h3><span class="dots"></span><span class="mi-price disp">$4.75</span>
<button class="mi-add" data-name="Gochujang Chicken Taco" data-price="4.75" aria-label="Add Gochujang Chicken Taco to order"><svg><use href="#i-plus"/></svg></button></div>
<div class="mi-foot"><p class="mi-desc">Double-fried thigh in gochujang glaze, honey butter drizzle, lime.</p><span class="tag tag-hot">Spicy</span></div>
</article>
<article class="mi">
<div class="mi-top"><span class="mi-num mono">04</span><h3 class="mi-name disp">Tofu Kimchi Taco</h3><span class="dots"></span><span class="mi-price disp">$4.25</span>
<button class="mi-add" data-name="Tofu Kimchi Taco" data-price="4.25" aria-label="Add Tofu Kimchi Taco to order"><svg><use href="#i-plus"/></svg></button></div>
<div class="mi-foot"><p class="mi-desc">Same marinade, zero cows. Crispy tofu, aged kimchi, cilantro rice.</p><span class="tag tag-veg">Vegan</span><span class="tag tag-hot">Spicy</span></div>
</article>
<article class="mi">
<div class="mi-top"><span class="mi-num mono">05</span><h3 class="mi-name disp">Seoul-Style Elote</h3><span class="dots"></span><span class="mi-price disp">$4.50</span>
<button class="mi-add" data-name="Seoul-Style Elote" data-price="4.5" aria-label="Add Seoul-Style Elote to order"><svg><use href="#i-plus"/></svg></button></div>
<div class="mi-foot"><p class="mi-desc">Charred corn, gochujang butter, cotija, black sesame, furikake dust.</p><span class="tag tag-veg">Vegetarian</span></div>
</article>
<article class="mi">
<div class="mi-top"><span class="mi-num mono">06</span><h3 class="mi-name disp">Sesame Fries</h3><span class="dots"></span><span class="mi-price disp">$5.00</span>
<button class="mi-add" data-name="Sesame Fries" data-price="5" aria-label="Add Sesame Fries to order"><svg><use href="#i-plus"/></svg></button></div>
<div class="mi-foot"><p class="mi-desc">Twice-cooked, gochujang mayo, toasted sesame, fried shallots on top.</p></div>
</article>
<article class="mi">
<div class="mi-top"><span class="mi-num mono">07</span><h3 class="mi-name disp">Horchata Negro</h3><span class="dots"></span><span class="mi-price disp">$3.50</span>
<button class="mi-add" data-name="Horchata Negro" data-price="3.5" aria-label="Add Horchata Negro to order"><svg><use href="#i-plus"/></svg></button></div>
<div class="mi-foot"><p class="mi-desc">Cinnamon horchata cut with cold-brew. Puts the fire out. Barely.</p></div>
</article>
<article class="mi">
<div class="mi-top"><span class="mi-num mono">08</span><h3 class="mi-name disp">Pear Agua Fresca</h3><span class="dots"></span><span class="mi-price disp">$3.75</span>
<button class="mi-add" data-name="Pear Agua Fresca" data-price="3.75" aria-label="Add Pear Agua Fresca to order"><svg><use href="#i-plus"/></svg></button></div>
<div class="mi-foot"><p class="mi-desc">Korean pear, lime, mint. The same pear that's in the marinade — waste nothing.</p><span class="tag tag-veg">Vegan</span></div>
</article>
</div>
</div>
</section>
<!-- builder -->
<section id="build" class="sec">
<div class="wrap">
<div class="sec-head rv">
<div>
<p class="eyebrow mono" style="color:var(--yellow)">The signature move</p>
<h2 class="disp">Build your <em style="color:var(--yellow);-webkit-text-stroke:2.5px var(--paper)">locura</em></h2>
</div>
<p class="sec-note">Stack it. Name it. Order it. We make it at the window.</p>
</div>
<div class="builder">
<div class="b-left rv">
<p class="b-label mono">01 — Pick your stack <span style="opacity:.6">(max 5, one protein)</span></p>
<div class="chips" id="chips"></div>
<p class="b-label mono">02 — Check the heat</p>
<div class="heat">
<div class="flames" id="flames" aria-hidden="true"></div>
<button id="heatWord" type="button" title="Heat level">—</button>
</div>
<button class="linkish" id="challengeBtn" type="button">Think you can go hotter? Take the Gochujang Challenge →</button>
</div>
<div class="b-right rv">
<div class="taco-box">
<svg class="taco-svg" viewBox="0 0 400 300" aria-label="Your custom taco, drawn live">
<ellipse cx="200" cy="252" rx="140" ry="12" fill="#181310" opacity=".12"/>
<path d="M50 208 A150 150 0 0 1 350 208 Z" fill="#EFC15E" stroke="#181310" stroke-width="6" stroke-linejoin="round"/>
<path d="M200 58 Q188 130 197 208" fill="none" stroke="#181310" stroke-width="3" opacity=".25"/>
<path d="M120 84 Q120 140 128 202" fill="none" stroke="#181310" stroke-width="3" opacity=".18"/>
<path d="M280 84 Q280 140 272 202" fill="none" stroke="#181310" stroke-width="3" opacity=".18"/>
<!-- rice -->
<g class="ing" id="ing-rice">
<g fill="#F7F1E3" stroke="#181310" stroke-width="2.5">
<circle cx="95" cy="200" r="6"/><circle cx="120" cy="192" r="6"/><circle cx="150" cy="198" r="6"/><circle cx="185" cy="190" r="6"/><circle cx="220" cy="197" r="6"/><circle cx="255" cy="191" r="6"/><circle cx="290" cy="198" r="6"/><circle cx="315" cy="202" r="6"/>
</g>
<g fill="#4C8C55"><circle cx="110" cy="203" r="3"/><circle cx="170" cy="202" r="3"/><circle cx="235" cy="203" r="3"/><circle cx="300" cy="203" r="3"/></g>
</g>
<!-- bulgogi -->
<g class="ing" id="ing-bulgogi" stroke="#181310" stroke-width="3">
<rect x="80" y="168" width="70" height="14" rx="7" fill="#7A4A2B" transform="rotate(-8 115 175)"/>
<rect x="150" y="158" width="80" height="14" rx="7" fill="#8A5631" transform="rotate(5 190 165)"/>
<rect x="235" y="165" width="72" height="14" rx="7" fill="#7A4A2B" transform="rotate(-6 271 172)"/>
<rect x="105" y="185" width="66" height="13" rx="6" fill="#8A5631" transform="rotate(6 138 191)"/>
<rect x="205" y="186" width="76" height="13" rx="6" fill="#7A4A2B" transform="rotate(-4 243 192)"/>
<rect x="285" y="188" width="52" height="12" rx="6" fill="#8A5631" transform="rotate(8 311 194)"/>
</g>
<!-- tofu -->
<g class="ing" id="ing-tofu" stroke="#181310" stroke-width="3">
<rect x="100" y="172" width="26" height="24" rx="4" fill="#EAD9A6" transform="rotate(-10 113 184)"/>
<rect x="160" y="164" width="26" height="24" rx="4" fill="#EAD9A6" transform="rotate(8 173 176)"/>
<rect x="225" y="170" width="26" height="24" rx="4" fill="#EAD9A6" transform="rotate(-6 238 182)"/>
<rect x="285" y="176" width="24" height="22" rx="4" fill="#EAD9A6" transform="rotate(10 297 187)"/>
</g>
<!-- kimchi -->
<g class="ing" id="ing-kimchi" stroke="#181310" stroke-width="3">
<path d="M88 196 l14 -22 16 6 -4 20 z" fill="#E2492B"/>
<path d="M140 182 l18 -14 14 10 -8 20 z" fill="#F2762E"/>
<path d="M198 176 l20 -8 12 14 -14 14 z" fill="#E2492B"/>
<path d="M255 184 l16 -16 16 10 -10 18 z" fill="#F2762E"/>
<path d="M300 196 l12 -18 16 8 -6 18 z" fill="#E2492B"/>
</g>
<!-- slaw -->
<g class="ing" id="ing-slaw" fill="none" stroke-linecap="round">
<path d="M85 190 q14 -18 30 -4 q10 10 24 2" stroke="#4C8C55" stroke-width="7"/>
<path d="M160 178 q16 -16 32 -2 q12 10 26 0" stroke="#6FA05C" stroke-width="7"/>
<path d="M240 186 q14 -18 30 -4 q10 8 24 2" stroke="#4C8C55" stroke-width="7"/>
<path d="M120 200 q12 -12 26 -2" stroke="#9BC178" stroke-width="5"/>
<path d="M195 202 q12 -12 26 -2" stroke="#9BC178" stroke-width="5"/>
<path d="M285 202 q12 -12 26 -2" stroke="#9BC178" stroke-width="5"/>
</g>
<!-- queso -->
<g class="ing" id="ing-queso" fill="#FBF6EA" stroke="#181310" stroke-width="2.5">
<circle cx="105" cy="188" r="7"/><circle cx="145" cy="176" r="6"/><circle cx="205" cy="182" r="7"/><circle cx="250" cy="172" r="6"/><circle cx="300" cy="186" r="7"/>
</g>
<!-- shallots -->
<g class="ing" id="ing-shallots" fill="#6B3F1E" stroke="#181310" stroke-width="2">
<rect x="110" y="172" width="10" height="10" rx="2" transform="rotate(20 115 177)"/>
<rect x="165" y="164" width="10" height="10" rx="2" transform="rotate(-15 170 169)"/>
<rect x="215" y="170" width="10" height="10" rx="2" transform="rotate(30 220 175)"/>
<rect x="265" y="164" width="10" height="10" rx="2" transform="rotate(-25 270 169)"/>
<rect x="305" y="176" width="10" height="10" rx="2" transform="rotate(12 310 181)"/>
<rect x="140" y="186" width="9" height="9" rx="2" transform="rotate(-30 144 190)"/>
<rect x="240" y="188" width="9" height="9" rx="2" transform="rotate(18 244 192)"/>
</g>
<!-- aioli -->
<g class="ing" id="ing-aioli">
<path d="M75 172 q12 -14 24 0 t24 0 t24 0 t24 0 t24 0 t24 0 t24 0 t24 0 t24 0" fill="none" stroke="#E2492B" stroke-width="8" stroke-linecap="round"/>
</g>
<g fill="#D89A2B">
<ellipse cx="92" cy="192" rx="15" ry="8" opacity=".55" transform="rotate(-20 92 192)"/>
<ellipse cx="308" cy="190" rx="13" ry="7" opacity=".55" transform="rotate(18 308 190)"/>
<ellipse cx="140" cy="204" rx="12" ry="6" opacity=".4"/>
<ellipse cx="262" cy="205" rx="12" ry="6" opacity=".4"/>
</g>
</svg>
</div>
<div class="ticket">
<div class="t-head"><span>Order ticket</span><span id="buildNo">Nº 000</span></div>
<h3 class="disp" id="tacoName">The Seoul Fuego</h3>
<ul id="tacoList"></ul>
<div class="t-total mono"><span>Total</span><b id="tacoTotal">$0.00</b></div>
<button class="btn btn-red" id="addBuild" type="button">Add to order <svg><use href="#i-arrow"/></svg></button>
</div>
</div>
</div>
</div>
</section>
<div class="marquee mq-red" aria-hidden="true" style="border-color:var(--ink)">
<div class="mq-track" style="animation-direction:reverse">
<span>Find the truck ★ Follow the smell ★ Get in line ★ Find the truck ★ Follow the smell ★ Get in line ★ </span>
<span>Find the truck ★ Follow the smell ★ Get in line ★ Find the truck ★ Follow the smell ★ Get in line ★ </span>
</div>
</div>
<!-- truck -->
<section id="truck" class="sec">
<div class="wrap">
<div class="sec-head rv">
<div>
<p class="eyebrow mono">Find the truck</p>
<h2 class="disp">We move. <em>The smell</em> moves faster.</h2>
</div>
<p class="sec-note">Same week, same corners, every week. Mondays we ferment.</p>
</div>
<div class="truck-grid">
<div class="rv">
<div class="sched" id="sched"></div>
<div style="margin-top:20px;border:3px solid var(--ink);background:var(--cream);padding:18px 20px;box-shadow:6px 6px 0 var(--ink)">
<span class="mono" style="font-size:11.5px;color:var(--red)">Today at the window</span>
<div id="todayBox" style="margin-top:6px;display:grid;gap:2px"></div>
</div>
</div>
<div class="rv">
<div class="map-card">
<svg viewBox="0 0 360 240" aria-label="Stylized map of the truck location">
<rect width="360" height="240" fill="#EFE6D4"/>
<g fill="#E1D5BC">
<rect x="20" y="18" width="128" height="78" rx="5"/>
<rect x="212" y="18" width="128" height="78" rx="5"/>
<rect x="20" y="152" width="128" height="68" rx="5"/>
<rect x="212" y="152" width="128" height="68" rx="5"/>
</g>
<g stroke="#181310" stroke-width="12" stroke-linecap="square">
<line x1="0" y1="115" x2="360" y2="115"/>
<line x1="180" y1="0" x2="180" y2="240"/>
</g>
<g stroke="#F4EDE0" stroke-width="2" stroke-dasharray="8 10">
<line x1="0" y1="115" x2="360" y2="115"/>
<line x1="180" y1="0" x2="180" y2="240"/>
</g>
<g style="font:700 10px 'Courier New',monospace;letter-spacing:2px" fill="#8d8172">
<text x="24" y="108">3RD ST</text>
<text x="188" y="20" transform="rotate(90 188 20)">PALM AVE</text>
</g>
<g class="pulse"><circle cx="204" cy="96" r="30" fill="#D9331F" opacity=".5"/></g>
<circle cx="204" cy="96" r="10" fill="#D9331F" stroke="#181310" stroke-width="3.5"/>
<g>
<rect x="128" y="46" width="152" height="26" fill="#181310"/>
<text x="204" y="63" text-anchor="middle" style="font:700 12px 'Courier New',monospace;letter-spacing:2px" fill="#F4EDE0">WE'RE HERE</text>
<path d="M196 72 l8 10 8 -10 z" fill="#181310"/>
</g>
</svg>
<div class="map-foot">
<span class="js-status pill-line"><span class="dot" style="display:none"></span></span>
<span class="addr" id="mapAddr">—</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- story -->
<section id="story" class="sec">
<div class="wrap story-grid">
<div class="rv">
<p class="eyebrow mono">Why "loco"?</p>
<p class="pull disp">We ferment kimchi <em>18 days.</em> We press tortillas at 6 AM.</p>
</div>
<div class="story-copy rv">
<p>Your lunch took a week to make. Kimchi Loco started in 2021 with one flat-top, Chef Mina's grandmother's kimchi recipe, and a suspicion that gochujang and salsa cruda were always meant to meet.</p>
<p>The line hasn't gotten shorter since. We still grill every order to fire, still drizzle with zero restraint, and still refuse — on principle — to install a microwave.</p>
<div class="facts">
<div class="fact"><b>18</b><span>days of ferment</span></div>
<div class="fact"><b>40<small style="font-size:.45em">sec</small></b><span>bulgogi on the grill</span></div>
<div class="fact"><b>12k+</b><span>tortillas pressed</span></div>
<div class="fact"><b>0</b><span>microwaves aboard</span></div>
</div>
</div>
</div>
</section>
</main>
<!-- footer -->
<footer>
<div class="wrap">
<div class="foot-word disp" aria-hidden="true">Kimchi Loco</div>
<div class="foot-grid">
<div>
<h4>The pitch, short version</h4>
<p>Korean-Mexican street food from a red truck that smells like a decision you won't regret. Follow the smell, or follow the schedule.</p>
<div class="socials">
<a href="#top" aria-label="Instagram"><svg><use href="#i-ig"/></svg></a>
<a href="#top" aria-label="X"><svg><use href="#i-tw"/></svg></a>
<a href="#top" aria-label="Email"><svg><use href="#i-mail"/></svg></a>
</div>
</div>
<div>
<h4>This week</h4>
<ul id="footWeek"></ul>
</div>
<div>
<h4>Catering & contact</h4>
<p>Parties, weddings, office rescues. The truck holds 400 tacos and we've tested that number.</p>
<p style="margin-top:10px;font-family:'Courier New',monospace;font-weight:700;letter-spacing:.06em">hello@kimchiloco.example</p>
</div>
</div>
<div class="fine">
<span>© Kimchi Loco — all tacos reserved</span>
<span>Seoul spice · Mexico City soul</span>
</div>
</div>
</footer>
<!-- waiver modal -->
<div class="modal" id="waiverModal" role="dialog" aria-modal="true" aria-label="Gochujang Challenge waiver">
<div class="dialog">
<div class="m-head">
<div><p class="mono" style="font-size:11px;color:var(--red)">Do not sign lightly</p><h3 class="disp">Gochujang Challenge Waiver</h3></div>
<button class="m-close" aria-label="Close"><svg><use href="#i-x"/></svg></button>
</div>
<ul class="waiver-list">
<li>The Double Gochujang build uses 3× the standard paste. Fermented fire.</li>
<li>Water makes it worse. We will hand you horchata; take the horchata.</li>
<li>Photos at the finish line are mandatory. The wall of fame is waiting.</li>
<li>Finish it in 10 minutes and it's free. Fail, and it still was worth it.</li>
</ul>
<label class="w-row"><input type="checkbox" id="wAgree"><span>I have read the terms, tasted milder things, and accept the consequences of my own ambition.</span></label>
<input class="w-name" id="wName" type="text" placeholder="Print the name your obituary will use" aria-label="Your name">
<button class="btn btn-red" id="signBtn" style="width:100%;justify-content:center" type="button">I sign my fate</button>
</div>
</div>
<!-- cart modal -->
<div class="modal" id="cartModal" role="dialog" aria-modal="true" aria-label="Your order">
<div class="dialog">
<div class="m-head">
<h3 class="disp">Your order</h3>
<button class="m-close" aria-label="Close"><svg><use href="#i-x"/></svg></button>
</div>
<ul id="cartList"></ul>
<div class="c-total"><span>Total</span><span id="cartTotal">$0.00</span></div>
<button class="btn btn-red" id="placeOrder" style="width:100%;justify-content:center" type="button">Place order — pay at the window</button>
<p style="margin-top:12px;font-family:'Courier New',monospace;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6d6154;text-align:center">Demo truck — no charge, all glory</p>
</div>
</div>
<div class="toasts" id="toasts" aria-live="polite"></div>
<div id="flash"></div>
<script>
(function(){
'use strict';
var $=function(s){return document.querySelector(s)};
var $$=function(s){return Array.prototype.slice.call(document.querySelectorAll(s))};
var fmt=function(n){return '$'+n.toFixed(2)};
/* ---------- toasts ---------- */
var toastsEl=$('#toasts');
function toast(msg){
var t=document.createElement('div');
t.className='toast';t.textContent=msg;
toastsEl.appendChild(t);
requestAnimationFrame(function(){t.classList.add('show')});
setTimeout(function(){t.classList.remove('show');setTimeout(function(){t.remove()},350)},3600);
}
/* ---------- schedule & live status ---------- */
var SCHED=[
{label:'Sunday', loc:'Southbank Brunch Market', addr:'412 Riverwalk', open:[10,16], hrs:'10AM – 4PM'},
null,
{label:'Tuesday', loc:'The Grove Food Pod', addr:'518 Palm Ave', open:[11,21], hrs:'11AM – 9PM'},
{label:'Wednesday',loc:'Civic Center Plaza', addr:'200 Main St', open:[11,21], hrs:'11AM – 9PM'},
{label:'Thursday', loc:'The Grove Food Pod', addr:'518 Palm Ave', open:[11,21], hrs:'11AM – 9PM'},
{label:'Friday', loc:'Riverside Night Market', addr:'77 Water St', open:[11,21], hrs:'11AM – 9PM'},
{label:'Saturday', loc:'Riverside Night Market', addr:'77 Water St', open:[11,21], hrs:'11AM – 9PM'}
];
function getStatus(){
var now=new Date(), d=now.getDay(), h=now.getHours()+now.getMinutes()/60, s=SCHED[d];
if(!s) return {open:false,msg:'Closed Mondays · back Tue 11AM',today:null};
if(h>=s.open[0]&&h<s.open[1]) return {open:true,msg:'Open now · '+s.loc,today:s};
if(h<s.open[0]) return {open:false,msg:'Opens '+s.open[0]+'AM · '+s.loc,today:s};
var next=(d===0)?'Tue':(d===6?'Sun':'tomorrow');
return {open:false,msg:'Closed · back '+next+' 11AM',today:s};
}
function paintStatus(){
var st=getStatus(), d=new Date().getDay();
$$('.js-status').forEach(function(el){
var txt=el.querySelector('.st-txt');
if(txt){txt.textContent=st.msg;}
else{
while(el.firstChild)el.removeChild(el.firstChild);
el.textContent=st.msg;
}
el.classList.toggle('is-open',st.open);
});
$$('.sched-row').forEach(function(r){r.classList.toggle('today',+r.getAttribute('data-d')===d)});
var tb=$('#todayBox');
if(st.today){
tb.innerHTML='<span class="mono" style="font-size:11px;color:var(--red)">'+st.today.label.toUpperCase()+'</span>'+
'<strong style="font-size:18px">'+st.today.loc+'</strong>'+
'<span class="mono" style="font-size:11.5px;color:#6d6154;letter-spacing:.1em">'+st.today.addr+' · '+st.today.hrs+'</span>';
$('#mapAddr').textContent=st.today.loc+' — '+st.today.addr;
}else{
tb.innerHTML='<strong style="font-size:18px">Dark today.</strong><span class="mono" style="font-size:11.5px;color:#6d6154;letter-spacing:.1em">Back Tuesday, 11AM sharp. Fermenting.</span>';
$('#mapAddr').textContent='Truck resting — back Tuesday at The Grove Food Pod';
}
}
/* build schedule rows */
(function(){
var order=[1,2,3,4,5,6,0], host=$('#sched');
order.forEach(function(di){
var s=SCHED[di], row=document.createElement('div');
row.className='sched-row'+(s?'':' closed');
row.setAttribute('data-d',di);
if(s){
row.innerHTML='<span class="d disp">'+s.label.slice(0,3)+'</span>'+
'<span class="l"><b>'+s.loc+'</b><span>'+s.addr+'</span></span>'+
'<span class="h">'+s.hrs+'</span>';
}else{
row.innerHTML='<span class="d disp">Mon</span><span class="l"><b>Kimchi fermentation day</b><span>The kimchi comes first. Always.</span></span>';
}
host.appendChild(row);
});
var fw=$('#footWeek');
order.forEach(function(di){
var s=SCHED[di], li=document.createElement('li');
li.textContent=s?(s.label.slice(0,3)+' — '+s.loc):'Mon — closed';
fw.appendChild(li);
});
})();
/* ---------- cart ---------- */
var cart=[];
var cartCount=$('#cartCount'),cartList=$('#cartList'),cartTotalEl=$('#cartTotal');
function updateCart(){
cartCount.textContent=cart.length;
cartCount.classList.toggle('show',cart.length>0);
var btn=$('#cartBtn');
btn.classList.add('bump');setTimeout(function(){btn.classList.remove('bump')},320);
if(!cart.length){
cartList.innerHTML='<p class="cart-empty">Nothing yet. The kimchi is getting impatient.</p>';
cartTotalEl.textContent='$0.00';return;
}
var html='';
cart.forEach(function(it,i){
html+='<li><span>'+it.name+'</span><span class="cart-line"><b>'+fmt(it.price)+'</b>'+
'<button class="rm" data-i="'+i+'" aria-label="Remove '+it.name+'">×</button></span></li>';
});
cartList.innerHTML=html;
cartTotalEl.textContent=fmt(cart.reduce(function(a,b){return a+b.price},0));
}
cartList.addEventListener('click',function(e){
var b=e.target.closest('.rm');if(!b)return;
cart.splice(+b.getAttribute('data-i'),1);updateCart();
});
function addToCart(name,price){
cart.push({name:name,price:price});
updateCart();
toast(name+' added — see you at the window.');
}
$$('.mi-add').forEach(function(b){
b.addEventListener('click',function(){addToCart(b.getAttribute('data-name'),+b.getAttribute('data-price'))});
});
$('#placeOrder').addEventListener('click',function(){
if(!cart.length){toast("Cart's empty — build a taco first.");return;}
var id='KL-'+(1000+Math.floor(Math.random()*9000));
cart.length=0;updateCart();closeModal($('#cartModal'));
toast('Order '+id+' confirmed. Ready at the window in ~12 min.');
});
$('#cartBtn').addEventListener('click',function(){openModal($('#cartModal'))});
/* ---------- modals ---------- */
function openModal(m){m.classList.add('open');document.body.classList.add('lock')}
function closeModal(m){m.classList.remove('open');document.body.classList.remove('lock')}
$$('.modal').forEach(function(m){
m.addEventListener('click',function(e){if(e.target===m)closeModal(m)});
var c=m.querySelector('.m-close');
if(c)c.addEventListener('click',function(){closeModal(m)});
});
document.addEventListener('keydown',function(e){
if(e.key==='Escape')$$('.modal.open').forEach(closeModal);
});
/* ---------- taco builder ---------- */
var INGS=[
{id:'bulgogi', name:'Bulgogi Beef', price:2.5, spice:1, prot:true, color:'#7A4A2B', blurb:'soy-pear marinade, 40 seconds on the flat-top'},
{id:'tofu', name:'Tofu Bulgogi', price:2, spice:0, prot:true, color:'#EAD9A6', blurb:'same marinade, zero cows'},
{id:'kimchi', name:'Napa Kimchi', price:1, spice:2, prot:false, color:'#E2492B', blurb:'18-day ferment, grilled crisp'},
{id:'slaw', name:'Sesame Slaw', price:0.75, spice:0, prot:false, color:'#4C8C55', blurb:'cabbage, scallion, toasted sesame'},
{id:'queso', name:'Cotija Queso', price:1, spice:0, prot:false, color:'#FBF6EA', blurb:'salty, crumbly, essential'},
{id:'rice', name:'Cilantro Rice', price:1, spice:0, prot:false, color:'#F7F1E3', blurb:'stuffed in there anyway'},
{id:'shallots',name:'Fried Shallots', price:0.5, spice:0, prot:false, color:'#6B3F1E', blurb:'the crunch layer'},
{id:'aioli', name:'Gochujang Aioli', price:0.75, spice:2, prot:false, color:'#E2492B', blurb:'drizzled with zero restraint'}
];
var BASE=3;
var sel={};
['bulgogi','kimchi','slaw'].forEach(function(id){sel[id]=true});
function findIng(id){for(var i=0;i<INGS.length;i++)if(INGS[i].id===id)return INGS[i];return null}
function spiceSum(){var s=0;for(var id in sel)if(sel[id])s+=findIng(id).spice;return s}
function priceSum(){var s=0;for(var id in sel)if(sel[id])s+=findIng(id).price;return s}
function selCount(){var n=0;for(var id in sel)if(sel[id])n++;return n}
var chipsEl=$('#chips');
INGS.forEach(function(g){
var b=document.createElement('button');
b.type='button';b.className='chip';b.setAttribute('data-id',g.id);b.title=g.blurb;
b.innerHTML='<span class="dot" style="background:'+g.color+'"></span><span class="cn">'+g.name+'</span><span class="cp">'+fmt(g.price)+'</span>';
b.addEventListener('click',function(){toggle(g)});
chipsEl.appendChild(b);
});
function toggle(g){
if(sel[g.id]){sel[g.id]=false;}
else if(g.prot){
for(var id in sel){if(findIng(id).prot)sel[id]=false}
sel[g.id]=true;
}else{
if(selCount()>=5){toast("Five's the max — even this truck has limits.");return}
sel[g.id]=true;
}
render();
}
function heatCode(v){
if(v>=5)return '5 — SIGN THE WAIVER';
if(v>=4)return '4 — HOT HOT';
if(v>=3)return '3 — SPICY';
if(v>=2)return '2 — WARM';
if(v>=1)return '1 — MELLOW';
return '0 — MILD';
}
function tacoName(){
var prot=sel.bulgogi?'Seoul':sel.tofu?'K-Pop':'Naked';
var s=spiceSum(), second='Classic';
if(s>=5)second='Volcán';
else if(s>=4)second='Inferno';
else if(s>=3)second='Fuego';
else if(sel.kimchi&&sel.aioli)second='Slapper';
else if(sel.shallots)second='Cruncher';
else if(sel.slaw&&sel.queso)second='Fundidor';
else if(selCount()>=4)second='Everything';
return 'The '+prot+' '+second;
}
var SVGNS='http://www.w3.org/2000/svg';
function render(){
$$('#chips .chip').forEach(function(c){c.classList.toggle('on',!!sel[c.getAttribute('data-id')])});
INGS.forEach(function(g){
var el=document.getElementById('ing-'+g.id);
if(el)el.classList.toggle('on',!!sel[g.id]);
});
var s=spiceSum(), flames=$('#flames');
while(flames.firstChild)flames.removeChild(flames.firstChild);
for(var i=0;i<5;i++){
var sv=document.createElementNS(SVGNS,'svg');
sv.setAttribute('viewBox','0 0 24 24');
var u=document.createElementNS(SVGNS,'use');
u.setAttribute('href','#i-flame');
sv.appendChild(u);
if(i<s)sv.classList.add('lit');
flames.appendChild(sv);
}
var hw=$('#heatWord');
hw.textContent=heatCode(s);
hw.classList.toggle('max',s>=5);
$('#tacoName').textContent=tacoName();
$('#tacoTotal').textContent=fmt(BASE+priceSum());
var html='<li><span>Pressed flour tortilla</span><b>'+fmt(BASE)+'</b></li>';
for(var id in sel){if(sel[id]){var g=findIng(id);html+='<li><span>'+g.name+'</span><b>'+fmt(g.price)+'</b></li>';}}
$('#tacoList').innerHTML=html;
}
$('#addBuild').addEventListener('click',function(){
addToCart(tacoName(),BASE+priceSum());
});
$('#heatWord').addEventListener('click',function(){
if(this.classList.contains('max'))openModal($('#waiverModal'));
});
/* ---------- gochujang challenge ---------- */
$('#challengeBtn').addEventListener('click',function(){openModal($('#waiverModal'))});
$('#signBtn').addEventListener('click',function(){
if(!$('#wAgree').checked){toast('You have to check the box. Physics of liability.');return;}
closeModal($('#waiverModal'));
document.body.classList.add('quake');
setTimeout(function(){document.body.classList.remove('quake')},620);
var f=$('#flash');f.classList.add('on');setTimeout(function(){f.classList.remove('on')},500);
sel={};['bulgogi','kimchi','aioli','shallots','slaw'].forEach(function(id){sel[id]=true});
render();
toast(($('#wName').value.trim()||'Challenger')+' — waiver signed. Double Gochujang build loaded.');
});
/* ---------- reveal on scroll ---------- */
if('IntersectionObserver' in window){
var io=new IntersectionObserver(function(es){
es.forEach(function(e){
if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}
});
},{threshold:.12});
$$('.rv').forEach(function(el){io.observe(el)});
}else{
$$('.rv').forEach(function(el){el.classList.add('in')});
}
/* ---------- init ---------- */
$('#buildNo').textContent='Nº '+(100+Math.floor(Math.random()*900));
render();
paintStatus();
updateCart();
setInterval(paintStatus,60000);
})();
</script>
</body>
</html>Reasoning trace (18,991 tokens)
The user wants a Korean taco food truck website called "Kimchi Loco". This is a marketing/landing page task, not a game — but my system rules mention games need demo mode; this isn't a game, so I just need a striking landing page.
Let me think about the design direction. Korean tacos = fusion = Seoul street food meets Mexican street food. I want a bold, energetic, street-food aesthetic. Colors: I'll avoid blue/purple gradients. Korean flavors: gochujang red (#E23A2E-ish), sesame, kimchi orange-red, tortilla warm tones, dark charcoal/nori black. A bold red + cream + black palette feels right — like Korean poster design meets taqueria signage.
Typography: I can't load external fonts except CDN allowed... Actually rules say "No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task." The task doesn't explicitly allow CDNs. So I should use system fonts but avoid making Inter/Roboto/Arial the identity font... Hmm, tricky. I can use font stacks with character: "Impact", "Arial Black", "Archivo Black" fallbacks? System fonts like "Georgia", "Courier New" etc. A bold condensed look: use "Arial Narrow", Impact... Impact is a system font and gives that bold poster punch. Or I can lean into a stencil/mono mix. Let me use a stack: 'Archivo Black', 'Arial Black', sans-serif for display, and a mono like 'Courier New' or 'IBM Plex Mono' fallback for labels — actually system: ui-monospace, 'SF Mono', Menlo, monospace. That gives an editorial street-poster feel without external fonts.
Actually — can I use Google Fonts? The rule says no network requests except CDN URLs explicitly allowed by the task. The user didn't specify. Strictly, no. I'll do system-font-based design with strong typographic craft. Big Impact/Arial Black headlines work for street food energy.
Icons: use inline SVG icons (no emoji).
Design concept: A bold single-page site styled like a Korean street poster / ticket-stub hybrid. Key elements:
1. Hero: massive "KIMCHI LOCO" stacked type, red/black/cream, with a rotating taco illustration drawn in SVG? I can draw a taco SVG. Maybe animated steam. A marquee strip scrolling "SEOUL ★ MEXICO CITY ★ ..." — marquees are on-brand for street food.
2. Signature moment idea: an interactive "build your taco" mini-widget — click ingredients to stack them on a taco SVG and it computes a name + spice level. That's memorable and interactive. Or a "spice meter" slider that changes the page accent? The taco builder is a great signature moment.
3. Menu section: not equal-width card grid — do a menu like a real taqueria menu board: a single-column list with dotted leaders, prices, tags, alternating hover states. Big and typographic.
4. Truck location/live section: "Find the truck" with a fake live map or a schedule list with "NOW" indicator. Could do a stylized SVG map with a pulsing truck marker. Or a weekly schedule where the current day is highlighted with "WE'RE HERE TODAY".
5. Footer: hours, socials, big type.
Avoid: uniform 3-column cards, gradients, emoji. Use texture: maybe a subtle noise via SVG feTurbulence, halftone dots pattern (radial-gradient dots are okay? gradients as decoration — a dot pattern made with radial-gradient is a texture technique, not a "decorative gradient" per se; but to be safe I'll keep it minimal. Halftone dot patterns are very street-poster and I think acceptable as a pattern, not a gradient wash. I'll use tiny repeating radial-gradient dots as halftone texture — it reads as print texture, not gradient decoration. Actually to be safe I could use an SVG pattern instead. SVG pattern of dots — clean and clearly not a gradient.)
Layout: asymmetric, editorial. Big type blocks, rotated stickers, torn-edge dividers maybe.
Interactivity:
- Sticky nav with order CTA.
- Marquee strips.
- Taco builder: click ingredient chips, layers stack visually on an SVG taco, price + "loceness" meter updates, name generator.
- Menu items hover reveal.
- Location schedule with live "OPEN NOW" computed from actual Date.
- A spice challenge toggle? "Gochujang Challenge" button that sets everything to max spice with screen shake? Fun.
- Order form modal? Maybe a "Reserve a taco" no — keep an "Order ahead" fake flow with toast.
- Toast notifications instead of alert.
Let me plan sections:
1. Top bar: marquee — "KIMCHI LOCO ★ KOREAN-MEXICAN STREET FOOD ★ ..." scrolling.
2. Header nav: logo (SVG taco mark + wordmark), links (Menu, Find the Truck, Build-a-Taco, Story), CTA "Order Ahead".
3. Hero: huge stacked headline "KIMCHI / LOCO" with a big taco SVG illustration, steam animation, sticker badges ("EST. 2024", "★ 4.9"), tagline "Seoul spice. Mexico City soul. One truck." Live status pill: "OPEN NOW · at Market St & 3rd" (computed). CTA buttons.
4. Marquee divider red.
5. Menu: "THE MENU" typographic list, dotted leaders, prices in won? No—dollars. Tags like "SPICY", "VEGAN". Hover shows description. Maybe number each item like a ticket.
6. Build-a-Taco interactive (signature): SVG taco cross-section, ingredient chips (kimchi, bulgogi, sriracha aioli, sesame slaw, queso, cilantro...), stacking animation, generated name like "The Seoul Shaker", spice meter 1–5 with flame SVGs, price total. "Add to order" → toast + cart count in nav.
7. Find the truck: weekly schedule with today highlighted, address, hours, a small stylized map SVG with pulsing pin.
8. Story strip: "Why loco?" short punchy copy, photo substitute? No external images allowed. I can use CSS/SVG illustrations. Maybe a big pull-quote and stats ("3,400 tacos/week", "18-hr kimchi ferment", "2 cities")— but stat rows can feel template-y; I'll do them as inline typographic facts in a torn strip.
9. Footer: hours, contact, big KIMCHI LOCO type, socials as SVG icons.
Color system:
- Cream/paper: #F5EFE3 or #F7F1E3
- Ink black: #171310 / #1A1512
- Gochujang red: #D8341F or #E0301E
- Kimchi orange accent: #F07830? Maybe secondary #F2A93B (sesame/mustard?) Keep to red + cream + black + one green (cilantro #3E7C4F) for accents.
Fonts: display — Impact / 'Arial Black' / 'Haettenschweiler'; body — Georgia? Georgia feels editorial serif; street food might prefer a grotesque. Body: system-ui is banned as primary identity... body copy in system-ui is fine as long as identity font isn't it? "No overused fonts (Inter, Roboto, Arial, system-ui) as the primary identity font." Display = identity, so Impact/Arial Black display is fine; body can be a neutral stack. I'll use a mono for labels/eyebrows (street-ticket vibe) and a humanist stack for body. Actually Courier New for eyebrow labels = ticket/stamp aesthetic.
Hero taco SVG: I'll draw a decent taco: shell (two arcs), fillings: lettuce green squiggles, red kimchi chunks, bulgogi brown strips, white crema drizzle. Animated steam wisps rising (CSS animation on paths). Also a subtle bobbing rotation.
Taco builder SVG: layered — I'll build the taco with layers that appear/disappear based on selected ingredients. Simplest robust approach: base taco SVG shell; each ingredient is a <g> of blobs positioned inside the taco, toggled via opacity/scale transition. Selected ingredients appear in order stacked. Ingredients list (max maybe 5): bulgogi beef (base protein, default), kimchi (default), slaw, queso fresco, gochujang aioli, cilantro-lime rice, fried shallots? Each has color and a draw. Price each. Spice rating each; total spice = sum mapped to 1–5 flames.
Name generator: combine based on selections: e.g., prefix from protein (Bulgogi→"Seoul", Tofu bulgogi→"Seoul Vegan"), etc. Simple: name = [proteinWord] + [topWord]. Give a few canned combos + fallback random word pairs. Show name in a ticket stub.
"Add to order" → cart count badge in nav, toast "The Seoul Slapper added — see you at the window!".
Open-now logic: schedule: Tue–Sun, lunch 11–2:30, dinner 5–9, locations differ by day. Compute current day/time; highlight today's row, show status pill "OPEN NOW" green pulse or "OPENS AT 11" — if before opening today, or "CLOSED · BACK TOMORROW". Handle Monday closed.
Spice challenge: a button "TAKE THE GOCHUJANG CHALLENGE" — flips page to "challenge mode": accent colors intensify (invert?), shake, toast. Maybe simpler: clicking sets spice slider max and shows overlay stamp "CHALLENGE ACCEPTED" with a waiver modal? Could be a fun modal: a "liability waiver" joke form. That's a memorable interaction. Keep it lightweight: a modal with a stamped "WAIVER" and a checkbox "I accept the consequences" → signs name input → toast + adds a flame sticker to page. Fun but scope-manageable. I'll include a compact version.
Actually, keep scope controlled so everything works. Core must-haves: nav, hero with animated taco, marquee, menu list, builder, schedule with live status, footer, toasts, cart count, challenge modal (small). Responsive: stack on mobile, hide nav links behind simple... I'll make nav links hide on small screens (or wrap), CTA stays. Simple: hide links under 720px, keep logo + order button.
Cart: clicking "Order Ahead" opens a drawer/modal showing cart items and total + "Place order" → toast "Order #KL-XXXX ready in 12 min". Fake but complete-feeling.
Menu items (real Korean taco classics):
- Kimchi Bulgogi Taco — $4.50 — signature, spicy
- Short Rib Quesadilla — $9 —
- Gochujang Chicken Taco — $4.75 — spicy
- Tofu Kimchi Taco (vegan) — $4.25
- Sesame Fries w/ gochujang mayo — $5
- Elote Seoul-Style — $4.5 (corn, gochujang butter, cotija)
- Korean Pear Agua Fresca — $3.75
- Thai tea horchata? "Horchata Negro" — $3.5
Format as menu board list, each row: number, name (big), dotted leader, price; description below in small; tags as small stamps. Hover: row lifts, red underline sweep. Maybe a "MOST LOCO" stamp on signature.
Copy voice: punchy, fun. "FERMENTED 18 DAYS. FRIED 40 SECONDS. GONE IN 3 BITES."
Divider marquees: red strip with cream text scrolling: "GOCHUJANG ★ BULGOGI ★ KIMCHI ★ COTIJA ★ ..." CSS keyframes translateX loop with duplicated content.
Noise/halftone: SVG pattern dots overlay at low opacity in hero, plus a "paper" feel.
Let me also add scroll reveal animations (IntersectionObserver) — subtle rise+fade.
Toast system: fixed bottom, stacked, auto-dismiss.
Nav order button with count badge.
Let me write the code carefully. Single HTML file, ~700-900 lines. Ensure no console errors, no external requests.
Structure:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset/viewport/title>
<style>...</style>
</head>
<body>
<div class="topline marquee">...</div>
<header class="nav">...</header>
<main>
<section class="hero" id="top">...</section>
<div class="marquee red">...</div>
<section id="menu">...</section>
<section id="builder">...</section>
<div class="marquee red flip">...</div>
<section id="truck">...</section>
<section id="story">...</section>
</main>
<footer>...</footer>
<div class="modal" id="waiver">...</div>
<div class="modal" id="cartModal">...</div>
<div class="toasts"></div>
<script>...</script>
</body>
```
Colors as CSS vars:
--paper:#F4EDE0; --ink:#181310; --red:#D9331F; --red-dk:#A82415; --green:#2E7D46; --yellow:#F2B33D;
Hero layout: grid 2 cols (7/5). Left: eyebrow mono "KOREAN × MEXICAN STREET FOOD — EST. 2021", giant "KIMCHI" "LOCO" with "LOCO" in red outline or filled red, tagline, status pill + buttons. Right: taco SVG big with steam, stickers positioned absolute (rotated badges: "4.9★ RATED BY LINE STANDERS", "18-DAY KIMCHI").
Big type: font-family: 'Archivo Black','Arial Black',Impact... Impact is quite condensed; Arial Black is wide. I'll pick: font-family: Impact, 'Arial Black', sans-serif; with letter-spacing tweaks and scaleY? Keep simple: Impact fallback Arial Black. Hmm Impact on Windows, on Mac Impact exists too (yes, macOS ships Impact). Chrome on Linux may not, fallback Arial Black then sans-serif bold. Fine.
Actually for more character, I could set letter-spacing tight and uppercase. Add a text-stroke outline variant for "LOCO" using -webkit-text-stroke with transparent fill — nice poster look.
Menu rows: use flex with .dots{flex:1;border-bottom:2px dotted}.
Builder details:
Ingredients data:
```js
const ING = [
{id:'bulgogi', name:'Bulgogi Beef', price:2.5, spice:1, color:'#8a5a33', kind:'protein', tag:'grilled 40 sec'},
{id:'tofu', name:'Tofu Bulgogi', price:2, spice:1, ...},
{id:'kimchi', name:'Napa Kimchi', price:1, spice:2},
{id:'slaw', name:'Sesame Slaw', price:.75, spice:0},
{id:'queso', name:'Cotija Queso', price:1, spice:0},
{id:'aioli', name:'Gochujang Aioli', price:.75, spice:2},
{id:'rice', name:'Cilantro Rice', price:1, spice:0},
{id:'shallots', name:'Fried Shallots', price:.5, spice:0},
{id:'sriracha'?}
]
```
Max protein one of (bulgogi/tofu) — treat as radio; others toggle, limit total selected to 5.
SVG taco: viewBox 0 0 400 260. Shell: path like a half-ellipse. Shell drawn as a folded tortilla: outer path M40,200 Q200,40 360,200 with inner line, fill #F2C057 with darker edge #D89A2B and toasted spots (ellipses). Fillings sit between y≈140-190 clipped to taco interior? Simpler: draw ingredient groups at slightly different y offsets inside the opening (top edge of taco from x=60..340 at y around 150-170 curved). I'll place blobs: each ingredient group has ~5-7 ellipse/blob shapes along the arc with its color and a second darker accent. Toggle with class show/hide → CSS transition transform scaleY from 0 and opacity.
Stacking order: define y per ingredient index in a fixed layer list: aioli is drizzle on top (drawn last as zigzag path). Layers bottom→top: rice, protein, kimchi, slaw, queso, shallots, aioli drizzle.
Base shell always visible with small default lettuce? Base tortilla only.
Price: base tortilla $3 + sum. Spice: sum clamp to 5 → render 5 flame SVGs filled/unfilled. Loceness name: derive from selected set: if tofu → "Seoul Vegan"; compute name = pick adjective + noun based on spice and count: e.g., spice>=4 → "Volcán", 3 → "Fuego", else "Feliz"? Name format: "The [Word] [Word]". I'll build word pools: first word from protein, second from top spice ingredient or count. Keep a deterministic fun generator:
- protein bulgogi → "Seoul", tofu → "K-Pop", none → "Naked"
- if kimchi present and aioli → second "Slapper"; if spice>=4 → "Firecracker"; if queso+rice → "Fusion Express"... simpler: second word chosen by rules: spice>=4 "Inferno", kimchi&&aioli "Slapper", shallots "Cruncher", queso "Fundidor", count>=4 "Everything", default "Classic".
Result names: "The Seoul Inferno" — good.
Also show "ORDER TICKET" stub with name, items list, total, big ADD TO ORDER button → cart.
Sizing the builder section: two columns: left chips + meter, right SVG + ticket. On mobile stack.
Schedule data:
```js
const SCHED = [
{d:'Mon', loc:null},
{d:'Tue', loc:'The Grove Food Pod', addr:'518 Palm Ave', lunch:'11–2:30', dinner:'5–9'},
...
]
```
Simplify: each day one location + hours "11 AM – 9 PM". Today highlight with .today class and "TODAY" tag; status logic uses it. Hero pill mirrors status.
Time logic: new Date(); day index (Sun=0). Status: if Monday → "CLOSED TODAY — BACK TUE 11AM". Else if hour<11 → "OPENS TODAY 11AM"; hour>=21 or (>=15&&<17?) single shift 11–9, so open if 11<=h<21 (allow 20:59). Pill: "● OPEN NOW — {loc}" green else "● CLOSED — {next}".
Truck section also gets a mini SVG map: cream rectangle, streets grid lines, a red pulsing pin with truck icon, labels of cross streets. Cute and doable.
Story section: big pull line: "We fermented the kimchi for 18 days. We press the tortillas at 6 AM. We marinate the short rib in Asian pear overnight. Your lunch took a week to make. Worth it." Plus three "facts" as torn-paper stamps row — careful not to be uniform 3-card row; do them inline in a ticker or as varied-size stamps rotated differently. I'll do an asymmetric strip: numbers inline with different rotations/sizes.
Actually to keep scope sane, story can be a centered editorial block with drop cap and a few inline stats as a horizontal ruled list. Fine.
Footer: giant wordmark, hours mono block, socials (SVG icons: instagram, tiktok? simple glyphs), "© Kimchi Loco". Big outlined text.
Modal system: .modal overlay with dialog; open/close functions; Escape key close; click backdrop close.
Waiver modal content: stamp header "GOCHUJANG CHALLENGE — LIABILITY WAIVER", funny terms list (checkbox required), name input, "I SIGN MY FATE" button → close + toast "Waiver signed. The double-gochujang taco awaits." Add flame class to body for 3s? A brief screen pulse: body.challenge → red border vignette + shake animation for a moment. Good signature flourish.
Cart: array of {name, price}. Nav button "ORDER AHEAD (0)". Clicking opens cart modal listing items, remove buttons, total, name for pickup? Keep: list + total + "PLACE ORDER" → if empty toast "Cart's empty — build a taco first", else generate order number, toast, clear cart, close.
Toasts: function toast(msg, type). Create div, append, timeout remove with transition.
Scroll reveal: .rv elements, IO adds .in.
Nav: sticky top with paper bg + border-bottom ink 3px. Logo: small taco SVG + "KIMCHI LOCO" in Impact. Links mono uppercase with hover red underline.
Hero details for first paint: everything static visible; animations are CSS so fine at 3s screenshot.
Marquee CSS:
```css
.marquee{overflow:hidden;white-space:nowrap;background:var(--red);color:var(--paper);}
.mq-track{display:inline-block;animation:mq 22s linear infinite;}
@keyframes mq{to{transform:translateX(-50%)}}
```
Track contains two identical spans.
Steam animation: three paths above taco, animate opacity/translateY loop.
Taco bob: transform rotate(-4deg) translateY oscillation on wrapper.
Responsive: hero grid → 1 col; builder → 1 col; font sizes clamp(). Use clamp for display sizes: font-size: clamp(64px, 14vw, 168px).
Let me write actual ingredient blob positions. Taco opening arc: shell path: M30,190 Q200,30 370,190 → the opening (top rim) is roughly along that quadratic. Fillings placed along a lower arc: points along Q curve at t values. Let me param: P(t) = (1-t)²A + 2(1-t)t C + t² B with A=(55,185), C=(200,70), B=(345,185). y(t) = (1-t)²*185 + 2(1-t)t*70 + t²*185.
Fillings should sit below rim: I'll draw fillings at y offset +14 along the same curve so they peek above shell front? Actually typical taco drawing: back shell behind fillings, front shell in front covering bottom of fillings. So: draw back shell, then fillings, then front shell (a lower arc band).
Front shell: a shape covering from rim curve down? Hmm, the rim IS the top of the shell. Standard flat taco illustration: whole taco = half disc; fillings = bumps along the flat top edge (diameter). So: shell = path M40,190 Q200,40? no — half disc: M40,190 A160,160 0 0 1 360,190? A semicircle with radius 160 centered (200,190): path "M40 190 A160 160 0 0 1 360 190 Z" — that's the shell silhouette. Fillings = bumps sticking up above the straight top edge (the line y=190 between x=40..360). So fillings drawn as blobs with centers around y=185, extending up to y~150, drawn before? No — fillings must appear behind the shell? If shell is opaque semicircle and fillings above its diameter line, fillings drawn after shell would overlap shell top area — they'd look like they sit inside if their bottoms align to y≈190. Draw order: shell first, then filling blobs whose bottoms reach y≈195 (slightly into shell) — looks like contents. Then front details on shell: toasted spots, fold line.
Filling blobs per ingredient: a group with several circles/ellipses at positions along x=70..330, y baseline ~186, heights varying. E.g. slaw: green thin arcs. Kimchi: red-orange irregular polygons. Bulgogi: brown strips (rounded rects rotated). Queso: white small crumbles. Rice: small green-white dots. Shallots: tiny dark brown squares. Aioli: drizzle path zigzag across top (orange-red stroke path M70,175 Q...).
I'll define each group once in markup with class ing and id ing-bulgogi etc.
Heights: protein strips taller (y 150–186), kimchi chunks, etc.
Also a paper "ticket" under taco? The ticket stub is separate HTML below.
Steam: three wavy paths above taco, stroke ink, opacity animating.
Now menu data in HTML directly (static). 8 items.
Tags: SPICY (red stamp), VEGAN (green), SIG (black "SIGNATURE"), NEW.
Hover interaction: on hover, show description slide? Simpler: description always visible small under name; hover: left red bar grows + slight translate. Also each row has a plus button? "ADD" quick-add button per item that adds to cart with toast. That ties menu to cart — great interactivity. Quick add buttons: circular + in ink border, hover fills red.
Menu section header: "THE MENU" huge with mono side note "PRICES IN DOLLARS. FLAVOR IN GENERATIONS." and a note "Everything on one page, like our menu board. We're a food truck, not a novel."
Truck section: left schedule table; right map card + address + status.
Status compute function shared for hero pill and truck panel.
Let me now write CSS thoughtfully.
Base:
```css
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:16px/1.6 'Helvetica Neue',Helvetica,'Segoe UI',sans-serif}
```
Wait — Helvetica as body is fine (identity font is Impact). OK.
Display class:
```css
.disp{font-family:Impact,'Arial Black','Franklin Gothic Bold',sans-serif;font-weight:400;letter-spacing:.01em;text-transform:uppercase;line-height:.9}
```
Mono:
```css
.mono{font-family:'Courier New',ui-monospace,Menlo,monospace;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
```
Halftone texture:
```css
.dots::after / or .texture{background-image:radial-gradient(var(--ink) ... )}
```
Hmm radial-gradient — it's a pattern generator; I judged halftone acceptable as print texture. But to stay clearly within my own taste rules, I'll implement halftone via inline SVG pattern in the hero (position absolute svg with <pattern> circles, low opacity). That's clean.
Let me draft the full code now. I'll be careful with lengths but thorough.
Key JS pieces:
```js
// SCHED
const SCHED = {
0:{loc:'Sunday — Southbank Market', addr:'412 Riverwalk', open:[11,21]},
1:null,
2:{loc:'The Grove Food Pod', addr:'518 Palm Ave', open:[11,21]},
3:{...},
...
}
```
Display rows Mon..Sun order: index order [1,2,3,4,5,6,0].
Status():
```js
function status(){const n=new Date();const d=n.getDay();const h=n.getHours()+n.getMinutes()/60;const s=SCHED[d];
if(!s) return {open:false,msg:'CLOSED MONDAYS — SEE YOU TUESDAY 11AM'};
const [o,c]=s.open;
if(h>=o&&h<c) return {open:true,msg:'OPEN NOW · '+s.loc};
if(h<o) return {open:false,msg:'OPENS '+o+'AM · '+s.loc};
return {open:false,msg:'CLOSED FOR THE NIGHT · BACK '+(d===0?'TUE':'TOMORROW')};
}
```
Careful 11 AM display: open always 11, close 21 → "11AM–9PM". Fine, hardcode strings.
Pills update on load.
Cart:
```js
let cart=[];
function addToCart(name,price){cart.push({name,price});updateCart();toast(`✔ ...`)} // no emoji/symbols? ✔ is fine? It's a dingbat; avoid. Use text.
```
Toast text: `${name} added — see you at the window.`
updateCart: nav badge count, cart modal list render.
Builder:
```js
const INGS=[...] with layer order & svg id mapping.
state: Set of ids, protein radio.
render(): toggle .on classes on chips and svg groups; compute price/spice/name; update ticket.
```
Name rules as planned.
Challenge modal: open on button click; sign flow.
Escape/backdrop close for modals.
IO reveal:
```js
const io=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}}),{threshold:.15});
document.querySelectorAll('.rv').forEach(el=>io.observe(el));
```
Small screens: media queries at 960 and 640.
Nav on mobile: hide .nav-links.
Watch horizontal overflow: big text with clamp, overflow-x hidden on body? Better: html,body{overflow-x:hidden} as safety plus careful widths. Marquee track uses inline-block widths fine.
Flame icon SVG small inline (reuse via <symbol> + use). I'll define symbols: flame, pin, clock, truck, instagram, x/twitter, star, plus, arrow.
Let me now compose the ingredient SVG blobs concretely.
viewBox 0 0 400 300. Taco centered: semicircle center (200,205), r=150 → from x=50 to 350, top at y=205? Wait semicircle "M50 205 A150 150 0 0 1 350 205 Z" gives dome from y=205 up to y=55. Fillings along diameter y≈205, sticking up to ~150.
Hmm total svg height 300 gives room for steam above (y 30–90) and taco bottom 205. Good. Ground shadow ellipse at y=250? Semicircle flat bottom at 205; add shadow ellipse cy=215 rx=150 ry=10 under? Draw shadow first at y≈212.
Shell fill #EFC15E, stroke ink 6? Poster style: bold ink outlines (stroke #181310, stroke-width 5). toasted spots: few ellipses #D89A2B opacity .7 inside dome.
Fold line: vertical-ish line from apex (200,55) down to (200,205)? A slight curve: path M200,55 Q190,130 196,205 stroke ink width 3 opacity .5? Tortilla fold creases. OK.
Ingredient groups (drawn between shell and... they're above diameter so drawn after shell, before "front nothing"). Order: shadow, shell, fillings groups, shell toasted spots on top? Spots belong on shell surface; fillings are above diameter so no overlap except blob bottoms dipping to 210 — fine to draw spots after.
Group definitions (baseline y=205, drawn shapes from y150→212):
- rice (ing-rice): many small circles r5 fill #F7F3E7 stroke none + some green dots #4C8C55, scattered x 80..320, y 185..205.
- bulgogi: strips: rects rounded, fill #7A4A2B stroke ink 3, rotated various, x 80..320 y 165..200. 6 strips.
- tofu: cubes fill #E8D9A8 stroke ink, 5 cubes 22px.
- kimchi: chunks fill #E2492B stroke ink, irregular polygons (use paths/rotated rects), plus orange #F2762E.
- slaw: arcs: paths stroke #4C8C55 width 6 fill none, curly curves y 160-200; plus pale shreds #DCE8C8.
- queso: crumbles white circles r6 fill #FBF6EA stroke ink 2.
- shallots: small squares fill #6B3F1E, 10 of them tiny, near top y 165-185.
- aioli: drizzle path stroke #E2492B width 7 fill none, zigzag: M70,180 Q90,165 110,180 T150,180 T190,180 T230,180 T270,180 T310,180 — drawn last so it drapes over others.
When hidden: class .ing{opacity:0;transform:translateY(14px) scale(.9);transform-origin:200px 205px; transition:.35s cubic-bezier(.34,1.56,.64,1)} .ing.on{opacity:1;transform:none}.
SVG transform-origin on groups: use transform-box: fill-box; transform-origin:center. OK.
Chips UI: buttons with small color dot, name, price. .on state: filled red or ink with paper text. Protein pair: I'll treat both as toggleable but selecting one deselects the other ("protein" flag). Limit non-protein toggles to 4 more (max 5 selected total) → toast if exceeded "That's a lot of taco — even for us. 5 max."
Spice meter: 5 flame icons; filled count = clamp(sum of spice of selected, 0..5); if 0 → show "MILD". Label text: 0-1 "MELLOW", 2 "WARM", 3 "SPICY", 4 "HOT HOT", 5 "SIGN THE WAIVER" (link to waiver modal!). Nice tie-in.
Name: computed; ticket shows name big, line items mono, total.
Ticket styling: paper white (#FFFDF6), dashed border, rotated -1deg, stamp "BUILD #..." random.
Add to order: pushes composite item {name: 'Custom: '+name, price: total}, toast, clear? Keep selection. Also pulse nav badge.
Menu quick-add uses same addToCart.
Buttons style: .btn{border:3px solid var(--ink); background:var(--paper); box-shadow:4px 4px 0 var(--ink); hover: translate(-2,-2) shadow 6 6; active translate(2,2) shadow 0}. Primary: background red color paper. This chunky offset-shadow style is cohesive with poster look.
Headline treatment: "KIMCHI" solid ink, "LOCO" outline red (text-stroke 3px red, transparent fill) — actually filled red with ink offset shadow (text-shadow 6px 6px 0 ink)? I'll do KIMCHI in ink, LOCO with -webkit-text-stroke:3px var(--red); color:transparent. Fallback: color red if no stroke support — add @supports not. Simple: set color:var(--red) then @supports(-webkit-text-stroke:1px black){color:transparent;-webkit-text-stroke:...}. Good.
Also add slight rotation sticker elements: .sticker{position:absolute;border:3px solid ink;background:yellow;transform:rotate(8deg);...}.
Hero right: .taco-stage{position:relative}.
Status pill: .pill{display:inline-flex;border:2px solid ink; border-radius:999px; padding:8px 16px; mono} with dot span pulsing green/red.
Marquee content: "KIMCHI BULGOGI TACOS ★ GOCHUJANG EVERYTHING ★ 18-DAY FERMENT ★ PRESSED DAILY ★" repeated. Use ★ character (fine, typographic not emoji).
Menu board header maybe include "N.1" numbering.
OK writing final code. I'll aim for clean, complete, no errors. Let me carefully write the SVG taco.
Also hero taco: reuse same drawing (bigger, with steam). I'll write a function? Simpler: duplicate markup for hero taco (static, all default fillings visible: bulgogi, kimchi, slaw, aioli, queso) with steam paths. To reduce duplication I could build hero taco via JS clone of builder groups... but simplest: write hero taco SVG separately with its own set. Acceptable.
Actually — better idea: make the hero taco itself interactive-lite: clicking it makes it "chomp"/bounce and steam puff + toast counter "Tacos eye-balled: N"? Might be gimmicky; skip. Steam + bob is enough, plus a rotating "SPICY ★ FRESH ★" circular text badge? Circular text via SVG textPath rotating — nice touch on hero. I'll add a rotating badge (CSS animation spin 12s) with circular textPath "KIMCHI LOCO • KOREAN TACOS • " around a star. Nice detail.
Let me finalize schedule locations (invented):
- Mon: closed
- Tue: The Grove Food Pod — 518 Palm Ave
- Wed: Civic Center Plaza — 200 Main St
- Thu: The Grove Food Pod — 518 Palm Ave
- Fri: Riverside Night Market — 77 Water St
- Sat: Riverside Night Market — 77 Water St
- Sun: Southbank Brunch Market — 412 Riverwalk
Hours 11 AM – 9 PM (Sun 10–4 brunch? keep 11–9 for simplicity except Sun 10–4). I'll give Sun open [10,16] label "10AM–4PM".
Status message for closed-after: "CLOSED · BACK TOMORROW 11AM". For Monday: "CLOSED MONDAYS · BACK TUE 11AM".
Map SVG: 320x220: paper bg, streets: thick ink lines grid with street name labels mono tiny, blocks pale, a red pulsing circle + taco pin at intersection labeled "WE'RE HERE". Pulse: circle with CSS animation scale/opacity. Add "You are a taco away" caption. Cute.
Now the story section copy:
Eyebrow: "WHY 'LOCO'?"
Big line: "WE FERMENT KIMCHI 18 DAYS. WE PRESS TORTILLAS AT 6AM. WE MARINATE SHORT RIB IN PEAR OVERNIGHT."
Then paragraph: "Your lunch took a week to make. Kimchi Loco started in 2021 with one grill, a grandmother's kimchi recipe, and a line that has never gotten shorter. Seoul spice, Mexico City soul — folded in a tortilla."
Facts strip: "18 — days of ferment", "40 sec — bulgogi on the grill", "12,000+ — tortillas pressed", "0 — microwaves on the truck". Rendered as a ruled row (flex, varying widths, dividers) — not cards.
Footer: giant outline "KIMCHI LOCO" marquee-ish static, columns: FIND US (today's status), HOURS, CONTACT (hello@kimchiloco.com — fake, fine), socials icons. Bottom bar small print.
Alright, also ensure "Click or press a key to start" isn't needed (not a game). Fine.
Time to write it. I'll write ~850 lines. Be careful with JS correctness.
One more: define symbol defs for icons:
```html
<svg style="display:none"><symbol id="i-flame" viewBox="0 0 24 24">...</symbol> ...</svg>
```
Flame path: M12 2c1 4-3 5-3 9a5 5 0 0 0 10 0c0-2-1-3.5-2-5-.2 1.6-1.2 2.4-2 2.6.8-2.6-.6-5.4-3-6.6z — approximate. Fill currentColor.
Pin: M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z (circle hole via separate circle with fill paper? use fill-rule evenodd path). Simplify: path + <circle> won't hole in symbol with single fill; use path with evenodd: "M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6z" fill-rule="evenodd".
Clock: circle + hands: use two paths in symbol: <circle cx=12 cy=12 r=9 fill=none stroke=currentColor stroke-width=2/><path d="M12 7v5l3 2" stroke...>.
Star: standard 5-point path: M12 2l2.9 6.2 6.6.8-4.9 4.6 1.3 6.6L12 17l-5.9 3.2 1.3-6.6L2.5 9l6.6-.8z.
Plus: M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z.
X (close): M6 6l12 12M18 6L6 18 stroke.
Insta: rect rounded + circle + dot with strokes.
TikTok-ish: just use "TT"? Use a simple music-note? I'll do Instagram + X + a "map pin" instead of tiktok. Socials: Instagram, X, and "Yelp"? Keep Instagram + X + Mail icons.
Truck icon: path of truck box + wheels.
Arrow: M5 12h14M13 6l6 6-6 6 stroke.
Now code. Also careful: quotes inside JS template strings fine.
Nav links: MENU, BUILD-A-TACO, FIND THE TRUCK, STORY.
Let me write everything.
CSS length concerns — fine.
Also make sure to include hover states on everything interactive, focus-visible styles maybe.
Write final HTML now, mentally checking syntax as I go.
Extra check — toast uses no blocked APIs. No localStorage. No alert. Good.
For the "challenge" body effect: body.quake{animation:quake .5s} keyframes shake. Add red vignette via ::after? Use a fixed overlay div #flash that gets .on class → red flash fading. Simple.
Ticket build number: "Nº " + random 3 digits — regenerate per render? Keep stable per page load.
Menu items with add buttons: data-name data-price attributes; JS binds.
Order modal: id cartModal; render list: rows with name, price, remove button (× svg). Total. Place order → random order id "KL-" + 4 digits, toast "Order #KL-4821 confirmed — 12 min to the window.", clear cart, close modal.
If cart empty on open: show "Nothing yet. The kimchi is getting impatient."
Edge: modal open — lock scroll body.modal-open{overflow:hidden}.
Now writing. I'll number ingredients order/layering: layer order array: ['rice','bulgogi','tofu','kimchi','slaw','queso','shallots','aioli'] — but SVG group order fixed in markup (paint order); toggling doesn't reorder. Since layers predefined, stacking visual is fixed; fine.
Chip grid: flex wrap.
Also disable? No.
Spice sums: bulgogi1, tofu0, kimchi2, slaw0, queso0, aioli2, rice0, shallots0. Max with protein+4 others: choose kimchi+aioli+? only 2 spice sources → max 1+2+2=5 exactly if both + protein. Good, 5 achievable.
Name second word rules order: spice>=5 → "Volcán", >=4 → "Inferno", >=3 → "Fuego", kimchi&&aioli → "Slapper", shallots → "Cruncher", slaw&&queso → "Fusion", count>=3 → "Combo", default "Classic".
First: protein bulgogi "Seoul", tofu "K-Pop", none "Naked".
Default state: bulgogi + kimchi selected → spice 3 → "The Seoul Fuego". Hmm "Fuego" fine. Maybe with default slaw too → kimchi+aioli? Default selection: bulgogi, kimchi, slaw → spice 3 → "The Seoul Fuego". OK.
If nothing selected: name "The Naked Tortilla", price 3.
Alright — write it.
For scroll offset with sticky nav: sections scroll-margin-top:90px.
Write the code now, final answer as single html code block.
Also remember: response must be ONLY the code block, and include a brief text explanation after? Rules conflict: system says reply with exactly one fenced code block, no text before or after. Follow that strictly — code block only.
Hmm, but generally I like adding a brief explanation; the output rules override: "No text before or after the code block." I'll comply with the platform rules.
Let me carefully draft the SVG taco (builder version):
```html
<svg viewBox="0 0 400 300" class="taco-svg" aria-hidden="true">
<ellipse cx="200" cy="252" rx="140" ry="12" fill="#181310" opacity=".12"/>
<!-- shell -->
<path d="M50 208 A150 150 0 0 1 350 208 Z" fill="#EFC15E" stroke="#181310" stroke-width="6" stroke-linejoin="round"/>
<path d="M50 208 A150 150 0 0 1 350 208" fill="none" stroke="#181310" stroke-width="6"/>
<!-- crease -->
<path d="M200 58 Q188 130 197 208" fill="none" stroke="#181310" stroke-width="3" opacity=".25"/>
<path d="M120 84 Q120 140 128 200" fill="none" stroke="#181310" stroke-width="3" opacity=".18"/>
<path d="M280 84 Q280 140 272 200" fill="none" stroke="#181310" stroke-width="3" opacity=".18"/>
<!-- toasted spots -->
<ellipse cx="120" cy="180" rx="16" ry="9" fill="#D89A2B" opacity=".55" transform="rotate(-18 120 180)"/>
<ellipse cx="285" cy="175" rx="14" ry="8" fill="#D89A2B" opacity=".55" transform="rotate(14 285 175)"/>
<ellipse cx="200" cy="196" rx="18" ry="8" fill="#D89A2B" opacity=".4"/>
...
```
Wait — toasted spots at y 175-196 are above the rim? The shell interior spans y 58–208 within dome; spots inside dome area near bottom are fine (they're on the shell front face). But fillings drawn after would cover center spots. Draw spots after fillings, positioned on lower dome area (y 190-205 region edges). Fillings bottoms at ~210 extend into shell; spots on sides x<100 or x>300 remain visible.
Fillings groups:
rice:
```html
<g id="ing-rice" class="ing">
<g fill="#F7F1E3" stroke="#181310" stroke-width="2.5">
<circle cx="95" cy="200" r="6"/><circle cx="120" cy="192" r="6"/><circle cx="150" cy="198" r="6"/><circle cx="185" cy="190" r="6"/><circle cx="220" cy="197" r="6"/><circle cx="255" cy="191" r="6"/><circle cx="290" cy="198" r="6"/><circle cx="315" cy="202" r="6"/>
</g>
<g fill="#4C8C55">
<circle cx="110" cy="203" r="3"/><circle cx="170" cy="202" r="3"/><circle cx="235" cy="203" r="3"/><circle cx="300" cy="203" r="3"/>
</g>
</g>
```
bulgogi (strips):
```html
<g id="ing-bulgogi" class="ing" stroke="#181310" stroke-width="3">
<rect x="80" y="168" width="70" height="14" rx="7" fill="#7A4A2B" transform="rotate(-8 115 175)"/>
<rect x="150" y="158" width="80" height="14" rx="7" fill="#8A5631" transform="rotate(5 190 165)"/>
<rect x="235" y="165" width="72" height="14" rx="7" fill="#7A4A2B" transform="rotate(-6 271 172)"/>
<rect x="105" y="185" width="66" height="13" rx="6" fill="#8A5631" transform="rotate(6 138 191)"/>
<rect x="205" y="186" width="76" height="13" rx="6" fill="#7A4A2B" transform="rotate(-4 243 192)"/>
<rect x="285" y="188" width="52" height="12" rx="6" fill="#8A5631" transform="rotate(8 311 194)"/>
</g>
```
tofu:
```html
<g id="ing-tofu" class="ing" stroke="#181310" stroke-width="3">
<rect x="100" y="172" width="26" height="24" rx="4" fill="#EAD9A6" transform="rotate(-10 113 184)"/>
<rect x="160" y="164" width="26" height="24" rx="4" fill="#EAD9A6" transform="rotate(8 173 176)"/>
<rect x="225" y="170" width="26" height="24" rx="4" fill="#EAD9A6" transform="rotate(-6 238 182)"/>
<rect x="285" y="176" width="24" height="22" rx="4" fill="#EAD9A6" transform="rotate(10 297 187)"/>
</g>
```
kimchi:
```html
<g id="ing-kimchi" class="ing" stroke="#181310" stroke-width="3">
<path d="M88 196 l14 -22 16 6 -4 20 z" fill="#E2492B"/>
<path d="M140 182 l18 -14 14 10 -8 20 z" fill="#F2762E"/>
<path d="M198 176 l20 -8 12 14 -14 14 z" fill="#E2492B"/>
<path d="M255 184 l16 -16 16 10 -10 18 z" fill="#F2762E"/>
<path d="M300 196 l12 -18 16 8 -6 18 z" fill="#E2492B"/>
</g>
```
slaw:
```html
<g id="ing-slaw" class="ing" fill="none" stroke-linecap="round">
<path d="M85 190 q14 -18 30 -4 q10 10 24 2" stroke="#4C8C55" stroke-width="7"/>
<path d="M160 178 q16 -16 32 -2 q12 10 26 0" stroke="#6FA05C" stroke-width="7"/>
<path d="M240 186 q14 -18 30 -4 q10 8 24 2" stroke="#4C8C55" stroke-width="7"/>
<path d="M120 200 q12 -12 26 -2" stroke="#9BC178" stroke-width="5"/>
<path d="M285 202 q12 -12 26 -2" stroke="#9BC178" stroke-width="5"/>
<path d="M195 202 q12 -12 26 -2" stroke="#9BC178" stroke-width="5"/>
</g>
```
queso:
```html
<g id="ing-queso" class="ing" fill="#FBF6EA" stroke="#181310" stroke-width="2.5">
<circle cx="105" cy="188" r="7"/><circle cx="145" cy="176" r="6"/><circle cx="205" cy="182" r="7"/><circle cx="250" cy="172" r="6"/><circle cx="300" cy="186" r="7"/><circle cx="180" cy="196" r="5"/><circle cx="270" cy="196" r="5"/>
</g>
```
shallots:
```html
<g id="ing-shallots" class="ing" fill="#6B3F1E" stroke="#181310" stroke-width="2">
<rect x="110" y="172" width="10" height="10" rx="2" transform="rotate(20 115 177)"/>
<rect x="165" y="164" width="10" height="10" rx="2" transform="rotate(-15 170 169)"/>
<rect x="215" y="170" width="10" height="10" rx="2" transform="rotate(30 220 175)"/>
<rect x="265" y="164" width="10" height="10" rx="2" transform="rotate(-25 270 169)"/>
<rect x="305" y="176" width="10" height="10" rx="2" transform="rotate(12 310 181)"/>
<rect x="140" y="186" width="9" height="9" rx="2" transform="rotate(-30 144 190)"/>
<rect x="240" y="188" width="9" height="9" rx="2" transform="rotate(18 244 192)"/>
</g>
```
aioli drizzle (drawn last):
```html
<g id="ing-aioli" class="ing">
<path d="M75 178 q12 -14 24 0 t24 0 t24 0 t24 0 t24 0 t24 0 t24 0 t24 0 t24 0" fill="none" stroke="#E2492B" stroke-width="8" stroke-linecap="round"/>
</g>
```
Check: starting x75, each t24 advances 24 → 75+24*9=291. Path ends 291? "t" repeats reflected quad — good zigzag wave. Slightly cover y 164-178 region. But wait, drizzle at y~164-178 might sit above protein tops (proteins at y158+). OK visually draping over.
Hero taco: same svg but with on classes for bulgogi, kimchi, slaw, queso, aioli, plus steam group:
```html
<g class="steam" stroke="#181310" stroke-width="4" fill="none" stroke-linecap="round" opacity=".5">
<path class="s1" d="M150 120 q-10 -18 4 -34 q12 -14 2 -30"/>
<path class="s2" d="M205 108 q-10 -18 4 -34 q12 -14 2 -30"/>
<path class="s3" d="M258 118 q-10 -18 4 -34 q12 -14 2 -30"/>
</g>
```
Wait taco top at y=55 (center 208, r 150). Steam should rise from y~110 up to ~40 — but taco dome apex is y58, fillings top ~150. Steam above taco at y 20-50? Steam should come from fillings (y~150) upward past apex? That'd overlap dome. Hmm — steam drawn behind taco? Then hidden. Steam from the filling line rising in front would cover shell. Common illustration: steam above whole taco. I'll place steam x positions near apex area above y=55: paths around y 45 down to... Actually simplest: steam paths from y=115 up to y=15 but drawn BEFORE shell (behind) — visible only above dome silhouette near apex? They'd be hidden behind dome for y>58 only if within dome x-range... dome at y=115 spans x where? Dome top region: at y=115, half-width = sqrt(r²-(y_c - y)²) with center 208: dy=93, halfw= sqrt(150²-93²)=sqrt(22500-8649)=sqrt(13851)≈118 → x from 82 to 318. So steam at x=150,205,258, y 15–115 would be visible only above y=58 boundary... below y=58 they're behind shell (hidden). That actually looks right: wisps emerging from behind the taco top! Draw steam first (before shell).
Steam animation: keyframes steamRise{0%{transform:translateY(6px);opacity:0} 30%{opacity:.55} 100%{transform:translateY(-14px);opacity:0}} durations 2.6s staggered delays, infinite.
Hero taco wrapper .float{animation: bob 5s ease-in-out infinite} keyframes translateY(-10px) rotate(-2deg).
Hero sticker badges: absolutely positioned rotated divs:
- top-left of stage: yellow "18-DAY KIMCHI" stamp circle? Rect sticker with dashed border.
- bottom-right: red circle badge "★ 4.9 — RATED BY THE LINE" white text.
Circular rotating text badge: SVG 120x120 with defs path circle id and textPath "KIMCHI LOCO ★ KOREAN TACOS ★ " repeated; animate rotation via CSS on the svg (transform-origin center). Place bottom-left overlapping hero text? Place top-right of hero stage.
Now the map SVG:
```html
<svg viewBox="0 0 360 240">
<rect width="360" height="240" fill="#EFE6D4"/>
<!-- blocks -->
<g fill="#E3D8C2">
<rect x="20" y="20" width="130" height="80" rx="6"/>
<rect x="210" y="20" width="130" height="80" rx="6"/>
<rect x="20" y="150" width="130" height="70" rx="6"/>
<rect x="210" y="150" width="130" height="70" rx="6"/>
</g>
<!-- streets -->
<g stroke="#181310" stroke-width="10" stroke-linecap="round" opacity=".9">
<line x1="0" y1="115" x2="360" y2="115"/>
<line x1="180" y1="0" x2="180" y2="240"/>
</g>
dashed center lines white
labels: "PALM AVE" rotated, "3RD ST"
pin at (180,115): pulsing circles + truck? Place pin slightly off (196,100).
</svg>
```
Pin: <g class="pin"> circle r26 fill red opacity anim pulse; circle r8 ink; label bubble above: rect + text "KIMCHI LOCO" mono. Pulse via CSS on circle.pulse{animation:pulse 1.6s infinite} keyframes r? can't animate r in CSS reliably (Chrome can animate r as CSS property! r is a CSS property in Chrome). Use transform scale on a <g> instead for safety: <g class="pulse" style="transform-origin...">—SVG transform-origin tricky; use transform-box:fill-box. I'll animate opacity + scale via CSS with transform-box:fill-box; transform-origin:center. Works in Chrome.
Street labels: <text> with mono font, fill ink opacity .5.
Now writing full file. Also nav logo mini taco: tiny svg 34x24: path M4 20 a14 14 0 0 1 28 0 z fill shell + green/red dots.
Fonts for body: 'Helvetica Neue', Arial... Arial usage as body — allowed since identity is Impact. Actually just use system stack for body but I claimed avoid system-ui as identity — body fine.
Let me count sections and write.
One more consideration: 1280x800 first paint must show hero nicely — hero min-height ~88vh. Good.
Write final code:
Also add selection color styling, scrollbar? Skip scrollbar styling.
Menu data as HTML:
```html
<div class="menu-list">
<article class="mi rv">
<div class="mi-top"><span class="mi-num mono">01</span>
<h3 class="mi-name disp">Kimchi Bulgogi Taco</h3>
<span class="dots"></span>
<span class="mi-price disp">$4.50</span>
<button class="mi-add" data-name="Kimchi Bulgogi Taco" data-price="4.5" aria-label="Add">+svg</button>
</div>
<p class="mi-desc">18-day kimchi, caramelized soy-marinated beef, sesame slaw, gochujang aioli.</p>
<div class="mi-tags"><span class="tag tag-red">Signature</span><span class="tag tag-red2">Spicy</span></div>
</article>
...
</div>
```
Hmm tags under desc. Rows separated by 2px ink border-top; last border-bottom.
Hover: .mi:hover{background:#EFE4CF} .mi:hover::before bar grows — use ::before absolute left bar height transition. Add position relative, padding-left grows? Just a left red bar 0→8px via box-shadow inset? Simple: .mi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:var(--red);transition:width .25s} .mi:hover::before{width:8px}. With padding-left constant, bar sits at edge. OK.
Builder markup:
```html
<section id="build" class="sec">
<div class="wrap">
<div class="sec-head rv"> eyebrow + h2 "BUILD YOUR LOCURA" + note</div>
<div class="builder">
<div class="b-left rv">
<p class="mono b-label">01 — PICK YOUR STACK</p>
<div class="chips" id="chips"></div> <!-- JS-generated buttons -->
<p class="mono b-label">02 — CHECK THE HEAT</p>
<div class="heat"><div class="flames" id="flames"></div><span id="heatWord"></span></div>
<a/button id="waiverBtn" class="linkish">Think you can go hotter? Take the Gochujang Challenge →</button>
</div>
<div class="b-right rv">
<div class="taco-box"> svg + halftone bg </div>
<div class="ticket" id="ticket">
header "ORDER TICKET — BUILD YOUR OWN"
<h3 id="tacoName">The Seoul Fuego</h3>
<ul id="tacoList"></ul>
<div class="t-total mono">TOTAL <b id="tacoTotal">$6.75</b></div>
<button id="addBuild" class="btn btn-red">ADD TO ORDER</button>
</div>
</div>
</div>
</div>
</section>
```
Chips generated by JS to keep markup lean.
Ticket list shows each selected ingredient name + price, plus "Pressed tortilla — $3.00".
Now, write it all. I'll be meticulous with the JS.
Also: define function fmt(n){return '$'+n.toFixed(2)}.
Edge: cart badge hidden when 0.
Write CSS for chips:
.chip{display:inline-flex;align-items:center;gap:8px;border:2.5px solid var(--ink);background:#FFFDF6;padding:9px 14px;cursor:pointer;font-family mono? name in body bold; box-shadow:3px 3px 0 var(--ink); transition...}
.chip .dot{width:12px;height:12px;border-radius:50%;background:var(--c);border:2px solid ink}
.chip.on{background:var(--ink);color:var(--paper)} .chip.on .price{color:var(--yellow)}.
Hover: translate -1,-1 shadow 4.
Flames: 5 svg use icons; .flames svg{width:26px;fill:#D8CFBC} .flames svg.lit{fill:var(--red); + small drop shadow?}. transition fill.
OK — final write-up. Also ensure heatWord link to waiver when 5: make word clickable button.
Now produce final code. I'll write it in one pass, double-checking bracket balance.
Regarding marquee duplication: two spans each containing the phrase repeated 4 times; animation translateX(-50%). Ensure spans display:inline-block, padding-right.
Also top thin marquee maybe static instead — one marquee above nav (thin, ink bg, yellow text, slow), one red marquee between hero and menu, one before truck. Two-three marquees total; keep 2 to avoid noise: thin top one + red divider. Actually a red one after menu too. Two dividers fine.
Footer giant text: outlined, font-size clamp(48px,10vw,120px), -webkit-text-stroke ink, transparent fill, opacity .9.
Focus states: :focus-visible{outline:3px dashed var(--red); outline-offset:2px}.
Let me write JS fully:
```js
(function(){
'use strict';
// helpers
const $=s=>document.querySelector(s), $$=s=>[...document.querySelectorAll(s)];
const fmt=n=>'$'+n.toFixed(2);
/* toast */
const toasts=$('#toasts');
function toast(msg){
const t=document.createElement('div');
t.className='toast';
t.textContent=msg;
toasts.appendChild(t);
requestAnimationFrame(()=>t.classList.add('show'));
setTimeout(()=>{t.classList.remove('show');setTimeout(()=>t.remove(),350)},3400);
}
/* schedule + status */
const SCHED=[
{label:'Sunday',loc:'Southbank Brunch Market',addr:'412 Riverwalk',open:[10,16],hrs:'10AM – 4PM'},
null,
{label:'Tuesday',loc:'The Grove Food Pod',addr:'518 Palm Ave',open:[11,21],hrs:'11AM – 9PM'},
{label:'Wednesday',loc:'Civic Center Plaza',addr:'200 Main St',open:[11,21],hrs:'11AM – 9PM'},
{label:'Thursday',loc:'The Grove Food Pod',addr:'518 Palm Ave',open:[11,21],hrs:'11AM – 9PM'},
{label:'Friday',loc:'Riverside Night Market',addr:'77 Water St',open:[11,21],hrs:'11AM – 9PM'},
{label:'Saturday',loc:'Riverside Night Market',addr:'77 Water St',open:[11,21],hrs:'11AM – 9PM'}
];
function getStatus(){
const now=new Date(), d=now.getDay(), h=now.getHours()+now.getMinutes()/60, s=SCHED[d];
if(!s)return{open:false,msg:'CLOSED MONDAYS · BACK TUE 11AM'};
if(h>=s.open[0]&&h<s.open[1])return{open:true,msg:'OPEN NOW · '+s.loc};
if(h<s.open[0])return{open:false,msg:'OPENS '+s.open[0]+'AM · '+s.loc};
return{open:false,msg:'CLOSED · BACK '+(d===6?'SUN':'TOMORROW')+' 11AM'};
}
```
Careful: d===6 is Saturday→ next Sunday. Sunday close → back Tuesday. Handle: if d===0 → 'TUE'. else 'TOMORROW'.
```js
function paintStatus(){
const st=getStatus();
$$('.js-status').forEach(el=>{
el.textContent=st.msg;
el.classList.toggle('is-open',st.open);
});
// schedule rows highlight
const d=new Date().getDay();
$$('.sched-row').forEach(r=>{r.classList.toggle('today',+r.dataset.d===d)});
const today=SCHED[d];
$('#todayBox').innerHTML= today? `<span class="mono">${today.label.toUpperCase()}</span><strong>${today.loc}</strong><span class="mono dim">${today.addr} · ${today.hrs}</span>` : '<strong>Closed today</strong><span class="mono dim">Back Tuesday, 11AM sharp.</span>';
}
```
Sunday hrs 10AM-4PM — the "BACK ... 11AM" is wrong for tomorrow-if-today-Sunday... if today Sunday after 16 → back Tue. Add: if d===0 msg 'CLOSED · BACK TUE 11AM'. Fine handle inline.
Cart:
```js
const cart=[];
const cartCount=$('#cartCount'), cartList=$('#cartList'), cartTotalEl=$('#cartTotal'), cartBtn=$('#cartBtn');
function updateCart(){
const n=cart.length;
cartCount.textContent=n;
cartCount.classList.toggle('show',n>0);
cartBtn.classList.add('bump'); setTimeout(()=>cartBtn.classList.remove('bump'),300);
if(!cart.length){cartList.innerHTML='<p class="cart-empty">Nothing yet. The kimchi is getting impatient.</p>';cartTotalEl.textContent='$0.00';return;}
cartList.innerHTML=cart.map((it,i)=>`<li><span>${it.name}</span><span class="cart-line"><b>${fmt(it.price)}</b><button class="rm" data-i="${i}" aria-label="Remove">×</button></span></li>`).join('');
cartTotalEl.textContent=fmt(cart.reduce((a,b)=>a+b.price,0));
}
cartList.addEventListener('click',e=>{const b=e.target.closest('.rm');if(!b)return;cart.splice(+b.dataset.i,1);updateCart();});
```
'×' char ok.
Modal helpers:
```js
function openModal(id){$(id).classList.add('open');document.body.classList.add('lock')}
function closeModal(m){m.classList.remove('open');document.body.classList.remove('lock')}
$$('.modal').forEach(m=>{
m.addEventListener('click',e=>{if(e.target===m)closeModal(m)});
m.querySelectorAll('.m-close').forEach(b=>b.addEventListener('click',()=>closeModal(m)));
});
document.addEventListener('keydown',e=>{if(e.key==='Escape')$$('.modal.open').forEach(closeModal)});
```
Quick add bind:
```js
$$('.mi-add').forEach(b=>b.addEventListener('click',()=>{
addToCart(b.dataset.name,+b.dataset.price);
}));
function addToCart(name,price){cart.push({name,price});updateCart();toast(name+' added — see you at the window.')}
```
Place order:
```js
$('#placeOrder').addEventListener('click',()=>{
if(!cart.length){toast("Cart's empty — build a taco first.");return;}
const id='KL-'+(1000+Math.floor(Math.random()*9000));
cart.length=0;updateCart();closeModal($('#cartModal'));
toast('Order '+id+' confirmed. Ready at the window in ~12 min.');
});
```
Builder:
```js
const INGS=[
{id:'bulgogi',name:'Bulgogi Beef',price:2.5,spice:1,prot:true,color:'#7A4A2B',blurb:'soy-pear marinade, 40 sec on the flat-top'},
{id:'tofu',name:'Tofu Bulgogi',price:2,spice:0,prot:true,color:'#EAD9A6',blurb:'same marinade, zero cows'},
{id:'kimchi',name:'Napa Kimchi',price:1,spice:2,color:'#E2492B',blurb:'18-day ferment, grilled crisp'},
{id:'slaw',name:'Sesame Slaw',price:.75,spice:0,color:'#4C8C55',blurb:'cabbage, scallion, toasted sesame'},
{id:'queso',name:'Cotija Queso',price:1,spice:0,color:'#FBF6EA',blurb:'salty, crumbly, essential'},
{id:'rice',name:'Cilantro Rice',price:1,spice:0,color:'#F7F1E3',blurb:'stuffed in there anyway'},
{id:'shallots',name:'Fried Shallots',price:.5,spice:0,color:'#6B3F1E',blurb:'the crunch layer'},
{id:'aioli',name:'Gochujang Aioli',price:.75,spice:2,color:'#E2492B',blurb:'drizzled with zero restraint'}
];
const BASE=3;
const sel=new Set(['bulgogi','kimchi','slaw']);
const chipsEl=$('#chips');
INGS.forEach(g=>{
const b=document.createElement('button');
b.className='chip';b.dataset.id=g.id;b.type='button';
b.innerHTML=`<span class="dot" style="background:${g.color}"></span><span class="cn">${g.name}</span><span class="cp">${fmt(g.price)}</span>`;
b.title=g.blurb;
b.addEventListener('click',()=>toggle(g));
chipsEl.appendChild(b);
});
function toggle(g){
if(sel.has(g.id)){sel.delete(g.id);}
else{
if(g.prot){sel.forEach(id=>{const o=INGS.find(x=>x.id===id);if(o.prot)sel.delete(id)});sel.add(g.id);}
else{
if(sel.size>=5){toast("Five's the max — even the truck has limits.");return;}
sel.add(g.id);
}
}
render();
}
function heatWord(v){return v>=5?['5 — SIGN THE WAIVER','SIGN THE WAIVER']:v>=4?['4 — HOT HOT','HOT HOT']:v>=3?['3 — SPICY','SPICY']:v>=2?['2 — WARM','WARM']:v>=1?['1 — MELLOW','MELLOW']:['0 — MILD','MILD']}
function tacoName(){
const has=id=>sel.has(id);
const prot=has('bulgogi')?'Seoul':has('tofu')?'K-Pop':'Naked';
const spice=[...sel].reduce((a,id)=>a+INGS.find(x=>x.id===id).spice,0);
let second='Classic';
if(spice>=5)second='Volcán';else if(spice>=4)second='Inferno';else if(spice>=3)second='Fuego';
else if(has('kimchi')&&has('aioli'))second='Slapper';
else if(has('shallots'))second='Cruncher';
else if(has('slaw')&&has('queso'))second='Fundidor';
else if(sel.size>=4)second='Everything';
return 'The '+prot+' '+second;
}
function render(){
// chips + svg groups
$$('#chips .chip').forEach(c=>c.classList.toggle('on',sel.has(c.dataset.id)));
INGS.forEach(g=>{const el=document.getElementById('ing-'+g.id);if(el)el.classList.toggle('on',sel.has(g.id))});
const spice=[...sel].reduce((a,id)=>a+INGS.find(x=>x.id===id).spice,0);
const total=BASE+[...sel].reduce((a,id)=>a+INGS.find(x=>x.id===id).price,0);
const [code,word]=heatWord(spice);
$('#heatWord').textContent=code;
$('#heatWord').classList.toggle('max',spice>=5);
const flames=$('#flames');
flames.innerHTML='';
for(let i=0;i<5;i++){const s=document.createElementNS('http://www.w3.org/2000/svg','svg');s.setAttribute('viewBox','0 0 24 24');const u=document.createElementNS('http://www.w3.org/2000/svg','use');u.setAttribute('href','#i-flame');s.appendChild(u);if(i<spice)s.classList.add('lit');flames.appendChild(s);}
$('#tacoName').textContent=tacoName();
$('#tacoTotal').textContent=fmt(total);
const ul=$('#tacoList');
ul.innerHTML='<li><span>Pressed flour tortilla</span><b>'+fmt(BASE)+'</b></li>'+[...sel].map(id=>{const g=INGS.find(x=>x.id===id);return '<li><span>'+g.name+'</span><b>'+fmt(g.price)+'</b></li>'}).join('');
$('#waiverLink').style.display=spice>=5?'inline':'none';
}
$('#addBuild').addEventListener('click',()=>{
addToCart(tacoName(),BASE+[...sel].reduce((a,id)=>a+INGS.find(x=>x.id===id).price,0));
toast('Nice build. '+ 'Add another?');
});
```
Hmm duplicate toasts when adding; addToCart already toasts. Just call addToCart only.
Waiver:
```js
$('#challengeBtn').addEventListener('click',()=>openModal('#waiverModal'));
// heatWord click when max opens waiver
$('#heatWord').addEventListener('click',()=>{ if($('#heatWord').classList.contains('max')) openModal('#waiverModal');});
```
Make heatWord a <button> for that.
Waiver sign:
```js
$('#signBtn').addEventListener('click',()=>{
const cb=$('#wAgree');
if(!cb.checked){toast('You have to check the box. Physics of liability.');return;}
closeModal($('#waiverModal'));
document.body.classList.add('quake');setTimeout(()=>document.body.classList.remove('quake'),600);
const f=$('#flash');f.classList.add('on');setTimeout(()=>f.classList.remove('on'),500);
// max the build
sel.clear();sel.add('bulgogi');sel.add('kimchi');sel.add('aioli');sel.add('shallots');sel.add('slaw');
render();
toast('Waiver signed. The Double Gochujang build is loaded.');
});
```
Cart button opens modal; nav order button = cartBtn opens cart modal.
Reveal IO.
Smooth anchor default via CSS.
Init: render(); paintStatus(); updateCart();
Also setInterval for status every 60s? once fine.
Right — also add "scroll to build" CTA buttons in hero linking #build and #menu.
Also badge count element inside cart button: <span class="badge" id="cartCount">0</span>.
Let me also handle the hero primary button "ORDER AHEAD" opening cart modal too (same as cartBtn? two buttons; give class .js-cart open cart modal).
Now CSS writing — I'll produce the final file. Estimate ~950 lines total; acceptable.
Also check no console errors: getElementById for '#todayBox' etc exist. textContent on #heatWord button. Fine.
One caution: `use href="#i-flame"` inside dynamically created SVG — works in Chrome.
Chips contain two-word names; mobile wrap fine.
Write CSS mobile breakpoints:
@media(max-width:960px){hero grid 1col; builder 1col; truck grid 1col; nav links display none}
@media(max-width:560px){font adjustments; facts wrap}
Ensure hero h1 lines: KIMCHI / LOCO with responsive clamp.
Also add "scroll hint" arrow bottom hero? Skip.
Alright, final answer.
Careful with the svg textPath circular badge:
```html
<svg class="spin-badge" viewBox="0 0 120 120">
<defs><path id="circ" d="M60,60 m-44,0 a44,44 0 1,1 88,0 a44,44 0 1,1 -88,0"/></defs>
<circle cx="60" cy="60" r="58" fill="var(--red)"? -- fill can't use CSS var inside attr? It can: fill="var(--red)" works in SVG2/Chrome as presentation attr? Actually CSS vars work in presentation attributes? No — presentation attributes don't support var(); but style="fill:var(--red)" does. Use style attr.
<circle cx="60" cy="60" r="58" style="fill:var(--red)" stroke="#181310" stroke-width="3"/>
<text style="font:700 11px 'Courier New',monospace;letter-spacing:2.5px;fill:#F4EDE0"><textPath href="#circ">KIMCHI LOCO · KOREAN TACOS · EST. 2021 ·</textPath></text>
<use href="#i-star" ... center star: place via <g transform="translate(60 60)"><use href="#i-star" x="-9" y="-9" width="18" height="18"/></g> — use with width/height works.
</svg>
```
Text length must roughly fit circumference 2π*44≈276px. "KIMCHI LOCO · KOREAN TACOS · EST. 2021 ·" ~ 40 chars * (11*0.6+2.5)≈ 40*9.1≈364 — too long. Reduce font to 9px ls 2: 40*(5.4+2)=296. Close; textPath overflow just gets clipped—acceptable but may cut "·". Use "KIMCHI LOCO ★ SEOUL SOUL ★ SINCE 2021 ★" 39 chars. I'll set font 9.5px and accept clipping. Or radius 46. Fine-tune: font-size 10, letter-spacing 1.5 → 40*(6+1.5)=300 vs circumference 2π46≈289. Slight clip; ok-ish. Alternatively add textLength? Keep simple; minor.
Spin animation: .spin-badge{animation:spin 14s linear infinite} @keyframes spin{to{transform:rotate(360deg)}}.
Position: absolute top:-10px right:-10px of taco stage; hidden on very small? Keep, scale down.
OK write final.
Also for menu row grid:
.mi-top{display:flex;align-items:baseline;gap:14px}
.mi-name{font-size:clamp(20px,2.6vw,30px)}
.mi-num{color:var(--red)}
.mi-add{margin-left:8px; width:38px;height:38px;border-radius:50%;border:2.5px solid ink;background:paper;display:grid;place-items:center;cursor:pointer;transition;flex:none;align-self:center}
.mi-add:hover{background:var(--red);color:paper;transform:rotate(90deg)}
Price font-size 24.
Desc + tags in second row with left offset matching num width? Just padding-left 0; fine.
Now finalize everything into the file. Also add ::selection{background:var(--red);color:var(--paper)}.
Also hero left content: include small mono line above H1: "KOREAN × MEXICAN — ONE TRUCK, ZERO CHILL". Tagline paragraph. Buttons: [BUILD YOUR TACO →] red, [SEE THE MENU] outline. Status pill below.
Torn edge dividers? Use a zigzag border between hero and marquee? Skip; marquee strips themselves are the divider.
Double-check the heat flame use element fill: symbol path fill="currentColor" then CSS svg{color:...} lit → color:var(--red); unlit color:#D8CFBC. Good, set svg color not fill.
Symbols with stroke-based icons need stroke=currentColor within symbol paths.
Write the code now. Also validate the semicircle path arc flag: "M50 208 A150 150 0 0 1 350 208 Z" — from (50,208) to (350,208) with sweep 1 draws arc above? Sweep-flag 1 = clockwise. Going left→right clockwise arcs upward? In SVG y-down coordinates, clockwise from (50,208) to (350,208)... arc with sweep=1 goes via the top? Let's verify: for a circle centered (200,208), moving from leftmost point to rightmost point clockwise (in screen coords, clockwise means... at leftmost point, clockwise direction points upward? Clockwise in screen (y down): starting at angle 180°, clockwise decreases angle → 180°→90°? Angle measured standard math with y down flips. Ugh. Empirical knowledge: "M0 100 A50 50 0 0 1 100 100" renders arc bowing upward (through y=50). Yes — commonly used for rainbows with sweep 1 left→right. Correct.
Shell height r=150 → apex y=58. Good with viewBox 300 height: steam above y 58: steam paths around x 150-258 going from y~110 to 20 — behind shell below 58, visible above. But at x=150, dome edge at y: dy=sqrt(150²-50²)=141 → y=208-141=67. Steam visible from y=20 to ~65 near x=150. Slightly visible only top 45px. Maybe move steam wisps higher: start y=60 baseline going up to 0? viewBox 0..300 top 0. Paths: M150 92 q-10 -18 4 -34 q12 -14 2 -30 → ends ~y=28. Visible portion above ~60-67. OK visible ~y 28-65 for x150 (dome y at x=150 is 67) good.
For builder taco, no steam needed.
Taco svg display width: builder ~ min(100%, 460px).
Alright — writing the final file in the answer now. Keep it organized and complete. Also make sure JS is inside DOMContentLoaded or at end of body (end of body is fine).
Also the "story" facts strip: flex row with borders; each fact: big disp number + mono label; different rotations on hover? subtle. widths vary naturally.
Footer socials: inline svg anchors with border circles.
Let me also compute nav height ~64px.
Final check on status text for hour<open: 'OPENS 11AM · loc' — but Sunday opens 10 → 'OPENS 10AM'. Uses s.open[0]+'AM' works since both are AM.
Now write.