:root {
  --bg: #2c2537;
  --text: #fff;
  --accent: gold;
}
body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
  font-family: Roboto, sans-serif;
}

.widget-text {
  --pad: .75rem;
  position: relative;
}
input {
  padding: var(--pad);
  border-radius: 8px;
  background-color: var(--bg);
  border: 1px solid #eee;
  color: inherit;
  width: 300px;
  outline: none;
}
label {
  position: absolute;
  left: var(--pad);
  top: var(--pad);
  background: var(--bg);
  padding-inline: .3em;
  transition: transform 200ms;
  pointer-events: none;
  transform-origin: left;
  translate: -.3em;
}

input::placeholder {
  opacity: 0;
}
input:focus + label,
input:not(:placeholder-shown) + label {
  transform: translateY(calc(50% + var(--pad))) scale(.8);
  color: var(--accent);
}

input:focus {
  border: 1px solid var(--accent);
}