Food truck websiteOne-line
MiniMax M3.1 Flash
by MiniMaxReasoning1 console error
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 1 min 42 s
- Cost
- $0.015
- Output tokens
- 25,357
- Spent thinking
- 4,624 tokens
- Speed
- 250.7 tok/s
- Console errors
- 1
- First token after
- 463 ms
- First visible text after
- 35.2 s
- Prompt tokens
- 533
- Code size
- 63.5 KB
- Finish reason
- stop
- Served by
- DigitalOcean
- Model id
minimax/minimax-m3.1-flash- Reasoning sent
{"effort":"xhigh"}- Max output
- 64,000 tokens
- Generated
- Nov 11, 2026
Console errors
Caught in the first 3 seconds after load, in a sandboxed iframe like the one above.
Error: <text> attribute transform: Expected transform function, "…ate(-90 422 357)=".
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 · 1838 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#f05232">
<meta name="description" content="Kimchi Loco — bold Korean tacos, crunchy street food, and seriously good goodtimes. Find our food truck in Long Beach.">
<title>Kimchi Loco — Korean Tacos With a Twist</title>
<style>
:root {
--ink: #181914;
--cream: #f7f0df;
--paper: #fffdf6;
--red: #f05232;
--orange: #ff7438;
--lime: #c9ef3f;
--yellow: #ffc83d;
--pink: #ffb6c9;
--line: rgba(24, 25, 20, .16);
--shadow: 7px 7px 0 var(--ink);
--radius: 24px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
color: var(--ink);
background: var(--cream);
font-family: Arial, Helvetica, sans-serif;
overflow-x: hidden;
}
body.modal-open { overflow: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.wrap {
width: min(1180px, calc(100% - 48px));
margin: 0 auto;
}
.announcement {
min-height: 34px;
padding: 8px 18px;
background: var(--ink);
color: var(--cream);
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
text-align: center;
font-size: 11px;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
}
.announcement .live {
color: var(--lime);
display: inline-flex;
align-items: center;
gap: 7px;
}
.announcement .live::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--lime);
box-shadow: 0 0 0 4px rgba(201,239,63,.15);
animation: pulse 1.8s infinite;
}
.announcement .sep { color: var(--red); }
.nav {
position: relative;
z-index: 50;
height: 78px;
border-bottom: 2px solid var(--ink);
background: rgba(247,240,223,.96);
}
.nav-inner {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.logo {
display: inline-flex;
align-items: center;
gap: 11px;
flex: 0 0 auto;
}
.logo-mark {
width: 43px;
height: 43px;
border: 2px solid var(--ink);
border-radius: 50%;
background: var(--red);
box-shadow: 3px 3px 0 var(--ink);
display: grid;
place-items: center;
transform: rotate(-6deg);
}
.logo-mark svg { width: 30px; }
.logo-type {
display: flex;
flex-direction: column;
line-height: 1;
}
.logo-type strong {
font-size: 20px;
font-weight: 950;
letter-spacing: -.06em;
}
.logo-type small {
margin-top: 4px;
font-size: 8px;
font-weight: 800;
letter-spacing: .2em;
text-transform: uppercase;
}
.nav-links {
display: flex;
align-items: center;
gap: 34px;
margin-left: auto;
}
.nav-links a {
position: relative;
font-size: 12px;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
}
.nav-links a::after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: -7px;
height: 3px;
background: var(--red);
transition: right .2s ease;
}
.nav-links a:hover::after { right: 0; }
.btn {
border: 2px solid var(--ink);
min-height: 49px;
padding: 0 23px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--lime);
color: var(--ink);
font-size: 12px;
font-weight: 950;
letter-spacing: .08em;
text-transform: uppercase;
box-shadow: 4px 4px 0 var(--ink);
transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.btn:active { transform: translate(4px,4px); box-shadow: none; }
.btn.red { background: var(--red); color: #fff; }
.btn.dark { background: var(--ink); color: var(--cream); }
.btn.light { background: var(--paper); }
.btn.round { border-radius: 999px; }
.nav .btn { min-height: 43px; padding: 0 19px; }
.nav-toggle {
display: none;
width: 44px;
height: 42px;
padding: 0;
border: 2px solid var(--ink);
border-radius: 50%;
background: var(--yellow);
box-shadow: 3px 3px 0 var(--ink);
}
.nav-toggle span {
display: block;
width: 18px;
height: 2px;
margin: 4px auto;
background: var(--ink);
transition: .2s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.hero {
position: relative;
min-height: 652px;
display: grid;
grid-template-columns: .92fr 1.08fr;
align-items: center;
gap: 16px;
padding: 40px 0 48px;
isolation: isolate;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
opacity: .27;
background-image: radial-gradient(var(--ink) .8px, transparent .8px);
background-size: 19px 19px;
mask-image: linear-gradient(90deg, #000, transparent 44%);
}
.hero-copy { position: relative; z-index: 2; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 20px;
font-size: 11px;
font-weight: 950;
letter-spacing: .14em;
text-transform: uppercase;
}
.eyebrow .squiggle {
width: 34px;
height: 15px;
border-top: 3px solid var(--red);
border-radius: 50%;
transform: rotate(-8deg);
}
h1 {
margin: 0;
font-size: clamp(67px, 7.4vw, 108px);
font-weight: 950;
line-height: .78;
letter-spacing: -.075em;
text-transform: uppercase;
}
h1 > span { display: block; }
h1 .goes {
color: var(--red);
margin-top: 10px;
font-size: .8em;
letter-spacing: -.055em;
}
h1 .loco {
margin-top: 12px;
color: var(--lime);
font-family: Georgia, "Times New Roman", serif;
font-size: 1.03em;
font-style: italic;
font-weight: 900;
letter-spacing: -.09em;
text-shadow: 3px 3px 0 var(--ink);
transform: rotate(-2deg);
transform-origin: left center;
}
.hero-copy > p.desc {
max-width: 500px;
margin: 27px 0 25px;
font-size: 17px;
line-height: 1.55;
font-weight: 600;
}
.hero-copy > p.desc strong { color: var(--red); }
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
}
.hero-actions .btn { min-height: 56px; padding: 0 26px; }
.text-link {
display: inline-flex;
align-items: center;
gap: 8px;
border: 0;
background: transparent;
padding: 10px 4px;
font-size: 12px;
font-weight: 950;
letter-spacing: .09em;
text-transform: uppercase;
border-bottom: 2px solid var(--ink);
}
.text-link span { transition: transform .2s; }
.text-link:hover span { transform: translateX(4px); }
.proof {
display: flex;
align-items: center;
gap: 13px;
margin-top: 28px;
}
.faces { display: flex; padding-left: 8px; }
.face {
width: 36px;
height: 36px;
margin-left: -8px;
border: 2px solid var(--cream);
border-radius: 50%;
display: grid;
place-items: center;
font-size: 12px;
font-weight: 950;
color: var(--ink);
}
.face:nth-child(1) { background: var(--yellow); }
.face:nth-child(2) { background: var(--pink); }
.face:nth-child(3) { background: var(--lime); }
.face:nth-child(4) { background: var(--orange); }
.proof p { margin: 0; font-size: 11px; line-height: 1.35; font-weight: 800; }
.proof .stars { color: var(--red); letter-spacing: 1px; font-size: 13px; }
.hero-art {
position: relative;
width: 100%;
max-width: 625px;
margin-left: auto;
animation: float 5s ease-in-out infinite;
}
.hero-art svg { width: 100%; height: auto; overflow: visible; }
.hero-sticker {
position: absolute;
left: -13px;
bottom: 13%;
width: 132px;
height: 132px;
border-radius: 50%;
background: var(--yellow);
border: 3px solid var(--ink);
box-shadow: 6px 6px 0 var(--ink);
display: grid;
place-content: center;
text-align: center;
transform: rotate(-11deg);
z-index: 3;
}
.hero-sticker strong {
display: block;
font-size: 25px;
line-height: .9;
font-weight: 950;
letter-spacing: -.05em;
}
.hero-sticker small {
margin-top: 6px;
font-size: 8px;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
}
.hero-sticker i {
display: block;
color: var(--red);
font-size: 20px;
font-style: normal;
}
.marquee {
overflow: hidden;
border-top: 2px solid var(--ink);
border-bottom: 2px solid var(--ink);
background: var(--red);
color: var(--paper);
padding: 13px 0;
}
.marquee-track {
width: max-content;
display: flex;
align-items: center;
gap: 27px;
animation: marquee 25s linear infinite;
}
.marquee span {
font-size: 15px;
font-weight: 950;
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
}
.marquee .star { color: var(--lime); font-size: 21px; }
section { padding: 100px 0; }
.section-top {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 30px;
margin-bottom: 44px;
}
.section-kicker {
margin: 0 0 12px;
color: var(--red);
font-size: 11px;
font-weight: 950;
letter-spacing: .17em;
text-transform: uppercase;
}
h2 {
margin: 0;
font-size: clamp(42px, 5.4vw, 76px);
line-height: .95;
letter-spacing: -.065em;
font-weight: 950;
text-transform: uppercase;
}
h2 em {
color: var(--red);
font-family: Georgia, serif;
font-weight: 900;
}
.section-intro {
max-width: 390px;
margin: 0 0 6px;
font-size: 15px;
line-height: 1.6;
font-weight: 600;
}
.filters {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-bottom: 31px;
}
.filter {
border: 2px solid var(--ink);
background: transparent;
border-radius: 999px;
padding: 9px 17px;
font-size: 10px;
font-weight: 950;
letter-spacing: .11em;
text-transform: uppercase;
transition: .18s;
}
.filter:hover { background: var(--paper); }
.filter.active { background: var(--ink); color: var(--cream); }
.menu-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.menu-card {
border: 2px solid var(--ink);
border-radius: var(--radius);
background: var(--paper);
box-shadow: 5px 5px 0 var(--ink);
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease;
}
.menu-card:hover {
transform: translateY(-6px);
box-shadow: 8px 11px 0 var(--ink);
}
.menu-art {
height: 215px;
position: relative;
display: grid;
place-items: center;
overflow: hidden;
border-bottom: 2px solid var(--ink);
}
.menu-art::before {
content: "";
position: absolute;
width: 190px;
height: 190px;
border-radius: 50%;
border: 2px dashed rgba(24,25,20,.22);
animation: spin 24s linear infinite;
}
.menu-art.red { background: var(--orange); }
.menu-art.yellow { background: var(--yellow); }
.menu-art.pink { background: var(--pink); }
.menu-art.lime { background: var(--lime); }
.menu-art svg { width: 225px; height: 175px; position: relative; z-index: 1; transition: transform .25s; }
.menu-card:hover .menu-art svg { transform: rotate(-3deg) scale(1.05); }
.menu-number {
position: absolute;
top: 12px;
left: 13px;
z-index: 2;
font-size: 10px;
font-weight: 950;
letter-spacing: .1em;
}
.spicy {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
border: 1.5px solid var(--ink);
background: var(--paper);
border-radius: 999px;
padding: 5px 8px;
font-size: 8px;
font-weight: 950;
letter-spacing: .08em;
text-transform: uppercase;
}
.menu-info { padding: 20px 19px 21px; }
.menu-info h3 {
margin: 0;
font-size: 22px;
line-height: 1;
letter-spacing: -.045em;
font-weight: 950;
text-transform: uppercase;
}
.menu-info p {
min-height: 63px;
margin: 12px 0 18px;
font-size: 13px;
line-height: 1.55;
font-weight: 600;
color: #545347;
}
.menu-meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.menu-meta .price { font-size: 19px; font-weight: 950; }
.add-btn {
border: 0;
background: transparent;
font-size: 10px;
font-weight: 950;
letter-spacing: .08em;
text-transform: uppercase;
padding: 6px 0;
}
.add-btn span {
display: inline-grid;
place-items: center;
width: 23px;
height: 23px;
margin-left: 6px;
border-radius: 50%;
background: var(--red);
color: white;
font-size: 15px;
}
.menu-footnote {
margin: 28px 0 0;
text-align: center;
font-size: 11px;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
.menu-footnote a { border-bottom: 2px solid var(--red); }
.story {
background: var(--ink);
color: var(--cream);
position: relative;
overflow: hidden;
}
.story::before {
content: "";
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
background: var(--red);
filter: blur(100px);
opacity: .13;
left: -200px;
top: 80px;
}
.story-grid {
display: grid;
grid-template-columns: .85fr 1.15fr;
align-items: center;
gap: 70px;
}
.story .section-kicker { color: var(--lime); }
.story h2 { font-size: clamp(49px, 5.8vw, 82px); }
.story h2 em { color: var(--lime); }
.story-copy > p {
max-width: 470px;
margin: 27px 0 30px;
color: #d9d6c9;
font-size: 16px;
line-height: 1.7;
}
.story-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
padding: 25px 0;
margin: 0 0 30px;
border-top: 1px solid rgba(247,240,223,.18);
border-bottom: 1px solid rgba(247,240,223,.18);
}
.story-stats strong {
display: block;
color: var(--yellow);
font-size: 28px;
letter-spacing: -.05em;
}
.story-stats span {
display: block;
margin-top: 5px;
color: #aaa89e;
font-size: 9px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.truck-poster {
position: relative;
border: 2px solid var(--cream);
border-radius: 30px;
background: var(--red);
box-shadow: 12px 12px 0 var(--lime);
transform: rotate(1.5deg);
overflow: hidden;
}
.poster-label {
position: absolute;
z-index: 3;
top: 23px;
left: 25px;
padding: 9px 13px;
border: 2px solid var(--ink);
background: var(--yellow);
font-size: 10px;
font-weight: 950;
letter-spacing: .12em;
text-transform: uppercase;
transform: rotate(-3deg);
}
.truck-poster > svg { width: 100%; height: auto; }
.poster-stamp {
position: absolute;
right: 22px;
bottom: 19px;
width: 92px;
height: 92px;
border: 2px solid var(--ink);
border-radius: 50%;
background: var(--lime);
display: grid;
place-content: center;
text-align: center;
transform: rotate(8deg);
color: var(--ink);
font-size: 9px;
font-weight: 950;
line-height: 1.3;
letter-spacing: .08em;
text-transform: uppercase;
}
.poster-stamp strong { font-size: 22px; }
.location {
background: var(--yellow);
position: relative;
}
.location-grid {
display: grid;
grid-template-columns: .82fr 1.18fr;
gap: 48px;
align-items: stretch;
}
.location-card {
border: 2px solid var(--ink);
border-radius: var(--radius);
padding: 31px;
background: var(--paper);
box-shadow: var(--shadow);
}
.open-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 11px;
border-radius: 999px;
background: var(--lime);
border: 1.5px solid var(--ink);
font-size: 9px;
font-weight: 950;
letter-spacing: .12em;
text-transform: uppercase;
}
.open-pill::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ink);
}
.location-card h3 {
margin: 22px 0 10px;
font-size: 31px;
line-height: 1.05;
letter-spacing: -.05em;
text-transform: uppercase;
}
.location-card > p { margin: 0 0 24px; font-size: 14px; line-height: 1.55; }
.hours {
border-top: 2px solid var(--ink);
border-bottom: 2px solid var(--ink);
margin: 0 0 23px;
padding: 16px 0;
}
.hours div {
display: flex;
justify-content: space-between;
gap: 20px;
padding: 5px 0;
font-size: 12px;
font-weight: 800;
}
.hours div span:last-child { color: #69675b; }
.location-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.location-actions .btn { flex: 1; }
.map-panel {
min-height: 490px;
border: 2px solid var(--ink);
border-radius: var(--radius);
overflow: hidden;
background: #d9d0b5;
box-shadow: var(--shadow);
position: relative;
}
.map-panel svg { width: 100%; height: 100%; min-height: 490px; object-fit: cover; }
.map-tag {
position: absolute;
left: 22px;
bottom: 20px;
background: var(--ink);
color: var(--cream);
border: 2px solid var(--paper);
border-radius: 12px;
padding: 13px 16px;
font-size: 10px;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
}
.map-tag strong { display: block; color: var(--lime); font-size: 14px; margin-top: 3px; }
.newsletter {
padding: 75px 0;
background: var(--red);
border-top: 2px solid var(--ink);
border-bottom: 2px solid var(--ink);
}
.newsletter-grid {
display: grid;
grid-template-columns: 1fr .8fr;
align-items: center;
gap: 60px;
}
.newsletter h2 {
font-size: clamp(36px, 4.8vw, 65px);
max-width: 670px;
}
.newsletter h2 em { color: var(--lime); }
.newsletter p { margin: 13px 0 0; font-weight: 700; }
.signup {
display: flex;
gap: 10px;
padding: 9px;
border: 2px solid var(--ink);
border-radius: 999px;
background: var(--paper);
box-shadow: 5px 5px 0 var(--ink);
}
.signup input {
flex: 1;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
padding: 0 16px;
font-size: 14px;
font-weight: 700;
}
.signup input::placeholder { color: #8c897e; }
.signup button {
border: 2px solid var(--ink);
border-radius: 999px;
background: var(--ink);
color: var(--cream);
padding: 13px 22px;
font-size: 11px;
font-weight: 950;
letter-spacing: .08em;
text-transform: uppercase;
}
footer {
background: var(--ink);
color: var(--cream);
padding: 65px 0 28px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr .7fr .7fr;
gap: 70px;
padding-bottom: 48px;
}
.footer-logo .logo-type strong { font-size: 28px; }
.footer-logo p {
max-width: 330px;
margin: 20px 0 0;
color: #aaa89e;
font-size: 13px;
line-height: 1.65;
}
.footer-col h4 {
margin: 4px 0 18px;
color: var(--lime);
font-size: 10px;
letter-spacing: .15em;
text-transform: uppercase;
}
.footer-col a, .footer-col p {
display: block;
margin: 0 0 11px;
color: #d4d1c4;
font-size: 13px;
font-weight: 700;
}
.footer-col a:hover { color: var(--lime); }
.socials { display: flex; gap: 9px; margin-top: 21px; }
.socials a {
width: 38px;
height: 38px;
border: 1.5px solid #66665e;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--cream);
font-size: 11px;
font-weight: 950;
}
.socials a:hover { border-color: var(--lime); color: var(--lime); }
.footer-bottom {
border-top: 1px solid #3b3c35;
padding-top: 25px;
display: flex;
justify-content: space-between;
gap: 20px;
color: #85857c;
font-size: 10px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
}
.modal {
position: fixed;
inset: 0;
z-index: 100;
background: rgba(24,25,20,.72);
backdrop-filter: blur(6px);
display: grid;
place-items: center;
padding: 24px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .22s, visibility .22s;
}
.modal.open { opacity: 1; visibility: visible; pointer-events: auto; }
.order-sheet {
width: min(880px, 100%);
max-height: min(700px, calc(100vh - 48px));
overflow-y: auto;
background: var(--paper);
border: 2px solid var(--ink);
border-radius: 28px;
box-shadow: 10px 10px 0 var(--lime);
transform: translateY(24px) scale(.98);
transition: transform .24s;
}
.modal.open .order-sheet { transform: translateY(0) scale(1); }
.order-header {
padding: 24px 27px;
background: var(--red);
border-bottom: 2px solid var(--ink);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
color: white;
}
.order-header h3 {
margin: 0;
font-size: 31px;
letter-spacing: -.05em;
text-transform: uppercase;
}
.order-header p { margin: 5px 0 0; font-size: 12px; font-weight: 700; }
.close-modal {
width: 40px;
height: 40px;
flex: 0 0 auto;
border: 2px solid var(--ink);
border-radius: 50%;
background: var(--cream);
font-size: 23px;
line-height: 1;
box-shadow: 3px 3px 0 var(--ink);
}
.order-body {
display: grid;
grid-template-columns: 1.18fr .82fr;
}
.order-main { padding: 27px; }
.step-label {
margin: 0 0 11px;
font-size: 10px;
font-weight: 950;
letter-spacing: .13em;
text-transform: uppercase;
}
.taco-options { display: grid; gap: 9px; }
.taco-option {
width: 100%;
border: 2px solid var(--line);
border-radius: 15px;
background: white;
padding: 14px 15px;
display: grid;
grid-template-columns: 45px 1fr auto;
gap: 12px;
align-items: center;
text-align: left;
transition: .16s;
}
.taco-option:hover { border-color: var(--ink); }
.taco-option.selected { border-color: var(--ink); background: #fff8dc; box-shadow: 4px 4px 0 var(--ink); }
.option-icon {
width: 43px;
height: 43px;
border-radius: 12px;
background: var(--orange);
display: grid;
place-items: center;
font-size: 20px;
}
.taco-option:nth-child(2) .option-icon { background: var(--yellow); }
.taco-option:nth-child(3) .option-icon { background: var(--lime); }
.taco-option strong { display: block; font-size: 13px; text-transform: uppercase; }
.taco-option small { display: block; margin-top: 4px; color: #716f64; font-size: 10px; font-weight: 700; }
.taco-option .option-price { font-size: 13px; font-weight: 950; }
.heat-wrap {
margin-top: 27px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.heat-labels { display: flex; justify-content: space-between; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.heat-output { color: var(--red); }
input[type="range"] {
width: 100%;
margin: 14px 0 8px;
accent-color: var(--red);
}
.order-side {
padding: 27px;
background: var(--ink);
color: var(--cream);
display: flex;
flex-direction: column;
}
.order-side .step-label { color: var(--lime); }
.summary-taco {
border-bottom: 1px solid #45463e;
padding: 11px 0 19px;
font-size: 14px;
font-weight: 800;
}
.summary-taco span { float: right; color: var(--yellow); }
.quantity {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 0;
border-bottom: 1px solid #45463e;
}
.quantity span { font-size: 11px; font-weight: 850; text-transform: uppercase; }
.quantity-controls { display: flex; align-items: center; gap: 13px; }
.quantity-controls button {
width: 31px;
height: 31px;
border: 1.5px solid var(--cream);
border-radius: 50%;
color: var(--cream);
background: transparent;
font-size: 18px;
}
.quantity-controls output { min-width: 16px; text-align: center; font-weight: 950; }
.order-total {
display: flex;
justify-content: space-between;
align-items: end;
margin-top: 19px;
padding-top: 17px;
border-top: 1px solid #6a6a60;
font-size: 12px;
font-weight: 850;
text-transform: uppercase;
}
.order-total strong { color: var(--yellow); font-size: 27px; }
.order-side .btn { width: 100%; margin-top: auto; }
.pickup-note { margin: 13px 0 0; text-align: center; color: #99988e; font-size: 9px; line-height: 1.4; }
.toast {
position: fixed;
z-index: 200;
left: 50%;
bottom: 25px;
transform: translate(-50%, 25px);
max-width: calc(100% - 32px);
border: 2px solid var(--ink);
border-radius: 999px;
background: var(--lime);
box-shadow: 4px 4px 0 var(--ink);
padding: 13px 21px;
font-size: 12px;
font-weight: 900;
text-align: center;
opacity: 0;
visibility: hidden;
transition: .25s;
}
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mobile-order {
display: none;
position: fixed;
z-index: 40;
left: 12px;
right: 12px;
bottom: 12px;
box-shadow: 4px 4px 0 var(--ink);
}
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes pulse { 50% { opacity: .45; } }
@keyframes float { 0%,100% { transform: translateY(0) rotate(.3deg); } 50% { transform: translateY(-10px) rotate(-.5deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 980px) {
.nav-links { gap: 20px; }
.nav-links a { font-size: 10px; }
.hero { grid-template-columns: .9fr 1.1fr; min-height: 610px; }
h1 { font-size: clamp(63px, 8.5vw, 86px); }
.hero-copy > p.desc { font-size: 15px; }
.menu-grid { grid-template-columns: repeat(2, 1fr); }
.story-grid { gap: 40px; }
.location-grid { grid-template-columns: 1fr 1.15fr; gap: 32px; }
.footer-grid { gap: 40px; }
}
@media (max-width: 760px) {
.wrap { width: min(100% - 32px, 600px); }
.announcement { font-size: 9px; gap: 8px; letter-spacing: .08em; }
.announcement .desktop-only { display: none; }
.nav { height: 68px; }
.logo-mark { width: 38px; height: 38px; }
.logo-type strong { font-size: 18px; }
.nav-links {
display: none;
position: absolute;
top: 68px;
left: 0;
right: 0;
margin: 0;
padding: 22px;
background: var(--cream);
border-bottom: 2px solid var(--ink);
flex-direction: column;
align-items: stretch;
gap: 0;
}
.nav-links.open { display: flex; }
.nav-links a { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.nav-links .nav-order { display: none; }
.nav-toggle { display: block; }
.nav > .wrap > .btn { display: none; }
.hero {
grid-template-columns: 1fr;
padding: 38px 0 48px;
gap: 26px;
text-align: center;
}
.hero::before { mask-image: linear-gradient(#000, transparent 70%); }
.eyebrow { justify-content: center; }
h1 { font-size: clamp(62px, 18vw, 88px); }
.hero-copy > p.desc { margin: 24px auto; max-width: 470px; }
.hero-actions { justify-content: center; }
.proof { justify-content: center; }
.hero-art { max-width: 520px; margin: 0 auto; }
.hero-sticker { width: 105px; height: 105px; left: 0; bottom: 13%; }
.hero-sticker strong { font-size: 20px; }
.hero-sticker small { font-size: 6px; }
section { padding: 74px 0; }
.section-top { align-items: flex-start; flex-direction: column; margin-bottom: 30px; }
.section-intro { max-width: 520px; }
.menu-grid { grid-template-columns: 1fr; }
.menu-info p { min-height: 0; }
.menu-art { height: 220px; }
.story-grid { grid-template-columns: 1fr; }
.story-copy { text-align: center; }
.story-copy > p { margin-left: auto; margin-right: auto; }
.truck-poster { margin: 0 auto; max-width: 610px; }
.location-grid { grid-template-columns: 1fr; }
.map-panel { min-height: 360px; }
.map-panel svg { min-height: 360px; }
.newsletter-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; }
.signup { text-align: left; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 35px; }
.footer-logo { grid-column: 1 / -1; }
.footer-bottom { flex-direction: column; text-align: center; }
.mobile-order { display: flex; }
.modal { padding: 0; align-items: end; }
.order-sheet { max-height: 92vh; border-radius: 24px 24px 0 0; border-bottom: 0; box-shadow: none; }
.order-body { grid-template-columns: 1fr; }
.order-side { min-height: 310px; }
.order-header h3 { font-size: 25px; }
}
@media (max-width: 440px) {
.announcement .sep, .announcement .middle { display: none; }
.hero-actions { flex-direction: column; }
.hero-actions .btn { width: 100%; }
.text-link { margin-top: 3px; }
.proof { margin-top: 24px; }
.face { width: 32px; height: 32px; }
.proof p { font-size: 9px; }
.menu-grid { gap: 16px; }
.story-stats strong { font-size: 23px; }
.story-stats span { font-size: 7px; }
.location-card { padding: 24px; }
.signup { border-radius: 20px; flex-wrap: wrap; }
.signup input { min-height: 42px; }
.signup button { width: 100%; }
.footer-grid { grid-template-columns: 1fr; }
.footer-logo { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
</style>
</head>
<body>
<svg width="0" height="0" aria-hidden="true" style="position:absolute;overflow:hidden">
<defs>
<linearGradient id="shellGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffd56a"/>
<stop offset=".55" stop-color="#f4ad35"/>
<stop offset="1" stop-color="#df7625"/>
</linearGradient>
<symbol id="tacoMini" viewBox="0 0 240 180">
<ellipse cx="121" cy="153" rx="81" ry="10" fill="#181914" opacity=".16"/>
<path d="M46 66C48 119 75 151 120 154C165 151 191 119 194 66Q120 34 46 66Z" fill="url(#shellGradient)" stroke="#181914" stroke-width="5" stroke-linejoin="round"/>
<path d="M57 78Q122 51 184 76" fill="none" stroke="#181914" stroke-width="5" stroke-linecap="round"/>
<path d="M73 72L84 52L105 65L124 46L144 65L168 54L176 78Q120 56 73 72Z" fill="#713b26" stroke="#181914" stroke-width="4" stroke-linejoin="round"/>
<path d="M80 62Q111 53 133 59Q159 47 171 61" fill="none" stroke="#f05232" stroke-width="10" stroke-linecap="round"/>
<circle cx="90" cy="60" r="6" fill="#c9ef3f"/>
<circle cx="151" cy="58" r="6" fill="#c9ef3f"/>
<path d="M75 91Q120 75 166 91" fill="none" stroke="#fff8df" stroke-width="7" stroke-linecap="round"/>
<circle cx="91" cy="105" r="5" fill="#b66b28" opacity=".55"/>
<circle cx="141" cy="119" r="4" fill="#b66b27" opacity=".5"/>
<circle cx="152" cy="94" r="4" fill="#b66b27" opacity=".5"/>
<path d="M64 86Q61 65 76 60" fill="none" stroke="#c9ef3f" stroke-width="5" stroke-linecap="round"/>
</symbol>
<symbol id="chickenMini" viewBox="0 0 240 180">
<ellipse cx="121" cy="153" rx="81" ry="10" fill="#181914" opacity=".16"/>
<path d="M46 67C51 120 76 151 120 154C165 150 190 119 194 67Q120 35 46 67Z" fill="url(#shellGradient)" stroke="#181914" stroke-width="5" stroke-linejoin="round"/>
<path d="M57 78Q122 50 184 77" fill="none" stroke="#181914" stroke-width="5" stroke-linecap="round"/>
<path d="M74 72L85 49L108 61L127 43L146 61L167 50L178 73Q121 54 74 72Z" fill="#b85a2a" stroke="#181914" stroke-width="4" stroke-linejoin="round"/>
<path d="M81 56L101 69M119 47L112 67M150 56L135 70" stroke="#ffd58c" stroke-width="5" stroke-linecap="round"/>
<path d="M67 68Q86 52 105 64M129 62Q151 49 175 65" fill="none" stroke="#f05232" stroke-width="8" stroke-linecap="round"/>
<path d="M65 88Q120 70 176 88" fill="none" stroke="#fff8df" stroke-width="8" stroke-linecap="round"/>
<circle cx="88" cy="101" r="5" fill="#b66b28" opacity=".55"/>
<circle cx="146" cy="111" r="4" fill="#b66b27" opacity=".5"/>
</symbol>
<symbol id="nachoMini" viewBox="0 0 240 180">
<ellipse cx="120" cy="150" rx="85" ry="10" fill="#181914" opacity=".16"/>
<path d="M46 142Q48 94 79 83L92 110L108 75L128 105L145 74L159 102L182 83Q198 111 194 142Z" fill="#ffc83d" stroke="#181914" stroke-width="5" stroke-linejoin="round"/>
<path d="M70 92Q120 65 174 92L181 112Q121 128 62 111Z" fill="#efb735" stroke="#181914" stroke-width="4"/>
<path d="M71 96Q87 83 101 97Q118 78 135 96Q153 82 170 97" fill="none" stroke="#fff5c4" stroke-width="8" stroke-linecap="round"/>
<circle cx="83" cy="111" r="5" fill="#c9ef3f"/>
<circle cx="118" cy="103" r="5" fill="#f05232"/>
<circle cx="153" cy="108" r="5" fill="#c9ef3f"/>
<circle cx="135" cy="118" r="4" fill="#f05232"/>
</symbol>
<symbol id="drinkMini" viewBox="0 0 240 180">
<ellipse cx="120" cy="155" rx="72" ry="9" fill="#181914" opacity=".16"/>
<path d="M74 53H169L157 148H87Z" fill="#fff4cc" stroke="#181914" stroke-width="5" stroke-linejoin="round"/>
<path d="M80 75H165L160 108H84Z" fill="#f05232"/>
<path d="M91 74L96 45" stroke="#181914" stroke-width="6" stroke-linecap="round"/>
<path d="M76 112H165" stroke="#181914" stroke-width="4"/>
<circle cx="116" cy="86" r="12" fill="#ffc83d" stroke="#181914" stroke-width="3"/>
<path d="M150 40Q157 48 154 58Q146 53 150 40Z" fill="#c9ef3f" stroke="#181914" stroke-width="2"/>
<text x="121" y="133" text-anchor="middle" font-family="Arial" font-size="12" font-weight="900" fill="#181914">YUZU</text>
</symbol>
</defs>
</svg>
<div class="announcement">
<span class="live">Truck's rolling</span>
<span class="sep">✦</span>
<span class="middle">Long Beach · Thu–Sun</span>
<span class="sep desktop-only">✦</span>
<span class="desktop-only">Order ahead — skip the line</span>
</div>
<header class="nav">
<div class="wrap nav-inner">
<a class="logo" href="#home" aria-label="Kimchi Loco home">
<span class="logo-mark">
<svg viewBox="0 0 40 40" aria-hidden="true">
<path d="M7 18Q20 4 33 18Q27 31 20 34Q13 31 7 18Z" fill="#ffc83d" stroke="#181914" stroke-width="2.5" stroke-linejoin="round"/>
<path d="M10 18Q20 9 30 18" fill="none" stroke="#181914" stroke-width="2.5"/>
<path d="M13 16L20 12L27 16L22 23L15 22Z" fill="#f05232"/>
<circle cx="18" cy="15" r="2" fill="#c9ef3f"/>
</svg>
</span>
<span class="logo-type">
<strong>KIMCHI LOCO</strong>
<small>Korean Taco Truck</small>
</span>
</a>
<nav class="nav-links" id="navLinks" aria-label="Main navigation">
<a href="#menu">The Menu</a>
<a href="#story">Our Story</a>
<a href="#location">Find Us</a>
<a href="#menu">Gallery</a>
<button class="btn nav-order" data-open-order>Order Ahead</button>
</nav>
<button class="btn dark" data-open-order>Order Ahead ↗</button>
<button class="nav-toggle" id="navToggle" aria-label="Open menu" aria-expanded="false">
<span></span><span></span><span></span>
</button>
</div>
</header>
<main>
<section class="hero wrap" id="home">
<div class="hero-copy">
<p class="eyebrow"><span class="squiggle"></span> Korean tacos · California soul</p>
<h1>
<span>Kimchi</span>
<span class="goes">goes</span>
<span class="loco">Loco!</span>
</h1>
<p class="desc">Big, crispy, spicy street tacos with a seriously Korean twist. <strong>Made fresh. Loaded with flavor.</strong> Zero sad desk lunches allowed.</p>
<div class="hero-actions">
<button class="btn red" data-open-order>Build your taco <span>↗</span></button>
<a class="text-link" href="#menu">Explore the menu <span>→</span></a>
</div>
<div class="proof">
<div class="faces" aria-hidden="true">
<span class="face">J</span>
<span class="face">M</span>
<span class="face">S</span>
<span class="face">+</span>
</div>
<p><span class="stars">★★★★★</span><br>4.9 from 1,200+ hungry humans</p>
</div>
</div>
<div class="hero-art">
<svg viewBox="0 0 660 610" role="img" aria-label="Illustrated Kimchi Loco taco with beef, kimchi, egg and scallions">
<defs>
<linearGradient id="heroShell" x1="0" y1="0" x2=".8" y2="1">
<stop offset="0" stop-color="#ffdb78"/>
<stop offset=".58" stop-color="#f5ae36"/>
<stop offset="1" stop-color="#df7724"/>
</linearGradient>
<pattern id="tinyDots" width="14" height="14" patternUnits="userSpaceOnUse">
<circle cx="2" cy="2" r="1.7" fill="#181914" opacity=".14"/>
</pattern>
</defs>
<path d="M102 221C83 128 160 58 259 73C347 29 451 68 487 150C579 174 603 291 536 370C548 458 454 528 365 502C290 563 163 515 135 425C49 376 56 278 102 221Z" fill="#f05232" stroke="#181914" stroke-width="5"/>
<path d="M102 221C83 128 160 58 259 73C347 29 451 68 487 150C579 174 603 291 536 370C548 458 454 528 365 502C290 563 163 515 135 425C49 376 56 278 102 221Z" fill="url(#tinyDots)"/>
<g stroke="#181914" stroke-width="4" stroke-linecap="round" opacity=".25">
<path d="M155 93L128 51M188 76L174 28M239 70L239 19M420 72L446 27M466 99L508 59"/>
<path d="M551 218L602 197M558 261L616 263M530 427L579 459"/>
</g>
<g transform="translate(34 25) rotate(-7 300 285)">
<ellipse cx="299" cy="490" rx="196" ry="31" fill="#181914" opacity=".18"/>
<path d="M122 218C116 304 151 424 246 466C340 507 441 438 466 328C479 274 464 230 438 196C351 152 211 167 122 218Z" fill="url(#heroShell)" stroke="#181914" stroke-width="7" stroke-linejoin="round"/>
<path d="M137 232C190 202 390 188 447 223" fill="none" stroke="#181914" stroke-width="7" stroke-linecap="round"/>
<path d="M148 266Q178 381 252 425" fill="none" stroke="#ffe394" stroke-width="10" stroke-linecap="round" opacity=".6"/>
<g fill="#b96e25" opacity=".48">
<circle cx="189" cy="281" r="7"/><circle cx="322" cy="279" r="6"/>
<circle cx="220" cy="333" r="5"/><circle cx="372" cy="317" r="8"/>
<circle cx="277" cy="388" r="6"/><circle cx="404" cy="280" r="5"/>
</g>
<g stroke="#181914" stroke-width="4" stroke-linejoin="round">
<path d="M156 206L175 157L213 169L238 135L274 160L301 129L332 160L366 137L383 172L423 160L439 211Q301 163 156 206Z" fill="#6e3b25"/>
<path d="M184 176L210 187M246 156L265 174M315 151L325 170M385 175L401 190" fill="none" stroke="#a95a33" stroke-width="7" stroke-linecap="round"/>
<path d="M144 195Q161 157 197 174Q211 138 246 166Q271 129 303 166Q332 124 361 167Q399 143 420 181" fill="none" stroke="#f05232" stroke-width="15" stroke-linecap="round"/>
<path d="M164 186Q184 164 204 178M321 160Q340 147 359 166" fill="none" stroke="#ff6b47" stroke-width="5" stroke-linecap="round"/>
<path d="M140 216Q188 181 235 205Q281 176 325 202Q374 177 430 208" fill="none" stroke="#fff8df" stroke-width="13" stroke-linecap="round"/>
<path d="M153 225Q196 205 239 224Q284 204 329 222Q379 201 425 222" fill="none" stroke="#efdcb0" stroke-width="5" stroke-linecap="round"/>
</g>
<g>
<path d="M245 158Q273 133 301 159Q302 184 272 190Q243 184 245 158Z" fill="#fffdf4" stroke="#181914" stroke-width="4"/>
<circle cx="274" cy="162" r="11" fill="#ffc83d" stroke="#181914" stroke-width="3"/>
<circle cx="177" cy="180" r="9" fill="#ffc83d" stroke="#181914" stroke-width="3"/>
<circle cx="390" cy="181" r="9" fill="#ffc83d" stroke="#181914" stroke-width="3"/>
<path d="M215 168L229 150M341 166L351 145" stroke="#c9ef3f" stroke-width="9" stroke-linecap="round"/>
<path d="M286 175L301 153M369 175L381 152" stroke="#77ad31" stroke-width="8" stroke-linecap="round"/>
</g>
</g>
<g transform="translate(470 61) rotate(9)">
<circle cx="72" cy="72" r="68" fill="#c9ef3f" stroke="#181914" stroke-width="5"/>
<circle cx="72" cy="72" r="54" fill="none" stroke="#181914" stroke-width="2" stroke-dasharray="4 7"/>
<text x="72" y="57" text-anchor="middle" font-family="Arial" font-size="12" font-weight="900" fill="#181914" letter-spacing="2">BIG</text>
<text x="72" y="80" text-anchor="middle" font-family="Georgia" font-size="23" font-style="italic" font-weight="900" fill="#181914">Banger</text>
<text x="72" y="101" text-anchor="middle" font-family="Arial" font-size="8" font-weight="900" fill="#181914" letter-spacing="1.5">SINCE 2024</text>
</g>
<g transform="translate(72 340) rotate(-8)">
<rect width="184" height="63" rx="7" fill="#181914"/>
<text x="92" y="28" text-anchor="middle" font-family="Arial" font-size="10" font-weight="900" fill="#fff8df" letter-spacing="2">THE SEOUL FIRE</text>
<text x="92" y="48" text-anchor="middle" font-family="Arial" font-size="13" font-weight="900" fill="#c9ef3f" letter-spacing="1">$7.50</text>
</g>
</svg>
<div class="hero-sticker" aria-hidden="true">
<strong>100%<br>GOOD<br>CHOICES</strong>
<i>★ ★ ★</i>
<small>Probably</small>
</div>
</div>
</section>
<div class="marquee" aria-hidden="true">
<div class="marquee-track">
<span>Seoul meets the street</span><span class="star">✦</span>
<span>Crunchy tacos</span><span class="star">✦</span>
<span>Big Seoul energy</span><span class="star">✦</span>
<span>Made fresh to order</span><span class="star">✦</span>
<span>Seoul meets the street</span><span class="star">✦</span>
<span>Crunchy tacos</span><span class="star">✦</span>
<span>Big Seoul energy</span><span class="star">✦</span>
<span>Made fresh to order</span><span class="star">✦</span>
</div>
</div>
<section id="menu">
<div class="wrap">
<div class="section-top">
<div>
<p class="section-kicker">Pick your fighter</p>
<h2>The heavy <em>hitters.</em></h2>
</div>
<p class="section-intro">Go classic with fiery beef, go crispy with spicy chicken, or don't choose at all. Everything is made fresh when you order it.</p>
</div>
<div class="filters" role="group" aria-label="Filter menu">
<button class="filter active" data-filter="all">All good stuff</button>
<button class="filter" data-filter="tacos">Tacos</button>
<button class="filter" data-filter="sides">Sides</button>
<button class="filter" data-filter="drinks">Drinks</button>
</div>
<div class="menu-grid">
<article class="menu-card" data-category="tacos">
<div class="menu-art red">
<span class="menu-number">01 / MUST TRY</span>
<span class="spicy">🔥 Spicy</span>
<svg viewBox="0 0 240 180" aria-hidden="true"><use href="#tacoMini"/></svg>
</div>
<div class="menu-info">
<h3>Seoul Fire</h3>
<p>Braised beef, punchy kimchi, sesame crema, scallions & crispy onion. Our signature good decision.</p>
<div class="menu-meta">
<span class="price">$7.50</span>
<button class="add-btn" data-open-order data-item="Seoul Fire">Add to order <span>+</span></button>
</div>
</div>
</article>
<article class="menu-card" data-category="tacos">
<div class="menu-art yellow">
<span class="menu-number">02 / CRUNCHY</span>
<span class="spicy">🔥 Fire</span>
<svg viewBox="0 0 240 180" aria-hidden="true"><use href="#chickenMini"/></svg>
</div>
<div class="menu-info">
<h3>Gochujang Crunch</h3>
<p>Crispy chicken, sweet-hot gochujang glaze, crunchy slaw and a bright squeeze of lime.</p>
<div class="menu-meta">
<span class="price">$8.25</span>
<button class="add-btn" data-open-order data-item="Gochujang Crunch">Add to order <span>+</span></button>
</div>
</div>
</article>
<article class="menu-card" data-category="sides">
<div class="menu-art pink">
<span class="menu-number">03 / CHEESY</span>
<span class="spicy">Shareable</span>
<svg viewBox="0 0 240 180" aria-hidden="true"><use href="#nachoMini"/></svg>
</div>
<div class="menu-info">
<h3>Kimchi Nachos</h3>
<p>Crispy corn chips loaded with cheese sauce, kimchi, jalapeños, scallions and crema.</p>
<div class="menu-meta">
<span class="price">$10.00</span>
<button class="add-btn" data-open-order data-item="Kimchi Nachos">Add to order <span>+</span></button>
</div>
</div>
</article>
<article class="menu-card" data-category="drinks">
<div class="menu-art lime">
<span class="menu-number">04 / COLD</span>
<span class="spicy">Refreshing</span>
<svg viewBox="0 0 240 180" aria-hidden="true"><use href="#drinkMini"/></svg>
</div>
<div class="menu-info">
<h3>Yuzu Lemonade</h3>
<p>Fresh-squeezed lemon, yuzu, sparkling water and just enough wild. Dangerously refreshing.</p>
<div class="menu-meta">
<span class="price">$5.00</span>
<button class="add-btn" data-open-order data-item="Yuzu Lemonade">Add to order <span>+</span></button>
</div>
</div>
</article>
</div>
<p class="menu-footnote">Vegetarian? Ask about our <a href="#menu">Bulgogi Buddha Bowl</a>. Allergens? Just ask—we're happy to help.</p>
</div>
</section>
<section class="story" id="story">
<div class="wrap story-grid">
<div class="story-copy">
<p class="section-kicker">How it started</p>
<h2>Seoul soul.<br><em>Street food.</em></h2>
<p>Kimchi Loco began with two friends, one questionable kitchen, and a big idea: the food we grew up eating deserved to be served with the same fire as the tacos we loved in SoCal.</p>
<p>We blend Korean comfort food with street-food swagger—fermented, fried, layered, and always loud on flavor.</p>
<div class="story-stats">
<div><strong>12</strong><span>Secret sauces</span></div>
<div><strong>100%</strong><span>Made fresh</span></div>
<div><strong>0</strong><span>Boring bites</span></div>
</div>
<a class="btn lime" href="#location">Come say hi <span>↗</span></a>
</div>
<div class="truck-poster">
<span class="poster-label">Catch us curbside</span>
<svg viewBox="0 0 700 480" role="img" aria-label="The Kimchi Loco food truck">
<rect width="700" height="480" fill="#f05232"/>
<path d="M0 75Q180 8 358 65T700 35V0H0Z" fill="#ff7a47"/>
<g stroke="#181914" stroke-width="3" opacity=".18">
<path d="M52 0L0 92M174 0L91 146M292 0L190 171M414 0L292 192M537 0L393 211M663 0L494 231"/>
</g>
<g transform="translate(70 143)">
<path d="M0 68Q0 37 32 37H411L491 107V268H20Q0 268 0 248Z" fill="#fff8e8" stroke="#181914" stroke-width="6" stroke-linejoin="round"/>
<path d="M411 37L491 107H411Z" fill="#c9ef3f" stroke="#181914" stroke-width="6" stroke-linejoin="round"/>
<path d="M426 62L464 97H426Z" fill="#78b9d1" stroke="#181914" stroke-width="4"/>
<path d="M19 80H379L402 107H38Z" fill="#ffc83d" stroke="#181914" stroke-width="5"/>
<path d="M42 80L37 107M91 80L86 107M140 80L135 107M189 80L184 107M238 80L233 107M287 80L282 107M336 80L331 107" stroke="#181914" stroke-width="3"/>
<path d="M37 107H402" stroke="#181914" stroke-width="5"/>
<rect x="58" y="133" width="180" height="87" rx="6" fill="#f05232" stroke="#181914" stroke-width="5"/>
<text x="148" y="165" text-anchor="middle" font-family="Arial" font-size="13" font-weight="900" fill="#181914" letter-spacing="3">KIMCHI</text>
<text x="148" y="197" text-anchor="middle" font-family="Georgia" font-size="31" font-style="italic" font-weight="900" fill="#fff8e8">Loco!</text>
<path d="M82 181Q108 146 133 180Q159 213 184 179Q207 146 220 180" fill="none" stroke="#c9ef3f" stroke-width="7" stroke-linecap="round"/>
<rect x="264" y="133" width="89" height="60" rx="6" fill="#181914"/>
<path d="M277 144H340" stroke="#ffc83d" stroke-width="5" stroke-linecap="round"/>
<path d="M277 159H330" stroke="#f05232" stroke-width="5" stroke-linecap="round"/>
<path d="M277 174H338" stroke="#c9ef3f" stroke-width="5" stroke-linecap="round"/>
<path d="M426 136H474V216H426Z" fill="#181914"/>
<rect x="441" y="151" width="25" height="48" rx="3" fill="#ffc83d"/>
<circle cx="78" cy="269" r="42" fill="#181914"/>
<circle cx="78" cy="269" r="20" fill="#f7f0df"/>
<circle cx="78" cy="269" r="8" fill="#77786e"/>
<circle cx="427" cy="269" r="42" fill="#181914"/>
<circle cx="427" cy="269" r="20" fill="#f7f0df"/>
<circle cx="427" cy="269" r="8" fill="#77786e"/>
<path d="M0 241H491" stroke="#181914" stroke-width="4"/>
<path d="M30 34H380" stroke="#181914" stroke-width="8" stroke-linecap="round"/>
<circle cx="64" cy="24" r="8" fill="#c9ef3f" stroke="#181914" stroke-width="4"/>
<circle cx="138" cy="24" r="8" fill="#ffc83d" stroke="#181914" stroke-width="4"/>
<circle cx="212" cy="24" r="8" fill="#f05232" stroke="#181914" stroke-width="4"/>
<circle cx="286" cy="24" r="8" fill="#c9ef3f" stroke="#181914" stroke-width="4"/>
</g>
</svg>
<div class="poster-stamp"><strong>100%</strong>Korean<br>inspired<br>★ ★ ★</div>
</div>
</div>
</section>
<section class="location" id="location">
<div class="wrap location-grid">
<div class="location-card">
<span class="open-pill">Open this weekend</span>
<h3>Find the red truck.<br>Follow the smell.</h3>
<p>We're parked on the corner of 2nd Street & PCH. Look for the big red truck, the loud music, and the tiny line that moves suspiciously fast.</p>
<div class="hours">
<div><span>Thursday</span><span>4:00 PM — 9:00 PM</span></div>
<div><span>Friday</span><span>4:00 PM — 10:00 PM</span></div>
<div><span>Saturday</span><span>2:00 PM — 10:00 PM</span></div>
<div><span>Sunday</span><span>2:00 PM — 8:00 PM</span></div>
</div>
<div class="location-actions">
<button class="btn dark" id="directionsBtn">Get directions ↗</button>
<button class="btn light" data-open-order>Order ahead</button>
</div>
</div>
<div class="map-panel">
<svg viewBox="0 0 700 520" role="img" aria-label="Map showing the Kimchi Loco truck at 2nd Street and PCH in Long Beach">
<rect width="700" height="520" fill="#e8dfc7"/>
<g fill="#d5ceb4">
<rect x="22" y="20" width="188" height="128" rx="10"/>
<rect x="236" y="20" width="152" height="128" rx="10"/>
<rect x="415" y="20" width="260" height="128" rx="10"/>
<rect x="22" y="176" width="188" height="145" rx="10"/>
<rect x="415" y="176" width="260" height="145" rx="10"/>
<rect x="22" y="349" width="366" height="148" rx="10"/>
<rect x="415" y="349" width="260" height="148" rx="10"/>
</g>
<g fill="#b7d9df" stroke="#181914" stroke-width="2">
<path d="M0 165H700V180H0Z"/>
<path d="M225 0H243V520H225Z"/>
<path d="M402 0H420V520H402Z"/>
<path d="M0 340H700V355H0Z"/>
</g>
<path d="M0 165H700M225 0V520M402 0V520M0 340H700" stroke="#181914" stroke-width="4"/>
<path d="M0 150H700M210 0V520M387 0V520M0 325H700" stroke="#fffdf6" stroke-width="2" stroke-dasharray="14 12"/>
<text x="28" y="180" font-family="Arial" font-size="12" font-weight="900" fill="#181914" letter-spacing="2">PACIFIC COAST HIGHWAY</text>
<text x="242" y="357" font-family="Arial" font-size="12" font-weight="900" fill="#181914" letter-spacing="2" transform="rotate(-90 242 357)">2ND STREET</text>
<text x="422" y="357" font-family="Arial" font-size="12" font-weight="900" fill="#181914" letter-spacing="2" transform="rotate(-90 422 357)=">PINE AVENUE</text>
<g transform="translate(330 195)">
<path d="M18 0C8 0 0 8 0 18C0 32 18 51 18 51S36 32 36 18C36 8 28 0 18 0Z" fill="#f05232" stroke="#181914" stroke-width="4"/>
<circle cx="18" cy="18" r="8" fill="#c9ef3f"/>
</g>
<g transform="translate(255 133)">
<rect width="178" height="43" rx="21" fill="#181914"/>
<text x="89" y="18" text-anchor="middle" font-family="Arial" font-size="8" font-weight="900" fill="#c9ef3f" letter-spacing="1.5">KIMCHI LOCO IS HERE</text>
<text x="89" y="33" text-anchor="middle" font-family="Arial" font-size="11" font-weight="900" fill="#fff8df">2ND & PCH</text>
</g>
<g transform="translate(490 228) rotate(8)">
<rect width="143" height="39" rx="19" fill="#fff8df" stroke="#181914" stroke-width="3"/>
<text x="71" y="25" text-anchor="middle" font-family="Arial" font-size="10" font-weight="900" fill="#181914">BEACH PARK</text>
</g>
<g transform="translate(60 236) rotate(-7)">
<rect width="120" height="36" rx="18" fill="#fff8df" stroke="#181914" stroke-width="3"/>
<text x="60" y="23" text-anchor="middle" font-family="Arial" font-size="9" font-weight="900" fill="#181914">LONG BEACH</text>
</g>
<g fill="#b9c0a2">
<circle cx="340" cy="417" r="16"/><circle cx="375" cy="431" r="20"/><circle cx="327" cy="453" r="22"/>
<circle cx="585" cy="80" r="24"/><circle cx="625" cy="104" r="17"/>
</g>
</svg>
<div class="map-tag">Current location<strong>2nd St & PCH, Long Beach</strong></div>
</div>
</div>
</section>
<section class="newsletter">
<div class="wrap newsletter-grid">
<div>
<h2>Get the <em>good stuff.</em> First.</h2>
<p>Secret menu drops, truck locations, and a suspiciously good weekly deal.</p>
</div>
<form class="signup" id="signupForm">
<label class="sr-only" for="email">Email address</label>
<input id="email" type="email" placeholder="you@email.com" required>
<button type="submit">Join the list</button>
</form>
</div>
</section>
</main>
<footer>
<div class="wrap">
<div class="footer-grid">
<div class="footer-logo">
<a class="logo" href="#home">
<span class="logo-mark">
<svg viewBox="0 0 40 40" aria-hidden="true">
<path d="M7 18Q20 4 33 18Q27 31 20 34Q13 31 7 18Z" fill="#ffc83d" stroke="#181914" stroke-width="2.5" stroke-linejoin="round"/>
<path d="M10 18Q20 9 30 18" fill="none" stroke="#181914" stroke-width="2.5"/>
<path d="M13 16L20 12L27 16L22 23L15 22Z" fill="#f05232"/>
</svg>
</span>
<span class="logo-type"><strong>KIMCHI LOCO</strong><small>Korean Taco Truck</small></span>
</a>
<p>Big flavor, loud colors, and a little bit of Seoul in every bite. Come hungry. Leave happy.</p>
<div class="socials" aria-label="Social media">
<a href="#home" aria-label="Instagram">IG</a>
<a href="#home" aria-label="TikTok">TK</a>
<a href="#home" aria-label="Facebook">FB</a>
</div>
</div>
<div class="footer-col">
<h4>Explore</h4>
<a href="#menu">The menu</a>
<a href="#story">Our story</a>
<a href="#location">Find the truck</a>
<a href="#home">Catering</a>
</div>
<div class="footer-col">
<h4>Say hello</h4>
<p>hello@kimchiloco.com</p>
<p>(562) 555-1984</p>
<p>Long Beach, CA</p>
<p>Thu — Sun</p>
</div>
</div>
<div class="footer-bottom">
<span>© <span id="year"></span> Kimchi Loco. All flavor reserved.</span>
<span>Made with 🔥 & questionable dance moves</span>
</div>
</div>
</footer>
<button class="btn red mobile-order" data-open-order>Build your taco — pickup order ↗</button>
<div class="modal" id="orderModal" role="dialog" aria-modal="true" aria-labelledby="orderTitle">
<div class="order-sheet">
<div class="order-header">
<div>
<h3 id="orderTitle">Build your loco</h3>
<p>Pick your taco, pick your heat, skip the line.</p>
</div>
<button class="close-modal" id="closeModal" aria-label="Close order">×</button>
</div>
<div class="order-body">
<div class="order-main">
<p class="step-label">01 / Choose your taco</p>
<div class="taco-options">
<button class="taco-option selected" data-taco="Seoul Fire" data-price="7.50">
<span class="option-icon">🌮</span>
<span><strong>Seoul Fire</strong><small>Beef · kimchi · sesame crema</small></span>
<span class="option-price">$7.50</span>
</button>
<button class="taco-option" data-taco="Gochujang Crunch" data-price="8.25">
<span class="option-icon">🌮</span>
<span><strong>Gochujang Crunch</strong><small>Chicken · slaw · gochujang</small></span>
<span class="option-price">$8.25</span>
</button>
<button class="taco-option" data-taco="Bulgogi Buddha" data-price="8.50">
<span class="option-icon">🥬</span>
<span><strong>Bulgogi Buddha</strong><small>Mushroom · avocado · sesame</small></span>
<span class="option-price">$8.50</span>
</button>
</div>
<div class="heat-wrap">
<p class="step-label">02 / How spicy?</p>
<div class="heat-labels"><span>Mild</span><span class="heat-output" id="heatOutput">Hot</span></div>
<input type="range" id="heatRange" min="0" max="3" value="1" step="1" aria-label="Spice level">
<div class="heat-labels"><span>Friendly</span><span>Wild</span></div>
</div>
</div>
<aside class="order-side">
<p class="step-label">03 / Your order</p>
<div class="summary-taco"><b id="summaryName">Seoul Fire</b><span id="summaryPrice">$7.50</span></div>
<div class="quantity">
<span>Quantity</span>
<div class="quantity-controls">
<button id="minusQty" aria-label="Decrease quantity">−</button>
<output id="qty">1</output>
<button id="plusQty" aria-label="Increase quantity">+</button>
</div>
</div>
<div class="order-total"><span>Total</span><strong id="orderTotal">$7.50</strong></div>
<button class="btn lime" id="placeOrder">Place pickup order</button>
<p class="pickup-note">Pay at the truck · Ready in about 10 minutes</p>
</aside>
</div>
</div>
</div>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script>
(() => {
"use strict";
const $ = (selector, scope = document) => scope.querySelector(selector);
const $$ = (selector, scope = document) => [...scope.querySelectorAll(selector)];
$("#year").textContent = new Date().getFullYear();
const toast = $("#toast");
let toastTimer;
function showToast(message) {
clearTimeout(toastTimer);
toast.textContent = message;
toast.classList.add("show");
toastTimer = setTimeout(() => toast.classList.remove("show"), 2800);
}
const navToggle = $("#navToggle");
const navLinks = $("#navLinks");
navToggle.addEventListener("click", () => {
const isOpen = navLinks.classList.toggle("open");
navToggle.classList.toggle("open", isOpen);
navToggle.setAttribute("aria-expanded", String(isOpen));
navToggle.setAttribute("aria-label", isOpen ? "Close menu" : "Open menu");
});
$$("#navLinks a").forEach(link => link.addEventListener("click", () => {
navLinks.classList.remove("open");
navToggle.classList.remove("open");
navToggle.setAttribute("aria-expanded", "false");
}));
$$(".filter").forEach(button => {
button.addEventListener("click", () => {
$$(".filter").forEach(item => item.classList.remove("active"));
button.classList.add("active");
const filter = button.dataset.filter;
$$(".menu-card").forEach(card => {
card.hidden = filter !== "all" && card.dataset.category !== filter;
});
});
});
const modal = $("#orderModal");
let selectedName = "Seoul Fire";
let selectedPrice = 7.50;
let quantity = 1;
let lastFocused = null;
const heatNames = ["Mild", "Medium", "Hot", "Wild"];
const heatRange = $("#heatRange");
function updateOrder() {
$("#summaryName").textContent = selectedName;
$("#summaryPrice").textContent = `$${selectedPrice.toFixed(2)}`;
$("#qty").textContent = quantity;
$("#orderTotal").textContent = `$${(selectedPrice * quantity).toFixed(2)}`;
$("#heatOutput").textContent = heatNames[Number(heatRange.value)];
}
function openOrder(itemName) {
lastFocused = document.activeElement;
if (itemName) {
const matching = $$(".taco-option").find(option => option.dataset.taco === itemName);
if (matching) matching.click();
}
updateOrder();
modal.classList.add("open");
document.body.classList.add("modal-open");
setTimeout(() => $("#closeModal").focus(), 100);
}
function closeOrder() {
modal.classList.remove("open");
document.body.classList.remove("modal-open");
if (lastFocused) lastFocused.focus();
}
$$("[data-open-order]").forEach(button => {
button.addEventListener("click", () => openOrder(button.dataset.item));
});
$("#closeModal").addEventListener("click", closeOrder);
modal.addEventListener("click", event => {
if (event.target === modal) closeOrder();
});
document.addEventListener("keydown", event => {
if (event.key === "Escape" && modal.classList.contains("open")) closeOrder();
});
$$(".taco-option").forEach(option => {
option.addEventListener("click", () => {
$$(".taco-option").forEach(item => item.classList.remove("selected"));
option.classList.add("selected");
selectedName = option.dataset.taco;
selectedPrice = Number(option.dataset.price);
updateOrder();
});
});
$("#plusQty").addEventListener("click", () => {
quantity = Math.min(quantity + 1, 12);
updateOrder();
});
$("#minusQty").addEventListener("click", () => {
quantity = Math.max(quantity - 1, 1);
updateOrder();
});
heatRange.addEventListener("input", updateOrder);
$("#placeOrder").addEventListener("click", () => {
closeOrder();
showToast(`${quantity} × ${selectedName} added — see you curbside! 🔥`);
});
$("#signupForm").addEventListener("submit", event => {
event.preventDefault();
showToast("You're in! Secret drops are headed your way.");
event.currentTarget.reset();
});
$("#directionsBtn").addEventListener("click", () => {
showToast("We're at 2nd & PCH — look for the big red truck!");
});
updateOrder();
})();
</script>
</body>
</html>Reasoning trace (4,624 tokens)
We need create single HTML attractive food truck website. Need output exactly code fence. Need infer desired. Need make compelling. Need no external images/fonts/network. Could use inline SVG illustrative food, CSS. Need maybe landing page Korean taco truck brand. Ensure first paint visible. 1280x800 adapt mobile. Probably need interactive ordering or nav. "make me a website that makes people really want to come" Maybe landing page with bold hero, menu, CTA location hours, marquee, animated steam. Need polished.
We need craft complete file inline. Could include logo custom SVG, hero food illustration via inline SVG. Need no external resources. Use CSS / JS interactions like mobile nav, menu tabs, order button scroll, spice meter maybe. Need exact code block only.
Let's design.
Visual style: dark charcoal / cream with hot red-orange and lime, Korean street food. Header fixed/sticky, logo. Hero split 55/45. Hero text "KIMCHI MEETS TACO" with outlined/italic. Badge "Seoul flavor. SoCal soul." CTA "Find our truck" and "See the menu". Food card with large illustrated kimbap? Better taco SVG: hard shell with fillings, kimchi, egg, beef, cilantro. Could construct detailed inline SVG. Add speech sticker "BANGER" maybe.
Hero background warm cream #f6efdf. Header. top announcement strip "NOW SERVING • LONG BEACH..." maybe. If viewport 800 first hero should fit; sticky nav maybe.
Aesthetic can be vibrant editorial. Font system sans (Arial Black), serif maybe Georgia italic. Use no external fonts. Logo use text. Visual patterns.
Sections:
- marquee strip after hero: "NO SAD DESK LUNCHES ✦ KIMCHI...".
- menu section with heading "The heavy hitters." tabs? Could show 4 menu cards, each inline SVG / CSS art. Must interesting. Include prices and spice tags.
- story "Not your average taco truck" with stats and image CSS composition
- location panel with hours and CTA.
- order overlay modal maybe button "Build your taco" opens drawer/modal that is meaningful but not needed. Better interactive spice slider updates taco? User wants come, CTA "Get a taste" etc.
Could include sticky mobile order bar.
Need self-contained no image. Inline SVG illustration. Need make site rich but screenshot first paint only hero perhaps. "Everything interesting visible first seconds" hero enough. At 800 px height header plus hero maybe. Need no animation too crazy. Could add floating ingredients.
Let's create careful HTML.
Hero dimensions min-height maybe 690 after 32 announcement and 74 nav = 800. At 1280x800, hero visible including bottom marquee. Use header at top. Actually announcement 32 + nav 74, hero 620 = 726, marquee 48 total 774. Great.
Hero left text:
eyebrow with pulsing dot "TACOS WITH A TWIST"
h1 KIMCHI<br><span>GOES</span><br>LOCO.
Maybe title phrase. To make people want come, "Big flavor. No rules." H1:
KIMCHI
GOES
*LOCO.*
But brand Kimchi Loco in logo. "Tacos with a Seoul soul." Subcopy.
Buttons.
rating "4.9 ★ 1,200+ taco believers"
Hero right taco composition.
Can create SVG hero at 540x550. Background blob burnt orange; hand-drawn sun rays; plate and taco. Need visually pleasing. Let's design detailed:
- circle/rounded irregular orange blob #ff5a36 behind
- vertical black banner "SEOUL • SO CAL"
- plate ellipse
- taco shell path semi-circle golden with texture/brown spots; actually hard taco open with filling. Use shell path from (120,260) curve to (380,280) etc. Better group rotated -8. Shell shape: M110 300 C95 205 165 115 255 112 C350 112 410 190 400 300 Q255 365 110 300. Fill gradient tan. Add lower edge? Filling should spill over top. Typical taco upright. Let shell shape as lower curved U shape? Hard taco held upright: shell as semicircle with flat-ish top at y=180 and bottom curve y=390. Path M110 170 C120 280 185 365 255 365 C330 365 395 280 400 170 Q255 120 110 170. Fill golden. Filling extends above flat top: beef chunks, kimchi red, onions, egg. Overlay.
Maybe hero display SVG uses paths.
Also little side card "Limited drop: Kimchi Cheese Fries $9" bottom left.
Use SVG patterns, no images.
Could add interactive taco spice customization in order modal. But CTA "Order ahead" perhaps click opens modal with order builder. Yet no actual backend. We can make button in hero "HUNGRY? BUILD A TACO" opens modal. Maybe modal with three mini cards? It might be judged by appearance more. "Find the truck" scroll location. Need functionality all buttons work: "See the menu" scroll, "Find the truck" scroll, location button scroll. Header mobile menu. Menu tabs filter cards maybe. Newsletter form showing confirmation.
Need no forms? Could use input email and submit show message. Fine.
Need adapt mobile no horizontal scroll. CSS.
Let's formulate. Colors:
--ink #171815
--cream #f5efdf
--red #f04b2f
--orange #ff7438
--lime #c7ef38
--mustard #ffc83d
--pink perhaps.
Fonts system:
font-family: Arial, Helvetica, sans-serif
display: "Arial Black", "Helvetica Neue", sans-serif
serif: Georgia.
Need maybe rounded pill.
Detailed HTML:
body
announcement .topbar
header nav sticky? Announcement + header. nav position relative.
logo custom icon maybe square with kimchi red pepper and roof. Use SVG. Logo text KIMCHI LOCO, small "KOREAN TACO TRUCK".
header links Menu, Our story, Find us; order button.
main
hero id home:
copy
p eyebrow
h1 line with outline maybe "KIMCHI" black, "GOES" red, "LOCO." lime/italic outlined.
h1 maybe font-size clamp(4rem,7vw,7.5rem) but split.
Tagline.
CTA row.
social proof avatars (circles with emoji? emoji visuals can vary but okay). use initials? maybe.
visual .hero-art
SVG plus sticker.
Maybe use CSS .sunburst behind and svg.
Hero visual could use larger 100%.
Marquee after.
Menu section #menu with header and filter tabs buttons All / Tacos / Sides / Drinks. Cards 4. each card CSS with top colored food art perhaps inline SVG. We can use one large SVG symbol defs? Better each card uses SVG illustrations. Four cards:
Seoul Fire $7.5 – braised beef, kimchi, kimchi crema.
Gochujang Crunch $8.25 – crispy chicken, slaw.
Bulgogi Buddha $8 – mushrooms, avocado? Vegetarian.
Kimchi Nacho $10 – cheesy, loaded.
Could be tacos in illustrated packaging. Use div art with simple CSS shapes or inline SVG. Need no external.
Create inline SVG per card:
Card 1 orange circle, taco mini.
Card 2 mustard background, taco mini.
Card 3 green background, mushroom/taco.
Card 4 purple/pink, nacho chips.
Can use svg <use href="#taco-icon"> referencing hidden defs at body. Symbols. Good.
Menu card layout 4 columns, card art 220px, details below. on mobile 1 col / 2.
Story section dark background, visual poster with Korean characters (can render Korean unicode) maybe avoid incorrect. "서울에서 왔어요" maybe. Use Korean accurate:
서울에서 왔어요 = Came from Seoul. Could add. Korean taco truck. Need perhaps brand's stylized.
Story large 2 columns; stats.
Truck location section with a stylized map (CSS/inline SVG) and location card, schedule, social.
Footer.
Order modal:
dialog maybe use <div class modal hidden> with .order-sheet. JS open/close. Build:
Choose your heat slider, display "Mild / Hot / Cancel us". Tacos row buttons, quantity controls, total. "Add to bag — $..." and show success toast. This adds interactivity but site primary CTA maybe "Order ahead" opens drawer. Build credible. In header button "Order ahead". Hero CTA "Build your taco". Need "Find the truck" also.
But first fold CTA maybe "ORDER AHEAD" and secondary "EXPLORE MENU". Buttons.
Could have all links.
Need ensure no scroll horizontal due marquee? body overflow-x hidden.
Animations subtle: steam SVG maybe CSS stroke dash. Float sticker. hero art entrance. Respect reduced motion.
Need hero art SVG details. Let's create one 600x620.
Defs:
linearGradient shell from #ffc653 to #e88920
filter shadow.
pattern dots.
Background in svg:
circle orange x 320 y 300 r 230 maybe fill #ff6a3d; outline black? wavy blob path.
Could use CSS blob container with border radius 48% 52%...
SVG:
<path d=M115 238 C74 136 154 58 260 79 C358 37 477 83 494 189 C557 278 484 418 386 452 C294 514 147 468 111 372 C70 331 75 287 115 238 fill red>
sun rays around maybe.
Taco group transform translate(20 20) rotate(-8 300 300):
shadow ellipse.
shell path M134 204 C122 289 164 388 252 417 C340 446 422 379 433 290 C441 227 422 185 400 153 C319 132 214 153 134 204Z fill gradient stroke ink 6
Actually filling should be atop upper opening around y 160. Shell should overlap lower part.
Filling group:
beef chunks at y130-220; kimchi red strips; cream; scallions.
shell body drawn over bottom and top opening? Let's order shadow, fillings behind, shell in front? Taco shell path should start y190, covers lower. Filling visible y130-215. Draw filling first then shell but shell may cover all. Better shell first, then filling over top portion, but filling chunks should cover opening only and shell remains lower. Draw shell path from top left 140,190 through bottom. Then fillings over top edge to 250. Some kimchi drapes.
We can draw:
<g>
shell path fill, stroke.
highlight path.
dark toasted spots small.
top rim path M140 190 Q280 125 428 185 no fill stroke dark.
filling group after top rim:
beef dark brown irregular chunks; red kimchi squiggles; cream white; green onions; yellow corn.
</g>
Then maybe shell should overlay lower fillings? Fine.
Add small taco held? no.
Sticker circle lime at x460 y120 "STREET FOOD / ★ / SINCE 2024"
Label rectangle dark "THE SEOUL FIRE" rotated.
Price tag.
We can use CSS animation float entire art.
Visual right include .floating-note card with "The Seoul Fire" etc. But in SVG.
Announcement "NOW TRUCKING • THURSDAY–SUNDAY • LONG BEACH, CA" and link maybe.
Nav logo small SVG.
Hero social proof: 3 color circles with tiny faces? use text maybe stars. "4.9 from 1,200+ hungry humans".
Need perhaps typography "Kimchi Goes Loco" strongest.
Let's map responsive:
At desktop header inner max 1180.
hero grid 48% 52%, padding 50px 0 65.
h1 7.5rem maybe at 1280 left 530, "LOCO." width. 7.6vw = 97px. Three lines makes 300 high. Hero around 560.
At mobile h1 4rem.
Hero art max 520.
menu.
We need exact no text outside code.
Let's write comprehensive code. Ensure JS errors:
- const menuFilters, cards; click toggles hidden using card.hidden = ...
- modal controls. Use event listeners.
- form.
- nav mobile.
- location day? static.
- order builder:
selectedTaco object. buttons data-name data-price.
quantity. subtotal.
slider heat 0-3 updates.
openModal/close, body class modal-open.
- outside click.
- Escape.
- checkout button displays toast and maybe close after.
- subscribe form.
- current year.
Potential issue hidden attribute CSS `.menu-card { display:flex }` overrides [hidden]? Browser [hidden] default display none but author display flex overrides? yes author style overrides UA hidden perhaps. Need `[hidden]{display:none!important}`.
Accessibility.
Make order modal visually good. In header "ORDER AHEAD" opens.
Let's create all SVG illustrations with hidden defs:
<svg class="svg-defs" aria-hidden true width=0 height=0>
<defs>
symbol id=tacoMini viewbox 0 0 240 190 etc
...
</defs>
</svg>
But symbols with gradient IDs okay.
Card art use <svg viewBox="0 0 260 180"><use href="#tacoMini"/></svg>. If using symbol width. Fine.
Menu categories all tacos, sides, drinks:
4 cards: Seoul Fire (tacos), Gochujang Crunch (tacos), Kimchi Nachos (sides), Yuzu Lemonade (drinks).
Maybe 5th? 4 grid enough. Include "Bulgogi Buddha" vegan. Five cards could look unbalanced. 4 cards on 2x? At 1280 section below fold not screenshot. Fine.
Create card art backgrounds with decorative patterns. For taco symbol, fill etc.
Add mini labels.
Hero art SVG maybe huge 680.
Location map stylized:
<section location>
left location content
right .map-panel with svg roads, truck marker, location. Nice.
Info chip "EVERY WEEKEND" etc.
Buttons directions can't window.open; scroll or href Google maps external? Network request? Clicking external maybe not needed. Could use link href="https://maps.google.com/?q=..." target="_blank" but sandbox might block? only JS window.open blocked; links okay. But no network in load. Yet task says no network requests except CDN, but anchor isn't load. Better button that shows toast "We'll send you to..." but no actual. Use #. Use click show toast.
Need perhaps "Next stop" can be dynamic from JS. fine.
No external fonts means system fonts.
Let's ensure visual first fold. Announcement 34, nav 76, hero min maybe 660 => 770. good. At 800, marquee starts bottom. Great. body cream.
Hero background pattern maybe radial dots. .hero:before.
Let's draft exact code.
Need ensure heading fonts. CSS -webkit-text-stroke maybe.
h1 line:
KIMCHI
GOES
<span class="loco">LOCO<span class=dot>!</span></span>
Could use "KIMCHI" and "GOES" black; red highlight circle? h1 .goes background red? Simpler:
h1 .top black
h1 .goes color red
h1 .loco color ink; -webkit-text-stroke: 2px ink; color transparent maybe poor. Use color cream? Better lime background pill? "LOCO." italic serif and underline.
Could do:
<span>KIMCHI</span>
<span class="goes">GOES</span>
<span class="loco">LOCO!</span>
CSS .loco font-family Georgia; font-style italic; color lime; text-shadow 3px 3px 0 ink; transform.
Need exact logo.
Maybe title “KIMCHI GOES LOCO!” and sub. Strong.
Hero left eyebrow "KOREAN TACOS · CALI SOUL".
CTA orange button black shadow.
A small ticket card "MADE TO ORDER / NEVER MICROWAVED" maybe.
Need include no food photos but illustrative. SVG gives character.
Let's build SVG hero detailed:
Background blob and ray lines.
Group taco:
- ellipse shadow
- shell.
- fillings:
beef chunks polygons, red kimchi wavy path with stroke.
- egg? white shape and yellow circle.
- corn circles.
- green scallion.
- cilantro leaves.
Shell maybe put over lower filling with path starting at y205 but not. We'll draw shell then all topping.
Perhaps use clip? not needed.
To look like taco, shell shape should cover lower half and top filling above. Fill path extends from top line 180 to 250; shell path from top line 200 down. Draw shell first, then meat at y120-225. Some meat overlap shell. Add cream squiggle.
Maybe shell edge top line at y185. Fine.
A tortilla bowl shape? okay.
Also floating condiment bottles? Maybe little circles "crunch", "heat".
CSS decorative .art-label.
Let's create menu card icon symbols:
tacoMini:
shadow ellipse; path shell, spots, red topping, greens.
chickenMini:
shell, crispy fill.
nachoMini:
chips polygons and melted cheese, jalapenos.
drinkMini:
cup, straw, lemon.
Use symbol viewBox 0 0 240 180.
Story image can use a big menu card with stylized truck SVG? Better .story-visual dark with CSS .poster:
- huge Korean 서울
- circle lime
- "SEOUL SOUL / CALI STREET"
- a truck illustration inline svg (side view colorful food truck with awning).
Build inline SVG 600x430 with truck body cream, red roof, wheels, serving window, awning stripes, sign KIMCHI LOCO, little lights. Very compelling.
Story background lime? Could be red section. Let's use dark ink with red text and yellow accents.
Locations.
Footer.
Potential requested just website; no need extra copy but good.
Let's write code perhaps 1000 lines. Ensure no triple backticks inside.
Need one fenced block only. Let's think through CSS all.
At 1280:
announcement font 11.
nav 76.
hero min-height 660. grid.
hero h1 line-height .82 font 104. 3 lines 260.
buttons.
art 560.
bottom proof.
Maybe hero content vertical center.
At mobile nav links hidden and mobile button visible. header 64. announcement wraps maybe height 48. hero one col; art below. fine no horiz.
menu grid 4 columns. At 900 2 columns.
story grid 1fr 1.2fr.
location grid.
Order modal:
fixed inset 0 z100; background rgba; display grid place items center; opacity hidden pointer-events none. .modal.open. sheet max-width 920 grid. At mobile bottom sheet max-height.
Need maintain hidden no issues.
Close button.
Order panel left colored, right menu. Maybe full white sheet.
Modal header.
taco choices buttons.
Heat slider.
summary total.
Toast fixed bottom.
Mobile menu: nav links dropdown absolute. .open. Body no scroll.
JS smooth scroll: CSS scroll-behavior. For button data-scroll targets.
All anchors with href work.
Form subscribe: e.preventDefault, show toast and reset.
Filter card click sets active and hidden. "All" etc.
Mobile nav closes after click.
Need top ticker animation. CSS marquee track width max-content animation. But must ensure no horizontal scroll body hidden. At first paint a strip. Good.
Use content repeated.
Potential conflict .nav-toggle svg. fine.
Let's formulate detailed HTML.
Logo inline:
<svg viewBox 0 0 44 44><path d rounded square fill red><path taco...>. Keep.
Use unicode icons like ★, ↗, ✦. okay.
No local storage.
Let's build.
Need maybe CTA "Order ahead" no actual online ordering but drawer with bag. We can call "Build your taco" and checkout adds to bag. Location CTA.
Let's ensure modal summary button works. Data. heat slider text. Add button increments q. show toast "2 × Seoul Fire added to your bag". Modal maybe not close. Checkout button "Send order" displays "Order sent!" but fake. Better "Continue to checkout" and toast "Demo order ready — connect your POS here." That seems developer-ish and harms. Better "Place pickup order" shows "Pickup order placed! We'll text you when it's ready." credible demo.
No phone though. Fine.
Click "Get directions" show toast "Opening Long Beach..." not actual; could link to maps. Use href external and no target? It will navigate iframe potentially. Better on click preventDefault toast "We're parked at 2nd & P — look for the red truck!" Good.
Maybe "Find the truck" scroll.
Hero art may render with SVG text in Arial. Fine.
Use filter categories correctly.
Let's begin writing final in code block. Need maybe no analysis in final. Ensure code not excessively huge but desired 5. We have enough.
Let's detail hero SVG:
svg aria-label.
defs gradients:
shell gradient.
filter drop shadow maybe filter not necessary.
<path blob>
<g opacity sun rays> lines.
<ellipse>
<g transform rotate>
shell path with stroke.
spots.
topping groups.
</g>
sticker group outside.
price tag.
Also "SEOUL FIRE" black rectangle.
Menu card symbols. Good.
Truck SVG.
Map SVG.
Let's code CSS.
Potential text line wrap mobile.
Use `button` font inherit.
Order sheet forms.
Need no external requests. Great.
Let's write final now.