/* ========================================================= Unilipto - Hero enhancements + WhatsApp buttons (stack) Place this file at: assets/css/hero-enhancements.css Include in : ========================================================= */ .hero{position:relative;overflow:hidden} .hero::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,.15) 72%,rgba(0,0,0,.28) 100%); z-index:0 } .hero .hero-content,.hero .hero-title,.hero .hero-subtitle,.hero .hero-cta{position:relative;z-index:1} /* Entrada */ @keyframes ulp-fadeSlideUp{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:translateY(0)}} .reveal{opacity:0;animation:ulp-fadeSlideUp .8s ease forwards;will-change:transform,opacity} .reveal.d1{animation-delay:.05s}.reveal.d2{animation-delay:.18s}.reveal.d3{animation-delay:.32s} /* WhatsApp stack */ #whatsStack{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:6px;z-index:1000} #whatsStack.stack-tight{gap:0} #whatsStack a.wh-btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:1;padding:10px 14px;border-radius:14px;background:#16a34a;color:#fff;text-decoration:none;box-shadow:0 6px 14px rgba(0,0,0,.18);transition:transform .12s ease,opacity .12s ease,box-shadow .12s ease} #whatsStack a.wh-btn:hover{transform:translateY(-1px);box-shadow:0 10px 18px rgba(0,0,0,.22);opacity:.98} #whatsStack.stack-tight a.wh-btn{border-radius:0} #whatsStack.stack-tight a.wh-btn:first-child{border-top-left-radius:16px;border-top-right-radius:16px} #whatsStack.stack-tight a.wh-btn:last-child{border-bottom-left-radius:16px;border-bottom-right-radius:16px} #whatsStack.stack-tight a.wh-btn+a.wh-btn{margin-top:0;border-top:1px solid rgba(255,255,255,.25)} #whatsStack a.wh-btn .ico{width:18px;height:18px;display:inline-block} @keyframes ulp-pulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(34,197,94,.42)}70%{transform:scale(1.03);box-shadow:0 0 0 12px rgba(34,197,94,0)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(34,197,94,0)}} #whatsStack.pulse a.wh-btn{animation:ulp-pulse 1.6s ease-in-out 0s 3} @media (max-width:420px){#whatsStack a.wh-btn{font-size:13px;padding:9px 12px}#whatsStack{right:12px;bottom:12px}} /* ===== HERO UNILIPTO - AJUSTE DE ESPAÇOS ===== */ .hero .hero-title { margin-bottom: 8px; /* espaço menor entre título e subtítulo */ } .hero .hero-subtitle { margin-top: 0; margin-bottom: 10px; /* reduzido */ } .hero .hero-cta { margin-top: 0; padding: 10px 22px; font-size: 15px; line-height: 1.2; border-radius: 28px; background: #14532d; color: #fff; font-weight: 600; display: inline-block; transition: transform 0.12s ease, box-shadow 0.12s ease; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18); } /* mesmo efeito suave do botão WhatsApp */ .hero .hero-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22); opacity: 0.98; } /* ===== MOBILE ===== */ @media (max-width: 600px) { .hero .hero-title { font-size: 22px; /* mantém destaque sem quebrar */ } .hero .hero-subtitle { font-size: 16px; margin-bottom: 8px; } .hero .hero-cta { font-size: 14px; padding: 9px 18px; } }