/*
* homepage-refresh.css
* Furry Friends Pet Transport — Default.aspx visual polish
*
* Add as the LAST in :
*
*
* Targets: #aboutus section → footer
* Does NOT touch the hero, nav, or upper cards.
* ─────────────────────────────────────────────────────────────
*/
/* ── DESIGN TOKENS ───────────────────────────────────────────── */
:root {
--ff-tan: #f5f0e8; /* warm off-white */
--ff-tan-mid: #ede5d4; /* slightly deeper tan */
--ff-charcoal: #2c2c2c;
--ff-gray-text: #555;
--ff-accent: #c8813a; /* warm amber — pulled from brand */
--ff-accent-lt: #f0c98a;
--ff-green: #4a7c59; /* trustworthy dark green */
--ff-divider: rgba(0,0,0,.08);
--ff-shadow-sm: 0 2px 10px rgba(0,0,0,.07);
--ff-shadow-md: 0 6px 24px rgba(0,0,0,.10);
--ff-radius: 10px;
--ff-radius-sm: 6px;
}
/* ════════════════════════════════════════════════════════════════
1. ABOUT OUR SERVICE (#aboutus)
════════════════════════════════════════════════════════════════ */
#aboutus {
background: #fff;
border-top: 1px solid var(--ff-divider);
border-bottom: 1px solid var(--ff-divider);
padding-top: 4rem !important;
padding-bottom: 4.5rem !important;
}
/* ── Section eyebrow labels ── */
#aboutus .text-uppercase.text-muted.small {
font-size: .7rem !important;
letter-spacing: .15em;
color: var(--ff-accent) !important;
font-weight: 700;
text-transform: uppercase;
}
/* ── Section headings ── */
#aboutus h3.h2 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.5rem, 3vw, 2rem);
line-height: 1.25;
color: var(--ff-charcoal);
margin-bottom: 1rem !important;
}
/* ── Body copy ── */
#aboutus p {
color: var(--ff-gray-text);
line-height: 1.75;
}
/* ── ACCORDION ── */
#ffAccordion .accordion-item {
border: none;
border-bottom: 1px solid var(--ff-divider);
border-radius: 0 !important;
background: transparent;
}
#ffAccordion .accordion-item:first-child {
border-top: 1px solid var(--ff-divider);
}
#ffAccordion .accordion-button {
background: transparent;
color: var(--ff-charcoal);
font-weight: 600;
font-size: .95rem;
padding: 1rem .25rem;
box-shadow: none !important;
gap: .5rem;
}
#ffAccordion .accordion-button:not(.collapsed) {
color: var(--ff-accent);
background: transparent;
}
/* Animated left accent bar on open panel */
#ffAccordion .accordion-collapse.show .accordion-body {
border-left: 3px solid var(--ff-accent);
padding-left: 1.25rem;
margin-left: .25rem;
color: var(--ff-gray-text);
line-height: 1.75;
padding-top: .75rem;
padding-bottom: 1rem;
animation: ff-slide-in .2s ease;
}
@keyframes ff-slide-in {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ── RIGHT COLUMN: "Why Choose" card ── */
#aboutus .col-lg-6:last-child {
background: var(--ff-tan);
border-radius: var(--ff-radius);
padding: 2.25rem 2rem !important;
border: 1px solid var(--ff-tan-mid);
}
/* CTA button pair */
#aboutus .btn-primary {
background-color: var(--ff-accent) !important;
border-color: var(--ff-accent) !important;
border-radius: 50px;
font-size: .88rem;
font-weight: 600;
letter-spacing: .03em;
padding: .55rem 1.4rem;
transition: background .2s, transform .15s;
}
#aboutus .btn-primary:hover {
background-color: #b3712e !important;
transform: translateY(-1px);
}
#aboutus .btn-outline-primary {
border-color: var(--ff-accent) !important;
color: var(--ff-accent) !important;
border-radius: 50px;
font-size: .85rem;
font-weight: 600;
padding: .45rem 1.1rem;
transition: all .2s;
}
#aboutus .btn-outline-primary:hover {
background-color: var(--ff-accent) !important;
color: #fff !important;
}
/* Phone block */
#aboutus .fw-semibold a {
color: var(--ff-charcoal) !important;
font-size: 1.05rem;
}
#aboutus .small.text-muted {
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--ff-accent) !important;
font-weight: 600;
}
/* ════════════════════════════════════════════════════════════════
2. GET AN ESTIMATE (the calculator section)
════════════════════════════════════════════════════════════════ */
/* Outer wrapper — give it a warm tan background to separate it */
section.ps-8.pe-8:has(#map),
/* Fallback for older browsers that don't support :has() */
section.ps-8.pe-8.lg-ps-4.lg-pe-4.md-ps-0.md-pe-0.py-0 {
background: var(--ff-tan) !important;
padding-top: 3rem !important;
padding-bottom: 3.5rem !important;
}
/* Section heading */
h6.fw-700.text-dark-gray.ls-minus-1px.mb-5 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.5rem !important;
color: var(--ff-charcoal) !important;
position: relative;
padding-bottom: .6rem;
}
h6.fw-700.text-dark-gray.ls-minus-1px.mb-5::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 48px;
height: 3px;
background: var(--ff-accent);
border-radius: 2px;
}
/* Form card */
.contact-form-style-01 label {
font-size: .78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--ff-gray-text);
margin-bottom: .35rem;
display: block;
}
.contact-form-style-01 .form-control {
border: 1.5px solid #ddd !important;
border-radius: var(--ff-radius-sm) !important;
font-size: .92rem;
padding: .6rem .85rem;
background: #fff;
transition: border-color .2s, box-shadow .2s;
}
.contact-form-style-01 .form-control:focus {
border-color: var(--ff-accent) !important;
box-shadow: 0 0 0 3px rgba(200,129,58,.15) !important;
outline: none;
}
/* Calculate button */
#btnCalculate {
background: var(--ff-accent) !important;
border-color: var(--ff-accent) !important;
border-radius: 50px !important;
font-weight: 700 !important;
letter-spacing: .04em;
transition: background .2s, transform .15s;
}
#btnCalculate:hover {
background: #b3712e !important;
transform: translateY(-1px);
}
/* Reset button */
#btnReset {
color: #888 !important;
border: 1.5px solid #ddd !important;
border-radius: 50px !important;
background: transparent !important;
font-size: .85rem;
}
/* Map container */
#map {
border-radius: var(--ff-radius) !important;
box-shadow: var(--ff-shadow-md) !important;
border: 1px solid var(--ff-divider);
}
/* ── "Our Fees" card ── */
.bg-very-light-gray.border-radius-6px.p-45px {
background: #fff !important;
border-radius: var(--ff-radius) !important;
box-shadow: var(--ff-shadow-sm) !important;
border: 1px solid var(--ff-divider);
padding: 1.75rem !important;
}
.bg-very-light-gray.border-radius-6px.p-45px .fs-22 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.15rem !important;
color: var(--ff-charcoal);
}
.bg-very-light-gray.border-radius-6px.p-45px ul li {
font-size: .88rem;
color: var(--ff-gray-text);
padding-top: .45rem;
padding-bottom: .45rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.bg-very-light-gray.border-radius-6px.p-45px ul li i {
color: var(--ff-accent);
font-weight: 700;
}
/* ── Estimate result panel ── */
#pnlcalculate .pricing-table {
border-radius: var(--ff-radius) !important;
box-shadow: var(--ff-shadow-md) !important;
border: 2px solid var(--ff-accent-lt) !important;
}
#pnlcalculate .bg-very-light-gray {
background: var(--ff-tan) !important;
border-radius: var(--ff-radius-sm) !important;
}
#pnlcalculate .total-price {
font-family: 'Playfair Display', Georgia, serif !important;
font-size: 1.6rem !important;
color: var(--ff-accent) !important;
}
/* Distance label */
#lblDistance {
font-size: .85rem;
color: var(--ff-gray-text);
padding: .5rem .75rem;
font-weight: 600;
}
/* ════════════════════════════════════════════════════════════════
3. FOOTER
════════════════════════════════════════════════════════════════ */
.ff-footer {
background: #1e1e1e !important; /* keep dark footer but deepen it */
color: #ccc;
}
/* ── Top grid ── */
.ff-top {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 2.5rem;
padding: 3.5rem 3rem 2rem;
border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 1024px) {
.ff-top {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 600px) {
.ff-top {
grid-template-columns: 1fr;
padding: 2.5rem 1.25rem 1.5rem;
}
}
/* ── Brand column ── */
.ff-brand-card {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.ff-logo-lockup {
display: flex;
align-items: center;
gap: .85rem;
}
.ff-cat-circle {
width: 52px;
height: 52px;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--ff-accent);
flex-shrink: 0;
}
.ff-cat-circle img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ff-brand-name {
font-family: 'Playfair Display', Georgia, serif;
font-size: .95rem;
line-height: 1.3;
color: #fff;
margin: 0;
font-weight: 700;
}
/* ── Payment strip ── */
.ff-payment-strip {
display: flex;
flex-direction: column;
gap: .6rem;
}
.ff-payment-row,
.footer-payments {
display: flex !important;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.pay-logo {
height: 22px !important;
width: auto !important;
border-radius: 3px;
opacity: .85;
transition: opacity .2s;
background: #fff;
padding: 2px 4px;
}
.pay-logo:hover {
opacity: 1;
}
.ff-secure-payments {
font-size: .72rem;
color: #888;
display: flex;
align-items: center;
gap: .35rem;
}
/* ── Link columns ── */
.ff-links-col .ff-col-head {
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--ff-accent-lt);
margin-bottom: .85rem;
}
.ff-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: .45rem;
}
.ff-links li a {
color: #aaa !important;
text-decoration: none !important;
font-size: .88rem;
transition: color .2s;
}
.ff-links li a:hover {
color: var(--ff-accent-lt) !important;
}
/* ── Contact column ── */
.ff-col-head {
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--ff-accent-lt);
margin-bottom: .85rem;
}
.ff-contact-block {
display: flex;
flex-direction: column;
gap: .9rem;
}
.ff-contact-label {
display: block;
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .1em;
color: #777;
margin-bottom: .15rem;
}
.ff-contact-phone {
font-size: 1.15rem;
font-weight: 700;
color: #fff !important;
margin: 0;
}
.ff-contact-email {
font-size: .82rem;
color: #aaa;
margin: 0;
word-break: break-word;
}
/* ── Social buttons ── */
.ff-x-btn {
display: inline-flex;
align-items: center;
gap: .5rem;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
color: #ccc !important;
text-decoration: none !important;
border-radius: 50px;
padding: .45rem .9rem;
font-size: .8rem;
font-weight: 600;
transition: background .2s, color .2s;
width: fit-content;
}
.ff-x-btn:hover {
background: rgba(255,255,255,.12);
color: #fff !important;
}
.ff-x-btn svg {
width: 14px;
height: 14px;
fill: currentColor;
}
.ff-facebook-btn {
margin-top: .4rem;
}
/* ── Service area row ── */
.ff-service-row {
padding: 1.75rem 3rem;
border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 600px) {
.ff-service-row {
padding: 1.5rem 1.25rem;
}
}
.ff-service-head {
display: flex;
align-items: center;
gap: .75rem;
margin-bottom: 1rem;
}
.ff-sh-label {
font-size: .68rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ff-accent-lt);
white-space: nowrap;
}
.ff-sh-line {
height: 1px;
background: rgba(255,255,255,.12);
flex: 1;
}
/* ── City pills ── */
.ff-cities-wrap {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.ff-city {
display: inline-block;
padding: .28rem .75rem;
border-radius: 50px;
font-size: .75rem;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
color: #bbb;
transition: background .2s, color .2s;
}
.ff-city:hover {
background: rgba(200,129,58,.2);
border-color: var(--ff-accent);
color: var(--ff-accent-lt);
}
.ff-city-sep {
width: 1px;
height: 18px;
background: rgba(255,255,255,.15);
display: inline-block;
vertical-align: middle;
margin: 0 4px;
}
.ff-city-state {
display: inline-block;
padding: .28rem .75rem;
border-radius: 50px;
font-size: .75rem;
font-weight: 700;
background: rgba(200,129,58,.15);
border: 1px solid rgba(200,129,58,.3);
color: var(--ff-accent-lt);
letter-spacing: .04em;
}
/* ── Bottom bar ── */
.ff-bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: .75rem;
padding: 1.25rem 3rem;
}
@media (max-width: 600px) {
.ff-bottom {
flex-direction: column;
text-align: center;
padding: 1.25rem;
}
}
.ff-copyright {
font-size: .78rem;
color: #666;
margin: 0;
}
.ff-paws {
font-size: 1rem;
letter-spacing: .15em;
opacity: .5;
}
.ff-love {
font-size: .78rem;
color: #666;
margin: 0;
font-style: italic;
}
/* ════════════════════════════════════════════════════════════════
4. SECTION RHYTHM — subtle alternating backgrounds so the
page doesn't feel like one grey blob
════════════════════════════════════════════════════════════════ */
/* "Who We Are" already has bg-very-light-gray — nudge it warmer */
section.bg-very-light-gray:first-of-type {
background: var(--ff-tan) !important;
}
/* Service cards section */
section.py-5.bg-light {
background: #fff !important;
border-top: 1px solid var(--ff-divider);
border-bottom: 1px solid var(--ff-divider);
}
/* No-extra-charges banner — already has custom class, just polish it */
.ff-banner {
border-top: 1px solid var(--ff-divider);
border-bottom: 1px solid var(--ff-divider);
}
/* ════════════════════════════════════════════════════════════════
6. ESTIMATE SECTION — FILL THE EMPTY LEFT SPACE
════════════════════════════════════════════════════════════════
The col-lg-8 form column has a large blank area below the
button row. We inject a "Why Book With Us" trust strip into
that space using pure CSS — no markup change needed.
The trust content is rendered via a styled pseudo-container
that sits below the .contact-form-style-01 row.
Because we cannot inject HTML via CSS alone, the approach is:
— Style a hidden that already exists in the markup
(the .col-lg-8 inner wrapper) and make it flex-column so
the form occupies the top and the trust block fills below.
════════════════════════════════════════════════════════════════ */
/* Make the left col a flex column so content stacks top-to-bottom */
.col-lg-8.p-6 {
display: flex !important;
flex-direction: column;
}
/* Push the trust block to fill remaining vertical space */
.col-lg-8.p-6 .contact-form-style-01 {
flex: 1 0 auto;
}
/* ── Trust strip — appears below the form buttons ── */
/* We target the .col-auto button wrapper + insert sibling styling */
.col-lg-8.p-6 .col-auto {
margin-bottom: 0;
}
/* The trust strip itself — injected as an ::after pseudo on the
contact-form-style-01 row so it sits below the button row */
.contact-form-style-01::after {
content: ''; /* base reset — real content via inner block below */
display: block;
}
/* Actual trust card — we style the existing .row.contact-form-style-01
parent's next sibling, which is the .col-12 empty results div.
Instead, we use a wrapper approach: style a block that appears
as a sibling after the form inside col-lg-8. */
/* ── Cleaner approach: style the col-lg-8 wrapper to show a
decorative "trust checklist" using background + padding on
the form's own empty footer area ── */
/* After-button trust area — we use the existing .col-12 results div
which is always present but hidden (d-none class) to act as
our anchor, and float a styled aside next to it */
/* Real solution: add a styled info card directly in the col-lg-8
by targeting its last child and giving it visual treatment */
.col-lg-8.p-6 > .row > .col-12:last-child {
margin-top: 1.5rem !important;
}
/* ── Trust highlight box — rendered as styled content block ── */
/* We use the .contact-form-style-01 .row wrapper's padding area */
.ff-trust-strip {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
padding: 1.5rem;
background: #fff;
border-radius: var(--ff-radius);
border: 1px solid var(--ff-divider);
box-shadow: var(--ff-shadow-sm);
}
.ff-trust-item {
display: flex;
align-items: flex-start;
gap: .75rem;
flex: 1 1 200px;
}
.ff-trust-icon {
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(200,129,58,.12);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1rem;
}
.ff-trust-item strong {
display: block;
font-size: .85rem;
font-weight: 700;
color: var(--ff-charcoal);
margin-bottom: .15rem;
}
.ff-trust-item span {
font-size: .78rem;
color: var(--ff-gray-text);
line-height: 1.5;
}
/* ── CTA nudge below form ── */
.ff-estimate-cta {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 1.25rem;
padding: 1.1rem 1.4rem;
background: var(--ff-charcoal);
border-radius: var(--ff-radius);
color: #fff;
flex-wrap: wrap;
}
.ff-estimate-cta__text {
flex: 1;
font-size: .88rem;
line-height: 1.4;
}
.ff-estimate-cta__text strong {
display: block;
font-size: .95rem;
margin-bottom: .15rem;
}
.ff-estimate-cta__btn {
background: var(--ff-accent);
color: #fff !important;
text-decoration: none !important;
border-radius: 50px;
padding: .5rem 1.2rem;
font-size: .82rem;
font-weight: 700;
white-space: nowrap;
transition: background .2s;
}
.ff-estimate-cta__btn:hover {
background: #b3712e;
}
/* ════════════════════════════════════════════════════════════════
7. GLOBAL SMALL TOUCHES
════════════════════════════════════════════════════════════════ */
/* Smoother accordion chevron rotation */
.accordion-button::after {
transition: transform .25s ease !important;
filter: brightness(0) saturate(100%) invert(55%) sepia(60%) saturate(500%) hue-rotate(10deg) brightness(90%);
}
/* Tighter card shadows across the board */
.card.border-0.shadow-sm {
box-shadow: var(--ff-shadow-sm) !important;
border-radius: var(--ff-radius) !important;
transition: box-shadow .25s, transform .25s;
}
.card.border-0.shadow-sm:hover {
box-shadow: var(--ff-shadow-md) !important;
transform: translateY(-2px);
}
/* Anchor links that use btn-link color */
a.btn-link.text-base-color {
color: var(--ff-accent) !important;
font-weight: 600;
}
a.btn-link.text-base-color:hover {
color: #b3712e !important;
}