diff --git a/web/src/lib/i18n/en.ts b/web/src/lib/i18n/en.ts index 53f7543..50e861e 100644 --- a/web/src/lib/i18n/en.ts +++ b/web/src/lib/i18n/en.ts @@ -30,7 +30,8 @@ export const en: Messages = { 'nav.menu': 'Menu', 'nav.close': 'Close', - 'home.title': 'Making collective decisions possible', + 'home.title.line1': 'Making it possible', + 'home.title.line2': 'to decide together', 'home.leitmotiv.context': 'context and framing', 'home.leitmotiv.process': 'processes and methods', 'home.leitmotiv.tools': 'a toolbox', diff --git a/web/src/lib/i18n/es.ts b/web/src/lib/i18n/es.ts index b5a606f..144df45 100644 --- a/web/src/lib/i18n/es.ts +++ b/web/src/lib/i18n/es.ts @@ -30,7 +30,8 @@ export const es: Messages = { 'nav.menu': 'Menú', 'nav.close': 'Cerrar', - 'home.title': 'Hacer posible la decisión colectiva', + 'home.title.line1': 'Hacer posible', + 'home.title.line2': 'la decisión colectiva', 'home.leitmotiv.context': 'contexto y encuadre', 'home.leitmotiv.process': 'procesos y modalidades', 'home.leitmotiv.tools': 'caja de herramientas', diff --git a/web/src/lib/i18n/fr.ts b/web/src/lib/i18n/fr.ts index ed9159e..2a922d3 100644 --- a/web/src/lib/i18n/fr.ts +++ b/web/src/lib/i18n/fr.ts @@ -33,7 +33,9 @@ export const fr = { 'nav.menu': 'Menu', 'nav.close': 'Fermer', - 'home.title': 'Rendre possible la décision collective', + // The title on two lines, the break after « possible » (Yvv, 2026-11-02): one key per line. + 'home.title.line1': 'Rendre possible', + 'home.title.line2': 'la décision collective', 'home.leitmotiv.context': 'contexte et cadrage', 'home.leitmotiv.process': 'processus et modalités', 'home.leitmotiv.tools': 'boîte à outils', diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte index f25707b..df73a6e 100644 --- a/web/src/routes/+page.svelte +++ b/web/src/routes/+page.svelte @@ -1,17 +1,28 @@
-

{t('home.title')}

- +
+ +
    + {#each LEITMOTIV as key, i (key)} +
  • {t(key)}
    • + {/each} +
+
+

+ {t('home.title.line1')} + {t('home.title.line2')} +

{#if session.me} @@ -28,56 +39,122 @@ .home { max-width: 44rem; margin: 0 auto; - padding: clamp(3rem, 10vh, 6.5rem) clamp(1.2rem, 5vw, 3.5rem) 5rem; + padding: clamp(2rem, 7vh, 4.5rem) clamp(1.2rem, 5vw, 3.5rem) 5rem; display: grid; gap: clamp(2.4rem, 6vh, 3.6rem); } - .intro h1 { - font-family: var(--font-text); - font-weight: 500; - font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); - letter-spacing: -0.015em; - line-height: 1.08; - font-variation-settings: 'opsz' 72; - max-width: 15ch; - text-wrap: balance; + + /* 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 on every side. 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; + color: var(--ink); } - /* The leitmotiv: three lines, each set on a small stone of the keystone's colour. */ + .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 block centred on + y = −1), one line each. The type follows the arch (cqi): the longest line of the three + languages, 10.8 em, holds in the 38 units of the opening with room to spare. */ .leitmotiv { - list-style: none; - margin: 1.4rem 0 0; + position: absolute; + inset-inline: calc(2700% / 92); + top: calc(3900% / 59); + translate: 0 -50%; + margin: 0; padding: 0; + list-style: none; display: grid; - gap: 0.2rem; + justify-items: center; + gap: 0.2em; font-family: var(--font-text); font-style: italic; - font-size: clamp(1.12rem, 1rem + 0.55vw, 1.4rem); - line-height: 1.45; + font-size: 3.55cqi; + line-height: 1.3; color: var(--ink-soft); + white-space: nowrap; + text-align: center; } - .leitmotiv li { - display: flex; - align-items: baseline; - gap: 0.7rem; + + .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; } - .leitmotiv li::before { - content: ''; - flex: none; - width: 0.62em; - height: 0.34em; - border-radius: 0.1em; - background: var(--cle); - opacity: 0.75; - translate: 0 -0.12em; + .line { + display: block; + text-wrap: balance; } + .enter { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 0.6rem 1.2rem; + 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; + } + }