|
|
@ -3,6 +3,7 @@ module.exports = {
|
|||
content: [
|
||||
'./web/modules/custom/riverside_pt/templates/**/*.twig',
|
||||
'./web/modules/custom/riverside_pt/src/**/*.php',
|
||||
'./web/modules/custom/riverside_pt/js/components/**/*.js',
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
|
|
|
|||
BIN
web/modules/custom/riverside_pt/.DS_Store
vendored
|
|
@ -554,12 +554,6 @@ video {
|
|||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 920px) {
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Neutralise any theme container constraints */
|
||||
|
||||
/* Hide Olivero/theme chrome we don't use */
|
||||
|
|
@ -645,6 +639,10 @@ video {
|
|||
position: static;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -657,6 +655,30 @@ video {
|
|||
inset: 0px;
|
||||
}
|
||||
|
||||
.left-3 {
|
||||
left: 0.75rem;
|
||||
}
|
||||
|
||||
.right-3 {
|
||||
right: 0.75rem;
|
||||
}
|
||||
|
||||
.top-1\/2 {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.right-4 {
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.top-4 {
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
.z-50 {
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.m-0 {
|
||||
margin: 0px;
|
||||
}
|
||||
|
|
@ -666,10 +688,18 @@ video {
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mb-0 {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.mb-1\.5 {
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.mb-10 {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.mb-12 {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
|
@ -678,6 +708,10 @@ video {
|
|||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.mb-8 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.ml-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
|
@ -686,6 +720,10 @@ video {
|
|||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -698,6 +736,10 @@ video {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
|
@ -710,10 +752,34 @@ video {
|
|||
height: 0.25rem;
|
||||
}
|
||||
|
||||
.h-10 {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.h-11 {
|
||||
height: 2.75rem;
|
||||
}
|
||||
|
||||
.h-3 {
|
||||
height: 0.75rem;
|
||||
}
|
||||
|
||||
.h-48 {
|
||||
height: 12rem;
|
||||
}
|
||||
|
||||
.h-72 {
|
||||
height: 18rem;
|
||||
}
|
||||
|
||||
.h-\[420px\] {
|
||||
height: 420px;
|
||||
}
|
||||
|
||||
.h-8 {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.max-h-\[calc\(100\%_-_100px\)\] {
|
||||
max-height: calc(100% - 100px);
|
||||
}
|
||||
|
|
@ -722,14 +788,18 @@ video {
|
|||
min-height: 560px;
|
||||
}
|
||||
|
||||
.min-h-\[5rem\] {
|
||||
min-height: 5rem;
|
||||
.w-10 {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.w-11 {
|
||||
width: 2.75rem;
|
||||
}
|
||||
|
||||
.w-3 {
|
||||
width: 0.75rem;
|
||||
}
|
||||
|
||||
.w-\[45\%\] {
|
||||
width: 45%;
|
||||
}
|
||||
|
|
@ -738,6 +808,10 @@ video {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.w-8 {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.min-w-0 {
|
||||
min-width: 0px;
|
||||
}
|
||||
|
|
@ -750,6 +824,14 @@ video {
|
|||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.max-w-\[680px\] {
|
||||
max-width: 680px;
|
||||
}
|
||||
|
||||
.max-w-lg {
|
||||
max-width: 32rem;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
|
@ -762,16 +844,29 @@ video {
|
|||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.-translate-y-1\/2 {
|
||||
--tw-translate-y: -50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.transform {
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.resize {
|
||||
resize: both;
|
||||
}
|
||||
|
||||
.list-none {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.grid-cols-\[repeat\(auto-fit\2c minmax\(220px\2c 1fr\)\)\] {
|
||||
grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
|
||||
.grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
|
|
@ -802,6 +897,14 @@ video {
|
|||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.gap-12 {
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-3 {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
|
@ -814,6 +917,14 @@ video {
|
|||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.gap-8 {
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.gap-\[1vw\] {
|
||||
gap: 1vw;
|
||||
}
|
||||
|
||||
.gap-x-8 {
|
||||
-moz-column-gap: 2rem;
|
||||
column-gap: 2rem;
|
||||
|
|
@ -831,6 +942,10 @@ video {
|
|||
align-self: center;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.whitespace-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -843,6 +958,10 @@ video {
|
|||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
|
@ -859,19 +978,28 @@ video {
|
|||
border-width: 0px;
|
||||
}
|
||||
|
||||
.border-2 {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.border-\[\#1e3a5f\] {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(30 58 95 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.border-blue-500 {
|
||||
.border-\[\#306f8e\] {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
|
||||
border-color: rgb(48 111 142 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.border-gray-200 {
|
||||
.border-\[\#b8d4dc\] {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
|
||||
border-color: rgb(184 212 220 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.border-gray-300 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.border-white\/60 {
|
||||
|
|
@ -883,19 +1011,28 @@ 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-\[\#aac6c6\] {
|
||||
.bg-\[\#89a0a0\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(170 198 198 / var(--tw-bg-opacity, 1));
|
||||
background-color: rgb(137 160 160 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-gray-100 {
|
||||
.bg-\[\#dde8f0\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
|
||||
background-color: rgb(221 232 240 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-current {
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
.bg-transparent {
|
||||
|
|
@ -907,6 +1044,14 @@ video {
|
|||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-white\/90 {
|
||||
background-color: rgb(255 255 255 / 0.9);
|
||||
}
|
||||
|
||||
.bg-black\/50 {
|
||||
background-color: rgb(0 0 0 / 0.5);
|
||||
}
|
||||
|
||||
.bg-gradient-to-t {
|
||||
background-image: linear-gradient(to top, var(--tw-gradient-stops));
|
||||
}
|
||||
|
|
@ -944,10 +1089,23 @@ video {
|
|||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.p-5 {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.p-6 {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.px-2 {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.px-3\.5 {
|
||||
padding-left: 0.875rem;
|
||||
padding-right: 0.875rem;
|
||||
|
|
@ -968,9 +1126,9 @@ video {
|
|||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.px-8 {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
.px-\[4em\] {
|
||||
padding-left: 4em;
|
||||
padding-right: 4em;
|
||||
}
|
||||
|
||||
.py-1 {
|
||||
|
|
@ -988,6 +1146,16 @@ video {
|
|||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.py-20 {
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
.py-24 {
|
||||
padding-top: 6rem;
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
|
||||
.py-3 {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
|
|
@ -998,8 +1166,35 @@ video {
|
|||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.pb-10 {
|
||||
padding-bottom: 2.5rem;
|
||||
.py-\[1em\] {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.px-8 {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.py-6 {
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.pb-4 {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.pt-0 {
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.pt-4 {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.pt-\[78px\] {
|
||||
padding-top: 78px;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
|
|
@ -1010,6 +1205,11 @@ video {
|
|||
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
|
|
@ -1019,10 +1219,6 @@ video {
|
|||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
.text-\[14px\] {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.text-\[15px\] {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
|
@ -1031,8 +1227,33 @@ video {
|
|||
font-size: 17px;
|
||||
}
|
||||
|
||||
.text-\[clamp\(2rem\2c 3\.5vw\2c 3\.25rem\)\] {
|
||||
font-size: clamp(2rem, 3.5vw, 3.25rem);
|
||||
.text-\[1vw\] {
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
.text-\[2\.75rem\] {
|
||||
font-size: 2.75rem;
|
||||
}
|
||||
|
||||
.text-\[4\.5rem\] {
|
||||
font-size: 4.5rem;
|
||||
}
|
||||
|
||||
.text-\[clamp\(1\.5rem\2c 3\.5vw\2c 3\.25rem\)\] {
|
||||
font-size: clamp(1.5rem, 3.5vw, 3.25rem);
|
||||
}
|
||||
|
||||
.text-\[clamp\(2\.5rem\2c 4vw\2c 3\.75rem\)\] {
|
||||
font-size: clamp(2.5rem, 4vw, 3.75rem);
|
||||
}
|
||||
|
||||
.text-\[clamp\(2\.5rem\2c 5vw\2c 4rem\)\] {
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
}
|
||||
|
||||
.text-base {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
|
|
@ -1045,6 +1266,16 @@ video {
|
|||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
@ -1061,6 +1292,18 @@ video {
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.leading-\[1\.1\] {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.leading-none {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.leading-relaxed {
|
||||
line-height: 1.625;
|
||||
}
|
||||
|
|
@ -1069,6 +1312,10 @@ video {
|
|||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.tracking-widest {
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.text-\[\#1e3a5f\] {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(30 58 95 / var(--tw-text-opacity, 1));
|
||||
|
|
@ -1079,9 +1326,9 @@ video {
|
|||
color: rgb(30 58 138 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-blue-500 {
|
||||
.text-\[\#306f8e\] {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246 / var(--tw-text-opacity, 1));
|
||||
color: rgb(48 111 142 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-blue-900 {
|
||||
|
|
@ -1089,16 +1336,31 @@ video {
|
|||
color: rgb(30 58 138 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-gray-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-gray-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-gray-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-gray-700 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-gray-800 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(31 41 55 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-gray-900 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
|
||||
|
|
@ -1113,16 +1375,45 @@ video {
|
|||
color: rgb(255 255 255 / 0.8);
|
||||
}
|
||||
|
||||
.text-white\/70 {
|
||||
color: rgb(255 255 255 / 0.7);
|
||||
}
|
||||
|
||||
.no-underline {
|
||||
text-decoration-line: none;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.shadow-sm {
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.shadow-2xl {
|
||||
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
||||
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.outline-none {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.transition {
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.transition-\[transform\2c opacity\] {
|
||||
transition-property: transform,opacity;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
|
@ -1167,16 +1458,16 @@ video {
|
|||
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-blue-500:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:bg-white\/10:hover {
|
||||
background-color: rgb(255 255 255 / 0.1);
|
||||
}
|
||||
|
|
@ -1191,6 +1482,15 @@ video {
|
|||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:text-gray-600:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.disabled\:opacity-30:disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.sm\:block {
|
||||
display: block;
|
||||
|
|
@ -1216,16 +1516,16 @@ video {
|
|||
flex-grow: 2;
|
||||
}
|
||||
|
||||
.sm\:basis-\[12\%\] {
|
||||
flex-basis: 12%;
|
||||
.sm\:basis-\[10\%\] {
|
||||
flex-basis: 10%;
|
||||
}
|
||||
|
||||
.sm\:basis-\[34\%\] {
|
||||
flex-basis: 34%;
|
||||
}
|
||||
|
||||
.sm\:basis-\[38\%\] {
|
||||
flex-basis: 38%;
|
||||
.sm\:basis-\[40\%\] {
|
||||
flex-basis: 40%;
|
||||
}
|
||||
|
||||
.sm\:basis-\[50\%\] {
|
||||
|
|
@ -1240,6 +1540,10 @@ video {
|
|||
flex-basis: 8%;
|
||||
}
|
||||
|
||||
.sm\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.sm\:justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -1279,15 +1583,45 @@ video {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.md\:h-20 {
|
||||
height: 5rem;
|
||||
.md\:h-\[520px\] {
|
||||
height: 520px;
|
||||
}
|
||||
|
||||
.md\:h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.md\:w-\[46\%\] {
|
||||
width: 46%;
|
||||
}
|
||||
|
||||
.md\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.md\:gap-20 {
|
||||
gap: 5rem;
|
||||
}
|
||||
|
||||
.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) {
|
||||
.xl\:grid-cols-4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,6 @@
|
|||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
@media (min-width: theme('screens.md')) {
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
}
|
||||
/* Neutralise any theme container constraints */
|
||||
.page-wrapper {
|
||||
max-width: none;
|
||||
|
|
|
|||
BIN
web/modules/custom/riverside_pt/images/.DS_Store
vendored
Normal file
BIN
web/modules/custom/riverside_pt/images/Frame_6.png
Normal file
|
After Width: | Height: | Size: 2.1 MiB |
|
Before Width: | Height: | Size: 260 KiB After Width: | Height: | Size: 327 KiB |
BIN
web/modules/custom/riverside_pt/images/neck.jpg
Normal file
|
After Width: | Height: | Size: 1 MiB |
BIN
web/modules/custom/riverside_pt/images/panels/1.jpg
Normal file
|
After Width: | Height: | Size: 245 KiB |
BIN
web/modules/custom/riverside_pt/images/panels/2.jpg
Normal file
|
After Width: | Height: | Size: 233 KiB |
BIN
web/modules/custom/riverside_pt/images/panels/3.jpg
Normal file
|
After Width: | Height: | Size: 204 KiB |
BIN
web/modules/custom/riverside_pt/images/panels/4.jpg
Normal file
|
After Width: | Height: | Size: 176 KiB |
|
|
@ -0,0 +1,69 @@
|
|||
import { h, render } from 'https://esm.sh/preact@10';
|
||||
import { useState, useLayoutEffect, useRef } from 'https://esm.sh/preact@10/hooks';
|
||||
import { html } from 'https://esm.sh/htm@3/preact';
|
||||
|
||||
const IMAGES = [
|
||||
{ src: '/modules/custom/riverside_pt/images/hero.jpg', alt: 'Physical therapy session' },
|
||||
{ src: '/modules/custom/riverside_pt/images/Frame_6.png', alt: 'Patient care' },
|
||||
{ src: '/modules/custom/riverside_pt/images/hero.jpg', alt: 'Rehabilitation' },
|
||||
{ src: '/modules/custom/riverside_pt/images/Frame_6.png', alt: 'Our facility' },
|
||||
];
|
||||
|
||||
function Carousel() {
|
||||
const [index, setIndex] = useState(0);
|
||||
const [itemWidth, setItemWidth] = useState(0);
|
||||
const containerRef = useRef(null);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const update = () => {
|
||||
if (containerRef.current) setItemWidth(containerRef.current.offsetWidth / 1.5);
|
||||
};
|
||||
update();
|
||||
window.addEventListener('resize', update);
|
||||
return () => window.removeEventListener('resize', update);
|
||||
}, []);
|
||||
|
||||
const prev = () => setIndex(i => Math.max(0, i - 1));
|
||||
const next = () => setIndex(i => Math.min(IMAGES.length - 1, i + 1));
|
||||
|
||||
return html`
|
||||
<div class="relative">
|
||||
<div ref=${containerRef} class="overflow-hidden">
|
||||
<div
|
||||
class="flex"
|
||||
style=${{ transform: `translateX(${-index * itemWidth}px)`, transition: 'transform 0.4s ease' }}
|
||||
>
|
||||
${IMAGES.map((img, i) => html`
|
||||
<div key=${i} style=${{ width: itemWidth + 'px', flexShrink: 0 }}>
|
||||
<img src=${img.src} alt=${img.alt} class="w-full h-72 object-cover" />
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick=${prev}
|
||||
disabled=${index === 0}
|
||||
class="absolute left-3 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/90 shadow flex items-center justify-center text-lg cursor-pointer disabled:opacity-30"
|
||||
aria-label="Previous"
|
||||
>←</button>
|
||||
<button
|
||||
onClick=${next}
|
||||
disabled=${index === IMAGES.length - 1}
|
||||
class="absolute right-3 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/90 shadow flex items-center justify-center text-lg cursor-pointer disabled:opacity-30"
|
||||
aria-label="Next"
|
||||
>→</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
class RptCarousel extends HTMLElement {
|
||||
connectedCallback() {
|
||||
render(html`<${Carousel} />`, this);
|
||||
}
|
||||
disconnectedCallback() {
|
||||
render(null, this);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('rpt-carousel', RptCarousel);
|
||||
34
web/modules/custom/riverside_pt/js/components/rpt-toggle.js
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { h, render } from 'https://esm.sh/preact@10';
|
||||
import { useState } from 'https://esm.sh/preact@10/hooks';
|
||||
import { html } from 'https://esm.sh/htm@3/preact';
|
||||
|
||||
function Toggle({ label = 'Toggle' }) {
|
||||
const [checked, setChecked] = useState(false);
|
||||
|
||||
return html`
|
||||
<button
|
||||
onClick=${() => {
|
||||
setChecked(c => !c)
|
||||
}}
|
||||
aria-pressed=${checked}
|
||||
class=${`flex items-center gap-2 px-4 py-2 rounded-full border-2 border-[#306f8e] text-sm font-medium cursor-pointer transition-colors ${
|
||||
checked ? 'bg-[#306f8e] text-white' : 'bg-transparent text-[#306f8e]'
|
||||
}`}
|
||||
>
|
||||
<span class="w-3 h-3 rounded-full bg-current"></span>
|
||||
${label}
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
|
||||
class RptToggle extends HTMLElement {
|
||||
connectedCallback() {
|
||||
render(html`<${Toggle} label=${this.getAttribute('label')} />`, this);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
render(null, this);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('rpt-toggle', RptToggle);
|
||||
|
|
@ -4,7 +4,8 @@ app:
|
|||
css/app.css: {}
|
||||
js:
|
||||
js/nav.js: {}
|
||||
|
||||
js/components/rpt-toggle.js: { attributes: { type: module } }
|
||||
js/components/rpt-carousel.js: { attributes: { type: module } }
|
||||
schedule:
|
||||
css:
|
||||
theme:
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<header class="rpt-header relative md:fixed md:top-0 md:left-0 md:right-0 md:z-50 md:h-20 bg-white shadow-sm" role="banner">
|
||||
<div class="flex flex-wrap items-center min-h-[5rem] md:h-full max-w-[1200px] mx-auto px-6 gap-y-0 gap-x-8 md:gap-8">
|
||||
<header class="rpt-header relative md:fixed md:top-0 md:left-0 md:right-0 md:z-50 p-5 bg-white shadow-sm" role="banner">
|
||||
<div class="flex flex-wrap items-center md:h-full max-w-[1200px] mx-auto px-6 gap-y-0 gap-x-8 md:gap-8">
|
||||
|
||||
<a class="text-lg font-bold text-[#1e3a5f] no-underline whitespace-nowrap shrink-0 hover:text-[#1e3a8a]"
|
||||
href="{{ home_url }}">{{ site_name }}</a>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,9 @@
|
|||
<section class="relative bg-[#aac6c6] min-h-[560px]">
|
||||
<section class="
|
||||
relative bg-[#89a0a0] md:bg-[red] lg:bg-[blue] min-h-[560px]
|
||||
|
||||
/* This number, 78px is supposed to match the header height */
|
||||
pt-[78px]
|
||||
">
|
||||
|
||||
{# Box 1: Image — full-bleed on mobile, offset on sm+ #}
|
||||
<div class="absolute inset-0 flex">
|
||||
|
|
@ -13,54 +18,118 @@
|
|||
{# Gradient overlay on mobile so text stays readable over the image #}
|
||||
<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 38% | spacer 12% #}
|
||||
{# Box 2: Text — spacer 50% | text 40% | spacer 10% #}
|
||||
<div class="relative flex min-h-[560px] py-8">
|
||||
<div class="hidden sm:block sm:basis-[50%] sm:grow-[2]"></div>
|
||||
<div class="basis-full sm:basis-[38%] sm:grow flex flex-col justify-end sm:justify-center px-6 sm:px-0 pb-10 sm:pb-0 py-16 gap-6">
|
||||
<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-3 text-[clamp(2rem,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-0 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]"
|
||||
>
|
||||
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>
|
||||
<div class="flex gap-4 flex-wrap">
|
||||
<div class="flex gap-4 flex-wrap items-center">
|
||||
<a
|
||||
href="/schedule"
|
||||
class="w-full sm:w-auto text-center px-8 py-3 rounded-none bg-[#306f8e] text-white text-sm font-medium no-underline transition-colors hover:bg-[#3a6a7a]"
|
||||
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-[#3a6a7a]"
|
||||
>Book An Appointment</a>
|
||||
<a href="/services" class="hidden sm:inline-block px-8 py-3 border border-white/60 text-white text-sm font-medium no-underline transition-colors hover:bg-white/10">View Our Services</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"
|
||||
>View Our Services</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden sm:block sm:basis-[12%] sm:grow-[2]"></div>
|
||||
<div class="hidden sm:block sm:basis-[10%] sm:grow-[2]"></div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="py-16 px-6 bg-gray-100">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl font-bold text-blue-900 mb-1.5">Bringing Relief</h2>
|
||||
<p class="text-[17px] text-gray-500">Our wide range of services</p>
|
||||
<section class="py-16 px-6 bg-white">
|
||||
<div class="max-w-[1040px] mx-auto mb-12">
|
||||
<p class="text-xs tracking-widest uppercase text-[#306f8e] font-semibold text-center mb-3">Bringing Relief</p>
|
||||
<h2 class="text-[2.75rem] font-serif font-normal text-gray-900 leading-tight">Our Wide Range of Physical Therapy Services</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-[repeat(auto-fit,minmax(220px,1fr))] gap-6 max-w-[1040px] mx-auto">
|
||||
<div class="flex flex-col gap-3 border border-gray-200 rounded-lg p-6 bg-white">
|
||||
<h3 class="text-[17px] font-semibold text-gray-900">Diagnostic Evaluation</h3>
|
||||
<p class="text-[15px] text-gray-500 leading-relaxed flex-1">Comprehensive assessment to identify the root cause of your pain and build a personalized recovery plan.</p>
|
||||
<a href="/services" class="inline-block px-4 py-2 text-[14px] text-blue-500 border border-blue-500 rounded no-underline transition-colors hover:bg-blue-500 hover:text-white">More Info</a>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6 max-w-[1040px] mx-auto">
|
||||
<div class="flex flex-col border border-[#b8d4dc] bg-white overflow-hidden">
|
||||
<img src="/modules/custom/riverside_pt/images/panels/1.jpg" alt="Diagnostic assessment" class="w-full h-48 object-cover" />
|
||||
<div class="flex flex-col gap-4 p-6 flex-1">
|
||||
<h3 class="text-2xl font-normal text-gray-900">Diagnostic Assessment</h3>
|
||||
<p class="text-[15px] text-gray-600 leading-relaxed flex-1">Your recovery starts with clarity. We perform a thorough evaluation of your condition, movement, and goals to create a precise, personalized treatment plan from day one.</p>
|
||||
<a href="/services" class="inline-flex items-center gap-3 px-5 py-3 bg-[#2d5f7a] text-white text-[15px] font-medium no-underline hover:bg-[#1e4a60]">More Info →</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 border border-gray-200 rounded-lg p-6 bg-white">
|
||||
<h3 class="text-[17px] font-semibold text-gray-900">Sports Rehabilitation</h3>
|
||||
<p class="text-[15px] text-gray-500 leading-relaxed flex-1">Targeted programs to help athletes recover from injury and return to peak performance safely.</p>
|
||||
<a href="/services" class="inline-block px-4 py-2 text-[14px] text-blue-500 border border-blue-500 rounded no-underline transition-colors hover:bg-blue-500 hover:text-white">More Info</a>
|
||||
<div class="flex flex-col border border-[#b8d4dc] bg-white overflow-hidden">
|
||||
<img src="/modules/custom/riverside_pt/images/panels/2.jpg" alt="Sports rehabilitation" class="w-full h-48 object-cover" />
|
||||
<div class="flex flex-col gap-4 p-6 flex-1">
|
||||
<h3 class="text-2xl font-normal text-gray-900">Sports Rehabilitation</h3>
|
||||
<p class="text-[15px] text-gray-600 leading-relaxed flex-1">We help athletes recover from injury and return to peak performance with targeted, sport-specific programs built around your body and your goals.</p>
|
||||
<a href="/services" class="inline-flex items-center gap-3 px-5 py-3 bg-[#2d5f7a] text-white text-[15px] font-medium no-underline hover:bg-[#1e4a60]">More Info →</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 border border-gray-200 rounded-lg p-6 bg-white">
|
||||
<h3 class="text-[17px] font-semibold text-gray-900">Pre/Post-Surgical Rehab</h3>
|
||||
<p class="text-[15px] text-gray-500 leading-relaxed flex-1">Expert care before and after surgery to maximize recovery outcomes and restore full function.</p>
|
||||
<a href="/services" class="inline-block px-4 py-2 text-[14px] text-blue-500 border border-blue-500 rounded no-underline transition-colors hover:bg-blue-500 hover:text-white">More Info</a>
|
||||
<div class="flex flex-col border border-[#b8d4dc] bg-white overflow-hidden">
|
||||
<img src="/modules/custom/riverside_pt/images/panels/3.jpg" alt="Pre and post-surgical rehab" class="w-full h-48 object-cover" />
|
||||
<div class="flex flex-col gap-4 p-6 flex-1">
|
||||
<h3 class="text-2xl font-normal text-gray-900">Pre/Post-Surgical Rehab</h3>
|
||||
<p class="text-[15px] text-gray-600 leading-relaxed flex-1">Expert care before and after surgery to reduce recovery time, minimize complications, and restore full strength and function.</p>
|
||||
<a href="/services" class="inline-flex items-center gap-3 px-5 py-3 bg-[#2d5f7a] text-white text-[15px] font-medium no-underline hover:bg-[#1e4a60]">More Info →</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 border border-gray-200 rounded-lg p-6 bg-white">
|
||||
<h3 class="text-[17px] font-semibold text-gray-900">Neurological Physical Therapy</h3>
|
||||
<p class="text-[15px] text-gray-500 leading-relaxed flex-1">Specialized therapy for nervous system conditions, helping you regain strength and independence.</p>
|
||||
<a href="/services" class="inline-block px-4 py-2 text-[14px] text-blue-500 border border-blue-500 rounded no-underline transition-colors hover:bg-blue-500 hover:text-white">More Info</a>
|
||||
<div class="flex flex-col border border-[#b8d4dc] bg-white overflow-hidden">
|
||||
<img src="/modules/custom/riverside_pt/images/panels/4.jpg" alt="Neurological physical therapy" class="w-full h-48 object-cover" />
|
||||
<div class="flex flex-col gap-4 p-6 flex-1">
|
||||
<h3 class="text-2xl font-normal text-gray-900">Neurological Therapy</h3>
|
||||
<p class="text-[15px] text-gray-600 leading-relaxed flex-1">Specialized therapy for nervous system conditions — helping you rebuild strength, coordination, and independence at every stage of recovery.</p>
|
||||
<a href="/services" class="inline-flex items-center gap-3 px-5 py-3 bg-[#2d5f7a] text-white text-[15px] font-medium no-underline hover:bg-[#1e4a60]">More Info →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-[#dde8f0] py-20 px-6 overflow-hidden">
|
||||
<div class="max-w-[1200px] mx-auto flex flex-col md:flex-row gap-12 md:gap-20 items-center">
|
||||
|
||||
<div class="flex-1 flex flex-col gap-8 min-w-0">
|
||||
<h2 class="text-[clamp(2.5rem,4vw,3.75rem)] font-serif font-normal text-gray-900 leading-[1.1]">Our mission is to help you reclaim your body.</h2>
|
||||
<p class="text-base text-gray-600 leading-relaxed max-w-lg">Every new patient begins with a comprehensive diagnostic assessment. From there, we create a fully personalized treatment plan tailored to your goals — whether that means returning to sport, recovering from surgery, or restoring neurological function.</p>
|
||||
<div class="flex gap-12 pt-4">
|
||||
<div>
|
||||
<p class="text-[4.5rem] font-serif text-[#306f8e] leading-none">15</p>
|
||||
<p class="text-xs tracking-widest uppercase text-[#306f8e] font-semibold mt-2">Years Open</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[4.5rem] font-serif text-[#306f8e] leading-none">300</p>
|
||||
<p class="text-xs tracking-widest uppercase text-[#306f8e] font-semibold mt-2">Patients Served</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-[46%] shrink-0">
|
||||
<img src="/modules/custom/riverside_pt/images/neck.jpg" alt="Patient receiving physical therapy" class="w-full h-[420px] md:h-[520px] object-cover" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-[1040px] mx-auto px-6 mb-8">
|
||||
<h2 class="text-3xl font-bold text-blue-900 mb-1.5">Our Facility</h2>
|
||||
<p class="text-[17px] text-gray-500">A look inside our clinic</p>
|
||||
</div>
|
||||
<rpt-carousel class="block"></rpt-carousel>
|
||||
</section>
|
||||
|
||||
<section class="py-24 px-6 bg-white">
|
||||
<div class="max-w-[680px] mx-auto">
|
||||
<h2 class="text-[clamp(2.5rem,5vw,4rem)] font-serif font-normal text-gray-800 mb-10">Book An Appointment</h2>
|
||||
<fieldset class="border border-gray-300 rounded-lg px-4 pb-4 pt-0">
|
||||
<legend class="text-sm text-gray-400 px-2">Appointment Type</legend>
|
||||
<select class="w-full text-gray-700 text-base bg-transparent outline-none py-2 cursor-pointer">
|
||||
<option value="">— Select A Service —</option>
|
||||
<option value="diagnostic">Diagnostic Assessment</option>
|
||||
<option value="sports">Sports Rehabilitation</option>
|
||||
<option value="surgical">Pre/Post-Surgical Rehab</option>
|
||||
<option value="neuro">Neurological Therapy</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||