/* ============================================================ Web4Business - Página QuemSomos · CSS específico Estilos exclusivos do conteúdo desta página. Todos os seletores são escopados sob .EstQuemSomos (classe no ), evitando vazamento para outras páginas. (o .page-hero e os CTAs, compartilhados, ficam no css.css) Acento em tons de cinza escuro (grafite), sem azul. ============================================================ */ /* tokens locais de acento grafite */ .EstQuemSomos .about, .EstQuemSomos .mvo, .EstQuemSomos .values { --ink-2: #141414; --graphite: linear-gradient(135deg, #3a3a3a 0%, #141414 100%); --line: #e7e7e7; } /* ---- variantes de seção ---- */ .EstQuemSomos .section--soft { background: var(--bg-soft); } .EstQuemSomos .section--dark { background: radial-gradient(120% 120% at 50% 0%, #2c2c2c 0%, #1b1b1b 55%, #141414 100%); } /* ---- cabeçalho de seção (eyebrow + título) ---- */ .EstQuemSomos .section-head { text-align: center; max-width: 760px; margin: 0 auto 64px; } .EstQuemSomos .section-eyebrow { color: #737373; font-weight: 600; font-size: clamp(12px, 1.2vw, 14px); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 16px; } .EstQuemSomos .section-head .section-title { margin-bottom: 0; } .EstQuemSomos .section-head--light .section-eyebrow { color: #b9b9b9; } .EstQuemSomos .section-head--light .section-title { color: #fff; } /* ============================================================ LEAD - texto da história + linha do tempo ============================================================ */ .EstQuemSomos .about-lead { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; } /* coluna de texto */ .EstQuemSomos .about-lead-eyebrow { color: #737373; font-weight: 600; font-size: clamp(12px, 1.2vw, 14px); letter-spacing: 3px; text-transform: uppercase; margin: 0 0 22px; } .EstQuemSomos .about-lead-intro { color: var(--ink); font-weight: 300; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.3; letter-spacing: -.5px; margin-bottom: 24px; } .EstQuemSomos .about-lead-intro strong { font-weight: 600; } .EstQuemSomos .about-lead-text > p:not(.about-lead-eyebrow):not(.about-lead-intro) { color: var(--gray); font-weight: 300; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.7; margin-bottom: 18px; } .EstQuemSomos .about-lead-text > p:not(.about-lead-eyebrow):not(.about-lead-intro):last-child { margin-bottom: 0; } .EstQuemSomos .about-lead-text strong { color: var(--ink); font-weight: 600; } /* destaques (mini-features) abaixo do texto */ .EstQuemSomos .about-highlights { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); display: grid; gap: 16px; } .EstQuemSomos .about-highlights li { display: flex; align-items: center; gap: 14px; color: var(--gray); font-weight: 300; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.4; } .EstQuemSomos .about-highlights strong { color: var(--ink); font-weight: 600; } .EstQuemSomos .about-highlight-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: var(--graphite); color: #fff; } .EstQuemSomos .about-highlight-ico i { width: 22px; height: 22px; stroke-width: 1.7; } .EstQuemSomos .timeline-content em { font-style: italic; color: var(--ink); } /* linha do tempo */ .EstQuemSomos .timeline { position: relative; padding-left: 34px; list-style: none; } /* trilho vertical */ .EstQuemSomos .timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, #141414 0%, #cfcfcf 100%); } .EstQuemSomos .timeline-item { position: relative; padding-bottom: 36px; } .EstQuemSomos .timeline-item:last-child { padding-bottom: 0; } /* marcador (bolinha) */ .EstQuemSomos .timeline-item::before { content: ""; position: absolute; left: -34px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid #141414; box-shadow: 0 0 0 4px #fff; transition: transform .3s var(--ease), background .3s var(--ease); } .EstQuemSomos .timeline-item:hover::before { transform: scale(1.15); background: #141414; } .EstQuemSomos .timeline-year { display: inline-block; font-weight: 600; font-size: clamp(18px, 1.7vw, 22px); color: var(--ink); letter-spacing: -.5px; margin-bottom: 6px; } .EstQuemSomos .timeline-content h3 { font-weight: 600; font-size: clamp(15px, 1.3vw, 17px); color: var(--ink); margin-bottom: 6px; } .EstQuemSomos .timeline-content p { color: var(--gray); font-weight: 300; font-size: clamp(14px, 1.3vw, 16px); line-height: 1.6; } /* ============================================================ PILARES (nossa postura) ============================================================ */ .EstQuemSomos .focus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 72px; } .EstQuemSomos .focus-card { position: relative; padding: 44px 36px 38px; 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); } .EstQuemSomos .focus-card::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); } .EstQuemSomos .focus-card:hover { transform: translateY(-8px); box-shadow: 0 26px 52px rgba(20, 20, 20, .14); border-color: transparent; } .EstQuemSomos .focus-card:hover::after { transform: scaleX(1); } .EstQuemSomos .focus-num { position: absolute; top: 26px; right: 30px; font-weight: 600; font-size: clamp(34px, 4vw, 52px); line-height: 1; color: #f0f0f0; letter-spacing: -1px; } .EstQuemSomos .focus-icon { display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; margin-bottom: 26px; border-radius: 16px; background: var(--graphite); color: #fff; } .EstQuemSomos .focus-icon i { width: 30px; height: 30px; stroke-width: 1.7; } .EstQuemSomos .focus-card h3 { font-weight: 600; font-size: clamp(20px, 1.9vw, 26px); margin-bottom: 12px; color: var(--ink); } .EstQuemSomos .focus-card p { color: var(--gray); font-weight: 300; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; } .EstQuemSomos .focus-note { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 40px; padding: 22px 28px; border: 1px dashed #d0d0d0; border-radius: 16px; color: var(--gray); font-weight: 300; font-size: clamp(15px, 1.5vw, 19px); text-align: center; } .EstQuemSomos .focus-note strong { color: var(--ink); font-weight: 600; } .EstQuemSomos .focus-note i { flex: 0 0 auto; width: 26px; height: 26px; stroke-width: 1.7; color: var(--ink-2); } /* ============================================================ MISSÃO / VISÃO / OBJETIVO - cards lado a lado (dark) ============================================================ */ /* cabeçalho mais largo para o título não quebrar em 2 linhas */ .EstQuemSomos .mvo .section-head { max-width: 100%; } .EstQuemSomos .mvo-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .EstQuemSomos .mvo-row { display: flex; flex-direction: column; padding: 38px 34px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: rgba(255, 255, 255, .04); transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease); } .EstQuemSomos .mvo-row:hover { transform: translateY(-8px); background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .22); } .EstQuemSomos .mvo-row-head { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; } .EstQuemSomos .mvo-index { font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; color: rgba(255, 255, 255, .32); letter-spacing: -1px; } .EstQuemSomos .mvo-icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 14px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .14); color: #fff; } .EstQuemSomos .mvo-icon i { width: 26px; height: 26px; stroke-width: 1.7; } .EstQuemSomos .mvo-row h3 { font-weight: 600; font-size: clamp(20px, 1.9vw, 26px); color: #fff; } .EstQuemSomos .mvo-row p { color: rgba(255, 255, 255, .72); font-weight: 300; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.65; } /* ============================================================ VALORES - grade de cards escuros, ícone grande centralizado ============================================================ */ .EstQuemSomos .values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .EstQuemSomos .value-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; padding: 30px 18px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(160deg, #242424 0%, #161616 100%); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } /* halo radial que surge atrás do ícone no hover */ .EstQuemSomos .value-card::before { content: ""; position: absolute; left: 50%; top: 38%; width: 180px; height: 180px; transform: translate(-50%, -50%) scale(.4); background: radial-gradient(circle, rgba(255, 255, 255, .10) 0%, transparent 65%); opacity: 0; transition: opacity .45s var(--ease), transform .45s var(--ease); } .EstQuemSomos .value-card:hover { transform: translateY(-8px); border-color: rgba(255, 255, 255, .26); box-shadow: 0 28px 56px rgba(0, 0, 0, .42); } .EstQuemSomos .value-card:hover::before { opacity: 1; transform: translate(-50%, -50%) scale(1); } .EstQuemSomos .value-icon { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: #fff; transition: background .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease); } .EstQuemSomos .value-card:hover .value-icon { background: linear-gradient(135deg, #ffffff 0%, #d8d8d8 100%); border-color: transparent; color: #141414; transform: translateY(-2px) scale(1.05); } .EstQuemSomos .value-icon i { width: 28px; height: 28px; stroke-width: 1.6; } .EstQuemSomos .value-card span:last-child { position: relative; z-index: 1; font-weight: 600; font-size: clamp(16px, 1.4vw, 19px); color: #fff; line-height: 1.3; } /* ============================================================ DIFERENCIAIS - cards com ícone grafite ============================================================ */ .EstQuemSomos .about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .EstQuemSomos .pillar { position: relative; text-align: center; padding: 50px 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); } .EstQuemSomos .pillar:hover { transform: translateY(-8px); box-shadow: 0 26px 52px rgba(20, 20, 20, .14); border-color: transparent; } .EstQuemSomos .pillar-icon { display: inline-flex; align-items: center; justify-content: center; width: 78px; height: 78px; margin: 0 auto 26px; border-radius: 20px; background: var(--graphite); color: #fff; transition: transform .35s var(--ease); } .EstQuemSomos .pillar:hover .pillar-icon { transform: scale(1.06); } .EstQuemSomos .pillar-icon i { width: 34px; height: 34px; stroke-width: 1.7; } .EstQuemSomos .pillar h3 { font-weight: 600; font-size: clamp(22px, 2vw, 28px); margin-bottom: 14px; color: var(--ink); } .EstQuemSomos .pillar p { color: var(--gray); font-weight: 300; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; } /* ============================================================ RESPONSIVO - específico desta página ============================================================ */ @media (max-width: 860px) { .EstQuemSomos .section-head { margin-bottom: 48px; } .EstQuemSomos .about-lead { grid-template-columns: 1fr; gap: 44px; } .EstQuemSomos .focus-grid, .EstQuemSomos .about-grid { grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 56px; } .EstQuemSomos .values-grid { grid-template-columns: 1fr 1fr; gap: 18px; } .EstQuemSomos .mvo-list { grid-template-columns: 1fr; gap: 18px; } .EstQuemSomos .mvo-row { padding: 30px 30px; } } @media (max-width: 560px) { .EstQuemSomos .focus-grid, .EstQuemSomos .about-grid { grid-template-columns: 1fr; gap: 16px; } /* valores: mantém 2 colunas em telas pequenas */ .EstQuemSomos .values-grid { grid-template-columns: 1fr 1fr; gap: 14px; } .EstQuemSomos .value-card { padding: 26px 14px; gap: 14px; } .EstQuemSomos .value-icon { width: 52px; height: 52px; border-radius: 14px; } .EstQuemSomos .value-icon i { width: 24px; height: 24px; } .EstQuemSomos .focus-card { padding: 38px 28px 32px; } .EstQuemSomos .pillar { padding: 40px 28px; } .EstQuemSomos .mvo-row { padding: 26px 24px; } .EstQuemSomos .focus-note { flex-direction: column; gap: 10px; } }