/* ============================================================ Web4Business - Página Depoimentos · CSS específico Estilos exclusivos do conteúdo desta página. Todos os seletores são escopados sob .EstDepoimentos (classe no ), evitando vazamento para outras páginas. (o .page-hero e os CTAs, compartilhados, ficam no css.css) Identidade mono escura: cinza escuro (grafite) + branco. Sem azul. ============================================================ */ /* tokens locais de acento grafite */ .EstDepoimentos .depo-metrics, .EstDepoimentos .depo-list { --ink-2: #141414; --graphite: linear-gradient(135deg, #3a3a3a 0%, #141414 100%); --line: #e7e7e7; } /* ---- variante de seção ---- */ .EstDepoimentos .section--soft { background: var(--bg-soft); } /* ---- cabeçalho de seção (eyebrow + título) ---- */ .EstDepoimentos .section-head { text-align: center; max-width: 760px; margin: 0 auto 64px; } .EstDepoimentos .section-eyebrow { color: #737373; font-weight: 600; font-size: clamp(12px, 1.2vw, 14px); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 16px; } .EstDepoimentos .section-head .section-title { margin-bottom: 18px; } .EstDepoimentos .depo-list-lead { color: var(--gray); font-weight: 300; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; margin: 0 auto; max-width: 620px; } /* ============================================================ INDICADORES - números de destaque (faixa superior) ============================================================ */ .EstDepoimentos .depo-metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .EstDepoimentos .depo-metric { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 38px 26px; border: 1px solid var(--line); border-radius: 20px; background: #fff; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .EstDepoimentos .depo-metric::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--graphite); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } .EstDepoimentos .depo-metric:hover { transform: translateY(-8px); box-shadow: 0 26px 52px rgba(20, 20, 20, .14); border-color: transparent; } .EstDepoimentos .depo-metric:hover::after { transform: scaleX(1); } .EstDepoimentos .depo-metric-num { font-weight: 600; font-size: clamp(36px, 4.4vw, 56px); line-height: 1; letter-spacing: -1.5px; background: linear-gradient(135deg, #2a2a2a 0%, #141414 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--ink); } .EstDepoimentos .depo-metric-label { color: var(--gray); font-weight: 300; font-size: clamp(14px, 1.3vw, 16px); line-height: 1.5; max-width: 220px; } /* ============================================================ LISTAGEM - grade de cards de depoimento ============================================================ */ .EstDepoimentos .depo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .EstDepoimentos .depo-card { position: relative; display: flex; flex-direction: column; padding: 40px 34px 34px; border: 1px solid var(--line); border-radius: 20px; background: #fff; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } /* faixa grafite que surge no topo no hover */ .EstDepoimentos .depo-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: var(--graphite); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } .EstDepoimentos .depo-card:hover { transform: translateY(-8px); box-shadow: 0 26px 52px rgba(20, 20, 20, .14); border-color: transparent; } .EstDepoimentos .depo-card:hover::before { transform: scaleX(1); } /* aspas decorativas */ .EstDepoimentos .depo-quote { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 22px; border-radius: 14px; background: var(--graphite); color: #fff; } .EstDepoimentos .depo-quote i { width: 26px; height: 26px; stroke-width: 1.7; } /* estrelas */ .EstDepoimentos .depo-stars { display: flex; gap: 4px; margin-bottom: 18px; } .EstDepoimentos .depo-stars i { width: 19px; height: 19px; stroke-width: 1.6; color: #141414; fill: #141414; } /* estrela "vazia" (avaliações abaixo de 5) */ .EstDepoimentos .depo-star--off { color: #cfcfcf; fill: none; } /* texto do depoimento */ .EstDepoimentos .depo-text { flex: 1 1 auto; color: var(--ink); font-weight: 300; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; letter-spacing: -.2px; margin-bottom: 26px; } /* autor */ .EstDepoimentos .depo-author { display: flex; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid var(--line); } .EstDepoimentos .depo-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%; background: var(--graphite); color: #fff; font-weight: 600; font-size: 17px; letter-spacing: .5px; } .EstDepoimentos .depo-avatar--img { overflow: hidden; padding: 0; } .EstDepoimentos .depo-avatar--img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .EstDepoimentos .depo-author-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .EstDepoimentos .depo-name { font-weight: 600; font-size: clamp(16px, 1.4vw, 18px); color: var(--ink); line-height: 1.3; } .EstDepoimentos .depo-role { color: var(--gray); font-weight: 300; font-size: clamp(13px, 1.2vw, 14px); line-height: 1.3; } /* ============================================================ RESPONSIVO - específico desta página ============================================================ */ @media (max-width: 1200px) { .EstDepoimentos .depo-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } } @media (max-width: 860px) { .EstDepoimentos .section-head { margin-bottom: 48px; } .EstDepoimentos .depo-metrics-grid { grid-template-columns: 1fr 1fr; gap: 18px; } .EstDepoimentos .depo-metric { padding: 32px 22px; } } @media (max-width: 560px) { .EstDepoimentos .depo-grid { grid-template-columns: 1fr; gap: 18px; } .EstDepoimentos .depo-metrics-grid { grid-template-columns: 1fr; gap: 14px; } .EstDepoimentos .depo-card { padding: 34px 28px 30px; } }