@striae-org/striae 3.0.4

package/app/routes/auth/login.module.css

@@ -0,0 +1,523 @@
+.container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  padding: var(--spaceL);
+  z-index: var(--zIndex0);
+}
+
+.logo {
+  position: fixed;
+  top: var(--spaceL);
+  left: var(--spaceL);
+  width: 150px;
+  height: 150px;
+  background-image: url("/logo-dark.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  z-index: var(--zIndex2);
+  transition: transform var(--durationM) var(--bezierFastoutSlowin);
+}
+
+.logo:hover {
+  transform: scale(1.05);
+}
+
+.formWrapper {
+  background-color: color-mix(in lab, var(--backgroundLight) 95%, transparent);
+  padding: var(--space2XL);
+  border-radius: var(--spaceXS);
+  box-shadow: 0 var(--spaceXS) var(--spaceM)
+    color-mix(in lab, var(--black) 10%, transparent);
+  width: 100%;
+  max-width: var(--maxWidthS);
+}
+
+.title {
+  text-align: center;
+  color: var(--textTitle);
+  margin-bottom: var(--spaceXL);
+  font-size: var(--fontSizeH4);
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceM);
+}
+
+.input {
+  padding: var(--spaceM);
+  border: 1.5px solid color-mix(in lab, var(--text) 20%, transparent);
+  border-radius: var(--spaceXS);
+  font-size: var(--fontSizeBodyM);
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.input:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px color-mix(in lab, var(--primary) 25%, transparent);
+}
+
+.input:disabled {
+  background-color: color-mix(in lab, var(--background) 95%, transparent);
+  cursor: not-allowed;
+}
+
+.passwordField {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.passwordField .input {
+  padding-right: var(--space2XL);
+  width: 100%;
+}
+
+.passwordToggle {
+  position: absolute;
+  right: var(--spaceM);
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  padding: var(--spaceXS);
+  border-radius: var(--spaceXS);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color var(--durationS) var(--bezierFastoutSlowin);
+  z-index: 1;
+  height: auto;
+  min-width: 24px;
+}
+
+.passwordToggle:hover {
+  background-color: color-mix(in lab, var(--text) 10%, transparent);
+}
+
+.passwordToggle:focus {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+.button {
+  padding: var(--spaceM) var(--spaceL);
+  border-radius: var(--spaceXS);
+  font-size: var(--fontSizeBodyS);
+  cursor: pointer;
+  background-color: var(--primary);
+  color: var(--white);
+  border: none;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.button:hover:not(:disabled) {
+  background-color: color-mix(in lab, var(--primary) 85%, var(--black));
+}
+
+.button:disabled {
+  background-color: color-mix(in lab, var(--background) 95%, transparent);
+  color: var(--textLight);
+  cursor: not-allowed;
+}
+
+.error {
+  color: color-mix(in lab, var(--error) 90%, var(--black));
+  text-align: left;
+  margin: var(--spaceXS) 0 var(--spaceS) 0;
+  font-size: var(--fontSizeBodyXS);
+  padding: var(--spaceS) var(--spaceM);
+  background: linear-gradient(
+    135deg,
+    color-mix(in lab, var(--error) 12%, transparent),
+    color-mix(in lab, var(--error) 8%, transparent)
+  );
+  border-radius: var(--spaceXS);
+  border: 1px solid color-mix(in lab, var(--error) 30%, transparent);
+  border-left: 3px solid var(--error);
+  animation: slideInError var(--durationS) var(--bezierFastoutSlowin);
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 2px 8px color-mix(in lab, var(--text) 8%, transparent);
+}
+
+.error::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--error);
+  animation: errorPulse 1.5s ease-in-out infinite;
+}
+
+.success {
+  color: color-mix(in lab, var(--success) 90%, var(--black));
+  text-align: left;
+  margin: var(--spaceXS) 0 var(--spaceS) 0;
+  font-size: var(--fontSizeBodyXS);
+  padding: var(--spaceS) var(--spaceM);
+  background: linear-gradient(
+    135deg,
+    color-mix(in lab, var(--success) 12%, transparent),
+    color-mix(in lab, var(--success) 8%, transparent)
+  );
+  border-radius: var(--spaceXS);
+  border: 1px solid color-mix(in lab, var(--success) 30%, transparent);
+  border-left: 3px solid var(--success);
+  animation: slideInSuccess var(--durationS) var(--bezierFastoutSlowin);
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 2px 8px color-mix(in lab, var(--text) 8%, transparent);
+}
+
+.success::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--success);
+  animation: successPulse 1.5s ease-in-out infinite;
+}
+
+.hint {
+  color: var(--textLight);
+  text-align: center;
+  margin: calc(var(--spaceS) * -0.5) 0 var(--spaceS) 0;
+  font-size: var(--fontSizeBodyXS);
+  line-height: 1.4;
+}
+
+.toggle {
+  text-align: center;
+  margin-top: var(--spaceL);
+  color: var(--textLight);
+}
+
+.toggleButton {
+  background: none;
+  border: none;
+  color: var(--primary);
+  cursor: pointer;
+  font-size: inherit;
+  padding: 0;
+  text-decoration: underline;
+  transition: color var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.toggleButton:hover:not(:disabled) {
+  color: color-mix(in lab, var(--primary) 85%, var(--black));
+}
+
+.toggleButton:disabled {
+  color: var(--textLight);
+  cursor: not-allowed;
+}
+
+.resetLink {
+  background: none;
+  border: none;
+  color: var(--primary);
+  cursor: pointer;
+  font-size: inherit;
+  padding: 0;
+  text-decoration: underline;
+  transition: color var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.resetLink:hover {
+  color: color-mix(in lab, var(--primary) 85%, var(--black));
+}
+
+.passwordStrength {
+  font-size: var(--fontSizeBodyXS);
+  color: var(--textLight);
+  margin-top: var(--spaceS);
+  white-space: pre-line;
+}
+
+.caseReviewToggleSection {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spaceM);
+  background: var(--backgroundLight);
+  border-radius: var(--spaceXS);
+  border: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+  margin: var(--spaceM) 0;
+}
+
+.caseReviewLabel {
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  color: var(--textTitle);
+  margin: 0;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-color: color-mix(in lab, var(--primary) 50%, transparent);
+  transition: color var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.caseReviewLabel:hover {
+  color: var(--primary);
+  text-decoration-color: var(--primary);
+}
+
+.caseReviewToggle {
+  display: flex;
+  background: color-mix(in lab, var(--primary) 10%, transparent);
+  border: 1px solid color-mix(in lab, var(--primary) 20%, transparent);
+  border-radius: var(--spaceXS);
+  overflow: hidden;
+  box-shadow: 0 1px 3px color-mix(in lab, var(--primary) 15%, transparent);
+}
+
+.caseReviewOption {
+  background: transparent;
+  border: none;
+  padding: var(--spaceS) var(--spaceM);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  color: var(--primary);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  position: relative;
+  min-width: 50px;
+}
+
+.caseReviewOption:hover:not(:disabled) {
+  background: color-mix(in lab, var(--primary) 15%, transparent);
+  color: var(--primary);
+}
+
+.caseReviewOption:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.caseReviewOptionActive {
+  background: var(--primary) !important;
+  color: white !important;
+  box-shadow: 0 1px 3px color-mix(in lab, var(--primary) 30%, transparent);
+}
+
+.caseReviewOptionActive:hover:not(:disabled) {
+  background: color-mix(in lab, var(--primary) 85%, var(--black)) !important;
+}
+
+/* Animations */
+@keyframes slideInError {
+  from {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--spaceM))) scaleY(0.8);
+    max-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+    max-height: 200px;
+    padding-top: var(--spaceS);
+    padding-bottom: var(--spaceS);
+    margin-top: var(--spaceXS);
+    margin-bottom: var(--spaceS);
+  }
+}
+
+@keyframes errorPulse {
+  0%,
+  100% {
+    opacity: 1;
+    box-shadow: 0 0 0 0 color-mix(in lab, var(--error) 40%, transparent);
+  }
+  50% {
+    opacity: 0.7;
+    box-shadow: 0 0 0 4px color-mix(in lab, var(--error) 20%, transparent);
+  }
+}
+
+@keyframes slideInSuccess {
+  from {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--spaceM))) scaleY(0.8);
+    max-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+    max-height: 200px;
+    padding-top: var(--spaceS);
+    padding-bottom: var(--spaceS);
+    margin-top: var(--spaceXS);
+    margin-bottom: var(--spaceS);
+  }
+}
+
+@keyframes successPulse {
+  0%,
+  100% {
+    opacity: 1;
+    box-shadow: 0 0 0 0 color-mix(in lab, var(--success) 40%, transparent);
+  }
+  50% {
+    opacity: 0.7;
+    box-shadow: 0 0 0 4px color-mix(in lab, var(--success) 20%, transparent);
+  }
+}
+
+/* Reduce motion for accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .error,
+  .success {
+    animation: none;
+  }
+
+  .error::before,
+  .success::before {
+    animation: none;
+  }
+}
+
+/* Email Verification Description */
+.verificationDescription {
+  font-size: var(--fontSizeBodyM);
+  color: var(--textBody);
+  text-align: center;
+  margin-bottom: var(--spaceL);
+  line-height: var(--lineHeightBody);
+}
+
+.verificationActions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceM);
+  width: 100%;
+  margin-bottom: var(--spaceL);
+}
+
+.secondaryButton {
+  background: transparent;
+  border: 1px solid var(--primary);
+  color: var(--primary);
+  padding: var(--spaceM) var(--spaceL);
+  border-radius: var(--spaceXS);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.secondaryButton:hover:not(:disabled) {
+  background: color-mix(in lab, var(--primary) 10%, transparent);
+}
+
+.secondaryButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.secondaryButtonLink {
+  display: inline-block;
+  background: transparent;
+  border: 1px solid var(--primary);
+  color: var(--primary);
+  padding: var(--spaceM) var(--spaceL);
+  border-radius: var(--spaceXS);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  text-decoration: none;
+  text-align: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.secondaryButtonLink:hover {
+  background: color-mix(in lab, var(--primary) 10%, transparent);
+  text-decoration: none;
+  color: var(--primary);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 6px color-mix(in lab, currentColor 20%, transparent);
+}
+
+.verificationHints {
+  text-align: left;
+  background: color-mix(in lab, var(--backgroundLight) 50%, transparent);
+  padding: var(--spaceL);
+  border-radius: var(--spaceXS);
+  border: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+}
+
+.loginToStriaeButton {
+  width: 100%;
+  padding: var(--spaceL);
+  background-color: #1e7e34;
+  color: var(--white);
+  border: none;
+  border-radius: var(--spaceXS);
+  font-weight: var(--fontWeightMedium);
+  font-size: var(--fontSizeBodyM);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  box-sizing: border-box;
+}
+
+.loginToStriaeButton:hover:not(:disabled) {
+  background-color: #155724;
+}
+
+.loginToStriaeButton:disabled {
+  background-color: color-mix(in lab, var(--background) 95%, transparent);
+  color: var(--textLight);
+  cursor: not-allowed;
+}
+
+.verificationHints .hint {
+  font-size: var(--fontSizeBodyS);
+  color: var(--textTitle);
+  margin: 0 0 var(--spaceS) 0;
+  font-weight: var(--fontWeightMedium);
+}
+
+.hintList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.hintList li {
+  font-size: var(--fontSizeBodyXS);
+  color: var(--textBody);
+  margin-bottom: var(--spaceXS);
+  padding-left: var(--spaceM);
+  position: relative;
+}
+
+.hintList li::before {
+  content: "•";
+  color: var(--primary);
+  position: absolute;
+  left: 0;
+  font-weight: bold;
+}