/* ---- Google Font import — must be at the very top of the file ----
Inter Tight: modern humanist sans-serif. Ships in multiple weights,
renders crisper than Nunito on small screens, better for long-form
reading pages (FAQ, Terms, How-It-Works, About, Feedback). */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&display=swap');
/* ============================================================
contactmeasap.com — MOBILE FIX
============================================================
Pure CSS overrides, loaded AFTER app3.css so every rule below
takes precedence. ZERO changes to: HTML, Blade templates,
controllers, JavaScript, forms, copy, SEO meta, or brand colors.
Every rule targets a specific mobile problem observed in the
audit. Each block is numbered and explained.
Scoped to @media (max-width: 768px) unless the issue is
universal (overflow-x).
============================================================ */
/* -----------------------------------------------------------
[01] UNIVERSAL — kill horizontal scroll
-----------------------------------------------------------
Problem: every page scrolls horizontally on phones because
something inside is wider than the viewport.
Fix: hide any overflow past the right edge. Doesn't
change any layout — just hides the bleed.
----------------------------------------------------------- */
html, body {
overflow-x: hidden;
max-width: 100vw;
}
/* -----------------------------------------------------------
[02] UNIVERSAL — images/iframes never push past viewport
-----------------------------------------------------------
Problem: imported widgets, hero graphics, or hard-coded-width
images occasionally force horizontal overflow.
Fix: cap them to 100% of their parent.
----------------------------------------------------------- */
img, video, iframe, svg, canvas {
max-width: 100%;
height: auto;
}
/* -----------------------------------------------------------
[03] UNIVERSAL — long words wrap instead of overflowing
-----------------------------------------------------------
Problem: long URLs, inmate IDs, emails break layout.
Fix: allow word-breaks where needed. Cosmetic-only.
----------------------------------------------------------- */
body, h1, h2, h3, h4, p, li, a, span, div, td, th {
overflow-wrap: break-word;
word-wrap: break-word;
}
/* ===========================================================
MOBILE — everything below 768px
=========================================================== */
@media (max-width: 768px) {
/* ---------------------------------------------------------
[04] Container — proper side padding on mobile
---------------------------------------------------------
Problem: .cma-container sometimes has desktop padding
baked in → text touches the screen edges.
Fix: consistent 16px gutters.
--------------------------------------------------------- */
.cma-container {
padding-left: 16px !important;
padding-right: 16px !important;
max-width: 100% !important;
}
/* ---------------------------------------------------------
[05] HEADER — stop overflow, let the nav wrap below
---------------------------------------------------------
Problem: on mobile the header tries to fit logo + 5 nav
links + "ADD FUNDS" button on one desktop-width
row. Everything gets clipped both sides.
Fix: allow the nav to wrap. Row 1 = logo + CTA.
Row 2 = the 5 links, centered and spaced.
(The hamburger button exists in HTML but is not
wired to any JS, so we don't rely on it.)
--------------------------------------------------------- */
.cma-header {
/* make sure header itself doesn't horizontal-scroll */
width: 100%;
box-sizing: border-box;
}
.cma-nav {
flex-wrap: wrap !important;
gap: 10px !important;
padding: 8px 14px !important;
}
/* Logo stays top-left, smaller */
.cma-logo {
flex: 0 0 auto;
}
.cma-logo-text { line-height: 1.05; }
.cma-contact-me { font-size: 0.78rem !important; }
.cma-asap { font-size: 1.1rem !important; }
/* ADD FUNDS CTA: visible, compact, top-right */
.cma-cta-button {
padding: 7px 14px !important;
font-size: 0.82rem !important;
white-space: nowrap;
flex: 0 0 auto;
}
/* Nav links move to their own centered row below.
Also force display:flex in case the desktop app3.css
uses something else that leaves us in overflow. */
.cma-nav-links {
display: flex !important;
order: 99 !important; /* force to bottom of wrapped flex */
flex-basis: 100% !important;
width: 100% !important;
justify-content: center !important;
align-items: center !important;
gap: 14px !important;
flex-wrap: wrap !important;
padding: 0 !important;
margin: 0 !important;
font-size: 0.82rem !important;
list-style: none !important;
}
.cma-nav-links li { list-style: none !important; }
.cma-nav-links a {
padding: 4px 2px;
white-space: nowrap;
}
/* The hamburger button is not wired to any JS in the source.
Hide it to avoid a dead button, and rely on the wrapping
nav above. */
.cma-mobile-menu-toggle {
display: none !important;
}
/* ---------------------------------------------------------
[06] HERO — headline scales with viewport, tighter padding
---------------------------------------------------------
Problem: hero H1 is ~56px on desktop and doesn't scale
down, so "Federal Inmate Text Messaging Service"
clips on the right edge. Hero section also has
big desktop padding eating horizontal space.
Fix: fluid clamp() font size + tighter section padding.
--------------------------------------------------------- */
.cma-hero {
padding: 40px 0 !important;
}
.cma-hero h1 {
font-size: clamp(1.55rem, 6.2vw, 2.3rem) !important;
line-height: 1.15 !important;
letter-spacing: -0.01em;
word-break: break-word;
padding: 0 !important;
margin-bottom: 14px !important;
}
.cma-hero p {
font-size: 0.98rem !important;
line-height: 1.5 !important;
padding: 0 !important;
}
.cma-trust-badge {
font-size: 0.75rem !important;
padding: 4px 10px !important;
margin-bottom: 8px !important;
}
/* ---------------------------------------------------------
[07] HERO BUTTONS — stack vertically instead of overflow
---------------------------------------------------------
Problem: "Start Messaging Today" + "Learn How It Works"
are side-by-side and don't fit on a 390px phone.
Fix: stack them. Each becomes full-width.
--------------------------------------------------------- */
.cma-hero-buttons {
flex-direction: column !important;
gap: 10px !important;
align-items: stretch !important;
}
.cma-hero-buttons .cma-btn,
.cma-hero-buttons > a {
width: 100% !important;
justify-content: center !important;
text-align: center;
box-sizing: border-box;
}
/* ---------------------------------------------------------
[08] SECTION HEADINGS — scale down
---------------------------------------------------------
Problem: "Why ContactMeAsap is the Best Federal Inmate
Text App" H2 clips on the right.
Fix: fluid font-size.
--------------------------------------------------------- */
.cma-section-title h2,
section h2 {
font-size: clamp(1.4rem, 6vw, 2.1rem) !important;
line-height: 1.2 !important;
}
.cma-section-title p {
font-size: 0.95rem !important;
}
/* ---------------------------------------------------------
[09] GRIDS — stack to single column
---------------------------------------------------------
Problem: cma-grid-3 and cma-grid-4 put 3–4 cards side-by
side on mobile → each card is ~90px wide = unread.
Fix: single column on mobile.
--------------------------------------------------------- */
.cma-grid.cma-grid-2,
.cma-grid.cma-grid-3,
.cma-grid.cma-grid-4 {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
/* ---------------------------------------------------------
[10] FEATURE / PRICING / STEP CARDS — usable padding
---------------------------------------------------------
Problem: cards have big desktop padding that eats most
of the visible width on mobile.
Fix: reduce padding a notch.
--------------------------------------------------------- */
.cma-feature-card,
.cma-pricing-card,
.cma-step,
.cma-card {
padding: 22px 18px !important;
}
.cma-plan-price {
font-size: 2.3rem !important;
}
/* ---------------------------------------------------------
[11] FORMS — inputs fit viewport, can't overflow
---------------------------------------------------------
Problem: "Input inmate number" and "100" amount fields
on /add-fund run off the right side on mobile.
Fix: max-width 100%, proper box-sizing.
--------------------------------------------------------- */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="password"],
select, textarea {
max-width: 100% !important;
width: 100%;
box-sizing: border-box;
}
/* ---------------------------------------------------------
[12] "NEED HELP?" CHAT WIDGET — collapse the expanded card
---------------------------------------------------------
Problem: the green "Need help? Text us for 24/7 support"
card is width:300px (inline style) and covers 30–40%
of every mobile page. The JS-driven minimize button
still works, but by default it starts expanded.
Fix: hide the expanded card on mobile and show only the
small floating "Text Us" bubble (which is already
in the HTML, id="textUsBubble"). Users tapping the
bubble still expand it exactly as designed.
Inline styles are beaten with !important here.
--------------------------------------------------------- */
#textUsCard {
/* collapse the big expanded card by default on mobile */
display: none !important;
}
#textUsBubble {
/* force the small pill to show, override any inline display:none */
display: flex !important;
}
#textUsWidget {
right: 12px !important;
bottom: 12px !important;
max-width: calc(100vw - 24px) !important;
}
/* Fallback — any other floating support widget classes */
.cma-chat-widget,
[id*="chat-widget" i],
[class*="chat-widget" i] {
max-width: min(220px, calc(100vw - 24px)) !important;
max-height: 56px !important;
right: 12px !important;
bottom: 12px !important;
border-radius: 28px !important;
font-size: 0.8rem !important;
overflow: hidden !important;
}
/* ---------------------------------------------------------
[13] SUPPORT BANNER (top) — compact on mobile
---------------------------------------------------------
Problem: the "Text For 24/7 Support: 734-215-7002" banner
is fine but takes more vertical space than it
needs on mobile.
Fix: tighten padding + font.
--------------------------------------------------------- */
.cma-support-banner {
padding: 6px 10px !important;
}
.cma-support-banner-link {
font-size: 12px !important;
}
/* ---------------------------------------------------------
[14] PRICING — card breathing room
---------------------------------------------------------
Problem: pricing cards look cramped.
Fix: extra vertical rhythm.
--------------------------------------------------------- */
.cma-pricing-card ul.cma-plan-features {
margin: 16px 0 !important;
}
.cma-plan-features li {
line-height: 1.5;
padding: 4px 0 !important;
}
/* ---------------------------------------------------------
[15] FOOTER — stack columns
---------------------------------------------------------
Problem: footer has 4 columns on mobile → squished.
Fix: single column.
--------------------------------------------------------- */
.cma-footer-content {
grid-template-columns: 1fr !important;
gap: 22px !important;
}
.cma-footer-section h3 {
font-size: 1rem !important;
margin-bottom: 6px !important;
}
/* ---------------------------------------------------------
[16] CONTACT PAGE — stack contact items
---------------------------------------------------------
Problem: 3 contact items (email / 24/7 / BOP) laid out as
grid-3 doesn't fit on mobile.
Fix: stack them (already covered by [09] but making
it explicit for .cma-contact-item spacing).
--------------------------------------------------------- */
.cma-contact-item {
padding: 10px 0;
font-size: 0.95rem;
}
/* ---------------------------------------------------------
[17] BODY padding-top — match compact banner+header
---------------------------------------------------------
Problem: home page hard-codes `padding-top: 42px` and
similar values to offset the fixed banner.
On mobile the banner is smaller after [13], so
a bit less top padding reads cleaner.
Fix: tighten the offset to match.
--------------------------------------------------------- */
body {
padding-top: 36px !important;
}
.cma-header {
top: 28px !important;
}
} /* end @media (max-width: 768px) */
/* ===========================================================
SMALL PHONES — below 375px (iPhone SE, older Androids)
=========================================================== */
@media (max-width: 375px) {
/* [18] Extra typography squeeze for tiny screens */
.cma-asap { font-size: 1rem !important; }
.cma-contact-me { font-size: 0.72rem !important; }
.cma-cta-button {
font-size: 0.78rem !important;
padding: 6px 11px !important;
}
.cma-nav-links { font-size: 0.8rem !important; gap: 10px !important; }
.cma-hero h1 { font-size: 1.7rem !important; }
}
/* =============================================================
[19] FINE POLISH — small refinements, mobile only
=============================================================
These are "tiny little bit" improvements on top of the
structural fixes above. Nothing drastic, just cleaning up the
vertical rhythm, tap targets, typography weight, and edges.
============================================================= */
@media (max-width: 768px) {
/* -- [19.1] Sharper text rendering everywhere on mobile --
Most phones render text grayscale. Force better antialiasing
and kerning for cleaner headlines on high-DPI screens. */
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* -- [19.2] Tighter vertical rhythm between sections --
Desktop uses ~80px vertical section padding. That's
oppressive on mobile — each section feels disconnected.
Tighten to ~48px so sections read as one scroll. */
.cma-section,
.cma-bg-light,
.cma-bg-gray,
.cma-bg-white,
.cma-pricing,
.cma-contact,
section.cma-section {
padding: 48px 0 !important;
}
/* -- [19.3] Heading letter-spacing + weight --
Makes big headings feel intentional, not system-default. */
h1, h2, h3, .cma-hero h1, .cma-section-title h2 {
letter-spacing: -0.015em !important;
}
h3, .cma-feature-card h3, .cma-step h3 {
letter-spacing: -0.005em !important;
}
/* -- [19.4] Primary buttons — fuller tap target, cleaner edge --
Old pill buttons on mobile were slim and hard to tap.
Bumping vertical padding + consistent radius. */
.cma-btn, .cma-cta-button, .cma-btn-primary, .cma-btn-secondary {
min-height: 48px; /* Apple HIG minimum tap target */
padding: 14px 22px !important;
border-radius: 10px !important; /* was very round / pill — calmer */
font-weight: 600 !important;
letter-spacing: 0.005em;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cma-btn-primary {
box-shadow: 0 6px 18px -6px rgba(40,167,69,0.45);
}
.cma-btn-primary:active,
.cma-btn:active {
transform: translateY(1px);
}
/* -- [19.5] Feature / pricing / step cards — softer shadows --
Make the card elevation feel intentional instead of harsh. */
.cma-feature-card,
.cma-pricing-card,
.cma-step,
.cma-card {
border-radius: 14px !important;
box-shadow: 0 8px 24px -12px rgba(0,0,0,0.12) !important;
}
/* -- [19.6] Feature card icons — breathing room --
The circled icons at the top of each feature card were
jammed up against the card edge. */
.cma-feature-card .cma-feature-icon {
margin-bottom: 14px !important;
}
.cma-feature-card h3 {
margin-bottom: 10px !important;
font-size: 1.15rem !important;
}
.cma-feature-card p {
font-size: 0.95rem !important;
line-height: 1.55 !important;
}
/* -- [19.7] Pricing card — clearer price + feature spacing --
Big price, proper breathing room on feature list. */
.cma-pricing-card .cma-plan-name {
font-size: 0.78rem !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
color: #6b6b6b;
margin-bottom: 6px !important;
}
.cma-pricing-card .cma-plan-period {
margin-top: 2px !important;
font-size: 0.88rem !important;
opacity: 0.7;
}
.cma-pricing-card .cma-plan-features li {
padding: 7px 0 !important;
font-size: 0.95rem !important;
}
/* -- [19.8] Step cards (how it works) — number prominence --
The "1 / 2 / 3 / 4" step numbers were small on mobile.
Make them the visual anchor. */
.cma-step .cma-step-number {
width: 52px !important;
height: 52px !important;
font-size: 1.4rem !important;
margin-bottom: 14px !important;
}
.cma-step h3 {
font-size: 1.05rem !important;
}
.cma-step p {
font-size: 0.92rem !important;
line-height: 1.5 !important;
}
/* -- [19.9] Body text leading --
Tiny bump in line-height for better reading on small screens. */
p, li, .cma-feature-card p, .cma-step p {
line-height: 1.55;
}
/* -- [19.10] Section titles — consistent gap below --
Section .cma-section-title wrapper spacing. */
.cma-section-title {
margin-bottom: 32px !important;
}
.cma-section-title h2 {
margin-bottom: 8px !important;
}
/* -- [19.11] "Need help?" bubble — slightly refined position --
Was 12px from edges. 16px feels less crammed.
Small shadow adjustment for iOS feel. */
#textUsBubble {
right: 16px !important;
bottom: 16px !important;
box-shadow: 0 8px 24px -6px rgba(40,167,69,0.5) !important;
}
/* -- [19.12] Support banner — more restraint --
Compact banner + spacing that doesn't shout. */
.cma-support-banner {
font-size: 11.5px !important;
padding: 5px 10px !important;
letter-spacing: 0.01em;
}
.cma-support-banner-link {
font-size: 11.5px !important;
font-weight: 500 !important;
}
/* -- [19.13] Links in body copy — subtle underline style --
Keeps brand look but removes default underline harshness. */
.cma-section p a,
.cma-footer a {
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
/* -- [19.14] Inputs — cleaner mobile keyboard-friendly style -- */
input[type="text"], input[type="tel"], input[type="email"],
input[type="number"], select, textarea {
font-size: 16px !important; /* prevents iOS zoom on focus */
padding: 12px 14px !important;
border-radius: 8px !important;
line-height: 1.3;
}
label {
font-size: 0.88rem;
}
/* -- [19.15] Footer: compact, legible --
Tighten spacing and align left on mobile. */
.cma-footer {
padding: 40px 0 24px !important;
}
.cma-footer-section {
padding: 0 !important;
}
.cma-footer-section h3 {
font-size: 0.98rem !important;
margin-bottom: 8px !important;
}
.cma-footer-section p,
.cma-footer-section a {
font-size: 0.9rem !important;
line-height: 1.6 !important;
}
.cma-footer-bottom {
padding-top: 20px !important;
font-size: 0.8rem !important;
}
}
/* =============================================================
[20] SMOOTHNESS — the "finishing oil" pass
=============================================================
Makes the whole thing feel liquid instead of assembled.
Scroll behavior, transitions, ambient shadows, softer edges,
gentle motion on interactive elements.
============================================================= */
/* ---- [20.1] Smooth page scroll (universal, not just mobile) ----
Makes anchor links (#about, #pricing) glide instead of snap. */
html {
scroll-behavior: smooth;
scroll-padding-top: 80px; /* offset for fixed banner + header */
}
/* ---- [20.2] Respect users who've asked for less motion ---- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@media (max-width: 768px) {
/* ---- [20.3] Universal easing on interactive elements ----
Every button, link, card, input gets the same subtle ease.
Matches iOS native feel (0.2s cubic-bezier). */
a, button, .cma-btn, .cma-cta-button,
.cma-feature-card, .cma-pricing-card, .cma-step, .cma-card,
input, select, textarea {
transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.22s ease,
background-color 0.22s ease,
color 0.22s ease !important;
}
/* ---- [20.4] Softer / ambient card shadows ----
Replace harsh drop-shadows with layered ambient shadows.
This is the single biggest "feels expensive" change. */
.cma-feature-card,
.cma-pricing-card,
.cma-step,
.cma-card {
box-shadow:
0 1px 2px rgba(12, 18, 30, 0.04),
0 4px 14px rgba(12, 18, 30, 0.06),
0 16px 40px -18px rgba(12, 18, 30, 0.10) !important;
}
/* Subtle lift on card tap — iOS-style ---- */
.cma-feature-card:active,
.cma-pricing-card:active,
.cma-step:active,
.cma-card:active {
transform: scale(0.995);
}
/* ---- [20.5] Rounded corners — restore a touch of softness ----
[19.4] squared off the buttons to 10px. Bumping back to 12px
on cards and 999px (pill) on primary CTAs — feels more alive. */
.cma-btn-primary,
.cma-cta-button {
border-radius: 999px !important;
padding: 14px 24px !important;
}
.cma-btn,
.cma-btn-secondary {
border-radius: 999px !important;
}
.cma-feature-card,
.cma-pricing-card,
.cma-step,
.cma-card {
border-radius: 16px !important;
}
/* ---- [20.6] Hero gradient — smoother transition into page ----
The hard horizontal line where the purple hero stops and the
white content begins looks choppy on mobile. Fade it out. */
.cma-hero {
position: relative;
}
.cma-hero::after {
content: "";
position: absolute;
bottom: -1px; left: 0; right: 0;
height: 48px;
background: linear-gradient(
to bottom,
rgba(255,255,255,0) 0%,
var(--cma-white, #fff) 100%
);
pointer-events: none;
}
/* ---- [20.7] Section backgrounds — seamless stacking ----
.cma-bg-light and .cma-bg-gray have hard color edges.
Let consecutive sections blend slightly. */
.cma-bg-light,
.cma-bg-gray {
background-image: linear-gradient(
to bottom,
rgba(0,0,0,0.01) 0%,
transparent 6%,
transparent 94%,
rgba(0,0,0,0.02) 100%
) !important;
}
/* ---- [20.8] Primary CTA shadow — softer green glow ----
The "Start Messaging Today" / "Add Funds" buttons got a
solid shadow in [19.4]. Trade it for a diffused glow. */
.cma-btn-primary,
.cma-cta-button {
box-shadow:
0 1px 2px rgba(32, 201, 151, 0.12),
0 8px 24px -6px rgba(40, 167, 69, 0.28) !important;
}
.cma-btn-primary:active,
.cma-cta-button:active {
transform: translateY(1px) scale(0.99);
box-shadow:
0 1px 2px rgba(32, 201, 151, 0.2),
0 4px 12px -4px rgba(40, 167, 69, 0.3) !important;
}
/* ---- [20.9] Secondary button — proper ghost style ----
The outlined button's border felt hard. Softer 1.5px border,
backdrop-filter for a touch of glass feel. */
.cma-btn-secondary {
border: 1.5px solid rgba(255,255,255,0.7) !important;
background-color: rgba(255,255,255,0.05) !important;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.cma-btn-secondary:active {
background-color: rgba(255,255,255,0.15) !important;
transform: scale(0.99);
}
/* ---- [20.10] Input focus — smooth ring instead of harsh outline ----
Browser default outlines are jarring on mobile. Replace with
a soft brand-tinted ring that animates in. */
input:focus, select:focus, textarea:focus {
outline: none !important;
border-color: var(--cma-primary-blue, #667eea) !important;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.18) !important;
}
/* ---- [20.11] "Need help?" bubble — gentle idle pulse ----
The bubble sits static. A slow, barely-perceptible breath
draws the eye without being annoying. 6s cycle is slow
enough to feel alive but not distracting. */
@keyframes cmaBubbleBreath {
0%, 100% { transform: scale(1); box-shadow: 0 8px 24px -6px rgba(40,167,69,0.45); }
50% { transform: scale(1.04); box-shadow: 0 10px 28px -4px rgba(40,167,69,0.60); }
}
#textUsBubble {
animation: cmaBubbleBreath 4.5s ease-in-out infinite;
}
#textUsBubble:active {
animation: none;
transform: scale(0.94);
}
/* ---- [20.12] Smoother logo transition ----
The "contact me ASAP" wordmark has hard character edges.
Tighten letter-spacing, add subtle weight shift. */
.cma-contact-me {
letter-spacing: 0.02em !important;
font-weight: 500 !important;
}
.cma-asap {
letter-spacing: 0.04em !important;
font-weight: 800 !important;
}
/* ---- [20.13] Nav link hover/active — smooth color fade ----
Instead of instant color swap, fade it. */
.cma-nav-links a {
transition: color 0.22s ease, opacity 0.22s ease !important;
opacity: 0.85;
}
.cma-nav-links a:hover,
.cma-nav-links a:active {
opacity: 1;
}
/* ---- [20.14] Body links everywhere — underline grows instead of snaps ----
A subtle hover interaction that reads as "alive". */
a:not(.cma-btn):not(.cma-cta-button):not(.cma-logo) {
background-image: linear-gradient(currentColor, currentColor);
background-size: 0 1px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size 0.3s ease !important;
text-decoration: none !important;
}
a:not(.cma-btn):not(.cma-cta-button):not(.cma-logo):hover,
a:not(.cma-btn):not(.cma-cta-button):not(.cma-logo):active {
background-size: 100% 1px;
}
/* ---- [20.15] Pricing card "featured" plan — subtle lift ----
The .cma-featured pricing card should feel like it sits
slightly above its neighbor without being loud. */
.cma-pricing-card.cma-featured {
transform: translateY(-2px);
box-shadow:
0 2px 4px rgba(12, 18, 30, 0.06),
0 8px 22px rgba(12, 18, 30, 0.08),
0 28px 60px -20px rgba(12, 18, 30, 0.16) !important;
}
/* ---- [20.16] Footer — fade into bottom edge ----
Sharp hard line at top of footer looks assembled. */
.cma-footer {
position: relative;
}
.cma-footer::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 28px;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.025),
transparent
);
pointer-events: none;
}
/* ---- [20.17] Images / photos — rounded corners on any unframed img ----
Catches any legacy ![]()
that didn't get rounded by a card wrapper. */
.cma-section img,
.cma-card img,
.cma-feature-card img {
border-radius: 12px;
}
/* ---- [20.18] Disable tap highlight on buttons ----
iOS gray overlay on tap looks cheap. Remove it — our own
:active transform replaces the feedback. */
a, button, .cma-btn, .cma-cta-button {
-webkit-tap-highlight-color: transparent;
}
} /* end @media (max-width: 768px) */
/* =============================================================
[21] USER-FEEDBACK PASS — the 3 specific asks
=============================================================
(a) Home: kill the banner/header gap + overlap
(b) Reading pages: upgrade body font from Nunito → Inter Tight
(c) Footer: breathing room, clearer hierarchy, tap-friendly
============================================================= */
/* ---- [21.1] HOME — banner + header alignment fix ----
Problem: the .cma-support-banner at top of the homepage had
inline CSS on desktop (`body { padding-top: 42px }`,
`.cma-header { top: 42px }`) plus a media-query that
DROPPED both to 38px on mobile. My earlier [17] rule
pushed them out of sync (body=36, header=28), leaving
a visible gap / overlap.
Fix: lock all three measurements to the SAME number so
the banner and header sit flush.
----------------------------------------------------------- */
@media (max-width: 768px) {
:root {
--cma-banner-h: 36px; /* canonical mobile banner height */
}
.cma-support-banner {
height: var(--cma-banner-h) !important;
padding: 0 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important; /* no extra leading pushing text down */
}
.cma-support-banner-link {
line-height: 1 !important;
font-size: 11.5px !important;
font-weight: 500 !important;
}
/* body offset = exactly banner height, so header slots in right below */
body {
padding-top: var(--cma-banner-h) !important;
}
.cma-header {
top: var(--cma-banner-h) !important;
}
}
/* ---- [21.2] FONT UPGRADE — Inter Tight for everything on mobile ----
Problem: Nunito reads too soft for long reading pages on
mobile — curves blur, x-height is low, it feels
casual on a legal/serious service.
Fix: swap to Inter Tight. Modern humanist sans, tight
metrics, excellent small-size rendering, more
grown-up but still warm. Fallback chain keeps
system fonts for instant paint before web font
loads.
Scope: mobile only. Desktop keeps Nunito so nothing
breaks for current users on laptops.
----------------------------------------------------------- */
@media (max-width: 768px) {
body,
.cma-container,
h1, h2, h3, h4, h5, h6,
p, li, a, span, div, label,
button, input, textarea, select,
.cma-btn, .cma-cta-button,
.cma-logo-text, .cma-contact-me, .cma-asap,
.cma-hero, .cma-hero h1, .cma-hero p,
.cma-section-title, .cma-feature-card, .cma-step,
.cma-pricing-card, .cma-contact, .cma-footer {
font-family:
'Inter Tight',
-apple-system, BlinkMacSystemFont,
'Segoe UI', system-ui, sans-serif !important;
}
/* Headings get a touch heavier in the new font to keep
the visual hierarchy the old Nunito weight gave us. */
h1, .cma-hero h1 { font-weight: 700 !important; }
h2, .cma-section-title h2 { font-weight: 700 !important; }
h3, .cma-feature-card h3, .cma-step h3,
.cma-pricing-card .cma-plan-name { font-weight: 600 !important; }
/* Body text a hair lighter than Nunito default, more readable. */
p, li, .cma-feature-card p, .cma-step p, .cma-footer p {
font-weight: 400 !important;
}
/* Numeric sequences (prices, phone numbers) line up better
with tabular figures in Inter Tight. */
.cma-plan-price, .cma-support-banner-link {
font-variant-numeric: tabular-nums lining-nums;
}
}
/* ---- [21.3] FOOTER — breathing room + tap-friendly hierarchy ----
Problem: footer on mobile collapsed to one column but felt
cramped — all links shared the same visual weight,
no tap spacing, hard edge.
Fix: uppercase tracked h3 labels (small caps feel),
block-level links with 8px padding for tap target,
a proper top border fade, copyright de-emphasized.
----------------------------------------------------------- */
@media (max-width: 768px) {
.cma-footer {
padding: 56px 0 28px !important;
position: relative;
}
/* Soft top edge instead of a hard color change. */
.cma-footer::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 32px;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.04),
rgba(0, 0, 0, 0)
);
pointer-events: none;
}
.cma-footer-content {
gap: 30px !important;
}
/* Section label: small caps, tracked, muted.
Gives each section a clean masthead feel. */
.cma-footer-section h3 {
font-size: 0.78rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.18em !important;
opacity: 0.5;
margin-bottom: 14px !important;
}
/* Bigger, blocker, tap-friendly links. */
.cma-footer-section a {
display: block !important;
padding: 9px 0 !important;
font-size: 1rem !important;
font-weight: 500 !important;
line-height: 1.35 !important;
opacity: 0.92;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cma-footer-section a:last-child {
border-bottom: 0;
}
.cma-footer-section a:hover,
.cma-footer-section a:active {
opacity: 1;
}
.cma-footer-section p {
font-size: 0.96rem !important;
line-height: 1.6 !important;
opacity: 0.88;
}
/* Copyright / bottom line — quiet, small, properly separated. */
.cma-footer-bottom {
margin-top: 36px !important;
padding-top: 20px !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.cma-footer-bottom p {
font-size: 0.78rem !important;
opacity: 0.55 !important;
line-height: 1.5 !important;
}
/* Override [20.14]'s underline-grow animation — it looks
busy in the footer where every row is a link. Keep the
footer calm. */
.cma-footer a {
background-image: none !important;
text-decoration: none !important;
}
}
/* =============================================================
[22] FEEDBACK PASS v2 — three more issues
=============================================================
(a) Banner missing on every page except home (it lives inside
index.blade.php, not the shared layout). CSS-only, so I
generate a visual banner via body::before on the pages
that lack the real one. Phone number stays visible but is
not tappable (adding a real would need an HTML edit,
which we've ruled out). Users can still tap the green
"Need help?" bubble at bottom-right to SMS support — that
lives in the shared layout and IS clickable.
(b) On the home page, the fixed header was covering the trust
badges (“As Seen on TV & People Magazine” and the 4.7
stars). Hero top padding was too small for the fixed
banner + fixed header stack.
(c) Footer needed a harder polish — fuller typographic
hierarchy, obvious groupings, proper tap targets.
============================================================= */
/* ---- [22.1] UNIVERSAL VISUAL BANNER on non-home pages ----
Generated via body::before. Scoped to mobile. On home, the
real clickable banner already exists — we hide the pseudo
there (see [22.1.b]). */
@media (max-width: 768px) {
body::before {
content: "📱 24/7 SUPPORT · TEXT 734·215·7002";
position: fixed;
top: 0;
left: 0;
right: 0;
height: 36px;
z-index: 1001;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(90deg, #28a745, #20c997);
color: #fff;
font-family: 'Inter Tight', -apple-system, sans-serif;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
pointer-events: none; /* visual only, can't intercept real links */
}
/* [22.1.b] On the home page the REAL banner exists in
.cma-support-banner — hide our pseudo so we don't double up.
Detected by the presence of the real element: we give the
real banner a high z-index so it covers our pseudo and the
pseudo becomes harmless. Simpler: just make the real one
opaque and 37px tall so it sits on top. */
.cma-support-banner {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 1002 !important; /* above the pseudo */
background: linear-gradient(90deg, #28a745, #20c997) !important;
}
/* Body top-padding must clear the fixed banner. */
body {
padding-top: 36px !important;
}
/* The main site header sits directly below the banner. */
.cma-header {
top: 36px !important;
}
}
/* ---- [22.2] HOME — hero top padding must clear the header ----
Problem: the fixed banner (36px) + fixed header (~58px) eat
~94px of screen from the top. Hero had
`padding: 40px 0` which meant the header covered the
first 55px of hero content — exactly where the
"As Seen on TV & People Magazine" trust badge lives.
You could only see about 20% of it.
Fix: bump hero top padding on mobile to 100px so the
trust badges start BELOW the fixed header, with room
to breathe. */
@media (max-width: 768px) {
.cma-hero {
padding: 100px 0 50px !important;
}
/* Trust badges inside the hero — make them fully visible, the
small-cap tracked style they deserve. */
.cma-hero .cma-trust-badge {
display: inline-block;
margin: 0 6px 8px !important;
padding: 5px 12px !important;
font-size: 0.72rem !important;
letter-spacing: 0.08em;
border-radius: 999px;
background: rgba(255, 255, 255, 0.15);
color: #fff;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
}
/* ---- [22.3] FOOTER — harder redesign pass ----
Previous [21.3] helped but wasn't enough. This pass:
• bigger, more purposeful type hierarchy
• column headings become real section headings
• proper vertical rhythm between sections
• cleaner copyright treatment
Still adds/edits only — doesn't remove any link or element.
----------------------------------------------------------- */
@media (max-width: 768px) {
.cma-footer {
padding: 56px 20px 24px !important;
}
/* Brand column (first section) gets bigger treatment to
anchor the footer visually. */
.cma-footer-section:first-child h3 {
font-size: 1.4rem !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
text-transform: none !important;
opacity: 1 !important;
margin-bottom: 8px !important;
}
.cma-footer-section:first-child p {
font-size: 0.95rem !important;
line-height: 1.55 !important;
opacity: 0.82;
max-width: 32ch;
margin-bottom: 0 !important;
}
/* All other sections (Services / Support / Learn More):
small-caps tracked label. Feels like a contents page,
not a dump of links. */
.cma-footer-section:not(:first-child) h3 {
font-size: 0.72rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.22em !important;
opacity: 0.45 !important;
margin: 0 0 16px !important;
}
/* Links: bigger, block-level, quiet dividers. */
.cma-footer-section a {
display: block !important;
padding: 11px 0 !important;
font-size: 1rem !important;
font-weight: 500 !important;
line-height: 1.3 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
opacity: 0.9;
background-image: none !important; /* kill [20.14] animation */
text-decoration: none !important;
}
.cma-footer-section a:last-child {
border-bottom: 0 !important;
}
.cma-footer-section a:first-of-type {
padding-top: 0 !important; /* align with heading baseline */
}
/* "Phone number" style treatment for phone links. */
.cma-footer-section a[href^="tel:"],
.cma-footer-section a[href^="sms:"] {
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
/* Column-to-column gap. */
.cma-footer-content {
gap: 36px !important;
}
/* Copyright / bottom row. */
.cma-footer-bottom {
margin-top: 40px !important;
padding-top: 22px !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
text-align: left;
}
.cma-footer-bottom p {
font-size: 0.76rem !important;
opacity: 0.5 !important;
line-height: 1.5 !important;
margin: 0 !important;
}
/* Kill the pseudo-element hero-fade at the top of footer
that we added earlier (too busy with the new treatment). */
.cma-footer::before {
display: none !important;
}
}
/* =============================================================
[23] THE "TWO FOOTERS" PROBLEM
=============================================================
The HTML has TWO footers sitting side-by-side:
1.