asepharyana
d53ec74d64
- Replace @apply im-btn in im-btn-primary/secondary/ghost with inline Tailwind utilities + CSS properties - Replace @apply im-status-dot in status dot variants with inline properties - Tailwind 4 cannot @apply component-level classes from within @layer components — only standard utility classes are valid
676 lines
25 KiB
CSS
676 lines
25 KiB
CSS
/* ═══════════════════════════════════════════════════════════════════════════
|
|
IMPHNEN Design System — Approachable Modernism
|
|
Manifestasi visual dari semangat komunitas programmer terbesar Indonesia.
|
|
Dibingkai dengan cinta oleh Cyrene ❄️🌺
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
|
|
@import "tailwindcss";
|
|
@config "../tailwind.config.js";
|
|
|
|
/* ─── Google Fonts: Poppins — monofamily yang friendly & percaya diri ─── */
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
BASE LAYER — IMPHNEN Design Tokens
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
@layer base {
|
|
:root {
|
|
/* ─── Surface & Background ────────────────────────────────────────── */
|
|
--background: #ffffff;
|
|
--foreground: #1a1a1a;
|
|
--card: #ffffff;
|
|
--card-foreground: #1a1a1a;
|
|
--muted: #f5f5f5;
|
|
--muted-foreground: #666666;
|
|
--accent: #f0f0f0;
|
|
--accent-foreground: #1a1a1a;
|
|
--popover: #ffffff;
|
|
--popover-foreground: #1a1a1a;
|
|
|
|
/* ─── Primary — Signature IMPHNEN Blue (#23a1eb) ─────────────────── */
|
|
/* Energi, kepercayaan, dan kehangatan digital */
|
|
--primary: #23a1eb;
|
|
--primary-foreground: #ffffff;
|
|
--primary-soft: #e1f0fd;
|
|
--primary-hover: #1a8fd9;
|
|
--primary-active: #0877c1;
|
|
|
|
/* ─── Secondary — Facebook Integration (#1877f2) ─────────────────── */
|
|
/* Lebih gelap & saturated untuk hierarki visual */
|
|
--secondary: #1877f2;
|
|
--secondary-foreground: #ffffff;
|
|
--secondary-soft: #e7f1ff;
|
|
|
|
/* ─── Tertiary — Discord Accent (#5865f2) ────────────────────────── */
|
|
/* Kehadiran brand di ekosistem platform */
|
|
--tertiary: #5865f2;
|
|
--tertiary-foreground: #ffffff;
|
|
--tertiary-soft: #eef0ff;
|
|
|
|
/* ─── Semantic Colors ────────────────────────────────────────────── */
|
|
--success: #22c55e;
|
|
--success-soft: #dcfce7;
|
|
--warning: #f59e0b;
|
|
--warning-soft: #fef3c7;
|
|
--destructive: #e4405f;
|
|
--destructive-foreground: #ffffff;
|
|
--destructive-soft: #ffebee;
|
|
--info: #3b82f6;
|
|
--info-soft: #dbeafe;
|
|
|
|
/* ─── Borders & Inputs ───────────────────────────────────────────── */
|
|
--border: #e0e0e0;
|
|
--border-hover: #cccccc;
|
|
--input: #e0e0e0;
|
|
--ring: #23a1eb;
|
|
|
|
/* ─── Radius — Friendly Geometry ─────────────────────────────────── */
|
|
--radius-sm: 0.25rem;
|
|
--radius: 0.5rem;
|
|
--radius-md: 0.75rem;
|
|
--radius-lg: 1rem;
|
|
--radius-xl: 1.5rem;
|
|
--radius-full: 9999px;
|
|
|
|
/* ─── Elevation — Subtle Shadow Stack ────────────────────────────── */
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
--shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
--shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);
|
|
|
|
/* ─── Glow — Branded Auroras ─────────────────────────────────────── */
|
|
--primary-glow: rgba(35, 161, 235, 0.15);
|
|
--tertiary-glow: rgba(88, 101, 242, 0.15);
|
|
--destructive-glow: rgba(228, 64, 95, 0.15);
|
|
--success-glow: rgba(34, 197, 94, 0.15);
|
|
|
|
/* ─── Spacing — Rhythm System ────────────────────────────────────── */
|
|
--space-xs: 4px;
|
|
--space-sm: 12px;
|
|
--space-md: 24px;
|
|
--space-lg: 40px;
|
|
--space-xl: 64px;
|
|
--gutter: 24px;
|
|
--container-max: 1280px;
|
|
|
|
/* ─── Transition — Snappy & Responsive ──────────────────────────── */
|
|
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* ─── Dark Mode Theme ──────────────────────────────────────────────────── */
|
|
[data-theme="dark"] {
|
|
--background: #1c1c1f;
|
|
--foreground: #f0f0f2;
|
|
--card: #1c1c1f;
|
|
--card-foreground: #f0f0f2;
|
|
--muted: #141417;
|
|
--muted-foreground: #a0a0a6;
|
|
--accent: #26262a;
|
|
--accent-foreground: #f0f0f2;
|
|
--popover: #1c1c1f;
|
|
--popover-foreground: #f0f0f2;
|
|
--primary: #54a2ff;
|
|
--primary-foreground: #0d0d0f;
|
|
--primary-soft: #18263a;
|
|
--primary-hover: #3d8ee8;
|
|
--primary-active: #2a7ad4;
|
|
--secondary: #4a8ef5;
|
|
--secondary-foreground: #0d0d0f;
|
|
--secondary-soft: #1a274a;
|
|
--tertiary: #7984f5;
|
|
--tertiary-foreground: #0d0d0f;
|
|
--tertiary-soft: #20266a;
|
|
--success: #34d399;
|
|
--success-soft: #13261a;
|
|
--warning: #fbbf24;
|
|
--warning-soft: #261a10;
|
|
--destructive: #f87171;
|
|
--destructive-soft: #2a1418;
|
|
--info: #60a5fa;
|
|
--info-soft: #141e38;
|
|
--border: #343438;
|
|
--border-hover: #48484d;
|
|
--input: #343438;
|
|
--ring: #54a2ff;
|
|
--outline: #6a6a70;
|
|
--outline-variant: #404044;
|
|
--primary-glow: rgba(84,162,255,0.15);
|
|
--tertiary-glow: rgba(121,132,245,0.15);
|
|
--destructive-glow: rgba(248,113,113,0.15);
|
|
--success-glow: rgba(52,211,153,0.15);
|
|
--surface: #1c1c1f;
|
|
--surface-dim: #141417;
|
|
--surface-bright: #2c2c30;
|
|
--on-surface: #f0f0f2;
|
|
--on-surface-variant: #a0a0a6;
|
|
--inverse-surface: #f0f0f2;
|
|
--inverse-on-surface: #1c1c1f;
|
|
--surface-container: #26262a;
|
|
--surface-container-low: #202023;
|
|
--surface-container-high: #2c2c30;
|
|
--surface-container-highest: #323236;
|
|
}
|
|
|
|
/* ─── Global Resets ──────────────────────────────────────────────────── */
|
|
* {
|
|
border-color: var(--border);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
min-height: 100%;
|
|
}
|
|
|
|
/* ─── Smooth Scroll ──────────────────────────────────────────────────── */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* ─── Selection ──────────────────────────────────────────────────────── */
|
|
::selection {
|
|
background-color: var(--primary-soft);
|
|
color: var(--on-primary-container, #0d4a7a);
|
|
}
|
|
|
|
/* ─── Theme Transition ─────────────────────────────────────────────────── */
|
|
html.theme-transitioning,
|
|
html.theme-transitioning *,
|
|
html.theme-transitioning *::before,
|
|
html.theme-transitioning *::after {
|
|
transition: background-color 200ms ease, color 150ms ease, border-color 150ms ease, box-shadow 200ms ease !important;
|
|
}
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
THEME EXTENSION — IMPHNEN Custom Tailwind Tokens
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
@theme {
|
|
/* ─── Typography Scale — Poppins Monofamily ─────────────────────────── */
|
|
--font-family-display: 'Poppins', sans-serif;
|
|
--font-size-display: 60px;
|
|
--font-weight-display: 700;
|
|
--line-height-display: 68px;
|
|
--letter-spacing-display: -0.04em;
|
|
|
|
--font-size-headline-lg: 40px;
|
|
--font-weight-headline-lg: 600;
|
|
--line-height-headline-lg: 48px;
|
|
--letter-spacing-headline-lg: -0.02em;
|
|
|
|
--font-size-headline-md: 28px;
|
|
--font-weight-headline-md: 600;
|
|
--line-height-headline-md: 36px;
|
|
--letter-spacing-headline-md: -0.01em;
|
|
|
|
--font-size-title-lg: 20px;
|
|
--font-weight-title-lg: 600;
|
|
--line-height-title-lg: 28px;
|
|
|
|
--font-size-body-lg: 18px;
|
|
--font-weight-body-lg: 400;
|
|
--line-height-body-lg: 28px;
|
|
--letter-spacing-body-lg: 0.01em;
|
|
|
|
--font-size-body-md: 16px;
|
|
--font-weight-body-md: 400;
|
|
--line-height-body-md: 24px;
|
|
--letter-spacing-body-md: 0.01em;
|
|
|
|
--font-size-label-md: 14px;
|
|
--font-weight-label-md: 600;
|
|
--line-height-label-md: 20px;
|
|
--letter-spacing-label-md: 0.02em;
|
|
|
|
--font-size-label-sm: 12px;
|
|
--font-weight-label-sm: 500;
|
|
--line-height-label-sm: 16px;
|
|
--letter-spacing-label-sm: 0.03em;
|
|
|
|
/* ─── Brand Colors ──────────────────────────────────────────────────── */
|
|
--color-primary: #23a1eb;
|
|
--color-primary-foreground: #ffffff;
|
|
--color-primary-soft: #e1f0fd;
|
|
--color-primary-hover: #1a8fd9;
|
|
--color-primary-active: #0877c1;
|
|
|
|
--color-secondary: #1877f2;
|
|
--color-secondary-foreground: #ffffff;
|
|
--color-secondary-soft: #e7f1ff;
|
|
|
|
--color-tertiary: #5865f2;
|
|
--color-tertiary-foreground: #ffffff;
|
|
--color-tertiary-soft: #eef0ff;
|
|
|
|
--color-success: #22c55e;
|
|
--color-success-soft: #dcfce7;
|
|
--color-warning: #f59e0b;
|
|
--color-warning-soft: #fef3c7;
|
|
--color-destructive: #e4405f;
|
|
--color-destructive-soft: #ffebee;
|
|
--color-info: #3b82f6;
|
|
--color-info-soft: #dbeafe;
|
|
|
|
/* ─── Surface Bridge ────────────────────────────────────────────────── */
|
|
--color-surface: #ffffff;
|
|
--color-surface-dim: #f5f5f5;
|
|
--color-surface-bright: #ffffff;
|
|
--color-on-surface: #1a1a1a;
|
|
--color-on-surface-variant: #666666;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
COMPONENT LAYER — IMPHNEN Design Patterns
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
@layer components {
|
|
/* ─── Glass Morphism ────────────────────────────────────────────────── */
|
|
.im-surface {
|
|
@apply bg-white border border-[#e0e0e0] rounded-xl;
|
|
}
|
|
|
|
.im-glass {
|
|
@apply bg-white/70 backdrop-blur-sm border border-[#e0e0e0]/60 rounded-xl;
|
|
}
|
|
|
|
.im-glass-strong {
|
|
@apply bg-white/85 backdrop-blur-md border border-[#e0e0e0]/80 rounded-xl shadow-sm;
|
|
}
|
|
|
|
/* ─── Gradient Text ─────────────────────────────────────────────────── */
|
|
.im-gradient-text {
|
|
@apply bg-clip-text text-transparent bg-gradient-to-r from-[#23a1eb] to-[#1877f2];
|
|
}
|
|
|
|
.im-gradient-text-warm {
|
|
@apply bg-clip-text text-transparent bg-gradient-to-r from-[#23a1eb] to-[#5865f2];
|
|
}
|
|
|
|
/* ─── IMPHNEN Button Base ────────────────────────────────────────────── */
|
|
.im-btn {
|
|
@apply inline-flex items-center justify-center gap-2 font-semibold;
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 14px;
|
|
letter-spacing: 0.02em;
|
|
line-height: 20px;
|
|
border-radius: var(--radius-lg);
|
|
padding: 12px 24px;
|
|
height: 44px;
|
|
transition: background-color var(--transition-fast);
|
|
}
|
|
|
|
.im-btn-primary {
|
|
@apply inline-flex items-center justify-center gap-2 font-semibold text-white;
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 14px;
|
|
letter-spacing: 0.02em;
|
|
line-height: 20px;
|
|
border-radius: var(--radius-lg);
|
|
padding: 12px 24px;
|
|
height: 44px;
|
|
transition: background-color var(--transition-fast);
|
|
background-color: var(--primary);
|
|
}
|
|
.im-btn-primary:hover {
|
|
background-color: var(--primary-hover);
|
|
}
|
|
.im-btn-primary:active {
|
|
background-color: var(--primary-active);
|
|
}
|
|
|
|
.im-btn-secondary {
|
|
@apply inline-flex items-center justify-center gap-2 font-semibold;
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 14px;
|
|
letter-spacing: 0.02em;
|
|
line-height: 20px;
|
|
border-radius: var(--radius-lg);
|
|
padding: 12px 24px;
|
|
height: 44px;
|
|
transition: background-color var(--transition-fast);
|
|
background-color: transparent;
|
|
color: var(--primary);
|
|
border: 1px solid var(--border);
|
|
}
|
|
.im-btn-secondary:hover {
|
|
background-color: var(--accent);
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.im-btn-ghost {
|
|
@apply inline-flex items-center justify-center gap-2 font-semibold;
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 14px;
|
|
letter-spacing: 0.02em;
|
|
line-height: 20px;
|
|
border-radius: var(--radius-lg);
|
|
padding: 12px 24px;
|
|
height: 44px;
|
|
transition: background-color var(--transition-fast);
|
|
background-color: transparent;
|
|
color: var(--foreground);
|
|
}
|
|
.im-btn-ghost:hover {
|
|
background-color: var(--accent);
|
|
color: var(--primary);
|
|
}
|
|
|
|
/* ─── Badge / Pill ──────────────────────────────────────────────────── */
|
|
.im-badge {
|
|
@apply inline-flex items-center;
|
|
border-radius: var(--radius-full);
|
|
padding: 4px 12px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.03em;
|
|
line-height: 16px;
|
|
background-color: var(--primary-soft);
|
|
color: var(--on-primary-container, #0d4a7a);
|
|
}
|
|
|
|
.im-badge-secondary {
|
|
background-color: var(--secondary-soft);
|
|
color: var(--on-secondary-container, #003d99);
|
|
}
|
|
|
|
.im-badge-tertiary {
|
|
background-color: var(--tertiary-soft);
|
|
color: var(--on-tertiary-container, #1a2466);
|
|
}
|
|
|
|
.im-badge-success {
|
|
background-color: var(--success-soft);
|
|
color: #166534;
|
|
}
|
|
|
|
.im-badge-warning {
|
|
background-color: var(--warning-soft);
|
|
color: #92400e;
|
|
}
|
|
|
|
.im-badge-destructive {
|
|
background-color: var(--destructive-soft);
|
|
color: var(--destructive);
|
|
}
|
|
|
|
/* ─── Card ──────────────────────────────────────────────────────────── */
|
|
.im-card {
|
|
background-color: var(--card);
|
|
border-radius: var(--radius-xl);
|
|
padding: var(--space-md);
|
|
border: 1px solid var(--border);
|
|
box-shadow: var(--shadow-sm);
|
|
transition: all var(--transition-slow);
|
|
}
|
|
.im-card:hover {
|
|
border-color: var(--primary);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
/* ─── Input ─────────────────────────────────────────────────────────── */
|
|
.im-input {
|
|
background-color: var(--muted);
|
|
color: var(--foreground);
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
border-radius: var(--radius);
|
|
padding: var(--space-sm);
|
|
border: 1px solid var(--border);
|
|
transition: border-color var(--transition-fast);
|
|
width: 100%;
|
|
font-family: 'Poppins', sans-serif;
|
|
}
|
|
.im-input:focus {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px var(--primary-glow);
|
|
outline: none;
|
|
}
|
|
|
|
/* ─── Nav Link ──────────────────────────────────────────────────────── */
|
|
.im-nav-link {
|
|
color: var(--foreground);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
padding: 8px 12px;
|
|
position: relative;
|
|
transition: color var(--transition-fast);
|
|
}
|
|
.im-nav-link:hover {
|
|
color: var(--primary);
|
|
}
|
|
.im-nav-link.active {
|
|
color: var(--primary);
|
|
}
|
|
.im-nav-link.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 12px;
|
|
right: 12px;
|
|
height: 2px;
|
|
background-color: var(--primary);
|
|
border-radius: 1px;
|
|
}
|
|
|
|
/* ─── Grid Pattern Background ───────────────────────────────────────── */
|
|
.im-grid-pattern {
|
|
background-image:
|
|
linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
}
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
UTILITY LAYER ─── Animations & Effects
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
@layer utilities {
|
|
/* ─── Entry Animations ──────────────────────────────────────────────── */
|
|
.animate-fade-in-up {
|
|
animation: fadeInUp 0.5s ease-out;
|
|
}
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.3s ease-out;
|
|
}
|
|
.animate-scale-in {
|
|
animation: scaleIn 0.3s ease-out;
|
|
}
|
|
.animate-slide-in-right {
|
|
animation: slideInRight 0.3s ease-out;
|
|
}
|
|
|
|
/* ─── Pulse & Shimmer ───────────────────────────────────────────────── */
|
|
.animate-bar-pulse {
|
|
animation: barPulse 0.4s ease-in-out infinite;
|
|
transform-origin: bottom;
|
|
}
|
|
|
|
.animate-shimmer {
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(0, 0, 0, 0.06) 0%,
|
|
rgba(0, 0, 0, 0.02) 40%,
|
|
rgba(0, 0, 0, 0.06) 80%,
|
|
rgba(0, 0, 0, 0.08) 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
/* ─── Status Indicators ─────────────────────────────────────────────── */
|
|
.im-status-dot {
|
|
@apply inline-block h-2 w-2 rounded-full;
|
|
}
|
|
.im-status-dot-success {
|
|
@apply inline-block h-2 w-2 rounded-full bg-[#22c55e];
|
|
}
|
|
.im-status-dot-warning {
|
|
@apply inline-block h-2 w-2 rounded-full bg-[#f59e0b];
|
|
}
|
|
.im-status-dot-error {
|
|
@apply inline-block h-2 w-2 rounded-full bg-[#e4405f];
|
|
}
|
|
.im-status-dot-idle {
|
|
@apply inline-block h-2 w-2 rounded-full bg-[#cccccc];
|
|
}
|
|
|
|
/* ─── Divider ───────────────────────────────────────────────────────── */
|
|
.im-divider {
|
|
@apply w-full border-t;
|
|
border-color: var(--border);
|
|
}
|
|
.im-divider-label {
|
|
@apply flex items-center gap-3 text-xs font-medium text-[#999999];
|
|
}
|
|
.im-divider-label::before,
|
|
.im-divider-label::after {
|
|
content: '';
|
|
flex: 1;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
/* ─── Typography Utilities ──────────────────────────────────────────── */
|
|
.typo-display {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 60px;
|
|
font-weight: 700;
|
|
line-height: 68px;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
.typo-headline-lg {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 40px;
|
|
font-weight: 600;
|
|
line-height: 48px;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.typo-headline-md {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
line-height: 36px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.typo-title-lg {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
line-height: 28px;
|
|
}
|
|
.typo-body-lg {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
line-height: 28px;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
.typo-body-md {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
.typo-label-md {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
line-height: 20px;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.typo-label-sm {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 16px;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
KEYFRAMES ─── Animations
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
from { opacity: 0; transform: scale(0.95); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from { opacity: 0; transform: translateX(20px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
|
|
@keyframes barPulse {
|
|
0%, 100% { transform: scaleY(0.8); }
|
|
50% { transform: scaleY(1.2); }
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
|
|
@keyframes glowPulse {
|
|
0%, 100% { opacity: 0.4; }
|
|
50% { opacity: 0.8; }
|
|
}
|
|
|
|
/* ─── IMPHNEN Mascot Wiggle ───────────────────────────────────────────── */
|
|
@keyframes mascotWiggle {
|
|
0%, 100% { transform: rotate(0deg); }
|
|
15% { transform: rotate(-8deg); }
|
|
30% { transform: rotate(6deg); }
|
|
45% { transform: rotate(-4deg); }
|
|
60% { transform: rotate(2deg); }
|
|
}
|
|
|
|
.animate-mascot-wiggle {
|
|
animation: mascotWiggle 0.6s ease-in-out;
|
|
}
|
|
|
|
/* ─── IMPHNEN Notification Pulse ──────────────────────────────────────── */
|
|
@keyframes notificationPulse {
|
|
0% { box-shadow: 0 0 0 0 var(--primary-glow); }
|
|
70% { box-shadow: 0 0 0 8px transparent; }
|
|
100% { box-shadow: 0 0 0 0 transparent; }
|
|
}
|
|
|
|
.animate-notification-pulse {
|
|
animation: notificationPulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
ACCESSIBILITY ─── Reduced Motion
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|