jirka/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Downloaded theme

Browse Source
This commit is contained in:
Jirka
2026-03-23 18:35:59 +01:00
parent 326fab0e42
commit d091efd432
86 changed files with 14512 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

271
themes/minimal-black/assets/css/components/cards.css Normal file
View File

@@ -0,0 +1,271 @@
/* ==========================================================================
CARD COMPONENTS
Home cards, project cards, post cards, CTA cards, badges
========================================================================== */
.card-home {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 0.5rem;
background-color: color-mix(in srgb, var(--color-surface) 96%, transparent);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.card-home--project {
position: relative;
overflow: hidden;
transition:
transform 0.18s ease-out,
box-shadow 0.18s ease-out,
border-color 0.18s ease-out,
background-color 0.18s ease-out;
}
.card-home--project::after {
content: "";
position: absolute;
inset: -40%;
background: radial-gradient(
circle at 120% 50%,
color-mix(in srgb, var(--color-accent) 70%, transparent),
transparent 60%
);
opacity: 0;
transform: translateX(-8px);
transition:
opacity 0.22s ease-out,
transform 0.22s ease-out;
pointer-events: none;
}
.card-home--project:hover {
transform: translateY(-4px) translateX(3px);
border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.7),
16px 0 38px rgba(124, 58, 237, 0.45); /* purple-ish accent on right */
background-color: color-mix(in srgb, var(--color-surface) 99%, transparent);
}
.card-home--project:hover::after {
opacity: 0.22;
transform: translateX(0);
}
.card-home-body {
display: flex;
flex-direction: column;
gap: 0.5rem;
text-decoration: none;
color: inherit;
}
.card-home--post {
background-color: color-mix(in srgb, var(--color-surface) 94%, transparent);
}
.card-home-header {
display: flex;
align-items: flex-start;
gap: 0.6rem;
}
.card-home-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.1rem;
height: 2.1rem;
border-radius: 999px;
border: 1px solid var(--color-border);
background-color: color-mix(in srgb, var(--color-bg) 92%, transparent);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
font-size: 0.85rem;
}
.card-badge {
margin-left: 0.25rem;
padding: 0.05rem 0.35rem;
border-radius: 999px;
background-color: color-mix(in srgb, var(--color-accent) 22%, transparent);
color: var(--color-accent);
font-size: 0.6rem;
font-weight: 600;
}
.card-home-footer {
margin-top: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
justify-content: space-between;
}
.card-home-footer--buttons {
padding-top: 0.4rem;
border-top: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
}
.card-tag-row {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.card-tag-pill {
padding: 0.1rem 0.45rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
background-color: color-mix(in srgb, var(--color-bg) 92%, transparent);
font-size: 0.65rem;
color: var(--color-text-muted);
}
.card-cta {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.7rem;
color: var(--color-text-muted);
text-decoration: none;
padding: 0.25rem 0.6rem;
border-radius: 999px;
border: 1px solid transparent;
transition:
color 0.15s ease-out,
border-color 0.15s ease-out,
background-color 0.15s ease-out,
transform 0.15s ease-out;
}
.card-cta-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.6rem;
border-radius: 8px;
font-size: 0.68rem;
color: var(--color-text-muted);
background-color: color-mix(in srgb, var(--color-bg) 92%, transparent);
border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
text-decoration: none;
transition:
color 0.15s ease-out,
background-color 0.15s ease-out,
border-color 0.15s ease-out,
transform 0.15s ease-out,
box-shadow 0.15s ease-out;
}
.card-cta-btn:hover {
color: var(--color-accent);
background-color: color-mix(in srgb, var(--color-surface) 96%, transparent);
border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
transform: translateY(-1px);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.card-cta-repo {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.7rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
background-color: color-mix(in srgb, var(--color-bg) 94%, transparent);
font-size: 0.7rem;
color: var(--color-text-muted);
text-decoration: none;
transition:
color 0.15s ease-out,
border-color 0.15s ease-out,
background-color 0.15s ease-out,
transform 0.15s ease-out,
box-shadow 0.15s ease-out;
}
.card-cta-repo:hover {
color: var(--color-accent);
border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
background-color: color-mix(in srgb, var(--color-surface) 96%, transparent);
transform: translateY(-1px);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
.card-cta:hover {
color: var(--color-accent);
border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
background-color: color-mix(in srgb, var(--color-surface) 94%, transparent);
transform: translateY(-1px);
}
.card-home--post {
position: relative;
overflow: hidden;
background-color: color-mix(in srgb, var(--color-surface) 94%, transparent);
border-left-width: 2px;
border-left-color: color-mix(in srgb, var(--color-border) 80%, transparent);
transition:
transform 0.18s ease-out,
box-shadow 0.18s ease-out,
border-color 0.18s ease-out,
background-color 0.18s ease-out;
}
.card-home--post::before {
content: "";
position: absolute;
left: -4px;
top: -20%;
bottom: -20%;
width: 10px;
background: linear-gradient(
to bottom,
transparent,
color-mix(in srgb, var(--color-accent) 70%, transparent),
transparent
);
opacity: 0;
transform: translateX(-6px);
transition:
opacity 0.22s ease-out,
transform 0.22s ease-out;
pointer-events: none;
}
.card-home--post:hover {
transform: translateY(-3px);
background-color: color-mix(in srgb, var(--color-surface) 98%, transparent);
border-left-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.65);
}
.card-home--post:hover::before {
opacity: 0.55;
transform: translateX(0);
}
.card-home-icon--post {
background-color: color-mix(in srgb, var(--color-bg) 94%, transparent);
}
.card-badge--soft {
background-color: color-mix(in srgb, var(--color-accent) 16%, transparent);
color: color-mix(in srgb, var(--color-accent) 85%, white);
}
.card {
border-radius: 0.75rem;
transition: all 0.2s ease-out;
}
.card-pad {
padding: 1rem;
}
.card:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
}

