/* ========================================================================== promo.css — first-service upgrade strip. Standalone so every page (homepage, 7 service pages, 7 city pages) can load the banner without also pulling in the homepage-only 3D and premium layers. Loaded by: website/js/promo-banner.js consumers via a in . Idempotent: promo-banner.js returns early if #promo-banner already exists. Positioning: deep navy + veteran gold rather than a red discount strip, and "free $75 soft-wash upgrade" rather than "$75 off" -- same $75 of value to the business, but it reads as generosity instead of a fire sale on a page that also has to justify a $400-$600 job. ========================================================================== */ #promo-banner { position: sticky; top: 0; z-index: 9999; font-family: inherit; } .avp-promo { background: linear-gradient(135deg, #0b1220 0%, #132033 55%, #1d3049 100%); border-bottom: 1px solid rgba(212, 160, 23, 0.38); box-shadow: 0 2px 18px rgba(11, 18, 32, 0.28); } .avp-promo__inner { max-width: 1280px; margin: 0 auto; padding: 0.6rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .avp-promo__lead { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .avp-promo__eyebrow { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #c9a227; } .avp-promo__headline { font-size: 1.06rem; font-weight: 800; color: #ffffff; letter-spacing: -0.01em; line-height: 1.2; } /* The dollar figure is the one bright moment in the strip. */ .avp-promo__amount { color: #f0c64b; font-weight: 900; font-size: 1.15em; padding: 0 0.06em; } .avp-promo__tail { font-weight: 600; color: #cbd5e1; font-size: 0.9em; } .avp-promo__actions { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; } .avp-promo__cap { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; white-space: nowrap; } .avp-promo__cap strong { color: #f0c64b; font-weight: 900; } .avp-promo__cta { display: inline-flex; align-items: center; gap: 0.42rem; background: linear-gradient(135deg, #f0c64b 0%, #d4a017 100%); color: #0b1220; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.01em; padding: 0.6rem 1.15rem; border-radius: 999px; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 14px rgba(212, 160, 23, 0.32); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, filter 0.25s ease; } .avp-promo__cta:hover, .avp-promo__cta:focus-visible { transform: translateY(-1px) scale(1.03); box-shadow: 0 8px 22px rgba(212, 160, 23, 0.45); filter: brightness(1.06); } .avp-promo__cta:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; } .avp-promo__phone { font-size: 0.95em; } @media (max-width: 768px) { .avp-promo__inner { padding: 0.55rem 1rem; gap: 0.5rem; justify-content: center; text-align: center; } .avp-promo__lead { align-items: center; } .avp-promo__headline { font-size: 0.95rem; } .avp-promo__actions { gap: 0.6rem; justify-content: center; } .avp-promo__cta { font-size: 0.85rem; /* min-height keeps the tap target at 44px, the accessibility minimum. At 0.55rem padding it was measuring 39px on a 390px viewport. */ padding: 0.55rem 1rem; min-height: 44px; } .avp-promo__cap { font-size: 0.66rem; } } @media (prefers-reduced-motion: reduce) { .avp-promo__cta { transition: none; } .avp-promo__cta:hover, .avp-promo__cta:focus-visible { transform: none; } }