From 49fdb7fae4d5114081c3cf441a41a67ba52abc8a Mon Sep 17 00:00:00 2001 From: sucupira Date: Mon, 6 Jul 2026 20:33:29 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Design:=20Direction=20visuelle?= =?UTF-8?q?=20inspir=C3=A9e=20d'unabyss.com?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Refonte de la direction artistique en gardant Fraunces (serif) comme signature éditoriale, mais en empruntant à unabyss.com : fond de nuit presque neutre ("premium near-black" plutôt que bleu nuit saturé), accent corail/orange brûlé en complément de l'or de Sirius, typographie plus confiante (échelle et tracking resserrés sur les grands titres), rythme d'espacement plus généreux entre sections. Déboîte le contenu purement éditorial (cartes de fonctionnalités, cartes de culture, conseils d'observation) qui n'a plus de bordure/fond — plus fluide, plus proche de la sobriété d'unabyss. Les regroupements réellement fonctionnels (calculateur, équipement, onglets, formules) gardent .card. Ajoute une vitrine de badges (13 villes de la vague planétaire) sur la page d'accueil — écho panafricain à la grille d'intégrations colorée d'unabyss, sans rien copier de son contenu. Les données de villes sont déplacées vers src/_data/waveCities.js (source unique pour les pages 11ty et pour l'îlot SiriusGlobe). Co-Authored-By: Claude Sonnet 5 --- messages/en.json | 4 +++ messages/fr.json | 4 +++ messages/ht.json | 2 ++ src/_data/waveCities.js | 19 +++++++++++++ src/culture-savoirs.njk | 20 ++++++------- src/index.njk | 28 ++++++++++++++++-- src/islands/globe/world.js | 18 +----------- src/observer.njk | 8 +++--- src/sirius-science.njk | 6 ++-- src/styles/app.css | 1 + src/styles/base.css | 5 ++-- src/styles/components/buttons.css | 20 ++++++++++++- src/styles/components/cards.css | 10 +++++-- src/styles/components/hero.css | 4 +-- src/styles/components/wave-badges.css | 32 +++++++++++++++++++++ src/styles/layouts.css | 12 ++++++-- src/styles/tokens.css | 41 ++++++++++++++++----------- 17 files changed, 171 insertions(+), 63 deletions(-) create mode 100644 src/_data/waveCities.js create mode 100644 src/styles/components/wave-badges.css diff --git a/messages/en.json b/messages/en.json index 18dcb59..b942670 100644 --- a/messages/en.json +++ b/messages/en.json @@ -195,6 +195,10 @@ "globe_controls_hint": "Drag to pan · scroll to zoom", "globe_timeline_title": "Timeline of the wave", + "wave_showcase_title": "A wave that crosses the world", + "wave_showcase_subtitle": "The heliacal rising touches thirteen cities across Africa, Europe and the Caribbean between late June and mid-August", + "wave_showcase_cta": "See the full map", + "associations_title": "Associations celebrating Wep Ronpet", "associations_subtitle": "Discover the events and communities celebrating the Kamit New Year", "associations_events_title": "Wep Ronpet events", diff --git a/messages/fr.json b/messages/fr.json index 5aeff66..1f12899 100644 --- a/messages/fr.json +++ b/messages/fr.json @@ -195,6 +195,10 @@ "globe_controls_hint": "Glisser pour déplacer · molette pour zoomer", "globe_timeline_title": "Chronologie de la vague", + "wave_showcase_title": "Une vague qui traverse le monde", + "wave_showcase_subtitle": "Le lever héliaque touche treize villes d'Afrique, d'Europe et des Caraïbes entre fin juin et mi-août", + "wave_showcase_cta": "Voir la carte complète", + "associations_title": "Associations qui fêtent le Wep Ronpet", "associations_subtitle": "Découvrez les événements et communautés qui célèbrent le Nouvel An Kamit", "associations_events_title": "Événements Wep Ronpet", diff --git a/messages/ht.json b/messages/ht.json index bf3edda..bdf5cd7 100644 --- a/messages/ht.json +++ b/messages/ht.json @@ -75,6 +75,8 @@ "observer_tips_title": "Konsèy pratik", "globe_title": "Fenomèn vag la", + "wave_showcase_title": "Yon vag ki travèse mond lan", + "wave_showcase_cta": "Gade kat konplè a", "globe_controls_hint": "Trennen pou deplase · molèt pou zoome", "associations_title": "Asosyasyon ki fete Wep Ronpet", diff --git a/src/_data/waveCities.js b/src/_data/waveCities.js new file mode 100644 index 0000000..f8b19b1 --- /dev/null +++ b/src/_data/waveCities.js @@ -0,0 +1,19 @@ +// Progression du lever héliaque à travers la diaspora africaine et caribéenne +// (fin juin à mi-août), du plus oriental au plus occidental. Source unique, +// consommée à la fois par les pages 11ty (aperçu statique) et par l'îlot +// SiriusGlobe (carte Leaflet interactive) — voir src/islands/globe/world.js. +export default [ + { name: "La Réunion", lat: -21.1151, lon: 55.5364, date: "27 juin" }, + { name: "Kinshasa", lat: -4.4419, lon: 15.2663, date: "16 juillet" }, + { name: "Douala", lat: 4.0511, lon: 9.7679, date: "18 juillet" }, + { name: "Yaoundé", lat: 3.848, lon: 11.5021, date: "19 juillet" }, + { name: "Abidjan", lat: 5.36, lon: -4.0083, date: "20 juillet" }, + { name: "Accra", lat: 5.6037, lon: -0.187, date: "21 juillet" }, + { name: "Guadeloupe", lat: 16.265, lon: -61.551, date: "22 juillet" }, + { name: "Martinique", lat: 14.6415, lon: -61.0242, date: "23 juillet" }, + { name: "Dakar", lat: 14.7167, lon: -17.4677, date: "23 juillet" }, + { name: "Cayenne", lat: 4.9346, lon: -52.3281, date: "24 juillet" }, + { name: "Bamako", lat: 12.6392, lon: -8.0029, date: "25 juillet" }, + { name: "Le Caire", lat: 30.0444, lon: 31.2357, date: "3 août" }, + { name: "Paris", lat: 48.8566, lon: 2.3522, date: "15 août" }, +]; diff --git a/src/culture-savoirs.njk b/src/culture-savoirs.njk index eb5a750..b116984 100644 --- a/src/culture-savoirs.njk +++ b/src/culture-savoirs.njk @@ -20,17 +20,17 @@ eleventyComputed:
-
+

