@zenithcore/core/src/modules/Rendering/styles/critical.css

Core functionality for ZenithKernel framework

/* Critical CSS for ZenithKernel Islands - Load immediately for FOUC prevention */

/* Base island container - critical for layout stability */
.zenith-island {
  position: relative;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e1e5e9;
  min-height: 60px; /* Prevent layout shift */
  transition: opacity 0.3s ease-in-out;
}

/* Hydration states - critical for visual feedback */
.zenith-island[data-hydration-status="pending"] {
  opacity: 0.7;
  background: #f8f9fa;
}

.zenith-island[data-hydration-status="hydrating"] {
  opacity: 0.8;
  background: linear-gradient(90deg, #f8f9fa 25%, #ffffff 50%, #f8f9fa 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s ease-in-out infinite;
}

.zenith-island[data-hydration-status="hydrated"] {
  opacity: 1;
}

.zenith-island[data-hydration-status="error"] {
  border-color: #dc3545;
  background: #fff5f5;
}

@keyframes loading-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Island placeholder content - prevents layout shift */
.zenith-island-placeholder {
  padding: 20px;
  text-align: center;
  color: #6c757d;
  font-size: 0.9rem;
}

.zenith-island-placeholder::before {
  content: "Loading...";
  display: block;
  font-weight: 500;
}

/* Hide initially to prevent FOUC, show after hydration */
.zenith-island:not([data-hydration-status]) {
  opacity: 0;
}

.zenith-island[data-hydration-status] {
  opacity: inherit;
}

/* Essential error state styling */
.zenith-island-error {
  padding: 15px;
  background: #fff5f5;
  border: 1px solid #dc3545;
  border-radius: 6px;
  color: #721c24;
  text-align: center;
  font-size: 0.9rem;
}

.zenith-island-error::before {
  content: "⚠️";
  display: block;
  font-size: 1.2rem;
  margin-bottom: 8px;
}

/* Dark theme support - critical for immediate theme application */
@media (prefers-color-scheme: dark) {
  .zenith-island {
    background: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
  }

  .zenith-island[data-hydration-status="pending"] {
    background: #1a202c;
  }

  .zenith-island[data-hydration-status="hydrating"] {
    background: linear-gradient(90deg, #1a202c 25%, #2d3748 50%, #1a202c 75%);
  }

  .zenith-island[data-hydration-status="error"] {
    background: #2d1b1b;
    border-color: #e53e3e;
  }

  .zenith-island-placeholder {
    color: #a0aec0;
  }

  .zenith-island-error {
    background: #2d1b1b;
    border-color: #e53e3e;
    color: #feb2b2;
  }
}

/* Responsive base styles - critical for mobile */
@media (max-width: 768px) {
  .zenith-island {
    margin: 0 10px;
    border-radius: 6px;
  }

  .zenith-island-placeholder {
    padding: 15px;
    font-size: 0.85rem;
  }
}