style(css): ajustements visuels

docs(features): raccourcir texte de la carte 'Installation simplifiée'
feat(features): améliorer comportement hover et état initial des cartes
2026-05-27 22:27:33 +02:00 · 2026-05-27 22:27:20 +02:00 · 2026-05-27 22:27:13 +02:00 · 2026-05-27 21:44:47 +02:00 · 2026-05-27 21:44:33 +02:00 · 2026-05-27 21:42:41 +02:00
7 changed files with 242 additions and 171 deletions
@@ -7,7 +7,7 @@
  <meta name="description"
    content="Site statique one-page avec navigation par URL et chargement dynamique du contenu." />
  <title>Fws Web</title>
-  <link rel="stylesheet" href="p/assets/main-styles/styles.css" />
+  <link rel="stylesheet" href="p/assets/styles/styles.css" />
 </head>

 <body>
@@ -70,14 +70,14 @@

        <div class="footer-bottom">
          <p>© <span id="footer-year">2026</span> Fws Linux</p>
-          <p class="footer-release">Dernière release : non affichée</p>
-          <p class="footer-commit">Dernier commit : non affiché</p>
+
        </div>
      </div>
    </footer>
  </div>

  <script src="p/assets/main-nav/app.js"></script>
+  <script src="p/assets/main-nav/feature-cards.js"></script>
 </body>

 </html>
