scott/boathousecafelakehopatcong
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Update styles and content for Boathouse Cafe website to enhance user experience and reflect new branding

Browse Source
This commit is contained in:
admin
2026-06-13 09:13:20 -04:00
parent d1e39aee04
commit df6189d308
3 changed files with 179 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/public/styles/app.css
+74 -88
View File
@@ -1,11 +1,13 @@
:root { :root {
--cbc-navy: #0b2f55; --bh-deep-water: #1a3c4a;
--cbc-deep-blue: #0f5f97; --bh-lake: #2c7a8c;
--cbc-bright-blue: #1c9dd9; --bh-teal: #4a9dab;
--cbc-ice: #dff3fb; --bh-sand: #e8d5b7;
--cbc-white: #f5fbff; --bh-cream: #fdf6ed;
--cbc-coffee: #6a3f24; --bh-wood: #7a4d2e;
--cbc-gold: #f2bf44; --bh-warm-white: #fffbf5;
--bh-gold: #f2bf44;
--bh-pine: #3a5a40;
} }
* { * {
@@ -15,12 +17,12 @@
body { body {
margin: 0; margin: 0;
font-family: 'Nunito', sans-serif; font-family: 'Nunito', sans-serif;
color: var(--cbc-white); color: var(--bh-warm-white);
min-height: 100vh; min-height: 100vh;
background: background:
radial-gradient(circle at 8% 10%, #ffffff2e 0 90px, transparent 91px), radial-gradient(circle at 8% 10%, #fdf6ed2e 0 90px, transparent 91px),
radial-gradient(circle at 88% 15%, #6ecdf533 0 140px, transparent 141px), radial-gradient(circle at 88% 15%, #4a9dab33 0 140px, transparent 141px),
linear-gradient(145deg, var(--cbc-navy), var(--cbc-deep-blue) 45%, #0b426f); linear-gradient(145deg, var(--bh-deep-water), #1e4f5e 45%, #1a3c4a);
} }
.site-header { .site-header {
@@ -32,8 +34,8 @@ body {
justify-content: space-between; justify-content: space-between;
gap: 1rem; gap: 1rem;
padding: 0.7rem 1rem; padding: 0.7rem 1rem;
border-bottom: 1px solid #d6f4ff40; border-bottom: 1px solid #e8d5b740;
background: linear-gradient(180deg, #082540f0, #0b3255db); background: linear-gradient(180deg, #152f3cf0, #1a3c4adb);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
@@ -41,7 +43,7 @@ body {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.55rem; gap: 0.55rem;
color: var(--cbc-ice); color: var(--bh-sand);
text-decoration: none; text-decoration: none;
font-weight: 800; font-weight: 800;
letter-spacing: 0.03em; letter-spacing: 0.03em;
@@ -51,7 +53,7 @@ body {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
border-radius: 999px; border-radius: 999px;
border: 1px solid #d8f2ff85; border: 1px solid #e8d5b785;
} }
.top-nav { .top-nav {
@@ -61,17 +63,17 @@ body {
} }
.top-nav a { .top-nav a {
color: var(--cbc-white); color: var(--bh-warm-white);
text-decoration: none; text-decoration: none;
font-weight: 700; font-weight: 700;
border: 1px solid #dbf4ff44; border: 1px solid #e8d5b744;
border-radius: 999px; border-radius: 999px;
padding: 0.28rem 0.72rem; padding: 0.28rem 0.72rem;
background: #ffffff12; background: #ffffff12;
} }
.top-nav a:hover { .top-nav a:hover {
background: #9adcf83d; background: #4a9dab3d;
} }
.page-shell { .page-shell {
@@ -83,9 +85,9 @@ body {
.hero-card { .hero-card {
padding: 2rem; padding: 2rem;
border: 2px solid #c4ebff5c; border: 2px solid #e8d5b75c;
border-radius: 24px; border-radius: 24px;
background: linear-gradient(170deg, #0a2c4dca, #0e4f80ca 65%, #1b90c2bf); background: linear-gradient(170deg, #1a3c4aca, #1e4f5eca 65%, #2c7a8cbf);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
box-shadow: 0 14px 44px #03102066; box-shadow: 0 14px 44px #03102066;
text-align: center; text-align: center;
@@ -97,7 +99,7 @@ body {
margin: 0 auto 1rem; margin: 0 auto 1rem;
padding: 0.55rem; padding: 0.55rem;
border-radius: 20px; border-radius: 20px;
background: linear-gradient(135deg, #ffffff26, #70cef747); background: linear-gradient(135deg, #fdf6ed26, #4a9dab47);
} }
.logo-image { .logo-image {
@@ -108,7 +110,7 @@ body {
.tag { .tag {
margin: 0; margin: 0;
color: var(--cbc-gold); color: var(--bh-gold);
letter-spacing: 0.14em; letter-spacing: 0.14em;
text-transform: uppercase; text-transform: uppercase;
font-weight: 800; font-weight: 800;
@@ -120,7 +122,7 @@ h1 {
font-family: 'Bebas Neue', sans-serif; font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.4rem, 8vw, 4rem); font-size: clamp(2.4rem, 8vw, 4rem);
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: var(--cbc-ice); color: var(--bh-sand);
} }
.lead { .lead {
@@ -137,7 +139,7 @@ h1 {
} }
.pill { .pill {
border: 1px solid #d6f4ff7d; border: 1px solid #e8d5b77d;
border-radius: 999px; border-radius: 999px;
padding: 0.35rem 0.9rem; padding: 0.35rem 0.9rem;
background: #ffffff14; background: #ffffff14;
@@ -152,15 +154,15 @@ h1 {
.info-grid article { .info-grid article {
border-radius: 16px; border-radius: 16px;
background: linear-gradient(165deg, #ffffff17, #7bc6ed26); background: linear-gradient(165deg, #fdf6ed17, #4a9dab26);
border: 1px solid #d8eeff47; border: 1px solid #e8d5b747;
padding: 1rem 1.1rem; padding: 1rem 1.1rem;
animation: reveal 900ms ease-out both; animation: reveal 900ms ease-out both;
} }
.info-grid h2 { .info-grid h2 {
margin-top: 0; margin-top: 0;
color: var(--cbc-gold); color: var(--bh-gold);
font-size: 1rem; font-size: 1rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.08em; letter-spacing: 0.08em;
@@ -168,7 +170,7 @@ h1 {
.info-grid p { .info-grid p {
margin: 0.45rem 0; margin: 0.45rem 0;
color: var(--cbc-white); color: var(--bh-warm-white);
} }
.menu-board, .menu-board,
@@ -178,8 +180,8 @@ h1 {
.admin-card, .admin-card,
.section-card { .section-card {
border-radius: 16px; border-radius: 16px;
background: linear-gradient(160deg, #f8fdff1a, #88d4f92b); background: linear-gradient(160deg, #fdf6ed1a, #4a9dab2b);
border: 1px solid #d8eeff47; border: 1px solid #e8d5b747;
padding: 1rem 1.1rem; padding: 1rem 1.1rem;
animation: reveal 1000ms ease-out both; animation: reveal 1000ms ease-out both;
} }
@@ -191,7 +193,7 @@ h1 {
.admin-card h2, .admin-card h2,
.section-card h2 { .section-card h2 {
margin-top: 0; margin-top: 0;
color: var(--cbc-gold); color: var(--bh-gold);
font-size: 1rem; font-size: 1rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.08em; letter-spacing: 0.08em;
@@ -204,8 +206,8 @@ h1 {
} }
.menu-grid article { .menu-grid article {
background: #0828428a; background: #1a3c4a8a;
border: 1px solid #cbeeff45; border: 1px solid #e8d5b745;
border-radius: 12px; border-radius: 12px;
padding: 0.75rem; padding: 0.75rem;
} }
@@ -220,7 +222,7 @@ h1 {
} }
.menu-grid strong { .menu-grid strong {
color: var(--cbc-gold); color: var(--bh-gold);
} }
.reservation-form { .reservation-form {
@@ -233,15 +235,15 @@ h1 {
grid-column: span 2; grid-column: span 2;
margin-top: 0.2rem; margin-top: 0.2rem;
font-weight: 700; font-weight: 700;
color: #dff3fb; color: var(--bh-sand);
} }
.reservation-form input { .reservation-form input {
grid-column: span 2; grid-column: span 2;
border: 1px solid #bfe9ff61; border: 1px solid #e8d5b761;
border-radius: 10px; border-radius: 10px;
background: #072741c7; background: #152f3cc7;
color: var(--cbc-white); color: var(--bh-warm-white);
padding: 0.6rem 0.72rem; padding: 0.6rem 0.72rem;
} }
@@ -288,20 +290,20 @@ h1 {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
min-width: 680px; min-width: 680px;
background: #072b4580; background: #1a3c4a80;
border: 1px solid #bde7ff3d; border: 1px solid #e8d5b73d;
} }
.reservation-table th, .reservation-table th,
.reservation-table td { .reservation-table td {
border-bottom: 1px solid #bde7ff33; border-bottom: 1px solid #e8d5b733;
padding: 0.6rem 0.55rem; padding: 0.6rem 0.55rem;
text-align: left; text-align: left;
font-size: 0.94rem; font-size: 0.94rem;
} }
.reservation-table thead th { .reservation-table thead th {
color: var(--cbc-gold); color: var(--bh-gold);
letter-spacing: 0.03em; letter-spacing: 0.03em;
font-size: 0.86rem; font-size: 0.86rem;
text-transform: uppercase; text-transform: uppercase;
@@ -311,7 +313,7 @@ h1 {
width: min(980px, 92vw); width: min(980px, 92vw);
margin: 0 auto 1.2rem; margin: 0 auto 1.2rem;
text-align: center; text-align: center;
color: #d2edff; color: var(--bh-sand);
font-size: 0.9rem; font-size: 0.9rem;
} }
@@ -368,12 +370,10 @@ h1 {
} }
} }
/* ── Hero CTAs ──────────────────────────────────────── */
.hero-sub { .hero-sub {
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
color: var(--cbc-ice); color: var(--bh-sand);
margin: 0.3rem 0 0.5rem; margin: 0.3rem 0 0.5rem;
} }
@@ -405,26 +405,24 @@ h1 {
display: inline-block; display: inline-block;
padding: 0.6rem 1.4rem; padding: 0.6rem 1.4rem;
background: transparent; background: transparent;
color: var(--cbc-ice); color: var(--bh-sand);
font-weight: 700; font-weight: 700;
border-radius: 999px; border-radius: 999px;
text-decoration: none; text-decoration: none;
border: 1.5px solid #c4ebff7d; border: 1.5px solid #e8d5b77d;
font-size: 0.95rem; font-size: 0.95rem;
transition: background 0.15s; transition: background 0.15s;
} }
.btn-secondary:hover { .btn-secondary:hover {
background: #9adcf83d; background: #4a9dab3d;
} }
/* ── Section card sub-headings ──────────────────────── */
.section-card h3, .section-card h3,
.about-card h3, .about-card h3,
.contact-card h3, .contact-card h3,
.menu-board h3.section-sub { .menu-board h3.section-sub {
color: var(--cbc-ice); color: var(--bh-sand);
font-size: 1rem; font-size: 1rem;
font-weight: 800; font-weight: 800;
margin: 1.1rem 0 0.4rem; margin: 1.1rem 0 0.4rem;
@@ -436,17 +434,15 @@ h1 {
} }
.contact-card a { .contact-card a {
color: var(--cbc-bright-blue); color: var(--bh-teal);
text-decoration: none; text-decoration: none;
} }
.contact-card a:hover { .contact-card a:hover {
color: var(--cbc-ice); color: var(--bh-sand);
text-decoration: underline; text-decoration: underline;
} }
/* ── Hours & Location ───────────────────────────────── */
.hours-location-grid { .hours-location-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@@ -462,13 +458,13 @@ h1 {
.hours-table td { .hours-table td {
padding: 0.35rem 0; padding: 0.35rem 0;
color: var(--cbc-white); color: var(--bh-warm-white);
font-size: 0.95rem; font-size: 0.95rem;
} }
.hours-table td:first-child { .hours-table td:first-child {
font-weight: 700; font-weight: 700;
color: var(--cbc-ice); color: var(--bh-sand);
width: 58%; width: 58%;
} }
@@ -478,8 +474,6 @@ h1 {
color: #90d0f5; color: #90d0f5;
} }
/* ── Offerings list ─────────────────────────────────── */
.offerings-list { .offerings-list {
list-style: none; list-style: none;
padding: 0; padding: 0;
@@ -490,31 +484,29 @@ h1 {
} }
.offerings-list li { .offerings-list li {
background: #0828428a; background: #1a3c4a8a;
border: 1px solid #cbeeff45; border: 1px solid #e8d5b745;
border-radius: 12px; border-radius: 12px;
padding: 0.85rem 1rem; padding: 0.85rem 1rem;
} }
.offerings-list li strong { .offerings-list li strong {
display: block; display: block;
color: var(--cbc-gold); color: var(--bh-gold);
margin-bottom: 0.35rem; margin-bottom: 0.35rem;
font-size: 0.85rem; font-size: 0.85rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
} }
/* ── Menu note ──────────────────────────────────────── */
.menu-note { .menu-note {
margin-top: 1rem; margin-top: 1rem;
padding: 0.7rem 1rem; padding: 0.7rem 1rem;
background: #0828428a; background: #1a3c4a8a;
border: 1px solid #cbeeff45; border: 1px solid #e8d5b745;
border-radius: 10px; border-radius: 10px;
font-size: 0.9rem; font-size: 0.9rem;
color: #b8e4f9; color: var(--bh-sand);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@@ -522,8 +514,6 @@ h1 {
gap: 0.5rem; gap: 0.5rem;
} }
/* ── Workspace amenities ────────────────────────────── */
.amenities-list { .amenities-list {
list-style: none; list-style: none;
padding: 0; padding: 0;
@@ -534,15 +524,15 @@ h1 {
} }
.amenities-list li { .amenities-list li {
background: #0828428a; background: #1a3c4a8a;
border: 1px solid #cbeeff45; border: 1px solid #e8d5b745;
border-radius: 10px; border-radius: 10px;
padding: 0.75rem 0.9rem; padding: 0.75rem 0.9rem;
} }
.amenities-list li strong { .amenities-list li strong {
display: block; display: block;
color: var(--cbc-gold); color: var(--bh-gold);
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
font-size: 0.85rem; font-size: 0.85rem;
text-transform: uppercase; text-transform: uppercase;
@@ -558,7 +548,7 @@ h1 {
.why-list li { .why-list li {
padding: 0.35rem 0 0.35rem 1.4rem; padding: 0.35rem 0 0.35rem 1.4rem;
position: relative; position: relative;
color: var(--cbc-white); color: var(--bh-warm-white);
line-height: 1.55; line-height: 1.55;
} }
@@ -566,15 +556,13 @@ h1 {
content: "→"; content: "→";
position: absolute; position: absolute;
left: 0; left: 0;
color: var(--cbc-gold); color: var(--bh-gold);
font-weight: 700; font-weight: 700;
} }
/* ── Events ─────────────────────────────────────────── */
.event-item { .event-item {
background: #0828428a; background: #1a3c4a8a;
border: 1px solid #cbeeff45; border: 1px solid #e8d5b745;
border-radius: 12px; border-radius: 12px;
padding: 1rem 1.1rem; padding: 1rem 1.1rem;
margin-top: 0.85rem; margin-top: 0.85rem;
@@ -582,20 +570,18 @@ h1 {
.event-item h3 { .event-item h3 {
margin: 0.3rem 0 0.4rem; margin: 0.3rem 0 0.4rem;
color: var(--cbc-ice); color: var(--bh-sand);
font-size: 1rem; font-size: 1rem;
} }
.event-meta { .event-meta {
font-size: 0.8rem; font-size: 0.8rem;
color: var(--cbc-gold); color: var(--bh-gold);
font-weight: 800; font-weight: 800;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.07em; letter-spacing: 0.07em;
} }
/* ── Contact grid ───────────────────────────────────── */
.contact-grid { .contact-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1.3fr; grid-template-columns: 1fr 1.3fr;
@@ -611,8 +597,8 @@ h1 {
.form-fields-preview li { .form-fields-preview li {
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
border-bottom: 1px solid #cbeeff25; border-bottom: 1px solid #e8d5b725;
color: #b8e4f9; color: var(--bh-sand);
font-size: 0.9rem; font-size: 0.9rem;
} }
@@ -626,15 +612,15 @@ h1 {
.social-link { .social-link {
display: inline-block; display: inline-block;
padding: 0.3rem 0.85rem; padding: 0.3rem 0.85rem;
border: 1px solid #d6f4ff7d; border: 1px solid #e8d5b77d;
border-radius: 999px; border-radius: 999px;
background: #ffffff12; background: #ffffff12;
color: var(--cbc-ice); color: var(--bh-sand);
text-decoration: none; text-decoration: none;
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 700; font-weight: 700;
} }
.social-link:hover { .social-link:hover {
background: #9adcf83d; background: #4a9dab3d;
} }
app/templates/base.html.twig
+2 -2
View File
@@ -30,7 +30,7 @@
</a> </a>
<nav class="top-nav" aria-label="Primary"> <nav class="top-nav" aria-label="Primary">
<a href="#menu">Menu</a> <a href="#menu">Menu</a>
<a href="#workspace">Recharge</a> <a href="#offerings">Vibe</a>
<a href="#events">Events</a> <a href="#events">Events</a>
<a href="#about">About</a> <a href="#about">About</a>
<a href="#contact">Contact</a> <a href="#contact">Contact</a>
@@ -40,7 +40,7 @@
{% block body %}{% endblock %} {% block body %}{% endblock %}
<footer class="site-footer"> <footer class="site-footer">
<p>© 2026 Boathouse Cafe Lake Hopatcong &nbsp;·&nbsp; 1 Brady Rd, Lake Hopatcong, NJ 07849 &nbsp;·&nbsp; <a href="mailto:info@boathousecafelakehopatcong.com" style="color: inherit;">info@boathousecafelakehopatcong.com</a></p> <p>&copy; 2026 Boathouse Cafe Lake Hopatcong &nbsp;&middot;&nbsp; 1 Brady Rd, Lake Hopatcong, NJ 07849 &nbsp;&middot;&nbsp; <a href="mailto:info@boathousecafelakehopatcong.com" style="color: inherit;">info@boathousecafelakehopatcong.com</a></p>
</footer> </footer>
</body> </body>
</html> </html>
app/templates/home/index.html.twig
+103 -95
View File
@@ -1,30 +1,28 @@
{% extends 'base.html.twig' %} {% extends 'base.html.twig' %}
{% block title %}Boathouse Cafe — Jefferson, NJ{% endblock %} {% block title %}Boathouse Cafe — Lake Hopatcong, NJ{% endblock %}
{% block body %} {% block body %}
<main class="page-shell"> <main class="page-shell">
{# ── HERO ─────────────────────────────────────────── #}
<section class="hero-card"> <section class="hero-card">
<div class="logo-wrap"> <div class="logo-wrap">
<img src="{{ asset('images/logo.jpg') }}" alt="Boathouse Cafe logo" class="logo-image"> <img src="{{ asset('images/logo.jpg') }}" alt="Boathouse Cafe logo" class="logo-image">
</div> </div>
<p class="tag">Fuel for those who answer the call.</p> <p class="tag">Your lakeside getaway</p>
<h1>Boathouse Cafe</h1> <h1>Boathouse Cafe</h1>
<p class="hero-sub">A place to breathe. A place to belong.</p> <p class="hero-sub">Good coffee. Good company. Lake views.</p>
<p class="lead"> <p class="lead">
Jefferson's neighborhood cafe dedicated to first responders and healthcare professionals — because the people who show up for everyone else deserve a place that shows up for them. Welcome to Boathouse Cafe — a cozy lakeside coffee house on Lake Hopatcong where friends become family, conversations flow as freely as the coffee, and every visit feels like a breath of fresh air.
</p> </p>
<div class="btn-row"> <div class="btn-row">
<a href="#menu" class="btn-primary">View Menu</a> <a href="#menu" class="btn-primary">View Menu</a>
<a href="#contact" class="btn-secondary">Host an Event</a> <a href="#events" class="btn-secondary">See Events</a>
</div> </div>
</section> </section>
{# ── HOURS & LOCATION ─────────────────────────────── #}
<section id="hours" class="section-card" aria-labelledby="hours-title"> <section id="hours" class="section-card" aria-labelledby="hours-title">
<h2 id="hours-title">Hours &amp; Location</h2> <h2 id="hours-title">Hours &amp; Location</h2>
<div class="hours-location-grid"> <div class="hours-location-grid">
@@ -41,205 +39,215 @@
</div> </div>
<div> <div>
<h3 class="section-sub">Getting Here</h3> <h3 class="section-sub">Getting Here</h3>
<p><strong>42 Overflow Lane, Jefferson, NJ 07438</strong></p> <p><strong>1 Brady Rd, Lake Hopatcong, NJ 07849</strong></p>
<p> <p>
We're on the corner of Overflow Lane and Broadband Ave, two blocks from the Jefferson Transit Center. Street parking is available out front, and bike racks are just inside the courtyard entrance. Right on the water at Brady Bridge — follow the shore road past the marina and look for the string lights and warm glow. Plenty of parking out front, bike racks available, and the lake path is steps from our door.
</p> </p>
</div> </div>
</div> </div>
</section> </section>
{# ── SIGNATURE OFFERINGS ──────────────────────────── #}
<section id="offerings" class="section-card" aria-labelledby="offerings-title"> <section id="offerings" class="section-card" aria-labelledby="offerings-title">
<h2 id="offerings-title">What We Do Differently</h2> <h2 id="offerings-title">The Lake Vibe Experience</h2>
<p>More than great coffee — a space built around the people who give the most.</p> <p>Great coffee is just the beginning. Here's what makes Boathouse Cafe your new favorite spot.</p>
<ul class="offerings-list"> <ul class="offerings-list">
<li> <li>
<strong>First Responder &amp; Healthcare Discount</strong> <strong>Lakeside Patio Seating</strong>
15% off every order with a valid badge, ID, or hospital credentials. No questions, no hassle — just our way of saying thank you. Sip your latte while watching the sun dance across the water. Our patio overlooks the lake — the perfect spot for morning reflections or afternoon catch-ups with friends.
</li> </li>
<li> <li>
<strong>Pre-Shift Express Service</strong> <strong>Family-Friendly Welcome</strong>
Running to a shift? Step up to the express counter and we'll have your order ready in under three minutes. Because your time is never yours to waste. Kids, grandparents, dogs on the patio — everyone is welcome here. Board games, coloring books, and a warm smile await the whole family.
</li> </li>
<li> <li>
<strong>Decompression Lounge</strong> <strong>Cozy Nooks &amp; Comfy Chairs</strong>
A quiet, low-stimulation corner set aside for unwinding after tough calls or long shifts. Soft lighting, no screens, and a no-rush policy. Sink into a plush armchair by the window, grab a booth with friends, or claim a corner table for some quiet time. Every seat comes with a view.
</li> </li>
<li> <li>
<strong>Shift-Change Happy Hour</strong> <strong>Board Games &amp; Bookshelf</strong>
Every day from 6–8 AM and 6–8 PM — drip coffee and tea at half price for anyone coming off or heading into a shift. Pick a game from our collection, browse a novel from the community shelf, or start a puzzle at the big table. Screen-free fun for all ages.
</li> </li>
<li> <li>
<strong>Community Board</strong> <strong>Free WiFi &amp; Workspace</strong>
Resources, peer support contacts, local wellness programs, and upcoming community events — all in one place, updated weekly. Need to get a few things done? Our WiFi is fast and free, with plenty of tables and outlets for getting things done between sips.
</li> </li>
<li> <li>
<strong>Brew-Your-Way Bar</strong> <strong>Live Music &amp; Open Mic Nights</strong>
Pour-over station, cold brew on tap, and a rotating selection of single-origin beans. Have a preference? Our baristas will work with it. Local acoustic acts, open mic nights, and the occasional impromptu jam session. The music here is as warm and authentic as the coffee.
</li> </li>
</ul> </ul>
</section> </section>
{# ── FEATURED MENU ────────────────────────────────── #}
<section id="menu" class="menu-board" aria-labelledby="menu-title"> <section id="menu" class="menu-board" aria-labelledby="menu-title">
<h2 id="menu-title">Featured Drinks</h2> <h2 id="menu-title">Lake Favorites</h2>
<div class="menu-grid"> <div class="menu-grid">
<article> <article>
<h3>Boathouse Latte</h3> <h3>Lake Fog Latte</h3>
<p>Vanilla cold foam, double espresso, oat milk. Rich, smooth, and ready the moment you need it most.</p> <p>Earl Grey steeped in steamed milk with vanilla and a hint of lavender. Calm in a cup, like a misty morning on the water.</p>
<strong>$5.75</strong> <strong>$5.75</strong>
</article> </article>
<article> <article>
<h3>First Response Roast</h3> <h3>Shorebreak Cold Brew</h3>
<p>Single-origin pour-over with a bright citrus finish. Clean, clear, and built for the kind of focus that saves lives.</p> <p>18-hour steeped cold brew, slow and smooth. Served over ice with a touch of honey and cream. The perfect cooldown.</p>
<strong>$4.50</strong>
</article>
<article>
<h3>Night Shift Mocha</h3>
<p>Dark chocolate, double shot, whipped cream. For the long hours, the quiet halls, and the ones who stay when everyone else goes home.</p>
<strong>$6.25</strong>
</article>
<article>
<h3>Trauma Bay Flat White</h3>
<p>Ristretto shots, steamed whole milk, served in a 5 oz cup. Compact, concentrated, and always steady under pressure.</p>
<strong>$5.50</strong>
</article>
<article>
<h3>Off-Duty Cold Brew</h3>
<p>18-hour steep, served over ice. Slow-built, smooth, and exactly what a hard shift deserves on the other side.</p>
<strong>$5.00</strong> <strong>$5.00</strong>
</article> </article>
<article> <article>
<h3>Dispatch Americano</h3> <h3>Dockside Mocha</h3>
<p>Two shots, hot water, no fuss. Clean and direct — because your radio doesn't wait and neither should your coffee.</p> <p>Dark chocolate, double shot espresso, steamed oat milk, and a sprinkle of sea salt. Rich and indulgent — like a day on the lake deserves.</p>
<strong>$4.25</strong> <strong>$6.25</strong>
</article> </article>
<article> <article>
<h3>Station House Macchiato</h3> <h3>Sunrise Pour-Over</h3>
<p>Espresso, butterscotch drizzle, steamed oat milk. A small comfort that hits harder than it looks.</p> <p>Single-origin beans, slow-poured to order. Bright, clean, and made for those quiet early mornings when the lake is glass.</p>
<strong>$4.50</strong>
</article>
<article>
<h3>Boat House Latte</h3>
<p>Our signature — double espresso, vanilla cold foam, oat milk. Smooth, comforting, and always hits the spot.</p>
<strong>$5.75</strong> <strong>$5.75</strong>
</article> </article>
<article> <article>
<h3>Triage Chai</h3> <h3>Lakeside Americano</h3>
<p>Spiced masala chai with steamed whole milk. Grounding, warm, and reliable — just like the best people on your team.</p> <p>Two shots, hot water, nothing fancy. Clean, direct, and just right for sitting on the patio watching the boats go by.</p>
<strong>$4.25</strong>
</article>
<article>
<h3>Sunset Chai</h3>
<p>Spiced masala chai with steamed whole milk and a drizzle of honey. Warm, grounding, and best enjoyed as the sun goes down over the lake.</p>
<strong>$4.75</strong> <strong>$4.75</strong>
</article> </article>
<article>
<h3>Harbor Macchiato</h3>
<p>Espresso marked with a dollop of foamed milk and a butterscotch drizzle. Small, sweet, and surprisingly bold — like a hidden cove.</p>
<strong>$5.75</strong>
</article>
</div> </div>
<div class="menu-note"> <div class="menu-note">
<span>Full menu available in-store.</span> <span>Full menu — including pastries, light bites, and kid-friendly options — available in-store.</span>
<a href="#contact" class="btn-secondary" style="font-size: 0.85rem; padding: 0.3rem 0.9rem;">Download Full Menu</a> <a href="#contact" class="btn-secondary" style="font-size: 0.85rem; padding: 0.3rem 0.9rem;">Ask About Our Menu</a>
</div> </div>
</section> </section>
{# ── RECHARGE ─────────────────────────────────────── #}
<section id="workspace" class="section-card" aria-labelledby="workspace-title"> <section id="workspace" class="section-card" aria-labelledby="workspace-title">
<h2 id="workspace-title">A Space to Recharge</h2> <h2 id="workspace-title">Hang Your Way</h2>
<p>Whether you're coming off a 12-hour shift, squeezing in a break between calls, or just need somewhere quiet to land — we've got you.</p> <p>Whether you're here for a lively catch-up with friends, a quiet afternoon with a book, or a remote work session — we've got your spot.</p>
<ul class="amenities-list"> <ul class="amenities-list">
<li> <li>
<div> <div>
<strong>No Rush Policy</strong> <strong>No Rush Policy</strong>
Stay as long as you need. We will never hurry you out the door. Your time off is yours. Stay as long as you like. We'll never hurry you out. Your time here is yours to enjoy.
</div> </div>
</li> </li>
<li> <li>
<div> <div>
<strong>Decompression Corner</strong> <strong>Lakeside Patio</strong>
A low-stimulation zone with soft lighting, comfortable seating, and a standing "no loud conversations" rule. A real place to come down. String lights, fresh air, and waterfront views. Our patio is the place to be on warm days and cool evenings alike.
</div> </div>
</li> </li>
<li> <li>
<div> <div>
<strong>Comfortable Seating for Every Need</strong> <strong>Comfortable Seating</strong>
Lounge chairs, padded booths, and counter seats — because after hours on your feet, the chair matters. Lounge chairs, cushioned booths, window counters, and outdoor benches — every seat is chosen for comfort and conversation.
</div> </div>
</li> </li>
<li> <li>
<div> <div>
<strong>Quiet Hours</strong> <strong>Board Game Library</strong>
Mon–Fri, 8–11 AM and 2–5 PM. Low music, no loudspeakers, and a calm environment by design. From classics to modern favorites, grab a game and challenge your friends. Loser buys the next round.
</div> </div>
</li> </li>
<li> <li>
<div> <div>
<strong>Background Playlist</strong> <strong>Community Bookshelf</strong>
Ambient and instrumental mixes kept at a volume that fades into the background rather than demanding your attention. Take a book, leave a book. Our shelf is always stocked with reads from our community of lake lovers.
</div>
</li>
<li>
<div>
<strong>Relaxed Background Tunes</strong>
Acoustic, folk, and chill instrumentals — music that sets the mood without stealing the conversation.
</div> </div>
</li> </li>
</ul> </ul>
<h3 class="section-sub">Why First Responders &amp; Healthcare Workers Choose Us</h3> <h3 class="section-sub">Why Lake Hopatcong Loves Us</h3>
<ul class="why-list"> <ul class="why-list">
<li>15% discount — no app, no loyalty card, just your ID.</li> <li>Family-owned and community-first since day one.</li>
<li>Express service for pre-shift and between-call stops.</li> <li>Locally roasted beans and fresh-baked treats daily.</li>
<li>A staff that understands the weight of what you carry.</li> <li>A warm, welcoming space for every age and every occasion.</li>
</ul> </ul>
</section> </section>
{# ── EVENTS & COMMUNITY ───────────────────────────── #}
<section id="events" class="section-card" aria-labelledby="events-title"> <section id="events" class="section-card" aria-labelledby="events-title">
<h2 id="events-title">Events &amp; Community</h2> <h2 id="events-title">Events &amp; Community</h2>
<p>A gathering place for the people who keep Jefferson safe, healthy, and whole.</p> <p>There's always something happening at the Boathouse. Come for the coffee, stay for the community.</p>
<div class="event-item">
<div class="event-meta">Weekly &nbsp;·&nbsp; Fridays, 7:00–9:00 PM</div>
<h3>Live Acoustic Night</h3>
<p>Local musicians take the small stage by the window for an evening of acoustic tunes, good vibes, and great coffee. Bring a friend, grab a seat, and let the music carry you into the weekend.</p>
</div>
<div class="event-item"> <div class="event-item">
<div class="event-meta">Weekly &nbsp;·&nbsp; Wednesdays, 6:00–8:00 PM</div> <div class="event-meta">Weekly &nbsp;·&nbsp; Wednesdays, 6:00–8:00 PM</div>
<h3>Peer Support Circle</h3> <h3>Game Night</h3>
<p>An informal, open-door gathering for first responders and healthcare workers to connect, decompress, and share — no agenda, no pressure. Facilitated by community volunteers and supported by local peer support organizations. Coffee and light snacks on us.</p> <p>Board games, card games, and friendly competition. We bring the games — you bring the energy. Snacks and drink specials all night. All ages welcome.</p>
</div> </div>
<div class="event-item"> <div class="event-item">
<div class="event-meta">Monthly &nbsp;·&nbsp; Second Saturday, 10:00 AM–12:00 PM</div> <div class="event-meta">Monthly &nbsp;·&nbsp; First Saturday, 10:00 AM–12:00 PM</div>
<h3>Wellness Morning</h3> <h3>Family Morning</h3>
<p>A monthly Saturday dedicated to wellbeing. We partner with local instructors and counselors to offer short wellness sessions — breathwork, stress management, and mental health resources — followed by open conversation and a complimentary cup of your choice.</p> <p>Kids-eat-free pastries, story time by the lake, and fun activities for the little ones while parents enjoy a quiet coffee with a view. A monthly tradition for Lake Hopatcong families.</p>
</div> </div>
<div class="event-item"> <div class="event-item">
<div class="event-meta">Ongoing &nbsp;·&nbsp; Sunday Mornings</div> <div class="event-meta">Monthly &nbsp;·&nbsp; Last Sunday, 2:00–4:00 PM</div>
<h3>Continuing Education Corner</h3> <h3>Book Club Meetup</h3>
<p>We reserve a quiet section on Sunday mornings for study and CE coursework. Group discounts on drip coffee, a guaranteed calm environment, and a staff that will leave you alone unless you need a refill. Reach out to reserve your spot.</p> <p>Pick up the month's featured title at the counter, read at your leisure, and join us for a relaxed discussion on the last Sunday of the month. New members always welcome — no pressure, just good conversation.</p>
</div> </div>
<div class="event-item"> <div class="event-item">
<h3>Reserve for Your Station or Unit</h3> <h3>Reserve the Boathouse</h3>
<p>Boathouse Cafe is available for private gatherings — station dinners, departmental meetups, team debriefs, or just a casual crew night out. Our main floor seats up to 40 guests with a private ordering tab for your group. First responder and healthcare group rates apply. Reach out at least one week in advance for larger bookings.</p> <p>Birthday parties, bridal showers, reunion gatherings, or team celebrations — our space is available for private events. With seating for up to 40 guests and a menu crafted to your occasion, the Boathouse is the perfect place to gather your people. Reach out at least two weeks in advance to reserve.</p>
<a href="#contact" class="btn-primary" style="display: inline-block; margin-top: 0.75rem; font-size: 0.9rem;">Book a Reservation</a> <a href="#contact" class="btn-primary" style="display: inline-block; margin-top: 0.75rem; font-size: 0.9rem;">Book Your Event</a>
</div> </div>
</section> </section>
{# ── ABOUT ────────────────────────────────────────── #}
<section id="about" class="about-card" aria-labelledby="about-title"> <section id="about" class="about-card" aria-labelledby="about-title">
<h2 id="about-title">Our Story</h2> <h2 id="about-title">Our Story</h2>
<p> <p>
Boathouse Cafe was built around a simple idea: the people who run toward emergencies deserve a place that takes care of them in return. We're a family with deep roots in emergency services and healthcare, and we know firsthand what a long shift feels like — and what it means to finally have somewhere to sit down. Boathouse Cafe was born from a simple love — of good coffee, of Lake Hopatcong, and of the community that calls this lake home. We're a family-owned coffee house that believes the best moments in life happen around a table, with good people and great drinks in hand.
</p> </p>
<p> <p>
We opened our doors in Jefferson, NJ with a short menu, a warm space, and a commitment to the nurses, paramedics, firefighters, police officers, dispatchers, doctors, and every other essential worker who keeps this community safe. The name is a nod to those critical moments — and to the people who stay calm and capable when a code blue is called. We opened our doors on the shores of Lake Hopatcong with a vision: to create a space where the pace of life slows down just a little. Where neighbors run into neighbors. Where families gather after a day on the water, friends meet for long-overdue catch-ups, and solo visitors always find a friendly face.
</p> </p>
<p> <p>
Today, Boathouse Cafe is more than a coffee shop. It's where off-duty officers come to breathe. Where night-shift nurses stop in before dawn. Where firefighters gather after a hard call. We don't ask about your shift. We just make sure your cup is full, your seat is comfortable, and you feel like you're somewhere that's genuinely glad you're here. Our name honors the boathouses that dot this beautiful lake — shelters for the things that matter most. That's what we want Boathouse Cafe to be: a shelter from the rush, a place to dock after a long week, and a warm welcome every single time you walk through the door.
</p>
<p>
So pull up a chair. Grab a latte. Stay a while. The lake isn't going anywhere — and neither are we.
</p> </p>
</section> </section>
{# ── CONTACT ──────────────────────────────────────── #}
<section id="contact" class="contact-card" aria-labelledby="contact-title"> <section id="contact" class="contact-card" aria-labelledby="contact-title">
<h2 id="contact-title">Get in Touch</h2> <h2 id="contact-title">Get in Touch</h2>
<p>Whether you have a question, want to book an event, or just want to say hello — we'd love to hear from you.</p> <p>Have a question, want to book the space, or just want to say hey? We'd love to hear from you.</p>
<div class="contact-grid"> <div class="contact-grid">
<div> <div>
<h3>Contact Info</h3> <h3>Contact Info</h3>
<p><a href="mailto:info@boathousecafelakehopatcong.com">info@boathousecafelakehopatcong.com</a></p> <p><a href="mailto:info@boathousecafelakehopatcong.com">info@boathousecafelakehopatcong.com</a></p>
<p><a href="https://boathousecafelakehopatcong.com" target="_blank" rel="noreferrer">boathousecafelakehopatcong.com</a></p> <p><a href="https://boathousecafelakehopatcong.com" target="_blank" rel="noreferrer">boathousecafelakehopatcong.com</a></p>
<h3>Follow Us</h3> <h3>Find Us</h3>
<p>Find us on your favorite platforms — search "Boathouse Cafe."</p> <p><strong>1 Brady Rd, Lake Hopatcong, NJ 07849</strong></p>
<h3>Follow the Lake Life</h3>
<p>Catch us on social for daily lake views, menu updates, and event announcements.</p>
<div class="social-links"> <div class="social-links">
<span class="social-link">GitHub</span>
<span class="social-link">Instagram</span> <span class="social-link">Instagram</span>
<span class="social-link">LinkedIn</span> <span class="social-link">Facebook</span>
</div> </div>
</div> </div>
<div> <div>
<h3>Send a Message</h3> <h3>Send a Message</h3>
<p style="font-size: 0.88rem; color: #90d0f5; margin: 0.2rem 0 0.6rem;">For event bookings, include your preferred date and estimated group size.</p> <p style="font-size: 0.88rem; color: var(--bh-sand); margin: 0.2rem 0 0.6rem;">For event bookings, include your preferred date and estimated guest count.</p>
<ul class="form-fields-preview"> <ul class="form-fields-preview">
<li>Name</li> <li>Name</li>
<li>Email</li> <li>Email</li>
@@ -247,7 +255,7 @@
<li>Preferred event date <em>(if booking)</em></li> <li>Preferred event date <em>(if booking)</em></li>
</ul> </ul>
<a href="mailto:info@boathousecafelakehopatcong.com" class="btn-primary">Send Message</a> <a href="mailto:info@boathousecafelakehopatcong.com" class="btn-primary">Send Message</a>
<p style="font-size: 0.82rem; color: #6bbfe0; margin-top: 0.85rem;">Online ordering coming soon.</p> <p style="font-size: 0.82rem; color: var(--bh-teal); margin-top: 0.85rem;">Online ordering coming soon.</p>
</div> </div>
</div> </div>
</section> </section>