/* solucao.css — solution pages (/solucoes/) + campaign/hub landings (portal-fornecedor, eficiencia-compras, rh). Reuses the existing design tokens and base classes (.wrap, .section, .card, .btn, .eyebrow, .tag). Adds only page-specific layout. Nothing global. */ /* chrome wrappers transparent so the sticky header shares the scroll box */ #jynx-top, #jynx-bottom { display: contents; } /* ---------------- hero ---------------- */ .sp-hero { padding-block: clamp(40px, 6vw, 88px) clamp(32px, 4vw, 56px); position: relative; overflow: hidden; } .sp-hero__atmo { position: absolute; inset: 0; pointer-events: none; opacity: .5; background: radial-gradient(60% 80% at 12% 0%, var(--accent-08), transparent 60%), radial-gradient(50% 60% at 100% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%); } .sp-hero__inner { position: relative; max-width: 820px; } .sp-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin-top: 16px; } .sp-hero__lead { margin-top: 18px; font-size: clamp(1.1rem, 1.6vw, 1.28rem); color: var(--ink-64); max-width: 640px; } .sp-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; align-items: center; } .sp-prazo { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .95rem; color: var(--ink); background: var(--accent-12); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--hair)); padding: 7px 13px; border-radius: var(--r-sm); } .sp-tags { display: inline-flex; flex-wrap: wrap; gap: 7px; } .sp-erp { font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-64); background: color-mix(in srgb, var(--ink) 7%, transparent); padding: 6px 11px; border-radius: var(--r-sm); } .sp-erp--base { color: var(--accent-ink); background: var(--accent-12); } .sp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } /* ---------------- generic block ---------------- */ .sp-block .section-head { max-width: 720px; } .sp-block .section-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-top: 14px; } .sp-block .section-head p { margin-top: 14px; font-size: 1.12rem; color: var(--ink-64); } /* dores grid */ .sp-dores { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 40px; } @media (max-width: 720px) { .sp-dores { grid-template-columns: 1fr; } } .sp-dores__card { padding: 22px 24px; display: flex; gap: 14px; align-items: flex-start; } .sp-dores__ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-12); color: var(--accent); } .sp-dores__card h3 { font-size: 1.08rem; } .sp-dores__card p { margin-top: 5px; color: var(--ink-64); font-size: .96rem; line-height: 1.5; } /* feature / "o que é" list */ .sp-feat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; margin-top: 36px; } @media (max-width: 720px) { .sp-feat { grid-template-columns: 1fr; } } .sp-feat__item { display: flex; gap: 12px; align-items: flex-start; padding: 4px 0; } .sp-feat__item > span:first-child { flex-shrink: 0; color: var(--accent); margin-top: 2px; } .sp-feat__item b { font-family: var(--font-display); font-weight: 700; } .sp-feat__item p { color: var(--ink-64); font-size: .96rem; margin-top: 2px; } /* ERPs compatíveis */ .sp-erps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .sp-erps__chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); background: var(--bg); border: 1px solid var(--hair); padding: 10px 16px; border-radius: var(--r-sm); box-shadow: var(--shadow-sm); } .sp-erps__chip svg { color: var(--accent); } /* como funciona (3 passos) */ .sp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; } @media (max-width: 760px) { .sp-steps { grid-template-columns: 1fr; } } .sp-steps__step { padding: 26px 24px; position: relative; } .sp-steps__num { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: #fff; background: var(--accent); width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; } .sp-steps__step h3 { margin-top: 16px; font-size: 1.18rem; } .sp-steps__step p { margin-top: 7px; color: var(--ink-64); line-height: 1.55; } /* results (with disclaimer) */ .sp-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 40px; } @media (max-width: 600px) { .sp-results { grid-template-columns: 1fr; } } .sp-results__card { padding: 30px 28px; } .sp-results__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3rem); color: var(--accent); line-height: 1; } .sp-results__label { margin-top: 10px; color: var(--ink-64); } .sp-results__note { display: flex; gap: 7px; align-items: center; margin-top: 22px; font-size: .85rem; color: var(--ink-48); } /* cross-sell */ .sp-cross { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; } @media (max-width: 880px) { .sp-cross { grid-template-columns: 1fr; } } .sp-cross__card { padding: 24px; display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none; transition: transform .25s, box-shadow .3s, border-color .25s; } .sp-cross__card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 30%, var(--hair)); } .sp-cross__ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-12); color: var(--accent); margin-bottom: 6px; } .sp-cross__card h3 { font-size: 1.12rem; } .sp-cross__card p { color: var(--ink-64); font-size: .94rem; line-height: 1.5; flex: 1; } .sp-cross__more { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; font-size: .92rem; } /* RH hub solution cards */ .sp-hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; } @media (max-width: 880px) { .sp-hub { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .sp-hub { grid-template-columns: 1fr; } } .sp-hub__card { padding: 22px; display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none; transition: transform .25s, box-shadow .3s, border-color .25s; } .sp-hub__card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 30%, var(--hair)); } .sp-hub__ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-12); color: var(--accent); } .sp-hub__card h3 { font-size: 1.06rem; margin-top: 4px; } .sp-hub__card p { color: var(--ink-64); font-size: .92rem; line-height: 1.45; } /* final CTA band */ .sp-final { text-align: center; } .sp-final__inner { max-width: 680px; margin: 0 auto; } .sp-final h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); } .sp-final p { margin-top: 14px; color: color-mix(in srgb, white 72%, var(--ink)); font-size: 1.12rem; } .sp-final .sp-cta { justify-content: center; margin-top: 28px; } /* editorial marker (content the client will complete — never invented copy) */ .sp-todo { margin-top: 24px; padding: 18px 20px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--hair)); border-radius: var(--r-sm); background: var(--accent-08); color: var(--ink-64); font-size: .95rem; display: flex; gap: 10px; align-items: flex-start; } .sp-todo b { color: var(--ink); font-weight: 700; } .sp-todo__tag { flex-shrink: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1px solid currentColor; border-radius: 5px; padding: 3px 6px; margin-top: 1px; }