ordinarthur/rebours
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v4

Browse Source
This commit is contained in:
ordinarthur 2026-02-25 16:00:24 +01:00
parent 0edeeacbe2
commit c9d78e29ee
2 changed files with 31 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -277,8 +277,6 @@
</div> </div>
</section> </section>
<hr>
<!-- NEWSLETTER --> <!-- NEWSLETTER -->
<section class="newsletter" id="contact" aria-label="Accès anticipé"> <section class="newsletter" id="contact" aria-label="Accès anticipé">
<div class="nl-left"> <div class="nl-left">

40
public/style.css
View File

@ -218,7 +218,6 @@ hr { border: none; border-top: var(--border); margin: 0; }
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1rem var(--pad); padding: 1rem var(--pad);
border-bottom: var(--border);
} }
/* ---- PRODUCT GRID — style Gufram ---- */ /* ---- PRODUCT GRID — style Gufram ---- */
@ -226,12 +225,13 @@ hr { border: none; border-top: var(--border); margin: 0; }
.product-grid { .product-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
border-left: var(--border); border-top: 2px solid #111;
border-left: 2px solid #111;
} }
.product-card { .product-card {
border-right: var(--border); border-right: 2px solid #111;
border-bottom: var(--border); border-bottom: 2px solid #111;
background: var(--clr-card-bg); background: var(--clr-card-bg);
cursor: none; cursor: none;
pointer-events: auto; pointer-events: auto;
@ -239,11 +239,30 @@ hr { border: none; border-top: var(--border); margin: 0; }
flex-direction: column; flex-direction: column;
transition: background 0.2s; transition: background 0.2s;
position: relative; position: relative;
z-index: 0;
} }
.product-card:hover { .product-card::before {
background: var(--clr-card-bg); content: '';
position: absolute;
inset: -2px;
border: 2px solid transparent;
pointer-events: none;
transition: border-color 0.15s;
z-index: 2;
}
.product-card:hover::before {
border-color: var(--clr-red);
}
.product-card:hover .card-name {
color: var(--clr-red);
}
.product-card:hover .card-index {
color: var(--clr-black);
}
.product-card:hover .card-arrow {
opacity: 1;
color: var(--clr-black);
} }
/* Image : objet centré sur fond neutre, comme Gufram */ /* Image : objet centré sur fond neutre, comme Gufram */
.card-img-wrap { .card-img-wrap {
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
@ -252,9 +271,12 @@ hr { border: none; border-top: var(--border); margin: 0; }
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 2rem; padding: 2rem;
border-bottom: var(--border); border-bottom: 2px solid #111;
background: var(--clr-card-bg); background: var(--clr-card-bg);
transition: background 0.2s; transition: background 0.2s, border-color 0.15s;
}
.product-card:hover .card-img-wrap {
border-bottom-color: var(--clr-red);
} }
.product-card:hover .card-img-wrap { .product-card:hover .card-img-wrap {
background: var(--clr-card-bg); background: var(--clr-card-bg);