SURFIN' BIRD: Vintage Beach Town Menu

index.html

<div class="paper">
	<div class="grain"></div>

	<!-- ══ MASTHEAD ══ -->
	<div class="masthead">
		<div class="m-left">
			<span>Vol. LXIV</span> · <span>No. 4</span>
		</div>
		<div class="m-center">THE BEACH TOWN GAZETTE</div>
		<div class="m-right">
			<span>Summer Edition</span> · <span>25¢</span>
		</div>
	</div>

	<!-- ══ HERO ══ -->
	<header class="hero">
		<div class="kicker-row">
			<span class="kicker">★ ESTABLISHED 1962 ★</span>
			<span class="kicker">★ BEACH TOWN, VIRGINIA ★</span>
			<span class="kicker">★ HAND-PRESSED DAILY ★</span>
		</div>

		<h1 class="title">
			<span class="t1">Surfin' Bird</span>
			<span class="t2">SANDWICHES</span>
		</h1>

		<p class="tag-line">
			<span class="star">✦</span>
			"Everybody's heard about the bird!"
			<span class="star">✦</span>
		</p>

		<div class="hero-meta">
			<div>
				<b>TODAY'S SURF</b>
				<span>4-6 ft · CLEAN</span>
			</div>
			<div>
				<b>WIND</b>
				<span>SW · 8 mph</span>
			</div>
			<div>
				<b>HIGH TIDE</b>
				<span>2:47 PM</span>
			</div>
			<div>
				<b>WATER</b>
				<span>72°F · WARM</span>
			</div>
		</div>
	</header>

	<!-- ══ MAIN GRID ══ -->
	<main class="grid">

		<!-- ─── COL 1: SANDWICHES ─── -->
		<section class="col col-sandwiches">
			<div class="col-head">
				<span class="num">№ 01</span>
				<h2>The Sandwiches</h2>
				<span class="orn">∞</span>
			</div>

			<article class="sw featured">
				<div class="sw-head">
					<h3>The Surfin' Bird</h3>
					<span class="price">12<sup>00</sup></span>
				</div>
				<span class="bestseller">★ THE LEGEND ★</span>
				<p>Sliced chicken breast, avocado mayo, tomato, lettuce, and our famous Surfin' Bird sauce. On lightly toasted bread or housemade potato bun.</p>
			</article>

			<article class="sw">
				<div class="sw-head">
					<h3>The Jolly Roger</h3>
					<span class="price">12<sup>00</sup></span>
				</div>
				<p>A BLT, but for pirates. Smoked Applewood bacon, Duke's mayo, heirloom tomatoes, our secret pirate's treasure spice blend, on super-sour sourdough.</p>
			</article>

			<article class="sw">
				<div class="sw-head">
					<h3>The Beach Bum</h3>
					<span class="price">14<sup>00</sup></span>
				</div>
				<p>Triple decker loaded with turkey, bacon, lettuce, tomato, pepper jack. White, wheat, or super-sour sourdough.</p>
			</article>

			<article class="sw">
				<div class="sw-head">
					<h3>The Shady Palm</h3>
					<span class="price">14<sup>00</sup></span>
					<span class="leaf">🌱</span>
				</div>
				<p>Panfried, old-bay seasoned patty made with hearts of palm and garbanzos. Lettuce, heirloom tomato, horseradish vegan mayo.</p>
			</article>

			<article class="sw">
				<div class="sw-head">
					<h3>The Sandcastle</h3>
					<span class="price">8<sup>00</sup></span>
				</div>
				<p>PB or sunflower butter on white bread with strawberry or blueberry jelly. <em>Yes — we can cut the crust off.</em></p>
			</article>
		</section>

		<!-- ─── COL 2: FEATURE / ILLUSTRATION ─── -->
		<section class="col col-feature">
			<div class="col-head center">
				<h2>The Headliner</h2>
			</div>

			<!-- Halftone sandwich illustration -->
			<div class="sw-illust">
				<svg viewBox="0 0 200 200" aria-hidden="true">
					<!-- top bun -->
					<ellipse cx="100" cy="60" rx="78" ry="28" fill="#d4a062" />
					<ellipse cx="100" cy="55" rx="78" ry="22" fill="#e8b673" />
					<!-- sesame -->
					<ellipse cx="80" cy="50" rx="2" ry="3" fill="#fff7e0" />
					<ellipse cx="100" cy="48" rx="2" ry="3" fill="#fff7e0" />
					<ellipse cx="120" cy="50" rx="2" ry="3" fill="#fff7e0" />
					<ellipse cx="65" cy="55" rx="2" ry="3" fill="#fff7e0" />
					<ellipse cx="135" cy="55" rx="2" ry="3" fill="#fff7e0" />
					<!-- lettuce -->
					<path d="M22,82 Q35,72 50,80 Q65,68 80,78 Q95,68 110,80 Q125,70 140,80 Q155,72 178,82 L178,92 L22,92 Z" fill="#7fb069" />
					<!-- tomato -->
					<rect x="22" y="92" width="156" height="14" fill="#c0392b" />
					<ellipse cx="50" cy="99" rx="6" ry="3" fill="#a02818" />
					<ellipse cx="100" cy="99" rx="6" ry="3" fill="#a02818" />
					<ellipse cx="150" cy="99" rx="6" ry="3" fill="#a02818" />
					<!-- chicken -->
					<path d="M22,106 L178,106 L178,130 Q100,138 22,130 Z" fill="#e3b88c" />
					<path d="M40,114 Q60,118 80,114" stroke="#a47a4e" stroke-width="1.5" fill="none" />
					<path d="M100,118 Q120,114 140,118" stroke="#a47a4e" stroke-width="1.5" fill="none" />
					<!-- bottom bun -->
					<ellipse cx="100" cy="140" rx="78" ry="20" fill="#d4a062" />
					<ellipse cx="100" cy="142" rx="78" ry="14" fill="#c98f4e" />
				</svg>
				<div class="halftone"></div>
			</div>

			<div class="chef-quote">
				<span class="quote-mark">"</span>
				<p>We've been slicing the Bird since LBJ was president. Some folks come every day. They know.</p>
				<span class="signature">— Marty "The Chef" Pearson</span>
			</div>

			<div class="raves">
				<h4>★ ★ ★ ★ ★</h4>
				<p>"Life-changing. I dream about<br>the Jolly Roger." <span>— Beach Town Times</span></p>
			</div>

			<!-- Floating stamp -->
			<div class="stamp">
				<svg viewBox="0 0 120 120">
					<defs>
						<path id="sc" d="M 60,60 m -45,0 a 45,45 0 1,1 90,0 a 45,45 0 1,1 -90,0" />
					</defs>
					<text font-family="'Special Elite', monospace" font-size="9" letter-spacing="2.5" fill="#c0392b">
						<textPath href="#sc" startOffset="0">
							★ APPROVED BY SURFERS ★ SINCE 1962 ★ APPROVED BY SURFERS
						</textPath>
					</text>
				</svg>
				<span>OK</span>
			</div>
		</section>

		<!-- ─── COL 3: SIDES / DRINKS / INFO ─── -->
		<section class="col col-info">

			<div class="block">
				<div class="col-head">
					<span class="num">№ 02</span>
					<h2>The Sides</h2>
				</div>
				<p class="note">★ One side included with every sandwich ★</p>
				<ul class="side-list">
					<li>Housemade Kettle Chips</li>
					<li>French Fries</li>
					<li>Cole Slaw</li>
					<li>Potato Salad</li>
					<li>Mixed Greens · House Dressing</li>
				</ul>
			</div>

			<div class="block">
				<div class="col-head">
					<span class="num">№ 03</span>
					<h2>The Drinks</h2>
				</div>
				<ul class="side-list">
					<li>Iced Tea <em>· sweet or unsweet</em></li>
					<li>Cola <em>· regular or diet</em></li>
					<li>Sparkling Water</li>
				</ul>
			</div>

			<!-- Hours box -->
			<div class="hours-box">
				<div class="hb-head">
					<span class="hb-icon">⏱</span>
					<h4>We're Open</h4>
				</div>
				<table>
					<tr>
						<td>Mon — Thu</td>
						<td>11a — 5p</td>
					</tr>
					<tr>
						<td>Fri</td>
						<td>11a — 6p</td>
					</tr>
					<tr>
						<td>Sat</td>
						<td>11a — 6p</td>
					</tr>
					<tr>
						<td>Sun</td>
						<td>11a — 2p</td>
					</tr>
				</table>
			</div>

			<!-- Contact -->
			<div class="contact-box">
				<p class="ctx-h">FIND THE BIRD</p>
				<p class="ctx-addr">123 Main Street<br>Beach Town, Virginia</p>
				<p class="ctx-phone">(757) 555-5555</p>
			</div>

		</section>
	</main>

	<!-- ══ COUPON STRIP ══ -->
	<section class="coupons">
		<div class="cp-head">— — — — — — &nbsp; CLIP & SAVE &nbsp; — — — — — —</div>
		<div class="cp-row">
			<div class="cp">
				<span class="cp-corner cp-tl"></span>
				<span class="cp-corner cp-tr"></span>
				<span class="cp-corner cp-bl"></span>
				<span class="cp-corner cp-br"></span>
				<div class="cp-tag">FREE</div>
				<p class="cp-title">Side of Chips</p>
				<p class="cp-sub">w/ any sandwich</p>
				<p class="cp-exp">Exp. never · One per customer</p>
			</div>
			<div class="cp">
				<span class="cp-corner cp-tl"></span>
				<span class="cp-corner cp-tr"></span>
				<span class="cp-corner cp-bl"></span>
				<span class="cp-corner cp-br"></span>
				<div class="cp-tag">$2 OFF</div>
				<p class="cp-title">The Beach Bum</p>
				<p class="cp-sub">Tuesdays only</p>
				<p class="cp-exp">Exp. when summer ends</p>
			</div>
			<div class="cp">
				<span class="cp-corner cp-tl"></span>
				<span class="cp-corner cp-tr"></span>
				<span class="cp-corner cp-bl"></span>
				<span class="cp-corner cp-br"></span>
				<div class="cp-tag">BUY 1<br>GET 1</div>
				<p class="cp-title">Sandcastle</p>
				<p class="cp-sub">For the lil dudes</p>
				<p class="cp-exp">Kids under 12 · Sundays</p>
			</div>
		</div>
	</section>

	<!-- ══ FOOTER ══ -->
	<footer>
		<div class="ft-row">
			<span>✶</span>
			<span>SHAKAS HIGH · STOKE HIGHER</span>
			<span>✶</span>
			<span>MMXXVI · ALL RIGHTS RESERVED</span>
			<span>✶</span>
			<span>NO SHIRT · NO SHOES · NO PROBLEM</span>
			<span>✶</span>
			<button id="print-btn">PRINT THIS MENU →</button>
		</div>
	</footer>

	<!-- ══ FLOATING DECORATIVE ELEMENTS ══ -->
	<div class="float-tape tape-1"></div>
	<div class="float-tape tape-2"></div>
	<div class="float-tape tape-3"></div>
	<div class="float-burst">
		<div class="burst-inner">
			FRESH<br>DAILY!
		</div>
	</div>
