/* Calculadora Detailer — acabamento do herói e fundo sem 3D. O herói é sempre escuro (nos dois temas); só a cor de destaque muda. */ /* ---------- acabamento: fio de luz no rodapé e brilho nas bordas ---------- */ .hero::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.02), inset 0 -60px 80px -60px rgba(0, 0, 0, 0.6); } .hero::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: 0; height: 1px; z-index: 3; pointer-events: none; background: linear-gradient(90deg, transparent, var(--laranja) 30%, #FFE4CC 62%, var(--laranja) 80%, transparent); box-shadow: 0 0 14px 1px var(--laranja-glow), 0 0 40px 2px var(--laranja-suave); opacity: 0.75; } /* com a cena ligada, o véu segura um pouco mais o lado do texto */ .hero-com-3d .hero-veu { background: linear-gradient(90deg, rgba(7, 9, 12, 0.94) 0%, rgba(7, 9, 12, 0.72) 36%, rgba(7, 9, 12, 0.25) 56%, transparent 72%), linear-gradient(180deg, transparent 70%, rgba(7, 9, 12, 0.45)); } @media (max-width: 720px) { .hero-com-3d .hero-veu { background: linear-gradient(180deg, rgba(7, 9, 12, 0.62), rgba(7, 9, 12, 0.9)); } } /* o canvas aparece suave depois do primeiro quadro */ .hero-com-3d .hero-cena canvas { opacity: 0; transition: opacity .6s ease; } .hero-3d-pronto .hero-cena canvas { opacity: 1; } /* ---------- sem 3D: capô, reflexos e gotas só em CSS ---------- */ .hero-sem-3d .hero-cena canvas { display: none; } .hero-sem-3d .hero-cena { overflow: hidden; background: /* túnel de luz ao fundo: arcos de inspeção sumindo na perspectiva */ url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat, radial-gradient(60% 45% at 74% 18%, rgba(255, 228, 204, 0.10), transparent 70%), radial-gradient(42% 60% at 76% 40%, var(--laranja-suave), transparent 72%), radial-gradient(30% 50% at 92% 12%, rgba(56, 189, 248, 0.08), transparent 70%), linear-gradient(180deg, #0E1117, #07090C); } /* o capô: uma lâmina curva e escura com o reflexo das barras de luz */ .hero-sem-3d .hero-cena::before { content: ''; position: absolute; right: -8%; bottom: -46%; width: 72%; height: 112%; border-radius: 50% 50% 0 0 / 34% 34% 0 0; background: /* reflexo que varre a pintura */ linear-gradient(104deg, transparent 38%, rgba(255, 241, 226, 0.0) 42%, rgba(255, 241, 226, 0.38) 47.5%, rgba(255, 241, 226, 0.05) 49%, rgba(255, 180, 120, 0.22) 51%, transparent 56%) 120% 0 / 260% 100% no-repeat, /* barras de inspeção refletidas */ repeating-linear-gradient(172deg, transparent 0 22px, rgba(255, 228, 204, 0.07) 22px 24px, transparent 24px 64px), /* gotas repelidas pelo verniz */ radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.9) 0 1.5px, rgba(255, 255, 255, 0.12) 2.5px 5px, transparent 6px), radial-gradient(circle at 44% 16%, rgba(255, 255, 255, 0.85) 0 1px, rgba(255, 255, 255, 0.1) 2px 4px, transparent 5px), radial-gradient(circle at 57% 25%, rgba(255, 255, 255, 0.9) 0 1.5px, rgba(255, 255, 255, 0.12) 2.5px 6px, transparent 7px), radial-gradient(circle at 66% 14%, rgba(255, 255, 255, 0.8) 0 1px, rgba(255, 255, 255, 0.1) 2px 4px, transparent 5px), radial-gradient(circle at 38% 33%, rgba(255, 255, 255, 0.85) 0 1px, rgba(255, 255, 255, 0.1) 2px 4px, transparent 5px), radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.9) 0 2px, rgba(255, 255, 255, 0.14) 3px 7px, transparent 8px), radial-gradient(circle at 74% 30%, rgba(255, 255, 255, 0.85) 0 1px, rgba(255, 255, 255, 0.1) 2px 4px, transparent 5px), radial-gradient(circle at 24% 38%, rgba(255, 255, 255, 0.8) 0 1px, rgba(255, 255, 255, 0.08) 2px 4px, transparent 5px), /* volume da pintura */ radial-gradient(70% 40% at 50% 8%, rgba(255, 255, 255, 0.08), transparent 70%), linear-gradient(180deg, #161A22 0%, #0A0C10 38%, #050608 100%); border-top: 1px solid rgba(255, 241, 226, 0.28); box-shadow: 0 -1px 0 var(--laranja-glow), 0 -30px 80px -20px var(--laranja-suave), inset 0 2px 18px rgba(255, 255, 255, 0.05); animation: hero-varre 7s cubic-bezier(.65, 0, .35, 1) infinite; } /* brilho laranja lambendo a borda do capô */ .hero-sem-3d .hero-cena::after { content: ''; position: absolute; right: 4%; bottom: 62%; width: 46%; height: 2px; background: linear-gradient(90deg, transparent, var(--laranja), #FFE4CC, var(--laranja), transparent); filter: blur(1px); opacity: .55; animation: hero-pulsa 7s ease-in-out infinite; } @keyframes hero-varre { 0% { background-position: 120% 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } 55% { background-position: -20% 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } 100% { background-position: -20% 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } } @keyframes hero-pulsa { 0%, 100% { opacity: .35; } 45% { opacity: .75; } } @media (max-width: 720px) { .hero-sem-3d .hero-cena::before { right: -30%; width: 130%; bottom: -60%; opacity: .7; } .hero-sem-3d .hero-cena::after { right: 10%; width: 80%; bottom: 52%; opacity: .35; } } @media (prefers-reduced-motion: reduce) { .hero-sem-3d .hero-cena::before, .hero-sem-3d .hero-cena::after { animation: none; } .hero-sem-3d .hero-cena::before { background-position: 45% 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } .hero-com-3d .hero-cena canvas { transition: none; } } /* o brilho de fundo do herói segue a cor de destaque escolhida (e fica escuro nos dois temas) */ .hero, :root[data-tema] .hero { background: radial-gradient(600px 300px at 70% 40%, color-mix(in srgb, var(--laranja) 22%, transparent), transparent 70%), radial-gradient(400px 220px at 20% 90%, rgba(56, 189, 248, 0.10), transparent 70%), linear-gradient(180deg, #0E1117, #07090C); } /* crédito do modelo 3D: fica no rodapé da página, discreto */ #rodape-credito { flex-basis: 100%; text-transform: none; letter-spacing: .02em; opacity: .6; }