@@ -1,129 +0,0 @@
-@import "./var.css";
-
-.hero,
-.card {
-  backdrop-filter: blur(18px);
-  background: var(--bg-soft);
-  box-shadow: var(--shadow);
-}
-
-.hero {
-  padding: clamp(1.5rem, 3vw, 2.75rem);
-}
-
-.eyebrow {
-  margin: 0 0 0.75rem;
-  color: var(--accent);
-  text-transform: uppercase;
-  letter-spacing: 0.22em;
-  font-size: 0.78rem;
-  font-weight: 700;
-}
-
-.hero h1,
-.card h2 {
-  font-family: "Georgia", "Palatino Linotype", serif;
-}
-
-.hero h1 {
-  margin: 0;
-  font-size: clamp(2.2rem, 5vw, 4.5rem);
-  line-height: 0.98;
-  max-width: 12ch;
-}
-
-.lead {
-  max-width: 62ch;
-  color: var(--muted);
-  font-size: 1.08rem;
-  line-height: 1.7;
-  margin: 1rem 0 0;
-}
-
-.lead span,
-.card span {
-  color: var(--text);
-}
-
-.release-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin: 1.35rem 0 0;
-  padding: 0.7rem 1rem;
-  border: 1px solid rgba(148, 163, 184, 0.22);
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.04);
-  color: var(--muted);
-  font-size: 0.95rem;
-  font-weight: 700;
-}
-
-.release-badge span {
-  color: var(--text);
-}
-
-.hero-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  margin-top: 1.5rem;
-}
-
-.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.85rem 1.2rem;
-  text-decoration: none;
-  border: 1px solid rgba(148, 163, 184, 0.22);
-  border-radius: 999px;
-  font-weight: 700;
-  transition:
-    transform 160ms ease,
-    background 160ms ease,
-    color 160ms ease,
-    border-color 160ms ease;
-}
-
-.button:hover {
-  transform: translateY(-1px);
-}
-
-.button-primary {
-  color: #08101d;
-  background: linear-gradient(145deg, var(--accent), var(--accent-strong));
-}
-
-.button-secondary {
-  color: var(--text);
-  background: rgba(255, 255, 255, 0.04);
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 1rem;
-}
-
-.card {
-  padding: 1.25rem;
-}
-
-.card h2 {
-  margin-top: 0;
-  margin-bottom: 0.75rem;
-  font-size: 1.45rem;
-}
-
-.card p {
-  margin: 0;
-  color: var(--muted);
-  line-height: 1.65;
-}
-
-@media (max-width: 900px) {
-  .grid {
-    grid-template-columns: 1fr;
-  }
-}
@@ -0,0 +1,205 @@
+@import "./var.css";
+
+:root {
+  --main-max: 1200px;
+}
+
+
+main[data-page-content] {
+  margin: 0 auto;
+  max-width: var(--main-max);
+  padding: 2rem 1.25rem;
+  box-sizing: border-box;
+}
+
+.grid { display: block; }
+
+
+.hero {
+  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
+  box-shadow: var(--shadow);
+  border-radius: 1rem;
+  padding: clamp(2rem, 4.5vw, 3.5rem);
+  color: var(--text);
+}
+
+.hero-inner { width: 100%; }
+
+.eyebrow {
+  color: var(--accent);
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  margin: 0 0 0.6rem;
+}
+
+.hero-title {
+  font-family: "Georgia", "Palatino Linotype", serif;
+  font-size: clamp(3rem, 8vw, 5rem);
+  line-height: 0.95;
+  margin: 0 0 0.25rem;
+  color: var(--text);
+}
+
+.hero-subtitle {
+  font-size: clamp(1rem, 2.2vw, 1.3rem);
+  color: var(--muted);
+  margin: 0 0 1rem;
+  font-weight: 600;
+}
+
+.lead {
+  color: var(--muted);
+  max-width: 68ch;
+  margin: 0 0 1.25rem;
+}
+
+.hero-actions {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.8rem 1.2rem;
+  border-radius: 999px;
+  text-decoration: none;
+  font-weight: 700;
+  border: 1px solid transparent;
+}
+
+.button-primary {
+  background: linear-gradient(145deg, var(--accent), var(--accent-strong));
+  color: #08101d;
+}
+
+.button-secondary {
+  background: rgba(255,255,255,0.03);
+  color: var(--text);
+}
+
+
+.features {
+  margin-top: 1.5rem;
+  display: flex;
+  gap: 1rem;
+  align-items: stretch;
+}
+
+.features .card {
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 11rem;
+  background: rgba(255,255,255,0.02);
+  padding: 1.5rem;
+  border-radius: 0.75rem;
+  box-shadow: 0 8px 22px rgba(2,6,23,0.45);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  transition: transform 220ms ease, box-shadow 220ms ease, opacity 220ms ease;
+}
+
+.features .card h2 {
+  margin: 0;
+  font-family: "Georgia", serif;
+  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
+  line-height: 1.1;
+  transition: transform 220ms ease;
+}
+
+.features .card p {
+  margin: 0;
+  font-size: clamp(0.95rem, 1.05vw, 1.08rem);
+  line-height: 1.6;
+  position: absolute;
+  left: 1.5rem;
+  right: 1.5rem;
+  bottom: 1.35rem;
+  padding: 0.85rem 1rem;
+  opacity: 0;
+  transform: translateY(0.5rem);
+  transition: opacity 180ms ease, transform 220ms ease;
+  pointer-events: none;
+}
+
+.features:not(:hover) .card:first-child,
+.features .card:first-child:hover,
+.features .card:first-child:focus {
+  flex-grow: 2.6;
+  justify-content: flex-start;
+}
+
+.features:not(:hover) .card:first-child p,
+.features .card:first-child:hover p,
+.features .card:first-child:focus p {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.features:hover .card:first-child:not(:hover):not(:focus) {
+  flex-grow: 1;
+  justify-content: center;
+}
+
+.features:hover .card:first-child:not(:hover):not(:focus) p {
+  opacity: 0;
+  transform: translateY(0.5rem);
+}
+
+.features .card:hover,
+.features .card:focus {
+  flex-grow: 2.6;
+  justify-content: flex-start;
+  transform: translateY(-6px);
+  box-shadow: 0 22px 60px rgba(2,6,23,0.55);
+  z-index: 2;
+}
+
+.features .card:hover p,
+.features .card:focus p {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.features .card:focus {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+
+@media (max-width: 980px) {
+  .hero-title { font-size: clamp(2.2rem, 7vw, 4rem); }
+
+  .features {
+    flex-direction: column;
+  }
+
+  .features .card {
+    cursor: default;
+  }
+
+  .features .card:hover,
+  .features .card:focus {
+    transform: none;
+  }
+
+  .features .card p {
+    position: static;
+    margin-top: 0.85rem;
+    opacity: 1;
+    transform: none;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+    pointer-events: auto;
+  }
+}
@@ -104,15 +104,16 @@ body::after {
 }

 .brand-mark {
-  width: 2.75rem;
-  height: 2.75rem;
+  width: 3.75rem;
+  height: 3.75rem;
  object-fit: cover;
  display: block;
 }

 .brand-text {
  display: grid;
-  line-height: 1.05;
+  /* line-height: 3.05; */
+  font-size: 2.25rem;
 }

 .brand-text strong {
@@ -131,6 +132,7 @@ body::after {

 .site-nav a {
  border-radius: 999px;
+  margin: auto;
  transition:
    transform 160ms ease,
    background 160ms ease,
@@ -4,7 +4,6 @@
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>DL</title>
-    <link rel="stylesheet" href="../assets/main-styles/main.css" />
  </head>
  <body>
    <main data-page-content>
@@ -21,20 +20,7 @@
        </div>
      </section>

-      <section class="grid">
-        <article class="card">
-          <h2>Vrai fichier</h2>
-          <p>Le HTML est bien stocké dans le dossier <span>p/</span>, pas dans le fichier principal.</p>
-        </article>
-        <article class="card">
-          <h2>Injection</h2>
-          <p>Le script lit ce fichier puis injecte uniquement le bloc portant <span>data-page-content</span>.</p>
-        </article>
-        <article class="card">
-          <h2>Extensible</h2>
-          <p>Tu peux créer d'autres dossiers comme <span>p/contact/</span> ou <span>p/about/</span>.</p>
-        </article>
-      </section>
+
    </main>
  </body>
 </html>
@@ -4,37 +4,44 @@
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Accueil</title>
-    <link rel="stylesheet" href="../assets/main-styles/main.css" />
+    <link rel="stylesheet" href="../assets/styles/main.css" />
  </head>
  <body>
    <main data-page-content>
      <section class="hero">
-        <p class="eyebrow">Navigation one-page</p>
-        <h1>Le site change de contenu sans changer de page.</h1>
-        <p class="lead">
-          La page principale vit dans <span>p/index/index.html</span> et le script l'injecte dans le
-          <span>main</span> quand l'URL pointe vers <span>/?p/index/</span>.
-        </p>
-        <p class="release-badge">Download FWS</p>
-        <div class="hero-actions">
-          <a class="button button-primary" href="/?p/dl/" data-route="dl">Aller vers DL</a>
-          <a class="button button-secondary" href="/?p/index/" data-route="index">Rester sur l'accueil</a>
+        <div class="hero-inner">
+          <h1 class="hero-title">FWS Linux</h1>
+          <h2 class="hero-subtitle">un système léger, libre et compatible</h2>
+
+          <p class="lead">Open-source basé sur Arch Linux, Fws facilite la transition depuis Windows sans vous déposséder de vos données. Installation simplifiée, interface épurée, et compatibilité avec vos applications Windows grâce à Wine et Winboat — tout en restant respectueux de votre vie privée.</p>
+
+          <div class="hero-actions">
+            <a class="button button-primary" href="/?p/dl/" data-route="dl">Télécharger</a>
+            <a class="button button-secondary" href="/?p/contact/" data-route="contact">En savoir plus</a>
+          </div>
        </div>
      </section>

-      <section class="grid">
-        <article class="card">
-          <h2>Header commun</h2>
-          <p>Le bandeau du haut reste identique sur chaque vue.</p>
+      <section class="features">
+        <article class="card" tabindex="0">
+          <h2>Installation simplifiée</h2>
+          <p>Installateur graphique pour une configuration facile et rapide.</p>
        </article>
-        <article class="card">
-          <h2>Footer commun</h2>
-          <p>Le pied de page reste fixe, quelle que soit la section chargée.</p>
+        <article class="card" tabindex="0">
+          <h2>Léger et rapide</h2>
+          <p>Conçu pour être peu gourmand en ressources : idéal pour redonner vie à d'anciens PC.</p>
        </article>
-        <article class="card">
-          <h2>Injection réelle</h2>
-          <p>Chaque route peut venir d'un vrai fichier <span>index.html</span> dans <span>p/</span>.</p>
+
+        <article class="card" tabindex="0">
+          <h2>Respect de la vie privée</h2>
+          <p>Pas de télémétrie intrusive ni de collecte de données : vous gardez le contrôle.</p>
        </article>
+
+        <article class="card" tabindex="0">
+          <h2>Compatibilité Windows</h2>
+          <p>Exécutez vos logiciels Windows avec Wine et Winboat sans devoir rester sous Windows.</p>
+        </article>
+
      </section>
    </main>
  </body>
Author	SHA1	Message	Date
BlackAngelTV	4c958b448a	style(css): ajustements visuels	2026-05-27 22:27:33 +02:00
BlackAngelTV	71a5673572	docs(features): raccourcir texte de la carte 'Installation simplifiée'	2026-05-27 22:27:20 +02:00
BlackAngelTV	1303f0fbd5	feat(features): améliorer comportement hover et état initial des cartes	2026-05-27 22:27:13 +02:00
BlackAngelTV	d7e769abfd	Merge branch 'main' of https://gitea.nocode-var.tech/FWS/Web-site	2026-05-27 21:44:47 +02:00
BlackAngelTV	3c57353e25	temps	2026-05-27 21:44:33 +02:00
BlackAngelTV	1b6a961e09	feat(main): add hero content and installation copy	2026-05-27 21:42:41 +02:00