{{ "culture_egypt_title" | t(locale) }}

{{ "culture_egypt_desc" | t(locale) }}

-
+

{{ "culture_dogon_title" | t(locale) }}

{{ "culture_dogon_desc" | t(locale) }}

-
+

{{ "culture_caribbean_title" | t(locale) }}

{{ "culture_caribbean_desc" | t(locale) }}

@@ -98,15 +98,15 @@ eleventyComputed:
-
+

{{ "dogon_system_sigutolo_title" | t(locale) }}

{{ "dogon_system_sigutolo_desc" | t(locale) }}

-
+

{{ "dogon_system_potolo_title" | t(locale) }}

{{ "dogon_system_potolo_desc" | t(locale) }}

-
+

{{ "dogon_system_emmeya_title" | t(locale) }}

{{ "dogon_system_emmeya_desc" | t(locale) }}

@@ -136,19 +136,19 @@ eleventyComputed:
-
+

{{ "dogon_astronomy_geometry_title" | t(locale) }}

{{ "dogon_astronomy_geometry_desc" | t(locale) }}

-
+

{{ "dogon_astronomy_calendar_title" | t(locale) }}

{{ "dogon_astronomy_calendar_desc" | t(locale) }}

-
+

{{ "dogon_astronomy_planets_title" | t(locale) }}

{{ "dogon_astronomy_planets_desc" | t(locale) }}

-
+

{{ "dogon_astronomy_universe_title" | t(locale) }}

{{ "dogon_astronomy_universe_desc" | t(locale) }}

diff --git a/src/index.njk b/src/index.njk index 339b132..396eba8 100644 --- a/src/index.njk +++ b/src/index.njk @@ -54,18 +54,40 @@ eleventyComputed:
-
+

{{ "feature_brightest_title" | t(locale) }}

{{ "feature_brightest_desc" | t(locale) }}

-
+

{{ "feature_rising_title" | t(locale) }}

{{ "feature_rising_desc" | t(locale) }}

-
+

{{ "feature_heritage_title" | t(locale) }}

{{ "feature_heritage_desc" | t(locale) }}

+ +
+
+
+

{{ "wave_showcase_title" | t(locale) }}

+

{{ "wave_showcase_subtitle" | t(locale) }}

+
+ +
    + {% for city in waveCities %} +
  • + {{ city.name }} + {{ city.date }} +
    • + {% endfor %} +
