Attainly/frontend/website/src/components/AuthLayout.vue

<script setup lang="ts">
import BrandWordmark from '@/components/BrandWordmark.vue'

defineProps<{
  eyebrow: string
  title: string
  description: string
}>()
</script>

<template>
  <main class="auth-page">
    <section class="story-panel" aria-label="About Attainly">
      <div class="story-panel__glow story-panel__glow--top" aria-hidden="true"></div>
      <div class="story-panel__glow story-panel__glow--bottom" aria-hidden="true"></div>

      <div class="story-panel__content">
        <BrandWordmark class="story-panel__wordmark" theme="light" />

        <div class="story-copy">
          <p class="story-copy__eyebrow">Progress with purpose</p>
          <h2>Big goals,<br />made doable.</h2>
          <p>Turn what matters into clear, daily progress, one focused step at a time.</p>
        </div>

        <div class="progress-card" aria-hidden="true">
          <div class="progress-card__header">
            <span>Today&apos;s focus</span>
            <span class="progress-card__date">Day 12</span>
          </div>
          <div class="progress-card__track">
            <span class="progress-card__line"></span>
            <div class="progress-step progress-step--complete">
              <span class="progress-step__marker">✓</span>
              <span>
                <small>Step 01</small>
                Plan the path
              </span>
            </div>
            <div class="progress-step progress-step--current">
              <span class="progress-step__marker"></span>
              <span>
                <small>Step 02</small>
                Take the next step
              </span>
            </div>
            <div class="progress-step">
              <span class="progress-step__marker"></span>
              <span>
                <small>Step 03</small>
                See how far you&apos;ve come
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="form-panel">
      <div class="auth-card">
        <header class="auth-card__header">
          <p class="auth-card__eyebrow">{{ eyebrow }}</p>
          <h1>{{ title }}</h1>
          <p>{{ description }}</p>
        </header>

        <slot></slot>

        <footer class="auth-card__footer">
          <slot name="footer"></slot>
        </footer>
      </div>

      <p class="form-panel__note">A calmer way to keep moving forward.</p>
    </section>
  </main>
</template>

<style scoped>
.auth-page {
  display: grid;
  grid-template-columns: minmax(25rem, 0.92fr) minmax(32rem, 1.08fr);
  min-height: 100vh;
  min-height: 100svh;
}

.story-panel {
  position: relative;
  display: flex;
  min-height: 100%;
  overflow: hidden;
  color: #f8f5eb;
  background: #183a31;
}

.story-panel::after {
  position: absolute;
  right: -5rem;
  bottom: -7rem;
  width: 20rem;
  height: 20rem;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 50%;
  content: '';
}

.story-panel__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}

.story-panel__glow--top {
  top: -10rem;
  right: -8rem;
  width: 25rem;
  height: 25rem;
  background: rgb(205 222 121 / 10%);
}

.story-panel__glow--bottom {
  bottom: -14rem;
  left: -12rem;
  width: 30rem;
  height: 30rem;
  background: rgb(211 142 101 / 13%);
}

.story-panel__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  width: min(100%, 40rem);
  min-height: 100%;
  margin: 0 auto;
  padding: clamp(2.25rem, 5vw, 4.5rem);
}

.story-panel__wordmark {
  align-self: flex-start;
}

.story-copy {
  margin: auto 0 clamp(3rem, 8vh, 6.5rem);
}