</div>

script.js

/* ── PRINT BUTTON ── */
document
	.getElementById("print-btn")
	.addEventListener("click", () => window.print());

/* ── COUPON RANDOM ROTATIONS ── */
document.querySelectorAll(".cp").forEach((cp, i) => {
	const tilt = (Math.random() - 0.5) * 1.8;
	cp.style.transform = `rotate(${tilt}deg)`;
	cp.dataset.tilt = tilt;
});

/* ── SANDWICH ITEM HOVER: tilt slightly ── */
document.querySelectorAll(".sw").forEach((sw) => {
	sw.addEventListener("mouseenter", () => {
		sw.style.transition = "transform 0.4s cubic-bezier(.16,1,.3,1)";
		sw.style.transform = "translateX(4px)";
	});
	sw.addEventListener("mouseleave", () => {
		sw.style.transform = "";
	});
});

/* ── BURST WIGGLES ON MOUSE NEAR ── */
const burst = document.querySelector(".float-burst");
window.addEventListener("mousemove", (e) => {
	const r = burst.getBoundingClientRect();
	const cx = r.left + r.width / 2;
	const cy = r.top + r.height / 2;
	const d = Math.hypot(e.clientX - cx, e.clientY - cy);
	if (d < 200) {
		const intensity = 1 - d / 200;
		burst.style.animationDuration = `${2.4 - intensity * 1.5}s`;
	} else {
		burst.style.animationDuration = "2.4s";
	}
});

