cw-hans/Bar-menu-and-calendar-events
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1 from coding-with-hans-heinemann/feature/initial-site

Browse Source
This commit is contained in:
Andrew Nguyen
2026-03-13 15:38:02 -04:00
committed by GitHub
parent 0f56e98cb7 6b3ed7b142
commit c383c11ef4
3 changed files with 935 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
events.html Normal file
View File

@@ -0,0 +1,183 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Axis — Events</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- ===================================================
ADMIN: Edit the events array below to update the
events page. Each object supports:
name (string) — event title
date (string) — "YYYY-MM-DD"
time (string) — display string e.g. "9 PM"
description (string) — short blurb
tag (string) — optional label e.g. "Live Music"
==================================================== -->
<script id="events-data" type="application/json">
[
{
"name": "Jazz & Rye Night",
"date": "2026-03-20",
"time": "8 PM – 11 PM",
"description": "Local jazz quartet The Meridian Collective takes the stage. Featuring our curated rye whiskey flight and complimentary bar bites from 8–9 PM.",
"tag": "Live Music"
},
{
"name": "Mezcal Tasting Masterclass",
"date": "2026-03-27",
"time": "7 PM – 9 PM",
"description": "Guided tasting with four premium single-village mezcals. Led by award-winning spirits educator Ramona Vásquez. Tickets include a welcome cocktail.",
"tag": "Tasting"
},
{
"name": "Vinyl Sessions Vol. 12",
"date": "2026-04-03",
"time": "9 PM – 1 AM",
"description": "DJ Harlow spins rare soul, funk, and neo-jazz on a vintage turntable setup. No cover charge. Cocktail specials all night.",
"tag": "DJ Night"
},
{
"name": "Chef's Table Pairing Dinner",
"date": "2026-04-10",
"time": "7 PM – 10 PM",
"description": "A five-course tasting menu crafted by our head chef, each course paired with a cocktail from our bar team. Seats are very limited — reserve in advance.",
"tag": "Dinner Event"
},
{
"name": "Trivia Night",
"date": "2026-04-17",
"time": "8 PM – 10 PM",
"description": "Monthly trivia with prizes including bar tabs, bottles, and Axis merchandise. Teams of up to 6. Arrive early to secure a table.",
"tag": "Social"
},
{
"name": "Whiskey & Smoke",
"date": "2026-04-24",
"time": "7 PM – 9 PM",
"description": "An evening dedicated to peated Scotch and Islay whiskies. Flight of five drams, paired with smoked charcuterie. Led by our resident whiskey sommelier.",
"tag": "Tasting"
}
]
</script>
<!-- ===== Navbar ===== -->
<nav class="navbar">
<a href="index.html" class="navbar__brand">Axis</a>
<button class="navbar__toggle" aria-label="Toggle menu" onclick="toggleNav()">
<span></span><span></span><span></span>
</button>
<ul class="navbar__links" id="nav-links">
<li><a href="index.html">Menu</a></li>
<li><a href="events.html" class="active">Events</a></li>
</ul>
</nav>
<!-- ===== Hero ===== -->
<header class="page-hero">
<p class="page-hero__eyebrow">What's On</p>
<h1 class="page-hero__title">Upcoming Events</h1>
<p class="page-hero__sub">Live music &middot; Tastings &middot; Special nights</p>
</header>
<!-- ===== Main Content ===== -->
<main>
<div class="container">
<div class="events-grid" id="events-container">
<!-- Populated by JS below -->
</div>
</div>
</main>
<!-- ===== Footer ===== -->
<footer>
<p><span>Axis</span> &mdash; Open Tue–Sun, 5pm–2am &mdash; 44 Commerce St</p>
<p style="margin-top:0.4rem;">Events subject to change. Follow us for updates.</p>
</footer>
<script>
/* ---- Mobile nav ---- */
function toggleNav() {
document.getElementById('nav-links').classList.toggle('open');
}
/* ---- Render events ---- */
(function () {
const DAYS = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
const raw = document.getElementById('events-data').textContent;
const events = JSON.parse(raw);
const container = document.getElementById('events-container');
if (!events || events.length === 0) {
container.innerHTML = '<p class="no-events">No upcoming events at this time.<br>Check back soon.</p>';
return;
}
// Sort by date ascending
events.sort((a, b) => new Date(a.date) - new Date(b.date));
// Only show today and future events
const today = new Date();
today.setHours(0, 0, 0, 0);
const upcoming = events.filter(e => {
// Parse date as local to avoid UTC-offset surprises
const [y, m, d] = e.date.split('-').map(Number);
const dt = new Date(y, m - 1, d);
return dt >= today;
});
if (upcoming.length === 0) {
container.innerHTML = '<p class="no-events">No upcoming events at this time.<br>Check back soon.</p>';
return;
}
upcoming.forEach(event => {
const [y, m, d] = event.date.split('-').map(Number);
const dt = new Date(y, m - 1, d);
const mon = MONTHS[dt.getMonth()];
const day = dt.getDate();
const dow = DAYS[dt.getDay()];
const tagHTML = event.tag
? `<span class="event-card__tag">${escHtml(event.tag)}</span>`
: '';
const card = document.createElement('article');
card.className = 'event-card';
card.innerHTML = `
<div class="event-card__date-block">
<div class="event-card__cal">
<div class="event-card__cal-month">${mon}</div>
<div class="event-card__cal-day">${day}</div>
</div>
<div class="event-card__datetime">
<div class="event-card__dow">${dow}</div>
<div class="event-card__time">${escHtml(event.time)}</div>
</div>
</div>
<h2 class="event-card__name">${escHtml(event.name)}</h2>
<p class="event-card__desc">${escHtml(event.description)}</p>
${tagHTML}
`;
container.appendChild(card);
});
})();
function escHtml(str) {
return String(str)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
</script>
</body>
</html>

335
index.html Normal file
View File

@@ -0,0 +1,335 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Axis — Menu</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- ===== Navbar ===== -->
<nav class="navbar">
<a href="index.html" class="navbar__brand">Axis</a>
<button class="navbar__toggle" aria-label="Toggle menu" onclick="toggleNav()">
<span></span><span></span><span></span>
</button>
<ul class="navbar__links" id="nav-links">
<li><a href="index.html" class="active">Menu</a></li>
<li><a href="events.html">Events</a></li>
</ul>
</nav>
<!-- ===== Hero ===== -->
<header class="page-hero">
<p class="page-hero__eyebrow">Est. 2018 &mdash; Downtown</p>
<h1 class="page-hero__title">Our Menu</h1>
<p class="page-hero__sub">Handcrafted cocktails &middot; Curated spirits &middot; Small plates</p>
</header>
<!-- ===== Main Content ===== -->
<main>
<div class="container">
<!-- ============ DRINKS ============ -->
<section class="menu-section" id="drinks">
<h2 class="section-title">Drinks</h2>
<!-- Cocktails -->
<p class="section-subtitle">Signature Cocktails</p>
<div class="menu-grid">
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Axis Old Fashioned</div>
<div class="menu-item__desc">Bourbon, smoked maple syrup, Angostura bitters, orange zest</div>
</div>
<div class="menu-item__price">$16</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Dark Meridian</div>
<div class="menu-item__desc">Dark rum, blackberry shrub, fresh lime, ginger beer, mint</div>
</div>
<div class="menu-item__price">$15</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Smoke & Mirrors</div>
<div class="menu-item__desc">Mezcal, Aperol, honey syrup, lemon, activated charcoal salt rim</div>
</div>
<div class="menu-item__price">$17</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Velvet Underground</div>
<div class="menu-item__desc">Vodka, black cherry liqueur, elderflower, prosecco, edible glitter</div>
</div>
<div class="menu-item__price">$16</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Nightshade Sour</div>
<div class="menu-item__desc">Rye whiskey, blackcurrant cordial, egg white, lemon, bitters foam</div>
</div>
<div class="menu-item__price">$16</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Golden Hour</div>
<div class="menu-item__desc">Reposado tequila, turmeric syrup, pineapple, lime, tajin rim</div>
</div>
<div class="menu-item__price">$15</div>
</div>
</div>
<!-- Beer -->
<p class="section-subtitle">Beer &amp; Cider</p>
<div class="menu-grid">
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Local Draft Lager</div>
<div class="menu-item__desc">Rotating local craft selection — ask your bartender</div>
</div>
<div class="menu-item__price">$8</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">IPA — Hazy</div>
<div class="menu-item__desc">Tropical & citrus forward, 6.8% ABV, 16 oz pour</div>
</div>
<div class="menu-item__price">$9</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Stout — Imperial</div>
<div class="menu-item__desc">Roasted coffee & dark chocolate notes, 9.2% ABV, 12 oz pour</div>
</div>
<div class="menu-item__price">$10</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Dry Hard Cider</div>
<div class="menu-item__desc">Small-batch orchard cider, crisp & lightly tart, 5% ABV</div>
</div>
<div class="menu-item__price">$8</div>
</div>
</div>
<!-- Wine -->
<p class="section-subtitle">Wine</p>
<div class="menu-grid">
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Côtes du Rhône Rouge</div>
<div class="menu-item__desc">Full-bodied, dark fruit, pepper, Grenache-Syrah blend &mdash; France</div>
</div>
<div class="menu-item__price">$13 / $48</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Malbec</div>
<div class="menu-item__desc">Plum, blackberry, hint of oak &mdash; Mendoza, Argentina</div>
</div>
<div class="menu-item__price">$12 / $44</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Chardonnay — Unoaked</div>
<div class="menu-item__desc">Crisp green apple, citrus, mineral finish &mdash; Burgundy, France</div>
</div>
<div class="menu-item__price">$13 / $46</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Pinot Grigio</div>
<div class="menu-item__desc">Light, dry, floral, pear notes &mdash; Alto Adige, Italy</div>
</div>
<div class="menu-item__price">$12 / $42</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Sparkling Rosé</div>
<div class="menu-item__desc">Strawberry, wild raspberry, fine bubbles &mdash; Provence, France</div>
</div>
<div class="menu-item__price">$14 / $52</div>
</div>
</div>
<!-- Spirits -->
<p class="section-subtitle">Spirits &amp; Neat Pours</p>
<div class="menu-grid">
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Maker's Mark Bourbon</div>
<div class="menu-item__desc">Wheat-forward, caramel, vanilla, mild oak — 1.5 oz</div>
</div>
<div class="menu-item__price">$12</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Glenfiddich 18 Yr</div>
<div class="menu-item__desc">Single malt Scotch — dried fruit, oaky toffee — 1.5 oz</div>
</div>
<div class="menu-item__price">$22</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Casamigos Añejo</div>
<div class="menu-item__desc">Smooth tequila — vanilla, caramel, subtle smoky oak — 1.5 oz</div>
</div>
<div class="menu-item__price">$18</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Del Maguey Mezcal</div>
<div class="menu-item__desc">Single-village, smoky agave, citrus undercurrent — 1.5 oz</div>
</div>
<div class="menu-item__price">$20</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Diplomatico Reserva Rum</div>
<div class="menu-item__desc">Venezuelan rum — molasses, dried fruits, long finish — 1.5 oz</div>
</div>
<div class="menu-item__price">$16</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Hendrick's Gin</div>
<div class="menu-item__desc">Cucumber & rose petal botanicals, served chilled — 1.5 oz</div>
</div>
<div class="menu-item__price">$14</div>
</div>
</div>
</section>
<hr class="divider" />
<!-- ============ FOOD ============ -->
<section class="menu-section" id="food">
<h2 class="section-title">Food</h2>
<!-- Small Plates -->
<p class="section-subtitle">Small Plates &amp; Shareables</p>
<div class="menu-grid">
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Truffle Fries</div>
<div class="menu-item__desc">Hand-cut fries, black truffle oil, parmesan, fresh thyme, aioli</div>
</div>
<div class="menu-item__price">$14</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Charcuterie Board</div>
<div class="menu-item__desc">Cured meats, aged cheeses, cornichons, grainy mustard, crostini</div>
</div>
<div class="menu-item__price">$22</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Spiced Lamb Skewers</div>
<div class="menu-item__desc">Harissa-marinated lamb, tzatziki, sumac onions, grilled pita</div>
</div>
<div class="menu-item__price">$18</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Burrata &amp; Heirloom Tomato</div>
<div class="menu-item__desc">Creamy burrata, heirloom tomatoes, basil oil, fleur de sel, balsamic</div>
</div>
<div class="menu-item__price">$16</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Crispy Calamari</div>
<div class="menu-item__desc">Lightly breaded, served with lemon aioli & smoked paprika dipping sauce</div>
</div>
<div class="menu-item__price">$15</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Korean BBQ Wings</div>
<div class="menu-item__desc">Gochujang glaze, sesame, scallions, pickled daikon — 8 wings</div>
</div>
<div class="menu-item__price">$17</div>
</div>
</div>
<!-- Mains -->
<p class="section-subtitle">Mains</p>
<div class="menu-grid">
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Axis Burger</div>
<div class="menu-item__desc">Double smash patty, aged cheddar, caramelized onion, house sauce, brioche</div>
</div>
<div class="menu-item__price">$20</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Pan-Seared Salmon</div>
<div class="menu-item__desc">Miso-glazed salmon, jasmine rice, bok choy, yuzu beurre blanc</div>
</div>
<div class="menu-item__price">$28</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Steak Frites</div>
<div class="menu-item__desc">8 oz hanger steak, chimichurri, pomme frites, watercress salad</div>
</div>
<div class="menu-item__price">$34</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Wild Mushroom Risotto</div>
<div class="menu-item__desc">Porcini &amp; cremini, aged parmesan, truffle oil, crispy sage (v)</div>
</div>
<div class="menu-item__price">$24</div>
</div>
</div>
<!-- Desserts -->
<p class="section-subtitle">Desserts</p>
<div class="menu-grid">
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Chocolate Lava Cake</div>
<div class="menu-item__desc">Warm dark chocolate, vanilla bean ice cream, gold dust</div>
</div>
<div class="menu-item__price">$12</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Crème Brûlée</div>
<div class="menu-item__desc">Classic vanilla custard, caramelized sugar crust, fresh berries</div>
</div>
<div class="menu-item__price">$11</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Affogato</div>
<div class="menu-item__desc">Double espresso over vanilla gelato, optional Frangelico shot</div>
</div>
<div class="menu-item__price">$10</div>
</div>
</div>
</section>
</div>
</main>
<!-- ===== Footer ===== -->
<footer>
<p><span>Axis</span> &mdash; Open Tue–Sun, 5pm–2am &mdash; 44 Commerce St</p>
<p style="margin-top:0.4rem;">Please drink responsibly. Must be 21+ to consume alcohol.</p>
</footer>
<script>
function toggleNav() {
document.getElementById('nav-links').classList.toggle('open');
}
</script>
</body>
</html>

417
style.css Normal file
View File

@@ -0,0 +1,417 @@
/* ===========================
Axis Bar — style.css
=========================== */
/* ---------- Reset & Base ---------- */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--bg: #0d0d0d;
--bg-surface: #161616;
--bg-card: #1c1c1c;
--gold: #c8922a;
--gold-light: #e0aa45;
--gold-dim: #7a5518;
--text: #e8e0d0;
--text-muted: #8a8070;
--border: #2a2520;
--red-accent: #8b1a1a;
--font-display: 'Georgia', 'Times New Roman', serif;
--font-body: 'Helvetica Neue', Arial, sans-serif;
--nav-h: 68px;
}
html {
scroll-behavior: smooth;
}
body {
background-color: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
min-height: 100vh;
}
a {
color: var(--gold);
text-decoration: none;
transition: color 0.2s;
}
a:hover {
color: var(--gold-light);
}
img { display: block; max-width: 100%; }
/* ---------- Navbar ---------- */
.navbar {
position: sticky;
top: 0;
z-index: 100;
height: var(--nav-h);
background: rgba(13, 13, 13, 0.96);
border-bottom: 1px solid var(--gold-dim);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2rem;
}
.navbar__brand {
font-family: var(--font-display);
font-size: 1.8rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--gold);
}
.navbar__brand:hover {
color: var(--gold-light);
}
.navbar__links {
display: flex;
gap: 2rem;
list-style: none;
}
.navbar__links a {
font-size: 0.85rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-muted);
padding-bottom: 3px;
border-bottom: 2px solid transparent;
transition: color 0.2s, border-color 0.2s;
}
.navbar__links a:hover,
.navbar__links a.active {
color: var(--gold-light);
border-bottom-color: var(--gold);
}
/* Hamburger (mobile) */
.navbar__toggle {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
background: none;
border: none;
padding: 4px;
}
.navbar__toggle span {
display: block;
width: 24px;
height: 2px;
background: var(--gold);
border-radius: 2px;
transition: transform 0.3s, opacity 0.3s;
}
/* ---------- Hero / Page Header ---------- */
.page-hero {
background: linear-gradient(160deg, #1a1208 0%, #0d0d0d 60%);
border-bottom: 1px solid var(--border);
padding: 4rem 2rem 3rem;
text-align: center;
}
.page-hero__eyebrow {
font-size: 0.75rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold-dim);
margin-bottom: 0.75rem;
}
.page-hero__title {
font-family: var(--font-display);
font-size: clamp(2rem, 5vw, 3.5rem);
color: var(--gold);
letter-spacing: 0.08em;
}
.page-hero__sub {
margin-top: 0.75rem;
color: var(--text-muted);
font-size: 0.95rem;
letter-spacing: 0.05em;
}
/* ---------- Layout ---------- */
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 1.5rem;
}
main {
padding: 3rem 0 5rem;
}
/* ---------- Section headings ---------- */
.section-title {
font-family: var(--font-display);
font-size: 1.6rem;
color: var(--gold);
letter-spacing: 0.1em;
text-transform: uppercase;
border-bottom: 1px solid var(--gold-dim);
padding-bottom: 0.5rem;
margin-bottom: 2rem;
}
.section-subtitle {
font-size: 0.75rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 1.25rem;
margin-top: 2.5rem;
}
.menu-section {
margin-bottom: 4rem;
}
/* ---------- Menu Grid ---------- */
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
}
.menu-item {
background: var(--bg-card);
padding: 1.25rem 1.5rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
transition: background 0.2s;
}
.menu-item:hover {
background: #222018;
}
.menu-item__info {
flex: 1;
}
.menu-item__name {
font-weight: 600;
font-size: 0.95rem;
color: var(--text);
margin-bottom: 0.2rem;
}
.menu-item__desc {
font-size: 0.8rem;
color: var(--text-muted);
line-height: 1.4;
}
.menu-item__price {
font-family: var(--font-display);
font-size: 1rem;
color: var(--gold);
white-space: nowrap;
padding-top: 1px;
}
/* ---------- Divider ---------- */
.divider {
border: none;
border-top: 1px solid var(--border);
margin: 3rem 0;
}
/* ---------- Events Page ---------- */
.events-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.5rem;
}
.event-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-top: 3px solid var(--gold-dim);
border-radius: 4px;
padding: 1.75rem;
transition: border-top-color 0.2s, transform 0.2s;
}
.event-card:hover {
border-top-color: var(--gold);
transform: translateY(-2px);
}
.event-card__date-block {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.event-card__cal {
background: var(--gold-dim);
color: var(--bg);
border-radius: 4px;
width: 52px;
min-width: 52px;
text-align: center;
overflow: hidden;
font-weight: 700;
}
.event-card__cal-month {
background: var(--gold);
font-size: 0.65rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 2px 0;
color: #0d0d0d;
}
.event-card__cal-day {
font-size: 1.5rem;
line-height: 1;
padding: 4px 0 6px;
color: var(--text);
}
.event-card__datetime {
flex: 1;
}
.event-card__time {
font-size: 0.8rem;
color: var(--gold);
letter-spacing: 0.05em;
}
.event-card__dow {
font-size: 0.75rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.event-card__name {
font-family: var(--font-display);
font-size: 1.2rem;
color: var(--text);
margin-bottom: 0.5rem;
}
.event-card__desc {
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.55;
}
.event-card__tag {
display: inline-block;
margin-top: 1rem;
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
background: rgba(200, 146, 42, 0.12);
color: var(--gold);
border: 1px solid var(--gold-dim);
border-radius: 2px;
padding: 2px 8px;
}
.no-events {
text-align: center;
color: var(--text-muted);
padding: 4rem 0;
font-size: 0.95rem;
letter-spacing: 0.05em;
}
/* ---------- Footer ---------- */
footer {
border-top: 1px solid var(--border);
padding: 2rem 1.5rem;
text-align: center;
font-size: 0.8rem;
color: var(--text-muted);
letter-spacing: 0.08em;
}
footer span {
color: var(--gold-dim);
}
/* ---------- Responsive ---------- */
@media (max-width: 680px) {
.navbar__links {
display: none;
flex-direction: column;
gap: 0;
position: absolute;
top: var(--nav-h);
left: 0;
right: 0;
background: rgba(13, 13, 13, 0.98);
border-bottom: 1px solid var(--gold-dim);
padding: 1rem 0;
}
.navbar__links.open {
display: flex;
}
.navbar__links li {
width: 100%;
}
.navbar__links a {
display: block;
padding: 0.75rem 2rem;
border-bottom: none;
border-left: 2px solid transparent;
}
.navbar__links a:hover,
.navbar__links a.active {
border-left-color: var(--gold);
border-bottom: none;
background: rgba(200, 146, 42, 0.06);
}
.navbar__toggle {
display: flex;
}
.menu-grid {
grid-template-columns: 1fr;
}
.events-grid {
grid-template-columns: 1fr;
}
.page-hero {
padding: 2.5rem 1.5rem 2rem;
}
}