Contact CARPOOL
Do you have a question, story, compliment, concern, or thoughts about CARPOOL? If you have questions about your ride from the receipt, or anything else, please fill out the form below.
Contact CARPOOLD0I7-T-A-M-U-D-U-M-M-Y2025-12-28T12:50:47-06:00
/* ===============================
CARPOOL Contact – full CSS
Scope: .carpool-contact (page) + .carpool-form-4 (form wrapper class)
=============================== */
.carpool-contact{
--accent:#500000; /* maroon */
--accent-600:#6a0000;
--accent-300:#8c3a3a;
--text:#111827;
--muted:#6b7280;
--card:#ffffff;
--ring: color-mix(in oklab, var(--accent), white 78%);
--field-border: color-mix(in oklab, var(--accent), white 78%);
--field-border-hover: color-mix(in oklab, var(--accent), white 68%);
--field-border-focus: color-mix(in oklab, var(--accent), white 55%);
--shadow:0 10px 30px rgba(17,24,39,.08), 0 2px 8px rgba(17,24,39,.06);
--shadow-sm: 0 2px 8px rgba(80,0,0,.10);
--shadow-md: 0 4px 14px rgba(80,0,0,.14);
--shadow-lg: 0 6px 20px rgba(80,0,0,.18);
--radius:16px;
}
.carpool-contact{
color:var(--text);
background:
var(--bg);
}
.carpool-contact .wrap{ max-width:1600px; margin:0 auto; padding:48px 24px 0; }
/* ---- Page header ---- */
.carpool-contact .page-head{ margin:0 0 12px; text-align:left; }
.carpool-contact .page-head h1{
margin:0; font-weight:900; letter-spacing:.2px;
line-height:1.2; font-size:clamp(28px,3.6vw,42px);
}
.carpool-contact .page-head h1::after{
content:""; display:block; width:90px; height:3px; margin:12px 0 0;
background:linear-gradient(90deg,var(--accent),#8c3a3a); border-radius:999px;
}
.carpool-contact .page-head .sub{ margin:10px 0 20px; color:var(--muted); font-size:clamp(15px,1.8vw,17px); line-height:1.6; }
.carpool-contact .page-head .staff-link{ margin:10px 0 0; }
.carpool-contact .page-head .staff-link a{
color:var(--accent); font-weight:700; text-underline-offset:3px; text-decoration:underline;
}
.carpool-contact .page-head .staff-link a:hover{ color:var(--accent-600); }
/* ---- Layout & card ---- */
.carpool-contact .grid{ display:grid; gap:22px; grid-template-columns:1fr; }
@media (min-width:900px){
.carpool-contact .grid{ grid-template-columns:minmax(0,1.05fr); }
}
.carpool-contact .form-card{
background:var(--card); border:1px solid #eceff3; border-radius:var(--radius);
box-shadow:var(--shadow); padding:clamp(18px,2.8vw,28px);
position:relative; overflow:hidden; isolation:isolate;
}
.carpool-contact .form-card::before{
content:""; position:absolute; inset:auto -30% -40% auto; width:420px; height:420px;
background:radial-gradient(closest-side, color-mix(in oklab, var(--accent), white 88%) 0%, transparent 70%);
transform:translateY(40px); z-index:-1; pointer-events:none; opacity:.4;
}
/* ===============================
FORM: Avada + Gravity (scoped to .carpool-form-4)
Add "carpool-form-4" in the form's "Form CSS Class Name"
=============================== */
/* Labels */
.carpool-contact .carpool-form-4 .fusion-form-field label,
.carpool-contact .carpool-form-4 .gfield_label{
font-weight:700; color: color-mix(in oklab,var(--accent),black 70%) !important;
margin-bottom:6px;
}
/* Base inputs (Avada + Gravity) */
.carpool-contact .carpool-form-4 input[type="text"],
.carpool-contact .carpool-form-4 input[type="email"],
.carpool-contact .carpool-form-4 input[type="tel"],
.carpool-contact .carpool-form-4 input[type="url"],
.carpool-contact .carpool-form-4 input[type="number"],
.carpool-contact .carpool-form-4 input[type="password"],
.carpool-contact .carpool-form-4 textarea,
.carpool-contact .carpool-form-4 select{
width:100%;
background:#fff !important;
border:1.5px solid var(--field-border) !important;
border-radius:14px !important;
padding:12px 14px !important;
line-height:1.4;
box-shadow: var(--shadow-sm), 0 1px 0 rgba(17,24,39,.03) inset !important;
transition: border-color .15s ease, box-shadow .2s ease, transform .05s ease !important;
}
.carpool-contact .carpool-form-4 textarea{ min-height:150px }
/* Hover & focus */
.carpool-contact .carpool-form-4 input:hover,
.carpool-contact .carpool-form-4 textarea:hover,
.carpool-contact .carpool-form-4 select:hover{
border-color: var(--field-border-hover) !important;
box-shadow: var(--shadow-md), 0 1px 0 rgba(17,24,39,.03) inset !important;
}
.carpool-contact .carpool-form-4 input:focus,
.carpool-contact .carpool-form-4 textarea:focus,
.carpool-contact .carpool-form-4 select:focus{
outline:none !important;
border-color: var(--field-border-focus) !important;
box-shadow: 0 0 0 4px var(--ring), var(--shadow-lg) !important;
transform: translateY(-1px);
}
/* Placeholder */
.carpool-contact .carpool-form-4 ::placeholder{
color: color-mix(in oklab, var(--accent), white 82%);
}
/* Checkboxes / radios */
.carpool-contact .carpool-form-4 input[type="checkbox"],
.carpool-contact .carpool-form-4 input[type="radio"]{
accent-color: var(--accent);
filter: drop-shadow(0 1px 1px rgba(80,0,0,.14));
}
/* Field spacing only - no background */
.carpool-contact .carpool-form-4 .fusion-form-field,
.carpool-contact .carpool-form-4 .gfield{
margin-bottom:14px;
}
/* Error states (Avada .fusion-has-error and GF .gfield_error) */
.carpool-contact .carpool-form-4 .fusion-has-error input,
.carpool-contact .carpool-form-4 .fusion-has-error textarea,
.carpool-contact .carpool-form-4 .fusion-has-error select,
.carpool-contact .carpool-form-4 .gfield_error .ginput_container input,
.carpool-contact .carpool-form-4 .gfield_error .ginput_container textarea,
.carpool-contact .carpool-form-4 .gfield_error .ginput_container select{
border-color: color-mix(in oklab, var(--accent), #ef4444 30%) !important;
box-shadow: 0 0 0 4px color-mix(in oklab, #ef4444, white 82%), 0 6px 20px rgba(239,68,68,.12) !important;
}
.carpool-contact .carpool-form-4 .fusion-form-error,
.carpool-contact .carpool-form-4 .validation_message{
color:#7f1d1d; background:#fff1f2; border:1px solid #fee2e2;
padding:10px 12px; border-radius:12px;
}
/* Hide internal Gravity Forms title/desc if present (page already has header) */
.carpool-contact .carpool-form-4 .gform_heading .gform_title,
.carpool-contact .carpool-form-4 .gform_heading .gform_description{
display:none !important;
}
/* Submit buttons (Avada + Gravity) */
.carpool-contact .carpool-form-4 .fusion-form-submit button,
.carpool-contact .carpool-form-4 .fusion-button.button-submit,
.carpool-contact .carpool-form-4 .gform_button{
background:linear-gradient(180deg, var(--accent), var(--accent-600)) !important;
color:#fff !important; font-weight:800; letter-spacing:.2px;
border:0 !important; border-radius:999px !important;
padding:12px 20px !important; cursor:pointer;
box-shadow: 0 10px 18px rgba(80,0,0,.18), 0 2px 8px rgba(80,0,0,.22) !important;
transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
}
.carpool-contact .carpool-form-4 .fusion-form-submit button:hover,
.carpool-contact .carpool-form-4 .gform_button:hover{
filter:saturate(1.05) brightness(1.02);
}
.carpool-contact .carpool-form-4 .fusion-form-submit button:active,
.carpool-contact .carpool-form-4 .gform_button:active{
transform: translateY(1px);
}
.carpool-contact .carpool-form-4 .fusion-form-submit button:focus-visible,
.carpool-contact .carpool-form-4 .gform_button:focus-visible{
outline:none; box-shadow: 0 0 0 4px var(--ring), 0 10px 18px rgba(80,0,0,.18) !important;
}
/* Confirmation (GF) */
.carpool-contact .carpool-form-4 #gform_confirmation_wrapper_4{
border:1px solid #d1fae5; background:#ecfdf5; color:#065f46;
padding:16px 18px; border-radius:12px; font-weight:600;
}
/* Mobile tweaks */
@media (max-width:640px){
.carpool-contact .wrap{ padding:32px 16px 56px; }
.carpool-contact .form-card{ padding:18px; }
}
/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){
.carpool-contact .carpool-form-4 input,
.carpool-contact .carpool-form-4 textarea,
.carpool-contact .carpool-form-4 select,
.carpool-contact .carpool-form-4 .fusion-form-submit button,
.carpool-contact .carpool-form-4 .gform_button{ transition:none !important; }
}
/* ===== GLOBAL CTA ===== */
.carpool-global-cta {
border-top: 1px solid #e5e7eb;
padding: 20px 24px 20px !important;
margin: 48px 0 0 !important;
margin-bottom: 0 !important;
text-align: center;
background: #f8fafc !important;
}
.carpool-global-cta p {
margin: 0 0 12px;
font-size: 0.9rem;
color: #6b7280;
font-weight: 500;
}
.carpool-global-cta nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px 20px;
padding-bottom: 0;
}
.carpool-global-cta a {
color: #500000;
text-decoration: none;
font-size: 0.875rem;
font-weight: 600;
transition: color 0.2s ease;
}
.carpool-global-cta a:hover {
color: #7c2d2d;
text-decoration: underline;
}
@media (max-width: 600px) {
.carpool-global-cta { padding: 16px 16px 16px !important; margin: 32px 0 0 !important; }
.carpool-global-cta nav { gap: 6px 16px; }
.carpool-global-cta a { font-size: 0.8rem; }
}
/* ===== WORDPRESS/AVADA CONTAINER OVERRIDES ===== */
html, body {
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
background: #500000 !important;
-webkit-overflow-scrolling: touch;
}
*, *::before, *::after {
box-sizing: border-box !important;
}
#wrapper,
#main,
#content,
.fusion-footer,
.fusion-footer-widget-area,
.fusion-footer-copyright-area,
.avada-footer,
.fusion-fullwidth,
.fusion-builder-row,
.fusion-layout-column,
.fusion-column-wrapper,
.fusion-column-content,
.fusion-row,
.post-content,
.avada-page-wrapper,
article.post,
.fusion-content-tb,
.fusion-tb-footer,
main#main,
main.clearfix {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
#wrapper {
background: #500000 !important;
}
.fusion-body,
body.fusion-body {
background: #500000 !important;
}
.carpool-global-cta {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
margin-bottom: 0 !important;
box-sizing: border-box !important;
position: relative !important;
left: 0 !important;
right: 0 !important;
}
/* Eliminate gap between CTA and Footer */
.carpool-global-cta + *,
aside.carpool-global-cta + *,
.carpool-global-cta ~ .carpool-footer,
aside + footer.carpool-footer {
margin-top: 0 !important;
padding-top: 0 !important;
}
.carpool-footer {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
margin-top: 0 !important;
box-sizing: border-box !important;
position: relative !important;
left: 0 !important;
right: 0 !important;
}
/* ===== GLOBAL FOOTER ===== */
.carpool-footer {
background: #500000 !important;
color: #fff !important;
padding: 40px 24px !important;
padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px)) !important;
text-align: center !important;
margin: 0 !important;
margin-top: 0 !important;
box-shadow: none !important;
}
.carpool-footer .mobile-break {
display: none;
}
.carpool-footer .footer-inner {
max-width: 800px;
margin: 0 auto;
}
.carpool-footer .footer-title {
margin: 0 0 10px;
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.carpool-footer .footer-title strong {
font-weight: 800;
}
.carpool-footer .footer-stats {
margin: 0 0 18px;
font-size: 0.92rem;
opacity: 0.9;
}
.carpool-footer .footer-actions {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.carpool-footer .footer-btn {
color: #fff;
text-decoration: none;
padding: 14px 24px;
min-height: 48px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 12px;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
-webkit-tap-highlight-color: transparent;
}
.carpool-footer .footer-btn:hover {
background: rgba(255,255,255,0.2);
transform: translateY(-2px);
}
.carpool-footer .footer-btn:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.carpool-footer .footer-btn:active {
transform: scale(0.98);
}
.carpool-footer .footer-sga {
border-top: 1px solid rgba(255,255,255,0.15);
padding-top: 22px;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
}
.carpool-footer .footer-sga img {
height: 48px;
width: auto;
filter: brightness(0) invert(1);
opacity: 0.9;
}
.carpool-footer .footer-sga p {
margin: 0;
font-size: 0.85rem;
opacity: 0.9;
max-width: 480px;
line-height: 1.6;
}
.carpool-footer .footer-sga a {
color: #fff;
text-decoration: underline;
text-underline-offset: 3px;
padding: 4px 2px;
}
.carpool-footer .footer-sga a:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
border-radius: 4px;
}
@media (max-width: 700px) {
.carpool-footer {
padding: 32px 20px;
padding-left: max(20px, env(safe-area-inset-left));
padding-right: max(20px, env(safe-area-inset-right));
padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 20px));
margin-top: 0;
}
.carpool-footer .mobile-break {
display: inline;
}
.carpool-footer .footer-inner {
display: flex;
flex-direction: column;
gap: 18px;
}
.carpool-footer .footer-title {
font-size: 1.05rem;
margin: 0;
line-height: 1.5;
}
.carpool-footer .footer-stats {
font-size: 0.9rem;
margin: 0;
line-height: 1.5;
}
.carpool-footer .footer-actions {
flex-direction: column;
gap: 12px;
margin-bottom: 0;
}
.carpool-footer .footer-btn {
width: 100%;
justify-content: center;
padding: 16px 24px;
min-height: 52px;
font-size: 1rem;
border-radius: 14px;
}
.carpool-footer .footer-sga {
flex-direction: column;
gap: 14px;
padding-top: 22px;
text-align: center;
}
.carpool-footer .footer-sga img {
height: 44px;
}
.carpool-footer .footer-sga p {
text-align: center;
font-size: 0.85rem;
line-height: 1.6;
}
}
@media (max-width: 360px) {
.carpool-footer {
padding: 28px 16px;
padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px));
}
.carpool-footer .footer-title {
font-size: 0.95rem;
}
.carpool-footer .footer-stats {
font-size: 0.85rem;
}
.carpool-footer .footer-btn {
padding: 14px 20px;
min-height: 48px;
font-size: 0.9rem;
}
.carpool-footer .footer-sga img {
height: 38px;
}
.carpool-footer .footer-sga p {
font-size: 0.8rem;
}
}
@media (hover: none) and (pointer: coarse) {
.carpool-footer .footer-btn:hover {
transform: none;
background: rgba(255,255,255,0.12);
}
}