/*************************************************** * BASE + GLOBALS ***************************************************/ html, body { margin: 0; padding: 0; font-family: Arial, sans-serif; -webkit-text-size-adjust: none; /* Helps unify text scaling on mobile */ /* You likely already have in your */ } /* Full background with .webp or .mp4 */ .background-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: url('/assets/images/background.webp') no-repeat center center fixed; background-size: cover; overflow: hidden; } .bg-video { position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; transition: opacity 0.6s ease; } .hide { opacity:0; } .show { opacity:1; } /*************************************************** * MODAL CONTAINER ***************************************************/ .modal { position: fixed; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:none; z-index:999; } .modal.hide { display: none; } /*************************************************** * MODAL CONTENT => default desktop: * width: auto, min-width: 25%, max-width: 1000px * We'll override with breakpoints for mobile ***************************************************/ .modal-content { background: #f9f6f0; border-radius: 10px; padding: 25px 60px; width: auto; min-width: 25%; max-width: 1000px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.3); font-size: 20px; font-weight: bold; position: relative; } /*************************************************** * swirlIn / swirlOut / tada animations ***************************************************/ @keyframes swirlIn { 0% { transform:rotate(720deg) scale(0); opacity:0; } 100% { transform:rotate(0deg) scale(1); opacity:1; } } @keyframes swirlOut { 0% { transform:rotate(0deg) scale(1); opacity:1; } 100% { transform:rotate(-720deg) scale(0); opacity:0; } } @keyframes tada { 0% { transform:scale(0.95); } 10%,20% { transform:rotate(-3deg) scale(1); } 30%,50%,70%,90% { transform:rotate(3deg) scale(1); } 40%,60%,80% { transform:rotate(-3deg) scale(1); } 100% { transform:scale(1); } } .swirl-in { animation: swirlIn 0.4s forwards ease; } .swirl-out { animation: swirlOut 0.3s forwards ease; } .tada { animation: tada 0.9s forwards ease; } /*************************************************** * BUTTONS ***************************************************/ .modal-buttons { margin-top: 20px; display: flex; justify-content: center; gap: 15px; } button { padding: 12px 20px; border: 2px solid #4a772f; background: transparent; color: #4a772f; font-size: 18px; font-weight: bold; border-radius: 5px; cursor: pointer; transition: 0.3s; } button:hover { background: #4a772f; color: #fff; } #yes-btn, #no-btn { width: 120px; } /*************************************************** * STEP 2 => ZIP ***************************************************/ .tall-zip-input { height: 50px; font-size: 18px; margin-top: 10px; border: 2px solid #4a772f; border-radius: 5px; padding: 0 10px; box-sizing: border-box; text-align: center; } /*************************************************** * STEP 3 => SERVICES ***************************************************/ .service-list { display: flex; flex-direction: column; align-items: center; margin-top: 20px; gap: 10px; } .select-option { width: 80%; padding: 10px 15px; text-align: center; border-radius: 20px; border: 2px solid #4a772f; background: transparent; color: #4a772f; font-weight: bold; cursor: pointer; transition: 0.3s ease; } .select-option.selected { background: #4a772f; color: #fff; } /*************************************************** * STEP 4 => CONTACT FORM ***************************************************/ .contact-form-wrapper { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 10px; } .contact-form-wrapper input, .contact-form-wrapper textarea { width: 100%; max-width: 600px; padding: 10px; font-size: 16px; border: 2px solid #4a772f; border-radius: 5px; background: #fff; outline: none; box-sizing: border-box; } .contact-form-wrapper input { height: 40px; } .contact-form-wrapper textarea { height: 100px; resize: none; } /*************************************************** * AUTOCOMPLETE (Tutorial approach) ***************************************************/ .autocomplete-wrapper { width: 100%; max-width: 600px; } .autocomplete-container { position: relative; width: 100%; margin-bottom: 10px; } .autocomplete-container input { width: 100% !important; border: 2px solid #4a772f !important; border-radius: 5px !important; background: #fff !important; font-size: 16px !important; padding: 10px !important; box-sizing: border-box !important; padding-right: 40px !important; } .autocomplete-items { position: absolute; z-index: 9999; top: calc(100% + 2px); left: 0; right: 0; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 4px 10px rgba(0,0,0,0.2); background: #fff; } .autocomplete-items div { padding: 8px; font-size: 14px; cursor: pointer; } .autocomplete-items div:hover, .autocomplete-items .autocomplete-active { background-color: rgba(0,0,0,0.08); } .clear-button { color: rgba(0,0,0,0.4); cursor: pointer; position: absolute; right: 10px; top: 0; height: 100%; display: none; align-items: center; } .clear-button.visible { display: flex; } .clear-button:hover { color: rgba(0,0,0,0.7); } /*************************************************** * MEDIA QUERIES ***************************************************/ /* mid-range => under 1200px => modal => 50% wide */ @media(max-width:1200px) { .modal-content { width:50% !important; min-width:auto !important; max-width:800px !important; font-size:22px; padding:25px 40px; } button { font-size:20px; padding:14px 24px; } .contact-form-wrapper input, .contact-form-wrapper textarea { font-size:18px; } .autocomplete-container input { font-size:18px !important; } .autocomplete-items div { font-size:16px; } } /* under 930px => 65% wide, bigger text */ @media(max-width:930px) { .modal-content { width:65% !important; max-width:700px !important; font-size:24px; padding:25px 30px; } button { font-size:22px; padding:16px 28px; } .contact-form-wrapper input, .contact-form-wrapper textarea { font-size:20px; } .autocomplete-container input { font-size:20px !important; } } /* under 600px => 90% wide, reduce font so it doesn't overflow */ @media(max-width:600px) { .modal-content { width:90% !important; max-width:550px !important; font-size:22px; padding:20px; } button { font-size:20px; padding:14px 22px; } .contact-form-wrapper input, .contact-form-wrapper textarea { font-size:18px; } .autocomplete-container input { font-size:18px !important; } .autocomplete-items div { font-size:16px; } } /* under 480px => 95% wide, keep fonts moderate so it doesn't overflow */ @media(max-width:480px) { .modal-content { width:95% !important; max-width:500px !important; font-size:20px; padding:18px; } button { font-size:18px; padding:12px 20px; } .contact-form-wrapper input, .contact-form-wrapper textarea { font-size:16px; } .autocomplete-container input { font-size:16px !important; } .autocomplete-items div { font-size:14px; } }