diff --git a/assets/hb/scss/_mixins.scss b/assets/hb/scss/_mixins.scss
new file mode 100644
index 0000000..87436cd
--- /dev/null
+++ b/assets/hb/scss/_mixins.scss
@@ -0,0 +1,7 @@
+@mixin top-offset($position:"") {
+  @if $position != "" {
+    position: $position;
+  }
+
+  top: var(--#{$prefix}top-offset);
+}
diff --git a/assets/hb/scss/_root.scss b/assets/hb/scss/_root.scss
new file mode 100644
index 0000000..a390e08
--- /dev/null
+++ b/assets/hb/scss/_root.scss
@@ -0,0 +1,3 @@
+:root {
+  --#{$prefix}top-offset: 0;
+}
diff --git a/assets/hb/scss/_utilities.scss b/assets/hb/scss/_utilities.scss
new file mode 100644
index 0000000..e7a104b
--- /dev/null
+++ b/assets/hb/scss/_utilities.scss
@@ -0,0 +1,3 @@
+.hb-top-offset {
+  top: var(--#{$prefix}top-offset);
+}
diff --git a/assets/hb/scss/index.tmpl.scss b/assets/hb/scss/index.tmpl.scss
index c6d4473..ac2f0b2 100644
--- a/assets/hb/scss/index.tmpl.scss
+++ b/assets/hb/scss/index.tmpl.scss
@@ -14,10 +14,12 @@
 @import "../../scss/bootstrap/variables-dark";
 
 @import "../../scss/bootstrap/maps";
+@import "mixins";
 @import "../../scss/bootstrap/mixins";
 @import "../../scss/bootstrap/utilities";
 
 // Layout & components
+@import "root";
 @import "../../scss/bootstrap/root";
 @import "../../scss/bootstrap/reboot";
 @import "../../scss/bootstrap/type";
@@ -55,6 +57,7 @@
 
 // Utilities
 @import "../../scss/bootstrap/utilities/api";
+@import "utilities";
 
 // Modules
 {{- range resources.Match "hb/modules/*/scss/index.scss" }}