On Tap Thu–Sat
+ +
+ = htmlspecialchars($activeAnnouncement['headline']) ?>:
+ = htmlspecialchars($activeAnnouncement['message']) ?>
+
+
- Thursday diff --git a/styles.css b/styles.css index d39540a..ca7600f 100644 --- a/styles.css +++ b/styles.css @@ -1,410 +1,873 @@ - :root{ - --ground:#171310; - --ground-2:#0f0c0a; - --surface:#221c16; - --surface-2:#2b2319; - --gold:#c9a35c; - --gold-bright:#e6c789; - --gold-dim:#a68b59; - --green:#33503f; - --green-deep:#203026; - --ink:#f1e8d8; - --ink-muted:#a89a83; - --rule:#42362590; + :root { + --ground: #171310; + --ground-2: #0f0c0a; + --surface: #221c16; + --surface-2: #2b2319; + --gold: #c9a35c; + --gold-bright: #e6c789; + --gold-dim: #a68b59; + --green: #33503f; + --green-deep: #203026; + --ink: #f1e8d8; + --ink-muted: #a89a83; + --rule: #42362590; } - *{ box-sizing:border-box; } - html{ scroll-behavior:smooth; } - @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } - - body{ - margin:0; - background:var(--ground); - color:var(--ink); - font-family:'Karla', ui-sans-serif, system-ui, sans-serif; - font-size:1rem; - line-height:1.65; - -webkit-font-smoothing:antialiased; + * { + box-sizing: border-box; } - a{ color:inherit; } - img,svg{ display:block; max-width:100%; } - - .container{ - width:100%; - max-width:70rem; - margin:0 auto; - padding-inline:1.5rem; + html { + scroll-behavior: smooth; } - h1,h2,h3{ - font-family:'Fraunces', Georgia, 'Times New Roman', serif; - font-weight:600; - line-height:1.08; - text-wrap:balance; - margin:0; + @media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } } - .eyebrow{ - font-family:'IBM Plex Mono', ui-monospace, Menlo, monospace; - font-size:0.72rem; - letter-spacing:0.22em; - text-transform:uppercase; - color:var(--gold); + body { + margin: 0; + background: var(--ground); + color: var(--ink); + font-family: 'Karla', ui-sans-serif, system-ui, sans-serif; + font-size: 1rem; + line-height: 1.65; + -webkit-font-smoothing: antialiased; } - p{ margin:0; } - .muted{ color:var(--ink-muted); } - - .visually-hidden{ - position:absolute; width:1px; height:1px; overflow:hidden; - clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px; + a { + color: inherit; } - .skip-link{ - position:absolute; left:1rem; top:-3rem; - background:var(--gold); color:var(--ground-2); - padding:0.6rem 1rem; border-radius:0.125rem; - font-family:'IBM Plex Mono', monospace; font-size:0.85rem; - transition:top .15s ease; - z-index:100; + img, + svg { + display: block; + max-width: 100%; } - .skip-link:focus{ top:1rem; } - :focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; } + .container { + width: 100%; + max-width: 70rem; + margin: 0 auto; + padding-inline: 1.5rem; + } + + h1, + h2, + h3 { + font-family: 'Fraunces', Georgia, 'Times New Roman', serif; + font-weight: 600; + line-height: 1.08; + text-wrap: balance; + margin: 0; + } + + .eyebrow { + font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; + font-size: 0.72rem; + letter-spacing: 0.22em; + text-transform: uppercase; + color: var(--gold); + } + + p { + margin: 0; + } + + .muted { + color: var(--ink-muted); + } + + .visually-hidden { + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; + clip: rect(0 0 0 0); + white-space: nowrap; + border: 0; + padding: 0; + margin: -1px; + } + + .skip-link { + position: absolute; + left: 1rem; + top: -3rem; + background: var(--gold); + color: var(--ground-2); + padding: 0.6rem 1rem; + border-radius: 0.125rem; + font-family: 'IBM Plex Mono', monospace; + font-size: 0.85rem; + transition: top .15s ease; + z-index: 100; + } + + .skip-link:focus { + top: 1rem; + } + + :focus-visible { + outline: 2px solid var(--gold-bright); + outline-offset: 3px; + } /* ---------- knot mark ---------- */ - .knot{ - display:block; - width:1.75rem; height:1.75rem; - object-fit:contain; - flex-shrink:0; - } - .rule-row .knot{ width:1.375rem; height:1.375rem; opacity:0.9; } - .footer-brand .knot{ width:1.625rem; height:1.625rem; } - - .hero-brand{ - margin:0; - line-height:0; + .knot { + display: block; + width: 1.75rem; + height: 1.75rem; + object-fit: contain; + flex-shrink: 0; } - .hero-logo{ - display:block; - width:clamp(17.5rem, 28vw, 31rem); - max-width:100%; - height:auto; - margin:0 auto 1.75rem; + .rule-row .knot { + width: 1.375rem; + height: 1.375rem; + opacity: 0.9; + } + + .footer-brand .knot { + width: 1.625rem; + height: 1.625rem; + } + + .hero-brand { + margin: 0; + line-height: 0; + } + + .hero-logo { + display: block; + width: clamp(17.5rem, 28vw, 31rem); + max-width: 100%; + height: auto; + margin: 0 auto 1.75rem; } /* ---------- brass rule divider ---------- */ - .rule-row{ - display:flex; align-items:center; gap:1rem; - max-width:13.75rem; margin-inline:auto; + .rule-row { + display: flex; + align-items: center; + gap: 1rem; + max-width: 13.75rem; + margin-inline: auto; + } + + .rule-row .line { + height: 1px; + flex: 1; + background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); + } + + .rule-row.left-align { + margin-inline: 0; + } + + /* ---------- announcement banner ---------- */ + .announcement-banner { + background: var(--ground-2); + border-bottom: 1px solid var(--rule); + padding: 0.75rem 0; + font-size: 0.88rem; + position: relative; + z-index: 40; + } + + .announcement-inner { + display: flex; + align-items: center; + justify-content: center; + gap: 0.75rem; + flex-wrap: wrap; + text-align: center; + } + + .announcement-tag { + font-family: 'IBM Plex Mono', monospace; + font-size: 0.75rem; + letter-spacing: 0.12em; + text-transform: uppercase; + font-weight: 600; + padding: 0.2rem 0.55rem; + border-radius: 0.125rem; + } + + .announcement-sep { + color: var(--gold-dim); + user-select: none; + } + + .announcement-text { + color: var(--ink); + font-weight: 400; + } + + /* banner theme styles */ + .banner-holiday { + background: linear-gradient(90deg, rgba(32, 48, 38, 0.9), rgba(15, 12, 10, 0.95), rgba(32, 48, 38, 0.9)); + border-bottom-color: var(--rule); + } + + .banner-holiday .announcement-tag { + background: rgba(201, 163, 92, 0.18); + border: 1px solid var(--gold-dim); + color: var(--gold-bright); + } + + .banner-special { + background: linear-gradient(90deg, rgba(43, 35, 25, 0.9), rgba(15, 12, 10, 0.95), rgba(43, 35, 25, 0.9)); + border-bottom-color: var(--gold-dim); + } + + .banner-special .announcement-tag { + background: var(--gold); + color: var(--ground-2); + } + + .banner-closure { + background: linear-gradient(90deg, rgba(80, 24, 20, 0.85), rgba(15, 12, 10, 0.95), rgba(80, 24, 20, 0.85)); + border-bottom-color: rgba(200, 60, 50, 0.4); + } + + .banner-closure .announcement-tag { + background: rgba(220, 60, 50, 0.25); + border: 1px solid rgba(220, 80, 70, 0.6); + color: #ffb4b4; + } + + /* hours card alert callout */ + .hours-alert { + margin-bottom: 1.25rem; + padding: 0.85rem 1rem; + border-radius: 0.2rem; + font-size: 0.88rem; + line-height: 1.45; + } + + .hours-alert strong { + display: block; + font-family: 'IBM Plex Mono', monospace; + font-size: 0.75rem; + letter-spacing: 0.08em; + text-transform: uppercase; + margin-bottom: 0.25rem; + } + + .hours-alert.alert-holiday { + background: rgba(51, 80, 63, 0.25); + border: 1px solid rgba(201, 163, 92, 0.3); + color: var(--ink); + } + + .hours-alert.alert-holiday strong { + color: var(--gold-bright); + } + + .hours-alert.alert-special { + background: rgba(43, 35, 25, 0.6); + border: 1px solid var(--gold-dim); + color: var(--ink); + } + + .hours-alert.alert-special strong { + color: var(--gold-bright); + } + + .hours-alert.alert-closure { + background: rgba(80, 24, 20, 0.3); + border: 1px solid rgba(220, 80, 70, 0.5); + color: #ffdfdf; + } + + .hours-alert.alert-closure strong { + color: #ffb4b4; } - .rule-row .line{ height:1px; flex:1; background:linear-gradient(90deg, transparent, var(--gold-dim), transparent); } - .rule-row.left-align{ margin-inline:0; } /* ---------- header / nav ---------- */ - header.site{ - position:sticky; top:0; z-index:50; - background:rgba(15,12,10,0.86); - backdrop-filter:saturate(140%) blur(0.5rem); - border-bottom:1px solid var(--rule); + header.site { + position: sticky; + top: 0; + z-index: 50; + background: rgba(15, 12, 10, 0.86); + backdrop-filter: saturate(140%) blur(0.5rem); + border-bottom: 1px solid var(--rule); } - .nav-inner{ - display:flex; align-items:center; justify-content:space-between; - gap:1rem; padding-block:0.75rem; - } - .brand{ - display:flex; align-items:center; gap:0.65rem; - text-decoration:none; - font-family:'Fraunces', serif; font-weight:600; - letter-spacing:0.02em; - font-size:1.05rem; - color:var(--ink); - } - nav.links{ - display:flex; align-items:center; gap:1.75rem; - } - nav.links a{ - text-decoration:none; - font-size:0.92rem; - letter-spacing:0.03em; - color:var(--ink-muted); - padding:0.4rem 0.2rem; - transition:color .15s ease; - } - nav.links a:hover{ color:var(--gold-bright); } - .nav-cta{ - display:inline-flex; align-items:center; - border:1px solid var(--gold-dim); - color:var(--gold-bright) !important; - padding:0.45rem 0.9rem; - border-radius:0.125rem; - font-family:'IBM Plex Mono', monospace; - font-size:0.75rem !important; - letter-spacing:0.06em; - } - .nav-cta:hover{ border-color:var(--gold); background:var(--surface); } - @media (max-width: 47.5em){ - nav.links{ display:none; } + .nav-inner { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding-block: 0.75rem; + } + + .brand { + display: flex; + align-items: center; + gap: 0.65rem; + text-decoration: none; + font-family: 'Fraunces', serif; + font-weight: 600; + letter-spacing: 0.02em; + font-size: 1.05rem; + color: var(--ink); + } + + nav.links { + display: flex; + align-items: center; + gap: 1.75rem; + } + + nav.links a { + text-decoration: none; + font-size: 0.92rem; + letter-spacing: 0.03em; + color: var(--ink-muted); + padding: 0.4rem 0.2rem; + transition: color .15s ease; + } + + nav.links a:hover { + color: var(--gold-bright); + } + + .nav-cta { + display: inline-flex; + align-items: center; + border: 1px solid var(--gold-dim); + color: var(--gold-bright) !important; + padding: 0.45rem 0.9rem; + border-radius: 0.125rem; + font-family: 'IBM Plex Mono', monospace; + font-size: 0.75rem !important; + letter-spacing: 0.06em; + } + + .nav-cta:hover { + border-color: var(--gold); + background: var(--surface); + } + + @media (max-width: 47.5em) { + nav.links { + display: none; + } } /* ---------- hero ---------- */ - .hero{ - position:relative; - min-height:calc(100vh - 4.5rem); - display:flex; - align-items:center; - justify-content:center; - padding-block:clamp(4.5rem, 8vh, 7.5rem); - text-align:center; - overflow:hidden; - background:var(--ground); /* fallback if brick-texture.png fails to load */ - } - .hero::before{ - content:""; - position:absolute; inset:0; - z-index:1; - opacity:0.6; - background: - linear-gradient(to bottom, rgba(0,0,0,0.12), transparent 22%, transparent 78%, rgba(0,0,0,0.18)); - pointer-events:none; - } - .hero-media{ - position:absolute; inset:0; - z-index:0; - overflow:hidden; - background-image:url('./assets/brick-texture.png'); - background-repeat:repeat; - } - .hero-scrim{ - position:absolute; inset:0; - background: - linear-gradient(180deg, rgba(15,12,10,0.35) 0%, rgba(15,12,10,0.2) 45%, rgba(15,12,10,0.6) 100%), - radial-gradient(ellipse 60% 48% at 50% 18%, rgba(201,163,92,0.16), transparent 58%); - } - .hero-inner{ position:relative; z-index:2; } - .hero .eyebrow{ margin-bottom:1rem; } - .hero h1{ - font-size:clamp(3.1rem, 9vw, 6.2rem); - color:var(--gold-bright); - letter-spacing:-0.01em; - } - .hero .sub{ - font-family:'Fraunces', serif; font-style:italic; font-weight:400; - font-size:clamp(1.15rem, 2.6vw, 1.55rem); - color:var(--ink-muted); - margin-top:0.35rem; - } - .tagline-row{ - margin-top:2rem; - display:flex; justify-content:center; flex-wrap:wrap; - gap:0.6rem 0; - font-family:'IBM Plex Mono', monospace; - font-size:0.82rem; - letter-spacing:0.04em; - color:var(--ink-muted); - } - .tagline-row span:not(:last-child)::after{ - content:"·"; color:var(--gold-dim); margin-inline:0.7rem; - } - .hero-ctas{ - margin-top:2.5rem; - display:flex; justify-content:center; gap:0.9rem; flex-wrap:wrap; + .hero { + position: relative; + min-height: calc(100vh - 4.5rem); + display: flex; + align-items: center; + justify-content: center; + padding-block: clamp(4.5rem, 8vh, 7.5rem); + text-align: center; + overflow: hidden; + background: var(--ground); + /* fallback if brick-texture.png fails to load */ } - .btn{ - display:inline-flex; align-items:center; gap:0.5rem; - padding:0.8rem 1.5rem; - font-family:'IBM Plex Mono', monospace; - font-size:0.8rem; letter-spacing:0.05em; - text-decoration:none; - border-radius:0.125rem; - transition:transform .15s ease, background .15s ease, border-color .15s ease; + .hero::before { + content: ""; + position: absolute; + inset: 0; + z-index: 1; + opacity: 0.6; + background: + linear-gradient(to bottom, rgba(0, 0, 0, 0.12), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.18)); + pointer-events: none; } - .btn:hover{ transform:translateY(-1px); } - .btn-primary{ - background:linear-gradient(180deg, var(--gold-bright), var(--gold)); - color:var(--ground-2); - font-weight:500; + + .hero-media { + position: absolute; + inset: 0; + z-index: 0; + overflow: hidden; + background-image: url('./assets/brick-texture.png'); + background-repeat: repeat; } - .btn-primary:hover{ background:linear-gradient(180deg, var(--gold-bright), var(--gold-bright)); } - .btn-outline{ - border:1px solid var(--gold-dim); - color:var(--gold-bright); + + .hero-scrim { + position: absolute; + inset: 0; + background: + linear-gradient(180deg, rgba(15, 12, 10, 0.35) 0%, rgba(15, 12, 10, 0.2) 45%, rgba(15, 12, 10, 0.6) 100%), + radial-gradient(ellipse 60% 48% at 50% 18%, rgba(201, 163, 92, 0.16), transparent 58%); + } + + .hero-inner { + position: relative; + z-index: 2; + } + + .hero .eyebrow { + margin-bottom: 1rem; + } + + .hero h1 { + font-size: clamp(3.1rem, 9vw, 6.2rem); + color: var(--gold-bright); + letter-spacing: -0.01em; + } + + .hero .sub { + font-family: 'Fraunces', serif; + font-style: italic; + font-weight: 400; + font-size: clamp(1.15rem, 2.6vw, 1.55rem); + color: var(--ink-muted); + margin-top: 0.35rem; + } + + .tagline-row { + margin-top: 2rem; + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 0.6rem 0; + font-family: 'IBM Plex Mono', monospace; + font-size: 0.82rem; + letter-spacing: 0.04em; + color: var(--ink-muted); + } + + .tagline-row span:not(:last-child)::after { + content: "·"; + color: var(--gold-dim); + margin-inline: 0.7rem; + } + + .hero-ctas { + margin-top: 2.5rem; + display: flex; + justify-content: center; + gap: 0.9rem; + flex-wrap: wrap; + } + + .btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.8rem 1.5rem; + font-family: 'IBM Plex Mono', monospace; + font-size: 0.8rem; + letter-spacing: 0.05em; + text-decoration: none; + border-radius: 0.125rem; + transition: transform .15s ease, background .15s ease, border-color .15s ease; + } + + .btn:hover { + transform: translateY(-1px); + } + + .btn-primary { + background: linear-gradient(180deg, var(--gold-bright), var(--gold)); + color: var(--ground-2); + font-weight: 500; + } + + .btn-primary:hover { + background: linear-gradient(180deg, var(--gold-bright), var(--gold-bright)); + } + + .btn-outline { + border: 1px solid var(--gold-dim); + color: var(--gold-bright); + } + + .btn-outline:hover { + border-color: var(--gold); + background: var(--surface); } - .btn-outline:hover{ border-color:var(--gold); background:var(--surface); } /* ---------- sections ---------- */ - section{ padding-block:5.5rem; } - .section-head{ margin-bottom:2.75rem; } - .section-head h2{ font-size:clamp(1.9rem, 3.6vw, 2.6rem); color:var(--ink); margin-top:0.5rem; } + section { + padding-block: 5.5rem; + } + + .section-head { + margin-bottom: 2.75rem; + } + + .section-head h2 { + font-size: clamp(1.9rem, 3.6vw, 2.6rem); + color: var(--ink); + margin-top: 0.5rem; + } /* about band */ - .about-grid{ - display:grid; grid-template-columns:1.3fr 1fr; gap:3.5rem; - align-items:start; - } - .about-grid p + p{ margin-top:1rem; } - .about-grid .lede{ max-width:56ch; color:var(--ink); font-size:1.05rem; } - - .stat-card{ - background:var(--surface); - border:1px solid var(--rule); - padding:2rem; - border-radius:0.2rem; - } - .stat-card .eyebrow{ display:block; margin-bottom:1.1rem; } - .stat-big{ - font-family:'Fraunces', serif; font-weight:600; font-style:italic; - font-size:3rem; color:var(--gold-bright); line-height:1; - } - .stat-card .stat-label{ margin-top:0.4rem; font-size:0.92rem; color:var(--ink-muted); } - .stat-card .stat-row{ margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--rule); } - .stat-card .stat-row .stat-big{ font-size:1.9rem; } - .stat-source{ - margin-top:1.5rem; font-family:'IBM Plex Mono', monospace; font-size:0.7rem; - color:var(--gold-dim); letter-spacing:0.05em; + .about-grid { + display: grid; + grid-template-columns: 1.3fr 1fr; + gap: 3.5rem; + align-items: start; } - @media (max-width: 51.25em){ - .about-grid{ grid-template-columns:1fr; } + .about-grid p+p { + margin-top: 1rem; + } + + .about-grid .lede { + max-width: 56ch; + color: var(--ink); + font-size: 1.05rem; + } + + .stat-card { + background: var(--surface); + border: 1px solid var(--rule); + padding: 2rem; + border-radius: 0.2rem; + } + + .stat-card .eyebrow { + display: block; + margin-bottom: 1.1rem; + } + + .stat-big { + font-family: 'Fraunces', serif; + font-weight: 600; + font-style: italic; + font-size: 3rem; + color: var(--gold-bright); + line-height: 1; + } + + .stat-card .stat-label { + margin-top: 0.4rem; + font-size: 0.92rem; + color: var(--ink-muted); + } + + .stat-card .stat-row { + margin-top: 1.5rem; + padding-top: 1.5rem; + border-top: 1px solid var(--rule); + } + + .stat-card .stat-row .stat-big { + font-size: 1.9rem; + } + + .stat-source { + margin-top: 1.5rem; + font-family: 'IBM Plex Mono', monospace; + font-size: 0.7rem; + color: var(--gold-dim); + letter-spacing: 0.05em; + } + + @media (max-width: 51.25em) { + .about-grid { + grid-template-columns: 1fr; + } } /* hours / visit band */ - .visit{ background:var(--ground-2); } - .visit-grid{ - display:grid; grid-template-columns:1fr 1fr; gap:1.75rem; + .visit { + background: var(--ground-2); } - .card{ - background:var(--surface); - border:1px solid var(--rule); - border-radius:0.2rem; - padding:2.25rem; - } - .card h3{ - font-size:1.3rem; color:var(--gold-bright); - margin-bottom:1.4rem; - } - .hours-list{ - margin:0; - padding:0; - font-family:'IBM Plex Mono', monospace; - font-variant-numeric:tabular-nums; - font-size:0.92rem; - } - .hours-row{ - display:flex; - justify-content:space-between; - align-items:center; - padding:0.55rem 0; - border-bottom:1px solid var(--rule); - } - .hours-row:last-child{ - border-bottom:none; - } - .hours-row dt{ - margin:0; - color:var(--ink-muted); - letter-spacing:0.04em; - font-weight:normal; - } - .hours-row dd{ - margin:0; - text-align:right; - color:var(--ink); - } - .card .note{ - margin-top:1.25rem; font-size:0.88rem; color:var(--ink-muted); - } - .card .note strong{ color:var(--ink); font-weight:600; } - .find-us .pin{ width:2.125rem; height:2.125rem; margin-bottom:1rem; } - .find-us address{ font-style:normal; font-size:1rem; color:var(--ink); } - .find-us .contact-list{ margin-top:1.5rem; display:flex; flex-direction:column; gap:0.6rem; } - .find-us .contact-list a{ - text-decoration:none; color:var(--gold-bright); - font-size:0.92rem; display:inline-flex; align-items:center; gap:0.5rem; - width:fit-content; - border-bottom:1px solid transparent; + .visit-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1.75rem; } - .find-us .contact-list a:hover{ border-bottom-color:var(--gold-dim); } - .social-row{ margin-top:1.5rem; display:flex; gap:0.9rem; } - .social-row a{ - display:inline-flex; align-items:center; justify-content:center; - width:2.375rem; height:2.375rem; - border:1px solid var(--rule); border-radius:0.125rem; - color:var(--ink-muted); - text-decoration:none; - transition:border-color .15s ease, color .15s ease; - } - .social-row a:hover{ border-color:var(--gold); color:var(--gold-bright); } - .social-row svg{ width:1.0625rem; height:1.0625rem; } - @media (max-width: 45em){ - .visit-grid{ grid-template-columns:1fr; } + .card { + background: var(--surface); + border: 1px solid var(--rule); + border-radius: 0.2rem; + padding: 2.25rem; + } + + .card h3 { + font-size: 1.3rem; + color: var(--gold-bright); + margin-bottom: 1.4rem; + } + + .hours-list { + margin: 0; + padding: 0; + font-family: 'IBM Plex Mono', monospace; + font-variant-numeric: tabular-nums; + font-size: 0.92rem; + } + + .hours-row { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.55rem 0; + border-bottom: 1px solid var(--rule); + } + + .hours-row:last-child { + border-bottom: none; + } + + .hours-row dt { + margin: 0; + color: var(--ink-muted); + letter-spacing: 0.04em; + font-weight: normal; + } + + .hours-row dd { + margin: 0; + text-align: right; + color: var(--ink); + } + + .card .note { + margin-top: 1.25rem; + font-size: 0.88rem; + color: var(--ink-muted); + } + + .card .note strong { + color: var(--ink); + font-weight: 600; + } + + .find-us .pin { + width: 2.125rem; + height: 2.125rem; + margin-bottom: 1rem; + } + + .find-us address { + font-style: normal; + font-size: 1rem; + color: var(--ink); + } + + .find-us .contact-list { + margin-top: 1.5rem; + display: flex; + flex-direction: column; + gap: 0.6rem; + } + + .find-us .contact-list a { + text-decoration: none; + color: var(--gold-bright); + font-size: 0.92rem; + display: inline-flex; + align-items: center; + gap: 0.5rem; + width: fit-content; + border-bottom: 1px solid transparent; + } + + .find-us .contact-list a:hover { + border-bottom-color: var(--gold-dim); + } + + .social-row { + margin-top: 1.5rem; + display: flex; + gap: 0.9rem; + } + + .social-row a { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2.375rem; + height: 2.375rem; + border: 1px solid var(--rule); + border-radius: 0.125rem; + color: var(--ink-muted); + text-decoration: none; + transition: border-color .15s ease, color .15s ease; + } + + .social-row a:hover { + border-color: var(--gold); + color: var(--gold-bright); + } + + .social-row svg { + width: 1.0625rem; + height: 1.0625rem; + } + + @media (max-width: 45em) { + .visit-grid { + grid-template-columns: 1fr; + } } /* live music band */ - .music{ - background:linear-gradient(180deg, var(--green-deep), var(--green)); - color:var(--ink); - text-align:center; + .music { + background: linear-gradient(180deg, var(--green-deep), var(--green)); + color: var(--ink); + text-align: center; + } + + .music .section-head { + margin-bottom: 1.75rem; + } + + .music .section-head .eyebrow { + color: var(--gold-bright); + } + + .music p.body { + max-width: 58ch; + margin: 0 auto; + font-size: 1.02rem; + color: #e4ddc9; + } + + .music .btn-outline { + border-color: rgba(230, 199, 137, 0.45); + } + + .music .hero-ctas { + margin-top: 2.25rem; } - .music .section-head{ margin-bottom:1.75rem; } - .music .section-head .eyebrow{ color:var(--gold-bright); } - .music p.body{ max-width:58ch; margin:0 auto; font-size:1.02rem; color:#e4ddc9; } - .music .btn-outline{ border-color:rgba(230,199,137,0.45); } - .music .hero-ctas{ margin-top:2.25rem; } /* menu band */ - .menu-band .container{ max-width:47.5rem; text-align:center; } - .menu-band p.body{ font-size:1.02rem; color:var(--ink-muted); max-width:56ch; margin:0 auto; } - .menu-band .hero-ctas{ margin-top:2.25rem; justify-content:center; } - .menu-band .section-head{ text-align:center; } - .menu-band .rule-row{ margin-bottom:1.75rem; } + .menu-band .container { + max-width: 47.5rem; + text-align: center; + } + + .menu-band p.body { + font-size: 1.02rem; + color: var(--ink-muted); + max-width: 56ch; + margin: 0 auto; + } + + .menu-band .hero-ctas { + margin-top: 2.25rem; + justify-content: center; + } + + .menu-band .section-head { + text-align: center; + } + + .menu-band .rule-row { + margin-bottom: 1.75rem; + } /* footer */ - footer{ - background:var(--ground-2); - border-top:1px solid var(--rule); - padding-block:3.5rem 2.5rem; + footer { + background: var(--ground-2); + border-top: 1px solid var(--rule); + padding-block: 3.5rem 2.5rem; } - .footer-grid{ - display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2.5rem; + + .footer-grid { + display: grid; + grid-template-columns: 1.2fr 1fr 1fr; + gap: 2.5rem; } - .footer-brand{ display:flex; align-items:center; gap:0.6rem; text-decoration:none; } - .footer-brand .knot{ width:1.625rem; height:1.625rem; } - .footer-brand span{ - font-family:'Fraunces', serif; font-weight:600; color:var(--ink); font-size:1rem; + + .footer-brand { + display: flex; + align-items: center; + gap: 0.6rem; + text-decoration: none; } - footer .col-title{ - font-family:'IBM Plex Mono', monospace; font-size:0.72rem; - letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-dim); - margin-bottom:0.9rem; + + .footer-brand .knot { + width: 1.625rem; + height: 1.625rem; } - footer address{ font-style:normal; color:var(--ink-muted); font-size:0.92rem; line-height:1.7; } - footer .hours-mini{ - font-family:'IBM Plex Mono', monospace; font-size:0.85rem; - color:var(--ink-muted); font-variant-numeric:tabular-nums; - display:flex; flex-direction:column; gap:0.35rem; + + .footer-brand span { + font-family: 'Fraunces', serif; + font-weight: 600; + color: var(--ink); + font-size: 1rem; } - footer a.email{ color:var(--gold-bright); text-decoration:none; font-size:0.92rem; } - footer a.email:hover{ text-decoration:underline; } - .footer-bottom{ - margin-top:3rem; padding-top:1.75rem; border-top:1px solid var(--rule); - display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.75rem; - font-size:0.78rem; color:var(--ink-muted); + + footer .col-title { + font-family: 'IBM Plex Mono', monospace; + font-size: 0.72rem; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--gold-dim); + margin-bottom: 0.9rem; } - @media (max-width: 45em){ - .footer-grid{ grid-template-columns:1fr; gap:2rem; } + + footer address { + font-style: normal; + color: var(--ink-muted); + font-size: 0.92rem; + line-height: 1.7; + } + + footer .hours-mini { + font-family: 'IBM Plex Mono', monospace; + font-size: 0.85rem; + color: var(--ink-muted); + font-variant-numeric: tabular-nums; + display: flex; + flex-direction: column; + gap: 0.35rem; + } + + footer a.email { + color: var(--gold-bright); + text-decoration: none; + font-size: 0.92rem; + } + + footer a.email:hover { + text-decoration: underline; + } + + .footer-bottom { + margin-top: 3rem; + padding-top: 1.75rem; + border-top: 1px solid var(--rule); + display: flex; + justify-content: space-between; + flex-wrap: wrap; + gap: 0.75rem; + font-size: 0.78rem; + color: var(--ink-muted); + } + + @media (max-width: 45em) { + .footer-grid { + grid-template-columns: 1fr; + gap: 2rem; + } } /* scroll reveal */ - .reveal{ opacity:0; transform:translateY(0.875rem); transition:opacity .6s ease, transform .6s ease; } - .reveal.is-visible{ opacity:1; transform:none; } - @media (prefers-reduced-motion: reduce){ - .reveal{ opacity:1; transform:none; transition:none; } + .reveal { + opacity: 0; + transform: translateY(0.875rem); + transition: opacity .6s ease, transform .6s ease; } + + .reveal.is-visible { + opacity: 1; + transform: none; + } + + @media (prefers-reduced-motion: reduce) { + .reveal { + opacity: 1; + transform: none; + transition: none; + } + } \ No newline at end of file