/* Gradientes em CSS que substituem os PNGs de assets/images/shape/. Cada um foi extraido do PNG original: as paradas de cor sao os pixels reais da coluna central, e o raio horizontal foi ajustado por varredura minimizando o erro pixel a pixel contra a imagem. Sao duas camadas por gradiente: 1. radial-gradient -> o arco laranja (Ry fixo em 100% para que a % da parada corresponda a % da altura no eixo central) 2. linear-gradient -> o topo escuro, que mantem os cantos superiores pretos (um radial sozinho clareia os cantos) Use background-image, NAO o atalho background: o atalho zera o background-color do elemento, e .breadcumb1 / .project1-titleArea / .hero1 dependem do proprio background-color para fechar a base da secao. As pontas (#0b0d11 e #fffbf5) precisam casar exatamente com var(--theme-color1) e var(--white2), senao aparece emenda na borda da secao. 5 PNGs -> 3 gradientes: heroShape1_2 e services-shape2_1 sao identicos a awardShape1_1, entao os tres usam .shape-glow--panel. */ /* heroShape1_1.png (1920x978 e 1920x1668) — fundo opaco, termina em creme */ .shape-glow--hero { background-image: radial-gradient(ellipse 330% 170% at 50% 0%, rgb(0 0 0) 0%, rgb(0 0 0) 7.1%, #080a16 14.3%, #141a4d 21.4%, #3644c9 28.6%, #7c86e0 35.7%, #b5bbec 42.9%, #e9ebf8 50%, #f7f8fc 57.1%, #f7f8fc 100%), linear-gradient(to bottom, #0b0d11 0%, #0b0d11 16%, rgba(11, 13, 17, 0) 46%); } /* awardShape1_1.png + heroShape1_2.png + services-shape2_1.png (1920x978) — transparente na base, para sobrepor a secao. Girado 180 graus: centro da elipse movido de 50% 0% (topo) para 50% 100% (base) -- mesmas paradas de cor, so a direcao inverte. O overlay escuro dos cantos acompanha a virada: "to bottom" vira "to top", pra escurecer os cantos de baixo em vez dos de cima. */ .shape-glow--panel { background-image: radial-gradient(ellipse 145% 100% at 50% 100%, #0b0d11 0%, #0b0d11 21.4%, #0d1023 28.6%, #0d274f 35.7%, #062192 42.9%, #0c13cf 50%, #3626f4 57.1%, #7562ff 64.3%, #a599ff 71.4%, #d2ceff 78.6%, #eeedff 85.7%, #fbfbff 92.9%, #ffffff 100%), linear-gradient(to top, #0b0d11 0%, #0b0d11 27%, rgba(11, 13, 17, 0) 57%); } @media (max-width: 991px) { .shape-glow--panel { background-image: radial-gradient(ellipse 615% 60% at 50% 100%, #0b0d11 0%, #0b0d11 21.4%, #0d1023 28.6%, #0d274f 35.7%, #062192 42.9%, #0c13cf 50%, #3626f4 57.1%, #7562ff 64.3%, #a599ff 71.4%, #d2ceff 78.6%, #eeedff 85.7%, #fbfbff 92.9%, #ffffff 100%), linear-gradient(to top, #0b0d11 0%, #0b0d11 27%, rgba(11, 13, 17, 0) 57%); } } /* projectShape1.png (1920x700) — ja comeca quente no topo */ .shape-glow--project { background-image: radial-gradient(ellipse 145% 100% at 50% 0%, #0c0e21 0%, #0c2140 7.1%, #0a2668 14.3%, #08239b 21.4%, #0710c7 28.6%, #1d15e7 35.7%, #4935fa 42.9%, #7460ff 50%, #9789ff 57.1%, #bbb3ff 64.3%, #d8d4ff 71.4%, #edecff 78.6%, #f8f8ff 85.7%, #fefeff 92.9%, #ffffff 100%); } /* Variante invertida, usada SO na secao "over 80 completed projects" (index.html:185). Branco no topo -> azul -> preto #0b0c0f no fim. A .shape-glow--project original segue intacta na outra secao ("I have 15 years of Experience"). Paradas todas opacas: o fim solido evita o fundo branco do elemento vazar na emenda. */ .shape-glow--project-inv { background-image: /* Mesmas paradas da .shape-glow--project, so com o centro da elipse movido do topo (50% 0%) para a base (50% 100%) -- o gradiente gira 180 graus. O nucleo escuro cai no fundo e o claro se abre para cima; a ponta transparente revela o fundo branco do elemento no topo. */ radial-gradient(ellipse 1125% 120% at 50% 100%, #0B0C0F 3%, #0c2140 12.1%, #0a2668 16.3%, #08239b 23.4%, #0710c7 28.6%, #1d15e7 35.7%, #4935fa 42.9%, #7460ff 50%, #9789ff 57.1%, #bbb3ff 64.3%, #d8d4ff 71.4%, #edecff 78.6%, #f8f8ff 85.7%, #fefeff 92.9%, #ffffff 100%); } /* Mesma elipse da .shape-glow--project-inv (1125% 120% at 50% 100% -- centro na base, NAO rotacionada de volta pro topo), usada na secao "I have 15 years of Experience". So que a ORDEM das cores e invertida: onde a -inv tem escuro perto do centro (base) e claro na borda (topo), aqui e o oposto -- claro perto do centro (base) e escuro na borda (topo). Fica escuro em cima / branco embaixo, mas com o espalhamento dramatico da elipse grande, diferente da .shape-glow--project original (elipse 145% 100% at 50% 0%, mais contida). */ .shape-glow--project-inv-rev { background-image: radial-gradient(ellipse 243% 100% at 50% 100%, #ffffff 23%, #bbb3ff 35.7%, #9789ff 42.9%, #7460ff 50%, #4935fa 57.1%, #1d15e7 64.3%, #0710c7 71.4%, #08239b 78.6%, #0a2668 85.7%, #0c2140 90.9%, #0B0C0F 100%); } /* ============================================================ Correcao da "linha branca" que pisca no scroll. Todos os elementos .shape-glow--* tem background-color CLARO (branco/creme) com o gradiente por cima. O background-color preenche a caixa inteira, mas a imagem do gradiente e rasterizada a parte. O ScrollSmoother move o conteudo por transform em posicoes FRACIONARIAS, entao o arredondamento pode deixar a imagem 1px curta -- e a cor clara de tras aparece como uma linha, que pisca conforme a fracao muda durante o scroll. Solucao: o gradiente passa a ser 2px mais alto que a caixa e sobe 1px, entao transborda 1px em cima e 1px embaixo. Nunca sobra linha descoberta. Custo: as paradas percentuais deslocam ~0,2% numa secao de 700px -- imperceptivel. ============================================================ */ .shape-glow--hero, .shape-glow--panel, .shape-glow--project, .shape-glow--project-inv, .shape-glow--project-inv-rev { background-size: 100% calc(100% + 2px); background-position: 0 -1px; background-repeat: no-repeat; }