🎨 Design: Direction visuelle inspirée d'unabyss.com
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 <noreply@anthropic.com>
This commit is contained in:
sucupira
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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" },
|
||||
];
|
||||
+10
-10
@@ -20,17 +20,17 @@ eleventyComputed:
|
||||
</div>
|
||||
|
||||
<div class="grid-auto">
|
||||
<div class="card feature-card">
|
||||
<div class="feature-card">
|
||||
<div style="font-size: var(--text-4)" aria-hidden="true">🏺</div>
|
||||
<h3>{{ "culture_egypt_title" | t(locale) }}</h3>
|
||||
<p>{{ "culture_egypt_desc" | t(locale) }}</p>
|
||||
</div>
|
||||
<div class="card feature-card">
|
||||
<div class="feature-card">
|
||||
<div style="font-size: var(--text-4)" aria-hidden="true">🌍</div>
|
||||
<h3>{{ "culture_dogon_title" | t(locale) }}</h3>
|
||||
<p>{{ "culture_dogon_desc" | t(locale) }}</p>
|
||||
</div>
|
||||
<div class="card feature-card">
|
||||
<div class="feature-card">
|
||||
<div style="font-size: var(--text-4)" aria-hidden="true">⛵</div>
|
||||
<h3>{{ "culture_caribbean_title" | t(locale) }}</h3>
|
||||
<p>{{ "culture_caribbean_desc" | t(locale) }}</p>
|
||||
@@ -98,15 +98,15 @@ eleventyComputed:
|
||||
|
||||
<div class="tab-panel">
|
||||
<div class="grid-auto">
|
||||
<div class="card info-card">
|
||||
<div class="info-card">
|
||||
<h3>{{ "dogon_system_sigutolo_title" | t(locale) }}</h3>
|
||||
<p>{{ "dogon_system_sigutolo_desc" | t(locale) }}</p>
|
||||
</div>
|
||||
<div class="card info-card">
|
||||
<div class="info-card">
|
||||
<h3>{{ "dogon_system_potolo_title" | t(locale) }}</h3>
|
||||
<p>{{ "dogon_system_potolo_desc" | t(locale) }}</p>
|
||||
</div>
|
||||
<div class="card info-card">
|
||||
<div class="info-card">
|
||||
<h3>{{ "dogon_system_emmeya_title" | t(locale) }}</h3>
|
||||
<p>{{ "dogon_system_emmeya_desc" | t(locale) }}</p>
|
||||
</div>
|
||||
@@ -136,19 +136,19 @@ eleventyComputed:
|
||||
|
||||
<div class="tab-panel">
|
||||
<div class="grid-auto">
|
||||
<div class="card info-card">
|
||||
<div class="info-card">
|
||||
<h3>{{ "dogon_astronomy_geometry_title" | t(locale) }}</h3>
|
||||
<p>{{ "dogon_astronomy_geometry_desc" | t(locale) }}</p>
|
||||
</div>
|
||||
<div class="card info-card">
|
||||
<div class="info-card">
|
||||
<h3>{{ "dogon_astronomy_calendar_title" | t(locale) }}</h3>
|
||||
<p>{{ "dogon_astronomy_calendar_desc" | t(locale) }}</p>
|
||||
</div>
|
||||
<div class="card info-card">
|
||||
<div class="info-card">
|
||||
<h3>{{ "dogon_astronomy_planets_title" | t(locale) }}</h3>
|
||||
<p>{{ "dogon_astronomy_planets_desc" | t(locale) }}</p>
|
||||
</div>
|
||||
<div class="card info-card">
|
||||
<div class="info-card">
|
||||
<h3>{{ "dogon_astronomy_universe_title" | t(locale) }}</h3>
|
||||
<p>{{ "dogon_astronomy_universe_desc" | t(locale) }}</p>
|
||||
</div>
|
||||
|
||||
+25
-3
@@ -54,18 +54,40 @@ eleventyComputed:
|
||||
</div>
|
||||
|
||||
<div class="grid-auto" style="margin-top: var(--space-6)">
|
||||
<div class="card feature-card">
|
||||
<div class="feature-card">
|
||||
<h3>{{ "feature_brightest_title" | t(locale) }}</h3>
|
||||
<p>{{ "feature_brightest_desc" | t(locale) }}</p>
|
||||
</div>
|
||||
<div class="card feature-card">
|
||||
<div class="feature-card">
|
||||
<h3>{{ "feature_rising_title" | t(locale) }}</h3>
|
||||
<p>{{ "feature_rising_desc" | t(locale) }}</p>
|
||||
</div>
|
||||
<div class="card feature-card">
|
||||
<div class="feature-card">
|
||||
<h3>{{ "feature_heritage_title" | t(locale) }}</h3>
|
||||
<p>{{ "feature_heritage_desc" | t(locale) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" style="background: var(--surface-sunk)">
|
||||
<div class="container">
|
||||
<div class="section-header center">
|
||||
<h2>{{ "wave_showcase_title" | t(locale) }}</h2>
|
||||
<p class="section-subtitle">{{ "wave_showcase_subtitle" | t(locale) }}</p>
|
||||
</div>
|
||||
|
||||
<ul class="wave-badges">
|
||||
{% for city in waveCities %}
|
||||
<li class="wave-badge wave-badge-{{ loop.index0 % 3 }}">
|
||||
<span class="wave-badge-name">{{ city.name }}</span>
|
||||
<span class="wave-badge-date">{{ city.date }}</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<p class="center" style="margin-top: var(--space-5)">
|
||||
<a class="btn btn-outline" href="{{ '/observer/' | localeHref(locale) }}">{{ "wave_showcase_cta" | t(locale) }}</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -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";
|
||||
|
||||
+4
-4
@@ -139,22 +139,22 @@ eleventyComputed:
|
||||
|
||||
<h2 class="center" style="margin-top: var(--space-7)">{{ "observer_tips_title" | t(locale) }}</h2>
|
||||
<div class="grid-auto" style="margin-top: var(--space-4)">
|
||||
<div class="card feature-card">
|
||||
<div class="feature-card">
|
||||
<div style="font-size: var(--text-4)" aria-hidden="true">🌤️</div>
|
||||
<h3>{{ "observer_tip_weather_title" | t(locale) }}</h3>
|
||||
<p>{{ "observer_tip_weather_desc" | t(locale) }}</p>
|
||||
</div>
|
||||
<div class="card feature-card">
|
||||
<div class="feature-card">
|
||||
<div style="font-size: var(--text-4)" aria-hidden="true">🌑</div>
|
||||
<h3>{{ "observer_tip_moon_title" | t(locale) }}</h3>
|
||||
<p>{{ "observer_tip_moon_desc" | t(locale) }}</p>
|
||||
</div>
|
||||
<div class="card feature-card">
|
||||
<div class="feature-card">
|
||||
<div style="font-size: var(--text-4)" aria-hidden="true">📱</div>
|
||||
<h3>{{ "observer_tip_apps_title" | t(locale) }}</h3>
|
||||
<p>{{ "observer_tip_apps_desc" | t(locale) }}</p>
|
||||
</div>
|
||||
<div class="card feature-card">
|
||||
<div class="feature-card">
|
||||
<div style="font-size: var(--text-4)" aria-hidden="true">👥</div>
|
||||
<h3>{{ "observer_tip_group_title" | t(locale) }}</h3>
|
||||
<p>{{ "observer_tip_group_desc" | t(locale) }}</p>
|
||||
|
||||
@@ -62,15 +62,15 @@ eleventyComputed:
|
||||
|
||||
<div class="tab-panel">
|
||||
<div class="grid-auto">
|
||||
<div class="card info-card">
|
||||
<div class="info-card">
|
||||
<h3>{{ "science_factor_magnitude_title" | t(locale) }}</h3>
|
||||
<p>{{ "science_factor_magnitude_desc" | t(locale) }}</p>
|
||||
</div>
|
||||
<div class="card info-card">
|
||||
<div class="info-card">
|
||||
<h3>{{ "science_factor_latitude_title" | t(locale) }}</h3>
|
||||
<p>{{ "science_factor_latitude_desc" | t(locale) }}</p>
|
||||
</div>
|
||||
<div class="card info-card">
|
||||
<div class="info-card">
|
||||
<h3>{{ "science_factor_atmosphere_title" | t(locale) }}</h3>
|
||||
<p>{{ "science_factor_atmosphere_desc" | t(locale) }}</p>
|
||||
</div>
|
||||
|
||||
@@ -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);
|
||||
|
||||
+3
-2
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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))
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -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); }
|
||||
+10
-2
@@ -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);
|
||||
}
|
||||
|
||||
+25
-16
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user