/* ============================================================ IPCN — style.css (TEMA ESCURO HARMONIZADO COM A LOGO) - Contraste/legibilidade garantidos - Header em duas linhas (logo + nome / menu abaixo) - Logo branca maior (150% via CSS) - Slider na HOME (banner dinâmico) - Hero Slim para páginas internas (banner fixo) - Inter + Montserrat (se já colocou no , perfeito) Compatível: Dreamweaver CS6 ============================================================ */ /* ===== RESET BÁSICO ===== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font-family: inherit; } /* ===== VARIÁVEIS (PALETA) ===== */ :root{ /* Base */ --bg: #0b0f14; /* noite neutra */ --bg-2: #121a22; /* superfícies */ --text: #e7eef7; --muted: rgba(231,238,247,.80); --soft: rgba(231,238,247,.62); /* Linhas / sombras */ --line: rgba(255,255,255,.14); --line-2: rgba(255,255,255,.08); --shadow: 0 14px 40px rgba(0,0,0,.42); /* Acentos (logo) */ --green: #0f5b45; /* verde principal */ --green-2: #18a07a; /* verde hover */ --copper: #9a6438; /* cobre (cruz) */ --copper-2: #c27a3f; /* cobre hover */ --steel: #7a8797; /* cinza */ --radius: 18px; /* Tipografia */ --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } /* ===== BASE / FUNDO ===== */ body{ font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: radial-gradient(1100px 650px at 15% 0%, rgba(15,91,69,.20), transparent 55%), radial-gradient(900px 600px at 85% 10%, rgba(154,100,56,.16), transparent 55%), radial-gradient(900px 600px at 45% 90%, rgba(122,135,151,.12), transparent 55%), var(--bg); color: var(--text); line-height: 1.55; } /* Garantia global de contraste: nada “preto no escuro” */ p, li, dd, dt, span, small, label, figcaption { color: var(--text); } h1, h2, h3, h4, h5, h6 { color: #ffffff; font-family: var(--font-display); } h1 { letter-spacing: -0.4px; } h2 { letter-spacing: -0.2px; } /* ===== LAYOUT ===== */ .container{ width: min(1160px, 92vw); margin: 0 auto; } /* ===== TEXTOS UTILITÁRIOS ===== */ .small { font-size: 13px; color: var(--muted); } .meta { font-size: 14px; color: var(--muted); } .kicker { font-size: 13px; color: var(--muted); letter-spacing: .3px; } .kicker b { color: rgba(231,238,247,.95); } /* ===== LINKS ===== */ a { color: rgba(231,238,247,.96); } a:hover { color: #ffffff; } /* ===== PILLS / PALAVRAS-CHAVE ===== Corrige o “colar” quando quebra linha */ .pillRow{ display: flex; flex-wrap: wrap; gap: 10px; /* PRINCIPAL: garante espaço entre linhas e colunas */ margin-top: 12px; align-items: center; } .pill{ display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: rgba(231,238,247,.92); white-space: nowrap; margin: 0; /* evita margens estranhas */ } /* fallback caso a estrutura não use .pillRow */ .pill + .pill { margin-left: 0; } /* evita colar via inline */ .pill { margin-right: 0; margin-bottom: 0; } /* ===== COMPONENTES ===== */ .card{ background: rgba(18,26,34,.72); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; color: var(--text); } .notice{ margin-top: 14px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid rgba(194,122,63,.38); background: rgba(154,100,56,.14); color: #ffffff; font-size: 14px; } .badge{ display: inline-block; font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(24,160,122,.40); background: rgba(24,160,122,.14); color: rgba(231,238,247,.98); } .sideCard{ background: rgba(18,26,34,.72); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; color: var(--text); } /* garante que nada dentro de cards fique “preto” */ .card *, .sideCard * { color: inherit; } /* ===== BOTÕES ===== */ .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: .2px; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: var(--text); cursor: pointer; transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, background .12s ease; } .btn:hover{ filter: brightness(1.06); transform: translateY(-1px); } .btn:active{ transform: translateY(0); } /* Primário = VERDE */ .btn.primary{ background: linear-gradient(180deg, var(--green-2), var(--green)); border-color: rgba(24,160,122,.55); box-shadow: 0 12px 24px rgba(15,91,69,.35); } .btn.primary:hover{ box-shadow: 0 16px 34px rgba(15,91,69,.45); } /* Destaque (antigo gold) = COBRE */ .btn.gold{ background: linear-gradient(180deg, var(--copper-2), var(--copper)); border-color: rgba(194,122,63,.55); color: #fff; box-shadow: 0 12px 24px rgba(154,100,56,.32); } .btn.gold:hover{ box-shadow: 0 16px 34px rgba(154,100,56,.42); } /* ===== SEÇÕES / TÍTULOS ===== */ .section{ padding: 44px 0; } .sectionHeader{ margin-bottom: 14px; } .sectionHeader h2{ margin: 0 0 6px; font-size: 22px; } .sectionHeader p{ margin: 0; color: var(--muted); } /* ===== GRIDS ===== */ .grid3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } /* ============================================================ HEADER — DUAS LINHAS (LOGO BRANCA + NOME / MENU ABAIXO) ============================================================ */ .topbar{ position: sticky; top: 0; z-index: 1000; background: rgba(11,15,20,.92); border-bottom: 1px solid var(--line-2); backdrop-filter: blur(6px); } /* Linha da marca */ .brandRow{ display: flex; justify-content: center; padding: 16px 0 8px; } .brand{ display: flex; align-items: center; gap: 14px; text-decoration: none; } /* LOGO: 150% maior (antes ~60px; agora 90px) */ .brand img{ height: 90px; /* <<< AUMENTO 150% */ width: auto; } .brand .title strong{ font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: .3px; color: #ffffff; white-space: nowrap; } /* Linha do menu */ .menuRow{ position: relative; display: flex; justify-content: center; padding: 6px 0 10px; border-top: 1px solid var(--line-2); } .nav{ display: flex; align-items: center; gap: 14px; } .nav a{ font-size: 14px; font-weight: 600; padding: 6px 10px; white-space: nowrap; color: var(--text); border-radius: 999px; transition: background .15s ease, filter .15s ease, transform .15s ease; } .nav a:hover{ background: rgba(255,255,255,.08); transform: translateY(-1px); } /* CTA do menu (Visite etc.) = COBRE */ .nav a.cta{ background: linear-gradient(180deg, var(--copper-2), var(--copper)); border: 1px solid rgba(194,122,63,.55); color: #fff; padding: 6px 14px; box-shadow: 0 10px 22px rgba(154,100,56,.32); } .nav a.cta:hover{ box-shadow: 0 14px 30px rgba(154,100,56,.42); } /* Burger (mobile) */ .burger{ display: none; font-size: 22px; background: none; border: none; color: var(--text); cursor: pointer; } /* ============================================================ BANNER DINÂMICO (HOME) — SLIDER ============================================================ */ .banner{ width: 100%; } .bannerWrap{ position: relative; overflow: hidden; border-bottom: 1px solid var(--line-2); } /* altura do banner */ .slides{ position: relative; height: 480px; } @media (max-width: 980px){ .slides{ height: 320px; } } @media (max-width: 520px){ .slides{ height: 280px; } } .slide{ position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.02); transition: opacity .6s ease, transform .8s ease; } .slide.is-active{ opacity: 1; transform: scale(1); } /* overlay para contraste do texto */ .slide::before{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,.66), rgba(0,0,0,.22)); } /* conteúdo */ .slideContent{ position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 10px; color: #fff; padding: 16px 0; max-width: 760px; } .slideTag{ display:inline-block; width: fit-content; font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.10); } .slideContent h2{ margin: 0; font-family: var(--font-display); font-size: 40px; line-height: 1.08; letter-spacing: -0.3px; color: #fff; } .slideContent p{ margin: 0; font-size: 16px; opacity: .95; color: rgba(255,255,255,.92); } @media (max-width: 980px){ .slideContent{ max-width: 92vw; } .slideContent h2{ font-size: 28px; } .slideContent p{ font-size: 15px; } } .slideActions{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } /* botões do banner */ .bannerBtn{ position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.35); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; display:flex; align-items:center; justify-content:center; transition: filter .15s ease, transform .15s ease; z-index: 5; } .bannerBtn:hover{ filter: brightness(1.12); } .bannerBtn.prev{ left: 14px; } .bannerBtn.next{ right: 14px; } @media(max-width: 980px){ .bannerBtn{ width: 40px; height: 40px; font-size: 26px; } } /* dots */ .dots{ position:absolute; left:0; right:0; bottom: 12px; display:flex; justify-content:center; gap: 8px; z-index: 6; } .dot{ width: 9px; height: 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.22); cursor:pointer; transition: transform .15s ease, background .15s ease; } .dot.is-active{ background: rgba(255,255,255,.85); transform: scale(1.15); } /* acessibilidade: reduz movimento */ @media (prefers-reduced-motion: reduce){ .slide{ transition: none; transform: none; } .bannerBtn{ transition: none; } } /* ============================================================ HERO (CONTEÚDO PRINCIPAL) ============================================================ */ .hero{ padding: 34px 0 24px; } .heroGrid{ display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; align-items: start; } .heroCard{ background: radial-gradient(900px 500px at 10% 10%, rgba(24,160,122,.18), transparent 55%), radial-gradient(700px 450px at 85% 15%, rgba(154,100,56,.16), transparent 55%), linear-gradient(180deg, rgba(18,26,34,.88), rgba(11,15,20,.88)); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; color: var(--text); } .heroCard h1{ margin: 8px 0 10px; font-family: var(--font-display); font-size: 28px; line-height: 1.18; color: #ffffff; } .heroActions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } /* ============================================================ HERO SLIM (BANNERS INTERNOS) ============================================================ */ .heroSlim{ position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow); margin: 18px auto 0; background: #111; /* fallback */ } .heroSlimInner{ min-height: 260px; display: flex; align-items: center; padding: 26px 22px; } @media (max-width: 980px){ .heroSlimInner{ min-height: 210px; padding: 22px 18px; } } @media (max-width: 520px){ .heroSlimInner{ min-height: 190px; padding: 18px 14px; } } /* imagem de fundo */ .heroSlim::before{ content:""; position:absolute; inset:0; background-image: var(--hero-img); background-size: cover; background-position: center; transform: scale(1.02); } /* overlay */ .heroSlim::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,.66), rgba(0,0,0,.20)); } /* conteúdo */ .heroSlimContent{ position: relative; color: #fff; max-width: 780px; } .heroSlimTag{ display:inline-block; width: fit-content; font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.10); margin-bottom: 10px; } .heroSlimTitle{ margin: 0 0 8px; font-family: var(--font-display); font-size: 34px; line-height: 1.08; letter-spacing: -0.3px; color: #fff; } .heroSlimText{ margin: 0; font-size: 15.5px; opacity: .95; color: rgba(255,255,255,.92); } .heroSlimActions{ display:flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } @media (prefers-reduced-motion: reduce){ .heroSlim::before{ transform: none; } } /* ============================================================ FOOTER ============================================================ */ .footer{ border-top: 1px solid var(--line-2); padding: 26px 0; background: rgba(0,0,0,.18); color: var(--text); } .footerGrid{ display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; align-items: start; } .footer a{ text-decoration: underline; text-decoration-color: rgba(231,238,247,.35); } .footer a:hover{ text-decoration-color: rgba(231,238,247,.75); } /* ============================================================ FORMULÁRIOS / TABELAS (caso existam) ============================================================ */ input, textarea, select{ background: rgba(255,255,255,.06); color: var(--text); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 10px 12px; } input::placeholder, textarea::placeholder{ color: rgba(231,238,247,.55); } table, th, td{ color: var(--text); border-color: rgba(255,255,255,.12); } th{ color: #ffffff; } /* ============================================================ RESPONSIVO ============================================================ */ @media (max-width: 980px){ .grid3{ grid-template-columns: 1fr; } .heroGrid{ grid-template-columns: 1fr; } .brandRow{ justify-content: flex-start; padding: 12px 0; } /* logo reduz no mobile para não “comer” o header */ .brand img{ height: 70px; } /* ~ -22% no mobile */ .menuRow{ justify-content: space-between; padding: 8px 0; } .burger{ display: block; } .nav{ display: none; flex-direction: column; gap: 6px; background: rgba(11,15,20,.98); border-top: 1px solid var(--line-2); position: absolute; top: 100%; left: 0; right: 0; padding: 14px; } .nav.active{ display: flex; } .nav a{ padding: 10px 6px; border-radius: 10px; } .footerGrid{ grid-template-columns: 1fr; } } @media (max-width: 520px){ .heroCard h1{ font-size: 24px; } } /* ============================================================ Última trava anti-“texto preto” (para casos em que algum elemento ficou com color fixo) ============================================================ */ [style*="color:#111"], [style*="color: #111"], [style*="color:#111827"], [style*="color: #111827"], [style*="color:black"], [style*="color: black"]{ color: var(--text) !important; } /* ============================================================ TRILHA DE CRESCIMENTO — organograma progressivo ============================================================ */ .growthTrack { margin-top: 14px; } .track{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; } /* Linha conectando os nós (desktop) */ .track::before{ content:""; position:absolute; left: 5%; right: 5%; top: 22px; height: 2px; background: linear-gradient(90deg, rgba(24,160,122,.65), rgba(194,122,63,.55)); opacity: .95; } /* Cada etapa */ .trackStep{ position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; } /* Nó numerado */ .node{ width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; font-weight: 800; font-family: var(--font-display); color: #fff; background: linear-gradient(180deg, var(--green-2), var(--green)); border: 1px solid rgba(24,160,122,.55); box-shadow: 0 14px 30px rgba(15,91,69,.35); position: relative; z-index: 2; } /* Último nó em cobre para “conclusão” */ .trackStep:last-child .node{ background: linear-gradient(180deg, var(--copper-2), var(--copper)); border-color: rgba(194,122,63,.55); box-shadow: 0 14px 30px rgba(154,100,56,.35); } /* Card da etapa */ .stepCard{ background: rgba(18,26,34,.72); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; color: var(--text); height: 100%; } .stepCard h3{ margin: 0 0 6px; font-family: var(--font-display); font-size: 15px; line-height: 1.2; color: #fff; } .stepCard p{ margin: 0; color: rgba(231,238,247,.85); font-size: 13.5px; } .stepLinks{ margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; } .stepLinks a{ font-size: 13px; color: rgba(231,238,247,.92); text-decoration: underline; text-decoration-color: rgba(231,238,247,.28); } .stepLinks a:hover{ text-decoration-color: rgba(231,238,247,.75); color: #fff; } /* ===== Responsivo: vira trilha vertical ===== */ @media (max-width: 980px){ .track{ grid-template-columns: 1fr; gap: 12px; } .track::before{ left: 22px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; background: linear-gradient(180deg, rgba(24,160,122,.65), rgba(194,122,63,.55)); } .trackStep{ flex-direction: row; align-items: flex-start; gap: 12px; } .stepCard{ flex: 1; } } /* Acessibilidade: reduzir movimento */ @media (prefers-reduced-motion: reduce){ .node{ box-shadow: none; } } /* ============================================================ SÉRIE DE MENSAGENS — mais visual (cards + capa + lista) ============================================================ */ .seriesHeader{ display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; } .seriesHeaderActions{ display: flex; gap: 10px; flex-wrap: wrap; } .seriesGrid{ display: grid; grid-template-columns: 1.35fr .65fr; gap: 14px; margin-top: 14px; } .seriesMain{ padding: 0; /* cover encosta */ overflow: hidden; } .seriesCover{ position: relative; height: 190px; background: radial-gradient(900px 500px at 15% 0%, rgba(24,160,122,.22), transparent 55%), radial-gradient(700px 450px at 85% 10%, rgba(194,122,63,.18), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border-bottom: 1px solid rgba(255,255,255,.10); } .seriesCoverBadge{ position: absolute; left: 14px; bottom: 14px; font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.25); color: rgba(255,255,255,.95); } .seriesBody{ padding: 16px; } .seriesMeta{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .seriesPill{ display: inline-flex; align-items: center; font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: rgba(231,238,247,.92); } .seriesTitle{ margin: 0 0 8px; font-family: var(--font-display); font-size: 22px; color: #fff; } .seriesText{ margin: 0; color: rgba(231,238,247,.86); font-size: 14.5px; } .seriesCtas{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .seriesList{ display: grid; gap: 12px; } .miniMsg{ padding: 14px; } .miniTag{ display: inline-block; font-size: 11px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(24,160,122,.35); background: rgba(24,160,122,.12); color: rgba(231,238,247,.95); margin-bottom: 10px; } .miniMsg h4{ margin: 0 0 6px; font-family: var(--font-display); font-size: 15px; color: #fff; } .miniMsg p{ margin: 0; color: rgba(231,238,247,.82); font-size: 13px; } /* Responsivo */ @media (max-width: 980px){ .seriesHeader{ align-items: flex-start; flex-direction: column; } .seriesGrid{ grid-template-columns: 1fr; } .seriesCover{ height: 170px; } } /* ============================================================ SÉRIE DE MENSAGENS — visual (cards + capa + lista) ============================================================ */ .seriesHeader{ display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; } .seriesHeaderActions{ display: flex; gap: 10px; flex-wrap: wrap; } .seriesGrid{ display: grid; grid-template-columns: 1.35fr .65fr; gap: 14px; margin-top: 14px; } .seriesMain{ padding: 0; overflow: hidden; } .seriesCover{ position: relative; height: 190px; background: radial-gradient(900px 500px at 15% 0%, rgba(24,160,122,.22), transparent 55%), radial-gradient(700px 450px at 85% 10%, rgba(194,122,63,.18), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border-bottom: 1px solid rgba(255,255,255,.10); } .seriesCover{ position: relative; height: 190px; background-image: linear-gradient( 90deg, rgba(0,0,0,.65), rgba(0,0,0,.35) ), url('../img/series/proverbios-serie-01.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; border-bottom: 1px solid rgba(255,255,255,.10); } .seriesBody{ padding: 16px; } .seriesMeta{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .seriesPill{ display: inline-flex; align-items: center; font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: rgba(231,238,247,.92); } .seriesTitle{ margin: 0 0 8px; font-family: var(--font-display); font-size: 22px; color: #fff; } .seriesText{ margin: 0; color: rgba(231,238,247,.86); font-size: 14.5px; } .seriesCtas{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .seriesList{ display: grid; gap: 12px; } .miniMsg{ padding: 14px; } .miniTag{ display: inline-block; font-size: 11px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(24,160,122,.35); background: rgba(24,160,122,.12); color: rgba(231,238,247,.95); margin-bottom: 10px; } .miniMsg h4{ margin: 0 0 6px; font-family: var(--font-display); font-size: 15px; color: #fff; } .miniMsg p{ margin: 0; color: rgba(231,238,247,.82); font-size: 13px; } /* Responsivo */ @media (max-width: 980px){ .seriesHeader{ align-items: flex-start; flex-direction: column; } .seriesGrid{ grid-template-columns: 1fr; } .seriesCover{ height: 170px; } } /* ============================================================ PROJETOS (HOME / PROJETOS) — cards separados ============================================================ */ .projectsGrid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; } .projectCard{ display: flex; flex-direction: column; gap: 10px; } .projectTop{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .projectPill{ display: inline-flex; align-items: center; font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: rgba(231,238,247,.92); } .projectTitle{ margin: 0; font-family: var(--font-display); font-size: 18px; color: #fff; } .projectText{ margin: 0; color: rgba(231,238,247,.86); font-size: 14px; } .projectMeta{ display: grid; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.10); } .projectMeta > div{ display: grid; gap: 2px; } .projectLabel{ font-size: 12px; color: rgba(231,238,247,.65); } .projectValue{ font-size: 13px; color: rgba(231,238,247,.92); } .projectActions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } /* Responsivo */ @media (max-width: 980px){ .projectsGrid{ grid-template-columns: 1fr; } } /* ============================================================ PROJETOS — grade responsiva (5 cards) ============================================================ */ .projectsGrid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; } /* Em telas médias, 2 colunas fica melhor para 5 itens */ @media (max-width: 1100px){ .projectsGrid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 980px){ .projectsGrid{ grid-template-columns: 1fr; } } .projectCard{ display: flex; flex-direction: column; gap: 10px; } .projectTop{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .projectPill{ display: inline-flex; align-items: center; font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: rgba(231,238,247,.92); } .projectTitle{ margin: 0; font-family: var(--font-display); font-size: 18px; color: #fff; } .projectText{ margin: 0; color: rgba(231,238,247,.86); font-size: 14px; } .projectMeta{ display: grid; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.10); } .projectMeta > div{ display: grid; gap: 2px; } .projectLabel{ font-size: 12px; color: rgba(231,238,247,.65); } .projectValue{ font-size: 13px; color: rgba(231,238,247,.92); } .projectActions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } /* ============================================================ ÍCONES SOCIAIS — monocromáticos, hover verde/cobre ============================================================ */ .socialLinks{ display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .socialBtn{ width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: rgba(231,238,247,.78); box-shadow: 0 10px 22px rgba(0,0,0,.35); transition: transform .12s ease, color .12s ease, border-color .12s ease, background .12s ease; } .socialBtn:hover{ transform: translateY(-1px); color: rgba(255,255,255,.92); border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.10); } .socialBtn:focus{ outline: 2px solid rgba(24,160,122,.55); outline-offset: 3px; } .socialSvg{ width: 20px; height: 20px; display: block; } /* opcional: dar “cor de marca” no hover */ .socialBtn:hover:nth-child(1){ color: var(--copper-2); } /* YouTube em cobre */ .socialBtn:hover:nth-child(2){ color: var(--green-2); } /* Spotify em verde */ .socialBtn:hover:nth-child(3){ color: rgba(231,238,247,.95); } /* Insta neutro */ @media (max-width: 520px){ .seriesCoverBadge{ font-size: 11px; padding: 6px 9px; } } /* ============================================================ COMUNIDADES — cards (Entre Amigos, Entre Jovens, Entre Elas) ============================================================ */ .communitiesGrid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; } .communityCard{ display: flex; flex-direction: column; gap: 10px; } .communityTop{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .communityPill{ display: inline-flex; align-items: center; font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: rgba(231,238,247,.92); } .communityTitle{ margin: 0; font-family: var(--font-display); font-size: 18px; color: #fff; } .communityText{ margin: 0; color: rgba(231,238,247,.86); font-size: 14px; } .communityMeta{ margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.10); display: grid; gap: 2px; } .communityKey{ font-size: 12px; color: rgba(231,238,247,.65); } .communityVal{ font-size: 13px; color: rgba(231,238,247,.92); } .communityActions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } /* responsivo */ @media (max-width: 1100px){ .communitiesGrid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 980px){ .communitiesGrid{ grid-template-columns: 1fr; } } /* ============================================================ CORREÇÃO: LINKS INATIVOS NO BANNER (heroSlim) ============================================================ */ /* garante que o conteúdo fique acima do overlay */ .heroSlimInner, .heroSlimContent{ position: relative; z-index: 2; } /* overlay NÃO pode capturar clique */ .heroSlim::before, .heroSlim::after{ pointer-events: none; } /* ============================== FIX: cliques no banner (slider) - garante que só o slide ativo captura clique ============================== */ .slide{ pointer-events: none; /* slides ocultos não capturam clique */ z-index: 0; } .slide.is-active{ pointer-events: auto; /* só o ativo é clicável */ z-index: 2; } /* Eventos importantes em lista vertical */ .eventsList{ display: grid; gap: 14px; margin-top: 14px; } /* ============================================================ ADD-ON — QUEM SOMOS (heroSlim + grids + fluxo de valores) Cole no FINAL do assets/css/style.css ============================================================ */ /* header wrapper (caso sua base esteja usando navwrap) */ .navwrap{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding: 12px 0; } .navwrap .title span{ display:block; font-size: 13px; color: rgba(231,238,247,.80); margin-top: 2px; } /* heroSlim (banner interno) */ .heroSlim{ border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow); background: linear-gradient(90deg, rgba(0,0,0,.70), rgba(0,0,0,.28)), var(--hero-img); background-size: cover; background-position: center; } .heroSlimInner{ padding: 22px 18px; } .heroSlimContent{ max-width: 860px; } .heroSlimTag{ display:inline-flex; align-items:center; font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.10); color: rgba(255,255,255,.95); } .heroSlimTitle{ margin: 10px 0 8px; font-family: var(--font-display); font-size: 34px; line-height: 1.08; color: #fff; } .heroSlimText{ margin: 0; color: rgba(255,255,255,.90); font-size: 15px; } .heroSlimActions{ display:flex; gap:10px; flex-wrap: wrap; margin-top: 12px; } /* textos utilitários ausentes em algumas páginas */ .lead{ font-size: 16px; color: rgba(231,238,247,.88); } .mini{ font-size: 13px; color: rgba(231,238,247,.80); } /* subnav */ .subnav{ display:flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .subnav a{ font-size: 13px; padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(231,238,247,.90); } .subnav a:hover{ background: rgba(255,255,255,.10); color: #fff; } /* slogan bar */ .sloganBar{ margin-top: 12px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid rgba(24,160,122,.28); background: rgba(24,160,122,.10); display:flex; align-items:center; gap: 12px; flex-wrap: wrap; } .sloganText{ font-family: var(--font-display); font-weight: 800; letter-spacing: .2px; color: rgba(255,255,255,.96); } /* chip (usado em várias páginas) */ .chip{ display:inline-flex; align-items:center; gap:6px; font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: rgba(231,238,247,.92); } .chip.green{ border-color: rgba(24,160,122,.40); background: rgba(24,160,122,.12); } .chip.gold{ border-color: rgba(194,122,63,.45); background: rgba(154,100,56,.14); } /* twoCols + callout + credo */ .twoCols{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 14px; align-items: start; } .callout{ background: radial-gradient(700px 450px at 10% 10%, rgba(24,160,122,.14), transparent 55%), radial-gradient(700px 450px at 85% 15%, rgba(154,100,56,.12), transparent 55%), rgba(18,26,34,.72); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; color: var(--text); } .credo{ background: rgba(18,26,34,.72); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; color: var(--text); } .credo ul{ margin: 10px 0 0; padding-left: 18px; } .credoStrong{ border-color: rgba(194,122,63,.30); background: rgba(18,26,34,.78); } /* Identidade: missão e visão */ .identityGrid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; } .identityCard{ padding: 18px; } .identityHead{ display:flex; align-items:center; justify-content:flex-start; margin-bottom: 10px; } /* estratégia */ .strategyCard{ padding: 18px; } .strategyTop{ display:flex; align-items:center; gap: 10px; flex-wrap: wrap; } /* Valores: fluxograma */ .flowTrack{ list-style:none; margin: 0; padding: 0; display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; position: relative; } .flowStep{ display:flex; gap: 12px; align-items:flex-start; } .flowNode{ width: 42px; height: 42px; border-radius: 999px; display:grid; place-items:center; font-weight: 800; font-family: var(--font-display); color:#fff; background: linear-gradient(180deg, var(--green-2), var(--green)); border: 1px solid rgba(24,160,122,.55); box-shadow: 0 14px 30px rgba(15,91,69,.28); flex: 0 0 auto; } .flowNode.gold{ background: linear-gradient(180deg, var(--copper-2), var(--copper)); border-color: rgba(194,122,63,.55); box-shadow: 0 14px 30px rgba(154,100,56,.28); } .flowCard{ background: rgba(18,26,34,.72); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; color: var(--text); width: 100%; } .flowCard h3{ margin: 0 0 6px; font-family: var(--font-display); font-size: 15px; color: #fff; } .flowCard p{ margin: 0; font-size: 13.5px; color: rgba(231,238,247,.85); } /* No que cremos: destaques */ .beliefHighlights{ display:grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.10); } .beliefHi p{ margin: 8px 0 0; color: rgba(231,238,247,.86); font-size: 13.5px; } /* Pastor */ .pastorHead{ display:flex; gap: 12px; align-items:flex-start; flex-wrap: wrap; } .pastorPhoto{ width: 140px; height: 160px; border-radius: 16px; border: 1px dashed rgba(255,255,255,.22); background: rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color: rgba(231,238,247,.70); font-size: 13px; flex: 0 0 auto; overflow:hidden; } .pastorPhoto img{ width:100%; height:100%; object-fit: cover; display:block; } .lattesLink{ text-decoration: underline; text-decoration-color: rgba(231,238,247,.35); } .lattesLink:hover{ text-decoration-color: rgba(231,238,247,.75); color: #fff; } /* lista de nomes */ .nameList{ margin: 10px 0 0; padding-left: 18px; } .nameList li{ margin: 6px 0; color: rgba(231,238,247,.88); } /* responsivo */ @media (max-width: 980px){ .heroSlimTitle{ font-size: 28px; } .twoCols{ grid-template-columns: 1fr; } .identityGrid{ grid-template-columns: 1fr; } .flowTrack{ grid-template-columns: 1fr; } .navwrap{ padding: 10px 0; } } /* ===== Forçar empilhamento (1 coluna) quando quiser ===== */ .twoCols.stackCols{ grid-template-columns: 1fr !important; } /* Opcional: reduzir “ar de vazio” em telas grandes */ .twoCols{ gap: 12px; } /* ===== HEADER em 2 linhas (marca acima, menu abaixo) ===== */ .brandRow{ display:flex; justify-content:center; padding: 14px 0 8px; } .menuRow{ position: relative; display:flex; align-items:center; justify-content:center; gap: 12px; padding: 8px 0 12px; border-top: 1px solid rgba(255,255,255,.08); } /* Ajuste fino da marca */ .brand{ display:flex; align-items:center; gap: 14px; } .brand img{ height: 90px; /* mantém sua logo maior */ width: auto; } .brand .title strong{ font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: .2px; color: #fff; white-space: nowrap; } .brand .title span{ display:block; font-size: 13px; color: rgba(231,238,247,.80); margin-top: 2px; } /* ===== Mobile: burger aparece, menu vira dropdown ===== */ @media (max-width: 980px){ .brandRow{ justify-content:flex-start; padding: 12px 0; } .brand img{ height: 70px; } .menuRow{ justify-content:flex-end; } .burger{ display: inline-flex; } .nav{ display:none; flex-direction:column; align-items:stretch; gap: 6px; background: rgba(11,15,20,.98); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.45); position:absolute; top: calc(100% + 10px); left: 0; right: 0; padding: 12px; z-index: 9999; } /* seu JS usa open OU active: aceitamos os dois */ .nav.open, .nav.active{ display:flex; } .nav a{ padding: 10px 12px; border-radius: 10px; } .nav a.cta{ text-align:center; } }