/* ========================================================= SEJUVE • Camada visual compartilhada (todas as páginas) Escopada em .sejuve-v2 (classe no ) para não afetar nada que ainda não tenha sido migrado. Carregar sempre DEPOIS de style.css. ========================================================= */ .sejuve-v2{ /* Paleta oficial + tons derivados só para luz/sombra */ --h-dark: #0f4f5c; --h-dark-deep: #0a3a45; --h-blue: #1f4e86; --h-blue-soft: #2a68ac; --h-blue-lite: #7fb2f0; --h-green: #137333; --h-green-lite:#1e8e3e; --h-ink: #10233b; --h-ink-soft: #51637d; --h-line: #e2e9f3; --h-surface: #ffffff; --h-bg: #f4f7fc; --h-shadow-sm: 0 1px 2px rgba(16,35,59,.06), 0 6px 16px rgba(16,35,59,.06); --h-shadow-md: 0 2px 4px rgba(16,35,59,.06), 0 18px 40px rgba(16,35,59,.10); --h-shadow-lg: 0 30px 60px rgba(16,35,59,.16); font-family: "Inter", "Segoe UI", Arial, sans-serif; background: var(--h-bg); color: var(--h-ink); -webkit-font-smoothing: antialiased; /* rodapé sempre no fim da tela, mesmo em páginas curtas */ display: flex; flex-direction: column; height: auto; /* anula o height:100% do style.css */ min-height: 100vh; } /* como o body virou flex, os blocos com "margin: 0 auto" precisam da largura cheia */ .sejuve-v2 > header, .sejuve-v2 > main, .sejuve-v2 > .page-wrap, .sejuve-v2 > .cta-strip, .sejuve-v2 > .migration-banner, .sejuve-v2 > .hero-wave, .sejuve-v2 > #menu-placeholder, .sejuve-v2 > #footer-placeholder{ width: 100%; flex-shrink: 0; } .sejuve-v2 > #footer-placeholder{ margin-top: auto; } .sejuve-v2 ::selection{ background: rgba(31,78,134,.18); } /* Fundo com luz difusa muito sutil */ .sejuve-v2::before{ content:""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 420px at 12% -5%, rgba(31,78,134,.10), transparent 60%), radial-gradient(700px 380px at 92% 8%, rgba(15,79,92,.09), transparent 62%); } /* ========================================================= Navegação — mesma barra em todas as páginas ========================================================= */ .sejuve-v2 .site-nav{ position: sticky; top: 0; z-index: 60; padding: 12px 20px; background: rgba(11,60,71,.82); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(255,255,255,.10); box-shadow: 0 10px 30px rgba(10,58,69,.18); } .sejuve-v2 .logo a{ letter-spacing: .2px; } .sejuve-v2 .menu{ gap: 2px; justify-content: center; } .sejuve-v2 .menu a{ border-radius: 999px; padding: 7px 10px; font-size: .95rem; transition: background .18s ease, color .18s ease; } .sejuve-v2 .menu > li > a:hover{ background: rgba(255,255,255,.12); } .sejuve-v2 .search{ flex: 0 1 auto; } .sejuve-v2 .search input{ border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.94); min-width: 0; width: 150px; max-width: 100%; } /* Só mantém o menu em uma única linha quando há largura de sobra */ @media (min-width: 1320px){ .sejuve-v2 .menu a{ white-space: nowrap; } .sejuve-v2 .logo a{ white-space: nowrap; } } /* ---------- Menu mobile: overlay de tela cheia ---------- */ @media (max-width: 900px){ /* IMPORTANTE: backdrop-filter na nav criaria um bloco de contenção e o menu (position:fixed) ficaria preso dentro da barra. Por isso, no mobile, a barra usa fundo sólido em vez de vidro fosco. */ .sejuve-v2 .site-nav{ -webkit-backdrop-filter: none; backdrop-filter: none; background: #0d4c5a; } .sejuve-v2 .menu{ position: fixed; inset: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 88px 24px 48px; margin: 0; overflow-y: auto; background: radial-gradient(700px 380px at 50% 0%, rgba(127,178,240,.18), transparent 60%), linear-gradient(165deg, var(--h-dark) 0%, var(--h-dark-deep) 55%, var(--h-blue) 100%); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .28s ease, transform .28s ease, visibility .28s; z-index: 105; } .sejuve-v2 .menu.open{ opacity: 1; visibility: visible; transform: none; } .sejuve-v2 .menu li{ width: min(420px, 100%); } .sejuve-v2 .menu a{ display: block; text-align: center; font-size: 1.1rem; font-weight: 600; letter-spacing: .01em; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); white-space: normal; } .sejuve-v2 .menu a:hover, .sejuve-v2 .menu a:active{ background: rgba(255,255,255,.16); } /* trava a rolagem do fundo e esconde o botão do chat enquanto o menu está aberto */ .sejuve-v2.menu-open{ overflow: hidden; } .sejuve-v2.menu-open #sejuve-chat-root{ display: none; } } /* ========================================================= Faixa de título das páginas internas (mesmo tratamento do hero da home, em versão compacta) ========================================================= */ /* .page-hero--custom = páginas que já têm cabeçalho próprio (ex.: quadra de areia) */ .sejuve-v2 .page-hero:not(.page-hero--custom){ position: relative; isolation: isolate; overflow: hidden; color: #fff; border-radius: 0 0 28px 28px; background: radial-gradient(900px 340px at 50% -60%, rgba(127,178,240,.28), transparent 62%), linear-gradient(160deg, var(--h-dark) 0%, #14556d 34%, var(--h-blue) 100%); box-shadow: 0 24px 50px rgba(15,79,92,.22); } .sejuve-v2 .page-hero:not(.page-hero--custom)::before{ content:""; position:absolute; inset:0; z-index:-1; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(80% 90% at 50% 20%, #000 20%, transparent 80%); mask-image: radial-gradient(80% 90% at 50% 20%, #000 20%, transparent 80%); } .sejuve-v2 .page-hero:not(.page-hero--custom) .page-hero-inner{ padding: clamp(30px, 5vw, 52px) 20px clamp(34px, 5vw, 56px); } .sejuve-v2 .page-title{ letter-spacing: -.015em; line-height: 1.15; text-shadow: 0 12px 30px rgba(0,0,0,.18); } /* Link discreto de volta, quando existir */ .sejuve-v2 .page-hero a{ color: #dbe9ff; } /* ========================================================= Conteúdo / cartões ========================================================= */ .sejuve-v2 .page-wrap{ padding: clamp(28px, 4vw, 44px) 20px 16px; } .sejuve-v2 .card{ border-radius: 18px; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--h-line); box-shadow: var(--h-shadow-sm); } /* cartões usados como área de resposta dinâmica não aparecem vazios */ .sejuve-v2 .card:empty{ display: none; } .sejuve-v2 .card h2, .sejuve-v2 .card h3{ letter-spacing: -.01em; color: var(--h-ink); } .sejuve-v2 .card h3{ margin-top: 26px; } .sejuve-v2 .card p{ line-height: 1.65; color: #22364f; } /* ========================================================= Botões ========================================================= */ .sejuve-v2 .btn{ border-radius: 14px; padding: 15px 20px; border: 1px solid transparent; cursor: pointer; font-family: inherit; font-size: 1rem; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .sejuve-v2 .btn-primary{ background: linear-gradient(145deg, var(--h-blue-soft), var(--h-blue)); border-color: transparent; box-shadow: 0 10px 24px rgba(31,78,134,.26), inset 0 1px 0 rgba(255,255,255,.22); } .sejuve-v2 .btn-primary:hover{ transform: translateY(-2px); opacity: 1; filter: brightness(1.05); box-shadow: 0 16px 32px rgba(31,78,134,.32), inset 0 1px 0 rgba(255,255,255,.22); } .sejuve-v2 .btn-primary:active{ transform: translateY(0); } .sejuve-v2 .btn-white{ background: #fff; border: 1px solid rgba(31,78,134,.30); box-shadow: var(--h-shadow-sm); } .sejuve-v2 .btn-white:hover{ transform: translateY(-2px); opacity: 1; box-shadow: var(--h-shadow-md); } .sejuve-v2 .btn-cta{ border-radius: 999px; border: 1px solid transparent; box-shadow: 0 12px 30px rgba(4,26,45,.28); } .sejuve-v2 .btn-cta:hover{ transform: translateY(-2px); opacity: 1; } .sejuve-v2 .cta-strip{ border-radius: 22px; margin: 26px auto; max-width: 1060px; background: radial-gradient(600px 240px at 50% -40%, rgba(127,178,240,.28), transparent 65%), linear-gradient(140deg, var(--h-dark) 0%, var(--h-blue) 100%); box-shadow: var(--h-shadow-lg); } /* ========================================================= Blocos auxiliares ========================================================= */ .sejuve-v2 .notice-box{ border-radius: 14px; border: 1px solid #cfe0fb; background: linear-gradient(180deg, #f2f7ff, #e9f1ff); padding: 16px 18px; } .sejuve-v2 .top-label{ border-radius: 14px; border: 1px solid #f2dda0; background: linear-gradient(180deg, #fff8e2, #fdf0c8); padding: 14px 16px; line-height: 1.55; } .sejuve-v2 .document-link{ border-radius: 16px; border: 1px solid var(--h-line); background: #fff; box-shadow: var(--h-shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .sejuve-v2 .document-link:hover{ transform: translateY(-3px); border-color: rgba(31,78,134,.28); box-shadow: var(--h-shadow-md); background: #fff; } .sejuve-v2 .social-btn{ border-radius: 999px; padding: 11px 18px; border: 1px solid rgba(31,78,134,.16); background: #fff; box-shadow: var(--h-shadow-sm); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .sejuve-v2 .social-btn:hover{ transform: translateY(-2px); background: #f4f8ff; box-shadow: var(--h-shadow-md); } .sejuve-v2 .contemplados-table-wrap, .sejuve-v2 .contemplado-card{ border-radius: 16px; } /* ========================================================= Rodapé ========================================================= */ .sejuve-v2 .site-footer{ margin-top: 40px; background: linear-gradient(160deg, var(--h-dark) 0%, var(--h-dark-deep) 100%); border-top: 1px solid rgba(255,255,255,.08); } /* ========================================================= Movimento reduzido ========================================================= */ @media (prefers-reduced-motion: reduce){ .sejuve-v2 *, .sejuve-v2 *::before, .sejuve-v2 *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }