System development, WIP

2026-05-05 13:55:42 +02:00
commit c0223977d2
250 changed files with 10362 additions and 0 deletions
@@ -0,0 +1,57 @@
+.panel-shell() {
+  position: relative;
+  background:
+    linear-gradient(180deg, fade(@bone, 4%), transparent 24%),
+    linear-gradient(135deg, fade(@ember, 8%), transparent 40%),
+    linear-gradient(180deg, fade(@bg-char, 52%), fade(@bg-void, 34%)),
+    url("@{page-bg-url}") center center / cover no-repeat,
+    linear-gradient(180deg, @bg-panel 0%, color-mix(in srgb, @bg-panel 88%, black) 100%);
+  border: @border-main;
+  border-radius: @radius-md;
+  box-shadow: @shadow-heavy, @shadow-inset;
+}
+
+.ornate-frame() {
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 6px;
+    pointer-events: none;
+    border: 1px solid fade(@gold-acid, 16%);
+    border-radius: calc(@radius-md - 4px);
+  }
+}
+
+.caps-heading() {
+  font-family: @font-display;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.body-copy() {
+  font-family: @font-body;
+  line-height: 1.45;
+}
+
+.metal-button() {
+  .caps-heading();
+  border: 1px solid fade(@gold-acid, 44%);
+  border-radius: 999px;
+  background:
+    linear-gradient(180deg, fade(@ember-bright, 20%), fade(@blood, 10%)),
+    linear-gradient(135deg, fade(@bone, 10%), transparent 40%),
+    @bg-input;
+  color: @parchment;
+  box-shadow: inset 0 1px 0 fade(white, 8%), 0 6px 14px fade(black, 20%);
+  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, color 120ms ease;
+
+  &:hover,
+  &:focus {
+    border-color: fade(@ember-bright, 70%);
+    color: lighten(@parchment, 8%);
+    transform: translateY(-1px);
+    box-shadow: inset 0 1px 0 fade(white, 14%), 0 8px 18px fade(@blood, 26%);
+  }
+}