Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Local Build
|
4bb6df6f21 |
No files matched your search
@@ -394,6 +394,38 @@
|
||||
.case-article.ds-page .contact-grid {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.sg-neu-demo {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.sg-neu-base {
|
||||
position: relative;
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius-card);
|
||||
padding: 2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sg-neu-base::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
background-size: 128px 128px;
|
||||
opacity: 0.35;
|
||||
mix-blend-mode: overlay;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sg-neu-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function () {
|
||||
@@ -1013,6 +1045,26 @@
|
||||
</ul>
|
||||
<p class="sg-label">.contact-card--link · --action · --brand-*</p>
|
||||
|
||||
<h3>Неуморфная карточка</h3>
|
||||
<p class="section__prose">
|
||||
Стекло-эффект с multiple shadow: три внешних тени (close / medium / far) + четыре внутренних + радиальный блик + шум. Источник — Figma.
|
||||
</p>
|
||||
<div class="sg-neu-demo">
|
||||
<div class="sg-neu-base">
|
||||
<div class="sg-neu-row">
|
||||
<div class="neu-card" style="background: var(--bg-elevated)">
|
||||
<span class="neu-card__title">Neutral</span>
|
||||
<span class="neu-card__meta">--bg-elevated</span>
|
||||
</div>
|
||||
<div class="neu-card" style="color: #fff">
|
||||
<span class="neu-card__title">Accent</span>
|
||||
<span class="neu-card__meta">--accent</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sg-label">.neu-card на .sg-neu-base</p>
|
||||
|
||||
<h3>Секция с фоном</h3>
|
||||
<p class="section__prose">
|
||||
На главной полоса <code>.section--surface</code> визуально читается через mesh; в кейсах фон страницы
|
||||
|
||||
+86
-4
@@ -2865,7 +2865,6 @@ html[data-theme="light"] .hero__portrait-shell {
|
||||
|
||||
.exp-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-card);
|
||||
@@ -3049,7 +3048,6 @@ html[data-theme="light"] .hero__portrait-shell {
|
||||
position: relative;
|
||||
display: flex;
|
||||
isolation: isolate;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
@@ -3439,7 +3437,6 @@ html[data-theme="light"] .hero__portrait-shell {
|
||||
background: color-mix(in srgb, var(--surface) 94%, transparent);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
@@ -4162,7 +4159,6 @@ html[data-radius="strong"] .skill-task-card__solution {
|
||||
background: var(--surface);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
transition: border-color 0.22s ease;
|
||||
}
|
||||
@@ -4352,6 +4348,92 @@ a.contact-card--link:focus-visible {
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ── Neumorphic / Glass card (Figma) ───────────────────────────────── */
|
||||
.neu-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
width: 202px;
|
||||
height: 103px;
|
||||
padding: 1rem;
|
||||
border-radius: var(--radius-card);
|
||||
background: var(--accent);
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
2px 2px 2px rgba(0, 0, 0, 0.10),
|
||||
4px 8px 8px rgba(0, 0, 0, 0.15),
|
||||
4px 16px 32px rgba(0, 0, 0, 0.25),
|
||||
inset 1px 1px 0 rgba(255, 255, 255, 0.60),
|
||||
inset 2px 2px 2px rgba(255, 255, 255, 0.35),
|
||||
inset 3px 3px 4px rgba(255, 255, 255, 0.15),
|
||||
inset -2px -2px 4px rgba(0, 0, 0, 0.10),
|
||||
inset -1px -1px 0 rgba(0, 0, 0, 0.25);
|
||||
transition: box-shadow 0.28s ease, transform 0.28s ease;
|
||||
}
|
||||
|
||||
/* Радиальный блик + шум (градиент из Figma) */
|
||||
.neu-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
radial-gradient(
|
||||
ellipse at 0% 0%,
|
||||
rgba(255, 255, 255, 0.20) 0%,
|
||||
transparent 100%
|
||||
),
|
||||
url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
background-size: auto, 128px 128px;
|
||||
opacity: 0.35;
|
||||
mix-blend-mode: overlay;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.neu-card:hover {
|
||||
box-shadow:
|
||||
2px 4px 6px rgba(0, 0, 0, 0.14),
|
||||
6px 12px 16px rgba(0, 0, 0, 0.18),
|
||||
6px 24px 48px rgba(0, 0, 0, 0.28),
|
||||
inset 1px 1px 0 rgba(255, 255, 255, 0.65),
|
||||
inset 2px 2px 2px rgba(255, 255, 255, 0.40),
|
||||
inset 3px 3px 4px rgba(255, 255, 255, 0.18),
|
||||
inset -2px -2px 4px rgba(0, 0, 0, 0.12),
|
||||
inset -1px -1px 0 rgba(0, 0, 0, 0.28);
|
||||
transform: translateY(-3px) scale(1.02);
|
||||
}
|
||||
|
||||
.neu-card__title {
|
||||
margin: 0;
|
||||
font-family: var(--font-accent);
|
||||
font-size: 0.92rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.neu-card__meta {
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.3;
|
||||
opacity: 0.7;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.neu-card {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.neu-card:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.section--footerish {
|
||||
padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
|
||||
}
|
||||
|
||||
@@ -301,6 +301,38 @@
|
||||
.case-article.ds-page .contact-grid {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.sg-neu-demo {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.sg-neu-base {
|
||||
position: relative;
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius-card);
|
||||
padding: 2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sg-neu-base::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
background-size: 128px 128px;
|
||||
opacity: 0.35;
|
||||
mix-blend-mode: overlay;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sg-neu-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function () {
|
||||
@@ -825,6 +857,26 @@
|
||||
</ul>
|
||||
<p class="sg-label">.contact-card--link · --action · --brand-*</p>
|
||||
|
||||
<h3>Неуморфная карточка</h3>
|
||||
<p class="section__prose">
|
||||
Стекло-эффект с multiple shadow: три внешних тени (close / medium / far) + четыре внутренних + радиальный блик + шум. Источник — Figma.
|
||||
</p>
|
||||
<div class="sg-neu-demo">
|
||||
<div class="sg-neu-base">
|
||||
<div class="sg-neu-row">
|
||||
<div class="neu-card" style="background: var(--bg-elevated)">
|
||||
<span class="neu-card__title">Neutral</span>
|
||||
<span class="neu-card__meta">--bg-elevated</span>
|
||||
</div>
|
||||
<div class="neu-card" style="color: #fff">
|
||||
<span class="neu-card__title">Accent</span>
|
||||
<span class="neu-card__meta">--accent</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sg-label">.neu-card на .sg-neu-base</p>
|
||||
|
||||
<h3>Секция с фоном</h3>
|
||||
<p class="section__prose">
|
||||
На главной полоса <code>.section--surface</code> визуально читается через mesh; в кейсах фон страницы
|
||||
|
||||
Reference in new issue
Block a user