first commit

libs/web/shared/ui/src/lib/app-shell.scss

@@ -0,0 +1,188 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  // The lights below spill sideways: clipped here (not `hidden`, which would
+  // make a scroll container and break the sticky header).
+  overflow-x: clip;
+}
+
+// Same bar as pireon.dev's site header.
+.ts-header {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background-color: color-mix(in srgb, var(--ts-surface) 88%, transparent);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--ts-line);
+}
+
+.ts-header__inner {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  max-width: 96rem;
+  height: 4rem;
+  margin-inline: auto;
+  padding-inline: 1.25rem;
+  box-sizing: border-box;
+
+  @media (min-width: 768px) {
+    padding-inline: 2rem;
+  }
+}
+
+.ts-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  color: var(--ts-ink);
+  text-decoration: none;
+}
+
+.ts-brand__platform {
+  font-weight: 700;
+}
+
+// The product, after the platform: "Pireon | TaskStream".
+.ts-brand__product {
+  padding-left: 0.625rem;
+  border-left: 1px solid var(--ts-line-strong);
+  font-weight: 600;
+  background: linear-gradient(
+    100deg,
+    var(--pi-color-primary),
+    var(--pi-color-accent)
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.ts-header__nav {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.ts-header__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.ts-header__icon {
+  --ts-icon-button-size: 2.25rem;
+  --ts-icon-button-border: var(--ts-line);
+  color: var(--ts-muted);
+  transition:
+    color 0.15s ease,
+    background-color 0.15s ease;
+
+  &:hover {
+    color: var(--ts-ink);
+    background: var(--pi-color-primary-25);
+  }
+}
+
+// A shadow under the header once the page moves, as on pireon.dev.
+@keyframes header-lift {
+  to {
+    border-bottom-color: transparent;
+    box-shadow: 0 10px 30px -18px
+      color-mix(in srgb, var(--pi-color-primary) 45%, transparent);
+  }
+}
+
+@supports (animation-timeline: scroll()) {
+  @media (prefers-reduced-motion: no-preference) {
+    .ts-header {
+      animation: header-lift linear both;
+      animation-timeline: scroll(root);
+      animation-range: 0 5rem;
+    }
+  }
+}
+
+// Content over the platform's two soft lights (pireon.dev's `glow`).
+.ts-main {
+  position: relative;
+  isolation: isolate;
+  flex: 1;
+  width: 100%;
+  max-width: 96rem;
+  margin-inline: auto;
+  padding: 2.5rem 1.25rem 4rem;
+  box-sizing: border-box;
+
+  @media (min-width: 768px) {
+    padding-inline: 2rem;
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    border-radius: 50%;
+    pointer-events: none;
+    filter: blur(80px);
+  }
+
+  &::before {
+    top: -16rem;
+    left: 50%;
+    width: 64rem;
+    height: 34rem;
+    transform: translateX(-58%);
+    opacity: 0.4;
+    background: radial-gradient(
+      closest-side,
+      var(--pi-color-primary),
+      transparent
+    );
+  }
+
+  &::after {
+    top: -4rem;
+    right: -10rem;
+    width: 26rem;
+    height: 26rem;
+    opacity: 0.28;
+    background: radial-gradient(
+      closest-side,
+      var(--pi-color-accent),
+      transparent
+    );
+  }
+}
+
+@media (max-width: 640px) {
+  .ts-header__inner {
+    gap: 0.75rem;
+  }
+
+  .ts-brand__platform {
+    display: none;
+  }
+
+  .ts-brand__product {
+    padding-left: 0;
+    border-left: 0;
+  }
+
+  .ts-main {
+    padding-top: 1.5rem;
+  }
+}
+
+// On a phone the brand already leads to the projects list.
+@media (max-width: 480px) {
+  .ts-header__nav {
+    visibility: hidden;
+  }
+}