/* ============================================================= HEAR Marketing — Glassmorphism overrides ============================================================= Layered on top of css/style.css. Activates when has the `marketing-glass` class. Strict B&W: white/black with translucency only — no introduced colors. Designed to leave page structure untouched and only re-skin the chrome and surfaces (nav, cards, hero, CTA, scroll indicator). ============================================================= */ /* ----------------------------------------------------------- Page background — subtle B&W radial mesh on alt sections so frosted cards have something to refract over. Section-white stays clean white per existing design. ----------------------------------------------------------- */ body.marketing-glass .section-alt { background-color: #f4f4f5; background-image: radial-gradient(at 8% 6%, rgba(0, 0, 0, 0.045) 0px, transparent 55%), radial-gradient(at 92% 14%, rgba(0, 0, 0, 0.035) 0px, transparent 50%), radial-gradient(at 78% 92%, rgba(0, 0, 0, 0.04) 0px, transparent 55%), radial-gradient(at 12% 88%, rgba(0, 0, 0, 0.025) 0px, transparent 50%); } [data-theme="dark"] body.marketing-glass .section-alt { background-color: #0d0d0e; background-image: radial-gradient(at 8% 6%, rgba(255, 255, 255, 0.05) 0px, transparent 55%), radial-gradient(at 92% 14%, rgba(255, 255, 255, 0.035) 0px, transparent 50%), radial-gradient(at 78% 92%, rgba(255, 255, 255, 0.04) 0px, transparent 55%), radial-gradient(at 12% 88%, rgba(255, 255, 255, 0.025) 0px, transparent 50%); } /* Section-white gets a barely-perceptible mesh too so cards feel layered rather than flat. */ body.marketing-glass .section-white { background-image: radial-gradient(at 12% 8%, rgba(0, 0, 0, 0.025) 0px, transparent 50%), radial-gradient(at 88% 90%, rgba(0, 0, 0, 0.02) 0px, transparent 55%); } [data-theme="dark"] body.marketing-glass .section-white { background-image: radial-gradient(at 12% 8%, rgba(255, 255, 255, 0.03) 0px, transparent 50%), radial-gradient(at 88% 90%, rgba(255, 255, 255, 0.02) 0px, transparent 55%); } /* ----------------------------------------------------------- Navbar — frosted glass when scrolled (replaces solid surface) ----------------------------------------------------------- */ body.marketing-glass .navbar.nav-scrolled { background: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02); } [data-theme="dark"] body.marketing-glass .navbar.nav-scrolled { background: rgba(20, 20, 22, 0.62); border-bottom: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04); } /* Mobile menu — frosted instead of opaque */ body.marketing-glass .mobile-menu { background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, 0.06); } [data-theme="dark"] body.marketing-glass .mobile-menu { background: rgba(20, 20, 22, 0.85); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } /* ----------------------------------------------------------- Hero — desaturate the bg photo to grayscale (HEAR is B&W), bump overlay contrast slightly so titles stay readable. ----------------------------------------------------------- */ body.marketing-glass .hero-bg { filter: grayscale(100%) contrast(0.95) brightness(0.95); } body.marketing-glass .hero-overlay { background: linear-gradient( 180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.72) 100% ); } /* Hero scroll indicator — frosted pill */ body.marketing-glass .hero-scroll-indicator { background: rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 8px 10px; color: rgba(255, 255, 255, 0.85); } /* Hero outline button — make it glass on the photo backdrop */ body.marketing-glass .hero .btn-outline-light { background: rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.5); } body.marketing-glass .hero .btn-outline-light:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.75); } /* ----------------------------------------------------------- Cards — frosted glass surfaces ----------------------------------------------------------- */ body.marketing-glass .card, body.marketing-glass .career-card, body.marketing-glass .reach-gender-card, body.marketing-glass .reach-summary-badge { background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 24px rgba(0, 0, 0, 0.05); } [data-theme="dark"] body.marketing-glass .card, [data-theme="dark"] body.marketing-glass .career-card, [data-theme="dark"] body.marketing-glass .reach-gender-card, [data-theme="dark"] body.marketing-glass .reach-summary-badge { background: rgba(20, 20, 22, 0.55); border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45); } /* Cards inside .section-dark sit on solid black — give them a dark-glass treatment so they still read as distinct surfaces. */ body.marketing-glass .section-dark .card, body.marketing-glass .section-dark .stat-card { background: rgba(255, 255, 255, 0.04); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: none; } /* Value cards on .section-dark — style.css forces black icon + near- black title (designed for a white card). The dark-glass override above makes that black-on-near-black: invisible. Re-establish light-on-dark legibility while staying B&W per marketing-glass's "no introduced colors" rule. */ body.marketing-glass .section-dark .card-value .value-icon, [data-theme="dark"] body.marketing-glass .section-dark .card-value .value-icon { color: rgba(255, 255, 255, 0.92); } body.marketing-glass .section-dark .card-value .value-title, [data-theme="dark"] body.marketing-glass .section-dark .card-value .value-title { color: #ffffff; } body.marketing-glass .section-dark .card-value .value-text, [data-theme="dark"] body.marketing-glass .section-dark .card-value .value-text { color: rgba(255, 255, 255, 0.72); } /* Population / overlay-image cards (full-bleed image, text on gradient overlay) — leave the image visible, just add a frosted-glass border + softer shadow. */ body.marketing-glass .card-population, body.marketing-glass .card-service { border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.08); } [data-theme="dark"] body.marketing-glass .card-population, [data-theme="dark"] body.marketing-glass .card-service { border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.55); } /* Card image-overlay images — desaturate to grayscale on hover & default for B&W-on-brand feel. */ body.marketing-glass .card-img-overlay img, body.marketing-glass .card-img-wrapper img { filter: grayscale(100%) contrast(0.96); transition: filter 280ms ease, transform var(--transition-base); } body.marketing-glass .card-hover:hover .card-img-wrapper img, body.marketing-glass .card-service:hover .card-img-wrapper img, body.marketing-glass .card-population:hover .card-img-overlay img { filter: grayscale(80%) contrast(1.0); } /* About-snapshot rounded image — also B&W on-brand */ body.marketing-glass .rounded-img, body.marketing-glass .about-illustration img { filter: grayscale(100%) contrast(0.96); } /* ----------------------------------------------------------- Stat cards on dark sections — translucent dark-glass ----------------------------------------------------------- */ body.marketing-glass .section-dark .stat-icon { background-color: rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.12); } /* Brand-pattern dark sections — keep solid black but layer a subtle radial glow so glass stat cards read distinctly. */ body.marketing-glass .section-dark.brand-pattern, body.marketing-glass .section-dark { background-image: radial-gradient(at 15% 12%, rgba(255, 255, 255, 0.06) 0px, transparent 50%), radial-gradient(at 85% 88%, rgba(255, 255, 255, 0.05) 0px, transparent 55%); } /* ----------------------------------------------------------- CTA banner — make the bg photo grayscale; frosted content card ----------------------------------------------------------- */ body.marketing-glass .cta-bg { filter: grayscale(100%) contrast(0.95); } body.marketing-glass .cta-overlay { background: linear-gradient( 135deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.62) 100% ); } body.marketing-glass .cta-content { background: rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px; padding: 48px 32px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 48px rgba(0, 0, 0, 0.45); } /* ----------------------------------------------------------- Section labels — preserve readability but neutralize the accent color so chrome stays B&W on glass surfaces. The non-glass page styles still use the accent inside section bodies; here we only touch the *label* used as eyebrow text. ----------------------------------------------------------- */ body.marketing-glass .section-label { color: rgba(0, 0, 0, 0.72); } [data-theme="dark"] body.marketing-glass .section-label { color: rgba(255, 255, 255, 0.78); } /* ----------------------------------------------------------- 404 error page — wrap the error card in glass ----------------------------------------------------------- */ body.marketing-glass .error-section { background-color: #f4f4f5; background-image: radial-gradient(at 8% 6%, rgba(0, 0, 0, 0.045) 0px, transparent 55%), radial-gradient(at 92% 14%, rgba(0, 0, 0, 0.035) 0px, transparent 50%), radial-gradient(at 78% 92%, rgba(0, 0, 0, 0.04) 0px, transparent 55%); } [data-theme="dark"] body.marketing-glass .error-section { background-color: #0d0d0e; background-image: radial-gradient(at 8% 6%, rgba(255, 255, 255, 0.05) 0px, transparent 55%), radial-gradient(at 92% 14%, rgba(255, 255, 255, 0.035) 0px, transparent 50%), radial-gradient(at 78% 92%, rgba(255, 255, 255, 0.04) 0px, transparent 55%); } /* ----------------------------------------------------------- Reduced motion — honor user preference ----------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body.marketing-glass .card-img-overlay img, body.marketing-glass .card-img-wrapper img { transition: none; } } /* ----------------------------------------------------------- No-backdrop-filter fallback — raise opacity so cards still read as distinct surfaces. ----------------------------------------------------------- */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body.marketing-glass .navbar.nav-scrolled, body.marketing-glass .mobile-menu { background: rgba(255, 255, 255, 0.96); } body.marketing-glass .card, body.marketing-glass .reach-gender-card { background: rgba(255, 255, 255, 0.92); } [data-theme="dark"] body.marketing-glass .navbar.nav-scrolled, [data-theme="dark"] body.marketing-glass .mobile-menu { background: rgba(20, 20, 22, 0.96); } [data-theme="dark"] body.marketing-glass .card, [data-theme="dark"] body.marketing-glass .reach-gender-card { background: rgba(20, 20, 22, 0.92); } }