233 lines
8.1 KiB
HTML
233 lines
8.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>The Host Stand | The First Table</title>
|
||
|
|
<meta property="og:type" content="website">
|
||
|
|
<meta property="og:title" content="The Host Stand | The First Table">
|
||
|
|
<meta property="og:description" content="The host stand is where the real magic happens. It">
|
||
|
|
<meta property="og:url" content="https://bryan-mubarak.4ort.net/host-stand.html">
|
||
|
|
<meta name="twitter:card" content="summary">
|
||
|
|
<meta name="description" content="The host stand is where the real magic happens. It's not about seating people. It's about orchestrating an entire experience. Every decision you make at…">
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--bg: #0a0a0a;
|
||
|
|
--text: #e0e0e0;
|
||
|
|
--accent: #c9a227;
|
||
|
|
--card-bg: #1a1a1a;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Georgia', serif;
|
||
|
|
background: var(--bg);
|
||
|
|
color: var(--text);
|
||
|
|
line-height: 1.6;
|
||
|
|
padding: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
max-width: 1000px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
header {
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 4rem;
|
||
|
|
padding: 2rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-size: 3.5rem;
|
||
|
|
font-weight: 300;
|
||
|
|
letter-spacing: -1px;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.back-link {
|
||
|
|
display: inline-block;
|
||
|
|
color: var(--accent);
|
||
|
|
text-decoration: none;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
transition: color 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.back-link:hover {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
background: var(--card-bg);
|
||
|
|
padding: 3rem;
|
||
|
|
border-radius: 12px;
|
||
|
|
border: 1px solid #333;
|
||
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.content h2 {
|
||
|
|
font-size: 2.2rem;
|
||
|
|
color: var(--accent);
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content p {
|
||
|
|
font-size: 1.2rem;
|
||
|
|
line-height: 1.9;
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
opacity: 0.95;
|
||
|
|
}
|
||
|
|
|
||
|
|
.strategy-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
|
|
gap: 2rem;
|
||
|
|
margin: 3rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.strategy-card {
|
||
|
|
background: #2a2a2a;
|
||
|
|
padding: 2rem;
|
||
|
|
border-radius: 8px;
|
||
|
|
border-left: 4px solid var(--accent);
|
||
|
|
transition: transform 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.strategy-card:hover {
|
||
|
|
transform: translateX(8px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.strategy-card h3 {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.strategy-card p {
|
||
|
|
font-size: 1rem;
|
||
|
|
line-height: 1.7;
|
||
|
|
opacity: 0.9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.philosophy {
|
||
|
|
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
|
||
|
|
padding: 2.5rem;
|
||
|
|
border-radius: 8px;
|
||
|
|
border-left: 4px solid var(--accent);
|
||
|
|
margin: 3rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.philosophy blockquote {
|
||
|
|
font-size: 1.4rem;
|
||
|
|
font-style: italic;
|
||
|
|
line-height: 1.7;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.philosophy cite {
|
||
|
|
font-size: 1rem;
|
||
|
|
opacity: 0.8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.next-station {
|
||
|
|
text-align: center;
|
||
|
|
margin: 4rem 0;
|
||
|
|
padding: 2rem;
|
||
|
|
background: linear-gradient(135deg, var(--accent) 0%, #f4d03f 100%);
|
||
|
|
color: #0a0a0a;
|
||
|
|
border-radius: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.next-station h2 {
|
||
|
|
font-size: 2rem;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.next-station button {
|
||
|
|
background: #0a0a0a;
|
||
|
|
color: #fff;
|
||
|
|
padding: 1rem 2.5rem;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
border: none;
|
||
|
|
border-radius: 8px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.next-station button:hover {
|
||
|
|
transform: scale(1.05);
|
||
|
|
box-shadow: 0 8px 25px rgba(0,0,0,0.4);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<a href="entrance.html" class="back-link">← Back to The Entrance</a>
|
||
|
|
|
||
|
|
<header>
|
||
|
|
<h1>The Host Stand</h1>
|
||
|
|
<p style="font-size: 1.3rem; font-style: italic; opacity: 0.9;">Where the game is won or lost</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="content">
|
||
|
|
<h2>It's Not Just a Desk. It's a Command Center.</h2>
|
||
|
|
|
||
|
|
<p>The host stand is where the real magic happens. It's not about seating people. It's about orchestrating an entire experience. Every decision you make at that stand ripples through the entire restaurant. A wrong seating can throw off a server's whole night. A perfect one can make them feel like they're flying.</p>
|
||
|
|
|
||
|
|
<p>I learned this the hard way. Early in my career, I was so focused on the food, the service, the wine list. I forgot the most important part: the *flow*. The way guests move through the room, the timing of every course, the rhythm of the entire shift. That's what separates the good restaurants from the great ones.</p>
|
||
|
|
|
||
|
|
<div class="philosophy">
|
||
|
|
<blockquote>
|
||
|
|
"Every table is a gallery installation, every guest a critic, and every shift a chance to outshine the competition."
|
||
|
|
</blockquote>
|
||
|
|
<cite>— Bryan Mubarak</cite>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>The Strategy</h2>
|
||
|
|
|
||
|
|
<div class="strategy-grid">
|
||
|
|
<div class="strategy-card">
|
||
|
|
<h3>Read the Room</h3>
|
||
|
|
<p>Before you seat a single guest, you need to know the entire floor. Who's busy, who's slow, who's having a rough night. You're not just seating people; you're balancing an ecosystem.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="strategy-card">
|
||
|
|
<h3>Know Your Servers</h3>
|
||
|
|
<p>Every server has a rhythm, a style, a weakness. You need to know them all. Seat the right table with the right server, and you've just won half the battle.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="strategy-card">
|
||
|
|
<h3>Timing is Everything</h3>
|
||
|
|
<p>Seat too early and you're behind. Seat too late and you've lost the guest. The perfect timing is like a perfectly poured cocktail—just enough, never too much.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="strategy-card">
|
||
|
|
<h3>Anticipate the Competition</h3>
|
||
|
|
<p>Your rivals are watching. They're learning your moves. You need to stay one step ahead. Every seating decision is a play in the game.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>The Challenge</h2>
|
||
|
|
|
||
|
|
<p>Every night is a new game. The competition is always trying to outdo you. But you? You're building something that can't be copied. A perfect flow, a seamless experience, a night that guests will talk about for years.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="next-station">
|
||
|
|
<h2>Ready for the heat?</h2>
|
||
|
|
<p style="margin-bottom: 1.5rem;">The kitchen pass is where the real work happens.</p>
|
||
|
|
<button onclick="window.location.href='/kitchen-pass.html'">Enter the Kitchen Pass</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|