134
themes/minimal-black/assets/css/components/dock.css Normal file
View File

@@ -0,0 +1,134 @@
/* ==========================================================================
DOCK COMPONENT
Floating action dock with toggle and panel
========================================================================== */
@layer components {
.dock {
position: fixed;
right: 1.5rem;
bottom: 1.6rem;
z-index: 50;
}
.dock-inner {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.3rem 0.5rem;
border-radius: 9999px;
/* border: 1px solid var(--color-border);
background-color: color-mix(in srgb, var(--color-surface) 92%, transparent);
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); */
backdrop-filter: blur(16px);
}
.dock-panel {
@apply p-1;
display: inline-flex;
align-items: center;
gap: 0.35rem;
max-width: 0;
opacity: 0;
transform: translateX(6px);
overflow: hidden;
transition: max-width 0.18s ease-out, opacity 0.18s ease-out,
transform 0.18s ease-out;
}
.dock--open .dock-panel {
max-width: 10rem;
opacity: 1;
transform: translateX(0);
}
.dock-divider {
width: 1px;
height: 1.4rem;
background: linear-gradient(
to bottom,
transparent,
color-mix(in srgb, var(--color-border) 80%, transparent),
transparent
);
}
.dock-action {
@apply flex items-center justify-center;
width: 2rem;
height: 2rem;
border-radius: 9999px;
border: 1px solid var(--color-border);
background-color: color-mix(in srgb, var(--color-bg) 75%, transparent);
color: var(--color-text-muted);
cursor: pointer;
transition: background-color 0.16s ease-out, border-color 0.16s ease-out,
color 0.16s ease-out, transform 0.16s ease-out, box-shadow 0.16s ease-out;
}
.dock-action:hover {
border-color: var(--color-accent);
color: var(--color-accent);
transform: translateY(-1px);
/* box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55); */
}
.dock-toggle {
@apply flex items-center justify-center;
width: 2.1rem;
height: 2.1rem;
border-radius: 9999px;
border: 1px solid var(--color-border);
background-color: color-mix(in srgb, var(--color-bg) 85%, transparent);
color: var(--color-text-muted);
cursor: pointer;
transition: background-color 0.16s ease-out, border-color 0.16s ease-out,
transform 0.16s ease-out, box-shadow 0.16s ease-out;
}
.dock-toggle:hover {
border-color: var(--color-accent);
color: var(--color-accent);
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}
.dock-toggle-dots {
position: relative;
display: inline-block;
width: 0.8rem;
height: 0.16rem;
border-radius: 999px;
background-color: var(--color-text-muted);
}
.dock-toggle-dots::before,
.dock-toggle-dots::after {
content: "";
position: absolute;
inset-y: 0;
width: 0.16rem;
border-radius: 999px;
background-color: var(--color-text-muted);
}
.dock-toggle-dots::before {
left: -0.18rem;
}
.dock-toggle-dots::after {
right: -0.18rem;
}
.dock--open .dock-toggle-dots,
.dock--open .dock-toggle-dots::before,
.dock--open .dock-toggle-dots::after {
background-color: var(--color-accent);
}
.btn-primary-sm {
font-size: 0.75rem;
padding: 0.35rem 0.9rem;
border-radius: 999px;
}
}

