597 lines
19 KiB
CSS
597 lines
19 KiB
CSS
@import "tailwindcss";
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/* ============================================================
|
|
TECH4BIZ DESIGN SYSTEM — MONOCHROME PREMIUM
|
|
Brand Primary: #18181B (Zinc / Charcoal)
|
|
Philosophy: Clean contrast, neutral slate variables, fluid transitions
|
|
============================================================ */
|
|
|
|
@theme {
|
|
/* ── Brand Primary — Zinc / Charcoal ── */
|
|
--color-primary-50: #fafafa;
|
|
--color-primary-100: #f4f4f5;
|
|
--color-primary-200: #e4e4e7;
|
|
--color-primary-300: #d4d4d8;
|
|
--color-primary-400: #a1a1aa;
|
|
--color-primary-500: #71717a;
|
|
--color-primary-600: #52525b;
|
|
--color-primary-700: #3f3f46;
|
|
--color-primary-800: #27272a;
|
|
--color-primary-900: #18181b;
|
|
|
|
/* ── Ink Neutrals (Zinc Grays) ── */
|
|
--color-ink-0: #ffffff;
|
|
--color-ink-50: #fafafa;
|
|
--color-ink-100: #f4f4f5;
|
|
--color-ink-200: #e4e4e7;
|
|
--color-ink-300: #d4d4d8;
|
|
--color-ink-400: #a1a1aa;
|
|
--color-ink-500: #71717a;
|
|
--color-ink-600: #52525b;
|
|
--color-ink-700: #3f3f46;
|
|
--color-ink-800: #27272a;
|
|
--color-ink-900: #09090b;
|
|
|
|
/* ── Semantic Colors ── */
|
|
--color-success: #10b981;
|
|
--color-warning: #f59e0b;
|
|
--color-danger: #ef4444;
|
|
--color-info: #3b82f6;
|
|
|
|
/* ── 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 2px 0 rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
|
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
|
|
--shadow-premium: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 8px -1px rgba(0, 0, 0, 0.03);
|
|
--shadow-glow: 0 0 30px rgba(113, 113, 122, 0.1), 0 0 60px rgba(113, 113, 122, 0.03);
|
|
--shadow-glow-sm: 0 0 15px rgba(113, 113, 122, 0.05);
|
|
--shadow-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
|
--shadow-3d: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
|
|
|
|
/* ── 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.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
--animate-scale-up: scale-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
--animate-slide-up: slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
--animate-slide-right: slide-right 0.35s 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(-8px) rotate(0.5deg); }
|
|
66% { transform: translateY(-4px) rotate(-0.5deg); }
|
|
}
|
|
@keyframes pulse-glow {
|
|
0%, 100% { box-shadow: 0 0 15px rgba(113, 113, 122, 0.1); }
|
|
50% { box-shadow: 0 0 30px rgba(113, 113, 122, 0.2); }
|
|
}
|
|
@keyframes shimmer {
|
|
from { background-position: -200% center; }
|
|
to { background-position: 200% center; }
|
|
}
|
|
@keyframes fade-in {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes scale-up {
|
|
from { opacity: 0; transform: scale(0.96) translateY(4px); }
|
|
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
}
|
|
@keyframes slide-up {
|
|
from { opacity: 0; transform: translateY(12px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes slide-right {
|
|
from { opacity: 0; transform: translateX(-12px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
@keyframes orbit {
|
|
from { transform: rotate(0deg) translateX(100px) rotate(0deg); }
|
|
to { transform: rotate(360deg) translateX(100px) 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); }
|
|
}
|
|
}
|
|
|
|
:root {
|
|
/* Gentle Slate theme for Light Mode - Softened Contrast */
|
|
--color-primary-50: #f8fafc;
|
|
--color-primary-100: #f1f5f9;
|
|
--color-primary-200: #e2e8f0;
|
|
--color-primary-300: #cbd5e1;
|
|
--color-primary-400: #94a3b8;
|
|
--color-primary-500: #64748b;
|
|
--color-primary-600: #475569;
|
|
--color-primary-700: #334155;
|
|
--color-primary-800: #1e293b;
|
|
--color-primary-900: #0f172a;
|
|
|
|
--color-ink-0: #ffffff;
|
|
--color-ink-50: #f8fafc;
|
|
--color-ink-100: #f1f5f9;
|
|
--color-ink-200: #e2e8f0;
|
|
--color-ink-300: #cbd5e1;
|
|
--color-ink-400: #94a3b8;
|
|
--color-ink-500: #64748b;
|
|
--color-ink-600: #475569;
|
|
--color-ink-700: #334155;
|
|
--color-ink-800: #1e293b;
|
|
--color-ink-900: #0f172a;
|
|
}
|
|
|
|
.dark {
|
|
/* Obsidian/Charcoal theme for Dark Mode - Correctly Inverted Scales */
|
|
--color-primary-50: #050507;
|
|
--color-primary-100: #141417;
|
|
--color-primary-200: #27272a;
|
|
--color-primary-300: #3f3f46;
|
|
--color-primary-400: #52525b;
|
|
--color-primary-500: #71717a;
|
|
--color-primary-600: #a1a1aa;
|
|
--color-primary-700: #d4d4d8;
|
|
--color-primary-800: #e4e4e7;
|
|
--color-primary-900: #ffffff;
|
|
|
|
--color-ink-0: #0d0d10; /* Soft charcoal-slate card background */
|
|
--color-ink-50: #050507; /* Deep obsidian canvas background */
|
|
--color-ink-100: #141417; /* Panels/hover states */
|
|
--color-ink-200: #27272a; /* Borders */
|
|
--color-ink-300: #3f3f46;
|
|
--color-ink-400: #52525b;
|
|
--color-ink-500: #71717a; /* Muted texts */
|
|
--color-ink-600: #a1a1aa;
|
|
--color-ink-700: #d4d4d8;
|
|
--color-ink-800: #e4e4e7; /* Body texts */
|
|
--color-ink-900: #ffffff; /* Primary texts/headers */
|
|
}
|
|
|
|
/* ============================================================
|
|
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-200); border-radius: 9999px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--color-ink-400); }
|
|
|
|
/* Focus ring */
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-ink-900);
|
|
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(-2deg) rotateX(1deg) translateZ(4px);
|
|
}
|
|
|
|
/* ============================================================
|
|
GLASS MORPHISM
|
|
============================================================ */
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid rgba(228, 228, 231, 0.5);
|
|
}
|
|
|
|
.glass-strong {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
border: 1px solid rgba(228, 228, 231, 0.8);
|
|
}
|
|
|
|
.glass-dark {
|
|
background: rgba(9, 9, 11, 0.75);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid rgba(39, 39, 42, 0.4);
|
|
}
|
|
|
|
/* ============================================================
|
|
GRADIENT UTILITIES
|
|
============================================================ */
|
|
.gradient-brand {
|
|
background: linear-gradient(135deg, var(--color-ink-800) 0%, var(--color-ink-900) 100%);
|
|
}
|
|
|
|
.gradient-brand-soft {
|
|
background: linear-gradient(135deg, var(--color-ink-50) 0%, var(--color-ink-100) 100%);
|
|
}
|
|
|
|
.gradient-mesh {
|
|
background:
|
|
radial-gradient(at 40% 20%, rgba(113, 113, 122, 0.05) 0px, transparent 50%),
|
|
radial-gradient(at 80% 0%, rgba(82, 82, 91, 0.03) 0px, transparent 50%),
|
|
radial-gradient(at 0% 50%, rgba(113, 113, 122, 0.04) 0px, transparent 50%),
|
|
radial-gradient(at 80% 50%, rgba(39, 39, 42, 0.02) 0px, transparent 50%),
|
|
radial-gradient(at 0% 100%, rgba(113, 113, 122, 0.05) 0px, transparent 50%),
|
|
var(--color-ink-50);
|
|
}
|
|
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, var(--color-ink-900), var(--color-ink-600), var(--color-ink-800));
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.gradient-shimmer {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--color-ink-600) 0%,
|
|
var(--color-ink-800) 25%,
|
|
var(--color-ink-600) 50%,
|
|
var(--color-ink-800) 75%,
|
|
var(--color-ink-600) 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: var(--color-ink-900);
|
|
color: var(--color-ink-0);
|
|
font-weight: 550;
|
|
padding: 0.625rem 1.25rem;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
.btn-primary:hover {
|
|
background: var(--color-ink-800);
|
|
}
|
|
.btn-primary:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.btn-ghost {
|
|
background: transparent;
|
|
border: 1px solid var(--color-ink-200);
|
|
color: var(--color-ink-700);
|
|
font-weight: 550;
|
|
padding: 0.625rem 1.25rem;
|
|
border-radius: 0.5rem;
|
|
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);
|
|
}
|
|
|
|
.input-field {
|
|
width: 100%;
|
|
background: var(--color-ink-0);
|
|
border: 1px solid var(--color-ink-200);
|
|
border-radius: 0.5rem;
|
|
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 {
|
|
border-color: var(--color-ink-900);
|
|
box-shadow: 0 0 0 3px rgba(9, 9, 11, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03);
|
|
}
|
|
.input-field::placeholder { color: var(--color-ink-400); }
|
|
|
|
.card {
|
|
background: white;
|
|
border: 1px solid var(--color-ink-100);
|
|
border-radius: 0.75rem;
|
|
box-shadow: var(--shadow-sm);
|
|
transition: box-shadow 0.2s, transform 0.2s;
|
|
}
|
|
.card:hover {
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.card-glass {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(228, 228, 231, 0.4);
|
|
border-radius: 0.75rem;
|
|
box-shadow: var(--shadow-premium);
|
|
}
|
|
|
|
/* ============================================================
|
|
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(113, 113, 122, 0.08) 0%, rgba(113, 113, 122, 0) 70%);
|
|
}
|
|
.orb-secondary {
|
|
background: radial-gradient(circle, rgba(82, 82, 91, 0.06) 0%, rgba(82, 82, 91, 0) 70%);
|
|
animation-delay: -3s;
|
|
animation-duration: 8s;
|
|
}
|
|
.orb-accent {
|
|
background: radial-gradient(circle, rgba(161, 161, 170, 0.04) 0%, rgba(161, 161, 170, 0) 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(16, 185, 129, 0.08); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.15); }
|
|
.badge-warning { background: rgba(245, 158, 11, 0.08); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.15); }
|
|
.badge-danger { background: rgba(239, 68, 68, 0.08); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.15); }
|
|
.badge-neutral { background: rgba(82, 82, 91, 0.08); color: #52525b; border: 1px solid rgba(82, 82, 91, 0.15); }
|
|
.badge-primary { background: rgba(9, 9, 11, 0.06); color: #09090b; border: 1px solid rgba(9, 9, 11, 0.12); }
|
|
|
|
/* ============================================================
|
|
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.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
|
|
.animate-scale-up { animation: scale-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
|
|
.animate-slide-up { animation: slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
|
|
.animate-slide-right { animation: slide-right 0.35s 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.2s cubic-bezier(0.16, 1, 0.3, 1); }
|
|
.transition-slow { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
|
|
|
|
/* ============================================================
|
|
INTERACTIVE HOVER EFFECTS
|
|
============================================================ */
|
|
.hover-lift { transition: transform 0.2s, box-shadow 0.2s; }
|
|
.hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
|
|
|
|
.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(113, 113, 122, 0.1) 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(113, 113, 122, 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.5rem;
|
|
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: var(--color-ink-900);
|
|
color: var(--color-ink-0);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
.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: var(--color-ink-900);
|
|
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.2), transparent);
|
|
animation: shimmer 1.5s linear infinite;
|
|
}
|