/* — Base Styles & Font Definitions for the form wrapper — */
.vilom-form-wrapper {
font-family: ‘Inter’, sans-serif;
background-color: #FDFDFD;
color: #44403c;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.vilom-form-wrapper h1, .vilom-form-wrapper h2, .vilom-form-wrapper h3 {
font-family: ‘Cormorant Garamond’, serif;
}
/* — Custom Form Element Styles — */
.vilom-form-wrapper .form-input:focus {
outline: none;
box-shadow: 0 0 0 2px #C9B89A;
border-color: #C9B89A;
}
.vilom-form-wrapper .custom-radio {
appearance: none;
border: 2px solid #D1D5DB;
border-radius: 9999px;
width: 1.25rem;
height: 1.25rem;
transition: all 0.2s ease-in-out;
position: relative;
top: 4px;
}
.vilom-form-wrapper .custom-radio:checked {
border-color: #A18A68;
background-color: #A18A68;
}
.vilom-form-wrapper .custom-radio:checked::after {
content: ”;
display: block;
width: 0.5rem;
height: 0.5rem;
background: white;
border-radius: 9999px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* — Embedded Tailwind CSS Classes (Scoped to .vilom-form-wrapper) — */
.vilom-form-wrapper .container { width: 100%; }
@media (min-width: 640px) { .vilom-form-wrapper .container { max-width: 640px; } }
@media (min-width: 768px) { .vilom-form-wrapper .container { max-width: 768px; } }
@media (min-width: 1024px) { .vilom-form-wrapper .container { max-width: 1024px; } }
@media (min-width: 1280px) { .vilom-form-wrapper .container { max-width: 1280px; } }
.vilom-form-wrapper .bg-stone-50 { background-color: #fafaf9; }
.vilom-form-wrapper .bg-white { background-color: #ffffff; }
.vilom-form-wrapper .bg-stone-800 { background-color: #292524; }
.vilom-form-wrapper .hover\:bg-stone-900:hover { background-color: #1c1917; }
.vilom-form-wrapper .text-stone-900 { color: #1c1917; }
.vilom-form-wrapper .text-stone-800 { color: #292524; }
.vilom-form-wrapper .text-stone-700 { color: #44403c; }
.vilom-form-wrapper .text-stone-600 { color: #57534e; }
.vilom-form-wrapper .text-stone-500 { color: #78716c; }
.vilom-form-wrapper .text-white { color: #ffffff; }
.vilom-form-wrapper .hover\:text-stone-900:hover { color: #1c1917; }
.vilom-form-wrapper .border { border-width: 1px; }
.vilom-form-wrapper .border-stone-200 { border-color: #e7e5e4; }
.vilom-form-wrapper .border-stone-300 { border-color: #d6d3d1; }
.vilom-form-wrapper .rounded-md { border-radius: 0.375rem; }
.vilom-form-wrapper .rounded-lg { border-radius: 0.5rem; }
.vilom-form-wrapper .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.vilom-form-wrapper .shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05); }
.vilom-form-wrapper .shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04); }
.vilom-form-wrapper .block { display: block; }
.vilom-form-wrapper .flex { display: flex; }
.vilom-form-wrapper .inline-flex { display: inline-flex; }
.vilom-form-wrapper .grid { display: grid; }
.vilom-form-wrapper .hidden { display: none; }
.vilom-form-wrapper .items-center { align-items: center; }
.vilom-form-wrapper .mx-auto { margin-left: auto; margin-right: auto; }
.vilom-form-wrapper .px-4 { padding-left: 1rem; padding-right: 1rem; }
.vilom-form-wrapper .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.vilom-form-wrapper .px-12 { padding-left: 3rem; padding-right: 3rem; }
.vilom-form-wrapper .py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.vilom-form-wrapper .p-8 { padding: 2rem; }
.vilom-form-wrapper .mb-1 { margin-bottom: 0.25rem; }
.vilom-form-wrapper .mb-2 { margin-bottom: 0.5rem; }
.vilom-form-wrapper .mt-3 { margin-top: 0.75rem; }
.vilom-form-wrapper .mb-8 { margin-bottom: 2rem; }
.vilom-form-wrapper .mb-10 { margin-bottom: 2.5rem; }
.vilom-form-wrapper .mt-10 { margin-top: 2.5rem; }
.vilom-form-wrapper .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.vilom-form-wrapper .mr-2 { margin-right: 0.5rem; }
.vilom-form-wrapper .gap-6 { gap: 1.5rem; }
.vilom-form-wrapper .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
.vilom-form-wrapper .space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem; }
.vilom-form-wrapper .space-x-6 > :not([hidden]) ~ :not([hidden]) { margin-left: 1.5rem; }
.vilom-form-wrapper .w-full { width: 100%; }
.vilom-form-wrapper .w-5 { width: 1.25rem; }
.vilom-form-wrapper .h-5 { height: 1.25rem; }
.vilom-form-wrapper .max-w-2xl { max-width: 42rem; }
.vilom-form-wrapper .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.vilom-form-wrapper .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.vilom-form-wrapper .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.vilom-form-wrapper .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.vilom-form-wrapper .text-5xl { font-size: 3rem; line-height: 1; }
.vilom-form-wrapper .font-medium { font-weight: 500; }
.vilom-form-wrapper .font-semibold { font-weight: 600; }
.vilom-form-wrapper .font-bold { font-weight: 700; }
.vilom-form-wrapper .tracking-tight { letter-spacing: -0.025em; }
.vilom-form-wrapper .text-center { text-align: center; }
.vilom-form-wrapper .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; }
.vilom-form-wrapper .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.vilom-form-wrapper .cursor-pointer { cursor: pointer; }
.vilom-form-wrapper .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.vilom-form-wrapper .focus\:ring-2:focus { box-shadow: var(–tw-ring-offset-shadow), var(–tw-ring-shadow), var(–tw-shadow, 0 0 #0000); }
.vilom-form-wrapper .focus\:ring-offset-2:focus { –tw-ring-offset-width: 2px; }
.vilom-form-wrapper .focus\:ring-stone-800:focus { –tw-ring-color: #292524; }
@media (min-width: 640px) {
.vilom-form-wrapper .sm\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
}
@media (min-width: 768px) {
.vilom-form-wrapper .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.vilom-form-wrapper .md\:p-12 { padding: 3rem; }
.vilom-form-wrapper .md\:w-auto { width: auto; }
.vilom-form-wrapper .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vilom-form-wrapper .md\:text-6xl { font-size: 3.75rem; line-height: 1; }
}
// — Wrap script in a function to avoid global scope issues —
(function() {
const formWrapper = document.querySelector(‘.vilom-form-wrapper’);
if (!formWrapper) return;
// — Script to show/hide the meat exclusions field —
const nonVegRadio = formWrapper.querySelector(‘#nonveg-radio’);
const vegRadio = formWrapper.querySelector(‘#veg-radio’);
const meatExclusionsContainer = formWrapper.querySelector(‘#meat-exclusions-container’);
nonVegRadio.addEventListener(‘change’, () => {
if (nonVegRadio.checked) {
meatExclusionsContainer.classList.remove(‘hidden’);
}
});
vegRadio.addEventListener(‘change’, () => {
if (vegRadio.checked) {
meatExclusionsContainer.classList.add(‘hidden’);
formWrapper.querySelector(‘#meat_exclusions’).value = ”;
}
});
// — Script to handle form submission and generate a pre-filled email —
const form = formWrapper.querySelector(‘#invitation-form’);
form.addEventListener(‘submit’, function(event) {
event.preventDefault();
const name = formWrapper.querySelector(‘#name’).value;
const phone = formWrapper.querySelector(‘#phone’).value;
const email = formWrapper.querySelector(‘#email’).value;
const partySize = formWrapper.querySelector(‘input[name=”guest”]:checked’).value;
const mealPreference = formWrapper.querySelector(‘input[name=”meal_preference”]:checked’)?.value || ‘Not specified’;
const meatExclusions = formWrapper.querySelector(‘#meat_exclusions’).value;
const dietaryRestrictions = formWrapper.querySelector(‘#dietary_restrictions’).value;
const story = formWrapper.querySelector(‘#story’).value;
const recipient = ‘reservations@vilom.ca’;
const subject = `Supper Club Application for Vilom: ${name}`;
let body = `
New Application for Vilom Supper Club
————————————————–
APPLICANT DETAILS
Name: ${name}
Phone: ${phone}
Email: ${email}
————————————————–
RESERVATION DETAILS
Party Size: ${partySize === ‘1’ ? ‘1 (Applicant Only)’ : ‘2 (Applicant + 1 Guest)’}
Meal Preference: ${mealPreference}
`;
if (mealPreference === ‘Non-Vegetarian’ && meatExclusions) {
body += `Meat Exclusions: ${meatExclusions}\n`;
}
body += `
Dietary Restrictions / Allergies:
${dietaryRestrictions || ‘None specified’}
————————————————–
APPLICANT’S STORY
${story}
————————————————–
This email was generated from the Vilom website application form.
`;
const encodedSubject = encodeURIComponent(subject);
const encodedBody = encodeURIComponent(body.trim());
const mailtoLink = `mailto:${recipient}?subject=${encodedSubject}&body=${encodedBody}`;
window.location.href = mailtoLink;
});
})();
Vilom- विलोम 