203
themes/minimal-black/assets/css/components/navigation.css Normal file
View File

@@ -0,0 +1,203 @@
/* ==========================================================================
LAYOUT & NAVIGATION
Page layouts, headers, footers, navigation links
========================================================================== */
.layout-page {
@apply mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:py-12;
}
.layout-page-tight {
@apply mx-auto max-w-6xl px-4 py-4 sm:px-6 lg:py-10;
}
.section-stack {
@apply space-y-10;
}
.section-stack--home > * + * {
margin-top: 1.75rem;
}
.section-stack > div + div.posts-section {
border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
padding-top: 1.5rem;
}
/* Headings */
.heading-page {
@apply text-3xl font-semibold tracking-tight sm:text-4xl;
}
.heading-section {
@apply text-sm font-semibold tracking-tight;
}
.eyebrow {
@apply text-[0.65rem] uppercase tracking-[0.22em];
}
/* Cards */
.card {
@apply border border-border bg-surface rounded-xl shadow-sm;
}
.card-pad {
@apply p-4 sm:p-5;
}
.card-hover {
@apply transition-transform transition-shadow duration-150 ease-out;
}
.card-hover:hover {
@apply shadow-lg;
transform: translateY(-1px);
border-color: var(--color-accent);
}
/* Buttons */
.btn-primary {
@apply inline-flex items-center rounded-full bg-accent px-4 py-2 text-xs font-medium text-white shadow-sm transition-transform duration-150 ease-out;
}
.btn-primary:hover {
transform: translateY(-1px);
}
.btn-ghost {
@apply inline-flex items-center text-xs font-medium text-muted;
}
.nav-shell {
@apply rounded-full border border-border shadow-md backdrop-blur p-3;
background-color: color-mix(in srgb, var(--color-surface) 82%, transparent);
}
.nav-shell::before {
content: "";
position: absolute;
inset-inline: 0;
top: 0;
bottom: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent,
color-mix(in srgb, var(--color-accent) 80%, transparent),
transparent
);
opacity: 0.8;
pointer-events: none;
}
.nav-inner {
@apply flex items-center justify-between px-4 py-2 sm:px-5 sm:py-2.5;
}
/* Brand logo badge (fallback) */
.logo-badge {
@apply flex h-8 w-8 items-center justify-center rounded-full bg-accent text-[0.65rem] font-semibold text-white;
}
/* Nav links */
.nav-link {
@apply text-[0.78rem] font-medium text-muted;
}
.nav-link:hover {
color: var(--color-accent);
}
/* Theme toggle */
.theme-toggle {
@apply inline-flex h-8 w-8 items-center justify-center rounded-full border border-border bg-bg text-muted shadow-sm text-[0.7rem];
transition: background-color 0.15s ease-out, color 0.15s ease-out,
transform 0.15s ease-out;
}
.theme-toggle:hover {
@apply text-accent;
transform: translateY(-1px);
}
html[data-theme="dark"] .theme-toggle {
background-color: var(--color-surface);
}
/* Fancy underline link */
.link-underline {
position: relative;
display: inline-block;
}
.link-underline::after {
content: "";
position: absolute;
left: 0;
bottom: -0.15rem;
width: 0;
height: 1px;
background-color: var(--color-accent);
transition: width 0.16s ease-out;
}
.link-underline:hover::after {
width: 100%;
}
/* Footer shell */
.footer-shell {
@apply rounded-2xl border border-border shadow-md backdrop-blur;
position: relative;
overflow: hidden;
background-color: color-mix(in srgb, var(--color-surface) 86%, transparent);
}
.footer-shell::before {
content: "";
position: absolute;
inset-inline: 0;
top: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent,
color-mix(in srgb, var(--color-accent) 80%, transparent),
transparent
);
opacity: 0.8;
pointer-events: none;
}
.footer-inner {
@apply flex flex-col gap-3 px-4 py-3 text-[0.72rem] sm:flex-row sm:items-center sm:justify-between sm:px-5;
}
.footer-links {
@apply flex flex-wrap items-center gap-3;
}
.footer-link {
@apply inline-flex items-center gap-1 text-[0.75rem] font-medium text-muted transition-all duration-150 ease-out;
}
.footer-link:hover {
color: var(--color-accent);
}
.footer-small {
@apply text-[0.72rem] text-muted leading-relaxed;
}
.footer-float:hover {
color: var(--color-accent);
transform: translateY(-1px);
}
.footer-float:hover i {
filter: drop-shadow(
0 0 2px color-mix(in srgb, var(--color-accent) 60%, transparent)
);
}

