/* ============================================================ PUB / TAVERN — cozy neighborhood bar Oswald (condensed headings) + Roboto Condensed / Roboto body Espresso/charcoal warm-dark theme, cream text, bold accent. Accent comes from --accent (set inline in ). ============================================================ */ :root{ --bg: #1a1411; /* espresso */ --bg-2: #221a16; /* slightly lifted panel */ --bg-3: #2c211b; /* card */ --bg-4: #382a22; /* hover / borders */ --cream: #f4ead8; /* primary text */ --cream-dim: #cbbba2; /* secondary text */ --muted: #9a8a76; /* tertiary */ --line: #45342a; /* hairline */ --radius: 6px; } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; scroll-padding-top:70px; } body{ background:var(--bg); color:var(--cream); font-family:'Roboto Condensed','Roboto',sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } .wrap{ width:100%; max-width:1160px; margin:0 auto; padding:0 20px; } h1,h2,h3,h4{ font-family:'Oswald',sans-serif; font-weight:600; line-height:1.1; letter-spacing:.5px; text-transform:uppercase; } /* ---------- buttons ---------- */ .btn{ display:inline-block; font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:1.5px; font-size:15px; padding:14px 30px; border-radius:var(--radius); border:2px solid transparent; cursor:pointer; transition:transform .12s ease, background .2s ease, color .2s ease; } .btn:active{ transform:translateY(1px); } .btn-accent{ background:var(--accent); color:#1a1411; border-color:var(--accent); } .btn-accent:hover{ background:transparent; color:var(--accent); } .btn-ghost{ background:transparent; color:var(--cream); border-color:var(--cream); } .btn-ghost:hover{ background:var(--cream); color:#1a1411; } .btn-outline{ background:transparent; color:var(--accent); border-color:var(--accent); padding:11px 24px; font-size:14px; } .btn-outline:hover{ background:var(--accent); color:#1a1411; } /* ---------- header ---------- */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(20,16,13,0); transition:background .3s ease, box-shadow .3s ease, padding .3s ease; padding:14px 0; } .site-header.scrolled{ background:rgba(20,16,13,.97); box-shadow:0 2px 16px rgba(0,0,0,.5); border-bottom:1px solid var(--line); } .header-inner{ display:flex; align-items:center; justify-content:space-between; } .brand-logo{ height:46px; width:auto; } .brand-name{ font-family:'Oswald',sans-serif; font-weight:700; font-size:24px; text-transform:uppercase; letter-spacing:2px; color:var(--cream); } .main-nav{ display:flex; gap:26px; align-items:center; } .main-nav a{ font-family:'Oswald',sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:1.5px; font-size:15px; color:var(--cream-dim); transition:color .15s ease; position:relative; } .main-nav a:hover{ color:var(--accent); } .nav-toggle{ display:none; } .nav-btn{ display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; } .nav-btn span{ width:26px; height:3px; background:var(--cream); border-radius:2px; transition:.25s; } /* ---------- hero ---------- */ .hero{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; } .hero-slides{ position:absolute; inset:0; } .hero-slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.4s ease; transform:scale(1.04); } .hero-slide.active{ opacity:1; } .hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,16,13,.55) 0%, rgba(20,16,13,.78) 100%); } .hero-content{ position:relative; z-index:2; padding-top:90px; padding-bottom:60px; } .hero-logo{ height:96px; width:auto; margin:0 auto 24px; } .hero-title{ font-size:clamp(3rem,11vw,6.5rem); font-weight:700; color:var(--cream); letter-spacing:2px; text-shadow:0 4px 24px rgba(0,0,0,.6); line-height:.95; } .hero-tagline{ font-family:'Roboto Condensed',sans-serif; font-weight:400; font-style:italic; font-size:clamp(1.1rem,3vw,1.6rem); color:var(--accent); margin-top:18px; letter-spacing:1px; text-transform:uppercase; } .hero-cta{ margin-top:38px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; } /* ---------- sections ---------- */ .section{ padding:88px 0; } .section-title{ font-size:clamp(2rem,5vw,3.2rem); color:var(--cream); text-align:center; letter-spacing:1.5px; } .section-title.small{ font-size:clamp(1.6rem,4vw,2.2rem); text-align:left; } .section-sub{ text-align:center; color:var(--cream-dim); max-width:720px; margin:16px auto 0; font-size:1.05rem; } .divider{ display:flex; justify-content:center; margin:22px 0 40px; } .divider span{ display:block; width:80px; height:4px; background:var(--accent); border-radius:2px; } /* ---------- welcome ---------- */ .welcome{ background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .welcome-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px; margin-top:44px; } .welcome-block{ background:var(--bg-3); border:1px solid var(--line); border-radius:10px; padding:30px 28px; border-top:4px solid var(--accent); } .welcome-block h3{ font-size:1.5rem; color:var(--accent); margin-bottom:12px; } .welcome-block p{ color:var(--cream-dim); } .block-buttons{ margin-top:20px; display:flex; gap:12px; flex-wrap:wrap; } /* ---------- menu categories / cards ---------- */ .menu-cat{ margin-bottom:64px; } .menu-cat:last-child{ margin-bottom:0; } .cat-title{ font-size:clamp(1.7rem,4vw,2.4rem); color:var(--accent); text-align:center; letter-spacing:1px; padding-bottom:10px; position:relative; } .cat-title::after{ content:""; display:block; width:54px; height:3px; background:var(--cream); opacity:.35; margin:14px auto 0; } .cat-note{ text-align:center; color:var(--cream-dim); font-style:italic; margin-top:6px; max-width:680px; margin-left:auto; margin-right:auto; } .cat-footer{ text-align:center; color:var(--muted); font-size:.92rem; margin-top:24px; font-style:italic; } .card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; margin-top:32px; } .dish-card{ background:var(--bg-3); border:1px solid var(--line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .dish-card:hover{ transform:translateY(-5px); border-color:var(--accent); box-shadow:0 12px 30px rgba(0,0,0,.45); } .dish-img{ aspect-ratio:4/3; overflow:hidden; background:var(--bg-4); } .dish-img img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; } .dish-card:hover .dish-img img{ transform:scale(1.06); } .dish-body{ padding:20px 22px; flex:1; } .dish-name{ font-size:1.4rem; color:var(--cream); letter-spacing:.5px; border-left:4px solid var(--accent); padding-left:12px; margin-bottom:10px; } .dish-desc{ color:var(--cream-dim); font-size:1rem; line-height:1.55; } /* drinks tint */ .drinks{ background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } /* ---------- happy hour ---------- */ .happy-hour{ background:var(--accent); color:#1a1411; } .hh-banner{ text-align:center; margin-bottom:40px; } .hh-title{ font-size:clamp(2.6rem,8vw,5rem); color:#1a1411; font-weight:700; letter-spacing:2px; line-height:.95; } .hh-hours{ font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:2px; font-size:clamp(1.1rem,3vw,1.5rem); margin-top:10px; color:#1a1411; } .hh-pricing{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-bottom:44px; } .hh-price-line{ background:#1a1411; color:var(--accent); font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:1px; font-size:clamp(1.1rem,3vw,1.6rem); padding:16px 28px; border-radius:8px; text-align:center; } .hh-lists{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; max-width:900px; margin:0 auto; } .hh-list{ background:rgba(26,20,17,.92); border-radius:10px; padding:26px 28px; } .hh-list h3{ font-size:1.5rem; color:var(--accent); margin-bottom:14px; border-bottom:2px solid rgba(244,234,216,.2); padding-bottom:10px; } .hh-list ul{ list-style:none; } .hh-list li{ color:var(--cream); padding:7px 0; border-bottom:1px dashed rgba(244,234,216,.12); font-size:1.05rem; } .hh-list li:last-child{ border-bottom:none; } /* ---------- events ---------- */ .events-tagline{ text-align:center; font-family:'Oswald',sans-serif; text-transform:uppercase; color:var(--accent); letter-spacing:2px; font-weight:600; font-size:clamp(1.1rem,3vw,1.5rem); margin-top:10px; } .week-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; margin-top:44px; } .event-card{ background:var(--bg-3); border:1px solid var(--line); border-radius:10px; overflow:hidden; transition:transform .18s ease, border-color .18s ease; } .event-card:hover{ transform:translateY(-5px); border-color:var(--accent); } .event-img{ aspect-ratio:16/10; overflow:hidden; background:var(--bg-4); } .event-img img{ width:100%; height:100%; object-fit:cover; } .event-body{ padding:22px; } .event-day{ display:inline-block; background:var(--accent); color:#1a1411; font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; font-size:.85rem; padding:5px 14px; border-radius:4px; margin-bottom:12px; } .event-title{ font-size:1.55rem; color:var(--cream); margin-bottom:10px; } .event-text{ color:var(--cream-dim); } .closers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; margin-top:44px; } .closer{ background:var(--bg-2); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:8px; padding:26px 28px; } .closer h3{ font-size:1.4rem; color:var(--accent); margin-bottom:10px; } .closer p{ color:var(--cream-dim); } /* ---------- visit / hours / contact ---------- */ .visit{ background:var(--bg-2); border-top:1px solid var(--line); } .visit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; } .hours-block{ margin-top:24px; } .hours-label{ font-size:1.3rem; color:var(--accent); letter-spacing:1.5px; margin-bottom:10px; } .hours-list{ list-style:none; } .hours-list li{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px dashed var(--line); } .hl-label{ color:var(--cream-dim); font-weight:700; text-transform:uppercase; letter-spacing:.5px; font-size:.95rem; } .hl-value{ color:var(--cream); text-align:right; } .contact-list{ list-style:none; margin-top:24px; } .contact-item{ padding:10px 0; color:var(--cream); font-size:1.1rem; border-bottom:1px dashed var(--line); } .contact-item a:hover{ color:var(--accent); } .contact-item.address{ font-style:normal; color:var(--cream-dim); } .socials{ margin-top:26px; display:flex; gap:14px; flex-wrap:wrap; } .social-link{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1.5px; font-weight:600; font-size:.95rem; color:var(--cream); border:2px solid var(--line); padding:9px 18px; border-radius:var(--radius); transition:.18s ease; } .social-link:hover{ border-color:var(--accent); color:var(--accent); } /* ---------- footer ---------- */ .site-footer{ background:#120e0b; padding:54px 0 40px; text-align:center; border-top:1px solid var(--line); } .footer-logo{ height:60px; width:auto; margin:0 auto 16px; } .footer-name{ font-family:'Oswald',sans-serif; font-weight:700; font-size:1.8rem; text-transform:uppercase; letter-spacing:2px; color:var(--cream); display:block; margin-bottom:12px; } .footer-tagline{ color:var(--accent); font-style:italic; margin-bottom:18px; letter-spacing:.5px; } .footer-copy{ color:var(--muted); font-size:.9rem; } /* ---------- responsive ---------- */ @media (max-width:860px){ .nav-btn{ display:flex; z-index:101; } .main-nav{ position:fixed; top:0; right:-100%; width:74%; max-width:320px; height:100vh; background:rgba(18,14,11,.99); flex-direction:column; align-items:flex-start; gap:0; padding:90px 32px 32px; transition:right .3s ease; z-index:100; border-left:1px solid var(--line); } .nav-toggle:checked ~ .main-nav{ right:0; } .main-nav a{ font-size:1.3rem; padding:14px 0; width:100%; border-bottom:1px solid var(--line); } .site-header{ background:rgba(20,16,13,.97); border-bottom:1px solid var(--line); } .visit-grid{ grid-template-columns:1fr; gap:36px; } .section{ padding:64px 0; } } @media (max-width:520px){ .hero-cta{ flex-direction:column; align-items:stretch; } .hero-cta .btn{ width:100%; } .card-grid,.week-grid{ grid-template-columns:1fr; } }