.page-shell { background: linear-gradient(180deg, rgba(245, 247, 242, .46) 0%, rgba(245, 247, 242, .62) 48%, rgba(245, 247, 242, .74) 100%), url('/img/backgound-light.png') center/cover fixed no-repeat, var(--page-bg) !important; } body[data-theme="dark"] .page-shell { background: linear-gradient(180deg, rgba(7, 19, 14, .34) 0%, rgba(7, 19, 14, .58) 52%, rgba(7, 19, 14, .76) 100%), url('/img/backgound.png') center/cover fixed no-repeat, #07130e !important; } .hero-section { background: transparent !important; } .category-strip { background: rgba(255, 255, 255, .78) !important; } .catalog-section { background: transparent !important; } body[data-theme="dark"] .category-strip { background: rgba(7, 19, 14, .72) !important; } /* JAC-463: background-attachment:fixed em elemento que nao e / (.page-shell e uma div) nao e suportado no Safari mobile (iOS) - o browser simplesmente nao pinta a imagem, sobrando so a cor solida de fallback do background acima. Troca pra "scroll" só no breakpoint mobile (mesmo usado pelo resto do home.css) preserva o efeito parallax no desktop e garante que a imagem apareça no celular. */ @media (max-width: 900px) { .page-shell { /* !important necessario: o shorthand "background" com !important acima marca todas as sub-propriedades (inclusive attachment) como important, então uma declaração normal aqui perderia mesmo vindo depois. */ background-attachment: scroll !important; } body[data-theme="dark"] .page-shell { background-attachment: scroll !important; } }