stylized breakcore/

frontend/src/styles/global.css

@@ -1634,6 +1634,119 @@ input[type="date"] { color-scheme: light; }
   box-shadow: 0 0 0 0 var(--mauve);
 }
 
+/* Top-bar chrome — neon UI, not drab subtext. Mono caps + hard offset. */
+.breakcore .topbar-control {
+  font-family: var(--font-mono);
+  font-style: normal;
+  font-size: 0.72rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--teal);
+  background: color-mix(in srgb, var(--crust) 55%, transparent);
+  border-color: color-mix(in srgb, var(--teal) 50%, transparent);
+}
+.breakcore .topbar-control:hover {
+  color: var(--crust);
+  background: var(--mauve);
+  border-color: var(--mauve);
+  box-shadow: 2px 2px 0 0 var(--green);
+}
+.breakcore .topbar-control:focus-visible {
+  border-color: var(--green);
+  box-shadow: 0 0 0 2px var(--green);
+}
+.breakcore .topbar-control--danger:hover {
+  background: var(--red);
+  border-color: var(--red);
+  color: var(--rosewater);
+  box-shadow: 2px 2px 0 0 var(--mauve);
+}
+.breakcore .topbar-divider {
+  width: 2px;
+  background: repeating-linear-gradient(
+    180deg,
+    var(--mauve) 0 4px,
+    transparent 4px 7px
+  );
+}
+
+/* Post prev/next nav — neon offset panels + acid eyebrow (was dim text). */
+.breakcore .post-nav a { transition: box-shadow 0.15s ease, border-color 0.15s ease; }
+.breakcore .post-nav a:hover {
+  border-color: var(--mauve);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--mauve) 40%, transparent),
+    4px 4px 0 0 var(--mauve);
+}
+.breakcore .post-nav .pn-eyebrow {
+  color: var(--green);
+  font-family: var(--font-mono);
+  letter-spacing: 0.18em;
+  text-shadow: 0 0 6px color-mix(in srgb, var(--green) 45%, transparent);
+}
+
+/* Prose / code — CRT pass: terminal block, hazard inline code, neon
+ * blockquote, hazard-tape rule. */
+.breakcore .prose pre {
+  color: var(--teal);
+  background-color: color-mix(in srgb, var(--crust) 92%, transparent);
+  background-image: repeating-linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 0) 0 2px,
+    color-mix(in srgb, var(--mauve) 9%, transparent) 2px 3px,
+    rgba(0, 0, 0, 0) 3px 4px
+  );
+  border-color: var(--mauve);
+  border-left-color: var(--green);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--mauve) 28%, transparent),
+    4px 4px 0 0 color-mix(in srgb, var(--mauve) 35%, var(--crust));
+}
+.breakcore .prose pre code { color: inherit; }
+.breakcore .prose :not(pre) code {
+  color: var(--yellow);
+  background: color-mix(in srgb, var(--yellow) 12%, transparent);
+  border-bottom-color: color-mix(in srgb, var(--yellow) 55%, transparent);
+}
+.breakcore .prose blockquote {
+  border-left-color: var(--mauve);
+  background: color-mix(in srgb, var(--mauve) 7%, transparent);
+  box-shadow: -3px 0 14px -5px color-mix(in srgb, var(--mauve) 55%, transparent);
+  padding: 0.5rem 0 0.5rem 1.4rem;
+}
+.breakcore .prose hr {
+  height: 3px;
+  opacity: 0.85;
+  background: repeating-linear-gradient(
+    90deg,
+    var(--mauve) 0 14px,
+    var(--green) 14px 28px
+  );
+  box-shadow: 0 0 10px color-mix(in srgb, var(--mauve) 40%, transparent);
+}
+.breakcore .prose hr::before {
+  background: var(--green);
+  box-shadow: 0 0 8px var(--green);
+}
+.breakcore .prose h3 { color: var(--pink); }
+.breakcore .prose h4 { color: var(--teal); }
+.breakcore .prose h5 { color: var(--green); font-family: var(--font-mono); }
+
+/* Scrollbar + caret — full-immersion chrome (no default OS bar). */
+.breakcore {
+  scrollbar-color: var(--mauve) var(--crust);
+  caret-color: var(--mauve);
+}
+.breakcore ::-webkit-scrollbar { width: 11px; height: 11px; }
+.breakcore ::-webkit-scrollbar-track { background: var(--crust); }
+.breakcore ::-webkit-scrollbar-thumb {
+  background: var(--mauve);
+  border: 2px solid var(--crust);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 50%, transparent);
+}
+.breakcore ::-webkit-scrollbar-thumb:hover { background: var(--green); }
+.breakcore ::-webkit-scrollbar-corner { background: var(--crust); }
+
 /* Prose links — magenta resting, acid-green on hover. */
 .breakcore .prose a {
   text-decoration-color: color-mix(in srgb, var(--mauve) 55%, transparent);