:root { } .hero.pg-band { min-height: var(--pg-h, var(--pg-h-md)); } .pg-head--lg { --pg-h: var(--pg-h-lg); } .pg-head--md { --pg-h: var(--pg-h-md); } .pg-head--sm { --pg-h: var(--pg-h-sm); } .pg-head--give { --pg-h: var(--pg-h-give); } .hero.pg-band .display, .hero.pg-band .statement { font-size: clamp(2.6rem, 5.6vw, 4.5rem); } .hero.pg-band.pg-head--lg .display, .hero.pg-band.pg-head--lg .statement { font-size: clamp(2.9rem, 6.6vw, 5.25rem); } .hero.pg-band.pg-head--sm .display, .hero.pg-band.pg-head--sm .statement { font-size: clamp(2.2rem, 4.4vw, 3.4rem); } .hero.pg-band { position: relative; isolation: isolate; overflow: hidden; background: #000; padding-top: clamp(4.5rem, 10vh, 6.5rem); padding-bottom: clamp(3.5rem, 8vh, 5.5rem); } .hero.pg-band::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; top: 0; background: var(--pg-band-wide) center bottom/cover no-repeat; } .hero.pg-band::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 12%, rgba(0, 0, 0, 0) 26% ), linear-gradient( 0deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.3) 11%, rgba(0, 0, 0, 0) 26% ), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E"); } .hero.pg-band.pg-head--give::before { background-image: var(--pg-give-wide); background-position: center top; } .hero.pg-band.pg-head--give::after { background: linear-gradient( 180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.22) 14%, rgba(0, 0, 0, 0) 30% ), linear-gradient( 0deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.24) 13%, rgba(0, 0, 0, 0) 28% ), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E"); } .hero.pg-band.pg-head--give > .wrap::before { right: 52%; background: rgba(0, 0, 0, 0.62); } @media (max-width: 900px) { .hero.pg-band.pg-head--give::before { background-image: var(--pg-give-tall); } .hero.pg-band.pg-head--give > .wrap::before { right: -14%; } } .hero.pg-band.pg-photo::before { aspect-ratio: auto; top: 0; background: var(--pg-photo) center 8% / cover no-repeat; transform: scaleX(-1); filter: grayscale(0) contrast(1.02) brightness(1); } .hero.pg-band.pg-photo::after { background: linear-gradient( 180deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.34) 14%, rgba(0, 0, 0, 0.06) 30%, rgba(0, 0, 0, 0) 44% ), linear-gradient( 0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.28) 14%, rgba(0, 0, 0, 0) 32% ), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E"); } @media (max-width: 900px) { .hero.pg-band.pg-photo::before { background-position: 40% center; } } .hero.pg-band > .wrap { position: relative; z-index: 3; } .hero.pg-band > .wrap > :is(.eyebrow, h1, h2, p, ul, ol), .hero.pg-band .give-intro > :is(.eyebrow, h1, p, ul) { max-width: min(44ch, 100%); } .hero.pg-band > .wrap > :is(.eyebrow, h1, h2, p, ul, ol) { max-width: min(44ch, 50%); } .hero.pg-band > .wrap::before { content: ""; position: absolute; z-index: -1; left: -6%; right: 44%; top: -9%; bottom: -11%; background: rgba(0, 0, 0, 0.86); filter: blur(42px); pointer-events: none; } .hero.pg-band > .wrap :is(.eyebrow, h1, h2, p, a, li) { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 14px rgba(0, 0, 0, 0.45); } .hero.pg-band > .wrap .gb-card :is(p, a, li) { text-shadow: none; } @media (max-width: 900px) { .hero.pg-band { padding-top: clamp(4rem, 10vh, 5.5rem); padding-bottom: clamp(3rem, 7vh, 4.5rem); } .hero.pg-band > .wrap > :is(.eyebrow, h1, h2, p, ul, ol) { max-width: none; } .hero.pg-band > .wrap::before { left: -14%; right: -14%; top: -7%; bottom: -9%; background: rgba(0, 0, 0, 0.88); } .hero.pg-band::before { background-image: var(--pg-band-tall); } .hero.pg-band::after { background: linear-gradient( 180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 15%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0) 42% ), linear-gradient( 0deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.3) 12%, rgba(0, 0, 0, 0) 26% ), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E"); } } @media (max-width: 640px) { .hero.pg-band { padding-bottom: clamp(2.5rem, 6vh, 4rem); } }