/* ============================================
HERO SECTION - TECH ASSIST FOR SENIORS
Optimized for 1120px container + Elementor
No font-size declarations (uses global clamp settings)
============================================ */
/* HERO BASE STYLES - Full width, 80vh height */
#hero-home {
position: relative;
min-height: 80vh;
width: 100vw;
max-width: 100vw;
/* Break out of site container */
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
/* Base gradient background */
background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
/* Guaranteed gap to whatever follows, even on pages not yet using .tafs-section-card */
margin-bottom: 3rem;
}
/* Background image layer with opacity (DESKTOP/TABLET ONLY) */
#hero-home::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('https://techassistforseniors.com/wp-content/uploads/2025/08/ChatGPT-Image-Aug-10-2025-12_15_34-PM.webp');
background-size: cover;
background-position: center;
opacity: 0.3;
z-index: 1;
}
/* Dark overlay for better text contrast */
#hero-home::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(74, 144, 226, 0.7) 0%, rgba(53, 122, 189, 0.8) 100%);
z-index: 2;
}
/* HERO CONTAINER - Constrained to 1120px */
.hero-container {
position: relative;
z-index: 3;
max-width: 1120px;
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 3.75rem 0;
text-align: center;
}
/* HERO CONTENT - Max 900px for optimal readability */
.hero-content {
max-width: 900px;
margin: 0 auto;
}
/* Alternative inner container (if using .mm-hero-inner) */
.mm-hero-inner {
max-width: 720px;
margin: 0 auto;
padding: 3.5rem 1.5rem;
}
/* HERO TYPOGRAPHY - Colors and spacing only */
#hero-home h1,
.mm-hero-inner h1 {
color: #ffffff;
font-weight: 800;
line-height: 1.2;
margin-bottom: 1.25rem;
text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
}
/* Subheader - Smaller than h1, larger than body text */
#hero-home h2,
.mm-hero-inner p {
font-size: clamp(1.125rem, 0.75rem + 1.5vw, 1.5rem);
color: #ffffff;
font-weight: 400;
line-height: 1.6;
margin-bottom: 2.5rem;
text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
}
.mm-hero-inner h1 {
margin-bottom: 1rem;
}
.mm-hero-inner p {
margin-bottom: 0.75rem;
}
/* Ensure all hero text is white */
.mm-hero,
.mm-hero-inner,
.mm-hero-inner h1,
.mm-hero-inner p,
.mm-hero-inner a {
color: #ffffff;
}
/* ============================================
CTA BUTTON - GREEN WITH WHITE TEXT/ICONS
============================================ */
#hero-home .cta-button,
.mm-hero .button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem; /* Space between icon and text */
/* Senior-friendly touch targets */
min-width: 44px;
min-height: 44px;
padding: 1.1rem 2.6rem;
/* Typography */
font-weight: 700;
text-decoration: none;
/* GREEN gradient background — darkened from the original #22c55e/#16a34a.
   That gradient only gave white text 2.28:1 contrast at its lighter end
   (fails WCAG AA, despite what the old comment here claimed). This pair
   holds 5:1+ at both ends. */
background: linear-gradient(135deg, #15803d 0%, #166534 100%);
/* WHITE text and icons - verified AA compliant at both gradient stops */
color: #ffffff;
/* Visual styling */
border: none;
border-radius: 3.125rem;
cursor: pointer;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
/* Smooth transitions */
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
/* Spacing */
margin-top: 0.75rem;
margin-bottom: 1rem;
}
/* Ensure all children (icons, spans, svg) are white */
#hero-home .cta-button *,
.mm-hero .button * {
color: #ffffff;
}
/* SVG phone icon - force white color */
#hero-home .cta-button svg,
#hero-home .cta-button .phone-icon {
fill: none;
stroke: #ffffff;
width: 20px;
height: 20px;
flex-shrink: 0; /* Prevent icon from shrinking */
}
/* If using Font Awesome or other icon fonts */
#hero-home .cta-button i,
#hero-home .cta-button .fa,
#hero-home .cta-button .fas,
#hero-home .cta-button .far {
color: #ffffff;
}
/* HOVER STATE - Slightly darker green */
#hero-home .cta-button:hover,
.mm-hero .button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
filter: brightness(0.95);
}
/* FOCUS STATE - Accessible keyboard outline */
#hero-home .cta-button:focus,
#hero-home .cta-button:focus-visible,
.mm-hero .button:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 4px;
}
/* ACTIVE STATE - Pressed effect */
#hero-home .cta-button:active,
.mm-hero .button:active {
transform: translateY(0);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
/* Trust badges spacing */
#hero-home .trust-badges {
margin-top: 0;
}
/* Trust badges text color - white, to match the rest of the hero text
   (h1/h2/CTA are already forced white; this line had no color rule and
   was falling back to the default body text color, ~black, on the blue
   gradient). Scoped to service pages only - homepage is excluded on
   purpose per Sean's request not to touch it in this pass. */
body:not(.home) #hero-home .trust-badges {
color: #ffffff;
}
/* ============================================
MOBILE RESPONSIVENESS (768px and below)
============================================ */
@media (max-width: 768px) {
/* Remove heavy background image on mobile for performance */
#hero-home::before {
background-image: none !important;
content: "" !important;
opacity: 0 !important;
}
/* Use only gradient on mobile */
#hero-home {
background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%) !important;
}
/* Add padding so content doesn't touch edges */
.hero-container {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.mm-hero-inner {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
/* Full-width button on mobile with max-width */
#hero-home .cta-button,
.mm-hero .button {
width: 100%;
max-width: 320px;
padding: 1rem 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
}
/* ============================================
ACCESSIBILITY PREFERENCES
============================================ */
/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
#hero-home .cta-button,
.mm-hero .button {
transition: none;
}
#hero-home .cta-button:hover,
.mm-hero .button:hover {
transform: none;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
}
/* Touch devices - disable hover transform */
@media (hover: none) {
#hero-home .cta-button:hover,
.mm-hero .button:hover {
transform: none;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
}
/* ============================================
PAGE-SPECIFIC HERO IMAGE OVERRIDE
Page: ID 5283 (Senior Scam Prevention)
Only affects desktop/tablet (mobile already removes ::before)
============================================ */
.page-id-5283 #hero-home::before{
background-image: url("https://techassistforseniors.com/wp-content/uploads/2025/11/ChatGPT-Image-Nov-12-2025-01_20_32-PM.webp") !important;
}
.page-id-9004 #hero-home::before{
background-image: url("https://techassistforseniors.com/wp-content/uploads/2026/01/ChatGPT-Image-Jan-17-2026-07_32_56-PM.webp") !important;
}
.page-id-114 #hero-home::before{
background-image: url("https://techassistforseniors.com/wp-content/uploads/2025/04/A-person-dialing-a-phone-number-on-an-iPhone-with-a-light-color-palette.-The-iPhone-screen-is-illum.webp");
} !important;
/* #hero-home #cta-message (ID+ID) beats #hero-home .cta-button (ID+class) on
   specificity, so this actually wins now — it was silently losing before and
   rendering green like the other button. Also fixed the "property: value;
   !important;" syntax below, which is invalid CSS (!important has to be
   inside the declaration, before the semicolon) and was being ignored. */
#hero-home #cta-message {
background-color: #ffffff !important;
color: #000000 !important;
border: 2px solid #000000;
}
#hero-home #cta-message:hover {
background-color: #000000 !important;
color: #ffffff !important;
}