foundation: project guide, tooling, design tokens, bilingual shell and routing contracts
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -1,43 +1,27 @@
|
||||
// skill-card.component.scss
|
||||
.card {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.1) 0%,
|
||||
rgba(255, 255, 255, 0.05) 100%
|
||||
);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 16px;
|
||||
padding: 1.5rem;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-6);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow:
|
||||
0 4px 24px rgba(0, 0, 0, 0.4),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
|
||||
|
||||
:host-context(.desktop) &:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.15);
|
||||
border-color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
transition:
|
||||
transform var(--duration-base) var(--ease-standard),
|
||||
box-shadow var(--duration-base) var(--ease-standard),
|
||||
border-color var(--duration-base) var(--ease-standard);
|
||||
|
||||
h3 {
|
||||
margin: 0 0 1rem;
|
||||
font-size: 0.875rem;
|
||||
margin: 0 0 var(--space-4);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.icons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
gap: var(--space-4);
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
@@ -50,13 +34,23 @@
|
||||
height: 40px;
|
||||
object-fit: contain;
|
||||
filter: grayscale(100%) brightness(0.8);
|
||||
transition: filter 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
:host-context(.desktop) &:hover img {
|
||||
filter: none;
|
||||
transform: scale(1.1);
|
||||
transition:
|
||||
filter var(--duration-fast) var(--ease-standard),
|
||||
transform var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-raised);
|
||||
border-color: var(--surface-glass-border-strong);
|
||||
}
|
||||
|
||||
.card .icons a:hover img {
|
||||
filter: none;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user