feat: CloudVaultUS premium homepage — Phase A+C (light-mode redesign + 4 new sections)

assets/cvus-age-gate.css

@@ -0,0 +1,268 @@
+/* ============================================================
+   CloudVaultUS — Age Gate Styles
+   File: assets/cvus-age-gate.css
+   ============================================================ */
+
+/* Gate hidden by default — JS shows it */
+.cvus-ag {
+  position: fixed;
+  inset: 0;
+  z-index: 99999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.35s ease, visibility 0.35s ease;
+}
+
+.cvus-ag.is-visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Backdrop */
+.cvus-ag__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(17, 17, 22, 0.88);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+}
+
+/* Modal card */
+.cvus-ag__modal {
+  position: relative;
+  z-index: 1;
+  background: #111116;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 20px;
+  padding: 3rem 2.5rem;
+  max-width: 460px;
+  width: 100%;
+  text-align: center;
+  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7),
+              0 0 0 1px rgba(230, 57, 70, 0.1);
+  animation: cvus-ag-slide-up 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+@keyframes cvus-ag-slide-up {
+  from { opacity: 0; transform: translateY(32px) scale(0.96); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* Brand */
+.cvus-ag__brand {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 1.8rem;
+}
+
+.cvus-ag__logo {
+  font-family: 'Barlow Condensed', sans-serif;
+  font-size: 1.6rem;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #f4f4f5;
+}
+
+.cvus-ag__tagline {
+  font-family: 'Inter', sans-serif;
+  font-size: 0.68rem;
+  font-weight: 500;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: #e63946;
+}
+
+/* Icon */
+.cvus-ag__icon {
+  width: 64px;
+  height: 64px;
+  background: rgba(230, 57, 70, 0.08);
+  border: 1px solid rgba(230, 57, 70, 0.2);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 1.5rem;
+  color: #e63946;
+}
+
+/* Heading */
+.cvus-ag__heading {
+  font-family: 'Barlow Condensed', sans-serif !important;
+  font-size: 1.8rem !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.04em !important;
+  text-transform: uppercase !important;
+  color: #f4f4f5 !important;
+  margin: 0 0 0.8rem !important;
+}
+
+/* Description */
+.cvus-ag__description {
+  font-family: 'Inter', sans-serif;
+  font-size: 0.88rem;
+  line-height: 1.65;
+  color: #a1a1aa;
+  margin: 0 0 2rem;
+}
+
+.cvus-ag__description strong { color: #f4f4f5; font-weight: 600; }
+
+/* Form */
+.cvus-ag__form { display: flex; flex-direction: column; gap: 1rem; }
+
+.cvus-ag__dob-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1.4fr;
+  gap: 0.75rem;
+}
+
+.cvus-ag__field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  text-align: left;
+}
+
+.cvus-ag__field label {
+  font-family: 'Inter', sans-serif !important;
+  font-size: 0.68rem !important;
+  font-weight: 600 !important;
+  letter-spacing: 0.1em !important;
+  text-transform: uppercase !important;
+  color: #a1a1aa !important;
+}
+
+.cvus-ag__field select,
+.cvus-ag__field input {
+  background: #18181f !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  border-radius: 8px !important;
+  color: #f4f4f5 !important;
+  font-family: 'Inter', sans-serif !important;
+  font-size: 0.95rem !important;
+  padding: 11px 12px !important;
+  width: 100%;
+  transition: border-color 0.2s, box-shadow 0.2s !important;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.cvus-ag__field select {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a1a1aa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
+  background-repeat: no-repeat !important;
+  background-position: right 12px center !important;
+  padding-right: 32px !important;
+}
+
+.cvus-ag__field select:focus,
+.cvus-ag__field input:focus {
+  border-color: #e63946 !important;
+  outline: none !important;
+  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.12) !important;
+}
+
+/* Error */
+.cvus-ag__error {
+  background: rgba(230, 57, 70, 0.1);
+  border: 1px solid rgba(230, 57, 70, 0.3);
+  border-radius: 8px;
+  color: #fca5a5;
+  font-family: 'Inter', sans-serif;
+  font-size: 0.82rem;
+  padding: 10px 14px;
+  text-align: left;
+  margin: 0;
+}
+
+/* Remember checkbox */
+.cvus-ag__remember {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.cvus-ag__remember input[type="checkbox"] {
+  width: 16px !important;
+  height: 16px !important;
+  min-width: 16px;
+  padding: 0 !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  border-radius: 4px !important;
+  background: #18181f !important;
+  accent-color: #e63946;
+  cursor: pointer;
+}
+
+.cvus-ag__remember span {
+  font-family: 'Inter', sans-serif;
+  font-size: 0.8rem;
+  color: #a1a1aa;
+}
+
+/* Submit button */
+.cvus-ag__submit {
+  width: 100% !important;
+  padding: 15px !important;
+  font-size: 0.85rem !important;
+  letter-spacing: 0.12em !important;
+  margin-top: 0.5rem;
+}
+
+/* Decline link */
+.cvus-ag__decline {
+  display: block;
+  font-family: 'Inter', sans-serif;
+  font-size: 0.78rem;
+  color: #52525b !important;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  transition: color 0.2s;
+  padding: 4px 0;
+}
+
+.cvus-ag__decline:hover { color: #a1a1aa !important; }
+
+/* Legal */
+.cvus-ag__legal {
+  font-family: 'Inter', sans-serif;
+  font-size: 0.72rem;
+  color: #3f3f46;
+  line-height: 1.6;
+  margin: 1.2rem 0 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  padding-top: 1.2rem;
+}
+
+.cvus-ag__legal a {
+  color: #52525b !important;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.cvus-ag__legal a:hover { color: #e63946 !important; }
+
+/* Mobile */
+@media (max-width: 480px) {
+  .cvus-ag__modal {
+    padding: 2.2rem 1.5rem;
+    border-radius: 16px;
+  }
+
+  .cvus-ag__dob-row {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .cvus-ag__field:last-child {
+    grid-column: 1 / -1;
+  }
+}