289
themes/minimal-black/assets/css/components/search.css Normal file
View File

@@ -0,0 +1,289 @@
/* ==========================================================================
SEARCH OVERLAY
Search modal, search results, empty states
========================================================================== */
.search-overlay {
position: fixed;
inset: 0;
z-index: 40;
display: none;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease-out;
}
.search-overlay--open {
opacity: 1;
display: block;
pointer-events: auto;
}
.search-overlay-backdrop {
position: absolute;
inset: 0;
background: radial-gradient(
circle at top,
rgba(0, 0, 0, 0.4),
transparent 55%
),
rgba(0, 0, 0, 0.7);
backdrop-filter: blur(12px);
}
.search-panel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 36rem;
margin-inline: 1.5rem;
border-radius: 1.1rem;
border: 1px solid var(--color-border);
background-color: color-mix(in srgb, var(--color-bg) 96%, transparent);
box-shadow: 0 26px 70px rgba(0, 0, 0, 0.85);
padding: 0.8rem 0.9rem 0.6rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.search-overlay--open .search-panel {
animation: search-panel-in 0.18s ease-out;
}
.search-overlay-backdrop {
position: absolute;
inset: 0;
background: radial-gradient(
circle at top,
rgba(0, 0, 0, 0.4),
transparent 55%
),
rgba(0, 0, 0, 0.7);
backdrop-filter: blur(12px);
}
.search-overlay .search-overlay--open .search-overlay-backdrop {
animation: search-backdrop-in 0.18s ease-out;
}
.search-overlay--closing .search-panel {
animation: search-panel-out 0.18s ease-in forwards;
}
.search-overlay--closing .search-overlay-backdrop {
animation: search-backdrop-out 0.18s ease-in forwards;
}
.search-panel-header {
display: flex;
align-items: center;
gap: 0.6rem;
}
.search-input-wrap {
flex: 1;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.8rem;
border-radius: 999px;
border: 1px solid var(--color-border);
background-color: color-mix(in srgb, var(--color-surface) 96%, transparent);
}
.search-input {
flex: 1;
border: none;
outline: none;
font-size: 0.82rem;
background: transparent;
color: var(--color-text);
}
.search-input::placeholder {
color: var(--color-text-muted);
}
.search-close {
width: 2rem;
height: 2rem;
border-radius: 999px;
border: 1px solid var(--color-border);
background-color: color-mix(in srgb, var(--color-bg) 90%, transparent);
color: var(--color-text-muted);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.16s ease-out, border-color 0.16s ease-out,
color 0.16s ease-out, transform 0.16s ease-out;
}
.search-close:hover {
border-color: var(--color-accent);
color: var(--color-accent);
transform: translateY(-1px);
}
.search-panel-body {
border-radius: 0.9rem;
border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
background-color: color-mix(in srgb, var(--color-surface) 96%, transparent);
padding: 0.5rem 0.4rem 0.4rem;
display: flex;
flex-direction: column;
}
.search-results {
max-height: 18rem;
padding: 0.25rem 0.15rem 0.4rem;
overflow-y: auto;
}
.search-empty-state {
display: flex;
flex-direction: column;
align-items: center;
padding: 1.2rem 0.5rem 1.4rem;
gap: 0.4rem;
}
.search-empty-icon {
width: 2.3rem;
height: 2.3rem;
border-radius: 999px;
border: 1px solid var(--color-border);
background-color: color-mix(in srgb, var(--color-bg) 92%, transparent);
display: flex;
align-items: center;
justify-content: center;
}
.search-empty-title {
font-size: 0.86rem;
font-weight: 600;
color: var(--color-text);
}
.search-empty-subtitle {
font-size: 0.76rem;
color: var(--color-text-muted);
}
.search-footer-hints {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
border-top: 1px solid
color-mix(in srgb, var(--color-border) 75%, transparent);
padding: 0.4rem 0.5rem 0.1rem;
margin-top: 0.1rem;
}
.search-hint-key {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.68rem;
color: var(--color-text-muted);
}
.search-hint-key span:first-child,
.search-hint-key span:nth-child(2) {
padding: 0.1rem 0.3rem;
border-radius: 0.3rem;
border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
background-color: color-mix(in srgb, var(--color-bg) 96%, transparent);
font-size: 0.65rem;
}
.search-hint-key.search-hint-right {
margin-left: auto;
}
.search-result-item {
display: block;
padding: 0.42rem 0.55rem;
border-radius: 0.6rem;
text-decoration: none;
transition: background-color 0.12s ease-out, transform 0.12s ease-out;
}
.search-result-item:hover {
background-color: color-mix(in srgb, var(--color-surface) 92%, transparent);
transform: translateY(-1px);
}
.search-result-title {
font-size: 0.8rem;
font-weight: 500;
color: var(--color-text);
}
.search-result-meta {
margin-top: 0.15rem;
font-size: 0.7rem;
color: var(--color-text-muted);
}
.search-footer-hints {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
border-top: 1px solid
color-mix(in srgb, var(--color-border) 75%, transparent);
padding: 0.4rem 0.5rem 0.1rem;
margin-top: 0.1rem;
}
.search-hint-key {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.68rem;
color: var(--color-text-muted);
}
.search-hint-key span:first-child,
.search-hint-key span:nth-child(2) {
padding: 0.1rem 0.3rem;
border-radius: 0.3rem;
border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
background-color: color-mix(in srgb, var(--color-bg) 96%, transparent);
font-size: 0.65rem;
}
.search-hint-key.search-hint-right {
margin-left: auto;
}
.search-result-item {
display: block;
padding: 0.42rem 0.55rem;
border-radius: 0.6rem;
text-decoration: none;
transition: background-color 0.12s ease-out, transform 0.12s ease-out;
}
.search-result-item:hover {
background-color: color-mix(in srgb, var(--color-surface) 92%, transparent);
transform: translateY(-1px);
}
.search-result-title {
font-size: 0.8rem;
font-weight: 500;
color: var(--color-text);
}
.search-result-meta {
margin-top: 0.15rem;
font-size: 0.7rem;
color: var(--color-text-muted);
}

