Cold-Air-Networks/customer-riverside
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Consolidate classes

Browse source
This commit is contained in:
Philip Peterson 2026-06-05 02:01:03 -07:00
parent 8d099b220f
commit d4300cf04e
6 changed files with 89 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/modules/custom/riverside_pt/css/app.css
View file

File diff suppressed because one or more lines are too long

40
web/modules/custom/riverside_pt/css/tailwind.css
View file

@ -23,6 +23,46 @@
} }
@layer components { @layer components {
/* Shared design tokens */
.rpt-link {
@apply text-pt-blue-500 hover:underline;
}
.rpt-btn {
@apply inline-flex items-center gap-3 px-5 py-3 bg-pt-blue-500 text-white text-[15px] font-medium no-underline transition-colors hover:bg-pt-blue-600;
}
.rpt-section {
@apply py-16 px-6 bg-white;
}
.rpt-container {
@apply max-w-[1040px] mx-auto;
}
.rpt-heading-lg {
@apply text-2xl font-normal text-gray-900;
}
.rpt-heading-md {
@apply text-xl font-normal mb-3;
}
.rpt-body-text {
@apply text-[15px] text-gray-600 leading-relaxed;
}
.rpt-eyebrow {
@apply text-xs tracking-widest uppercase text-pt-blue-500 font-semibold;
}
/* Service/info card */
.rpt-card {
@apply flex flex-col border border-pt-blue-200 bg-white overflow-hidden;
}
.rpt-card__body {
@apply flex flex-col gap-4 p-6 flex-1;
}
.rpt-card__img {
@apply w-full h-48 object-cover;
}
/* Rounded info card (about page pillars, etc.) */
.rpt-card-rounded {
@apply bg-white p-6 rounded-xl border border-pt-blue-200;
}
/* Mobile nav: max-height slide can't be expressed with utilities alone */ /* Mobile nav: max-height slide can't be expressed with utilities alone */
@media (max-width: calc(theme('screens.md') - 1px)) { @media (max-width: calc(theme('screens.md') - 1px)) {
#rpt-main-nav { #rpt-main-nav {

20
web/modules/custom/riverside_pt/templates/riverside-pt-about.html.twig
View file

@ -19,8 +19,8 @@
</section> </section>
</div> </div>
<section class="py-16 px-6 bg-white"> <section class="rpt-section">
<div class="max-w-[1040px] mx-auto"> <div class="rpt-container">
<h2 class="text-[2.25rem] font-serif font-normal text-gray-900 leading-tight mb-8 text-center">Our Story</h2> <h2 class="text-[2.25rem] font-serif font-normal text-gray-900 leading-tight mb-8 text-center">Our Story</h2>
<div class="max-w-none text-gray-700 space-y-4 text-[15px] leading-relaxed"> <div class="max-w-none text-gray-700 space-y-4 text-[15px] leading-relaxed">
<p>Riverside Physical Therapy was founded in 2011 by Dr. Elena Morales, a passionate physical therapist who had grown frustrated with the one-size-fits-all approaches she saw in larger clinics. After years working in high-volume settings, Elena opened a small practice in a modest office on Riverside Drive with a single treatment table and a clear vision: every patient deserves a thorough, one-on-one evaluation followed by a truly personalized plan designed around their unique body, goals, and life.</p> <p>Riverside Physical Therapy was founded in 2011 by Dr. Elena Morales, a passionate physical therapist who had grown frustrated with the one-size-fits-all approaches she saw in larger clinics. After years working in high-volume settings, Elena opened a small practice in a modest office on Riverside Drive with a single treatment table and a clear vision: every patient deserves a thorough, one-on-one evaluation followed by a truly personalized plan designed around their unique body, goals, and life.</p>
@ -32,26 +32,26 @@
</section> </section>
<section class="bg-pt-blue-100 py-16 px-6"> <section class="bg-pt-blue-100 py-16 px-6">
<div class="max-w-[1040px] mx-auto"> <div class="rpt-container">
<h2 class="text-[2.25rem] font-serif font-normal text-gray-900 leading-tight mb-8 text-center">What Sets Us Apart</h2> <h2 class="text-[2.25rem] font-serif font-normal text-gray-900 leading-tight mb-8 text-center">What Sets Us Apart</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-xl border border-pt-blue-200"> <div class="rpt-card-rounded">
<h3 class="text-xl font-normal mb-3">One-on-one care</h3> <h3 class="rpt-heading-md">One-on-one care</h3>
<p class="text-gray-600">You work with the same therapist throughout your treatment. No hand-offs, no assembly line.</p> <p class="text-gray-600">You work with the same therapist throughout your treatment. No hand-offs, no assembly line.</p>
</div> </div>
<div class="bg-white p-6 rounded-xl border border-pt-blue-200"> <div class="rpt-card-rounded">
<h3 class="text-xl font-normal mb-3">Root cause focus</h3> <h3 class="rpt-heading-md">Root cause focus</h3>
<p class="text-gray-600">We don't just chase symptoms. We find and treat the underlying movement problems.</p> <p class="text-gray-600">We don't just chase symptoms. We find and treat the underlying movement problems.</p>
</div> </div>
<div class="bg-white p-6 rounded-xl border border-pt-blue-200"> <div class="rpt-card-rounded">
<h3 class="text-xl font-normal mb-3">Real results</h3> <h3 class="rpt-heading-md">Real results</h3>
<p class="text-gray-600">Our patients consistently report faster recovery times and lasting improvements.</p> <p class="text-gray-600">Our patients consistently report faster recovery times and lasting improvements.</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section class="py-16 px-6 bg-white"> <section class="rpt-section">
<div class="max-w-[700px] mx-auto text-center"> <div class="max-w-[700px] mx-auto text-center">
<h2 class="text-[2.25rem] font-serif font-normal text-gray-900 leading-tight mb-6">Ready to start your recovery?</h2> <h2 class="text-[2.25rem] font-serif font-normal text-gray-900 leading-tight mb-6">Ready to start your recovery?</h2>
<a href="/book-appointment" class="inline-block px-[4em] py-[1em] bg-pt-blue-500 text-white text-sm font-medium no-underline transition-colors border-2 border-pt-blue-500 hover:bg-pt-blue-600 hover:border-pt-blue-600">Make an Appointment</a> <a href="/book-appointment" class="inline-block px-[4em] py-[1em] bg-pt-blue-500 text-white text-sm font-medium no-underline transition-colors border-2 border-pt-blue-500 hover:bg-pt-blue-600 hover:border-pt-blue-600">Make an Appointment</a>

16
web/modules/custom/riverside_pt/templates/riverside-pt-contact.html.twig
View file

@ -1,4 +1,4 @@
<div class="max-w-[1040px] mx-auto px-6 py-16 bg-pt-blue-50"> <div class="rpt-container px-6 py-16 bg-pt-blue-50">
<h1 class="text-[clamp(2.5rem,5vw,4rem)] font-serif font-light text-gray-900 mb-4">Contact Us</h1> <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-serif font-light text-gray-900 mb-4">Contact Us</h1>
<p class="text-xl text-gray-600 mb-6 max-w-2xl"> <p class="text-xl text-gray-600 mb-6 max-w-2xl">
We'd love to hear from you. Reach out with questions about our services, insurance, or to schedule a visit. We'd love to hear from you. Reach out with questions about our services, insurance, or to schedule a visit.
@ -6,25 +6,25 @@
<p class="text-xl text-gray-600 mb-12 max-w-2xl"> <p class="text-xl text-gray-600 mb-12 max-w-2xl">
Note: This is not an actual healthcare practice. It is merely a demo of Note: This is not an actual healthcare practice. It is merely a demo of
<a href="https://coldairnetworks.com" class="text-pt-blue-500 hover:underline">Cold Air Networks'</a> website design services. <a href="https://coldairnetworks.com" class="rpt-link">Cold Air Networks'</a> website design services.
</p> </p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12"> <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<div> <div>
<h2 class="text-2xl font-normal mb-6 text-gray-900">Our Location</h2> <h2 class="rpt-heading-lg mb-6">Our Location</h2>
<div class="text-gray-700 space-y-1 text-[15px] leading-relaxed"> <div class="text-gray-700 space-y-1 text-[15px] leading-relaxed">
<p><strong>Riverside Physical Therapy</strong></p> <p><strong>Riverside Physical Therapy</strong></p>
<p>123 Riverside Drive, Suite 200</p> <p>123 Riverside Drive, Suite 200</p>
<p>Riverside, CA 92501</p> <p>Riverside, CA 92501</p>
</div> </div>
<h2 class="text-2xl font-normal mt-10 mb-6 text-gray-900">Get in Touch</h2> <h2 class="rpt-heading-lg mt-10 mb-6">Get in Touch</h2>
<div class="space-y-2 text-[15px]"> <div class="space-y-2 text-[15px]">
<p><strong>Phone:</strong> <a href="tel:9515550123" class="text-pt-blue-500 hover:underline">(951) 555-0123</a></p> <p><strong>Phone:</strong> <a href="tel:9515550123" class="rpt-link">(951) 555-0123</a></p>
<p><strong>Email:</strong> <a href="mailto:info@coldairnetworks.com" class="text-pt-blue-500 hover:underline">info@coldairnetworks.com</a></p> <p><strong>Email:</strong> <a href="mailto:info@coldairnetworks.com" class="rpt-link">info@coldairnetworks.com</a></p>
</div> </div>
<h2 class="text-2xl font-normal mt-10 mb-6 text-gray-900">Office Hours</h2> <h2 class="rpt-heading-lg mt-10 mb-6">Office Hours</h2>
<div class="text-gray-700 text-[15px] leading-relaxed"> <div class="text-gray-700 text-[15px] leading-relaxed">
<p>Monday – Friday: 7:00 AM – 7:00 PM</p> <p>Monday – Friday: 7:00 AM – 7:00 PM</p>
<p>Saturday: 8:00 AM – 12:00 PM</p> <p>Saturday: 8:00 AM – 12:00 PM</p>
@ -33,7 +33,7 @@
</div> </div>
<div> <div>
<h2 class="text-2xl font-normal mb-6 text-gray-900">Send Us a Message</h2> <h2 class="rpt-heading-lg mb-6">Send Us a Message</h2>
<p class="text-gray-600 mb-6 text-[15px]"> <p class="text-gray-600 mb-6 text-[15px]">
For appointment requests, please use our online booking tool — it's the fastest way to get scheduled. For appointment requests, please use our online booking tool — it's the fastest way to get scheduled.
</p> </p>

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

@ -47,42 +47,42 @@
</section> </section>
</div> </div>
<section id="pt-services" class="py-16 px-6 bg-white"> <section id="pt-services" class="rpt-section">
<div class="max-w-[1040px] mx-auto mb-12"> <div class="rpt-container mb-12">
<p class="text-sm tracking-widest uppercase text-pt-blue-500 font-semibold text-center mb-2">Bringing Relief</p> <p class="text-sm tracking-widest uppercase text-pt-blue-500 font-semibold text-center mb-2">Bringing Relief</p>
<h2 class="text-[2.25rem] font-serif font-normal text-gray-900 leading-tight text-center">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>
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6 max-w-[1040px] mx-auto"> <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6 rpt-container">
<div class="flex flex-col border border-pt-blue-200 bg-white overflow-hidden"> <div class="rpt-card">
<img src="/modules/custom/riverside_pt/images/panels/1.jpg" alt="Diagnostic assessment" class="w-full h-48 object-cover" /> <img src="/modules/custom/riverside_pt/images/panels/1.jpg" alt="Diagnostic assessment" class="rpt-card__img" />
<div class="flex flex-col gap-4 p-6 flex-1"> <div class="rpt-card__body">
<h3 class="text-2xl font-normal text-gray-900">Diagnostic Assessment</h3> <h3 class="rpt-heading-lg">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> <p class="rpt-body-text 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/diagnostic-assessment" class="inline-flex items-center gap-3 px-5 py-3 bg-pt-blue-500 text-white text-[15px] font-medium no-underline hover:bg-pt-blue-600">More Info &rarr;</a> <a href="/services/diagnostic-assessment" class="rpt-btn">More Info &rarr;</a>
</div> </div>
</div> </div>
<div class="flex flex-col border border-pt-blue-200 bg-white overflow-hidden"> <div class="rpt-card">
<img src="/modules/custom/riverside_pt/images/panels/2.jpg?v=2" alt="Sports rehabilitation" class="w-full h-48 object-cover" /> <img src="/modules/custom/riverside_pt/images/panels/2.jpg?v=2" alt="Sports rehabilitation" class="rpt-card__img" />
<div class="flex flex-col gap-4 p-6 flex-1"> <div class="rpt-card__body">
<h3 class="text-2xl font-normal text-gray-900">Sports Rehabilitation</h3> <h3 class="rpt-heading-lg">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> <p class="rpt-body-text 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/sports-rehabilitation" class="inline-flex items-center gap-3 px-5 py-3 bg-pt-blue-500 text-white text-[15px] font-medium no-underline hover:bg-pt-blue-600">More Info &rarr;</a> <a href="/services/sports-rehabilitation" class="rpt-btn">More Info &rarr;</a>
</div> </div>
</div> </div>
<div class="flex flex-col border border-pt-blue-200 bg-white overflow-hidden"> <div class="rpt-card">
<img src="/modules/custom/riverside_pt/images/panels/3.jpg" alt="Pre and post-surgical rehab" class="w-full h-48 object-cover" /> <img src="/modules/custom/riverside_pt/images/panels/3.jpg" alt="Pre and post-surgical rehab" class="rpt-card__img" />
<div class="flex flex-col gap-4 p-6 flex-1"> <div class="rpt-card__body">
<h3 class="text-2xl font-normal text-gray-900">Pre/Post-Surgical Rehab</h3> <h3 class="rpt-heading-lg">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> <p class="rpt-body-text flex-1">Expert care before and after surgery to reduce recovery time, minimize complications, and restore full strength and function.</p>
<a href="/services/pre-post-surgical-rehab" class="inline-flex items-center gap-3 px-5 py-3 bg-pt-blue-500 text-white text-[15px] font-medium no-underline hover:bg-pt-blue-600">More Info &rarr;</a> <a href="/services/pre-post-surgical-rehab" class="rpt-btn">More Info &rarr;</a>
</div> </div>
</div> </div>
<div class="flex flex-col border border-pt-blue-200 bg-white overflow-hidden"> <div class="rpt-card">
<img src="/modules/custom/riverside_pt/images/panels/4.jpg" alt="Neurological physical therapy" class="w-full h-48 object-cover" /> <img src="/modules/custom/riverside_pt/images/panels/4.jpg" alt="Neurological physical therapy" class="rpt-card__img" />
<div class="flex flex-col gap-4 p-6 flex-1"> <div class="rpt-card__body">
<h3 class="text-2xl font-normal text-gray-900">Neurological Therapy</h3> <h3 class="rpt-heading-lg">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> <p class="rpt-body-text flex-1">Specialized therapy for nervous system conditions — helping you rebuild strength, coordination, and independence at every stage of recovery.</p>
<a href="/services/neurological-therapy" class="inline-flex items-center gap-3 px-5 py-3 bg-pt-blue-500 text-white text-[15px] font-medium no-underline hover:bg-pt-blue-600">More Info &rarr;</a> <a href="/services/neurological-therapy" class="rpt-btn">More Info &rarr;</a>
</div> </div>
</div> </div>
</div> </div>
@ -97,11 +97,11 @@
<div class="flex gap-12 pt-4"> <div class="flex gap-12 pt-4">
<div class="font-hedvig text-center"> <div class="font-hedvig text-center">
<p class="text-[4.5rem] font-light text-pt-blue-500 leading-none">15</p> <p class="text-[4.5rem] font-light text-pt-blue-500 leading-none">15</p>
<p class="text-xs tracking-widest uppercase text-pt-blue-500 font-semibold mt-2">Years Open</p> <p class="rpt-eyebrow mt-2">Years Open</p>
</div> </div>
<div class="font-hedvig text-center"> <div class="font-hedvig text-center">
<p class="text-[4.5rem] text-pt-blue-500 leading-none">3,100</p> <p class="text-[4.5rem] text-pt-blue-500 leading-none">3,100</p>
<p class="text-xs tracking-widest uppercase text-pt-blue-500 font-semibold mt-2">Patients Served</p> <p class="rpt-eyebrow mt-2">Patients Served</p>
</div> </div>
</div> </div>
</div> </div>

2
web/modules/custom/riverside_pt/templates/riverside-pt-service.html.twig
View file

@ -1,4 +1,4 @@
<div class="max-w-[1040px] mx-auto px-6 py-12 bg-pt-blue-50"> <div class="rpt-container px-6 py-12 bg-pt-blue-50">
<div class="mb-8"> <div class="mb-8">
<a href="/book-appointment" class="inline-flex items-center text-pt-blue-500 hover:text-pt-blue-600 text-sm font-medium"> <a href="/book-appointment" class="inline-flex items-center text-pt-blue-500 hover:text-pt-blue-600 text-sm font-medium">
← Make an Appointment ← Make an Appointment