supermq/web-astro/src/styles/global.css

@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

/* FluxMQ Brand Colors - Light Theme */
:root {
  --flux-blue: hsl(213.64deg 58.41% 44.31%);
  /* #2F69B3 */
  --flux-orange: hsl(35.07deg 94.52% 57.06%);
  /* #F9A32A */
  --flux-bg: hsl(0 0% 100%);
  --flux-fg: hsl(0 0% 10%);
  --flux-border: hsl(0 0% 20%);
  --flux-grid: hsl(0 0% 90%);
  --flux-text: hsl(0 0% 10%);
  --flux-text-muted: hsl(0 0% 40%);
  --flux-bg-alt: hsl(0 0% 97%);
  --flux-muted: var(--flux-text-muted);
  --flux-header-bg: hsl(0 0% 97%);
  --flux-header-border: hsl(0 0% 85%);
  --flux-pill-bg: hsl(0 0% 96%);
  --flux-pill-border: hsl(0 0% 82%);
  --flux-pill-text: hsl(0 0% 45%);
  --flux-icon: hsl(0 0% 15%);
  --flux-focus-ring: color-mix(in srgb, var(--flux-orange) 65%, transparent);
}

:root[class~='dark'],
:root[data-theme='dark'] {
  --flux-blue: hsl(213.64deg 70% 60%);
  /* Brighter blue for dark mode */
  --flux-orange: hsl(35.07deg 94.52% 57.06%);
  /* Keep orange same */
  --flux-bg: hsl(0 0% 10%);
  --flux-fg: hsl(0 0% 95%);
  --flux-border: hsl(0 0% 30%);
  --flux-grid: hsl(0 0% 20%);
  --flux-text: hsl(0 0% 95%);
  --flux-text-muted: hsl(0 0% 60%);
  --flux-bg-alt: hsl(0 0% 8%);
  --flux-muted: var(--flux-text-muted);
  --flux-header-bg: hsl(0 0% 8%);
  --flux-header-border: hsl(0 0% 18%);
  --flux-pill-bg: hsl(0 0% 10%);
  --flux-pill-border: hsl(0 0% 20%);
  --flux-pill-text: hsl(0 0% 70%);
  --flux-icon: hsl(0 0% 92%);
  --flux-focus-ring: color-mix(in srgb, var(--flux-orange) 70%, transparent);
}

body {
  font-family: Verdana, Geneva, sans-serif;
  color: var(--flux-text);
  background: var(--flux-bg);
}

html {
  scroll-behavior: smooth;
}

p {
  font-size: 1.0625rem;
  line-height: 1.7;
}

.mono {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

.grid-pattern {
  background-image:
    linear-gradient(to right, var(--flux-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--flux-grid) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Brutalist Elements */
.brutalist-border {
  border: 2px solid var(--flux-border);
}

.brutalist-card {
  border: 2px solid var(--flux-border);
  background: var(--flux-bg);
  color: var(--flux-text);
}

.brutalist-card:hover {
  border-color: var(--flux-orange);
}

/* Code/Terminal Styling */
.terminal {
  background: hsl(0 0% 10%);
  color: hsl(120 100% 80%);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  border: 2px solid var(--flux-border);
}

:root[class~="dark"] .terminal {
  background: hsl(0 0% 5%);
  border-color: var(--flux-border);
}

/* Accent Lines */
.accent-line {
  position: relative;
}

.accent-line::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--flux-orange);
}

/* Technical Typography */
.mono {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

/* Performance Metrics Table */
.metrics-table {
  border-collapse: separate;
  border-spacing: 0;
}

.metrics-table th,
.metrics-table td {
  border: 1px solid var(--flux-border);
  padding: 0.75rem 1rem;
  text-align: left;
}

.metrics-table th {
  background: var(--flux-fg);
  color: var(--flux-bg);
  font-weight: bold;
}

.metrics-table tbody {
  background: var(--flux-bg);
  color: var(--flux-text);
}

/* Theme-aware backgrounds */
.bg-theme {
  background: var(--flux-bg);
  color: var(--flux-text);
}

.bg-theme-alt {
  background: var(--flux-bg-alt);
  color: var(--flux-text);
}

.bg-theme-inverse {
  background: var(--flux-fg);
  color: var(--flux-bg);
}

.text-theme {
  color: var(--flux-text);
}

.text-theme-muted {
  color: var(--flux-text-muted);
}

.border-theme {
  border-color: var(--flux-border);
}

/* Smooth scroll for anchor links */
html {
  scroll-behavior: smooth;
}

/* Base font size improvements */
p {
  font-size: 1.0625rem;
  /* 17px - slightly larger for better readability */
  line-height: 1.7;
}

/* Remove default focus outline, add custom */
*:focus-visible {
  outline: 2px solid var(--flux-orange);
  outline-offset: 2px;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.animate-slide-up {
  animation: slideUp 0.8s ease-out;
  animation-fill-mode: backwards;
}

.animate-slide-up:nth-child(2) {
  animation-delay: 0.2s;
}

.animate-slide-up:nth-child(3) {
  animation-delay: 0.4s;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {

  .animate-fade-in,
  .animate-slide-up {
    animation: none;
  }
}

/* Fumadocs Sidebar Styling */
#nd-sidebar [data-active="true"] {
  color: var(--flux-orange) !important;
  background-color: rgba(249, 163, 42, 0.1) !important;
  border-left: 3px solid var(--flux-orange) !important;
}

#nd-sidebar a:hover {
  color: var(--flux-blue) !important;
}
/* Astro only injects MDX component mappings for .mdx entries.
 * Plain .md entries keep raw <pre class="shiki"> output, so normalize it
 * to match Fumadocs code block layout. */
.prose pre.shiki {
  @apply my-4 overflow-auto rounded-xl border;
  box-shadow: none;
  background-color: var(--shiki-light-bg);
}

.dark .prose pre.shiki,
:root[data-theme='dark'] .prose pre.shiki {
  background-color: var(--shiki-light-bg);
}

.prose pre.shiki code {
  @apply min-w-full w-max;
  display: flex;
  flex-direction: column;
}

.dark .prose pre.shiki code span,
:root[data-theme='dark'] .prose pre.shiki code span {
  color: var(--shiki-light) !important;
}

.prose pre.shiki code .line {
  display: block;
}

/* Prevent inline-code prose styles from leaking into fenced code blocks. */
.prose pre > code {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  display: block;
}