/* ========================================================================== Pomudemtion BBQ — shared styles Palette, fonts and radius/shadow/button tokens are injected via the Tailwind @theme block in each page's . This file holds anything that cannot be expressed as a Tailwind utility: cards, buttons, inputs, keyframes and the cookie banner. ========================================================================== */ html { scroll-behavior: smooth; } body { background-color: var(--color-background); color: var(--color-text-primary); font-family: var(--font-body); } h1, h2, h3, h4, .font-display { font-family: var(--font-display); } /* ---- Border radius family: sharp-no-radius (cards & images) ---- */ .card, .img-frame, .section-image { border-radius: 0 !important; } /* ---- Shadow family: lifted-blurry ---- */ .card { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); } /* ---- Button + form family: soft-with-inset-shadow ---- */ .btn-primary, .btn-secondary, input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], select, textarea { background-color: var(--color-surface); border-radius: 12px; border: none; } .btn-primary, .btn-secondary { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), inset 0 -2px 0 rgba(0, 0, 0, 0.08); font-family: var(--font-body); font-weight: 600; transition: background-color 0.2s ease, transform 0.15s ease; } .btn-primary { color: var(--color-primary-dark); } .btn-primary:hover { background-color: #fff7f8; transform: translateY(-1px); } .btn-secondary { color: var(--color-text-primary); } .btn-secondary:hover { background-color: #fff7f8; transform: translateY(-1px); } input, select, textarea { color: var(--color-text-primary); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08); padding: 0.75rem 1rem; } input::placeholder, textarea::placeholder { color: var(--color-text-secondary); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ---- Micro-interactions ---- */ a.nav-link { position: relative; transition: color 0.2s ease; } a.nav-link::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background-color: var(--color-primary); transition: width 0.25s ease; } a.nav-link:hover::after { width: 100%; } .card { transition: transform 0.25s ease, box-shadow 0.25s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); } footer a { transition: opacity 0.2s ease; } footer a:hover { opacity: 0.7; } /* ---- Cookie banner ---- */ #cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background-color: var(--color-accent); color: #fff5f3; display: none; } #cookie-banner.visible { display: block; } /* ---- Mobile nav ---- */ #mobile-menu { display: none; } #mobile-menu.open { display: block; } /* ---- Form confirmation message ---- */ #form-confirmation { display: none; } #form-confirmation.visible { display: block; }