Fix styling

Makefile

@@ -6,3 +6,50 @@ drush:
 
 %:
 	@:
+
+# =============================================================================
+# Docker build & publish targets
+# Target registry: forge.quinefoundation.com/ironmagma/riverside
+# =============================================================================
+
+REGISTRY ?= forge.quinefoundation.com/ironmagma
+IMAGE    ?= riverside
+TAG      ?= latest
+PLATFORM ?= linux/amd64,linux/arm64
+
+IMAGE_NAME := $(REGISTRY)/$(IMAGE):$(TAG)
+
+.PHONY: docker-build docker-push docker-push-latest help
+
+# Build the multi-arch image locally (does NOT push)
+docker-build:
+	docker buildx build --platform $(PLATFORM) -t $(IMAGE_NAME) .
+
+# Build (if needed) + push to the registry
+docker-push:
+	docker buildx build --platform $(PLATFORM) -t $(IMAGE_NAME) --push .
+
+# Convenience: push the :latest tag to Forge (will build if necessary)
+docker-push-latest:
+	$(MAKE) docker-push TAG=latest
+
+# Two-step workflow example:
+#   1. make docker-build                 # build locally first
+#   2. make docker-push-latest           # then push to forge.../riverside:latest
+
+help:
+	@echo "Docker image targets (pushes to $(REGISTRY)/$(IMAGE))"
+	@echo ""
+	@echo "  make docker-build          Build multi-arch image locally (no push)"
+	@echo "  make docker-push           Build + push $(IMAGE_NAME)"
+	@echo "  make docker-push-latest    Push to $(REGISTRY)/$(IMAGE):latest"
+	@echo ""
+	@echo "Two-step workflow (build first, then push to latest):"
+	@echo "  make docker-build"
+	@echo "  make docker-push-latest"
+	@echo ""
+	@echo "Variables (can be overridden):"
+	@echo "  REGISTRY=$(REGISTRY)"
+	@echo "  IMAGE=$(IMAGE)"
+	@echo "  TAG=$(TAG)"
+	@echo "  PLATFORM=$(PLATFORM)"

build.sh

@@ -1 +1,6 @@
-  docker buildx build --platform linux/amd64,linux/arm64 -t forge.quinefoundation.com/ironmagma/riverside:latest --push .                                                
+#!/usr/bin/env bash
+# Convenience wrapper for the Makefile
+set -euo pipefail
+
+make docker-build-push "$@"
+

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

@@ -635,6 +635,10 @@ video {
   position: static;
 }
 
+.fixed{
+  position: fixed;
+}
+
 .absolute{
   position: absolute;
 }
@@ -768,6 +772,10 @@ video {
   height: 100%;
 }
 
+.max-h-\[90\%\]{
+  max-height: 90%;
+}
+
 .min-h-\[480px\]{
   min-height: 480px;
 }
@@ -982,6 +990,11 @@ video {
   border-color: rgb(255 255 255 / 0.6);
 }
 
