/* =========================================================== Ecosafety — Sales page v2 (usa tokens de styles.css) Tema por produto via classe no : define --accent, --accent-deep, --accent-tint, --band (banda escura) e --grad-* (CTA). =========================================================== */ .theme-ambiental { --accent:#0f6b43; --accent-text:#0f6b43; --accent-deep:#0a3d2a; --accent-tint:#bfe0cc; --band:#0c1f16; --grad-a:#15814f; --grad-b:#0a3d2a; } .theme-totalsafety { --accent:#1a4d73; --accent-text:#1a4d73; --accent-deep:#10314a; --accent-tint:#bcd6ea; --band:#0e2638; --grad-a:#1e5680; --grad-b:#10314a; } .theme-incendio { --accent:#be3a20; --accent-text:#a82e18; --accent-deep:#4a160c; --accent-tint:#f3c4b8; --band:#25140f; --grad-a:#c5462a; --grad-b:#4a160c; } .theme-ecoclinic { --accent:#1796c5; --accent-text:#0c6f93; --accent-deep:#0c3346; --accent-tint:#bce4f2; --band:#0b2a39; --grad-a:#1c9ac6; --grad-b:#0c3346; } .theme-seguranca { --accent:#dd661a; --accent-text:#b35110; --accent-deep:#3e1e0a; --accent-tint:#f6d5b8; --band:#271409; --grad-a:#e0701f; --grad-b:#3e1e0a; } .theme-topografia { --accent:#9a5a33; --accent-text:#824a2a; --accent-deep:#2c1a0f; --accent-tint:#e6cdb8; --band:#1f140c; --grad-a:#a5613a; --grad-b:#2c1a0f; } .theme-treinamentos{ --accent:#3e3c8f; --accent-text:#3e3c8f; --accent-deep:#19173a; --accent-tint:#cdccea; --band:#15142c; --grad-a:#46449c; --grad-b:#19173a; } /* acento sobrescreve botão/eyebrow/link herdados */ .sp .eyebrow { color: var(--accent); } .sp .btn-primary { background: var(--accent-text); } .sp .btn-primary:hover { background: var(--accent-deep); } .sp .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .sp .link-arrow { color: var(--accent-text); } .sp-eb { /* eyebrow com tracinho */ display: inline-flex; align-items: center; gap: 10px; } .sp-eb::before { content: ""; width: 26px; height: 2px; background: var(--accent); } .sp-eb--light::before { background: var(--accent-tint); } .sp-eb--light { color: var(--accent-tint); } .sp .h2 { font-family: var(--font-heading); font-weight: 500; font-size: clamp(28px, 4.4vw, 40px); line-height: 1.1; letter-spacing: -1.2px; color: var(--ink); } .sp .h2--light { color: #fff; } /* ============================= Hero ==================== */ .sp-hero { background: var(--surface); } .sp-hero .wrap { display: grid; grid-template-columns: 540px 1fr; gap: 60px; align-items: center; padding-block: 80px; } .sp-hero__l { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; } .sp-hero__eb { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; } .sp-hero__eb::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .sp-hero__eb span { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 1px; color: var(--accent-text); text-transform: uppercase; } .sp-hero__eb span:not(:last-child)::after { content: "·"; margin-left: 7px; color: var(--accent-text); opacity: .55; } .sp-hero__title { font-family: var(--font-heading); font-weight: 500; font-size: clamp(34px, 5vw, 50px); line-height: 1.05; letter-spacing: -1.7px; color: var(--ink); } .sp-hero__sub { font-size: 18px; line-height: 1.6; color: var(--text-muted); max-width: 50ch; } .sp-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 8px; } .sp-hero__foot { font-family: var(--font-mono); font-size: 12px; letter-spacing: .5px; color: var(--text-muted); display: inline-flex; gap: 8px; align-items: center; } .sp-hero__foot svg { width: 16px; height: 16px; } /* status panel */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; box-shadow: 0 20px 44px -12px rgba(11,34,23,.08); } .panel__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; } .panel__head h2 { font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; letter-spacing: 1.5px; color: var(--text-muted); text-transform: uppercase; } .panel__badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--accent-text); } .panel__badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); } .panel__row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); } .panel__row > span { display: inline-flex; align-items: center; gap: 11px; } .panel__row svg { width: 17px; height: 17px; } .panel__lb { font-family: var(--font-heading); font-weight: 500; font-size: 14.5px; color: var(--ink); } .panel__st { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11.5px; } .panel__st svg { width: 14px; height: 14px; } .st-ok { color: var(--green-600); } .st-mid { color: #8a6200; } .st-off { color: var(--text-muted); } .panel__prog { padding-top: 18px; } .panel__prog p { font-family: var(--font-mono); font-size: 11px; letter-spacing: .4px; color: var(--text-muted); } .panel__bar { display: flex; gap: 6px; margin-top: 10px; } .panel__bar i { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-3); } .panel__bar i.on { background: var(--green-600); } /* ===================== Section head (2 col) =========== */ .sp .section { padding-block: clamp(56px, 8vw, 96px); } .sp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 64px; margin-bottom: 50px; } .sp-head__l { display: flex; flex-direction: column; gap: 16px; max-width: 660px; } .sp-head__intro { max-width: 392px; font-size: 16px; line-height: 1.6; color: var(--text-muted); } .sp-head__intro--light { color: rgba(255,255,255,.7); } /* ===================== Como funciona (passos) ========= */ .sp-steps { background: var(--paper); border-block: 1px solid var(--line); } .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .steps li { padding-top: 20px; border-top: 2px solid var(--accent); display: flex; flex-direction: column; gap: 13px; } .steps .n { font-family: var(--font-heading); font-size: 15px; font-weight: 600; letter-spacing: 1px; color: var(--accent-text); } .steps h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 600; color: var(--ink); } .steps p { font-size: 14px; line-height: 1.55; color: var(--text-muted); } /* ===================== Problema (band) ================ */ .sp-problema { background: var(--band); color: #fff; } .sp-problema .sp-head__l .h2 { color: #fff; } .pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .pgrid li { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); } .pgrid svg { width: 21px; height: 21px; color: var(--accent-tint); } .pgrid h3 { font-family: var(--font-heading); font-size: 16px; font-weight: 600; line-height: 1.3; margin-top: 12px; color: #fff; } /* ===================== Solução (3 cols) =============== */ .sp-solucao { background: var(--surface); } .scols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .scols li { padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; } .scols svg { width: 22px; height: 22px; color: var(--accent); } .scols h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 600; color: var(--ink); } .scols p { font-size: 14px; line-height: 1.55; color: var(--text-muted); } /* ===================== Incluso (checklist) =========== */ .sp-incluso { background: var(--paper); border-block: 1px solid var(--line); } .checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; } .checks li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 15.5px; font-weight: 500; color: var(--ink); } .checks svg { width: 19px; height: 19px; color: var(--accent); flex: none; } /* ===================== Benefícios ==================== */ .sp-benef { background: var(--surface); } .bgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; } .bgrid li { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-top: 1px solid var(--line); } .bgrid svg { width: 20px; height: 20px; color: var(--accent); flex: none; } .bgrid span { font-family: var(--font-heading); font-size: 15.5px; font-weight: 600; color: var(--ink); } /* ===================== FAQ =========================== */ .sp-faq { background: var(--paper); border-block: 1px solid var(--line); } .faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; } .faq__col { display: flex; flex-direction: column; } .faq details { padding: 22px 0 24px; border-top: 1px solid var(--line); } .faq summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; cursor: pointer; list-style: none; font-family: var(--font-heading); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--ink); } .faq summary::-webkit-details-marker { display: none; } .faq summary svg { width: 18px; height: 18px; color: var(--accent); flex: none; transition: transform .2s ease; margin-top: 2px; } .faq details[open] summary svg { transform: rotate(45deg); } .faq p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); } /* ===================== Para quem ===================== */ .sp-paraquem { background: var(--surface); } .sp-paraquem .sp-head__l { max-width: 760px; } .sp-paraquem .h2 { font-size: clamp(28px, 4.2vw, 38px); letter-spacing: -1px; } .pq-lead { max-width: 800px; font-size: 17px; line-height: 1.6; color: var(--text); margin-top: 14px; } .pills { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; } .pills li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--text); } .pills li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* ===================== CTA final ===================== */ .sp-cta { color: #fff; text-align: center; padding-block: clamp(64px, 9vw, 92px); background: linear-gradient(118deg, var(--grad-a), var(--grad-b)); } .sp-cta__eb { display: inline-flex; gap: 12px; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 2.4px; color: var(--accent-tint); text-transform: uppercase; } .sp-cta__eb::before, .sp-cta__eb::after { content: ""; width: 24px; height: 2px; background: rgba(255,255,255,.6); } .sp-cta h2 { font-family: var(--font-heading); font-weight: 500; font-size: clamp(28px, 4.6vw, 44px); line-height: 1.08; letter-spacing: -1.3px; max-width: 20ch; margin: 18px auto 0; } .sp-cta p { max-width: 56ch; margin: 18px auto 0; font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.9); } .sp-cta__ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 28px; } /* ===================== FAP (TotalSafety) ============= */ .sp-fap { background: var(--surface-2); } .fap-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 44px; } .fap-flow li { padding-top: 20px; border-top: 2px solid var(--accent); display: flex; flex-direction: column; gap: 13px; } .fap-flow .n { font-family: var(--font-heading); font-size: 26px; font-weight: 600; letter-spacing: -.5px; color: var(--accent-text); } .fap-flow h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 600; color: var(--ink); } .fap-flow p { font-size: 14px; line-height: 1.55; color: var(--text-muted); } .fap-scale__lbls { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: .8px; text-transform: uppercase; } .fap-scale__lbls span:first-child { color: var(--green-700); } .fap-scale__lbls span:last-child { color: var(--incendio, #be3a20); } .fap-scale__bar { height: 10px; border-radius: 999px; margin: 12px 0 10px; background: linear-gradient(90deg, #1e9e63, #e0a33b 55%, #be3a20); } .fap-scale__note { font-size: 13.5px; color: var(--text-muted); text-align: center; } .fap-disc { margin-top: 28px; font-size: 13.5px; font-style: italic; line-height: 1.6; color: var(--text-muted); max-width: 78ch; } /* ===================== Responsivo ==================== */ @media (max-width: 980px) { .sp-hero .wrap { grid-template-columns: 1fr; gap: 40px; padding-block: 56px; } .sp-head { flex-direction: column; gap: 20px; margin-bottom: 36px; } .steps, .pgrid { grid-template-columns: repeat(2, 1fr); } .scols, .fap-flow { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 640px) { .steps, .pgrid { grid-template-columns: 1fr; } .checks, .bgrid, .faq { grid-template-columns: 1fr; gap: 0; } }