/* ── EASTER EGG: TYPE "BIRD" ── */
let typed = "";
window.addEventListener("keydown", (e) => {
	typed = (typed + e.key.toLowerCase()).slice(-4);
	if (typed === "bird") {
		document.body.style.transition = "transform 0.8s cubic-bezier(.16,1,.3,1)";
		document.body.style.transform = "rotate(-2deg) scale(1.02)";
		setTimeout(() => {
			document.body.style.transform = "";
		}, 1400);
	}
});

/* ── REVEAL ON LOAD: stagger sandwich items ── */
const swItems = document.querySelectorAll(".sw");
swItems.forEach((sw, i) => {
	sw.style.opacity = "0";
	sw.style.transform = "translateY(15px)";
	sw.style.transition = `opacity 0.6s ${
		0.15 + i * 0.08
	}s cubic-bezier(.16,1,.3,1), transform 0.6s ${
		0.15 + i * 0.08
	}s cubic-bezier(.16,1,.3,1)`;
	requestAnimationFrame(() => {
		requestAnimationFrame(() => {
			sw.style.opacity = "1";
			sw.style.transform = "translateY(0)";
		});
	});
});

/* ── LIVE-UPDATE THE SURF REPORT (just for fun) ── */
const surfStats = [
	"4-6 ft · CLEAN",
	"3-5 ft · GLASSY",
	"5-7 ft · FIRING",
	"2-4 ft · MELLOW"
];
let idx = 0;
setInterval(() => {
	idx = (idx + 1) % surfStats.length;
	const target = document.querySelector(
		".hero-meta div:first-child span:last-child"
	);
	if (target) {
		target.style.opacity = "0";
		setTimeout(() => {
			target.textContent = surfStats[idx];
			target.style.opacity = "1";
		}, 300);
	}
}, 4500);