111
themes/minimal-black/assets/css/components/tech-marquee.css Normal file
View File

@@ -0,0 +1,111 @@
/* ==========================================================================
TECH MARQUEE
Technology carousel/strip component
========================================================================== */
.tech-carousel {
display: flex;
gap: 0.5rem;
padding: 0.3rem 0.1rem 0.1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.tech-carousel::-webkit-scrollbar {
height: 4px;
}
.tech-carousel::-webkit-scrollbar-thumb {
border-radius: 999px;
background-color: rgba(255, 255, 255, 0.12);
}
.tech-pill {
scroll-snap-align: start;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.7rem;
border-radius: 999px;
border: 1px solid var(--color-border);
background-color: color-mix(in srgb, var(--color-surface) 92%, transparent);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
white-space: nowrap;
}
.badge-available {
@apply inline-flex items-center gap-1.5;
padding: 0.25rem 0.7rem;
border-radius: 999px;
background-color: var(--color-accent);
color: white;
font-size: 0.7rem;
font-weight: 600;
box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.4);
}
/* --- Tech marquee --- */
.tech-icon {
font-size: 1.5rem;
}
.tech-strip {
position: relative;
overflow: hidden;
padding-block: 0.4rem;
}
.tech-strip-track {
@apply py-2;
display: inline-flex;
align-items: center;
white-space: nowrap;
animation-name: tech-marquee;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
}
.tech-strip-track {
gap: 1.5rem;
}
.tech-strip--wide .tech-strip-track--primary {
animation-duration: 40s;
}
.tech-strip--wide .tech-strip-track--secondary {
animation-duration: 40s;
animation-direction: reverse;
}
.tech-strip--compact .tech-strip-track--primary {
animation-duration: 40s;
}
.tech-strip--compact .tech-strip-track--secondary {
animation-duration: 48s;
animation-direction: reverse;
}
.tech-strip--compact .tech-strip-track {
gap: 1.1rem;
}
/* pause both rows on hover */
.tech-strip:hover .tech-strip-track {
animation-play-state: paused;
}
.tech-strip-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
opacity: 0.88;
transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}
.tech-strip-item:hover {
opacity: 1;
transform: translateY(-1px);
}