✨feature: Mobile homepage updates

2026-06-16 06:38:17 -05:00
parent ffaecf2874
commit 743aef0eec
7 changed files with 310 additions and 16 deletions
@@ -19,3 +19,35 @@
        a { @apply text-white hover:text-primary-500 underline underline-offset-2; }
    }
 }
+
+@media (max-width: 767px) {
+    .site-footer {
+        padding-block: 2.25rem 1.25rem;
+    }
+
+    .site-footer > .container {
+        gap: 1.5rem 1rem;
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+        padding-inline: 1rem;
+    }
+
+    .site-footer .site-footer__logo {
+        max-width: 6rem;
+    }
+
+    .site-footer .widget li {
+        font-size: var(--text-14px);
+        line-height: 1.1;
+        margin-bottom: 0.4rem;
+    }
+
+    .site-footer .widget h4 {
+        font-size: var(--text-16px);
+        margin-bottom: 0.5rem;
+    }
+
+    .site-footer .text-right {
+        align-items: flex-start;
+        text-align: left;
+    }
+}
@@ -28,3 +28,70 @@
 		#globalSearch { @apply text-14px text-light; }
 	}
 }
+
+@media (max-width: 767px) {
+    .site-header {
+        overflow: hidden;
+        width: 100%;
+    }
+
+    .site-header .nav-aux__container {
+        display: none;
+    }
+
+    .site-header .header__nav-main {
+        display: grid;
+        gap: 0.75rem;
+        grid-template-columns: minmax(0, 1fr) auto !important;
+        min-height: 4.375rem;
+        padding: 0.85rem 1rem !important;
+        padding-left: 1rem !important;
+        padding-right: 1rem !important;
+        width: 100%;
+    }
+
+    .site-header__logo {
+        height: 2.25rem;
+        margin-left: 1rem;
+        min-width: 0;
+        overflow: hidden;
+        width: 7.25rem;
+    }
+
+    .site-header__logo img {
+        height: 2.25rem;
+        max-width: none;
+        width: auto;
+    }
+
+    .site-header .nav-main {
+        align-items: center;
+        display: flex;
+        justify-content: flex-end;
+        min-width: 0;
+    }
+
+    .site-header .nav-main__toggle {
+        align-items: center;
+        background: var(--color-secondary);
+        border-radius: 0.375rem;
+        display: inline-flex;
+        height: 2.25rem;
+        justify-content: center;
+        margin-right: 1rem;
+        padding: 0.45rem;
+        width: 2.25rem;
+    }
+
+    .site-header .nav-main__toggle svg {
+        height: 1.15rem;
+        width: 1.15rem;
+    }
+
+    .site-header .nav-main__toggle svg,
+    .site-header .nav-main__toggle path,
+    .site-header .nav-main__toggle line {
+        fill: var(--color-white);
+        stroke: var(--color-white);
+    }
+}