própria porque assim vale para * TODA página que carrega esta folha, sem tocar em 25 arquivos HTML — e uma * página nova nasce com o efeito. Quem NÃO deve ter (questionário e * relatórios) marca ``; é a lista logo abaixo. * * z-index -1 põe a camada acima do gradiente do body e atrás do conteúdo. * O `inset` negativo é maior que o blur: sem isso a borda desfocada apareceria * como uma faixa clara nos cantos da viewport. * * Cores em hex, e não em oklch como no original: as variáveis entram dentro de * `background-image`, então um navegador que não entenda oklch invalidaria a * declaração inteira e o efeito sumiria — não haveria para onde cair. */ :root { --aurora-veil: #e8f3ff; /* véu quase branco, o que "corta" as faixas */ --aurora-1: #8fc4ff; /* azul claro */ --aurora-2: var(--brand-2); --aurora-3: var(--ibelong-blue); --aurora-4: var(--brand); } @keyframes aurora { from { background-position: 50% 50%, 50% 50%; } to { background-position: 350% 50%, 350% 50%; } } body::before { content: ''; position: fixed; inset: -40px; z-index: -1; pointer-events: none; background-image: repeating-linear-gradient( 100deg, var(--aurora-veil) 0%, var(--aurora-veil) 7%, transparent 10%, transparent 12%, var(--aurora-veil) 16% ), repeating-linear-gradient( 100deg, var(--aurora-1) 10%, var(--aurora-2) 20%, var(--aurora-3) 30%, var(--aurora-4) 40%, var(--aurora-1) 50% ); background-size: 300% 200%, 200% 200%; background-position: 50% 50%, 50% 50%; filter: blur(16px) saturate(115%); opacity: 0.45; /* Concentra a luz no alto à direita e some antes de chegar ao texto. Blur * maior que este apaga as faixas e sobra só um borrão azul sem desenho. */ -webkit-mask-image: radial-gradient(ellipse at 90% 0%, #000 20%, transparent 85%); mask-image: radial-gradient(ellipse at 90% 0%, #000 20%, transparent 85%); animation: aurora 60s linear infinite; } /* Questionário e relatórios: fundo limpo. Quem responde precisa de foco, e * relatório é peça de leitura longa — e vira PDF. */ body.no-aurora::before { content: none; } /* Numa tela estreita e alta a elipse do mask cresce junto com a caixa e acaba * lavando a tela inteira, comendo o contraste do texto. Aqui ela ganha altura * fixa (45%) e vira o que deveria ser: um brilho no topo. */ @media (max-width: 720px) { body::before { opacity: 0.3; -webkit-mask-image: radial-gradient(ellipse 140% 45% at 90% 0%, #000 10%, transparent 80%); mask-image: radial-gradient(ellipse 140% 45% at 90% 0%, #000 10%, transparent 80%); } } @media (prefers-reduced-motion: reduce) { body::before { animation: none; } } @media print { body::before { display: none; } } /* Títulos em serifa elegante; rótulos em geométrica. */ h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; } .eyebrow, .pop-badge, .nav, .stat .lbl, .pillar .num, .demo-eyebrow, .demo-score-lbl, .badge, .section-eyebrow { font-family: var(--font-label); } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } .wrap { max-width: 1060px; margin: 0 auto; padding: 26px 20px 90px; } .wrap-narrow { max-width: 860px; } /* ---------- Header ---------- */ .site-header { display: flex; align-items: center; gap: 14px; padding: 10px 0 6px; } .logo { height: 68px; width: auto; object-fit: contain; flex-shrink: 0; } .brand { display: flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none; flex-shrink: 0; } .brand:hover { text-decoration: none; } .brand .brand-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ibelong-blue); white-space: nowrap; } .site-header h1 { font-size: 1.02rem; margin: 0; letter-spacing: .2px; } .site-header p { margin: 2px 0 0; color: var(--muted); font-size: .84rem; } .nav { display: flex; gap: 26px; margin: 0 auto; } .nav a { color: var(--muted); font-size: .92rem; font-weight: 500; letter-spacing: .2px; padding: 4px 0; position: relative; } .nav a:hover { color: var(--brand); text-decoration: none; } .site-header .header-cta { margin-left: auto; } @media (max-width: 820px) { .nav { display: none; } .site-header .header-cta { margin-left: auto; } } /* ---------- Hero ---------- */ .hero { text-align: center; padding: 46px 0 8px; } .eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brand-ink); background: rgba(47, 107, 237, 0.09); border: 1px solid var(--border-strong); padding: 6px 14px; border-radius: 999px; margin-bottom: 22px; } .hero h2, .hero h1 { font-family: var(--font-display); font-size: clamp(2.1rem, 5vw, 3.2rem); margin: 0 0 16px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; } .hero h2 .grad, .hero h1 .grad { background: linear-gradient(115deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero h1 em, .hero h2 em { font-style: italic; color: var(--brand); font-weight: 500; } .hero p.lead { color: var(--muted); max-width: 620px; margin: 0 auto 30px; font-size: 1.12rem; } .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* Hero em duas colunas (texto + card de exemplo) */ .hero-split { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 48px; align-items: center; text-align: left; padding: 40px 0 20px; } .hero-split .eyebrow { margin-bottom: 20px; } .hero-split h1 { font-size: clamp(2.3rem, 4.6vw, 3.5rem); } .hero-split .lead { margin: 0 0 26px; } .hero-split .hero-actions { justify-content: flex-start; } .hero-note { color: var(--muted); font-size: .86rem; margin: 16px 0 0; } @media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; gap: 30px; text-align: center; padding-top: 20px; } .hero-split .hero-actions { justify-content: center; } .hero-split .eyebrow { margin-left: auto; margin-right: auto; } } /* Card de exemplo (preview de relatório) */ .demo-card { background: var(--card); border: 1px solid var(--border-strong); border-radius: 22px; box-shadow: var(--shadow-lg); padding: 26px 26px 20px; } .demo-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 20px; } .demo-eyebrow { font-size: .68rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); } .demo-title { font-family: var(--font-display); font-size: 1.28rem; margin: 4px 0 0; font-weight: 600; } .demo-score { text-align: right; } .demo-score-num { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; color: var(--brand); line-height: 1; display: block; } .demo-score-lbl { font-size: .64rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); } .demo-rows { display: flex; flex-direction: column; gap: 15px; } .demo-row .demo-row-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .demo-row .demo-name { font-weight: 600; font-size: .92rem; } .demo-row .demo-pct { font-family: var(--font-label); font-size: .82rem; color: var(--muted); } .demo-bar { height: 7px; border-radius: 999px; background: #e7eefb; overflow: hidden; } .demo-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); } .demo-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); font-size: .82rem; color: var(--muted); } .demo-foot a { font-weight: 600; } /* ---------- A marca animada (hero da home) ---------- * * O logo é um desenho de linha preta sobre fundo transparente, então em vez de * exibi-lo como ele entra como MÁSCARA: o elemento é um retângulo pintado * de gradiente, e a máscara recorta esse gradiente no formato do traço. O que * se vê é a linha do logo carregando a cor — e, como o gradiente desliza, a cor * corre ao longo da linha, no mesmo espírito da aurora do fundo. * * Por isso os tons aqui são cheios, e não lavados como os da aurora: a linha é * fina, e cor clara demais sobre um fundo claro faria o traço sumir em trechos, * dando a impressão de desenho quebrado. O tom mais escuro (--text) garante que * sempre haja contraste em alguma parte do percurso. */ @keyframes aurora-mark { from { background-position: 50% 0%; } to { background-position: 50% 100%; } } .logo-mark { height: clamp(300px, 42vw, 470px); /* O gradiente corre quase na vertical porque o desenho é alto e estreito: a * 100°, como no fundo, a faixa de cor atravessaria a largura — que aqui é * pouca — e a linha inteira mudaria de cor de uma vez, em bloco. Inclinado * assim, dá para ver vários tons ao mesmo tempo ao longo do traço. */ background-image: repeating-linear-gradient( 165deg, var(--text) 0%, var(--brand) 9%, var(--ibelong-blue) 18%, var(--brand-2) 27%, var(--brand) 36%, var(--text) 45% ); background-size: 100% 300%; background-position: 50% 0%; -webkit-mask: url('/img/logo-icon.png') center / contain no-repeat; mask: url('/img/logo-icon.png') center / contain no-repeat; animation: aurora-mark 14s linear infinite; } @media (prefers-reduced-motion: reduce) { .logo-mark { animation: none; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 9px; border: none; cursor: pointer; padding: 14px 26px; border-radius: 999px; font-family: var(--font-ui); font-size: 1rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 12px 26px rgba(47, 107, 237, 0.30); transition: transform .08s ease, box-shadow .18s ease, filter .15s ease; text-decoration: none; } .btn:hover { filter: brightness(1.05); transform: translateY(-1px); text-decoration: none; box-shadow: 0 16px 32px rgba(47, 107, 237, 0.38); } .btn:active { transform: translateY(0); } .btn.large { padding: 16px 32px; font-size: 1.05rem; } .btn.secondary { background: #fff; border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); color: var(--text); } .btn.secondary:hover { filter: none; background: var(--card-2); } .header-cta { padding: 11px 22px; font-size: .92rem; } .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; } /* ---------- Cards ---------- */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; margin: 22px 0; } .card h3 { margin: 0 0 6px; font-size: 1.24rem; letter-spacing: -0.2px; } .card .sub { color: var(--muted); margin: 0 0 18px; } .section-eyebrow { display: block; text-align: center; font-size: .72rem; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--brand); margin: 56px 0 8px; } .section-title { text-align: center; margin: 8px 0 6px; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 600; } .section-title.first { margin-top: 40px; } .section-sub { text-align: center; color: var(--muted); margin: 0 auto 26px; max-width: 580px; font-size: 1.02rem; } /* ---------- Pilares ---------- */ .grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 26px 0; } .pillar { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 16px; box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .18s ease; } .pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .pillar .num { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: .82rem; font-weight: 700; color: var(--brand); background: rgba(47, 107, 237, 0.09); border: 1px solid var(--border-strong); margin-bottom: 12px; } .pillar h4 { margin: 0 0 5px; font-size: 1rem; } .pillar p { margin: 0; color: var(--muted); font-size: .82rem; } /* ---------- Órbita das dimensões ---------- */ .orbital { position: relative; height: 460px; margin: 20px 0 8px; border-radius: 26px; background: radial-gradient(620px 320px at 50% 42%, rgba(91, 140, 255, 0.34), transparent 68%), linear-gradient(160deg, #12274f 0%, #0a1730 100%); box-shadow: var(--shadow-lg); border: 1px solid rgba(120, 160, 230, 0.18); overflow: hidden; } .orbital-ring { position: absolute; top: 50%; left: 50%; width: 320px; height: 320px; margin: -160px 0 0 -160px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; } .orbital-core { position: absolute; top: 50%; left: 50%; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%; background: linear-gradient(135deg, #7db0ff, #2f6bed 55%, #1e4fb8); display: grid; place-items: center; z-index: 6; animation: corePulse 2.6s ease-in-out infinite; } .orbital-core span { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); } .orbital-core::before, .orbital-core::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); animation: orbPing 2.6s ease-out infinite; } .orbital-core::after { inset: -18px; animation-delay: 0.9s; } @keyframes corePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } } @keyframes orbPing { 0% { transform: scale(0.85); opacity: 0.7; } 80%, 100% { transform: scale(2); opacity: 0; } } .orbital-nodes { position: absolute; inset: 0; } .orbital-node { position: absolute; top: 50%; left: 50%; will-change: transform; transition: opacity .4s ease; } .orbital-ball { position: relative; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: rgba(255, 255, 255, 0.72); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: inset 0 0 14px -8px #fff; backdrop-filter: blur(4px); transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease; } .orbital-ball svg { width: 22px; height: 22px; } .orbital-ball::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); } .orbital-node:hover, .orbital-node.active { z-index: 300 !important; } .orbital-node:hover .orbital-ball, .orbital-node.active .orbital-ball { transform: scale(1.16); color: #14182b; background: #fff; border-color: #fff; box-shadow: 0 0 26px 1px rgba(255, 255, 255, 0.35); } .node-pop { position: absolute; top: 66px; left: 50%; transform: translateX(-50%) translateY(8px); width: 236px; padding: 15px 17px; border-radius: 15px; background: rgba(16, 18, 32, 0.94); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.18); text-align: left; color: #fff; opacity: 0; visibility: hidden; transition: opacity .22s ease, transform .22s ease; z-index: 400; pointer-events: none; box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55); } .orbital-node.flip .node-pop { top: auto; bottom: 66px; transform: translateX(-50%) translateY(-8px); } .orbital-node:hover .node-pop, .orbital-node.active .node-pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .node-pop .pop-badge { display: inline-block; font-size: .64rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.18); margin-bottom: 8px; } .node-pop strong { display: block; font-size: 1.02rem; } .node-pop em { display: block; font-style: normal; font-size: .78rem; color: rgba(255, 255, 255, 0.55); margin: 1px 0 7px; font-weight: 600; } .node-pop p { margin: 0; font-size: .82rem; line-height: 1.5; color: rgba(255, 255, 255, 0.78); } @media (max-width: 620px) { .orbital { height: 400px; } .orbital-ring { width: 240px; height: 240px; margin: -120px 0 0 -120px; } .node-pop { width: 200px; } } /* ---------- Passos ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0; } .step { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 22px; box-shadow: var(--shadow-sm); } .step .step-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); margin-bottom: 12px; } .step h4 { margin: 0 0 6px; font-size: 1.05rem; } .step p { margin: 0; color: var(--muted); font-size: .9rem; } /* ===================================================================== HUB DE SOLUÇÕES (home) Uma seção por público (individuo/gestores/recrutadores), com um grid de cards — mesma fonte de dados do mega-menu (window.NavCatalog), mesma linguagem visual (.pill-live/.pill-soon), só que em formato de vitrine. ===================================================================== */ .hub-group { margin: 36px 0; } .hub-group-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; flex-wrap: wrap; } .hub-group-head h3 { margin: 0; font-size: 1.3rem; } .hub-group-head p { margin: 0; color: var(--muted); font-size: .92rem; } .hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .hub-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 16px; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } a.hub-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); text-decoration: none; } .hub-card.is-soon { cursor: default; opacity: .75; } .hub-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .hub-ico { flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--border-strong); background: var(--card-2); color: var(--brand); } .hub-ico svg { width: 20px; height: 20px; } .hub-card h4 { margin: 0; font-size: 1.05rem; } .hub-card p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; } /* ---------- Grid de metodologia (dimensões/eixos de um produto) ---------- */ .method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 20px 0; } .method-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; } .method-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .method-card .num { font-family: var(--font-label); font-size: .74rem; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .6px; } .method-card h4 { margin: 8px 0 6px; font-size: 1.05rem; } .method-card p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; } @media (max-width: 820px) { .hub-grid, .method-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .hub-grid, .method-grid { grid-template-columns: 1fr; } } /* ---------- Formulários ---------- */ label { display: block; font-weight: 600; margin: 16px 0 6px; font-size: .92rem; } input[type=text], input[type=email], input[type=password], textarea, select.select { width: 100%; padding: 13px 15px; border-radius: 11px; border: 1px solid var(--border-strong); background: #fff; color: var(--text); font-size: 1rem; font-family: inherit; } select.select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232f6bed' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px; } input::placeholder, textarea::placeholder { color: #aab0c8; } input:focus, textarea:focus, select.select:focus { outline: 3px solid rgba(47, 107, 237, 0.22); border-color: var(--brand); } .link-box { display: flex; gap: 8px; align-items: center; background: var(--card-2); border: 1px solid var(--border-strong); border-radius: 11px; padding: 6px 6px 6px 14px; margin-top: 6px; } .link-box input { border: none; background: transparent; padding: 8px 0; } .link-box input:focus { outline: none; } .copy-btn { white-space: nowrap; border: none; cursor: pointer; background: var(--brand); color: #fff; padding: 10px 15px; border-radius: 8px; font-weight: 700; font-size: .9rem; } .copy-btn:hover { filter: brightness(1.05); } .muted { color: var(--muted); } .small { font-size: .85rem; } .center { text-align: center; } .hidden { display: none !important; } .spacer { height: 12px; } .badge { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .3px; } .badge.forte { background: rgba(23, 185, 138, .14); color: #0e8f68; } .badge.saudavel { background: rgba(91, 124, 250, .14); color: #3c5fe0; } .badge.atencao { background: rgba(240, 160, 32, .16); color: #b9760a; } .badge.critico { background: rgba(239, 77, 107, .14); color: #d62d4e; } .notice { padding: 13px 16px; border-radius: 11px; margin: 14px 0; border: 1px solid var(--border-strong); background: var(--card-2); } .notice.error { border-color: rgba(239,77,107,.4); background: rgba(239,77,107,.08); color: #b02a44; } .notice.ok { border-color: rgba(23,185,138,.4); background: rgba(23,185,138,.08); color: #0e7a5a; } /* ---------- Questionário (matriz) ---------- */ .scale-legend { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; box-shadow: var(--shadow-sm); } .scale-legend .legend-title { margin-right: auto; font-weight: 700; font-size: .9rem; } .scale-legend .legend-item { color: var(--muted); font-size: .78rem; display: flex; align-items: center; gap: 5px; } .scale-legend .legend-item b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--card-2); color: var(--text); font-size: .74rem; } .q-dimension { padding: 22px 24px; } .q-dimension > .dim-head { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; } .q-dimension .dot { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-2)); } .q-dimension .dim-head h3 { margin: 0; font-size: 1.18rem; } .q-dimension .dim-sub { color: var(--muted); margin: 0 0 8px; font-size: .9rem; } .q-row { display: flex; align-items: center; gap: 18px; padding: 14px 4px; border-top: 1px solid var(--border); } .q-row .q-label { flex: 1; font-size: .94rem; color: var(--text); } .q-row .q-label .q-num { color: var(--muted); font-weight: 700; margin-right: 6px; } .likert { display: flex; gap: 8px; flex-shrink: 0; } .likert .opt { position: relative; } .likert .opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .likert .opt span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; border: 1.5px solid var(--border-strong); background: #fff; color: var(--muted); font-weight: 700; font-size: .96rem; cursor: pointer; transition: all .12s ease; } .likert .opt:hover span { border-color: var(--brand); color: var(--brand); } .likert .opt input:checked + span { border-color: transparent; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 6px 14px rgba(91, 124, 250, 0.35); } .likert .opt input:focus-visible + span { outline: 3px solid rgba(91, 124, 250, 0.3); } .submit-bar { position: sticky; bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .progress-wrap { flex: 1; min-width: 180px; } .progress-track { height: 8px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--border); overflow: hidden; } .progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width .3s ease; width: 0; } /* ---------- Relatório ---------- */ .report-head { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; } .stat { text-align: center; } .stat .big { font-size: 2.3rem; font-weight: 800; line-height: 1; } .stat .lbl { color: var(--muted); font-size: .8rem; } .radar-wrap { display: flex; justify-content: center; padding: 10px 0; } .bar-row { margin: 16px 0; } .bar-row .top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .bar-row .top .name { font-weight: 700; } .bar-track { height: 14px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--border); overflow: hidden; } .bar-fill { height: 100%; border-radius: 999px; transition: width .6s ease; } .bar-fill.forte { background: linear-gradient(90deg, #14a97c, var(--ok)); } .bar-fill.saudavel { background: linear-gradient(90deg, var(--brand), #93a8ff); } .bar-fill.atencao { background: linear-gradient(90deg, #e0900f, var(--warn)); } .bar-fill.critico { background: linear-gradient(90deg, #e13858, var(--danger)); } .focus-card { border-left: 4px solid var(--danger); background: var(--card-2); border-radius: 12px; padding: 18px 20px; margin: 16px 0; } .focus-card.atencao { border-left-color: var(--warn); } .focus-card h4 { margin: 0 0 4px; font-size: 1.1rem; } .focus-card ul { margin: 12px 0 0; padding-left: 20px; } .focus-card li { margin: 6px 0; color: var(--text); } .two-col { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; } /* Detalhe por pergunta */ .qd-group { margin: 8px 0 4px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .qd-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 14px 18px; cursor: pointer; background: var(--card-2); user-select: none; } .qd-head:hover { background: #eef1fa; } .qd-head .qd-title { font-weight: 700; display: flex; align-items: center; gap: 10px; } .qd-head .chev { transition: transform .2s ease; color: var(--muted); } .qd-group.open .chev { transform: rotate(90deg); } .qd-body { padding: 6px 18px 14px; display: none; } .qd-group.open .qd-body { display: block; } .qd-row { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-top: 1px solid var(--border); } .qd-row:first-child { border-top: none; } .qd-row .qd-text { flex: 1; font-size: .88rem; } .qd-row .qd-bar { width: 130px; flex-shrink: 0; } .qd-row .qd-score { width: 58px; text-align: right; font-weight: 700; font-size: .9rem; flex-shrink: 0; } .print-hint { text-align: center; margin-top: 20px; } /* ---------- Comentários ---------- */ .comment { border-left: 3px solid var(--border-strong); background: var(--card-2); border-radius: 10px; padding: 12px 14px; margin: 0 0 10px; } .comment.ok { border-left-color: var(--ok); } .comment.warn { border-left-color: var(--warn); } .comment p { margin: 0 0 6px; font-size: .92rem; white-space: pre-wrap; } .comment .comment-by { color: var(--muted); font-size: .8rem; font-weight: 600; } .comments-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 820px) { .comments-columns { grid-template-columns: 1fr; } } /* ===================================================================== IMPRESSÃO / PDF ELEGANTE Quebras de página inteligentes: nenhum card, comentário ou bloco de perguntas é cortado ao meio entre as páginas. ===================================================================== */ @media print { @page { size: A4; margin: 14mm 13mm 15mm; } html, body { background: #fff !important; color: #14182b !important; font-size: 10.5pt; } /* Preserva cores de barras, badges e destaques no PDF. */ * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .wrap { max-width: none !important; padding: 0 !important; } /* Esconde tudo que é interativo e não faz sentido no papel. */ .btn, .copy-btn, .link-box, #toggleClose, .header-cta, .print-hint, #allCommentsLink, #noData { display: none !important; } /* Cabeçalho enxuto com uma linha de marca. */ .site-header { padding: 0 0 10px !important; margin-bottom: 8px !important; border-bottom: 2px solid var(--brand); } /* Cartões: sem sombra, borda leve; por padrão não se dividem. */ .card { box-shadow: none !important; border: 1px solid #e3e7f3 !important; background: #fff !important; margin: 0 0 12px !important; padding: 16px 18px !important; break-inside: avoid; } .report-head { gap: 14px; } /* Mantém as duas colunas lado a lado no papel. */ .two-col { display: grid !important; grid-template-columns: 1.05fr .95fr !important; gap: 18px !important; } .comments-columns { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 18px !important; } /* Unidades que nunca podem ser partidas entre páginas. */ .focus-card, .comment, .qd-group, .bar-row, .qd-row, .pillar, .step, .two-col > .card { break-inside: avoid; } h3, h4 { break-after: avoid; } .radar-wrap svg { max-width: 280px; } a { color: #14182b !important; text-decoration: none !important; } /* ------------------------------------------------------------------- DOCUMENTO QUE JÁ É PAPEL (body.paper-doc) Alguns produtos não entregam blocos que fluem: entregam folhas A4 inteiras, desenhadas na medida (o relatório individual do MBTI é o primeiro). Nesses, a moldura da casca atrapalha em vez de ajudar — o cabeçalho do site e o cartão de dados repetiriam, antes da capa, o que a capa já diz, e empurrariam cada folha para fora da sua página. Quem liga isto é o próprio produto, ao desenhar: ele põe a classe no e zera o `@page` acima por script (regra de documento não se prende a seletor). Aqui fica o resto, que é da casca. ------------------------------------------------------------------- */ body.paper-doc .site-header, body.paper-doc #content > .card:first-child { display: none !important; } } @media (max-width: 820px) { .grid-5 { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: 1fr; } .two-col { grid-template-columns: 1fr; } } @media (max-width: 620px) { .q-row { flex-direction: column; align-items: stretch; gap: 10px; } .likert { justify-content: space-between; } .likert .opt { flex: 1; } .likert .opt span { width: 100%; height: 44px; } .scale-legend { justify-content: flex-start; } .scale-legend .legend-item span { display: none; } .qd-row .qd-bar { width: 80px; } } /* ===================================================================== CONTAS E ADMINISTRAÇÃO ===================================================================== */ /* ---------- Login ---------- */ .auth-wrap { display: grid; place-items: center; min-height: 88vh; padding-top: 40px; } .auth-card { width: 100%; max-width: 430px; background: var(--card); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lg); padding: 34px 32px; text-align: center; } .center-brand { justify-content: center; margin-bottom: 22px; } .auth-title { font-size: 1.55rem; margin: 0 0 6px; } .auth-sub { color: var(--muted); margin: 0 0 24px; font-size: .95rem; } .auth-card label { text-align: left; } .auth-foot { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: .82rem; } .google-btn { width: 100%; justify-content: center; background: #fff; color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); } .google-btn:hover { filter: none; background: var(--card-2); } /* ---------- Cabeçalho autenticado ---------- */ .nav a.active { color: var(--brand); font-weight: 600; } /* * O botão do usuário mostra só o NOME — não há mais círculo de iniciais. * * Isso muda o cabeçalho estreito de forma não óbvia: o avatar tinha 32px fixos * e o nome ficava escondido no celular, então esta ponta nunca disputava * espaço. Um nome ocupa o que quiser, e a marca é `flex-shrink: 0` — não há * folga. Quem cede é o seletor de idioma, via `flex-shrink: 4`: "PT" continua * legível apertado, um nome cortado cedo não. * * O que NÃO fazer aqui: `min-width: 0` no .user-menu com `max-width: 100%` no * botão. Parece a correção clássica de flex, mas os dois são caixas de largura * de conteúdo, e a porcentagem passa a se resolver contra um pai que depende * dela — o nome vira reticência até no desktop, com a tela inteira sobrando. */ .user-menu { position: relative; } .user-btn { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border-strong); border-radius: 999px; padding: 14px 18px; cursor: pointer; font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--text); box-shadow: var(--shadow-sm); } .user-btn:hover { background: var(--card-2); } .user-name { min-width: 0; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chev-down { color: var(--muted); font-size: .8rem; } .avatar, .avatar-lg { border-radius: 50%; object-fit: cover; flex-shrink: 0; display: inline-grid; place-items: center; } .avatar { width: 32px; height: 32px; } .avatar-lg { width: 66px; height: 66px; font-size: 1.4rem; } /* * As iniciais usam a MESMA fonte do nome ao lado (--font-ui). Com a Space * Grotesk elas destoavam: dentro de um botão de 32px, duas maiúsculas de uma * fonte que não aparece em nenhum outro lugar do cabeçalho não leem como * "inicial de alguém", leem como logotipo de outra marca. */ .avatar-fallback { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-weight: 600; font-size: .78rem; font-family: var(--font-ui); letter-spacing: .01em; } .avatar-lg.avatar-fallback { font-size: 1.5rem; } .user-dropdown { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; z-index: 500; background: var(--card); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; display: none; } .user-menu.open .user-dropdown { display: block; } .user-dropdown .user-info { display: flex; flex-direction: column; padding: 10px 12px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border); } .user-dropdown a, .user-dropdown button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 9px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: .9rem; color: var(--text); text-decoration: none; } .user-dropdown a:hover, .user-dropdown button:hover { background: var(--card-2); text-decoration: none; } /* * Sair separado por um fio. Sem ícones, ele seria mais uma linha igual às * outras — e é a única que não leva a uma página, mas encerra a sessão. */ .user-dropdown #logoutBtn { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--border); border-radius: 0 0 9px 9px; } /* ---------- Cabeçalho de página interna ---------- */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 30px 0 10px; } .page-title { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 4px 0 0; } /* ---------- Lista de avaliações ---------- */ .assess-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 20px 24px; margin: 14px 0; } .assess-main { flex: 1; min-width: 220px; } .assess-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; } .assess-title .badge { vertical-align: middle; margin-left: 6px; } .assess-count { text-align: center; min-width: 80px; } .assess-count .big { font-size: 1.7rem; font-weight: 800; line-height: 1; } .assess-count .lbl { color: var(--muted); font-size: .74rem; font-family: var(--font-label); } .assess-actions { display: flex; gap: 8px; flex-wrap: wrap; } .small-btn { padding: 9px 15px; font-size: .85rem; } .danger-btn { color: var(--danger); border-color: rgba(239, 77, 107, .35); } .danger-btn:hover { background: rgba(239, 77, 107, .07); } .danger-btn-solid { background: linear-gradient(135deg, #e13858, var(--danger)); box-shadow: 0 12px 26px rgba(239, 77, 107, .28); } /* ---------- Conta ---------- */ .profile-head { display: flex; align-items: center; gap: 18px; } .danger-zone { border-color: rgba(239, 77, 107, .35); } .danger-zone h3 { color: var(--danger); } /* ---------- Administração ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0; } .stat-card { text-align: center; padding: 20px 14px; margin: 0; } .stat-card .big { font-size: 2rem; font-weight: 800; line-height: 1; } .stat-card .lbl { color: var(--muted); font-size: .74rem; margin-top: 4px; font-family: var(--font-label); text-transform: uppercase; letter-spacing: .8px; } .table-scroll { overflow-x: auto; } .admin-table { min-width: 720px; } .admin-table td { vertical-align: middle; } .user-cell { display: flex; align-items: center; gap: 11px; } .row-inactive { opacity: .55; } .mini-select { padding: 8px 30px 8px 11px; font-size: .85rem; width: auto; min-width: 150px; } @media (max-width: 820px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } .assess-row { align-items: flex-start; } } @media print { #appHeader, .page-head .btn, .assess-actions { display: none !important; } } /* ===================================================================== HEADER COM MENUS DE SOLUÇÕES POR PÚBLICO ===================================================================== */ .site-header { position: relative; gap: 10px; } .header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; } /* Seletor de idiomas do cabeçalho (só aparece com mais de um idioma). */ .lang-select { width: auto; min-width: 68px; /* Cede espaço antes do nome quando o cabeçalho aperta: "PT" continua legível apertado, um nome cortado cedo não. */ flex-shrink: 4; padding: 7px 10px; margin: 0; font-family: var(--font-label); font-size: .82rem; font-weight: 600; } .main-nav { display: flex; align-items: center; gap: 4px; margin-left: 18px; } .nav-link { color: var(--muted); font-size: .92rem; font-weight: 500; padding: 9px 13px; border-radius: 10px; } .nav-link:hover { color: var(--brand); background: var(--card-2); text-decoration: none; } .nav-link.active { color: var(--brand); font-weight: 600; } /* ---------- Gatilho de cada público ---------- */ .mega { position: relative; } .mega-trigger { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-family: var(--font-ui); font-size: .92rem; font-weight: 500; color: var(--muted); padding: 9px 13px; border-radius: 10px; transition: color .15s ease, background .15s ease; text-decoration: none; /* o gatilho é quando o grupo tem página própria */ } .mega-trigger:hover, .mega.open .mega-trigger { color: var(--brand); background: var(--card-2); text-decoration: none; } .mega-trigger .chev-down { font-size: .72rem; transition: transform .18s ease; } .mega.open .mega-trigger .chev-down { transform: rotate(180deg); } /* ---------- Painel ---------- */ .mega-panel { position: absolute; top: calc(100% + 10px); left: 0; width: 400px; z-index: 600; background: var(--card); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; } .mega.open .mega-panel { opacity: 1; visibility: visible; transform: translateY(0); } /* Ponte invisível: permite ir do gatilho ao painel sem fechar. */ .mega-panel::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } .mega-head { padding: 12px 14px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .mega-head strong { display: block; font-family: var(--font-display); font-size: 1rem; } /* Mesmo título, mas levando à página da esfera inteira. */ .mega-head-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--text); text-decoration: none; } .mega-head-link span { color: var(--brand); transition: transform .15s ease; } .mega-head-link:hover { color: var(--brand); text-decoration: none; } .mega-head-link:hover span { transform: translateX(3px); } .mega-desc { color: var(--muted); font-size: .8rem; line-height: 1.45; display: block; } .mega-list { display: flex; flex-direction: column; } .mega-link { display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px; border-radius: 11px; color: var(--text); text-decoration: none; transition: background .14s ease; } .mega-link:hover { background: var(--card-2); text-decoration: none; } .mega-link.is-soon { cursor: default; } .mega-link.is-soon .mega-ico, .mega-link.is-soon strong { opacity: .72; } .mega-ico { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--card-2); color: var(--brand); } .mega-ico svg { width: 17px; height: 17px; } .mega-text { min-width: 0; } .mega-text strong { display: block; font-family: var(--font-ui); font-size: .9rem; font-weight: 600; margin-bottom: 2px; } .pill { display: inline-block; vertical-align: middle; font-family: var(--font-label); font-size: .6rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; margin-left: 5px; } .pill-live { background: rgba(23, 185, 138, .14); color: #0e8f68; } .pill-soon { background: var(--card-2); color: var(--muted); border: 1px solid var(--border-strong); } /* ---------- Botão do menu no celular ---------- */ .nav-toggle { display: none; background: #fff; border: 1px solid var(--border-strong); border-radius: 10px; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--text); padding: 9px 12px; margin-left: auto; } @media (max-width: 1000px) { .nav-toggle { display: block; } .header-right { margin-left: 8px; } .main-nav { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 700; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 10px; background: var(--card); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow-lg); } .main-nav.open { display: flex; } .mega-trigger { width: 100%; justify-content: space-between; font-size: 1rem; padding: 12px 14px; } .mega-panel { position: static; width: auto; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; border-radius: 0; padding: 0 0 8px; display: none; } .mega.open .mega-panel { display: block; } .mega-panel::before { display: none; } .mega-head { padding-top: 4px; } .nav-link { padding: 12px 14px; } } @media (max-width: 560px) { /* * O nome do usuário era escondido aqui porque o avatar segurava o botão * sozinho. Sem ele, esconder deixaria só a setinha — então some o SOBRENOME * e fica o primeiro nome, que é o que identifica alguém em uma palavra. */ .user-rest { display: none; } .user-btn { padding: 14px 14px; } .user-name { max-width: 92px; } /* * E a marca fica só no símbolo. A conta não fecha de outro jeito: com o * "I Belong" escrito, sobram cerca de 18px para o nome num aparelho de * 360px — menos que "Ana". O símbolo continua ao lado, do mesmo tamanho, e * é ele que identifica a marca; o nome escrito volta na primeira quebra. */ .brand .brand-name { display: none; } } /* Aparelhos bem estreitos (SE e afins): o pouco que ainda dá para apertar. */ @media (max-width: 380px) { .user-name { max-width: 56px; } .lang-select { min-width: 54px; } .brand .brand-name { font-size: 1.1rem; } } @media print { .main-nav, .nav-toggle, .header-right { display: none !important; } } /* ---------- Meu Perfil: quebra-cabeça e compartilhamentos ---------- */ .pz { width: 100%; height: auto; display: block; margin: 0 auto; } .pz-piece { cursor: pointer; } .pz-piece[tabindex]:focus { outline: none; } .pz-piece[tabindex]:focus-visible .pz-shape { stroke: var(--brand-ink); stroke-width: 3.5; } .pz-shape { stroke: var(--border-strong); stroke-width: 2; fill: var(--card); transition: fill 160ms ease, stroke 160ms ease, transform 160ms ease; } .pz-label { font-family: var(--font-label); font-size: 15px; font-weight: 600; text-anchor: middle; fill: var(--text); pointer-events: none; } .pz-label-sm { font-size: 12.5px; } .pz-mark { font-family: var(--font-label); font-size: 21px; font-weight: 700; text-anchor: middle; pointer-events: none; } .pz-note { font-family: var(--font-ui); font-size: 12.5px; text-anchor: middle; fill: var(--muted); pointer-events: none; } /* Peça respondida: preenchida — é a parte do retrato que já existe. */ .pz-done .pz-shape { fill: var(--brand); stroke: var(--brand-ink); } .pz-done .pz-label { fill: #fff; } .pz-done .pz-note { fill: rgba(255, 255, 255, 0.82); } .pz-done .pz-mark { fill: rgba(255, 255, 255, 0.9); } .pz-done:hover .pz-shape { fill: var(--brand-ink); } /* Peça em aberto: o buraco. Tracejada, para ler como "falta isto aqui". */ .pz-open .pz-shape { fill: var(--card-2); stroke-dasharray: 7 6; } .pz-open .pz-mark { fill: var(--brand); } .pz-open:hover .pz-shape { fill: #fff; stroke: var(--brand); stroke-dasharray: none; } /* Peça ainda não disponível: presente, mas apagada. */ .pz-locked { cursor: default; } .pz-locked .pz-shape { fill: var(--card-2); stroke: var(--border); opacity: 0.55; } .pz-locked .pz-label { fill: var(--muted); opacity: 0.75; } .pz-locked .pz-note { opacity: 0.75; } .puzzle-wrap { max-width: 660px; margin: 0 auto; } .puzzle-legend { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 18px; } .puzzle-legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--muted); font-family: var(--font-label); } .puzzle-legend i { width: 15px; height: 15px; border-radius: 4px; display: inline-block; border: 2px solid var(--border-strong); background: var(--card); } .puzzle-legend i.done { background: var(--brand); border-color: var(--brand-ink); } .puzzle-legend i.open { background: var(--card-2); border-style: dashed; } .puzzle-legend i.locked { background: var(--card-2); border-color: var(--border); opacity: 0.6; } /* Lista de vagas com quem o perfil foi compartilhado. */ .share-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .share-main { flex: 1 1 260px; min-width: 0; } .share-title { font-weight: 600; } .share-row .btn { flex-shrink: 0; } .share-revoked { opacity: 0.62; } .share-revoked .share-title { text-decoration: line-through; } @media (max-width: 560px) { .puzzle-legend { gap: 12px; } .share-row { gap: 10px; } } /* ---------- Escolha de caminho: criar conta × responder uma vez ---------- */ /* * Duas opções, peso visual igual — o site não empurra a pessoa para um lado * (a conta é o padrão do produto, mas ninguém aqui é obrigado a criá-la só * para responder uma vez). O que muda entre as duas caixas é o texto, não o * destaque. */ .path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; } .path-card { display: flex; flex-direction: column; text-align: left; } .path-card ul { margin: 0 0 20px; padding-left: 20px; color: var(--muted); font-size: .9rem; line-height: 1.6; } .path-card .btn { margin-top: auto; align-self: flex-start; } /* A opção fechada (vaga que também pede outros testes) explica o porquê em vez de simplesmente sumir — some sem explicação parece bug. */ .path-card.path-disabled { opacity: .72; } .path-card.path-disabled .btn { display: none; } @media (max-width: 720px) { .path-grid { grid-template-columns: 1fr; } } /* ---------- Rodapé (public/js/app-footer.js) ---------- */ .site-footer { margin-top: 64px; padding: 32px 0 6px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px 40px; } .site-footer .foot-brand { display: flex; flex-direction: column; gap: 8px; max-width: 360px; } .site-footer .logo { height: 34px; } .site-footer .foot-tagline { color: var(--muted); font-size: .86rem; margin: 0; } .site-footer .foot-links { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px 26px; } .site-footer .foot-links a { color: var(--muted); font-size: .9rem; font-weight: 500; } .site-footer .foot-links a:hover { color: var(--brand); text-decoration: none; } .site-footer .foot-bottom { width: 100%; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: .8rem; text-align: center; } @media (max-width: 640px) { .site-footer { flex-direction: column; } } /* ---------- Texto longo (privacidade, termos) ---------- */ .prose .updated { color: var(--muted); font-size: .88rem; margin: -10px 0 26px; } .prose section { margin: 0 0 30px; } .prose section:last-child { margin-bottom: 0; } .prose h3 { margin: 0 0 10px; font-size: 1.1rem; } .prose p { margin: 0 0 12px; } .prose p:last-child { margin-bottom: 0; } .prose ul { margin: 0 0 12px; padding-left: 20px; } .prose li { margin: 6px 0; } .prose code { background: var(--card-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-size: .88em; } /* ---------- FAQ (public/faq.html) ---------- */ .faq-list { margin: 0; } .faq-item { border-bottom: 1px solid var(--border); padding: 22px 0; } .faq-item:first-child { padding-top: 0; } .faq-item:last-child { border-bottom: none; padding-bottom: 0; } .faq-item h4 { margin: 0 0 8px; font-size: 1.04rem; } .faq-item p { margin: 0; color: var(--muted); } /* ---------- Formulário de contato (public/contact.html) ---------- */ .hp-field { position: absolute; left: -9999px; top: -9999px; }