/* ============================================================ Cedar Table Mediterranean — Shared Stylesheet Fonts loaded via Google Fonts in each HTML Tailwind CDN handles utility classes; this file handles base styles, animations, and component overrides. ============================================================ */ /* ── Fonts ────────────────────────────────────────────────── */ body { font-family: 'Karla', sans-serif; } .font-display { font-family: 'Playfair Display SC', serif; } /* ── Demo banner ─────────────────────────────────────────── */ .demo-banner { background: #0f172a; color: #94a3b8; text-align: center; padding: 0.375rem 1rem; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.025em; position: relative; z-index: 51; } .demo-banner a { color: #f59e0b; text-decoration: none; } .demo-banner a:hover { text-decoration: underline; } /* ── Construction banner ─────────────────────────────────── */ .construction-banner { background-color: #D97706; color: #1c1917; text-align: center; padding: 0.5rem 1rem; font-size: 0.8125rem; font-weight: 600; line-height: 1.4; } .construction-banner a { color: #1c1917; text-decoration: underline; text-underline-offset: 2px; } /* ── Skip link (accessibility) ───────────────────────────── */ .skip-link { position: absolute; top: -100%; left: 1rem; background: #1A2E0A; color: #fff; padding: 0.5rem 1rem; border-radius: 0 0 6px 6px; font-size: 0.875rem; font-weight: 600; z-index: 9999; transition: top 0.2s ease; } .skip-link:focus { top: 0; } /* ── Focus ring ──────────────────────────────────────────── */ :focus-visible { outline: 3px solid #D97706; outline-offset: 2px; } /* ── Smooth scroll ───────────────────────────────────────── */ html { scroll-behavior: smooth; scroll-padding-top: 100px; } /* ── Reduced motion ──────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* ── Navigation ──────────────────────────────────────────── */ /* Dark forest nav — white text by default, amber on hover */ .nav-link { color: rgba(255, 255, 255, 0.95); font-size: 0.875rem; font-weight: 500; transition: color 0.2s ease; cursor: pointer; text-decoration: none; } .nav-link:hover { color: #D97706; } .nav-link-active { color: #D97706; } /* ── Hero (homepage) ─────────────────────────────────────── */ .hero-bg { background-color: #1a2e0a; background-image: linear-gradient(135deg, rgba(180,83,9,.88) 0%, rgba(26,46,10,.94) 65%), url("../img/food.jpg"); background-size: cover; background-position: center; } .hero-bg::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4z'/%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } /* ── Page hero banner (inner pages) ─────────────────────── */ .page-hero { background-color: #1a2e0a; background-image: linear-gradient(135deg, rgba(180,83,9,.7) 0%, rgba(26,46,10,.95) 70%); padding-top: 7rem; /* offset for fixed nav + construction banner */ } /* ── Card hover lift ─────────────────────────────────────── */ .offer-card { transition: transform 0.25s ease, box-shadow 0.25s ease; } .offer-card:hover { transform: translateY(-5px); } /* ── Photo card hover ────────────────────────────────────── */ .photo-card { transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; } .photo-card:hover { transform: scale(1.02); } .photo-card img { transition: transform 0.4s ease; } .photo-card:hover img { transform: scale(1.06); } /* ── Tab states ──────────────────────────────────────────── */ .tab-btn { transition: background-color 0.2s, color 0.2s, border-color 0.2s; cursor: pointer; } .tab-btn.active { background-color: #B45309; color: #fff; border-color: #B45309; } .tab-panel { display: none; } .tab-panel.active { display: block; } /* ── Menu item row ───────────────────────────────────────── */ .menu-item { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px dashed #e7e5e4; } .menu-item:last-child { border-bottom: none; } .menu-item-name { font-weight: 500; color: #1c1917; font-size: 0.9375rem; } .menu-item-desc { color: #78716c; font-size: 0.8125rem; margin-top: 0.125rem; } .menu-item-price { font-weight: 700; color: #B45309; font-size: 0.9375rem; white-space: nowrap; } /* ── Animations ──────────────────────────────────────────── */ @keyframes bounce-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } .bounce { animation: bounce-y 1.6s ease-in-out infinite; } /* ── Image aspect helpers ────────────────────────────────── */ .img-food { width: 100%; height: 100%; object-fit: cover; display: block; }