style.css

@import url("https://fonts.googleapis.com/css2?family=Bowlby+One&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Kalam:wght@400;700&family=VT323&family=Rye&display=swap");

:root {
	--paper: #ece1c4;
	--paper-2: #e0d4b3;
	--ink: #1a1a1a;
	--red: #c0392b;
	--blue: #2c5f7c;
	--yellow: #f1c40f;
	--line: rgba(26, 26, 26, 0.18);

	--display: "Bowlby One", sans-serif;
	--serif: "Playfair Display", Georgia, serif;
	--hand: "Kalam", cursive;
	--type: "VT323", monospace;
	--slab: "Rye", serif;
}

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background: #2a2419;
	color: var(--ink);
	font-family: var(--serif);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* ── PAPER ── */
.paper {
	position: relative;
	max-width: 1180px;
	margin: 20px auto;
	background: var(--paper);
	padding: 28px 38px 36px;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 12px 24px rgba(0, 0, 0, 0.35),
		0 30px 60px rgba(0, 0, 0, 0.25);
	overflow: hidden;
}

.grain {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.22;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 200px 200px;
	z-index: 1;
}

/* ── MASTHEAD ── */
.masthead {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 3px double var(--ink);
	border-top: 1px solid var(--ink);
	padding: 6px 0;
	font-family: var(--type);
	font-size: 0.92rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	position: relative;
	z-index: 2;
}
.m-center {
	font-family: var(--display);
	font-size: 1rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}

