Adjust breakpoints to standard sm/md/lg for clearer mobile/tablet/desktop; minor hero spacing tweaks

tailwind.config.js

@@ -8,7 +8,10 @@ module.exports = {
   theme: {
     extend: {
       screens: {
-        'md': '920px',
+        // Adjusted for current hybrid usage (hero changes at sm, header/layout at md)
+        'sm': '768px',   // iPad portrait + when hero layout activates
+        'md': '1024px',  // Desktop start (header fixed, mission row, etc.)
+        'lg': '1280px',  // Large desktop
       },
       fontFamily: {
         hedvig: ['Hedvig Letters Sans', 'sans-serif'],

web/modules/custom/riverside_pt/css/app.css

@@ -564,15 +564,9 @@ video {
   width: 100%;
 }
 
-@media (min-width: 640px){
+@media (min-width: 768px){
   .container{
-    max-width: 640px;
+    max-width: 768px;
-  }
-}
-
-@media (min-width: 920px){
-  .container{
-    max-width: 920px;
   }
 }
 
@@ -596,7 +590,7 @@ video {
 
 /* Mobile nav: max-height slide can't be expressed with utilities alone */
 
-@media (max-width: calc(920px - 1px)) {
+@media (max-width: calc(1024px - 1px)) {
   #rpt-main-nav {
     flex: none;
     position: static;
@@ -674,15 +668,6 @@ video {
   margin-right: auto;
 }
 
-.my-8{
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-}
-
-.mb-0{
-  margin-bottom: 0px;
-}
-
 .mb-1\.5{
   margin-bottom: 0.375rem;
 }
@@ -703,6 +688,10 @@ video {
   margin-bottom: 2rem;
 }
 
+.mb-\[1vw\]{
+  margin-bottom: 1vw;
+}
+
 .ml-auto{
   margin-left: auto;
 }
@@ -715,20 +704,12 @@ video {
   margin-top: 0.5rem;
 }
 
-.ml-3{
-  margin-left: 0.75rem;
-}
-
-.mt-\[78px\]{
-  margin-top: 78px;
-}
-
 .mt-\[2vw\]{
   margin-top: 2vw;
 }
 
-.mb-\[1vw\]{
+.mt-\[78px\]{
-  margin-bottom: 1vw;
+  margin-top: 78px;
 }
 
 .block{
@@ -787,26 +768,6 @@ video {
   height: 100%;
 }
 
-.max-h-\[calc\(100\%_-_100px\)\]{
-  max-height: calc(100% - 100px);
-}
-
-.max-h-\[calc\(100\%_-_50px\)\]{
-  max-height: calc(100% - 50px);
-}
-
-.max-h-\[calc\(100\%_-_20px\)\]{
-  max-height: calc(100% - 20px);
-}
-
-.max-h-\[calc\(100\%_-_10px\)\]{
-  max-height: calc(100% - 10px);
-}
-
-.min-h-\[560px\]{
-  min-height: 560px;
-}
-
 .min-h-\[480px\]{
   min-height: 480px;
 }
@@ -843,18 +804,14 @@ video {
   max-width: 1200px;
 }
 
-.max-w-\[680px\]{
+.max-w-\[420px\]{
-  max-width: 680px;
+  max-width: 420px;
 }
 
 .max-w-lg{
   max-width: 32rem;
 }
 
-.max-w-\[420px\]{
-  max-width: 420px;
-}
-
 .flex-1{
   flex: 1 1 0%;
 }
@@ -961,10 +918,6 @@ video {
   align-self: flex-end;
 }
 
-.self-center{
-  align-self: center;
-}
-
 .overflow-hidden{
   overflow: hidden;
 }
@@ -1034,21 +987,11 @@ video {
   background-color: rgb(30 58 95 / var(--tw-bg-opacity, 1));
 }
 
-.bg-\[\#2d5f7a\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(45 95 122 / var(--tw-bg-opacity, 1));
-}
-
 .bg-\[\#306f8e\]{
   --tw-bg-opacity: 1;
   background-color: rgb(48 111 142 / var(--tw-bg-opacity, 1));
 }
 
-.bg-\[\#89a0a0\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(137 160 160 / var(--tw-bg-opacity, 1));
-}
-
 .bg-\[\#dde8f0\]{
   --tw-bg-opacity: 1;
   background-color: rgb(221 232 240 / var(--tw-bg-opacity, 1));
@@ -1071,14 +1014,14 @@ video {
   background-color: rgb(255 255 255 / 0.9);
 }
 
-.bg-gradient-to-t{
-  background-image: linear-gradient(to top, var(--tw-gradient-stops));
-}
-
 .bg-\[linear-gradient\(180deg\2c \#83A1A1_0\%\2c \#86AAB6_100\%\)\]{
   background-image: linear-gradient(180deg,#83A1A1 0%,#86AAB6 100%);
 }
 
+.bg-gradient-to-t{
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+
 .from-black\/60{
   --tw-gradient-from: rgb(0 0 0 / 0.6) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
@@ -1180,9 +1123,9 @@ video {
   padding-bottom: 0.75rem;
 }
 
-.py-8{
+.py-4{
-  padding-top: 2rem;
+  padding-top: 1rem;
-  padding-bottom: 2rem;
+  padding-bottom: 1rem;
 }
 
 .py-\[1em\]{
@@ -1190,13 +1133,12 @@ video {
   padding-bottom: 1em;
 }
 
-.py-4{
+.pb-4{
-  padding-top: 1rem;
   padding-bottom: 1rem;
 }
 
-.pb-4{
+.pb-8{
-  padding-bottom: 1rem;
+  padding-bottom: 2rem;
 }
 
 .pt-0{
@@ -1207,22 +1149,14 @@ video {
   padding-top: 1rem;
 }
 
-.pt-\[78px\]{
+.pt-8{
-  padding-top: 78px;
+  padding-top: 2rem;
 }
 
 .pt-px{
   padding-top: 1px;
 }
 
-.pb-8{
-  padding-bottom: 2rem;
-}
-
-.pt-8{
-  padding-top: 2rem;
-}
-
 .text-center{
   text-align: center;
 }
@@ -1345,11 +1279,6 @@ video {
   letter-spacing: 0.1em;
 }
 
-.text-\[\#1e3a5f\]{
-  --tw-text-opacity: 1;
-  color: rgb(30 58 95 / var(--tw-text-opacity, 1));
-}
-
 .text-\[\#1e3a8a\]{
   --tw-text-opacity: 1;
   color: rgb(30 58 138 / var(--tw-text-opacity, 1));
@@ -1467,65 +1396,45 @@ video {
   text-shadow: -56.21px 2.55px 10.22px #0000001A;
 }
 
-.hover\:border-\[\#152a45\]:hover{
-  --tw-border-opacity: 1;
-  border-color: rgb(21 42 69 / var(--tw-border-opacity, 1));
-}
-
 .hover\:border-\[\#1f5a6e\]:hover{
   --tw-border-opacity: 1;
   border-color: rgb(31 90 110 / var(--tw-border-opacity, 1));
 }
 
-.hover\:bg-\[\#152a45\]:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(21 42 69 / var(--tw-bg-opacity, 1));
-}
-
-.hover\:bg-\[\#1e4a60\]:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(30 74 96 / var(--tw-bg-opacity, 1));
-}
-
-.hover\:bg-\[\#3a6a7a\]:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(58 106 122 / var(--tw-bg-opacity, 1));
-}
-
-.hover\:bg-white\/10:hover{
-  background-color: rgb(255 255 255 / 0.1);
-}
-
-.hover\:bg-\[\#e8f2f6\]:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(232 242 246 / var(--tw-bg-opacity, 1));
-}
-
 .hover\:bg-\[\#1f5a6e\]:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(31 90 110 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-\[\#e8f2f6\]:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(232 242 246 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-white\/10:hover{
+  background-color: rgb(255 255 255 / 0.1);
+}
+
 .hover\:text-\[\#1e3a8a\]:hover{
   --tw-text-opacity: 1;
   color: rgb(30 58 138 / var(--tw-text-opacity, 1));
 }
 
-.hover\:text-white:hover{
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
-}
-
 .hover\:text-\[\#285a6e\]:hover{
   --tw-text-opacity: 1;
   color: rgb(40 90 110 / var(--tw-text-opacity, 1));
 }
 
+.hover\:text-white:hover{
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
 .disabled\:opacity-30:disabled{
   opacity: 0.3;
 }
 
-@media (min-width: 640px){
+@media (min-width: 768px){
   .sm\:block{
     display: block;
   }
@@ -1592,7 +1501,7 @@ video {
   }
 }
 
-@media (min-width: 920px){
+@media (min-width: 1024px){
   .md\:fixed{
     position: fixed;
   }
@@ -1640,18 +1549,6 @@ video {
   .md\:gap-8{
     gap: 2rem;
   }
-
-  .md\:bg-\[red\]{
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity, 1));
-  }
-}
-
-@media (min-width: 1024px){
-  .lg\:bg-\[blue\]{
-    --tw-bg-opacity: 1;
-    background-color: rgb(0 0 255 / var(--tw-bg-opacity, 1));
-  }
 }
 
 @media (min-width: 1280px){