decision/web/src/routes/+page.svelte

<script lang="ts">
  // The welcome (Yvv, 2026-11-02): the keystone arch, large enough to shelter the three points of
  // the leitmotiv, the toolbox first; then the title, centred, broken after « possible ».
  import sign from '$lib/assets/cle-de-voute.svg?raw';
  import GroupChoice from '$lib/components/GroupChoice.svelte';
  import { t } from '$lib/i18n/index.svelte';
  import { session } from '$lib/session.svelte';

  const LEITMOTIV = ['home.leitmotiv.tools', 'home.leitmotiv.context', 'home.leitmotiv.process'] as const;
</script>

<div class="home">
  <header class="intro">
    <div class="vault">
      <span class="sign" aria-hidden="true">{@html sign}</span>
      <ul class="leitmotiv">
        {#each LEITMOTIV as key, i (key)}
          <li style:--i={i}>{t(key)}</li>
        {/each}
      </ul>
    </div>
    <h1>
      <span class="line">{t('home.title.line1')}</span>
      <span class="line">{t('home.title.line2')}</span>
    </h1>
  </header>

  {#if session.me}
    <GroupChoice />
  {:else}
    <div class="enter">
      <a class="btn primary" href="/connexion">{t('home.signin')}</a>
      <p class="faint">{t('home.signin.note')}</p>
    </div>
  {/if}
</div>

<style>
  .home {
    max-width: 44rem;
    margin: 0 auto;
    padding: clamp(2rem, 7vh, 4.5rem) clamp(1.2rem, 5vw, 3.5rem) 5rem;
    display: grid;
    gap: clamp(2.4rem, 6vh, 3.6rem);
  }

  /* The arch, drawn by the sign of the logo (stones in the ink of the mood, the keystone in
     `--cle`), never tilted. Its box is the stone itself: 92 units wide (the base slab, x from
     −46 to 46) and 59 high (y from −40, the top of the keystone, to 19, under the slab); the SVG's
     own 3-unit margin spills out above and below (clipped on the sides, where it is empty). On a
     phone the arch reaches into the side padding, 0.75rem short of the screen's edges, so that the
     opening keeps as much room as it can. */
  .vault {
    --w: min(34rem, 100vw - 1.5rem);
    container-type: inline-size;
    position: relative;
    width: var(--w);
    margin-inline: calc(50% - var(--w) / 2);
    aspect-ratio: 92 / 59;
    overflow-x: clip;
    color: var(--ink);
  }
  .sign {
    position: absolute;
    inset: calc(-300% / 59) calc(-300% / 92);
  }
  .sign :global(svg) {
    display: block;
    width: 100%;
    height: 100%;
  }
  /* The light under the vault: the opening (x from −18.5 to 18.5, from the keystone down to the
     slab), its top a half circle, washed with the keystone's colour. */
  .vault::before {
    content: '';
    position: absolute;
    inset: calc(2150% / 59) calc(2750% / 92) calc(340% / 59);
    border-radius: 50% 50% 0 0 / 54.25% 54.25% 0 0;
    background: radial-gradient(
      ellipse 75% 62% at 50% 60%,
      color-mix(in srgb, var(--cle) 12%, transparent),
      transparent
    );
  }

  /* The three points, sheltered: centred in the opening (x from −19 to 19; a band from y = −19,
     under the keystone, to 19, centred on the springing line y = 0), one line each. The type
     follows the arch (cqi): the longest line of the three languages, 10.5 em (es), holds in the
     38 units of the opening with room to spare. On a phone the italic is small (12px at 360):
     its advances are kept exact, not rounded to the pixel, or the letters drift apart
     (« pr ocessus ») and the word spaces close up. */
  .leitmotiv {
    position: absolute;
    inset: calc(2100% / 59) calc(2700% / 92) 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.2em;
    font-family: var(--font-text);
    font-style: italic;
    font-size: 3.55cqi;
    line-height: 1.3;
    color: var(--ink-soft);
    white-space: nowrap;
    text-align: center;
    text-rendering: geometricPrecision;
  }

  .intro h1 {
    margin-top: clamp(1.4rem, 4vh, 2.4rem);
    font-family: var(--font-text);
    font-weight: 500;
    font-size: min(3.3rem, 8.6vw);
    letter-spacing: -0.015em;
    line-height: 1.1;
    font-variation-settings: 'opsz' 72;
    text-align: center;
  }
  .line {
    display: block;
    text-wrap: balance;
  }

  .enter {
    display: grid;
    justify-items: center;
    gap: 0.8rem;
    text-align: center;
  }
  .enter .btn {
    min-height: 2.75rem;
    padding-inline: 1.4rem;
  }
  .enter p {
    font-size: 0.9rem;
    max-width: 34ch;
  }

  /* The keystone sets the arch, then the three points come under it. */
  @media (prefers-reduced-motion: no-preference) {
    .sign :global(path[fill^='var(--cle']) {
      transform-box: fill-box;
      animation: settle 0.7s var(--ease) 0.1s backwards;
    }
    .leitmotiv li {
      animation: appear 0.6s var(--ease) backwards;
      animation-delay: calc(0.55s + var(--i) * 0.12s);
    }
  }
  @keyframes settle {
    from {
      transform: translateY(-40%);
      opacity: 0;
    }
  }
  @keyframes appear {
    from {
      transform: translateY(0.4em);
      opacity: 0;
    }
  }
</style>