/* ── HERO ── */
.hero {
	text-align: center;
	padding: 20px 0 8px;
	border-bottom: 1px solid var(--ink);
	position: relative;
	z-index: 2;
}

.kicker-row {
	display: flex;
	justify-content: center;
	gap: 26px;
	flex-wrap: wrap;
	font-family: var(--type);
	font-size: 0.88rem;
	letter-spacing: 0.2em;
	margin-bottom: 12px;
	color: var(--red);
	text-transform: uppercase;
}

.title {
	font-family: var(--display);
	line-height: 0.92;
	margin-bottom: 10px;
}
.t1 {
	display: block;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(1.6rem, 3.8vw, 2.4rem);
	color: var(--red);
	margin-bottom: -4px;
	letter-spacing: 0.01em;
}
.t2 {
	display: block;
	font-size: clamp(2.8rem, 10vw, 8.5rem);
	letter-spacing: -0.005em;
	color: var(--ink);
	text-transform: uppercase;
}

.tag-line {
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.1rem;
	color: var(--ink);
	margin-bottom: 14px;
}
.star {
	color: var(--red);
	margin: 0 12px;
	font-style: normal;
}

.hero-meta {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border-top: 1px solid var(--ink);
	margin-top: 14px;
	padding-top: 10px;
}
.hero-meta div {
	border-right: 1px solid var(--line);
	padding: 0 12px;
	font-family: var(--type);
	font-size: 0.9rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.hero-meta div:last-child {
	border-right: none;
}
.hero-meta b {
	display: block;
	font-family: var(--display);
	font-size: 0.78rem;
	letter-spacing: 0.2em;
	color: var(--red);
	margin-bottom: 4px;
}

/* ── GRID ── */
.grid {
	display: grid;
	grid-template-columns: 1fr 1fr 0.85fr;
	gap: 0;
	padding: 18px 0;
	position: relative;
	z-index: 2;
}
.col {
	padding: 0 18px;
	border-right: 1px solid var(--line);
}
.col:first-child {
	padding-left: 0;
}
.col:last-child {
	padding-right: 0;
	border-right: none;
}

.col-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	border-bottom: 3px double var(--ink);
	padding-bottom: 6px;
	margin-bottom: 14px;
}
.col-head.center {
	justify-content: center;
	border-bottom: 1px solid var(--ink);
}
.col-head .num {
	font-family: var(--type);
	font-size: 0.92rem;
	letter-spacing: 0.22em;
	color: var(--red);
	text-transform: uppercase;
}
.col-head h2 {
	font-family: var(--display);
	font-weight: 400;
	font-size: 1.85rem;
	letter-spacing: 0.01em;
	color: var(--ink);
	flex: 1;
	text-transform: uppercase;
}
.col-head .orn {
	font-family: var(--serif);
	font-size: 1.1rem;
	color: var(--red);
}

/* ── SANDWICH ITEMS ── */
.sw {
	padding: 12px 0;
	border-bottom: 1px dotted var(--line);
}
.sw:last-child {
	border-bottom: none;
}

.sw-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 4px;
}
.sw-head h3 {
	font-family: var(--display);
	font-weight: 400;
	font-size: 1.32rem;
	letter-spacing: 0.005em;
	flex: 1;
	text-transform: uppercase;
}
.price {
	font-family: var(--slab);
	font-size: 1.25rem;
	color: var(--red);
	position: relative;
}
.price::before {
	content: "$";
	font-size: 0.6em;
	vertical-align: super;
	margin-right: 1px;
}
.price sup {
	font-size: 0.5em;
	vertical-align: super;
	margin-left: 1px;
}
.leaf {
	font-size: 0.9rem;
}