+.border-white{
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
+}
+
 .bg-\[\#1e3a5f\]{
   --tw-bg-opacity: 1;
   background-color: rgb(30 58 95 / var(--tw-bg-opacity, 1));
@@ -1014,6 +1027,11 @@ video {
   background-color: rgb(255 255 255 / 0.9);
 }
 
+.bg-\[\#86AAB6\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(134 170 182 / var(--tw-bg-opacity, 1));
+}
+
 .bg-\[linear-gradient\(180deg\2c \#83A1A1_0\%\2c \#86AAB6_100\%\)\]{
   background-image: linear-gradient(180deg,#83A1A1 0%,#86AAB6 100%);
 }
@@ -1047,6 +1065,11 @@ video {
      object-position: center 0%;
 }
 
+.object-center{
+  -o-object-position: center;
+     object-position: center;
+}
+
 .p-0{
   padding: 0px;
 }
@@ -1157,6 +1180,10 @@ video {
   padding-top: 1px;
 }
 
+.pt-2{
+  padding-top: 0.5rem;
+}
+
 .text-center{
   text-align: center;
 }
@@ -1235,6 +1262,54 @@ video {
   line-height: 1rem;
 }
 
+.text-\[clamp\(1rem\2c 2vw\2c 1\.5vw\)\]{
+  font-size: clamp(1rem, 2vw, 1.5vw);
+}
+
+.text-\[clamp\(1rem\2c 1\.5vw\2c 1\.25vw\)\]{
+  font-size: clamp(1rem, 1.5vw, 1.25vw);
+}
+
+.text-\[clamp\(1rem\2c 1\.4vw\2c 1\.5vw\)\]{
+  font-size: clamp(1rem, 1.4vw, 1.5vw);
+}
+
+.text-\[clamp\(1rem\2c 1\.2vw\2c 1\.3vw\)\]{
+  font-size: clamp(1rem, 1.2vw, 1.3vw);
+}
+
+.text-\[clamp\(0\.9rem\2c 1\.05vw\2c 1\.25vw\)\]{
+  font-size: clamp(0.9rem, 1.05vw, 1.25vw);
+}
+
+.text-\[clamp\(0\.75rem\2c 1vw\2c 1\.25vw\)\]{
+  font-size: clamp(0.75rem, 1vw, 1.25vw);
+}
+
+.text-\[clamp\(0\.55rem\2c 1vw\2c 1\.25vw\)\]{
+  font-size: clamp(0.55rem, 1vw, 1.25vw);
+}
+
+.text-\[clamp\(0\.5rem\2c 1vw\2c 1\.25vw\)\]{
+  font-size: clamp(0.5rem, 1vw, 1.25vw);
+}
+
+.text-\[clamp\(0\.45rem\2c 1vw\2c 1\.25vw\)\]{
+  font-size: clamp(0.45rem, 1vw, 1.25vw);
+}
+
+.text-\[clamp\(0\.4rem\2c 1vw\2c 1\.25vw\)\]{
+  font-size: clamp(0.4rem, 1vw, 1.25vw);
+}
+
+.text-\[clamp\(0\.25rem\2c 1vw\2c 1\.25vw\)\]{
+  font-size: clamp(0.25rem, 1vw, 1.25vw);
+}
+
+.text-\[clamp\(0\.2rem\2c 1vw\2c 1\.25vw\)\]{
+  font-size: clamp(0.2rem, 1vw, 1.25vw);
+}
+
 .font-bold{
   font-weight: 700;
 }
@@ -1415,6 +1490,11 @@ video {
   background-color: rgb(255 255 255 / 0.1);
 }
 
+.hover\:bg-\[\#6f8f96\]:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(111 143 150 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:text-\[\#1e3a8a\]:hover{
   --tw-text-opacity: 1;
   color: rgb(30 58 138 / var(--tw-text-opacity, 1));
@@ -1434,6 +1514,18 @@ video {
   opacity: 0.3;
 }
 
+@media not all and (min-width: 768px){
+  .max-sm\:text-base{
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  .max-sm\:text-sm{
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}
+
 @media (min-width: 768px){
   .sm\:block{
     display: block;
@@ -1487,6 +1579,10 @@ video {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .sm\:items-center{
+    align-items: center;
+  }
+
   .sm\:justify-center{
     justify-content: center;
   }
@@ -1499,6 +1595,26 @@ video {
   .sm\:pb-0{
     padding-bottom: 0px;
   }
+
+  .sm\:pb-8{
+    padding-bottom: 2rem;
+  }
+
+  .sm\:pt-2{
+    padding-top: 0.5rem;
+  }
+
+  .sm\:pt-8{
+    padding-top: 2rem;
+  }
+
+  .sm\:text-\[clamp\(0\.2rem\2c 1vw\2c 1\.25vw\)\]{
+    font-size: clamp(0.2rem, 1vw, 1.25vw);
+  }
+
+  .sm\:text-\[clamp\(0\.25rem\2c 1vw\2c 1\.25vw\)\]{
+    font-size: clamp(0.25rem, 1vw, 1.25vw);
+  }
 }
 
 @media (min-width: 1024px){
@@ -1522,6 +1638,10 @@ video {
     z-index: 50;
   }
 
+  .md\:mt-\[78px\]{
+    margin-top: 78px;
+  }
+
   .md\:hidden{
     display: none;
   }

web/modules/custom/riverside_pt/templates/riverside-pt-home.html.twig

@@ -1,12 +1,12 @@
 <div class="bg-[linear-gradient(180deg,#83A1A1_0%,#86AAB6_100%)] pt-px">
   <section class="
-    relative mt-[78px] min-h-[480px]
+    relative md:mt-[78px] min-h-[480px]
     
-    /* This number, 78px is supposed to match the header height */
+    /* This number, 78px is supposed to match the header height (only when header is fixed) */
   ">
 
     {# Box 1: Image — full-bleed on mobile, offset on sm+ #}
-    <div class="absolute inset-0 flex pt-8 pb-8">
+    <div class="absolute inset-0 flex sm:pt-8 sm:pb-8">
       <div class="hidden sm:block sm:basis-[8%] sm:grow-[2]"></div>
       <img
         src="/modules/custom/riverside_pt/images/hero.jpg"
@@ -19,23 +19,23 @@
     <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent sm:hidden"></div>
 
     {# Box 2: Text — spacer 50% | text 40% | spacer 10% #}
-    <div class="relative flex min-h-[480px] py-4">
+    <div class="relative flex min-h-[480px] pt-0 pb-4">
       <div class="hidden sm:block sm:basis-[50%] sm:grow-[2]"></div>
       <div class="basis-full sm:basis-[40%] sm:grow flex flex-col justify-end sm:justify-center px-6 sm:px-0 sm:pb-0 gap-[1vw]">
         <h1
-          class="mt-0 mb-[1vw] text-[clamp(1.5rem,3.5vw,3.25rem)] font-serif font-normal text-white leading-tight [text-shadow:-56.21px_2.55px_10.22px_#0000001A]"
+          class="mt-0 mb-[1vw] text-[clamp(1.5rem,3.5vw,3.25rem)] font-serif font-normal text-white leading-none [text-shadow:-56.21px_2.55px_10.22px_#0000001A]"
         >
           Restore your strength.<br>Reclaim your life.
         </h1>
-        <p class="text-white/80 leading-tight text-[1.5vw]">Every new patient starts with a comprehensive diagnostic assessment. From there we build a personalized plan that may include sports rehabilitation, pre- or post-surgical recovery, or neurological physical therapy.</p>
+        <p class="text-white/80 leading-tight text-[clamp(1rem,2vw,1.5vw)]">Every new patient starts with a comprehensive diagnostic assessment. From there we build a personalized plan that may include sports rehabilitation, pre- or post-surgical recovery, or neurological physical therapy.</p>
         <div class="flex gap-4 flex-wrap items-center mt-[2vw]">
           <a
             href="/schedule"
-            class="w-full sm:w-auto text-center text-[1vw] px-[4em] py-[1em] bg-[#306f8e] text-white font-medium no-underline transition-colors hover:bg-[#1f5a6e]"
+            class="w-full sm:w-auto text-center max-sm:text-sm sm:text-[clamp(0.25rem,1vw,1.25vw)] px-[4em] py-[1em] bg-[#306f8e] text-white font-medium no-underline transition-colors border-2 border-[#306f8e] hover:bg-[#1f5a6e] hover:border-[#1f5a6e]"
           >Book An Appointment</a>
           <a
             href="/services"
-            class="hidden sm:inline-block text-[1vw] px-[4em] py-[1em] border border-white/60 text-white font-medium no-underline transition-colors hover:bg-white/10"
+            class="hidden sm:inline-block text-[clamp(0.25rem,1vw,1.25vw)] px-[4em] py-[1em] bg-[#86AAB6] text-white font-medium no-underline transition-colors border-2 border-white hover:bg-[#6f8f96]"
           >View Our Services</a>
         </div>
       </div>