556 lines
18 KiB
CSS
556 lines
18 KiB
CSS
@import "tailwindcss";
|
|
@custom-variant dark (&:is(.dark *));/* ============================================================
|
|
TECH4BIZ DESIGN SYSTEM — Tailwind v4
|
|
Brand Primary: #A2E771 (Lime Green)
|
|
Philosophy: Light theme, no pure black, 3D-first, animated
|
|
============================================================ */
|
|
|
|
@theme {
|
|
/* ── Brand Primary — Lime Green #A2E771 ── */
|
|
--color-primary-50: #F3FCE9;
|
|
--color-primary-100: #E2F7C9;
|
|
--color-primary-200: #C9EF9E;
|
|
--color-primary-300: #B2E97E;
|
|
--color-primary-400: #A2E771;
|
|
--color-primary-500: #8FD95C;
|
|
--color-primary-600: #75BF46;
|
|
--color-primary-700: #5C9C37;
|
|
--color-primary-800: #477A2B;
|
|
--color-primary-900: #365F21;
|
|
|
|
/* ── Ink Neutrals (No Pure Black) ── */
|
|
--color-ink-0: #FFFFFF;
|
|
--color-ink-50: #F7F9F6;
|
|
--color-ink-100: #ECF0EA;
|
|
--color-ink-200: #DFE5DC;
|
|
--color-ink-300: #C6CFC2;
|
|
--color-ink-400: #A8B5A3;
|
|
--color-ink-500: #8A9985;
|
|
--color-ink-600: #5B6B57;
|
|
--color-ink-700: #43503F;
|
|
--color-ink-800: #232B21;
|
|
--color-ink-900: #1D241B;
|
|
|
|
/* ── Semantic Colors ── */
|
|
--color-success: #3FAE5C;
|
|
--color-warning: #E8A93F;
|
|
--color-danger: #E5484D;
|
|
--color-info: #4C8DF0;
|
|
|
|
/* ── Typography ── */
|
|
--font-sans: 'Outfit', 'Inter', ui-sans-serif, system-ui, sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
|
|
|
|
/* ── Spacing Scale ── */
|
|
--spacing-18: 4.5rem;
|
|
--spacing-22: 5.5rem;
|
|
|
|
/* ── Shadows ── */
|
|
--shadow-sm: 0 1px 3px 0 rgba(35, 43, 33, 0.06);
|
|
--shadow-md: 0 4px 12px -2px rgba(35, 43, 33, 0.08);
|
|
--shadow-lg: 0 8px 30px -4px rgba(35, 43, 33, 0.10);
|
|
--shadow-premium: 0 4px 24px -4px rgba(162, 231, 113, 0.25), 0 2px 8px -1px rgba(35, 43, 33, 0.06);
|
|
--shadow-glow: 0 0 30px rgba(162, 231, 113, 0.45), 0 0 60px rgba(162, 231, 113, 0.15);
|
|
--shadow-glow-sm: 0 0 15px rgba(162, 231, 113, 0.35);
|
|
--shadow-inner-glow: inset 0 1px 0 rgba(162, 231, 113, 0.15);
|
|
--shadow-3d: 0 20px 60px -10px rgba(35, 43, 33, 0.18), 0 8px 25px -5px rgba(162, 231, 113, 0.12);
|
|
|
|
/* ── Border Radius ── */
|
|
--radius-2xl: 1rem;
|
|
--radius-3xl: 1.5rem;
|
|
--radius-4xl: 2rem;
|
|
|
|
/* ── Animations ── */
|
|
--animate-float: float 6s ease-in-out infinite;
|
|
--animate-float-slow: float 9s ease-in-out infinite;
|
|
--animate-float-fast: float 4s ease-in-out infinite;
|
|
--animate-pulse-glow: pulse-glow 2.5s ease-in-out infinite;
|
|
--animate-shimmer: shimmer 2s linear infinite;
|
|
--animate-fade-in: fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
--animate-scale-up: scale-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
--animate-slide-up: slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
--animate-slide-right: slide-right 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
--animate-spin-slow: spin 8s linear infinite;
|
|
--animate-orbit: orbit 12s linear infinite;
|
|
--animate-morph: morph 8s ease-in-out infinite;
|
|
|
|
/* ── Keyframes ── */
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
33% { transform: translateY(-12px) rotate(1deg); }
|
|
66% { transform: translateY(-6px) rotate(-1deg); }
|
|
}
|
|
@keyframes pulse-glow {
|
|
0%, 100% { box-shadow: 0 0 15px rgba(162, 231, 113, 0.3); }
|
|
50% { box-shadow: 0 0 40px rgba(162, 231, 113, 0.6), 0 0 80px rgba(162, 231, 113, 0.2); }
|
|
}
|
|
@keyframes shimmer {
|
|
from { background-position: -200% center; }
|
|
to { background-position: 200% center; }
|
|
}
|
|
@keyframes fade-in {
|
|
from { opacity: 0; transform: translateY(12px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes scale-up {
|
|
from { opacity: 0; transform: scale(0.92) translateY(8px); }
|
|
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
}
|
|
@keyframes slide-up {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes slide-right {
|
|
from { opacity: 0; transform: translateX(-20px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
@keyframes orbit {
|
|
from { transform: rotate(0deg) translateX(120px) rotate(0deg); }
|
|
to { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
|
|
}
|
|
@keyframes morph {
|
|
0%, 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
|
|
34% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; }
|
|
67% { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; }
|
|
}
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
}
|
|
|
|
/* ============================================================
|
|
BASE STYLES
|
|
============================================================ */
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-ink-50);
|
|
color: var(--color-ink-800);
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Premium Scrollbar */
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: var(--color-ink-50); }
|
|
::-webkit-scrollbar-thumb { background: var(--color-ink-300); border-radius: 9999px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--color-ink-600); }
|
|
|
|
/* Focus ring */
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-primary-400);
|
|
outline-offset: 2px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* ============================================================
|
|
3D & PERSPECTIVE UTILITIES
|
|
============================================================ */
|
|
.perspective-1000 { perspective: 1000px; }
|
|
.perspective-1500 { perspective: 1500px; }
|
|
.preserve-3d { transform-style: preserve-3d; }
|
|
.backface-hidden { backface-visibility: hidden; }
|
|
.translate-z-0 { transform: translateZ(0); }
|
|
|
|
.card-3d {
|
|
transform-style: preserve-3d;
|
|
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
.card-3d:hover {
|
|
transform: rotateY(-4deg) rotateX(2deg) translateZ(8px);
|
|
}
|
|
|
|
/* ============================================================
|
|
GLASS MORPHISM
|
|
============================================================ */
|
|
.glass {
|
|
background: rgba(247, 249, 246, 0.72);
|
|
backdrop-filter: blur(20px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
border: 1px solid rgba(236, 240, 234, 0.8);
|
|
}
|
|
|
|
.glass-strong {
|
|
background: rgba(255, 255, 255, 0.88);
|
|
backdrop-filter: blur(32px) saturate(200%);
|
|
-webkit-backdrop-filter: blur(32px) saturate(200%);
|
|
border: 1px solid rgba(162, 231, 113, 0.2);
|
|
}
|
|
|
|
.glass-dark {
|
|
background: rgba(35, 43, 33, 0.75);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(162, 231, 113, 0.15);
|
|
}
|
|
|
|
/* ============================================================
|
|
GRADIENT UTILITIES
|
|
============================================================ */
|
|
.gradient-brand {
|
|
background: linear-gradient(135deg, var(--color-primary-300) 0%, var(--color-primary-500) 100%);
|
|
}
|
|
|
|
.gradient-brand-soft {
|
|
background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-primary-100) 100%);
|
|
}
|
|
|
|
.gradient-mesh {
|
|
background:
|
|
radial-gradient(at 40% 20%, rgba(162, 231, 113, 0.18) 0px, transparent 50%),
|
|
radial-gradient(at 80% 0%, rgba(117, 191, 70, 0.12) 0px, transparent 50%),
|
|
radial-gradient(at 0% 50%, rgba(162, 231, 113, 0.10) 0px, transparent 50%),
|
|
radial-gradient(at 80% 50%, rgba(79, 122, 43, 0.08) 0px, transparent 50%),
|
|
radial-gradient(at 0% 100%, rgba(162, 231, 113, 0.12) 0px, transparent 50%),
|
|
var(--color-ink-50);
|
|
}
|
|
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-400), var(--color-primary-700));
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.gradient-shimmer {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--color-primary-300) 0%,
|
|
var(--color-primary-500) 25%,
|
|
var(--color-primary-300) 50%,
|
|
var(--color-primary-500) 75%,
|
|
var(--color-primary-300) 100%
|
|
);
|
|
background-size: 200% auto;
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: shimmer 3s linear infinite;
|
|
}
|
|
|
|
/* ============================================================
|
|
PREMIUM COMPONENT UTILITIES
|
|
============================================================ */
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-500));
|
|
color: var(--color-ink-800);
|
|
font-weight: 600;
|
|
padding: 0.625rem 1.25rem;
|
|
border-radius: 0.625rem;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
box-shadow: 0 2px 8px rgba(162, 231, 113, 0.3), 0 1px 2px rgba(0,0,0,0.05);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.btn-primary::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.25), transparent);
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(162, 231, 113, 0.45), 0 4px 10px rgba(0,0,0,0.08);
|
|
}
|
|
.btn-primary:hover::before { opacity: 1; }
|
|
.btn-primary:active { transform: translateY(0); }
|
|
|
|
.btn-ghost {
|
|
background: transparent;
|
|
border: 1.5px solid var(--color-ink-200);
|
|
color: var(--color-ink-700);
|
|
font-weight: 600;
|
|
padding: 0.625rem 1.25rem;
|
|
border-radius: 0.625rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
.btn-ghost:hover {
|
|
background: var(--color-ink-100);
|
|
border-color: var(--color-ink-300);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.input-field {
|
|
width: 100%;
|
|
background: var(--color-ink-50);
|
|
border: 1.5px solid var(--color-ink-200);
|
|
border-radius: 0.625rem;
|
|
padding: 0.625rem 1rem;
|
|
font-size: 0.875rem;
|
|
color: var(--color-ink-800);
|
|
font-family: var(--font-sans);
|
|
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
outline: none;
|
|
}
|
|
.input-field.has-left-icon {
|
|
padding-left: 2.75rem;
|
|
}
|
|
.input-field.has-right-icon {
|
|
padding-right: 2.75rem;
|
|
}
|
|
.input-field:focus {
|
|
background: white;
|
|
border-color: var(--color-primary-400);
|
|
box-shadow: 0 0 0 3px rgba(162, 231, 113, 0.2), 0 1px 3px rgba(0,0,0,0.05);
|
|
}
|
|
.input-field::placeholder { color: var(--color-ink-400); }
|
|
|
|
.card {
|
|
background: white;
|
|
border: 1px solid var(--color-ink-100);
|
|
border-radius: 1rem;
|
|
box-shadow: var(--shadow-sm);
|
|
transition: box-shadow 0.3s, transform 0.3s;
|
|
}
|
|
.card:hover {
|
|
box-shadow: var(--shadow-lg);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.card-glass {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
border-radius: 1rem;
|
|
box-shadow: var(--shadow-3d);
|
|
}
|
|
|
|
/* ============================================================
|
|
FLOATING ORBS (Background Decoration)
|
|
============================================================ */
|
|
.orb {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(60px);
|
|
pointer-events: none;
|
|
animation: var(--animate-float);
|
|
}
|
|
.orb-primary {
|
|
background: radial-gradient(circle, rgba(162, 231, 113, 0.35) 0%, rgba(162, 231, 113, 0.05) 70%);
|
|
}
|
|
.orb-secondary {
|
|
background: radial-gradient(circle, rgba(117, 191, 70, 0.25) 0%, rgba(117, 191, 70, 0.03) 70%);
|
|
animation-delay: -3s;
|
|
animation-duration: 8s;
|
|
}
|
|
.orb-accent {
|
|
background: radial-gradient(circle, rgba(76, 141, 240, 0.15) 0%, rgba(76, 141, 240, 0.02) 70%);
|
|
animation-delay: -6s;
|
|
animation-duration: 11s;
|
|
}
|
|
|
|
/* ============================================================
|
|
STATUS BADGES
|
|
============================================================ */
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.125rem 0.625rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.6875rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
}
|
|
.badge-success { background: rgba(63, 174, 92, 0.12); color: #3FAE5C; border: 1px solid rgba(63, 174, 92, 0.25); }
|
|
.badge-warning { background: rgba(232, 169, 63, 0.12); color: #E8A93F; border: 1px solid rgba(232, 169, 63, 0.25); }
|
|
.badge-danger { background: rgba(229, 72, 77, 0.12); color: #E5484D; border: 1px solid rgba(229, 72, 77, 0.25); }
|
|
.badge-neutral { background: rgba(35, 43, 33, 0.06); color: #5B6B57; border: 1px solid rgba(35, 43, 33, 0.12); }
|
|
.badge-primary { background: rgba(162, 231, 113, 0.15); color: #477A2B; border: 1px solid rgba(162, 231, 113, 0.3); }
|
|
|
|
/* ============================================================
|
|
ANIMATION UTILITY CLASSES
|
|
============================================================ */
|
|
.animate-float { animation: float 6s ease-in-out infinite; }
|
|
.animate-float-slow { animation: float 9s ease-in-out infinite; }
|
|
.animate-float-fast { animation: float 4s ease-in-out infinite; }
|
|
.animate-pulse-glow { animation: pulse-glow 2.5s ease-in-out infinite; }
|
|
.animate-shimmer { animation: shimmer 2s linear infinite; }
|
|
.animate-fade-in { animation: fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
|
|
.animate-scale-up { animation: scale-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
|
|
.animate-slide-up { animation: slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
|
|
.animate-slide-right { animation: slide-right 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
|
|
.animate-spin-slow { animation: spin 8s linear infinite; }
|
|
.animate-orbit { animation: orbit 12s linear infinite; }
|
|
.animate-morph { animation: morph 8s ease-in-out infinite; }
|
|
|
|
.delay-100 { animation-delay: 0.1s; }
|
|
.delay-200 { animation-delay: 0.2s; }
|
|
.delay-300 { animation-delay: 0.3s; }
|
|
.delay-500 { animation-delay: 0.5s; }
|
|
.delay-700 { animation-delay: 0.7s; }
|
|
|
|
/* ============================================================
|
|
TRANSITION UTILITIES
|
|
============================================================ */
|
|
.transition-premium { transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
|
|
.transition-slow { transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
|
|
|
|
/* ============================================================
|
|
INTERACTIVE HOVER EFFECTS
|
|
============================================================ */
|
|
.hover-lift { transition: transform 0.3s, box-shadow 0.3s; }
|
|
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-3d); }
|
|
|
|
.hover-glow:hover { box-shadow: var(--shadow-glow); }
|
|
|
|
/* Magnetic button ripple effect */
|
|
.ripple {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.ripple::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -50%;
|
|
background: radial-gradient(circle, rgba(162, 231, 113, 0.3) 0%, transparent 70%);
|
|
opacity: 0;
|
|
transition: opacity 0.4s;
|
|
}
|
|
.ripple:hover::after { opacity: 1; }
|
|
|
|
/* ============================================================
|
|
TABLE UTILITIES
|
|
============================================================ */
|
|
.table-premium {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
}
|
|
.table-premium th {
|
|
background: var(--color-ink-50);
|
|
color: var(--color-ink-600);
|
|
font-size: 0.625rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
padding: 0.875rem 1.25rem;
|
|
border-bottom: 1px solid var(--color-ink-100);
|
|
}
|
|
.table-premium td {
|
|
padding: 1rem 1.25rem;
|
|
border-bottom: 1px solid var(--color-ink-50);
|
|
font-size: 0.875rem;
|
|
color: var(--color-ink-700);
|
|
vertical-align: middle;
|
|
transition: background 0.15s;
|
|
}
|
|
.table-premium tr:hover td { background: rgba(162, 231, 113, 0.03); }
|
|
.table-premium tr:last-child td { border-bottom: none; }
|
|
|
|
/* ============================================================
|
|
NAVIGATION
|
|
============================================================ */
|
|
.nav-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.5rem 0.875rem;
|
|
border-radius: 0.625rem;
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink-600);
|
|
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
position: relative;
|
|
}
|
|
.nav-link::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
background: var(--color-ink-100);
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.nav-link:hover { color: var(--color-ink-800); }
|
|
.nav-link:hover::before { opacity: 1; }
|
|
.nav-link.active {
|
|
background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-500));
|
|
color: var(--color-ink-800);
|
|
box-shadow: 0 2px 8px rgba(162, 231, 113, 0.35);
|
|
}
|
|
.nav-link.active::before { display: none; }
|
|
|
|
/* ============================================================
|
|
TYPOGRAPHY
|
|
============================================================ */
|
|
.heading-display {
|
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
|
font-weight: 800;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
.heading-section {
|
|
font-size: clamp(1.25rem, 3vw, 1.75rem);
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
letter-spacing: -0.015em;
|
|
}
|
|
.text-label {
|
|
font-size: 0.625rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--color-ink-600);
|
|
}
|
|
|
|
/* ============================================================
|
|
LOADING STATES
|
|
============================================================ */
|
|
@keyframes skeleton-wave {
|
|
from { background-position: -200px 0; }
|
|
to { background-position: calc(200px + 100%) 0; }
|
|
}
|
|
|
|
.skeleton {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--color-ink-100) 25%,
|
|
var(--color-ink-50) 50%,
|
|
var(--color-ink-100) 75%
|
|
);
|
|
background-size: 400px 100%;
|
|
animation: skeleton-wave 1.4s ease-in-out infinite;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
/* ============================================================
|
|
PROGRESS BAR
|
|
============================================================ */
|
|
.progress-bar {
|
|
height: 0.375rem;
|
|
border-radius: 9999px;
|
|
background: var(--color-ink-100);
|
|
overflow: hidden;
|
|
}
|
|
.progress-bar-fill {
|
|
height: 100%;
|
|
border-radius: 9999px;
|
|
background: linear-gradient(90deg, var(--color-primary-400), var(--color-primary-600));
|
|
transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
|
position: relative;
|
|
}
|
|
.progress-bar-fill::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
|
|
animation: shimmer 1.5s linear infinite;
|
|
}
|