Initial commit

landing/src/app/ui/site-header.scss

@@ -0,0 +1,162 @@
+:host {
+  display: block;
+}
+
+.landing-header {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background-color: color-mix(in srgb, var(--pi-color-white, #fff) 88%, transparent);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--pi-color-grey-200, #e4e4ea);
+}
+
+.landing-header__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  height: 4rem;
+}
+
+.landing-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  font-weight: 700;
+  text-decoration: none;
+  color: inherit;
+}
+
+// The mark carries its own glow, so it needs no background of its own — and
+// `alt=""` because the wordmark beside it already names the site.
+.landing-brand__mark {
+  width: 2rem;
+  height: 2rem;
+  object-fit: contain;
+}
+
+.landing-header__nav {
+  display: none;
+  gap: 1.75rem;
+
+  a {
+    text-decoration: none;
+    color: var(--pi-color-grey-600, #5b5b6b);
+    font-size: 0.9375rem;
+
+    &:hover {
+      color: inherit;
+    }
+  }
+
+  @media (min-width: 900px) {
+    display: flex;
+  }
+}
+
+.landing-header__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+// The library components carry their own `:host { display: … }`. Component
+// styles are scoped by attribute, so specificity ties with theirs — hence the
+// extra class rather than a bare one.
+.landing-header .landing-header__locales,
+.landing-header .landing-header__cta {
+  display: none;
+
+  @media (min-width: 640px) {
+    display: inline-flex;
+  }
+}
+
+@media (max-width: 899px) {
+  .landing-header .landing-header__locales {
+    display: none;
+  }
+}
+
+// Three bars rather than `pi-hamburger`: that component translates its own
+// label and is styled for the app shell's drawer, not a marketing bar.
+.landing-header__toggle {
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0 0.5rem;
+  border: 1px solid var(--pi-color-grey-200, #e4e4ea);
+  border-radius: 0.625rem;
+  background: none;
+  cursor: pointer;
+
+  span {
+    display: block;
+    height: 1.5px;
+    background-color: currentColor;
+  }
+
+  @media (min-width: 900px) {
+    display: none;
+  }
+}
+
+.landing-header__mobile {
+  border-top: 1px solid var(--pi-color-grey-200, #e4e4ea);
+  padding-block: 0.5rem;
+
+  a {
+    display: block;
+    padding-block: 0.625rem;
+    text-decoration: none;
+    color: var(--pi-color-grey-600, #5b5b6b);
+  }
+
+  @media (min-width: 900px) {
+    display: none;
+  }
+}
+
+.landing-header__mobile-locales {
+  display: flex;
+  gap: 0.5rem;
+  padding-block: 0.75rem 0.25rem;
+  border-top: 1px solid var(--pi-color-grey-200, #e4e4ea);
+
+  a {
+    padding: 0.25rem 0.625rem;
+    border-radius: 0.5rem;
+    font-size: 0.8125rem;
+    font-weight: 600;
+  }
+
+  a.is-active {
+    background-color: var(--pi-color-primary-50, #ede9fe);
+    color: var(--pi-color-primary, #6d5cf0);
+  }
+}
+
+.landing-header .landing-header__appearance {
+  display: none;
+
+  @media (min-width: 640px) {
+    display: inline-flex;
+  }
+}
+
+.landing-header__mobile-appearance {
+  display: block;
+  width: 100%;
+  padding: 0.625rem 0;
+  border: 0;
+  border-top: 1px solid var(--pi-color-grey-200, #e4e4ea);
+  background: none;
+  text-align: left;
+  font: inherit;
+  color: var(--pi-color-grey-600, #5b5b6b);
+  cursor: pointer;
+}