From 1303f0fbd5acc3c747e197a9ee136fb60cd256a2 Mon Sep 17 00:00:00 2001 From: BlackAngelTVdev Date: Wed, 27 May 2026 22:27:13 +0200 Subject: [PATCH] =?UTF-8?q?feat(features):=20am=C3=A9liorer=20comportement?= =?UTF-8?q?=20hover=20et=20=C3=A9tat=20initial=20des=20cartes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- p/assets/styles/main.css | 159 +++++++++++++++++++++++++-------------- 1 file changed, 104 insertions(+), 55 deletions(-) diff --git a/p/assets/styles/main.css b/p/assets/styles/main.css index 46ead47..cac8f71 100644 --- a/p/assets/styles/main.css +++ b/p/assets/styles/main.css @@ -1,12 +1,10 @@ @import "./var.css"; -/* MAIN PAGE STYLES - focused on the hero and features */ - :root { --main-max: 1200px; } -/* Layout container for injected page content */ + main[data-page-content] { margin: 0 auto; max-width: var(--main-max); @@ -14,19 +12,18 @@ main[data-page-content] { box-sizing: border-box; } -/* HERO */ +.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); - display: block; } -.hero-inner { - width: 100%; -} +.hero-inner { width: 100%; } .eyebrow { color: var(--accent); @@ -36,7 +33,7 @@ main[data-page-content] { margin: 0 0 0.6rem; } -.hero-title { /* previously .hero h1 */ +.hero-title { font-family: "Georgia", "Palatino Linotype", serif; font-size: clamp(3rem, 8vw, 5rem); line-height: 0.95; @@ -63,6 +60,7 @@ main[data-page-content] { flex-wrap: wrap; } + .button { display: inline-flex; align-items: center; @@ -84,73 +82,124 @@ main[data-page-content] { color: var(--text); } -/* FEATURES - refined layout */ + .features { margin-top: 1.5rem; - display: grid; - grid-template-columns: 1fr 420px; - grid-auto-rows: minmax(120px, auto); + 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.25rem; + padding: 1.5rem; border-radius: 0.75rem; box-shadow: 0 8px 22px rgba(2,6,23,0.45); - transition: transform 180ms ease, box-shadow 180ms ease; + 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:first-child { - grid-column: 1 / 2; - grid-row: 1 / span 2; - min-height: 220px; +.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 + .card { /* second item */ - grid-column: 2 / 3; +.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 .card:nth-child(3) { grid-column: 2 / 3; } -.features .card:nth-child(4) { grid-column: 1 / 3; } +.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 .card h2 { margin: 0 0 0.5rem; font-family: "Georgia", serif; } -.features .card p { margin: 0; color: var(--muted); } +.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; +} -.features .card:hover { transform: translateY(-6px); box-shadow: 0 22px 60px rgba(2,6,23,0.55); } @media (max-width: 980px) { .hero-title { font-size: clamp(2.2rem, 7vw, 4rem); } - .features { grid-template-columns: 1fr; } - .features .card { grid-column: auto; grid-row: auto; } -} -/* Focus states controlled by JS: when a card is focused it expands (spans both columns) - and others collapse slightly so the focused card shows full content. */ -.features[class*="focus-"] .card { transition: all 220ms ease; } -.features.focus-1 .card:nth-child(1), -.features.focus-2 .card:nth-child(2), -.features.focus-3 .card:nth-child(3), -.features.focus-4 .card:nth-child(4) { - grid-column: 1 / 3; - transform: none; - box-shadow: 0 28px 80px rgba(2,6,23,0.7); - z-index: 3; -} + .features { + flex-direction: column; + } -.features.focus-1 .card:not(:nth-child(1)), -.features.focus-2 .card:not(:nth-child(2)), -.features.focus-3 .card:not(:nth-child(3)), -.features.focus-4 .card:not(:nth-child(4)) { - opacity: 0.95; - transform: translateY(0) scale(0.98); -} + .features .card { + cursor: default; + } -@media (max-width: 980px) { - .features[class*="focus-"] .card { transform: none; box-shadow: none; opacity: 1; } - .features[class*="focus-"] .card { grid-column: auto; } -} - -/* small helper spacing */ -.grid { display: block; } + .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; + } +} \ No newline at end of file