/*============================================================================*\ | 1) BODY & BACKDROP \*============================================================================*/ /* If your site’s is handled elsewhere, ignore this. Otherwise, here's a baseline for the page background. */ html, body { margin: 0; padding: 0; font-family: "Open Sans", sans-serif; background: #eee; /* Just a neutral behind the noise if it repeats, or you can remove if your page wrapper sets a background */ } /* The backdrop overlay for the Thank You popup */ #blackBackground { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); display: none; /* JS will set display=flex or block */ z-index: 9999; transition: opacity 0.5s; } #thankYouBox { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 200px; min-height: 142px; background: #fff; border: 1px solid #ccc; border-radius: 5px; color: #5f5f5f; text-align: center; padding: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } /* Close button in popup */ #closeAndroidUpgradePopUpBtn { display: inline-block; background-color: #6c757d; color: #fff; border: none; border-radius: 4px; font-size: 14px; margin-top: 1rem; padding: 0.5rem 1rem; cursor: pointer; min-width: 100px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } #closeAndroidUpgradePopUpBtn:hover { background-color: #5a6268; } /*============================================================================*\ | 2) PAGE BACKGROUND WITH NOISE \*============================================================================*/ /* If you want the entire background behind the form to be your noise-dark.jpg: */ #androidUpgradeFormBackground { /* “scroll” ensures the background doesn’t stay fixed behind content. Adjust if you want a parallax effect or something else. */ background: url('/images/backgrounds/noise-dark.jpg') repeat center center scroll; width: 100%; padding-top: 80px; /* Leaves room for your site’s header */ padding-bottom: 80px; /* Leaves room for your site’s footer */ box-sizing: border-box; } /*============================================================================*\ | 3) SINGLE CARD (HEADER + FORM IN ONE) \*============================================================================*/ #formContainer { /* Center the white card */ max-width: 700px; margin: 128px auto; /* auto left/right margin => centered */ background: #fff; /* Single white background for entire card */ border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); overflow: hidden; /* So the header’s border-radius is continuous */ border: none; position: relative; /* Not absolute, so it flows naturally in the page */ padding-bottom: 20px; /* Bottom padding for spacing under the form */ } /* Header area inside the card */ #androidUpgradeHeaderContainer { /* Remove separate gradient background if you want a single white card OR do a subtle top gradient that transitions into white: background: linear-gradient(#f2f2f2, #fff); but let's keep it simple: just the same background color (#fff). */ background: #f9f9f9; /* Slightly off-white to differentiate top portion */ padding: 20px; border-bottom: 1px solid #ddd; /* So there's a subtle separation line */ } #androidUpgradeHeader { margin: 0; text-align: center; color: #2d2d2d; font-size: 1.5rem; font-weight: 300; line-height: 1.2; margin-bottom: 10px; text-shadow: 0 1px 0 #fff; } #androidUpgradeText { text-align: center; color: #2d2d2d; font-size: 14px; line-height: 1.4; margin: 0; padding: 0 10% 0 10%; text-shadow: 0px 1px 0px #ffffff; } /*============================================================================*\ | 4) FORM FIELDS + LAYOUT \*============================================================================*/ #androidUpgradeForm { display: flex; flex-direction: column; align-items: center; /* center the fields & buttons horizontally */ padding: 1rem 2rem; } #androidUpgradeForm input[type="email"], #androidUpgradeForm input[type="text"] { width: 250px; max-width: 100%; margin: 0.5rem 0; padding: 0.6rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.95rem; color: #333; } #deviceFields { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; /* center the row for each device */ width: 100%; margin-bottom: 1rem; } /* For each “deviceRow” => two inputs side by side on larger screens */ .deviceRow { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } /*============================================================================*\ | 5) BUTTONS \*============================================================================*/ /* “Add Another Device” */ #addDeviceBtn { display: inline-block; background-color: #28a745; color: #fff; border: none; border-radius: 4px; font-size: 14px; margin: 0.5rem 0; padding: 0.5rem 1.5rem; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } #addDeviceBtn:hover { background-color: #218838; } /* “SUBMIT” Button */ #androidUpgradeSubmitBtn { display: inline-block; background-color: #007bff; color: #fff; border: none; border-radius: 4px; font-size: 14px; margin-top: 1rem; padding: 0.6rem 2.5rem; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } #androidUpgradeSubmitBtn:hover { background-color: #0056b3; } /* Optional button focus outline */ #addDeviceBtn:focus, #androidUpgradeSubmitBtn:focus, #closeAndroidUpgradePopUpBtn:focus { outline: none; box-shadow: 0 0 0 3px rgba(0,123,255,0.25); } /*============================================================================*\ | 6) RESPONSIVE TWEAKS \*============================================================================*/ /* Make sure the card flows nicely on small screens */ @media (max-width: 575px) { #formContainer { margin: 0 1rem; /* slight side margin */ border-radius: 0; /* if you want no rounding on very small screens */ } #androidUpgradeFormBackground { padding-top: 60px; padding-bottom: 60px; min-height: 800px; } #androidUpgradeHeader { font-size: 1.3rem; } #androidUpgradeForm input[type="email"], #androidUpgradeForm input[type="text"] { width: 100%; } } /* If you prefer other breakpoints, adapt as needed... */