first pass - kryz inspired

2026-06-10 18:34:23 +00:00
parent 3063d01ec5
commit 771e1e166f
53 changed files with 10521 additions and 0 deletions
@@ -0,0 +1,102 @@
+// ===== Global style entry point ======
+// All SCSS partials are imported here. To change the color scheme,
+// only edit _variables.scss — every component inherits from it.
+
+@use './styles/variables' as *;
+@use './styles/mixins' as *;
+@use './styles/themes';
+
+// ===== Base reset and global styles =====
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-primary);
+  color: var(--color-dark);
+  background-color: var(--color-cream);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-heading);
+  color: var(--color-primary);
+  line-height: 1.2;
+  margin-bottom: $spacing-md;
+}
+
+h1 { font-size: 2.8rem; }
+h2 { font-size: 2.2rem; }
+h3 { font-size: 1.6rem; }
+
+a {
+  color: var(--color-accent);
+  text-decoration: none;
+  transition: color $transition-fast;
+
+  &:hover {
+    color: var(--color-accent-dark);
+    text-decoration: underline;
+  }
+}
+
+img, svg {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+// Utility classes
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 $spacing-lg;
+}
+
+.text-center { text-align: center; }
+.text-accent { color: var(--color-accent); }
+
+.section-intro {
+  max-width: 700px;
+  margin: 0 auto $spacing-2xl;
+  text-align: center;
+  font-size: 1.1rem;
+  color: var(--color-medium);
+}
+
+.btn {
+  @include button-style($accent-orange, $neutral-white);
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-xs;
+  text-decoration: none;
+  font-family: var(--font-primary);
+  letter-spacing: 0.02em;
+}
+
+.btn-secondary {
+  @include button-style($primary-blue, $neutral-white, $primary-blue-dark);
+}
+
+.btn-outline {
+  background: transparent;
+  border: 2px solid $accent-orange;
+  color: $accent-orange;
+
+  &:hover {
+    background: $accent-orange;
+    color: $neutral-white;
+  }
+}