admin/site-portfolio
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(portfolio): add mp-card--reflect variant (full-bleed image, mirror, progressive blur+tint), apply to Portfolio block + specimen

Browse Source
This commit is contained in:
Hermes committed 2026-09-16 17:36:54 +02:00
1 parent 49ea1238eb
commit fa4a3d91aa
11 files changed
+167 -62
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/css/main.css
+69
View File
@@ -3441,6 +3441,75 @@ html[data-theme="light"] .hero__portrait-shell {
.mp-card--bleed .mp-card__desc { order: 1; }
.mp-card--bleed .mp-card__tags { order: 2; }
/* Вариант: картинка на всю карточку, зеркальное отражение снизу,
прогрессивное размытие + тонировка цветом карточки снизу вверх;
текст поверх в нижней части. */
.mp-card--reflect {
position: relative;
flex-direction: column;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.mp-card--reflect .mp-card__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0;
border-radius: 0;
overflow: hidden;
}
.mp-card--reflect .mp-card__image {
width: 100%;
height: 100%;
border: 0;
border-radius: 0;
object-fit: cover;
}
/* прогрессивное размытие + тонировка снизу вверх */
.mp-card--reflect::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: color-mix(in srgb, var(--card) 60%, transparent);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
-webkit-mask-image: linear-gradient(to top, #000 0%, #000 32%, transparent 85%);
mask-image: linear-gradient(to top, #000 0%, #000 32%, transparent 85%);
pointer-events: none;
}
/* зеркальное отображение (отражение) внизу */
.mp-card--reflect::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 45%;
z-index: 1;
background-image: var(--card-cover);
background-size: cover;
background-position: center;
transform: scaleY(-1);
transform-origin: bottom;
opacity: 0.55;
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent);
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent);
pointer-events: none;
}
.mp-card--reflect .mp-card__body {
position: relative;
z-index: 2;
margin-top: auto;
padding: 1.2rem 1.35rem 1.3rem;
}
.mp-card--reflect .mp-card__title { order: 0; }
.mp-card--reflect .mp-card__desc { order: 1; }
.mp-card--reflect .mp-card__tags { order: 2; }
.mp-card--horizontal {
flex-direction: row;
align-items: stretch;