Style tweaks
This commit is contained in:
Philip Peterson
parent
cd2d59f298
commit
2e5425606d
4 changed files with 169 additions and 79 deletions
|
|
@ -674,6 +674,11 @@ video {
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
.my-8{
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.mb-0{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
|
@ -690,8 +695,8 @@ video {
|
|||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.mb-3{
|
||||
margin-bottom: 0.75rem;
|
||||
.mb-2{
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.mb-8{
|
||||
|
|
@ -710,8 +715,20 @@ video {
|
|||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.mb-2{
|
||||
margin-bottom: 0.5rem;
|
||||
.ml-3{
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.mt-\[78px\]{
|
||||
margin-top: 78px;
|
||||
}
|
||||
|
||||
.mt-\[2vw\]{
|
||||
margin-top: 2vw;
|
||||
}
|
||||
|
||||
.mb-\[1vw\]{
|
||||
margin-bottom: 1vw;
|
||||
}
|
||||
|
||||
.block{
|
||||
|
|
@ -766,14 +783,34 @@ video {
|
|||
height: 420px;
|
||||
}
|
||||
|
||||
.h-full{
|
||||
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;
|
||||
}
|
||||
|
||||
.w-10{
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
|
@ -814,6 +851,10 @@ video {
|
|||
max-width: 32rem;
|
||||
}
|
||||
|
||||
.max-w-\[420px\]{
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.flex-1{
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
|
@ -1034,6 +1075,10 @@ video {
|
|||
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%);
|
||||
}
|
||||
|
||||
.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);
|
||||
|
|
@ -1145,6 +1190,11 @@ video {
|
|||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.py-4{
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.pb-4{
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
|
@ -1161,18 +1211,30 @@ video {
|
|||
padding-top: 78px;
|
||||
}
|
||||
|
||||
.pt-px{
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
.pb-8{
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.pt-8{
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.text-center{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.font-serif{
|
||||
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
}
|
||||
|
||||
.font-hedvig{
|
||||
font-family: Hedvig Letters Sans, sans-serif;
|
||||
}
|
||||
|
||||
.font-serif{
|
||||
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
}
|
||||
|
||||
.text-2xl{
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
|
|
@ -1199,8 +1261,8 @@ video {
|
|||
font-size: 1vw;
|
||||
}
|
||||
|
||||
.text-\[2\.75rem\]{
|
||||
font-size: 2.75rem;
|
||||
.text-\[2\.25rem\]{
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.text-\[4\.5rem\]{
|
||||
|
|
@ -1211,14 +1273,14 @@ video {
|
|||
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-\[clamp\(2\.75rem\2c 4\.5vw\2c 4rem\)\]{
|
||||
font-size: clamp(2.75rem, 4.5vw, 4rem);
|
||||
}
|
||||
|
||||
.text-base{
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
|
|
@ -1239,14 +1301,14 @@ video {
|
|||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.text-\[2\.25rem\]{
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.font-bold{
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.font-light{
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.font-medium{
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
@ -1410,6 +1472,11 @@ video {
|
|||
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));
|
||||
|
|
@ -1429,6 +1496,16 @@ video {
|
|||
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\:text-\[\#1e3a8a\]:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(30 58 138 / var(--tw-text-opacity, 1));
|
||||
|
|
@ -1439,6 +1516,11 @@ video {
|
|||
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));
|
||||
}
|
||||
|
||||
.disabled\:opacity-30:disabled{
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 233 KiB After Width: | Height: | Size: 227 KiB |
|
|
@ -1,7 +1,7 @@
|
|||
<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]"
|
||||
<a class="text-lg font-bold text-[#306f8e] no-underline whitespace-nowrap shrink-0 hover:text-[#285a6e]"
|
||||
href="{{ home_url }}">{{ site_name }}</a>
|
||||
|
||||
<nav class="flex-1 min-w-0" id="rpt-main-nav" aria-label="Main navigation">
|
||||
|
|
@ -21,12 +21,19 @@
|
|||
{% endfor %}
|
||||
{% if has_cta %}
|
||||
<li class="ml-auto px-6">
|
||||
<div class="flex items-center gap-4">
|
||||
{% for item in menu_items %}
|
||||
{% if item.is_cta %}
|
||||
<a class="inline-block px-5 py-2 rounded-none bg-[#306f8e] text-white text-sm font-medium no-underline rounded border border-[#1e3a5f] whitespace-nowrap transition-colors hover:bg-[#152a45] hover:border-[#152a45] hover:text-white"
|
||||
{% if item.title == 'Contact' %}
|
||||
<a class="inline-block px-5 py-2 rounded-none bg-white text-[#306f8e] text-sm font-medium no-underline rounded border-2 border-[#306f8e] whitespace-nowrap transition-colors hover:bg-[#e8f2f6] hover:text-[#285a6e]"
|
||||
href="{{ item.url }}">{{ item.title }}</a>
|
||||
{% else %}
|
||||
<a class="inline-block px-5 py-2 rounded-none bg-[#306f8e] text-white text-sm font-medium no-underline rounded border border-[#1e3a5f] whitespace-nowrap transition-colors hover:bg-[#1f5a6e] hover:border-[#1f5a6e] hover:text-white"
|
||||
href="{{ item.url }}">{{ item.title }}</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<div class="bg-[linear-gradient(180deg,#83A1A1_0%,#86AAB6_100%)] pt-px">
|
||||
<section class="
|
||||
relative bg-[#89a0a0] md:bg-[red] lg:bg-[blue] min-h-[560px]
|
||||
relative mt-[78px] min-h-[480px]
|
||||
|
||||
/* 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">
|
||||
<div class="absolute inset-0 flex pt-8 pb-8">
|
||||
<div class="hidden sm:block sm:basis-[8%] sm:grow-[2]"></div>
|
||||
<img
|
||||
src="/modules/custom/riverside_pt/images/hero.jpg"
|
||||
alt="A man helps a woman in a wheelchair"
|
||||
class="basis-full sm:basis-[58%] sm:grow min-w-0 self-center object-cover object-[center_0%] max-h-[calc(100%_-_100px)]" />
|
||||
class="basis-full sm:basis-[58%] sm:grow min-w-0 h-full object-cover object-[center_0%]" />
|
||||
<div class="hidden sm:block sm:basis-[34%] sm:grow-[2]"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -19,19 +19,19 @@
|
|||
<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-[560px] py-8">
|
||||
<div class="relative flex min-h-[480px] py-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-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]"
|
||||
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]"
|
||||
>
|
||||
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 items-center">
|
||||
<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-[#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-[#1f5a6e]"
|
||||
>Book An Appointment</a>
|
||||
<a
|
||||
href="/services"
|
||||
|
|
@ -43,11 +43,12 @@
|
|||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="py-16 px-6 bg-white">
|
||||
<div class="max-w-[1040px] mx-auto mb-12">
|
||||
<p class="text-sm tracking-widest uppercase text-[#306f8e] font-semibold text-center mb-2">Bringing Relief</p>
|
||||
<h2 class="text-[2.25rem] font-serif font-normal text-gray-900 leading-tight">Our Wide Range of Physical Therapy Services</h2>
|
||||
<h2 class="text-[2.25rem] font-serif font-normal text-gray-900 leading-tight text-center">Our Wide Range of Physical Therapy Services</h2>
|
||||
</div>
|
||||
<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">
|
||||
|
|
@ -55,7 +56,7 @@
|
|||
<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>
|
||||
<a href="/services" class="inline-flex items-center gap-3 px-5 py-3 bg-[#306f8e] text-white text-[15px] font-medium no-underline hover:bg-[#1f5a6e]">More Info →</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col border border-[#b8d4dc] bg-white overflow-hidden">
|
||||
|
|
@ -63,7 +64,7 @@
|
|||
<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>
|
||||
<a href="/services" class="inline-flex items-center gap-3 px-5 py-3 bg-[#306f8e] text-white text-[15px] font-medium no-underline hover:bg-[#1f5a6e]">More Info →</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col border border-[#b8d4dc] bg-white overflow-hidden">
|
||||
|
|
@ -71,7 +72,7 @@
|
|||
<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>
|
||||
<a href="/services" class="inline-flex items-center gap-3 px-5 py-3 bg-[#306f8e] text-white text-[15px] font-medium no-underline hover:bg-[#1f5a6e]">More Info →</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col border border-[#b8d4dc] bg-white overflow-hidden">
|
||||
|
|
@ -79,7 +80,7 @@
|
|||
<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>
|
||||
<a href="/services" class="inline-flex items-center gap-3 px-5 py-3 bg-[#306f8e] text-white text-[15px] font-medium no-underline hover:bg-[#1f5a6e]">More Info →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -89,11 +90,11 @@
|
|||
<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>
|
||||
<h2 class="text-[clamp(2.75rem,4.5vw,4rem)] font-serif font-light text-gray-900 leading-[1.1]">Our mission is to help you reclaim your body.</h2>
|
||||
<p class="text-base text-gray-700 font-light 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>
|
||||
<div class="font-hedvig">
|
||||
<p class="text-[4.5rem] font-light text-[#306f8e] leading-none">15</p>
|
||||
<p class="text-xs tracking-widest uppercase text-[#306f8e] font-semibold mt-2">Years Open</p>
|
||||
</div>
|
||||
<div class="font-hedvig">
|
||||
|
|
@ -119,9 +120,9 @@
|
|||
</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">
|
||||
<div class="max-w-[420px] mx-auto">
|
||||
<h2 class="text-[clamp(2.5rem,5vw,4rem)] font-serif font-light text-gray-800 mb-10 text-center">Book An Appointment</h2>
|
||||
<fieldset class="border border-gray-300 rounded-lg px-4 pb-4 pt-0 mx-auto">
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue