/* [project]/apps/web/app/contact/styles.css [app-client] (css) */
.cf-console {
  --cf-accent: var(--magenta);
  border: 1px solid var(--hairline-strong);
  background: #06030f;
  border-radius: 6px;
  animation: 1.4s cubic-bezier(.16, 1, .3, 1) .25s both idx-rise;
  overflow: hidden;
  box-shadow: 0 30px 70px #00000080;
}

.cf-bar {
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  background: #8b5cf60f;
  align-items: center;
  gap: .7rem;
  padding: .55rem .95rem;
  font-size: .72rem;
  display: flex;
}

.cf-dot {
  background: var(--cf-accent);
  width: 8px;
  height: 8px;
  box-shadow: 0 0 8px var(--cf-accent);
  border-radius: 50%;
  transition: background .3s, box-shadow .3s;
}

.cf-bar-title {
  color: var(--pale-lavender);
  font-weight: 500;
}

.cf-bar-status {
  color: var(--cf-accent);
  letter-spacing: .14em;
  margin-left: auto;
  font-size: .66rem;
}

.cf-form {
  flex-direction: column;
  gap: .85rem;
  padding: 1.15rem 1.15rem 1.3rem;
  display: flex;
}

.cf-field {
  flex-direction: column;
  gap: .35rem;
  display: flex;
}

.cf-label {
  font-family: var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--subtle);
  font-size: .64rem;
}

.cf-field input, .cf-field select, .cf-field textarea {
  width: 100%;
  font-family: var(--font-mono);
  color: var(--pale-lavender);
  border: 1px solid var(--hairline-strong);
  background: #8b5cf60d;
  border-radius: 3px;
  padding: .55rem .7rem;
  font-size: .85rem;
  transition: border-color .2s, background .2s, box-shadow .2s;
}

.cf-field textarea {
  resize: vertical;
  min-height: 5.5rem;
  line-height: 1.5;
}

.cf-field input::-moz-placeholder {
  color: var(--subtle);
}

.cf-field textarea::-moz-placeholder {
  color: var(--subtle);
}

.cf-field input::placeholder, .cf-field textarea::placeholder {
  color: var(--subtle);
}

.cf-field select {
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--lavender) 50%),
    linear-gradient(135deg, var(--lavender) 50%, transparent 50%);
  background-position: calc(100% - 18px) 1.05rem, calc(100% - 13px) 1.05rem;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}

.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus {
  border-color: var(--cf-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-accent) 14%, transparent);
  background: #8b5cf617;
  outline: none;
}

.cf-submit {
  width: 100%;
  font-family: var(--font-mono);
  letter-spacing: .02em;
  color: var(--cosmic-void);
  background: var(--magenta);
  border: 1px solid var(--magenta);
  cursor: pointer;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  margin-top: .2rem;
  padding: .7rem 1rem;
  font-size: .82rem;
  transition: background .2s, transform .2s, box-shadow .2s;
  display: inline-flex;
}

.cf-submit:hover:not(:disabled) {
  background: var(--magenta-deep);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--magenta) 30%, transparent);
}

.cf-submit:disabled {
  opacity: .7;
  cursor: progress;
}

.cf-foot {
  font-family: var(--font-mono);
  color: var(--subtle);
  text-align: center;
  margin: 0;
  font-size: .66rem;
}

.cf-sent {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 2.6rem 1.6rem 2.8rem;
  display: flex;
}

.cf-sent-mark {
  border: 1px solid color-mix(in srgb, var(--emerald) 50%, transparent);
  width: 46px;
  height: 46px;
  color: var(--emerald);
  box-shadow: 0 0 22px color-mix(in srgb, var(--emerald) 30%, transparent);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  margin-bottom: .35rem;
  font-size: 1.3rem;
  display: inline-flex;
}

.cf-sent-head {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--pale-lavender);
  margin: 0;
  font-size: 1.5rem;
  font-style: italic;
}

.cf-sent-sub {
  max-width: 30ch;
  color: var(--lavender);
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
}

.cf-reset {
  font-family: var(--font-mono);
  color: var(--lavender);
  border: 1px solid var(--hairline-strong);
  cursor: pointer;
  background: none;
  border-radius: 3px;
  margin-top: .6rem;
  padding: .4rem .85rem;
  font-size: .72rem;
  transition: color .2s, border-color .2s;
}

.cf-reset:hover {
  color: var(--pale-lavender);
  border-color: var(--cf-accent);
}

.cf-channel .cf-chan-email {
  font-family: var(--font-mono);
  color: var(--cyan);
  border-bottom: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent);
  margin-top: .7rem;
  font-size: .82rem;
  text-decoration: none;
  transition: color .2s, border-color .2s;
  display: inline-block;
}

.cf-channel .cf-chan-email:hover {
  color: var(--pale-lavender);
  border-color: var(--pale-lavender);
}

.cf-chan-tag {
  font-family: var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--subtle);
  margin-bottom: .55rem;
  font-size: .6rem;
  display: inline-block;
}

.cf-locations {
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin-top: 1.5rem;
  display: grid;
}

.cf-loc {
  border: 1px solid var(--hairline);
  background: #8b5cf608;
  border-radius: 5px;
  padding: 1.25rem 1.3rem;
}

.cf-loc h4 {
  font-family: var(--font-display);
  color: var(--pale-lavender);
  margin: 0 0 .5rem;
  font-size: 1.2rem;
}

.cf-loc p {
  color: var(--lavender);
  margin: 0 0 .3rem;
  font-size: .92rem;
  line-height: 1.5;
}

.cf-loc-tz {
  font-family: var(--font-mono);
  color: var(--cyan);
  letter-spacing: .04em;
  font-size: .74rem;
}

@media (max-width: 720px) {
  .cf-locations {
    grid-template-columns: 1fr;
  }
}

/*# sourceMappingURL=apps_web_app_contact_styles_0j~0hsr.css.map*/