/* ============================================================ ENHANCE.CSS — Camada de refinamento visual Linkar DEPOIS do style.css no . Remove este link para voltar ao visual original. ============================================================ */ /* ------------------------------------------------------------ 1. TEXTURA DE LINHO — aplicada ao body inteiro SVG inline em base64, sem requisição externa. Padrão de fibras finíssimas que dá materialidade ao bege. ------------------------------------------------------------ */ body { background-color: var(--bege); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.49 0 0 0 0 0.42 0 0 0 0 0.30 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; } /* ------------------------------------------------------------ 2. GRADIENTE SUAVE NAS SEÇÕES CLARAS Movimento vertical quase imperceptível entre os dois beges. A textura do body aparece por transparência. ------------------------------------------------------------ */ #hero, #entregaveis, #oferta { background-color: transparent; background-image: linear-gradient( 175deg, var(--bege) 0%, #F1EADD 55%, var(--bege-escuro) 100% ); } #para-quem-e, #certificado { background-color: transparent; background-image: linear-gradient( 175deg, var(--bege-escuro) 0%, #EFE8D9 60%, var(--bege) 100% ); } /* ------------------------------------------------------------ 3. PROFUNDIDADE NAS SEÇÕES ESCURAS Vinheta radial sutil + brilho dourado no topo. Tira o "chapado" do azul marinho sólido. ------------------------------------------------------------ */ #area-membros, #frases { position: relative; background-color: #0D2340; background-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201, 168, 76, 0.10), transparent 70%), radial-gradient(ellipse 120% 80% at 50% 120%, rgba(8, 18, 38, 0.6), transparent 60%); } /* ------------------------------------------------------------ 4. CANTOS DOURADOS DECORATIVOS Molduras abertas nos cantos das seções de destaque. Detalhe editorial de revista de luxo. ------------------------------------------------------------ */ .corner-frame { position: relative; } .corner-frame::before, .corner-frame::after { content: ''; position: absolute; width: 56px; height: 56px; pointer-events: none; z-index: 3; opacity: 0.55; } .corner-frame::before { top: 28px; left: 28px; border-top: 1px solid var(--dourado); border-left: 1px solid var(--dourado); } .corner-frame::after { bottom: 28px; right: 28px; border-bottom: 1px solid var(--dourado); border-right: 1px solid var(--dourado); } /* ------------------------------------------------------------ 5. REFINAMENTO DOS CARDS — Home Staging Afetivo Sombra suave e elevação no hover. Profundidade real. ------------------------------------------------------------ */ .staging-card { box-shadow: 0 2px 16px rgba(13, 35, 64, 0.06); transition: transform 0.4s ease, box-shadow 0.4s ease; } .staging-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(13, 35, 64, 0.12); } /* ------------------------------------------------------------ 6. CARDS DA ÁREA DE MEMBROS — brilho na borda ao passar ------------------------------------------------------------ */ .am-card { transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } .am-card:hover { transform: translateY(-4px); border-color: rgba(201, 168, 76, 0.55); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); } /* ------------------------------------------------------------ 7. IMAGENS DOS ENTREGÁVEIS — elevação sutil ------------------------------------------------------------ */ .ent-img { box-shadow: 0 8px 28px rgba(13, 35, 64, 0.12); transition: transform 0.4s ease, box-shadow 0.4s ease; } .ent-img:hover { transform: scale(1.015); box-shadow: 0 16px 40px rgba(13, 35, 64, 0.18); } /* ------------------------------------------------------------ 8. CTA DA OFERTA — brilho dourado pulsante sutil ------------------------------------------------------------ */ .oferta-cta { box-shadow: 0 4px 20px rgba(201, 168, 76, 0.35); } .oferta-cta:hover { box-shadow: 0 8px 28px rgba(201, 168, 76, 0.5); } /* ------------------------------------------------------------ 9. LINHA DE LUZ DOURADA — separadores de seção mais vivos ------------------------------------------------------------ */ .section-divider { height: 1px; opacity: 1; background: linear-gradient( 90deg, transparent, rgba(201, 168, 76, 0.15), var(--dourado), rgba(201, 168, 76, 0.15), transparent ); } /* ------------------------------------------------------------ PERFORMANCE — desativa efeitos custosos no mobile ------------------------------------------------------------ */ @media (max-width: 480px) { .corner-frame::before, .corner-frame::after { width: 36px; height: 36px; top: 16px; left: 16px; } .corner-frame::after { bottom: 16px; right: 16px; top: auto; left: auto; } }