burmddit/frontend/app/globals-improved.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Modern Design System for Burmddit */

@layer base {
  :root {
    --primary: #2563eb;
    --primary-dark: #1e40af;
    --accent: #f59e0b;
    --text: #1f2937;
    --text-light: #6b7280;
    --bg: #ffffff;
    --bg-secondary: #f9fafb;
    --border: #e5e7eb;
  }
  
  * {
    @apply border-border;
  }
  
  body {
    @apply bg-bg-secondary text-text antialiased;
    font-feature-settings: "cv11", "ss01";
  }
}

/* Burmese Fonts - Better rendering */
@font-face {
  font-family: 'Pyidaungsu';
  src: url('https://myanmar-tools-website.appspot.com/fonts/Pyidaungsu-2.5.3_Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-feature-settings: "liga" 1;
}

@font-face {
  font-family: 'Pyidaungsu';
  src: url('https://myanmar-tools-website.appspot.com/fonts/Pyidaungsu-2.5.3_Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

.font-burmese {
  font-family: 'Pyidaungsu', 'Noto Sans Myanmar', 'Myanmar Text', sans-serif;
  letter-spacing: 0.01em;
}

/* Modern Card Design */
.card {
  @apply bg-white rounded-xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden;
  @apply border border-gray-100;
}

.card-hover {
  @apply transform hover:-translate-y-1 hover:scale-[1.02];
}

/* Cover Image with Overlay */
.cover-image-container {
  @apply relative overflow-hidden;
}

.cover-image-overlay {
  @apply absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent;
}

.cover-image-text {
  @apply absolute bottom-0 left-0 right-0 p-6 text-white;
}

/* Tag/Hashtag Design */
.tag {
  @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
  @apply bg-primary/10 text-primary hover:bg-primary hover:text-white;
  @apply transition-all duration-200 cursor-pointer;
}

.tag-burmese {
  @apply font-burmese text-sm;
}

/* Article Content - Better Typography */
.article-content {
  @apply font-burmese text-gray-800 leading-loose;
  font-size: 1.125rem;
  line-height: 1.9;
}

.article-content h1 {
  @apply text-4xl font-bold mt-10 mb-6 text-gray-900;
  @apply font-burmese leading-tight;
}

.article-content h2 {
  @apply text-3xl font-bold mt-8 mb-5 text-gray-900;
  @apply font-burmese leading-snug;
}

.article-content h3 {
  @apply text-2xl font-semibold mt-6 mb-4 text-gray-800;
  @apply font-burmese;
}

.article-content p {
  @apply mb-6 text-lg leading-loose text-gray-700;
}

.article-content a {
  @apply text-primary hover:text-primary-dark underline decoration-2 underline-offset-2;
  @apply transition-colors duration-200;
}

.article-content ul, .article-content ol {
  @apply ml-6 mb-6 space-y-3;
}

.article-content li {
  @apply text-lg text-gray-700 leading-relaxed;
  @apply pl-2;
}

.article-content ul li {
  @apply list-disc;
}

.article-content ol li {
  @apply list-decimal;
}

.article-content code {
  @apply bg-gray-100 px-2 py-1 rounded text-sm font-mono text-gray-800;
  @apply border border-gray-200;
}

.article-content pre {
  @apply bg-gray-900 text-gray-100 p-5 rounded-xl overflow-x-auto mb-6;
  @apply shadow-lg;
}

.article-content blockquote {
  @apply border-l-4 border-primary pl-6 italic my-6 text-gray-700;
  @apply bg-primary/5 py-4 rounded-r-lg;
}

/* Hero Section */
.hero-gradient {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
}

/* Glassmorphism Effect */
.glass {
  @apply bg-white/80 backdrop-blur-lg border border-white/20;
}

/* Image Zoom on Hover */
.image-zoom {
  @apply overflow-hidden;
}

.image-zoom img {
  @apply transition-transform duration-500 ease-out;
}

.image-zoom:hover img {
  @apply scale-110;
}

/* Loading Skeleton */
.skeleton {
  @apply animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200;
  @apply bg-[length:200%_100%];
  animation: shimmer 1.5s infinite;
}

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

/* Smooth Page Transitions */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.4s ease-out;
}

/* Badge Design */
.badge {
  @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold;
  @apply shadow-sm;
}

.badge-primary {
  @apply bg-primary text-white;
}

.badge-accent {
  @apply bg-accent text-white;
}

/* Hover Effects */
.hover-lift {
  @apply transition-all duration-300;
}

.hover-lift:hover {
  @apply transform -translate-y-2 shadow-2xl;
}

/* Focus Styles */
*:focus-visible {
  @apply outline-none ring-2 ring-primary ring-offset-2 rounded;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-400 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-500;
}

/* Mobile Optimizations */
@media (max-width: 640px) {
  .article-content {
    font-size: 1rem;
    line-height: 1.8;
  }
  
  .article-content h1 {
    @apply text-3xl;
  }
  
  .article-content h2 {
    @apply text-2xl;
  }
  
  .article-content h3 {
    @apply text-xl;
  }
}

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  .article-content {
    @apply text-black;
  }
}