+ +

+ {{ "wave_showcase_cta" | t(locale) }} +

+
+
diff --git a/src/islands/globe/world.js b/src/islands/globe/world.js index 8ceab8b..dba4538 100644 --- a/src/islands/globe/world.js +++ b/src/islands/globe/world.js @@ -1,17 +1 @@ -// Progression du lever héliaque à travers la diaspora africaine et caribéenne -// (fin juin à mi-août), du plus oriental au plus occidental. -export const waveCities = [ - { name: "La Réunion", lat: -21.1151, lon: 55.5364, date: "27 juin" }, - { name: "Kinshasa", lat: -4.4419, lon: 15.2663, date: "16 juillet" }, - { name: "Douala", lat: 4.0511, lon: 9.7679, date: "18 juillet" }, - { name: "Yaoundé", lat: 3.848, lon: 11.5021, date: "19 juillet" }, - { name: "Abidjan", lat: 5.36, lon: -4.0083, date: "20 juillet" }, - { name: "Accra", lat: 5.6037, lon: -0.187, date: "21 juillet" }, - { name: "Guadeloupe", lat: 16.265, lon: -61.551, date: "22 juillet" }, - { name: "Martinique", lat: 14.6415, lon: -61.0242, date: "23 juillet" }, - { name: "Dakar", lat: 14.7167, lon: -17.4677, date: "23 juillet" }, - { name: "Cayenne", lat: 4.9346, lon: -52.3281, date: "24 juillet" }, - { name: "Bamako", lat: 12.6392, lon: -8.0029, date: "25 juillet" }, - { name: "Le Caire", lat: 30.0444, lon: 31.2357, date: "3 août" }, - { name: "Paris", lat: 48.8566, lon: 2.3522, date: "15 août" }, -]; +export { default as waveCities } from "../../_data/waveCities.js"; diff --git a/src/observer.njk b/src/observer.njk index 921ea16..c6c2e24 100644 --- a/src/observer.njk +++ b/src/observer.njk @@ -139,22 +139,22 @@ eleventyComputed:

{{ "observer_tips_title" | t(locale) }}

-
+

{{ "observer_tip_weather_title" | t(locale) }}

{{ "observer_tip_weather_desc" | t(locale) }}

-
+

{{ "observer_tip_moon_title" | t(locale) }}

{{ "observer_tip_moon_desc" | t(locale) }}

-
+

{{ "observer_tip_apps_title" | t(locale) }}

{{ "observer_tip_apps_desc" | t(locale) }}

-
+

{{ "observer_tip_group_title" | t(locale) }}

{{ "observer_tip_group_desc" | t(locale) }}

diff --git a/src/sirius-science.njk b/src/sirius-science.njk index b2a261b..4119668 100644 --- a/src/sirius-science.njk +++ b/src/sirius-science.njk @@ -62,15 +62,15 @@ eleventyComputed:
-
+

{{ "science_factor_magnitude_title" | t(locale) }}

{{ "science_factor_magnitude_desc" | t(locale) }}

-
+

{{ "science_factor_latitude_title" | t(locale) }}

{{ "science_factor_latitude_desc" | t(locale) }}

-
+

{{ "science_factor_atmosphere_title" | t(locale) }}

{{ "science_factor_atmosphere_desc" | t(locale) }}

