/* Theme Name: Driven Steakhouse Theme URI: https://drivensteakhouse.com Author: Driven Steakhouse Description: The Driven Steakhouse theme — premium steaks, exquisite seafood, and fine bourbon in Loveland, Colorado. Dark, bronze-accented, editorial, with server-rendered photo carousels. Pairs with the Driven Steakhouse Platform plugin for the five live menu books, the rotating Limited Feature with its permanent archive, events with RSVP, concierge and private-dining requests, and member accounts. Version: 1.6.3 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: driven-steakhouse Requires at least: 6.2 Tested up to: 6.5 Requires PHP: 7.4 */ /* ===== RESET ===== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ===== TOKENS (docs/SHARED-CONTRACT.md §1) ===== */ :root { --bronze: #C19977; --bronze-bright: #DDB78C; --slate: #222D3B; --bg-darkest: #090C0F; --bg-dark: #10141A; --card: #141922; --ivory: #EDE6DA; --silver: #B1B5B7; --gray: #7C838B; --border: rgba(193, 153, 119, 0.22); --danger: #C07E6E; --font-display: 'Oswald', 'Arial Narrow', sans-serif; --font-serif: 'Sorts Mill Goudy', Georgia, serif; --font-body: 'Mulish', -apple-system, BlinkMacSystemFont, sans-serif; --gold-gradient: linear-gradient(100deg, #8a6a45 0%, #C19977 30%, #F0DDBE 50%, #C19977 70%, #8a6a45 100%); } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); /* Fluid scale: ~16.5px at 390w → 18px at 1440w. The old flat 16px read like a phone layout stretched across a desktop screen. */ font-size: clamp(1rem, 0.95rem + 0.35vw, 1.125rem); background: var(--bg-darkest); color: var(--silver); line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: var(--bronze); text-decoration: none; transition: color 0.3s; } a:hover { color: var(--bronze-bright); } /* Accessibility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .sr-only:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; padding: 12px 24px; margin: 0; overflow: visible; clip: auto; white-space: normal; background: var(--bronze); color: var(--bg-darkest); font-weight: 700; z-index: 9999; font-size: 0.9rem; } *:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; } /* NOTE (v1.3.0): the old `content-visibility: auto` + 700px intrinsic-size on #special/#featured/#events/#visit is GONE — skipped sections painted as huge empty dark bands (the live homepage's blank stretches) in captures and during fast scrolls. The paint cost of four small sections doesn't justify it. */ /* ===== ANIMATIONS ===== * Content is VISIBLE BY DEFAULT (live-site fix): the previous unconditional * `.fade-in { opacity: 0 }` blanked the homepage when the optimizer delayed * theme.js — three full sections rendered as empty dark bands. The hidden * "pre-reveal" state now only arms once carries `js-reveal`, which * theme.js adds strictly when it runs AND IntersectionObserver is available * (in-viewport elements are pre-marked .visible first, so nothing flashes). * No JS, delayed JS, blocked JS, old browser → everything simply shows. */ .fade-in, .fade-in-left, .fade-in-right { transition: opacity 0.7s ease, transform 0.7s ease; } html.js-reveal .fade-in:not(.visible) { opacity: 0; transform: translateY(26px); } html.js-reveal .fade-in-left:not(.visible) { opacity: 0; transform: translateX(-36px); } html.js-reveal .fade-in-right:not(.visible) { opacity: 0; transform: translateX(36px); } @media (prefers-reduced-motion: reduce) { html.js-reveal .fade-in:not(.visible), html.js-reveal .fade-in-left:not(.visible), html.js-reveal .fade-in-right:not(.visible) { opacity: 1; transform: none; } .fade-in, .fade-in-left, .fade-in-right { transition: none; } } /* JS gating (shared contract with the plugin's brand.css): .ds-js-only controls * appear — and .ds-nojs-note fallbacks hide — only after a script attaches. */ html:not(.js-enabled) .ds-js-only { display: none !important; } html.js-enabled .ds-nojs-note { display: none !important; } /* ===== LAYOUT ===== */ .container { max-width: 1160px; margin: 0 auto; padding: 0 24px; } .section-label { display: inline-block; font-size: 0.74rem; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--bronze); margin-bottom: 14px; } .section-title { font-family: var(--font-display); font-weight: 600; /* ~34px at 390w → ~44px at 1440w: desktop presence, not stretched mobile. */ font-size: clamp(2.1rem, 1.75rem + 1.5vw, 2.75rem); color: var(--ivory); line-height: 1.12; margin-bottom: 18px; letter-spacing: 0.06em; text-transform: uppercase; } .section-subtitle { font-size: 1.08rem; color: var(--silver); max-width: 640px; line-height: 1.8; font-weight: 300; } .serif-note { font-family: var(--font-serif); font-style: italic; color: var(--silver); font-size: 1.12rem; } /* ◆ ornament */ .orn { display: block; color: var(--bronze); font-size: 0.78rem; letter-spacing: 10px; text-align: center; margin: 0 auto 14px; } .orn-inline { color: var(--bronze); } /* Gold-gradient wordmark text (DRIVEN display moments) */ .gold-text { background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* * Branded photo block — fixed-aspect frame on the card ground with a bronze * hairline. With an image: object-fit cover. Without one (menu/event photos arrive * over time via WP Admin): the D-ring mark ghosted at ~12% opacity, centered — * a deliberate placeholder instead of empty space. Mirrors the plugin's .ds-photo. */ .ds-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--card); border: 1px solid var(--border); } .ds-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .ds-photo--wide { aspect-ratio: 21 / 9; } .ds-photo--placeholder::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: url('images/mark.png') center no-repeat; background-size: 46% auto; opacity: 0.12; } .ds-photo--wide.ds-photo--placeholder::after { background-size: auto 56%; } /* * ===== PHOTO CAROUSEL (shared component — mirrors the plugin's brand.css) ===== * Server-rendered scroll-snap strip: one slide ~92% wide with an edge-peek of its * neighbors; swipe/scroll/keyboard work with JavaScript fully disabled. Arrows + * dots are .ds-js-only enhancements (theme.js / ds-app.js — the stamp dedupes); * autoplay is gentle and never runs under prefers-reduced-motion. */ .ds-carousel { position: relative; margin: 0 0 26px; } .ds-carousel--wide { width: min(100vw - 32px, 1280px); margin-left: 50%; transform: translateX(-50%); } .ds-carousel-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 4%; scroll-padding: 0 4%; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .ds-carousel-track::-webkit-scrollbar { display: none; } .ds-carousel-slide { flex: 0 0 92%; margin: 0; scroll-snap-align: center; background: var(--card); border: 1px solid var(--border); } .ds-carousel-slide img { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; display: block; border: 0; } .ds-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border: 1px solid var(--border); border-radius: 0; background: rgba(9, 12, 15, 0.72); color: var(--ivory); font-size: 1.7rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: all 0.25s; z-index: 3; padding: 0 0 4px; cursor: pointer; } .ds-carousel-arrow:hover { background: var(--bronze); color: var(--bg-darkest); border-color: var(--bronze); } .ds-carousel-prev { left: 12px; } .ds-carousel-next { right: 12px; } .ds-carousel-dots { display: flex; justify-content: center; gap: 10px; margin-top: 14px; } .ds-carousel-dot { width: 7px; height: 7px; padding: 0; border-radius: 50%; border: 1px solid var(--bronze); background: transparent; transition: background 0.25s; cursor: pointer; } .ds-carousel-dot.is-on { background: var(--bronze); } .ds-carousel-dot:hover { background: var(--bronze-bright); border-color: var(--bronze-bright); } @media (max-width: 700px) { .ds-carousel-slide img { aspect-ratio: 4 / 3; } .ds-carousel-arrow { width: 38px; height: 38px; font-size: 1.4rem; } } @media (prefers-reduced-motion: reduce) { .ds-carousel-track { scroll-behavior: auto !important; } } /* ===== BUTTONS ===== */ .btn { display: inline-block; padding: 16px 42px; font-family: var(--font-body); font-weight: 700; font-size: 0.82rem; letter-spacing: 2.5px; text-transform: uppercase; border: none; border-radius: 0; cursor: pointer; transition: all 0.3s; } .btn-primary { background: var(--bronze); color: var(--bg-darkest); } .btn-primary:hover { background: var(--bronze-bright); color: var(--bg-darkest); transform: translateY(-2px); box-shadow: 0 12px 36px rgba(193,153,119,0.22); } .btn-outline { background: transparent; color: var(--bronze); border: 1px solid var(--bronze); } .btn-outline:hover { background: var(--bronze); color: var(--bg-darkest); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--silver); border: 1px solid var(--border); } .btn-ghost:hover { border-color: var(--bronze); color: var(--bronze); } /* ===== HEADER ===== */ header#site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 0 24px; background: linear-gradient(180deg, rgba(9,12,15,0.85) 0%, rgba(9,12,15,0) 100%); transition: background 0.4s, box-shadow 0.4s; } header#site-header.scrolled { background: rgba(9, 12, 15, 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--border), 0 10px 40px rgba(0,0,0,0.5); } .nav-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 108px; transition: height 0.4s; gap: 28px; } header#site-header.scrolled .nav-inner { height: 84px; } /* The wordmark carries the header — ~250px wide on desktop (old-site presence), stepping down through the breakpoints below. File aspect is 1520×458 (3.32:1). */ .logo { display: flex; align-items: center; text-decoration: none; flex: none; } .logo img { height: 75px; width: auto; transition: height 0.4s; } header#site-header.scrolled .logo img { height: 58px; } .logo-word { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.18em; text-transform: uppercase; } nav { flex: 1; min-width: 0; display: flex; justify-content: flex-end; } nav ul { list-style: none; display: flex; gap: 30px; align-items: center; /* Hardened against long/legacy menus: labels never wrap into a second line; overflow scrolls horizontally instead of exploding the header. */ flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } nav ul::-webkit-scrollbar { display: none; } nav ul li { flex: none; } nav ul li a { font-size: clamp(0.8rem, 0.76rem + 0.15vw, 0.875rem); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ivory); white-space: nowrap; text-decoration: none; position: relative; padding-bottom: 4px; transition: color 0.3s; } nav ul li a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--bronze); transition: width 0.3s; } nav ul li a:hover { color: var(--bronze); } nav ul li a:hover::after { width: 100%; } /* Legacy: menus that carry their own reserve item (the standalone .btn-book below is the canonical CTA now). */ nav ul li a.nav-reserve { background: var(--bronze); color: var(--bg-darkest); padding: 11px 24px; font-weight: 700; letter-spacing: 2px; transition: background 0.3s, transform 0.3s; } nav ul li a.nav-reserve::after { display: none; } nav ul li a.nav-reserve:hover { background: var(--bronze-bright); color: var(--bg-darkest); transform: translateY(-1px); } /* Right-side cluster: phone (mid widths) + BOOK A TABLE + hamburger (mobile) */ .header-actions { display: flex; align-items: center; gap: 16px; flex: none; } /* * BOOK A TABLE — the persistent reservation CTA, deliberately OUTSIDE the * wp_nav_menu markup so no assigned menu can ever remove it (the old site kept a * standing Book a Table button; ours vanished when the legacy menu took over the * 'primary' location). Bronze fill: the strongest read against #090C0F. */ .btn-book { display: inline-block; background: var(--bronze); color: var(--bg-darkest); padding: 15px 30px; font-weight: 700; font-size: 0.8rem; letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none; white-space: nowrap; border-radius: 0; transition: background 0.3s, transform 0.3s, box-shadow 0.3s; } .btn-book:hover { background: var(--bronze-bright); color: var(--bg-darkest); transform: translateY(-1px); box-shadow: 0 10px 30px rgba(193,153,119,0.25); } .nav-phone { display: none; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 1px; color: var(--bronze); text-decoration: none; } .nav-phone:hover { color: var(--bronze-bright); } @media (max-width: 1080px) and (min-width: 641px) { .nav-phone { display: flex; } } .menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; z-index: 1001; } .menu-toggle span { display: block; width: 26px; height: 2px; background: var(--ivory); transition: all 0.3s; } .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* ===== HERO ===== */ #hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: var(--bg-darkest); } .hero-bg { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,12,15,0.72) 0%, rgba(9,12,15,0.55) 45%, rgba(9,12,15,0.94) 100%), url('images/hero-food.jpg') center/cover no-repeat; } /* Pure-CSS fallback ground if the photo is ever missing: the gradient alone still reads. */ .hero-bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 60% at 50% 30%, rgba(193,153,119,0.10) 0%, rgba(9,12,15,0) 70%); } .hero-content { position: relative; z-index: 2; text-align: center; padding: 150px 24px 40px; max-width: 980px; } .hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 9px 22px; border: 1px solid var(--border); font-size: 0.66rem; font-weight: 700; letter-spacing: 3.5px; text-transform: uppercase; color: var(--bronze); margin-bottom: 34px; backdrop-filter: blur(4px); background: rgba(9,12,15,0.35); } .hero-wordmark { display: flex; justify-content: center; margin: 0 0 6px; } .hero-wordmark img { height: clamp(72px, 14vw, 150px); width: auto; } .hero-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.4rem, 11vw, 7.5rem); line-height: 0.95; margin-bottom: 4px; letter-spacing: 0.14em; text-transform: uppercase; } .hero-sub-word { font-family: var(--font-display); font-weight: 600; color: var(--ivory); letter-spacing: 0.5em; text-transform: uppercase; font-size: clamp(0.8rem, 2vw, 1.05rem); margin: 4px 0 0 0.5em; /* offset the trailing letterspace */ } .hero-tagline { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.02rem, 2.1vw, 1.3rem); color: var(--ivory); max-width: 640px; margin: 26px auto 44px; line-height: 1.7; } .hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .hero-scroll { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--gray); font-size: 0.62rem; letter-spacing: 3px; text-transform: uppercase; z-index: 2; } .hero-scroll .line { width: 1px; height: 44px; background: linear-gradient(180deg, var(--bronze) 0%, transparent 100%); } /* ===== DIVIDER (◆ between sections) ===== */ .section-divider { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 0 24px; color: var(--bronze); font-size: 0.7rem; } .section-divider::before, .section-divider::after { content: ''; height: 1px; flex: 0 1 220px; background: linear-gradient(90deg, transparent, var(--border)); } .section-divider::after { background: linear-gradient(90deg, var(--border), transparent); } /* ===== WEEKLY SPECIAL ===== */ #special { padding: 96px 0; background: var(--bg-darkest); } .special-card { max-width: 760px; margin: 0 auto; text-align: center; border: 1px solid var(--border); background: var(--card); padding: 44px 36px; position: relative; } .special-card::before { content: '\25C6'; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); color: var(--bronze); background: var(--bg-darkest); padding: 0 14px; font-size: 0.8rem; } .special-card .ds-photo { margin-bottom: 28px; } /* No image set → compact text-only card (no placeholder image block). */ .special-card--compact { padding: 36px 36px 38px; max-width: 640px; } .special-kicker { font-size: 0.66rem; font-weight: 800; letter-spacing: 4px; text-transform: uppercase; color: var(--bronze); } .special-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ivory); margin: 12px 0 8px; } .special-sub { color: var(--silver); font-weight: 300; } .special-card .btn { margin-top: 24px; } /* ===== THE ROOM (homepage photo carousel — replaced the featured-dishes grid) ===== */ #gallery { padding: 96px 0 90px; background: var(--bg-dark); overflow: hidden; } .featured-head { text-align: center; margin-bottom: 54px; } .featured-head .section-subtitle { margin: 0 auto; } .featured-more { text-align: center; margin-top: 44px; } /* ===== EVENTS STRIP ===== */ #events { padding: 110px 0; background: var(--bg-darkest); } .events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } /* One event → center the lone card at card width instead of pinning it to the left third (the ≤968px media query below still stacks it full-width). */ .events-grid--single { grid-template-columns: minmax(0, 380px); justify-content: center; } .event-card { background: var(--card); border: 1px solid var(--border); padding: 30px; display: flex; flex-direction: column; transition: border-color 0.35s, transform 0.35s; } .event-card:hover { border-color: var(--bronze); transform: translateY(-4px); } .event-card .ds-photo { margin-bottom: 20px; } .event-date { font-size: 0.72rem; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--bronze); margin-bottom: 10px; } .event-name { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ivory); margin-bottom: 10px; } .event-desc { font-size: 0.95rem; color: var(--silver); font-weight: 300; flex: 1; } .event-meta { margin-top: 16px; color: var(--gray); font-size: 0.84rem; letter-spacing: 1px; text-transform: uppercase; } /* ===== VISIT (hours / location) ===== */ #visit { padding: 110px 0; background: var(--bg-dark); } .visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; } .visit-info h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ivory); letter-spacing: 0.08em; text-transform: uppercase; margin: 34px 0 14px; } .visit-info h3:first-of-type { margin-top: 0; } .visit-address { font-style: normal; color: var(--silver); line-height: 1.9; font-size: 1rem; } .visit-address .street { font-weight: 700; color: var(--ivory); font-size: 1.05rem; } .hours-list { list-style: none; } .hours-list li { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 1rem; } .hours-list li .day { color: var(--gray); letter-spacing: 1px; text-transform: uppercase; font-size: 0.8rem; padding-top: 3px; } .hours-list li .time { color: var(--ivory); font-weight: 600; text-align: right; } .visit-photo { width: 100%; aspect-ratio: 4/3; border: 1px solid var(--border); background: url('images/wagyu.jpg') center/cover no-repeat, var(--card); } .visit-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; } /* ===== PAGE CHROME (inner pages) ===== */ .ds-page { padding: 168px 0 90px; min-height: 70vh; } .page-title-wrap { text-align: center; margin-bottom: 40px; } /* Full-bleed feel for plugin app pages: the app brings its own inner max-width. */ .ds-page .ds-app { border: none; margin: 0 -24px; } @media (min-width: 1200px) { .ds-page .ds-app { margin: 0; } } /* WP content typography (pages + posts) */ .entry-content { max-width: 720px; margin: 0 auto; font-weight: 300; font-size: 1.02rem; } .entry-content > * + * { margin-top: 1.2em; } .entry-content h2, .entry-content h3 { font-family: var(--font-display); font-weight: 600; color: var(--ivory); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; margin-top: 1.8em; } .entry-content h2 { font-size: 1.5rem; } .entry-content h3 { font-size: 1.15rem; } .entry-content a { text-decoration: underline; text-underline-offset: 3px; } .entry-content blockquote { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--ivory); border-left: 2px solid var(--bronze); padding-left: 22px; margin-left: 0; } .entry-content ul, .entry-content ol { padding-left: 1.4em; } .entry-content img { border: 1px solid var(--border); } .entry-content strong { color: var(--ivory); font-weight: 700; } /* ===== BLOG ===== */ .post-list { max-width: 780px; margin: 0 auto; } .post-card { border: 1px solid var(--border); background: var(--card); padding: 34px 34px 30px; margin-bottom: 26px; transition: border-color 0.3s; } .post-card:hover { border-color: var(--bronze); } .post-card-meta { font-size: 0.68rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--bronze); margin-bottom: 10px; } .post-card-title { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.2; margin-bottom: 12px; } .post-card-title a { color: var(--ivory); } .post-card-title a:hover { color: var(--bronze); } .post-card-excerpt { color: var(--silver); font-weight: 300; font-size: 0.95rem; } .post-hero { max-width: 900px; margin: 0 auto 36px; border: 1px solid var(--border); } .post-hero img { width: 100%; height: auto; } .single-meta { text-align: center; font-size: 0.7rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--bronze); margin-bottom: 14px; } .pagination, .nav-links { display: flex; gap: 12px; justify-content: center; margin-top: 40px; color: var(--gray); } .pagination a, .nav-links a { color: var(--bronze); } .page-numbers { padding: 6px 12px; border: 1px solid var(--border); } .page-numbers.current { background: var(--bronze); color: var(--bg-darkest); border-color: var(--bronze); } /* ===== ABOUT PAGE ===== */ .about-hero { text-align: center; max-width: 760px; margin: 0 auto 60px; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; max-width: 1040px; margin: 0 auto; } .about-photo { width: 100%; aspect-ratio: 4/3; border: 1px solid var(--border); background: url('images/dish-side.jpg') center/cover no-repeat, var(--card); } .chef-quote { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.2rem, 2.6vw, 1.6rem); color: var(--ivory); text-align: center; max-width: 720px; margin: 70px auto 0; line-height: 1.6; } .chef-quote cite { display: block; font-family: var(--font-body); font-style: normal; font-size: 0.72rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--bronze); margin-top: 18px; } /* ===== CONTACT PAGE ===== */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; max-width: 1040px; margin: 0 auto; } .contact-method { margin-bottom: 30px; } .contact-method h3 { font-size: 0.68rem; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--gray); margin-bottom: 8px; } .contact-method p, .contact-method a { font-size: 1.08rem; color: var(--ivory); font-weight: 500; } .contact-method a { color: var(--bronze); } .contact-form { display: flex; flex-direction: column; gap: 18px; } .form-group input, .form-group textarea { width: 100%; padding: 15px 18px; background: var(--card); border: 1px solid var(--border); color: var(--ivory); border-radius: 0; font-family: var(--font-body); font-size: 0.95rem; transition: border-color 0.3s, box-shadow 0.3s; outline: none; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--gray); opacity: 0.7; } .form-group input:focus, .form-group textarea:focus { border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(193,153,119,0.10); } .form-group textarea { min-height: 140px; resize: vertical; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .contact-status { margin-top: 14px; color: var(--bronze); font-size: 0.9rem; min-height: 1.2em; } /* ===== FOOTER ===== */ footer { padding: 80px 0 40px; background: var(--bg-darkest); border-top: 1px solid var(--border); } .footer-orn { text-align: center; color: var(--bronze); letter-spacing: 12px; font-size: 0.72rem; margin-bottom: 48px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; } .footer-brand .logo { margin-bottom: 20px; } .footer-brand .logo img { height: 50px; } .footer-brand p { color: var(--gray); font-size: 0.95rem; line-height: 1.8; max-width: 320px; font-weight: 300; } .footer-heading { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory); margin-bottom: 22px; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 11px; } .footer-links li a, .footer-links li { color: var(--gray); font-size: 0.95rem; text-decoration: none; transition: color 0.3s; font-weight: 300; } .footer-links li a:hover { color: var(--bronze); } .footer-hours li { display: flex; flex-direction: column; margin-bottom: 12px; } .footer-hours .label { color: var(--bronze); font-size: 0.64rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 30px; border-top: 1px solid var(--border); } .footer-bottom p { font-size: 0.76rem; color: var(--gray); } .footer-social { display: flex; gap: 20px; } .footer-social a { color: var(--gray); font-size: 0.7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; transition: color 0.3s; } .footer-social a:hover { color: var(--bronze); } /* ===== BACK TO TOP ===== */ .back-to-top { position: fixed; bottom: 32px; right: 32px; z-index: 999; width: 48px; height: 48px; background: var(--bronze); color: var(--bg-darkest); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; opacity: 0; pointer-events: none; border-radius: 0; transition: opacity 0.3s, transform 0.3s; box-shadow: 0 8px 24px rgba(0,0,0,0.45); } .back-to-top.visible { opacity: 1; pointer-events: auto; } .back-to-top:hover { transform: translateY(-3px); background: var(--bronze-bright); } /* ===== RESPONSIVE ===== */ @media (max-width: 968px) { .visit-grid, .contact-grid, .about-grid { grid-template-columns: 1fr; gap: 48px; } .events-grid { grid-template-columns: 1fr; gap: 20px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } } /* Collapse to the drawer EARLIER than before (was 900px): nowrap labels + the standalone Book a Table CTA need the room at mid widths. */ @media (max-width: 1080px) { .menu-toggle { display: flex; } .nav-inner { height: 88px; } header#site-header.scrolled .nav-inner { height: 72px; } .logo img { height: 56px; } header#site-header.scrolled .logo img { height: 48px; } nav ul { position: fixed; top: 0; right: -100%; width: 82%; max-width: 360px; height: 100vh; background: rgba(9, 12, 15, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); flex-direction: column; align-items: flex-start; justify-content: center; padding: 48px; gap: 26px; transition: right 0.4s; overflow-x: visible; } nav ul.open { right: 0; box-shadow: -20px 0 60px rgba(0,0,0,0.5); } nav ul li a { font-size: 1.05rem; letter-spacing: 3px; } .hero-cta { flex-direction: column; align-items: center; } .form-row { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; text-align: center; } } /* Compact header: BOOK A TABLE stays VISIBLE (never buried in the hamburger). */ @media (max-width: 640px) { header#site-header { padding: 0 16px; } .nav-inner { height: 74px; gap: 14px; } header#site-header.scrolled .nav-inner { height: 64px; } .logo img { height: 46px; } header#site-header.scrolled .logo img { height: 40px; } .header-actions { gap: 10px; } .btn-book { padding: 11px 14px; font-size: 0.66rem; letter-spacing: 1.6px; } } @media (max-width: 480px) { .container { padding: 0 16px; } .btn { padding: 15px 30px; font-size: 0.76rem; width: 100%; text-align: center; } .footer-grid { grid-template-columns: 1fr; gap: 36px; } .ds-page { padding: 130px 0 70px; } .logo img { height: 40px; } header#site-header.scrolled .logo img { height: 36px; } } @media (max-width: 360px) { .btn-book { padding: 10px 11px; font-size: 0.6rem; letter-spacing: 1.2px; } }