/* ========================================================= GrowthPath Online – UI Unificada (Claro/Editorial) Páginas: Home (.home), Captura (.capture), Bridge/Artigos (.article) ========================================================= */ /* --------- Tokens --------- */ :root{ --bg: #F8FAFC; --surface: #FFFFFF; --card: #FFFFFF; --cardStroke: #E5E7EB; --text: #0B1220; --muted: #4B5563; --primary: #2E90FA; /* Azul CTA */ --health: #14B8A6; /* Acento saúde */ --ring: rgba(46,144,250,.22); --radius: 16px; --w-wide: 1140px; /* Home / artigos */ --w-narrow: 980px; /* Captura / LP */ } /* --------- Reset mínimo --------- */ *{ box-sizing: border-box; } html, body{ margin: 0; } img{ display:block; max-width:100%; height:auto; } a{ color: var(--primary); text-decoration: none; } a:hover{ text-decoration: underline; } body{ background: var(--bg); color: var(--text); font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell, Noto Sans,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji"; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* --------- Containers --------- */ .wrap{ width: min(var(--w-wide), 92vw); margin-inline: auto; padding: 0 12px; } .container{ width: min(var(--w-wide), 92vw); margin-inline: auto; } .section{ padding: 2.2rem 0; } /* Modos por página (controlados no ) */ .home .container{ width: min(var(--w-wide), 92vw); } .capture .container{ width: min(var(--w-narrow), 92vw); } .article .container{ width: min(var(--w-wide), 92vw); } /* --------- Header --------- */ .site-header{ position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--cardStroke); } .site-header .wrap{ display: flex; align-items: center; gap: 16px; padding-block: 14px; } .brand img{ height: 22px; width: auto; } .top-nav{ margin-left: auto; } .top-nav .quiet{ color: var(--muted); border-bottom: 1px dotted var(--muted); text-decoration: none; } .top-nav .quiet:hover{ color: var(--text); border-bottom-color: var(--text); } /* --------- Hero (claro/editorial) --------- */ .hero{ background: linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%); border-bottom: 1px solid var(--cardStroke); } .hero-inner{ display:grid; gap: 2rem; align-items: center; padding: 2.2rem 0; } .hero-copy h1{ font-size: clamp(1.8rem, 2.4vw + 1rem, 2.6rem); line-height: 1.25; margin: 0 0 .6rem 0; } .sub{ color: var(--muted); margin: 0 0 1rem; } /* Home: dois colunas “texto | imagem” */ .home .hero-inner{ grid-template-columns: 1.2fr .8fr; } .home .hero-img{ border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.05); } /* Captura: dois colunas (será sobrescrito abaixo) */ .capture .hero-inner{ grid-template-columns: 1.15fr .85fr; align-items: start; } /* Responsivo padrão */ @media (max-width: 900px){ .home .hero-inner, .capture .hero-inner{ grid-template-columns: 1fr; } } /* --------- Tipografia utilitária --------- */ .h2{ font-size: clamp(1.25rem,2.4vw,1.5rem); margin: 0 0 .6rem; } .center{ text-align: center; } /* --------- Listas de aprendizado --------- */ .learn-list{ list-style: disc outside; padding-left: 1.2rem; margin: .25rem 0 0; max-width: 56ch; text-align: left !important; } .center .learn-list{ text-align: left !important; } /* --------- Botões --------- */ .btn{ display:inline-block; padding:.58rem .95rem; border-radius: 999px; font-weight: 700; border:1px solid transparent; text-decoration: none; } .btn-primary{ background: var(--primary); color:#fff; border-color:#1E80E9; } .btn-primary:hover{ filter: brightness(.96); } .btn-link{ background: transparent; color: var(--primary); border-color:#BFDBFE; } .btn-link:hover{ background:#EFF6FF; text-decoration: none; } /* --------- Cards & Grids (home/bridge) --------- */ .grid{ display:grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); } @media (max-width:1100px){ .grid{ grid-template-columns: repeat(3,1fr); } } @media (max-width:800px) { .grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width:560px) { .grid{ grid-template-columns: 1fr; } } .card{ background: var(--card); border: 1px solid var(--cardStroke); border-radius: var(--radius); padding: 1rem; display:flex; flex-direction: column; gap: .6rem; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .card:hover{ transform: translateY(-2px); border-color:#CBD5E1; box-shadow: 0 6px 20px rgba(0,0,0,.06); } .card-icon svg{ fill: var(--health); display:block; } .card-title{ margin:.1rem 0; font-size:1.05rem; } .card-desc{ color: var(--muted); margin:0 0 .6rem; } .card .btn{ margin-top: auto; align-self: flex-start; } /* --------- Cred-box --------- */ .cred-box{ border:1px solid #E5F0FF; background:#F8FAFF; border-radius: var(--radius); padding: 1rem; } .cred-title{ margin:.1rem 0 .5rem; } .cred-list{ margin:.2rem 0 0; padding-left:1.2rem; } /* --------- Formulário (LP) --------- */ .lead-form{ background: var(--surface); border:1px solid var(--cardStroke); border-radius: var(--radius); padding: 1rem; color: var(--text); box-shadow: 0 8px 24px rgba(2,20,50,.04); } .lead-form input{ width:100%; padding:.7rem .85rem; border-radius:10px; border:1px solid #CBD5E1; background:#fff; color: var(--text); font-size:16px; } .lead-form input:focus{ outline: 3px solid var(--ring); outline-offset: 2px; } /* --------- Rodapé --------- */ .site-footer{ border-top:1px solid var(--cardStroke); background: var(--surface); padding: 1.25rem 0; } .footer-links{ display:flex; gap:1rem; flex-wrap: wrap; margin:.4rem 0 .8rem; } .footer-links a{ color: var(--text); } .footer-links a:hover{ color: var(--primary); text-decoration: underline; } .legal{ color: var(--muted); font-size:.95rem; margin:.5rem 0 0; } .copyright{ color:#475569; font-size:.9rem; } /* --------- Acessibilidade --------- */ .skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } .skip-link:focus{ left:12px; top:12px; width:auto; height:auto; background:#fff; color:#000; padding:.5rem .75rem; border-radius:8px; } /* ===== Bridge / Articles – Tema claro editorial (patch) ===== */ .article { padding: 1.5rem 0 2.25rem; } .hero .eyebrow{ font-size:.9rem;color:var(--muted);letter-spacing:.02em;margin:0 0 .25rem; } .hero h1{ margin:.15rem 0 .6rem; font-size:clamp(1.8rem,2.5vw + 1rem,2.6rem); line-height:1.2;color:var(--text); } .hero .sub{color:var(--muted);max-width:75ch;margin:0 0 .75rem} .hero .lede{max-width:78ch;margin:.25rem 0 1rem} .hero-cta{margin:.5rem 0 1.25rem} .hero-cta .hint{color:var(--muted);display:inline-block;margin-left:.75rem} .hero-figure,.inline-figure{margin:1.25rem 0 1rem} .hero-figure img,.inline-figure img{width:100%;height:auto;border-radius:12px;display:block} .hero-figure figcaption,.inline-figure figcaption{color:var(--muted);font-size:.95rem;margin-top:.4rem} .body-text h2{margin:1.4rem 0 .5rem;font-size:clamp(1.2rem,1.2vw + .9rem,1.5rem)} .body-text p{margin:.6rem 0;max-width:80ch} .fact-box{ margin:1rem 0;padding:.9rem 1rem;border-left:4px solid var(--health);background:#ECFDF5;border-radius:0 12px 12px 0;color:var(--text)} .fact-box strong{color:#065F46} .editor-note{ margin:1.25rem 0;padding:1rem;border:1px solid #E5F0FF;background:#F8FAFF;border-radius:12px} .note-title{margin:0 0 .3rem;font-weight:700} .note-foot{color:var(--muted);font-size:.95rem;margin:.25rem 0 0} .final-cta{ margin:2rem 0 1.25rem;padding:1.1rem 1rem;border-top:1px solid #E5E7EB;background:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%);border-radius:12px} .final-cta .muted{color:var(--muted);margin:.25rem 0 1rem} .faq{margin:1.5rem 0 0} .faq h2{margin:0 0 .5rem} .faq details{background:#FFFFFF;border:1px solid #E5E7EB;border-radius:12px;padding:.75rem 1rem;margin:.5rem 0} .faq summary{cursor:pointer;font-weight:600;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary::before{content:'▸';display:inline-block;margin-right:.5rem;transform:translateY(-1px)} .faq details[open] summary::before{content:'▾'} .sticky-cta{ position:fixed;left:0;right:0;bottom:-120px;background:#0D1526;color:#fff;border-top:1px solid #16243B;box-shadow:0 -8px 24px rgba(0,0,0,.15);padding:.75rem 0;z-index:60;transition:bottom .35s ease} .sticky-cta .container{display:flex;gap:.75rem;align-items:center;justify-content:space-between} .sticky-cta .sticky-text{font-weight:600;font-size:.95rem} .sticky-cta.show{bottom:0} /* ===== Header list fix (legado) ===== */ .site-header .container{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 0; } .brand{ display:inline-flex; align-items:center; gap:.6rem; } .brand img{ height:20px; width:auto; display:block; } .main-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:1rem; align-items:center; } .main-nav a{ color:var(--text); text-decoration:none; line-height:1; padding:.25rem .15rem; } .main-nav a:hover{ color:var(--primary); text-decoration:underline; } .site-header ul li{ list-style:none; } /* ========================================================= CAPTURE PAGE OVERRIDES (somente body.capture) ========================================================= */ /* Layout em coluna, tudo centralizado */ .capture .hero-inner{ display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center; gap:2rem; } /* Headline/sub com largura confortável */ .capture .hero-copy{ width:100%; max-width: 760px; margin-inline:auto; } /* Trust chips (substitui bullets “perdidos”) */ .capture .trust-chips{ display:flex; flex-wrap:wrap; gap:.5rem .6rem; justify-content:center; list-style:none; margin: .4rem 0 1rem; padding:0; } .capture .trust-chips li{ position:relative; padding:.35rem .8rem .35rem 1.9rem; background:#ECFDF5; color:#065F46; border:1px solid #A7F3D0; border-radius:999px; font-size:.95rem; font-weight:600; } .capture .trust-chips li::before{ content:""; position:absolute; left:.65rem; top:50%; transform:translateY(-50%); width:14px; height:14px; border-radius:50%; background:#10B981; box-shadow: inset 0 0 0 3px #ECFDF5; } /* Card do formulário e imagem centralizados */ .capture .lead-card{ width:100%; max-width: 540px; margin-inline:auto; } .capture .hero-art{ width:100%; max-width: 540px; margin: 0 auto; } .capture .hero-img{ display:block; width:100%; height:auto; border-radius:12px; box-shadow: 0 8px 24px rgba(0,0,0,.06); } /* Container dos bullets inferiores um pouco mais estreito */ .capture .section .container{ width: min(var(--w-narrow), 92vw); } /* Em telas grandes, um pouco mais de respiro e limites */ @media (min-width: 1200px){ .capture .lead-card, .capture .hero-art{ max-width: 560px; } }