/* ============================================================ SBA EDGE — DESIGN TOKENS Derivado de tokens.json (v2025.1). Não edite valores aqui: altere tokens.json e propague. Uso: cole no de qualquer peça HTML, ou importe com @import "tokens.css". ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300..900;1,300..900&family=Bebas+Neue&display=swap'); :root { /* ---------- Paleta de marca ---------- */ --sba-green: #00C389; /* Pantone 3395 — primária */ --sba-navy: #002050; /* CMYK 100 79 0 37 — solidez (Pantone a confirmar) */ --sba-teal: #008B95; /* Pantone 321 — conectividade */ --sba-yellow: #FFF447; /* Pantone 101 — acento/alerta */ --sba-dark-gray: #5E6A71; /* Pantone 431 — texto */ --sba-light-gray: #C3C8C8; /* Pantone 428 — bordas/contêineres */ --sba-black: #000000; --sba-white: #FFFFFF; /* ---------- Papéis semânticos ---------- */ --sba-bg: var(--sba-white); --sba-bg-alt: #F4F6F6; /* lightGray a 25% sobre branco */ --sba-bg-dark: var(--sba-navy); --sba-bg-deep: var(--sba-black); --sba-text: var(--sba-dark-gray); --sba-text-strong: var(--sba-navy); --sba-text-on-dark: var(--sba-white); --sba-text-on-green: var(--sba-navy); /* branco sobre green reprova em AA */ --sba-action: var(--sba-green); --sba-link: var(--sba-navy); --sba-alert: var(--sba-yellow); --sba-border: var(--sba-light-gray); --sba-border-strong: var(--sba-dark-gray); /* ---------- Gradientes ---------- */ --sba-grad-velocidade: linear-gradient(135deg, #002050 0%, #00C389 100%); --sba-grad-conectividade: linear-gradient(135deg, #002050 0%, #008B95 100%); --sba-grad-profundidade: linear-gradient(180deg, #002050 0%, #000000 100%); /* ---------- Tipografia ---------- */ --sba-font-sans: 'Mulish', 'Muli', Arial, Helvetica, sans-serif; --sba-font-display: 'Bebas Neue', 'Bebas', 'Britanica', Impact, sans-serif; --sba-font-docs: Arial, Helvetica, sans-serif; --sba-fs-display: 4rem; --sba-lh-display: 1.05; --sba-fs-title: 2.5rem; --sba-lh-title: 1.15; --sba-fs-headline: 1.5rem; --sba-lh-headline: 1.3; --sba-fs-subtitle: 1.125rem; --sba-lh-subtitle: 1.4; --sba-fs-body: 1rem; --sba-lh-body: 1.6; --sba-fs-small: 0.875rem; --sba-lh-small: 1.5; --sba-fs-caption: 0.75rem; --sba-lh-caption: 1.4; --sba-measure: 68ch; /* ---------- Espaçamento: grade de 8px = grade de cubos ---------- */ --sba-space-1: 4px; --sba-space-2: 8px; --sba-space-3: 16px; --sba-space-4: 24px; --sba-space-5: 32px; --sba-space-6: 48px; --sba-space-7: 64px; --sba-space-8: 96px; --sba-space-9: 128px; /* ---------- Raio: geometria nítida, nunca arredondada demais ---------- */ --sba-radius-sm: 2px; --sba-radius-md: 4px; --sba-radius-lg: 8px; --sba-radius-pill: 999px; /* ---------- Elevação ---------- */ --sba-shadow-sm: 0 1px 2px rgba(0, 32, 80, 0.08); --sba-shadow-md: 0 4px 12px rgba(0, 32, 80, 0.10); --sba-shadow-lg: 0 12px 32px rgba(0, 32, 80, 0.14); /* ---------- Movimento: rápido e preciso ---------- */ --sba-ease: cubic-bezier(0.2, 0, 0.1, 1); --sba-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --sba-dur-fast: 120ms; --sba-dur-base: 200ms; --sba-dur-enter: 320ms; /* ---------- Grade ---------- */ --sba-container: 1280px; --sba-gutter: 24px; --sba-margin: 64px; } @media (max-width: 768px) { :root { --sba-fs-display: 2.5rem; --sba-fs-title: 2rem; --sba-fs-headline: 1.25rem; --sba-margin: 24px; } } /* ============================================================ PADRÃO GRÁFICO: MALHA DE CUBOS Detalhe geométrico da marca. Use como fundo sutil de seção, nunca sobre o logo nem atrás de texto corrido. ============================================================ */ .sba-cubes { background-image: linear-gradient(to right, rgba(0, 195, 137, 0.10) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 195, 137, 0.10) 1px, transparent 1px); background-size: 48px 48px; } .sba-cubes--dark { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 48px 48px; } /* ============================================================ DUOTONE — tratamento oficial de fotografia A foto vai para preto e branco e recebe o gradiente da marca por cima. A cor entra NA foto, não só ao lado dela. Referência: assets/fotos/equipe/noc-atendimento-duotone.png ============================================================ */ .sba-duotone { background: var(--sba-grad-velocidade); overflow: hidden; line-height: 0; } .sba-duotone img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: luminosity; filter: grayscale(1) contrast(1.06); } .sba-duotone--conectividade { background: var(--sba-grad-conectividade); } /* Corte reto vertical do key visual: faixa clara em um dos lados */ .sba-duotone--faixa { position: relative; } .sba-duotone--faixa::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 10%; background: var(--sba-white); z-index: 1; } /* ============================================================ TIPOGRAFIA EM GRADIENTE Usada nos lockups de chamada. Só em display/title, nunca em corpo. ============================================================ */ .sba-text-gradient { background: var(--sba-grad-velocidade); -webkit-background-clip: text; background-clip: text; color: transparent; } @supports not (background-clip: text) { .sba-text-gradient { color: var(--sba-navy); } } /* ============================================================ BASE ============================================================ */ body { margin: 0; background: var(--sba-bg); color: var(--sba-text); font-family: var(--sba-font-sans); font-size: var(--sba-fs-body); line-height: var(--sba-lh-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { color: var(--sba-text-strong); margin: 0 0 var(--sba-space-3); } h1 { font-size: var(--sba-fs-title); line-height: var(--sba-lh-title); font-weight: 800; letter-spacing: -0.01em; } h2 { font-size: var(--sba-fs-headline); line-height: var(--sba-lh-headline); font-weight: 700; } h3 { font-size: var(--sba-fs-subtitle); line-height: var(--sba-lh-subtitle); font-weight: 600; } p { max-width: var(--sba-measure); margin: 0 0 var(--sba-space-3); } a { color: var(--sba-link); text-decoration: underline; text-underline-offset: 3px; } a:hover { color: var(--sba-teal); } /* ============================================================ COMPONENTES BASE ============================================================ */ .sba-display { font-family: var(--sba-font-display); font-size: var(--sba-fs-display); line-height: var(--sba-lh-display); letter-spacing: 0.01em; text-transform: uppercase; color: var(--sba-text-strong); } .sba-eyebrow { font-size: var(--sba-fs-caption); line-height: var(--sba-lh-caption); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sba-teal); } .sba-btn { display: inline-flex; align-items: center; gap: var(--sba-space-2); padding: 14px var(--sba-space-4); border: 0; border-radius: var(--sba-radius-md); background: var(--sba-action); color: var(--sba-text-on-green); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform var(--sba-dur-fast) var(--sba-ease), box-shadow var(--sba-dur-fast) var(--sba-ease); } .sba-btn:hover { transform: translateY(-1px); box-shadow: var(--sba-shadow-md); color: var(--sba-text-on-green); } .sba-btn:focus-visible { outline: 2px solid var(--sba-navy); outline-offset: 3px; } .sba-btn--secondary { background: transparent; color: var(--sba-navy); box-shadow: inset 0 0 0 2px var(--sba-navy); } .sba-btn--secondary:hover { background: var(--sba-navy); color: var(--sba-white); } .sba-btn--on-dark { background: var(--sba-green); color: var(--sba-navy); } .sba-card { background: var(--sba-white); border: 1px solid var(--sba-border); border-radius: var(--sba-radius-md); padding: var(--sba-space-4); transition: border-color var(--sba-dur-base) var(--sba-ease), box-shadow var(--sba-dur-base) var(--sba-ease); } .sba-card:hover { border-color: var(--sba-green); box-shadow: var(--sba-shadow-md); } /* Barra de acento no topo — detalhe de "fragmento de cubo" */ .sba-card--accent { border-top: 3px solid var(--sba-green); } .sba-tag { display: inline-block; padding: 4px var(--sba-space-2); border-radius: var(--sba-radius-sm); background: var(--sba-bg-alt); color: var(--sba-navy); font-size: var(--sba-fs-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .sba-tag--alert { background: var(--sba-yellow); color: var(--sba-navy); } .sba-container { max-width: var(--sba-container); margin-inline: auto; padding-inline: var(--sba-margin); } .sba-section { padding-block: var(--sba-space-8); } .sba-section--dark { background: var(--sba-bg-dark); color: var(--sba-text-on-dark); } .sba-section--dark h1, .sba-section--dark h2, .sba-section--dark h3, .sba-section--dark .sba-display { color: var(--sba-white); } .sba-section--dark .sba-eyebrow { color: var(--sba-green); } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }