sabisan/web/static/styles.css

html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-site-header].is-compact {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  background: rgba(250, 250, 250, 0.95);
  color: #0a0a0a;
  box-shadow: 0 1px 0 rgba(10, 10, 10, 0.08);
  backdrop-filter: blur(18px);
}

[data-site-header].is-compact [data-header-brand] {
  font-size: 1.25rem;
}

@keyframes page-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes page-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes panel-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes panel-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#admin-panel {
  view-transition-name: admin-panel;
}

::view-transition-old(root) {
  animation: 160ms ease both page-fade-out;
}

::view-transition-new(root) {
  animation: 220ms ease both page-fade-in;
}

::view-transition-old(admin-panel) {
  animation: 140ms ease both panel-fade-out;
}

::view-transition-new(admin-panel) {
  animation: 180ms ease both panel-fade-in;
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    scroll-behavior: auto !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(admin-panel),
  ::view-transition-new(admin-panel) {
    animation-duration: 1ms;
  }
}