@property --teas-hh { syntax:'<angle>'; inherits:false; initial-value:0deg; } @keyframes teas-hue-band-hue { 0%,100%{--teas-hh:0deg;} 50%{--teas-hh:148deg;} } @keyframes teas-hue-band-sweep { 0%,100%{ background-position:84% 8%,84% 8%,18% 92%,82% 12%; } 50% { background-position:16% 92%,16% 92%,76% 14%,18% 84%; } } body:not(.woocommerce-account) .page-head-simple, .search-page .search-head, .article-main .article-head { position:relative; overflow:hidden; border-radius:24px; color:#fff; padding:clamp(28px,4vw,48px) clamp(22px,4vw,48px); margin:4px 0 26px; background: radial-gradient(52% 46% at 50% 46%, hsl(calc(165deg + var(--teas-hh)),88%,66%) 0%, transparent 56%), radial-gradient(150% 150% at 50% 50%, hsl(calc(174deg + var(--teas-hh)),72%,22%) 0%, hsl(calc(178deg + var(--teas-hh)),76%,13%) 46%, hsl(calc(182deg + var(--teas-hh)),80%,5%) 100%), radial-gradient(42% 42% at 6% 100%, rgba(48,216,200,.38) 0%, transparent 64%), radial-gradient(34% 38% at 96% 0%, rgba(232,72,152,.46) 0%, transparent 68%); background-size:220% 220%,240% 240%,150% 150%,150% 150%; background-position:84% 8%,84% 8%,18% 92%,82% 12%; animation:teas-hue-band-hue 19s ease-in-out infinite, teas-hue-band-sweep 37s ease-in-out infinite; will-change:background-position; } body:not(.woocommerce-account) .page-head-simple > *, .search-page .search-head > *, .article-main .article-head > * { position:relative; z-index:1; } body:not(.woocommerce-account) .page-head-simple .head, .search-page .search-head h1, .article-main .article-head h1 { color:#fff !important; } body:not(.woocommerce-account) .page-head-simple .lede, .article-main .article-head .article-lede { color:rgba(255,255,255,.85) !important; } .search-page .search-head .eyebrow, .article-main .article-head .eyebrow { color:#90f0e8 !important; } .search-page .search-head h1 em, .article-main .article-head h1 em { color:#90f0e8 !important; } .article-main .article-head .article-meta, .article-main .article-head .article-meta * { color:rgba(255,255,255,.78) !important; } .search-page .search-head .eyebrow .pip, .article-main .article-head .eyebrow .pip { background:#90f0e8 !important; } .search-page .search-head .search-refine input { background:#fff; color:#042220; border-radius:10px; } @media (prefers-reduced-motion:reduce){ body:not(.woocommerce-account) .page-head-simple, .search-page .search-head, .article-main .article-head { animation:none !important; } }