<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>BSquare Burgers – Coming Soon</title>
<meta name="description" content="BSquare Burgers in Berlin. Smash burgers, loaded fries and cold drinks. Opening soon." />
<style>
:root {
--bg: #050308;
--bg2: #080313;
--text: rgba(255, 255, 255, 0.96);
--muted: rgba(255, 255, 255, 0.65);
--accent: #ffb000;
--accent-2: #ff4b3e;
--border-soft: rgba(255, 255, 255, 0.12);
--radius-lg: 30px;
--radius-pill: 999px;
--shadow-main: 0 28px 90px rgba(0, 0, 0, 0.8);
}
* { box-sizing: border-box; }
html, body {
margin: 0;
height: 100%;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
"Segoe UI", sans-serif;
color: var(--text);
background: radial-gradient(circle at top, #1a1022 0, #050308 55%, #020107 100%);
overflow-x: hidden;
}
.page {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 32px 16px;
isolation: isolate;
}
/* background image */
.page::before {
content: "";
position: fixed;
inset: 0;
background:
radial-gradient(circle at top left, rgba(255, 176, 0, 0.12), transparent 55%),
radial-gradient(circle at bottom right, rgba(255, 75, 62, 0.16), transparent 60%),
url("https://images.pexels.com/photos/1639562/pexels-photo-1639562.jpeg?auto=compress&cs=tinysrgb&w=1600")
center/cover no-repeat;
filter: brightness(0.55) saturate(1.1);
z-index: -2;
}
.shell {
width: 100%;
max-width: 980px;
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2.4fr);
gap: 26px;
align-items: stretch;
}
@media (max-width: 800px) {
.shell {
grid-template-columns: minmax(0, 1fr);
}
}
/* left card */
.card-main {
background: linear-gradient(145deg,
rgba(10, 10, 18, 0.86),
rgba(5, 5, 10, 0.9));
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: var(--shadow-main);
padding: 24px 26px 26px;
backdrop-filter: blur(26px);
position: relative;
overflow: hidden;
}
.card-main::before {
content: "";
position: absolute;
inset: -40%;
background:
radial-gradient(circle at top left, rgba(255, 176, 0, 0.22), transparent 50%),
radial-gradient(circle at bottom right, rgba(255, 75, 62, 0.18), transparent 55%);
opacity: 0.8;
mix-blend-mode: soft-light;
pointer-events: none;
}
.card-main-inner {
position: relative;
z-index: 1;
}
.top-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
margin-bottom: 18px;
}
.badge-brand {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 12px;
border-radius: var(--radius-pill);
background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(255, 255, 255, 0.16);
font-size: 13px;
color: var(--muted);
}
.logo-mark {
width: 26px;
height: 26px;
border-radius: 10px;
background: radial-gradient(circle at 30% 20%, #ffe8b3 0, #ffb000 45%, #ff7a00 75%);
box-shadow:
0 0 0 2px rgba(15, 7, 0, 0.9),
0 8px 20px rgba(0, 0, 0, 0.65);
display: flex;
align-items: center;
justify-content: center;
color: #1a0900;
font-size: 15px;
font-weight: 800;
}
.logo-mark span {
transform: translateY(-1px);
}
.badge-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #32d583;
box-shadow: 0 0 0 4px rgba(50, 213, 131, 0.25);
}
/* language toggle */
.lang-toggle {
display: inline-flex;
padding: 2px;
border-radius: var(--radius-pill);
background: rgba(3, 3, 6, 0.9);
border: 1px solid rgba(255, 255, 255, 0.16);
font-size: 12px;
}
.lang-btn {
border: none;
background: transparent;
color: var(--muted);
padding: 4px 10px;
border-radius: var(--radius-pill);
cursor: pointer;
min-width: 40px;
}
.lang-btn.active {
background: #ffffff;
color: #050308;
font-weight: 600;
}
h1 {
font-size: 34px;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 8px;
}
.subtitle {
font-size: 15px;
color: var(--muted);
margin-bottom: 20px;
}
.chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 22px;
font-size: 13px;
}
.chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 11px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.55);
border: 1px solid var(--border-soft);
color: var(--muted);
}
.chip-icon {
width: 18px;
height: 18px;
border-radius: 50%;
background: radial-gradient(circle at 30% 20%, #fff1c6 0, #ffb000 45%, #ff7a00 75%);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: #2b1400;
}
.chip-icon.pink {
background: radial-gradient(circle at 30% 20%, #ffd1d1 0, #ff4b3e 50%, #ff0069 90%);
color: #2a0207;
}
/* email block */
.panel {
margin-top: 6px;
padding: 14px 16px 14px;
border-radius: 22px;
background: linear-gradient(135deg,
rgba(3, 3, 8, 0.95),
rgba(10, 10, 20, 0.96));
border: 1px solid rgba(255, 255, 255, 0.2);
}
.panel-label {
font-size: 12px;
color: var(--muted);
margin-bottom: 6px;
}
form {
display: flex;
gap: 10px;
margin-bottom: 6px;
}
input[type="email"] {
flex: 1;
padding: 11px 12px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(1, 1, 3, 0.86);
color: var(--text);
font-size: 14px;
outline: none;
}
input[type="email"]::placeholder {
color: rgba(255, 255, 255, 0.45);
}
button[type="submit"] {
padding: 10px 18px;
border-radius: 999px;
border: none;
background: linear-gradient(135deg, #ffb000, #ff7a00);
color: #050308;
font-weight: 600;
font-size: 14px;
cursor: pointer;
white-space: nowrap;
}
button[type="submit"]:hover { filter: brightness(1.05); }
.fine-print {
font-size: 11px;
color: var(--muted);
}
.footer-row {
margin-top: 18px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--muted);
}
.social {
display: flex;
gap: 10px;
}
.social a {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
}
.social a:hover {
color: var(--accent);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
[data-lang] { display: none; }
[data-lang].active { display: block; }
/* right side hero image card */
.card-visual {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-main);
background:
radial-gradient(circle at top, rgba(255, 176, 0, 0.36), transparent 55%),
radial-gradient(circle at bottom, rgba(255, 75, 62, 0.4), transparent 60%),
#050308;
}
.hero-img {
position: absolute;
inset: 0;
background:
url("https://images.pexels.com/photos/1639562/pexels-photo-1639562.jpeg?auto=compress&cs=tinysrgb&w=1600")
center/cover no-repeat;
filter: saturate(1.15) contrast(1.02);
transform: scale(1.03);
}
.hero-gradient {
position: absolute;
inset: 0;
background:
linear-gradient(120deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.9));
mix-blend-mode: multiply;
}
.hero-overlay {
position: relative;
z-index: 1;
height: 100%;
padding: 20px 20px 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.hero-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 14px;
font-size: 12px;
color: rgba(255, 255, 255, 0.75);
}
.hero-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.hero-badge {
align-self: flex-end;
padding: 4px 10px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(255, 255, 255, 0.25);
font-size: 11px;
}
.burger-stack {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 10px 14px;
border-radius: 18px;
background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(255, 255, 255, 0.18);
font-size: 12px;
color: rgba(255, 255, 255, 0.9);
max-width: 190px;
}
.burger-row {
display: flex;
align-items: center;
gap: 8px;
}
.burger-icon {
width: 26px;
height: 26px;
border-radius: 999px;
background: radial-gradient(circle at 30% 20%, #fff4cf 0, #ffb000 38%, #ff7a00 70%, #7b2b00 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.65);
font-size: 15px;
}
.burger-icon span {
transform: translateY(-1px);
}
.burger-label {
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: 11px;
}
.hero-bottom-strip {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
font-size: 11px;
color: rgba(255, 255, 255, 0.85);
}
.hero-bottom-strip span strong {
color: #ffdd9a;
font-weight: 600;
}
.hero-bottom-chip {
padding: 4px 10px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.75);
border: 1px solid rgba(255, 255, 255, 0.22);
}
@media (max-width: 800px) {
.page { padding-top: 24px; padding-bottom: 24px; }
.card-main { padding: 22px 18px 22px; }
h1 { font-size: 26px; }
.shell { max-width: 620px; }
.card-visual { height: 240px; }
}
@media (max-width: 480px) {
form { flex-direction: column; }
button[type="submit"] { width: 100%; }
.hero-bottom-strip { flex-direction: column; align-items: flex-start; }
}
</style>
</head>
<body>
<main class="page">
<div class="shell">
<!-- LEFT: content -->
<section class="card-main" aria-label="BSquare Burgers coming soon">
<div class="card-main-inner">
<div class="top-row">
<div class="badge-brand">
<div class="logo-mark">
<span>B²</span>
</div>
<div>
<div style="font-weight:600; font-size:12px;">BSquare Burgers</div>
<div style="font-size:11px; color:var(--muted); display:flex; align-items:center; gap:6px;">
<span class="badge-dot"></span>
<span data-lang="en" class="active">Berlin · Coming soon</span>
<span data-lang="de">Berlin · Bald geöffnet</span>
</div>
</div>
</div>
<div class="lang-toggle" aria-label="Language toggle">
<button type="button" class="lang-btn active" data-switch="en">EN</button>
<button type="button" class="lang-btn" data-switch="de">DE</button>
</div>
</div>
<h1>BSQUARE BURGERS</h1>
<p class="subtitle active" data-lang="en">
Smash‑style burgers, crispy fries, cold drinks. Born in Berlin, made for late nights.
</p>
<p class="subtitle" data-lang="de">
Smash‑Style Burger, knusprige Fries, kalte Drinks. Geboren in Berlin, gemacht für lange Nächte.
</p>
<div class="chips active" data-lang="en">
<div class="chip">
<div class="chip-icon"><span>🍔</span></div>
<span>Double smash patties</span>
</div>
<div class="chip">
<div class="chip-icon pink"><span>🔥</span></div>
<span>House chili sauce</span>
</div>
<div class="chip">
<div class="chip-icon"><span>🍟</span></div>
<span>Loaded fries</span>
</div>
</div>
<div class="chips" data-lang="de">
<div class="chip">
<div class="chip-icon"><span>🍔</span></div>
<span>Doppelte Smash‑Patties</span>
</div>
<div class="chip">
<div class="chip-icon pink"><span>🔥</span></div>
<span>Hausgemachte Chili‑Sauce</span>
</div>
<div class="chip">
<div class="chip-icon"><span>🍟</span></div>
<span>Loaded Fries</span>
</div>
</div>
<div class="panel">
<div class="panel-label" data-lang="en" class="active">
Drop your email, we’ll ping you when the grill fires up.
</div>
<div class="panel-label" data-lang="de">
Trag deine E‑Mail ein, wir melden uns, wenn der Grill heiß ist.
</div>
<form>
<label class="visually-hidden" for="email">Email address</label>
<input id="email" type="email" placeholder="Email address" required />
<button type="submit" data-lang="en" class="active">Notify me</button>
<button type="submit" data-lang="de">Benachrichtigen</button>
</form>
<p class="fine-print active" data-lang="en">
No spam. Just the opening date and a launch offer.
</p>
<p class="fine-print" data-lang="de">
Kein Spam. Nur Eröffnungsdatum und Startangebot.
</p>
</div>
<div class="footer-row">
<span data-lang="en" class="active">Follow the square:</span>
<span data-lang="de">Folge dem Square:</span>
<div class="social">
<a href="#" aria-label="Instagram">Instagram</a>
<a href="#" aria-label="TikTok">TikTok</a>
</div>
</div>
</div>
</section>
<!-- RIGHT: visual hero with burger icon -->
<aside class="card-visual" aria-hidden="true">
<div class="hero-img"></div>
<div class="hero-gradient"></div>
<div class="hero-overlay">
<div class="hero-top">
<div class="hero-tag">
<span style="font-size:11px; opacity:0.9;">🍔</span>
<span>Signature BSquare Stack</span>
</div>
<div class="hero-badge">
Berlin · Kreuzberg
</div>
</div>
<div class="burger-stack">
<div class="burger-row">
<div class="burger-icon"><span>🍔</span></div>
<div>
<div class="burger-label">B² Classic</div>
<div style="font-size:11px; opacity:0.8;">Double smash, cheddar, pickles, BSquare sauce.</div>
</div>
</div>
<div class="burger-row" style="margin-top:6px;">
<div class="burger-icon"><span>🌶</span></div>
<div>
<div class="burger-label">Midnight Heat</div>
<div style="font-size:11px; opacity:0.8;">Jalapeños, chili glaze, pepper jack.</div>
</div>
</div>
</div>
<div class="hero-bottom-strip">
<span>
Opening <strong>late 2026</strong> · Pickup & delivery first, dine‑in after.
</span>
<span class="hero-bottom-chip">
Open late · Thu – Sun
</span>
</div>
</div>
</aside>
</div>
</main>
<script>
const langButtons = document.querySelectorAll(".lang-btn");
const langElems = document.querySelectorAll("[data-lang]");
function setLanguage(lang) {
langElems.forEach(el => {
el.classList.toggle("active", el.getAttribute("data-lang") === lang);
});
langButtons.forEach(btn => {
btn.classList.toggle("active", btn.dataset.switch === lang);
});
document.documentElement.lang = lang;
}
langButtons.forEach(btn => {
btn.addEventListener("click", () => setLanguage(btn.dataset.switch));
});
</script>
</body>
</html>