diff --git a/src/styles/app.css b/src/styles/app.css index 38c1250..e081c55 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -16,3 +16,4 @@ @import "./components/diagrams.css" layer(components); @import "./components/associations.css" layer(components); @import "./components/islands.css" layer(components); +@import "./components/wave-badges.css" layer(components); diff --git a/src/styles/base.css b/src/styles/base.css index 5105623..4a7c458 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -37,13 +37,14 @@ body { h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--leading-tight); + letter-spacing: var(--tracking-tight); text-wrap: balance; } h1 { font-size: var(--text-6); } h2 { font-size: var(--text-5); } -h3 { font-size: var(--text-3); } -h4 { font-size: var(--text-2); } +h3 { font-size: var(--text-3); letter-spacing: -0.01em; } +h4 { font-size: var(--text-2); letter-spacing: 0; } p { text-wrap: pretty; diff --git a/src/styles/components/buttons.css b/src/styles/components/buttons.css index e375bc8..d1ed3c5 100644 --- a/src/styles/components/buttons.css +++ b/src/styles/components/buttons.css @@ -3,16 +3,23 @@ align-items: center; justify-content: center; min-height: var(--tap-target); - padding-inline: var(--space-4); + padding-inline: var(--space-5); border-radius: var(--radius-pill); font-weight: 700; text-decoration: none; + box-shadow: var(--shadow-sm); transition: transform var(--duration-fast) var(--ease-out), + box-shadow var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); } .btn:hover { transform: translateY(-2px); + box-shadow: var(--shadow-md); +} + +.btn:active { + transform: translateY(0); } .btn-primary { @@ -20,8 +27,19 @@ color: oklch(20% 0.03 265); } +.btn-primary:hover { + background: var(--coral-surface); +} + .btn-outline { background: transparent; border: 2px solid var(--gold); color: var(--gold); + box-shadow: none; +} + +.btn-outline:hover { + border-color: var(--coral); + color: var(--coral); + box-shadow: none; } diff --git a/src/styles/components/cards.css b/src/styles/components/cards.css index 7404f7e..0fe69b1 100644 --- a/src/styles/components/cards.css +++ b/src/styles/components/cards.css @@ -1,6 +1,10 @@ +/* Contenu éditorial : icône + titre + texte, fluide (pas de boîte) sauf + quand .card est explicitement combiné (regroupements fonctionnels comme + l'équipement d'observation). */ .feature-card, .info-card { text-align: center; + padding-block: var(--space-2); } .feature-card h3, @@ -9,9 +13,9 @@ margin-bottom: var(--space-2); } -.info-card.essential { - border-color: var(--gold); - background: light-dark(oklch(96% 0.04 85), oklch(24% 0.04 85)); +.card.info-card.essential { + box-shadow: 0 0 0 2px var(--gold), var(--shadow-sm); + background: light-dark(oklch(96% 0.04 85), oklch(20% 0.035 85)); } .info-card-header { diff --git a/src/styles/components/hero.css b/src/styles/components/hero.css index 5dd249b..8a3c1f1 100644 --- a/src/styles/components/hero.css +++ b/src/styles/components/hero.css @@ -1,10 +1,10 @@ .hero { position: relative; overflow: hidden; - padding-block: var(--space-7) var(--space-6); + padding-block: var(--space-8) var(--space-7); background: light-dark( linear-gradient(180deg, oklch(96% 0.02 85), oklch(92% 0.03 60)), - linear-gradient(180deg, oklch(14% 0.03 265), oklch(10% 0.02 265)) + linear-gradient(180deg, oklch(9% 0.015 265), oklch(6% 0.01 265)) ); } diff --git a/src/styles/components/wave-badges.css b/src/styles/components/wave-badges.css new file mode 100644 index 0000000..2ddfcf9 --- /dev/null +++ b/src/styles/components/wave-badges.css @@ -0,0 +1,32 @@ +/* Vitrine dense de badges — écho panafricain à une grille d'intégrations : + sobre en soi (fond neutre), colorée par petites touches. */ +.wave-badges { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: var(--space-2); + margin-top: var(--space-6); + list-style: none; +} + +.wave-badge { + display: flex; + align-items: baseline; + gap: var(--space-2); + padding: var(--space-2) var(--space-4); + border-radius: var(--radius-pill); + background: var(--surface-raised); + font-size: var(--text-0); +} + +.wave-badge-name { + font-weight: 700; +} + +.wave-badge-date { + color: var(--ink-soft); +} + +.wave-badge-0 .wave-badge-name { color: var(--gold); } +.wave-badge-1 .wave-badge-name { color: var(--coral); } +.wave-badge-2 .wave-badge-name { color: var(--caribbean-teal); } diff --git a/src/styles/layouts.css b/src/styles/layouts.css index 61c5137..2f9c68d 100644 --- a/src/styles/layouts.css +++ b/src/styles/layouts.css @@ -53,7 +53,7 @@ } .section { - padding-block: var(--space-7); + padding-block: var(--space-8); container-type: inline-size; } @@ -61,6 +61,12 @@ margin-bottom: var(--space-6); } +.hairline { + border: none; + border-top: 1px solid var(--border); + margin: 0; +} + .section-eyebrow { display: inline-block; font-family: var(--font-body); @@ -78,9 +84,11 @@ margin-top: var(--space-2); } +/* Réservé aux regroupements fonctionnels (calculateur, carte, onglets, + équipement) — le contenu purement éditorial reste fluide, sans boîte. */ .card { background: var(--surface-raised); - border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); + box-shadow: var(--shadow-sm); } diff --git a/src/styles/tokens.css b/src/styles/tokens.css index 35471f6..49b30da 100644 --- a/src/styles/tokens.css +++ b/src/styles/tokens.css @@ -2,17 +2,24 @@ color-scheme: light dark; /* === Couleur — oklch, contraste d'abord (méthode modus-vivendi) === - Deux thèmes conceptuellement liés au sujet : Aube (clair) / Nuit (sombre). */ - --ink: light-dark(oklch(23% 0.03 265), oklch(95% 0.015 85)); - --ink-soft: light-dark(oklch(38% 0.03 265), oklch(80% 0.02 85)); - --surface: light-dark(oklch(96% 0.015 85), oklch(16% 0.03 265)); - --surface-raised: light-dark(oklch(99% 0.008 85), oklch(21% 0.03 265)); - --surface-sunk: light-dark(oklch(91% 0.02 85), oklch(12% 0.025 265)); - --border: light-dark(oklch(85% 0.02 85), oklch(32% 0.035 265)); + Deux thèmes conceptuellement liés au sujet : Aube (clair) / Nuit (sombre). + Le noir de nuit est volontairement presque neutre (chroma minimal) — + un "premium near-black" plutôt qu'un bleu nuit saturé. */ + --ink: light-dark(oklch(23% 0.03 265), oklch(96% 0.01 85)); + --ink-soft: light-dark(oklch(38% 0.03 265), oklch(78% 0.015 85)); + --surface: light-dark(oklch(96% 0.015 85), oklch(11% 0.012 265)); + --surface-raised: light-dark(oklch(99% 0.008 85), oklch(15% 0.015 265)); + --surface-sunk: light-dark(oklch(91% 0.02 85), oklch(8% 0.012 265)); + --border: light-dark(oklch(85% 0.02 85), oklch(26% 0.02 265)); /* Or de Sirius : variante lisible (texte/liens) + variante décorative (glows) */ --gold: light-dark(oklch(45% 0.15 75), oklch(82% 0.15 87)); --gold-surface: oklch(80% 0.16 85); + /* Corail (héritage Caraïbe du v1 du projet) : accent secondaire chaud, + à côté de l'or plutôt qu'à sa place — inspiré du ton "burnt orange" + d'unabyss.com. */ + --coral: light-dark(oklch(50% 0.17 45), oklch(72% 0.17 45)); + --coral-surface: oklch(70% 0.18 45); --kente-red: light-dark(oklch(46% 0.18 25), oklch(70% 0.19 25)); --bogolan-green: light-dark(oklch(40% 0.09 145), oklch(68% 0.12 145)); --caribbean-teal: light-dark(oklch(43% 0.09 195), oklch(74% 0.11 195)); @@ -27,22 +34,24 @@ --text-1: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-2: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); --text-3: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem); - --text-4: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); - --text-5: clamp(2.25rem, 1.7rem + 2.5vw, 3.5rem); - --text-6: clamp(2.75rem, 1.8rem + 4.5vw, 5.5rem); + --text-4: clamp(1.85rem, 1.5rem + 1.6vw, 2.75rem); + --text-5: clamp(2.5rem, 1.8rem + 3vw, 4rem); + --text-6: clamp(3rem, 1.9rem + 5.5vw, 6.5rem); - --leading-tight: 1.15; - --leading-normal: 1.6; + --tracking-tight: -0.02em; + --leading-tight: 1.1; + --leading-normal: 1.65; --measure: 65ch; - /* === Espacement (échelle modulaire) === */ + /* === Espacement (échelle modulaire) — rythme généreux === */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2.5rem; --space-6: 4rem; - --space-7: 6rem; + --space-7: 7rem; + --space-8: 9rem; /* === Formes, ombres, mouvement === */ --radius-sm: 0.5rem; @@ -50,8 +59,8 @@ --radius-lg: 1.5rem; --radius-pill: 999px; - --shadow-sm: 0 1px 3px light-dark(oklch(23% 0.03 265 / 12%), oklch(0% 0 0 / 30%)); - --shadow-md: 0 8px 30px light-dark(oklch(23% 0.03 265 / 12%), oklch(0% 0 0 / 45%)); + --shadow-sm: 0 1px 3px light-dark(oklch(23% 0.03 265 / 12%), oklch(0% 0 0 / 35%)); + --shadow-md: 0 12px 40px light-dark(oklch(23% 0.03 265 / 14%), oklch(0% 0 0 / 55%)); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 200ms;