.sw.featured {
	background: rgba(241, 196, 15, 0.18);
	margin: 10px -10px;
	padding: 12px 10px;
	border: 1.5px solid var(--ink);
	position: relative;
}
.bestseller {
	display: inline-block;
	font-family: var(--type);
	font-size: 0.85rem;
	letter-spacing: 0.22em;
	color: var(--red);
	background: var(--paper);
	padding: 3px 8px;
	border: 1px solid var(--red);
	margin: 2px 0 8px;
	text-transform: uppercase;
}
.sw p {
	font-size: 0.94rem;
	line-height: 1.5;
	color: rgba(26, 26, 26, 0.85);
}
.sw em {
	font-style: italic;
	color: var(--red);
}

/* ── FEATURE COLUMN ── */
.col-feature {
	position: relative;
}
.sw-illust {
	position: relative;
	margin: 8px 0;
	padding: 8px;
	background: var(--paper-2);
	border: 1px solid var(--ink);
}
.sw-illust svg {
	width: 100%;
	height: auto;
	display: block;
}
.halftone {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(
		circle,
		rgba(26, 26, 26, 0.18) 1px,
		transparent 1px
	);
	background-size: 4px 4px;
	mix-blend-mode: multiply;
}

.chef-quote {
	position: relative;
	margin: 14px 6px;
	padding: 10px 14px 10px 28px;
	border-left: 3px solid var(--red);
	font-family: var(--serif);
	font-style: italic;
	font-size: 1rem;
}
.quote-mark {
	position: absolute;
	left: 8px;
	top: -6px;
	font-family: var(--display);
	font-size: 3rem;
	color: var(--red);
	line-height: 1;
}
.signature {
	display: block;
	font-family: var(--hand);
	font-style: normal;
	font-weight: 700;
	font-size: 1.4rem;
	color: var(--ink);
	margin-top: 6px;
}

.raves {
	text-align: center;
	margin: 14px 0;
	padding: 10px;
	border: 1px dashed var(--ink);
	background: rgba(255, 255, 255, 0.2);
}
.raves h4 {
	font-family: var(--display);
	color: var(--yellow);
	-webkit-text-stroke: 1px var(--ink);
	font-size: 1.3rem;
	letter-spacing: 0.25em;
	margin-bottom: 6px;
}
.raves p {
	font-family: var(--serif);
	font-style: italic;
	font-size: 0.95rem;
}
.raves span {
	display: block;
	font-family: var(--type);
	font-size: 0.85rem;
	letter-spacing: 0.22em;
	color: var(--red);
	margin-top: 6px;
	text-transform: uppercase;
}

/* ── STAMP ── */
.stamp {
	position: absolute;
	bottom: -10px;
	right: -14px;
	width: 110px;
	height: 110px;
	z-index: 5;
	animation: stampSpin 28s linear infinite;
}
.stamp svg {
	width: 100%;
	height: 100%;
}
.stamp span {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--display);
	font-size: 1.5rem;
	color: var(--red);
	letter-spacing: 0.05em;
}
@keyframes stampSpin {
	to {
		transform: rotate(360deg);
	}
}

/* ── INFO COLUMN ── */
.col-info .block {
	margin-bottom: 18px;
}
.col-info .col-head {
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
.col-info .col-head h2 {
	font-size: 1.5rem;
}

.note {
	font-family: var(--type);
	font-size: 0.88rem;
	letter-spacing: 0.18em;
	color: var(--red);
	margin-bottom: 6px;
	text-align: center;
	text-transform: uppercase;
}

.side-list {
	list-style: none;
	font-family: var(--serif);
}
.side-list li {
	padding: 5px 0;
	border-bottom: 1px dotted var(--line);
	font-size: 0.98rem;
	position: relative;
	padding-left: 18px;
}
.side-list li::before {
	content: "★";
	position: absolute;
	left: 0;
	color: var(--red);
	font-size: 0.7rem;
	top: 8px;
}
.side-list em {
	font-style: italic;
	color: rgba(26, 26, 26, 0.6);
	font-size: 0.88rem;
}

.hours-box {
	border: 1.5px solid var(--ink);
	padding: 10px 12px;
	background: rgba(255, 255, 255, 0.18);
	margin-top: 16px;
}
.hb-head {
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid var(--ink);
	padding-bottom: 6px;
	margin-bottom: 8px;
}
.hb-head h4 {
	font-family: var(--display);
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.hb-icon {
	font-size: 1.1rem;
}
.hours-box table {
	width: 100%;
	font-family: var(--serif);
	font-size: 0.92rem;
}
.hours-box td {
	padding: 3px 0;
}
.hours-box td:last-child {
	text-align: right;
	font-weight: 700;
	color: var(--blue);
	font-variant-numeric: tabular-nums;
}

.contact-box {
	border-top: 3px double var(--ink);
	padding-top: 10px;
	margin-top: 14px;
	text-align: center;
}
.ctx-h {
	font-family: var(--type);
	font-size: 0.92rem;
	letter-spacing: 0.22em;
	color: var(--red);
	margin-bottom: 6px;
	text-transform: uppercase;
}
.ctx-addr {
	font-family: var(--display);
	font-size: 1rem;
	line-height: 1.3;
	margin-bottom: 4px;
	text-transform: uppercase;
}
.ctx-phone {
	font-family: var(--slab);
	font-size: 1.2rem;
	color: var(--red);
}

/* ── COUPONS ── */
.coupons {
	border-top: 3px double var(--ink);
	border-bottom: 3px double var(--ink);
	padding: 14px 0 18px;
	margin-top: 16px;
	position: relative;
	z-index: 2;
}
.cp-head {
	text-align: center;
	font-family: var(--type);
	font-size: 0.95rem;
	letter-spacing: 0.2em;
	color: var(--red);
	margin-bottom: 14px;
	text-transform: uppercase;
}

.cp-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.cp {
	position: relative;
	border: 2px dashed var(--ink);
	padding: 16px;
	text-align: center;
	background: rgba(255, 255, 255, 0.25);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s;
}
.cp:hover {
	transform: scale(1.03) rotate(-1deg);
	background: rgba(241, 196, 15, 0.3);
}

.cp-corner {
	position: absolute;
	width: 12px;
	height: 12px;
	border: 2px solid var(--ink);
	background: var(--paper);
}
.cp-tl {
	top: -7px;
	left: -7px;
	border-radius: 0 0 12px 0;
	border-top: none;
	border-left: none;
}
.cp-tr {
	top: -7px;
	right: -7px;
	border-radius: 0 0 0 12px;
	border-top: none;
	border-right: none;
}
.cp-bl {
	bottom: -7px;
	left: -7px;
	border-radius: 0 12px 0 0;
	border-bottom: none;
	border-left: none;
}
.cp-br {
	bottom: -7px;
	right: -7px;
	border-radius: 12px 0 0 0;
	border-bottom: none;
	border-right: none;
}

.cp-tag {
	font-family: var(--display);
	font-size: 1.9rem;
	line-height: 1;
	color: var(--red);
	margin-bottom: 4px;
	text-transform: uppercase;
}
.cp-title {
	font-family: var(--display);
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.cp-sub {
	font-family: var(--serif);
	font-style: italic;
	font-size: 0.88rem;
	color: rgba(26, 26, 26, 0.7);
	margin-top: 2px;
}
.cp-exp {
	font-family: var(--type);
	font-size: 0.85rem;
	letter-spacing: 0.15em;
	color: var(--red);
	margin-top: 6px;
	text-transform: uppercase;
}

/* ── FOOTER ── */
footer {
	padding: 14px 0 0;
	position: relative;
	z-index: 2;
}
.ft-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	font-family: var(--type);
	font-size: 0.9rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
}
.ft-row span {
	color: var(--red);
}
#print-btn {
	font-family: var(--type);
	font-size: 0.92rem;
	letter-spacing: 0.22em;
	background: var(--ink);
	color: var(--paper);
	border: none;
	padding: 7px 14px;
	cursor: pointer;
	transition: background 0.25s, letter-spacing 0.25s;
	text-transform: uppercase;
}
#print-btn:hover {
	background: var(--red);
	letter-spacing: 0.32em;
}

