unigrid.css 0.3.0 → 0.3.2

package/src/scss/_hero.scss

@@ -1,262 +1,262 @@
-// ==========================================================================
-// Unigrid CSS Framework — Hero (BEM)
-//
-// Full-width hero section for page introductions. Supports background
-// images, overlays, and flexible content positioning.
-//
-// Block: .ug-hero
-// Elements: __background, __overlay, __content, __title, __subtitle,
-//           __lead, __actions
-// Modifiers: --full, --half, --third, --dark, --light, --center, --bottom
-// ==========================================================================
-
-
-@use "variables" as *;
-@use "mixins" as *;
-
-.ug-hero {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  width: 100%;
-  min-height: round(down, 50vh, var(--ug-leading));
-  padding: calc(var(--ug-leading) * 3) calc(var(--ug-leading) * 1.5);
-  color: $ug-white;
-  overflow: hidden;
-
-  // -- Background image --
-  &__background {
-    position: absolute;
-    inset: 0;
-    z-index: 0;
-
-    img,
-    video {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-
-  // -- Overlay (darkens background for readability) --
-  &__overlay {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-    background: linear-gradient(
-      to top,
-      rgba(0, 0, 0, 0.7) 0%,
-      rgba(0, 0, 0, 0.2) 60%,
-      transparent 100%
-    );
-  }
-
-  // -- Content wrapper --
-  &__content {
-    position: relative;
-    z-index: 2;
-    max-width: $ug-container-max-width;
-    width: 100%;
-  }
-
-  // -- Title --
-  &__title {
-    @include ug-rhythm-font-size(2.5);
-    @include ug-rhythm-line-height(2);
-    @include ug-font-weight("black");
-    letter-spacing: -0.02em;
-    @include ug-rhythm-margin-bottom(1);
-    margin-top: 0;
-
-    @include ug-breakpoint-down("md") {
-      @include ug-rhythm-font-size(2);
-    }
-  }
-
-  // -- Subtitle --
-  &__subtitle {
-    @include ug-font-size("lg");
-    @include ug-font-weight("light");
-    @include ug-rhythm-line-height(1);
-    opacity: 0.85;
-    margin-bottom: 0;
-    margin-top: 0;
-  }
-
-  // -- Lead text --
-  &__lead {
-    @include ug-font-size("base");
-    @include ug-font-weight("regular");
-    @include ug-rhythm-line-height(1);
-    max-width: $ug-prose-max-width;
-    opacity: 0.8;
-    @include ug-rhythm-margin-bottom(1);
-    margin-top: 0;
-  }
-
-  // -- Action buttons area --
-  &__actions {
-    display: flex;
-    gap: var(--ug-leading);
-    flex-wrap: wrap;
-    @include ug-rhythm-margin-top(1);
-  }
-
-  // ==============================
-  // Height Modifiers
-  // ==============================
-
-  &--full {
-    min-height: round(down, 100vh, var(--ug-leading));
-  }
-
-  &--half {
-    min-height: round(down, 50vh, var(--ug-leading));
-  }
-
-  &--third {
-    min-height: round(down, 33vh, var(--ug-leading));
-  }
-
-  &--auto {
-    min-height: 0;
-  }
-
-  // ==============================
-  // Content Alignment
-  // ==============================
-
-  &--center {
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-
-    .ug-hero__content {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    .ug-hero__lead {
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    .ug-hero__actions {
-      justify-content: center;
-    }
-  }
-
-  &--bottom {
-    justify-content: flex-end;
-  }
-
-  &--top {
-    justify-content: flex-start;
-  }
-
-  // ==============================
-  // Color Variants
-  // ==============================
-
-  // Dark (default) — white text on dark background
-  &--dark {
-    background-color: $ug-black;
-    color: $ug-white;
-  }
-
-  // Light — dark text on light background
-  &--light {
-    background-color: $ug-warm-gray;
-    color: $ug-black;
-
-    .ug-hero__overlay {
-      background: linear-gradient(
-        to top,
-        rgba(255, 255, 255, 0.8) 0%,
-        rgba(255, 255, 255, 0.2) 60%,
-        transparent 100%
-      );
-    }
-  }
-
-  // NPS colors
-  &--brown {
-    background-color: $ug-brown;
-  }
-
-  &--green {
-    background-color: $ug-green;
-  }
-
-  &--blue {
-    background-color: $ug-blue;
-  }
-
-  &--red {
-    background-color: $ug-red;
-  }
-
-  // ==============================
-  // DIN Proportions
-  // ==============================
-
-  &--din {
-    @include ug-ratio-din(true);
-    min-height: 0;
-    // The DIN aspect ratio height is not a leading multiple.
-    // Round margin-bottom to snap the next element back onto the grid.
-    // Uses CSS round() (supported in modern browsers).
-    margin-bottom: calc(var(--ug-leading) - mod(100vw / #{$ug-ratio}, var(--ug-leading)));
-  }
-
-  // ==============================
-  // Responsive
-  // ==============================
-
-  @include ug-breakpoint-down("md") {
-    padding: calc(var(--ug-leading) * 2) var(--ug-leading);
-    min-height: round(down, 40vh, var(--ug-leading));
-
-    &--full {
-      min-height: round(down, 100vh, var(--ug-leading));
-    }
-  }
-}
-
-// ---- Hero Button ----
-// Simple button for use within .ug-hero__actions
-
-.ug-hero__btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: calc(var(--ug-leading) * 0.5);
-  height: calc(var(--ug-leading) * 1.5);
-  padding: 0 var(--ug-leading);
-  @include ug-font-size("sm");
-  @include ug-font-weight("bold");
-  text-decoration: none;
-  border: 2px solid currentColor;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  transition: background-color 0.15s, color 0.15s;
-
-  &:hover {
-    background-color: $ug-white;
-    color: $ug-black;
-  }
-
-  &--filled {
-    background-color: $ug-white;
-    color: $ug-black;
-    border-color: $ug-white;
-
-    &:hover {
-      background-color: transparent;
-      color: $ug-white;
-    }
-  }
-}
+// ==========================================================================
+// Unigrid CSS Framework — Hero (BEM)
+//
+// Full-width hero section for page introductions. Supports background
+// images, overlays, and flexible content positioning.
+//
+// Block: .ug-hero
+// Elements: __background, __overlay, __content, __title, __subtitle,
+//           __lead, __actions
+// Modifiers: --full, --half, --third, --dark, --light, --center, --bottom
+// ==========================================================================
+
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-hero {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  width: 100%;
+  min-height: round(down, 50vh, var(--ug-leading));
+  padding: calc(var(--ug-leading) * 3) calc(var(--ug-leading) * 1.5);
+  color: $ug-white;
+  overflow: hidden;
+
+  // -- Background image --
+  &__background {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+
+    img,
+    video {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  // -- Overlay (darkens background for readability) --
+  &__overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    background: linear-gradient(
+      to top,
+      rgba(0, 0, 0, 0.7) 0%,
+      rgba(0, 0, 0, 0.2) 60%,
+      transparent 100%
+    );
+  }
+
+  // -- Content wrapper --
+  &__content {
+    position: relative;
+    z-index: 2;
+    max-width: $ug-container-max-width;
+    width: 100%;
+  }
+
+  // -- Title --
+  &__title {
+    @include ug-rhythm-font-size(2.5);
+    @include ug-rhythm-line-height(2);
+    @include ug-font-weight("black");
+    letter-spacing: -0.02em;
+    @include ug-rhythm-margin-bottom(1);
+    margin-top: 0;
+
+    @include ug-breakpoint-down("md") {
+      @include ug-rhythm-font-size(2);
+    }
+  }
+
+  // -- Subtitle --
+  &__subtitle {
+    @include ug-font-size("lg");
+    @include ug-font-weight("light");
+    @include ug-rhythm-line-height(1);
+    opacity: 0.85;
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+
+  // -- Lead text --
+  &__lead {
+    @include ug-font-size("base");
+    @include ug-font-weight("regular");
+    @include ug-rhythm-line-height(1);
+    max-width: $ug-prose-max-width;
+    opacity: 0.8;
+    @include ug-rhythm-margin-bottom(1);
+    margin-top: 0;
+  }
+
+  // -- Action buttons area --
+  &__actions {
+    display: flex;
+    gap: var(--ug-leading);
+    flex-wrap: wrap;
+    @include ug-rhythm-margin-top(1);
+  }
+
+  // ==============================
+  // Height Modifiers
+  // ==============================
+
+  &--full {
+    min-height: round(down, 100vh, var(--ug-leading));
+  }
+
+  &--half {
+    min-height: round(down, 50vh, var(--ug-leading));
+  }
+
+  &--third {
+    min-height: round(down, 33vh, var(--ug-leading));
+  }
+
+  &--auto {
+    min-height: 0;
+  }
+
+  // ==============================
+  // Content Alignment
+  // ==============================
+
+  &--center {
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+
+    .ug-hero__content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .ug-hero__lead {
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .ug-hero__actions {
+      justify-content: center;
+    }
+  }
+
+  &--bottom {
+    justify-content: flex-end;
+  }
+
+  &--top {
+    justify-content: flex-start;
+  }
+
+  // ==============================
+  // Color Variants
+  // ==============================
+
+  // Dark (default) — white text on dark background
+  &--dark {
+    background-color: $ug-black;
+    color: $ug-white;
+  }
+
+  // Light — dark text on light background
+  &--light {
+    background-color: $ug-warm-gray;
+    color: $ug-black;
+
+    .ug-hero__overlay {
+      background: linear-gradient(
+        to top,
+        rgba(255, 255, 255, 0.8) 0%,
+        rgba(255, 255, 255, 0.2) 60%,
+        transparent 100%
+      );
+    }
+  }
+
+  // NPS colors
+  &--brown {
+    background-color: $ug-brown;
+  }
+
+  &--green {
+    background-color: $ug-green;
+  }
+
+  &--blue {
+    background-color: $ug-blue;
+  }
+
+  &--red {
+    background-color: $ug-red;
+  }
+
+  // ==============================
+  // DIN Proportions
+  // ==============================
+
+  &--din {
+    @include ug-ratio-din(true);
+    min-height: 0;
+    // The DIN aspect ratio height is not a leading multiple.
+    // Round margin-bottom to snap the next element back onto the grid.
+    // Uses CSS round() (supported in modern browsers).
+    margin-bottom: calc(var(--ug-leading) - mod(100vw / #{$ug-ratio}, var(--ug-leading)));
+  }
+
+  // ==============================
+  // Responsive
+  // ==============================
+
+  @include ug-breakpoint-down("md") {
+    padding: calc(var(--ug-leading) * 2) var(--ug-leading);
+    min-height: round(down, 40vh, var(--ug-leading));
+
+    &--full {
+      min-height: round(down, 100vh, var(--ug-leading));
+    }
+  }
+}
+
+// ---- Hero Button ----
+// Simple button for use within .ug-hero__actions
+
+.ug-hero__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--ug-leading) * 0.5);
+  height: calc(var(--ug-leading) * 1.5);
+  padding: 0 var(--ug-leading);
+  @include ug-font-size("sm");
+  @include ug-font-weight("bold");
+  text-decoration: none;
+  border: 2px solid currentColor;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s;
+
+  &:hover {
+    background-color: $ug-white;
+    color: $ug-black;
+  }
+
+  &--filled {
+    background-color: $ug-white;
+    color: $ug-black;
+    border-color: $ug-white;
+
+    &:hover {
+      background-color: transparent;
+      color: $ug-white;
+    }
+  }
+}