html { scroll-behavior: smooth; box-sizing: border-box; } /* wrapper cleanup */ /* ================================================ NIYA: DELIVERY NOTICE BAR ================================================ */ .niya-delivery-notice { position: relative; /* just after */ width: 100vw; /* span the full viewport */ left: 50%; right: 50%; margin-left: -50vw; /* true full-width */ margin-right: -50vw; background-color: #4C7A33; /* Niya green */ z-index: 9999; /* on top of everything */ } .niya-delivery-notice p { max-width: 1200px; /* optional: constrain text on very large screens */ margin: 0 auto; /* center the paragraph */ padding: 0.5rem 1rem; /* top/bottom + left/right spacing */ color: #fff; /* white text */ text-align: center; /* center text */ font-size: 1rem; /* tweak as you like */ font-weight: 500; /* match your theme’s weight */ line-height: 1.4; } /* === Hero Section styles === */ .site-hero { position: relative; padding: 230px 0 150px; text-align: center; color: #fff; overflow: hidden; /* contain blur */ } .site-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; /* Layer 1: dark overlay for contrast Layer 2: your new hero image Layer 3: optional subtle Moroccan tile SVG pattern (commented out below) */ background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://niya-leeuwarden.nl/wp-content/uploads/2025/05/SiteHeroBG.png') center/cover no-repeat; /* for extra richness you could also add an SVG pattern over the photo: */ /* , url('http://…/moroccan-pattern.svg') center/auto repeat */ backdrop-filter: blur(6px); } .site-hero h1 { font-size: 2.5rem; margin-bottom: 1rem; color: aliceblue; text-shadow: 0 2px 6px rgba(0,0,0,0.7); } .site-hero p { font-size: 1.125rem; text-shadow: 0 1px 4px rgba(0,0,0,0.7); } /* Rounded, padded button */ .ct-button { display: inline-block; background-color: #4C7A33; /* or your brand green */ color: #fff; padding: 0.75rem 1.75rem; border-radius: 2rem; /* pill shape */ font-size: 1rem; text-decoration: none; transition: background-color 0.3s ease; } .ct-button:hover { background-color: #3e6429; } /* Food Menu Section */ .food-menu { padding: 4rem 0; } .food-menu-title { /* make it a block so margin:auto works */ display: block; color: #312F2F; /* shrink width exactly to the text */ width: fit-content; /* center that text-width block */ margin: 0 auto 2rem; position: relative; /* for the ::after underline */ font-size: 2rem; } .food-menu-title::after { content: ''; position: absolute; bottom: -0.25rem; /* a little gap under the text */ left: 0; /* flush to the text’s left edge */ width: 5rem; /* length of your underline */ height: 0.25rem; background: #5a8139; } /* Category Heading */ .food-menu-category { font-size: 1.5rem; margin-top: 2.5rem; position: relative; color: #708090; } .food-menu-category::after { content: ""; display: block; width: 7rem; height: 0.25rem; background: #708090; margin-top: 0.5rem; } /* 3-column grid at desktop, fixed to always be 3 even if fewer items */ .food-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 1.5rem; } /* Card */ .food-menu-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #eaeaea; border-radius: 8px; overflow: hidden; } /* Image */ .food-menu-image img { width: 100%; height: 200px; object-fit: cover; } /* Content */ .food-menu-content { padding: 1rem; flex: 1; display: flex; flex-direction: column; } .food-menu-name { font-size: 1.25rem; margin-bottom: 0.5rem; } .food-menu-desc { flex: 1; margin-bottom: 1rem; color: #666; } .food-menu-meta { display: flex; align-items: center; justify-content: space-between; } .food-menu-price { font-weight: 700; } /* —————————————————————————— Newsletter Block ———————————————————————————————— */ .niya-newsletter { position: relative; background-color: #E6F0EE; /* light accent behind */ padding: 4rem 1rem; text-align: center; z-index: 0; } .niya-newsletter::before { content: ''; position: absolute; inset: 0; background: url('http://localhost/wordpress/wp-content/uploads/2025/05/hero-bg-2.png') center/cover no-repeat; opacity: 0.04; /* dial this up or down as needed */ pointer-events: none; z-index: -1; /* behind all your form content */ } .niya-newsletter-inner { max-width: 600px; margin: 0 auto; } .niya-newsletter-title { font-size: 2.5rem; color: #5a8139; /* your green */ margin-bottom: 0.5rem; } .niya-newsletter-subtitle { font-size: 1rem; color: #434f58; /* dark charcoal */ margin-bottom: 1.75rem; line-height: 1.5; } /* 1) Stack everything & clear WPForms inline-fields rules */ .niya-newsletter .wpforms-form { display: flex !important; flex-direction: column !important; } .niya-newsletter .wpforms-container.inline-fields .wpforms-field-container { display: block !important; } /* 2) Force every wrapper to full width/no extra padding */ .niya-newsletter .wpforms-field-container, .niya-newsletter .wpforms-submit-container { width: 100% !important; margin: 0 !important; padding: 0 !important; } /* 3) Inputs & button exactly same size, full-width */ .niya-newsletter .wpforms-field-container input, .niya-newsletter .wpforms-submit-container button { width: 100% !important; /* 🔑 override any WPForms “medium” widths */ height: 3rem; box-sizing: border-box; font-size: 1rem; } /* 4) Base styling for inputs */ .niya-newsletter .wpforms-field-container input { padding: 0 1rem; border: 1px solid #ccc; border-radius: 4px; } /* 5) Reposition the envelope icon flush with the email field */ .niya-newsletter .wpforms-field-email { position: relative; } .niya-newsletter .wpforms-field-email::before { content: "\f0e0"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; top: 0; left: 0; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; background: #5a8139; color: #fff; border: 1px solid #ccc; border-right: none; border-radius: 4px 0 0 4px; pointer-events: none; } /* make sure the text inside doesn’t get cut off */ .niya-newsletter .wpforms-field-email input { padding-left: calc(3rem + 0.75rem); } /* 6) Button styling */ .niya-newsletter .wpforms-submit-container button { background-color: #5a8139; color: #fff; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; transition: background-color .2s; } .niya-newsletter .wpforms-submit-container button:hover { background-color: #48682b; } /* ──────────────────────────────────────────────────────────────────── 1) Break out of WPForms’ inline-fields sizing entirely: ──────────────────────────────────────────────────────────────────── */ #wpforms-112 .wpforms-container.inline-fields .wpforms-field-container { display: block !important; } /* ──────────────────────────────────────────────────────────────────── 2) Force each inner field WRAPPER to span 100% + reset padding/margins ──────────────────────────────────────────────────────────────────── */ #wpforms-112 .wpforms-field-name, #wpforms-112 .wpforms-field-email, #wpforms-112 .wpforms-submit-container { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ──────────────────────────────────────────────────────────────────── 3) Now make the and