/* ============================================================ CARTÃO PORTO BANK — folha de estilo própria Carregada por último no : organiza a tipografia e o visual por cima do CSS gerado pelo WordPress/Elementor. Sumário 1. Tokens (fonte, cores, escala tipográfica, espaçamentos) 2. Base 3. Botões 4. Topo (header) 5. Hero 6. Benefícios 7. Rodapé 8. Responsivo ============================================================ */ /* 1. Tokens --------------------------------------------------- */ :root{ --fonte:"Albert Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --azul-porto:#0A0047; /* cor primária do kit Elementor */ --azul-acento:#2E3185; /* cor de acento do kit Elementor */ --branco-90:rgba(255,255,255,.92); --branco-70:rgba(255,255,255,.7); /* Escala tipográfica (fluida entre mobile e desktop) */ --texto-xs:.8125rem; /* 13px — texto legal */ --texto-sm:.9375rem; /* 15px — apoio, botões */ --texto-lg:clamp(1.0625rem,.95rem + .5vw,1.25rem); /* 17→20px — parágrafo hero */ --titulo-secao:clamp(1.625rem,1.15rem + 2.1vw,2.25rem); /* 26→36px — h2 de seção */ --titulo-hero:clamp(2.25rem,1.55rem + 3.4vw,3.625rem); /* 36→58px — h1 */ --espaco-secao:clamp(48px,7vw,72px); --raio-botao:9px; } /* 2. Base ------------------------------------------------------ */ body.elementor-kit-6{font-family:var(--fonte);} /* 3. Botões (base única para todos os CTAs) -------------------- */ .elementor-kit-6 .elementor-button{ font-family:var(--fonte); font-size:var(--texto-sm); font-weight:700; letter-spacing:.04em; border-radius:var(--raio-botao); transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,color .15s ease; } .elementor-kit-6 .elementor-button.elementor-size-md{padding:15px 30px;} .elementor-kit-6 .elementor-button:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.25);} .elementor-kit-6 .elementor-button:focus-visible{outline:2px solid currentColor;outline-offset:3px;} @media (prefers-reduced-motion:reduce){ .elementor-kit-6 .elementor-button{transition:none;} .elementor-kit-6 .elementor-button:hover{transform:none;} } /* Variante clara: CTA primário sobre fundo escuro */ #hero .elementor-element-9fd0150 .elementor-button, #btnswrapp .btn-invert{background:#fff;color:var(--azul-porto);} #hero .elementor-element-9fd0150 .elementor-button:hover, #hero .elementor-element-9fd0150 .elementor-button:focus, #btnswrapp .btn-invert:hover, #btnswrapp .btn-invert:focus{background:#E9E9F4;color:var(--azul-porto);} /* 4. Topo ------------------------------------------------------ */ #topo{ --padding-block-start:16px; --padding-block-end:16px; --padding-inline-start:20px; --padding-inline-end:20px; } /* 5. Hero ------------------------------------------------------ */ #hero > .e-con-inner{gap:0;} /* o ritmo vertical fica só por conta do gap do container */ #hero .elementor-element-a33aa6f > .elementor-widget:not(:last-child){margin-block-end:0;} /* Selo introdutório ("Todo cuidado Porto…") */ #hero .hero-eyebrow{ font-size:var(--texto-sm); font-weight:500; line-height:1.45; letter-spacing:.01em; } #hero .hero-eyebrow b{font-weight:700;} #hero .elementor-element-8e59cf9 > .elementor-widget-container{ padding:7px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.18); } /* Título principal */ #hero .hero-title{ font-size:var(--titulo-hero); font-weight:800; line-height:1.05; letter-spacing:-.02em; } #hero .hero-title .hero-title-sub{ display:block; margin-top:.3em; font-size:.6em; font-weight:700; letter-spacing:-.01em; color:var(--branco-90); } /* Parágrafo de apoio (o Elementor fixa width:570px, o que estoura o mobile) */ #hero .hero-lead{ width:100%; max-width:570px; font-size:var(--texto-lg); line-height:1.65; color:var(--branco-90); } #hero .hero-lead b{color:#fff;} /* Par de CTAs lado a lado */ .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;} .hero-actions > .elementor-widget-button{width:auto;max-width:none;margin-block-end:0;} /* Imagem dos cartões: só no mobile (no desktop ela é o fundo da seção) */ #cartoes{margin:40px 0 -50px;} @media (min-width:700px){#cartoes{display:none;}} /* 6. Benefícios ------------------------------------------------ */ #beneficios{ display:flex; flex-direction:column; gap:28px; padding:var(--espaco-secao) 20px; background:url('/wp-content/uploads/2023/11/bgblack.webp') center/cover no-repeat; } #beneficios .section-title{ margin:0; text-align:center; color:#fff; font-size:var(--titulo-secao); font-weight:800; line-height:1.2; letter-spacing:-.01em; } #cardcont{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; width:100%; max-width:1200px; margin-inline:auto; } .cardbenef{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:22px 14px; background:#262626; border:1px solid rgba(255,255,255,.07); border-radius:16px; color:#fff; } .cardbenef img{width:64px;height:64px;padding:12px;background:#161616;border-radius:12px;} .cardbenef p{ margin:0; text-align:center; font-size:var(--texto-sm); font-weight:500; line-height:1.45; color:#ECECEC; } #btnswrapp{display:flex;flex-wrap:wrap;justify-content:center;align-self:center;gap:14px;} #btnswrapp > div{width:auto;max-width:none;margin-block-end:0;} /* 7. Rodapé ---------------------------------------------------- */ #rodape{ --padding-block-start:var(--espaco-secao); --padding-block-end:var(--espaco-secao); } #rodape .elementor-image-box-title{font-size:1.1875rem;font-weight:600;line-height:1.35;} #rodape .elementor-image-box-title a{text-decoration:none;} #rodape .elementor-image-box-title a:hover{text-decoration:underline;} #rodape .elementor-image-box-description{margin-top:4px;font-size:var(--texto-sm);color:rgba(255,255,255,.8);} /* "Contato / Central de vendas" tratado como rótulo de rodapé */ #rodape .elementor-element-cb5501a .elementor-heading-title{ font-size:var(--texto-sm); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.85); } #rodape .elementor-icon-list-text{font-size:1rem;font-weight:500;} #rodape .elementor-icon-list-item a{text-decoration:none;} #rodape .elementor-icon-list-item a:hover .elementor-icon-list-text{text-decoration:underline;} /* Texto legal */ #rodape .elementor-element-c3b19a5{ font-size:var(--texto-xs); line-height:1.6; color:var(--branco-70); border-top:1px solid rgba(255,255,255,.12); padding-top:20px; } /* 8. Responsivo ------------------------------------------------ */ @media (max-width:1200px){#cardcont{grid-template-columns:repeat(4,minmax(0,1fr));}} @media (max-width:900px){#cardcont{grid-template-columns:repeat(3,minmax(0,1fr));}} @media (max-width:600px){#cardcont{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width:767px){ #logos{justify-content:center;} .hero-actions{width:100%;} .hero-actions > .elementor-widget-button, .hero-actions .elementor-button{width:100%;} #btnswrapp{flex-direction:column;align-self:stretch;} #btnswrapp > div, #btnswrapp .elementor-widget-container, #btnswrapp .elementor-button{width:100%;} }