@import url("./tokens.css");
@import url("./base.css");
@import url("./questionnaire.css");
@import url("./responsive.css");

/* The registration page reuses the original site's visual identity without altering the landing page. */
:root {
  --accent-strong: #d95d4e;
  --blush-soft: #f4ebe6;
}

.bg-noise {
  position: fixed;
  z-index: 50;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.questionnaire-topbar {
  position: relative;
  z-index: 60;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
}

.original-brand {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.brand-heart {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: white;
}

.close-questionnaire {
  position: relative;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.questionnaire-sidebar {
  background: var(--blush-soft);
}

.questionnaire-panel,
.form-actions {
  background-color: rgba(255, 255, 255, 0.96);
}

.question-block {
  background: #fffefc;
}

@media (max-width: 760px) {
  .questionnaire-topbar .original-brand > span:last-child {
    display: none;
  }
}