/* ── FLOATING DECORATIVE ELEMENTS ── */
.float-tape {
	position: absolute;
	background: rgba(241, 196, 15, 0.4);
	border: 1px dashed rgba(26, 26, 26, 0.2);
	z-index: 3;
	pointer-events: none;
}
.tape-1 {
	width: 90px;
	height: 22px;
	top: 8px;
	left: -22px;
	transform: rotate(-12deg);
}
.tape-2 {
	width: 70px;
	height: 18px;
	top: 18px;
	right: -18px;
	transform: rotate(15deg);
	background: rgba(192, 57, 43, 0.3);
}
.tape-3 {
	width: 100px;
	height: 20px;
	bottom: 60px;
	left: 30%;
	transform: rotate(-3deg);
	background: rgba(44, 95, 124, 0.3);
}

.float-burst {
	position: absolute;
	top: 280px;
	left: -32px;
	width: 100px;
	height: 100px;
	background: var(--red);
	z-index: 4;
	clip-path: polygon(
		50% 0,
		61% 35%,
		98% 35%,
		68% 57%,
		79% 91%,
		50% 70%,
		21% 91%,
		32% 57%,
		2% 35%,
		39% 35%
	);
	animation: pulse 2.4s ease-in-out infinite;
	transform: rotate(-12deg);
}
.burst-inner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--display);
	font-size: 0.9rem;
	color: var(--paper);
	text-align: center;
	letter-spacing: 0.03em;
	line-height: 1;
	text-transform: uppercase;
}
@keyframes pulse {
	0%,
	100% {
		transform: rotate(-12deg) scale(1);
	}
	50% {
		transform: rotate(-9deg) scale(1.06);
	}
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
	.grid {
		grid-template-columns: 1fr;
	}
	.col {
		border-right: none;
		border-bottom: 2px solid var(--ink);
		padding: 14px 0;
		margin-bottom: 4px;
	}
	.col:last-child {
		border-bottom: none;
	}
	.hero-meta {
		grid-template-columns: repeat(2, 1fr);
	}
	.hero-meta div {
		border-bottom: 1px solid var(--line);
		padding: 6px 12px;
	}
	.cp-row {
		grid-template-columns: 1fr;
	}
	.float-burst {
		top: 360px;
	}
}

@media (max-width: 500px) {
	.paper {
		padding: 18px 18px 22px;
	}
	.hero-meta {
		grid-template-columns: 1fr;
	}
	.t2 {
		font-size: 2.8rem;
	}
	.kicker-row {
		gap: 12px;
	}
}

/* ════════════════════════════════════════
   PRINT STYLES
═══════════════════════════════════════ */
@media print {
	@page {
		margin: 12mm;
		size: A4;
	}
	body {
		background: white;
	}
	.paper {
		box-shadow: none;
		max-width: 100%;
		padding: 0;
		background: white;
	}
	.grain,
	.stamp,
	.float-tape,
	.float-burst,
	#print-btn {
		display: none !important;
	}
	.grid {
		grid-template-columns: 1fr 1fr;
	}
	.col-info {
		grid-column: 1 / -1;
	}
	.cp-row {
		grid-template-columns: repeat(3, 1fr);
	}
	.sw.featured {
		background: white;
		border: 2px solid #000;
	}
	* {
		color: #000 !important;
	}
	.price,
	.star,
	.num,
	.kicker,
	.note,
	.cp-tag,
	.cp-exp,
	.quote-mark {
		color: #c0392b !important;
	}
}

surfin-bird-vintage-beach-town-menu.markdown

SURFIN' BIRD: Vintage Beach Town Menu

A vintage 1962 beach-town newspaper layout reimagined as a restaurant menu for a fictional sandwich shack. Built with pure HTML, CSS Grid, and a sprinkle of vanilla JavaScript. No frameworks.

A Pen by Stan Williams on CodePen.

License.

Wii a button at the bottom you can export the page to a PDF and save it !