foundation: project guide, tooling, design tokens, bilingual shell and routing contracts

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-25 17:06:51 +02:00
parent 1020ac4c68
commit 42e9f01253
89 changed files with 3615 additions and 297 deletions
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -0,0 +1,163 @@
+@use 'breakpoints' as bp;
+
+:host {
+  display: block;
+  min-height: 100vh;
+  color: var(--color-text);
+  font-family: var(--font-sans);
+}
+
+.site {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  padding-block: var(--space-3);
+}
+
+.site-header-inner {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--space-3);
+  align-items: start;
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-lg);
+}
+
+.site-identity,
+.site-nav a,
+.site-actions a,
+.site-footer a {
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.site-identity {
+  font-weight: 600;
+}
+
+.nav-toggle {
+  justify-self: end;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 1px solid var(--surface-glass-border);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text);
+}
+
+.nav-toggle span,
+.nav-toggle span::before,
+.nav-toggle span::after {
+  display: block;
+  width: 1rem;
+  height: 2px;
+  margin-inline: auto;
+  background: currentColor;
+}
+
+.nav-toggle span::before,
+.nav-toggle span::after {
+  content: '';
+  position: relative;
+}
+
+.nav-toggle span::before {
+  top: -0.35rem;
+}
+
+.nav-toggle span::after {
+  top: 0.25rem;
+}
+
+.site-nav,
+.site-actions {
+  grid-column: 1 / -1;
+}
+
+.primary-nav,
+.primary-nav ul,
+.footer-nav {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.primary-nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.primary-nav ul {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding-inline-start: var(--space-4);
+}
+
+.contact-cta {
+  color: var(--color-text);
+}
+
+.is-active {
+  color: var(--color-accent-cool);
+}
+
+.nav-collapsed .site-nav,
+.nav-collapsed .site-actions {
+  display: none;
+}
+
+.site-main {
+  flex: 1;
+  outline: none;
+}
+
+.site-footer {
+  padding-block: var(--space-6);
+  color: var(--color-text-muted);
+}
+
+.site-footer-inner {
+  justify-content: space-between;
+}
+
+.site-footer p {
+  margin: 0;
+}
+
+@include bp.respond-to(md) {
+  .nav-toggle {
+    display: none;
+  }
+
+  .site-header-inner {
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+  }
+
+  .site-nav,
+  .site-actions,
+  .nav-collapsed .site-nav,
+  .nav-collapsed .site-actions {
+    display: flex;
+    grid-column: auto;
+  }
+
+  .primary-nav {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--space-4);
+  }
+
+  .primary-nav ul {
+    padding-inline-start: 0;
+  }
+}