grain.social/grain

Switch repository

Loading…

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Theme tokens. The dark palette is the default; `data-theme="light"` on <html>
   swaps it. The inline script in app.html sets that attribute before first paint
   (resolving "system" against prefers-color-scheme), so there is no flash. */
:root {
  --shell-max: 1180px;
  --col-left: 245px;
  --col-center: minmax(0, 600px);
  --font-display: "Syne", sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, sans-serif;
}

/* `.theme-dark` re-applies the dark tokens to an always-dark surface (e.g. the
   fullscreen story viewer) regardless of the active theme. */
:root,
:root[data-theme="dark"],
.theme-dark {
  color-scheme: dark;
  --bg-root: #080b12;
  --bg-surface: #0f1419;
  --bg-elevated: #161d27;
  --bg-image: #161d27;
  --bg-hover: #1c2633;
  --bg-blur: rgba(8, 11, 18, 0.85);
  --border: #1e293b;
  --border-light: #2a3a4e;
  --grain: #85a1ff;
  --grain-btn: rgb(74, 93, 249);
  --grain-btn-dim: rgb(60, 78, 220);
  --grain-dim: #6b8bef;
  --grain-glow: rgba(133, 161, 255, 0.15);
  --on-grain: #080b12;
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #7c8ba1;
  --text-faint: #64748b;
  --danger: #f87171;
  --danger-bg: #1c1117;
  /* Favourites. Set once, not per theme: the heart is the same red in light
     and dark, as it is on iOS and Android. */
  --heart: #ff4066;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg-root: #ffffff;
  --bg-surface: #f6f7fa;
  --bg-elevated: #ffffff;
  --bg-image: #e2e6ef;
  --bg-hover: #f0f2f7;
  --bg-blur: rgba(255, 255, 255, 0.85);
  --border: #e2e6ef;
  --border-light: #ccd3e0;
  --grain: #3b4ddb;
  --grain-btn: rgb(74, 93, 249);
  --grain-btn-dim: rgb(60, 78, 220);
  --grain-dim: #7b8bf5;
  --grain-glow: rgba(74, 93, 249, 0.1);
  --on-grain: #ffffff;
  --text-primary: #0d1424;
  --text-secondary: #4a5568;
  --text-muted: #5f6a79;
  --text-faint: #6b7688;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
}

html {
  background: var(--bg-root);
  color: var(--text-primary);
  overflow-x: hidden;
}

html:not(.fonts-loaded) body {
  opacity: 0;
}
html.fonts-loaded body {
  opacity: 1;
  transition: opacity 0.1s;
}

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  overscroll-behavior: none;
}

a {
  color: inherit;
  text-decoration: none;
}

@media (max-width: 600px) {
  html,
  body {
    overflow: hidden;
    position: fixed;
    inset: 0;
    min-height: 0;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
}

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