.story-copy__eyebrow,
.auth-card__eyebrow {
  margin: 0 0 1rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.story-copy__eyebrow {
  color: #d7e788;
}

.story-copy h2 {
  max-width: 9ch;
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(3.25rem, 6.3vw, 5.75rem);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.story-copy > p:last-child {
  max-width: 29rem;
  margin: 1.75rem 0 0;
  color: rgb(248 245 235 / 72%);
  font-size: 1.02rem;
  line-height: 1.75;
}

.progress-card {
  width: min(100%, 27rem);
  padding: 1.4rem;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 1.4rem;
  background: rgb(255 255 255 / 7%);
  box-shadow: 0 1.5rem 4rem rgb(3 19 14 / 20%);
  backdrop-filter: blur(0.75rem);
}

.progress-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  font-size: 0.8rem;
  font-weight: 750;
}

.progress-card__date {
  padding: 0.35rem 0.6rem;
  border-radius: 2rem;
  color: #d7e788;
  background: rgb(215 231 136 / 12%);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.progress-card__track {
  position: relative;
  display: grid;
  gap: 1rem;
}

.progress-card__line {
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 0.82rem;
  width: 1px;
  background: rgb(255 255 255 / 13%);
}

.progress-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: rgb(248 245 235 / 45%);
  font-size: 0.78rem;
  font-weight: 650;
}

.progress-step small {
  display: block;
  margin-bottom: 0.15rem;
  color: rgb(248 245 235 / 28%);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.progress-step__marker {
  z-index: 1;
  display: grid;
  flex: 0 0 auto;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 50%;
  background: #24483e;
  font-size: 0.7rem;
}

.progress-step--complete {
  color: rgb(248 245 235 / 65%);
}

.progress-step--complete .progress-step__marker {
  border-color: #d7e788;
  color: #183a31;
  background: #d7e788;
}

.progress-step--current {
  color: #fffdf6;
}

.progress-step--current .progress-step__marker {
  border: 0.35rem solid #fffdf6;
  outline: 2px solid #d7e788;
  outline-offset: 0.15rem;
  background: #d7e788;
}

.form-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 5.5rem);
  background:
    radial-gradient(circle at 90% 10%, rgb(215 231 136 / 20%), transparent 22rem), #f3f1eb;
}

.auth-card {
  width: min(100%, 31rem);
  padding: clamp(2rem, 4.5vw, 3.75rem);
  border: 1px solid rgb(27 41 36 / 8%);
  border-radius: 1.75rem;
  background: rgb(255 254 250 / 92%);
  box-shadow: 0 1.5rem 4rem rgb(40 54 47 / 10%);
}

.auth-card__header {
  margin-bottom: 2rem;
}

.auth-card__eyebrow {
  color: #9b5f40;
}

.auth-card__header h1 {
  margin: 0;
  color: #183029;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.35rem, 4vw, 3.15rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.auth-card__header > p:last-child {
  margin: 1rem 0 0;
  color: #67736e;
  font-size: 0.95rem;
  line-height: 1.65;
}

.auth-card__footer {
  margin-top: 1.75rem;
  color: #68736f;
  font-size: 0.88rem;
  text-align: center;
}

.auth-card__footer :deep(a) {
  color: #285c4e;
  font-weight: 750;
  text-underline-offset: 0.2rem;
}

.auth-card__footer :deep(a:hover) {
  color: #173a30;
}

.auth-card__footer :deep(a:focus-visible) {
  border-radius: 0.2rem;
  outline: 3px solid rgb(90 136 120 / 35%);
  outline-offset: 0.2rem;
}

.form-panel__note {
  margin: 1.5rem 0 0;
  color: #89918e;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

@media (max-width: 56rem) {
  .auth-page {
    grid-template-columns: 1fr;
  }

  .story-panel {
    min-height: auto;
  }

  .story-panel__content {
    min-height: auto;
    padding: 2rem clamp(1.5rem, 6vw, 4rem) 2.5rem;
  }

  .story-copy {
    margin: 3.75rem 0 0;
  }

  .story-copy h2 {
    max-width: none;
    font-size: clamp(2.8rem, 10vw, 4.5rem);
  }

  .story-copy h2 br {
    display: none;
  }

  .story-copy > p:last-child {
    max-width: 36rem;
    margin-top: 1.15rem;
  }

  .progress-card {
    display: none;
  }

  .form-panel {
    padding: clamp(2rem, 8vw, 4rem) clamp(1.25rem, 6vw, 4rem);
  }
}

@media (max-width: 35rem) {
  .story-panel__content {
    padding: 1.5rem 1.25rem 2rem;
  }

  .story-copy {
    margin-top: 2.75rem;
  }

  .story-copy > p:last-child {
    font-size: 0.92rem;
    line-height: 1.6;
  }

  .form-panel {
    justify-content: flex-start;
    padding: 0;
    background: #fffefa;
  }

  .auth-card {
    width: 100%;
    padding: 2.5rem 1.25rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .form-panel__note {
    display: none;
  }
}
</style>