/* ========================================================================== INVEE HUB — pages/contato.css · página de contato (apex escuro + Contabiliza-e petróleo→branco) Compartilhado: variações por classe no (.brand-invee / .brand-contabilizae). Carregar DEPOIS de /assets/css/base.css. 1 px do Figma @1920 = var(--u). ========================================================================== */ main{position:relative;overflow:hidden;isolation:isolate} main > section{position:relative;z-index:1} /* ---------- brilho de fundo (Ellipse #3B3B3B blur 500 do Figma) — só na Invee ---------- */ .pg-glow{position:absolute;z-index:0;display:block;pointer-events:none;border-radius:50%; width:calc(1300*var(--u));height:calc(1300*var(--u));right:calc(-420*var(--u));top:calc(-380*var(--u)); background:radial-gradient(circle closest-side,rgba(59,59,59,.78) 0%,rgba(59,59,59,.5) 24%,rgba(59,59,59,.22) 50%,rgba(59,59,59,.06) 76%,rgba(59,59,59,0) 100%)} /* ---------- cabeçalho da página (sem foto): sob o header fixo · eyebrow → h1 caixa-alta → lead ---------- */ .page-head{padding-top:calc(var(--hdr-h) + clamp(48px,calc(150*var(--u)),150px));padding-bottom:clamp(40px,calc(96*var(--u)),96px)} .page-head .h1{max-width:clamp(320px,calc(980*var(--u)),980px)} .page-head .lead{max-width:730px;margin-top:clamp(16px,calc(26*var(--u)),26px)} .brand-invee .page-head .lead{color:var(--gray-2)} /* Contabiliza-e: faixa petróleo como o hero da home + sunburst (mesmo grafismo, cortado) */ .brand-contabilizae .page-head{background:var(--petrol);color:var(--white);--fg:var(--white);--line:var(--white);overflow:hidden;padding-bottom:clamp(56px,calc(120*var(--u)),120px)} .brand-contabilizae .page-head .container{position:relative;z-index:1} .brand-contabilizae .page-head .lead{color:rgba(255,255,255,.86)} .sunburst{position:absolute;z-index:0;pointer-events:none;user-select:none;left:calc(1080*var(--u));top:calc(-560*var(--u));width:calc(1294*var(--u));height:calc(1294*var(--u));max-width:none} /* ---------- seção do formulário: form (1fr) + cards (560) ---------- */ .contact{padding-top:clamp(48px,calc(100*var(--u)),100px);padding-bottom:clamp(80px,calc(170*var(--u)),170px)} .contact-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,calc(560*var(--u)),560px);gap:clamp(32px,calc(80*var(--u)),80px) clamp(24px,calc(100*var(--u)),100px);align-items:start} /* formulário (base: .field label accent/upper · inputs 56 px r6) */ .form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,calc(30*var(--u)),30px) clamp(16px,calc(19*var(--u)),19px)} .form .full{grid-column:1 / -1} .field input,.field select,.field textarea{transition:border-color .25s var(--ease),background .25s var(--ease)} .field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:1} .field select option{color:var(--carbon);background:var(--white)} .select{position:relative} .select select{appearance:none;-webkit-appearance:none;padding-right:52px;cursor:pointer} .select::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none;opacity:.75} .brand-invee .field input,.brand-invee .field select,.brand-invee .field textarea{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.03)} .brand-invee .field input:focus,.brand-invee .field select:focus,.brand-invee .field textarea:focus{border-color:var(--gold);background:rgba(255,255,255,.05)} .brand-contabilizae .field label{color:var(--petrol)} .brand-contabilizae .field input,.brand-contabilizae .field select,.brand-contabilizae .field textarea{border-color:rgba(11,44,56,.32);color:var(--petrol);background:var(--white)} .brand-contabilizae .field input:focus,.brand-contabilizae .field select:focus,.brand-contabilizae .field textarea:focus{border-color:var(--petrol)} .brand-contabilizae .field input::placeholder,.brand-contabilizae .field textarea::placeholder{color:rgba(11,44,56,.5)} .form-foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:clamp(4px,calc(10*var(--u)),10px)} .consent{font-size:var(--fs-16);line-height:1.34;color:var(--muted);max-width:440px} .consent a{text-decoration:underline;text-underline-offset:3px;transition:color .25s} .consent a:hover{color:var(--accent)} .brand-contabilizae .consent{color:rgba(11,44,56,.72)} .brand-contabilizae .consent a:hover{color:var(--petrol)} .form .btn{min-width:clamp(0px,calc(357*var(--u)),357px)} .brand-contabilizae .form .btn{min-width:clamp(220px,calc(316*var(--u)),316px);padding:0 clamp(24px,calc(43*var(--u)),43px) 0 clamp(20px,calc(35*var(--u)),35px)} .form-msg{grid-column:1 / -1;margin:0} .brand-contabilizae .form-msg.ok{color:#2E7D55} .brand-contabilizae .form-msg.err{color:#B3402C} /* cards de canais (mesma família dos cards 560 r14 da home) */ .contact-cards{display:grid;gap:clamp(12px,calc(19*var(--u)),19px)} .ccard{position:relative;display:flex;flex-direction:column;padding:clamp(22px,calc(34*var(--u)),34px) clamp(22px,calc(42*var(--u)),42px) clamp(24px,calc(36*var(--u)),36px);border-radius:var(--card-r);background:var(--surface);color:var(--fg);transition:transform .35s var(--ease),box-shadow .35s var(--ease)} .ccard:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.18)} .brand-invee .ccard{background:var(--carbon-2)} .brand-contabilizae .ccard{background:var(--snow);color:var(--petrol);--fg:var(--petrol)} .ccard .eyebrow{margin-bottom:clamp(10px,calc(14*var(--u)),14px)} .brand-contabilizae .ccard .eyebrow{color:var(--petrol)} .ccard .val{display:block;font-size:var(--fs-24);font-weight:500;line-height:1.34;overflow-wrap:anywhere} .ccard .val a{transition:color .25s} .ccard .val a:hover{color:var(--accent)} .brand-contabilizae .ccard .val a:hover{color:#2E7D55} .ccard .note{margin-top:clamp(8px,calc(12*var(--u)),12px);font-size:var(--fs-20);line-height:1.34;color:var(--muted-2)} .brand-invee .ccard .note{color:var(--gray-4)} .brand-contabilizae .ccard .note{color:rgba(11,44,56,.72)} .ccard .link-arrow{align-self:flex-start;margin-top:clamp(16px,calc(24*var(--u)),24px);padding-bottom:10px;gap:22px;font-size:var(--fs-16)} .contact-cards .ccard:nth-child(2){--d:.1s} .contact-cards .ccard:nth-child(3){--d:.2s} .contact-cards .ccard:nth-child(4){--d:.3s} /* ---------- responsivo ---------- */ @media (max-width:1024px){ .pg-glow{width:900px;height:900px;right:-320px;top:-320px} .sunburst{left:44%;top:-34%;width:92vw;height:92vw} .contact-grid{grid-template-columns:1fr} } @media (max-width:640px){ .page-head .h1,.err .h1{max-width:none} .page-head .h1 br{display:none} /* no celular o h1 quebra sozinho (sem 'SOBRE' órfão) */ .form{grid-template-columns:1fr} .form .btn,.brand-contabilizae .form .btn{width:100%;min-width:0;justify-content:space-between} .form-foot{flex-direction:column;align-items:stretch} .consent{max-width:none} .ccard{padding:22px 22px 24px} }