/* 004labs — layout "Rede" (variante A) */ :root { --bg: #F7F8FB; --ink: #0E1420; --accent: #3D6BFF; --accent-hover: #2F57D9; --accent-soft: #8FA9FF; --dark: #0B0F1A; --light: #F7F8FB; --white: #FFFFFF; --line: rgba(14, 20, 32, 0.1); --line-strong: rgba(14, 20, 32, 0.16); --muted: rgba(14, 20, 32, 0.62); --muted-2: rgba(14, 20, 32, 0.66); --muted-3: rgba(14, 20, 32, 0.55); --muted-4: rgba(14, 20, 32, 0.5); --muted-5: rgba(14, 20, 32, 0.45); --on-dark-70: rgba(247, 248, 251, 0.7); --on-dark-60: rgba(247, 248, 251, 0.6); --on-dark-55: rgba(247, 248, 251, 0.55); --on-dark-line: rgba(247, 248, 251, 0.12); --container: 1240px; --gutter: 32px; --radius-xl: 32px; --radius-lg: 28px; --radius-md: 24px; } @media (max-width: 640px) { :root { --gutter: 16px; } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: 'Manrope', system-ui, sans-serif; -webkit-font-smoothing: antialiased; } body { min-height: 100vh; overflow-x: hidden; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent); } input, textarea, button { font-family: inherit; } input::placeholder, textarea::placeholder { color: rgba(14, 20, 32, 0.38); } h1, h2, h3, p { margin: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* i18n: cada texto existe em PT e EN; o decide qual aparece */ html[data-lang="pt"] [lang="en"], html[data-lang="en"] [lang="pt"] { display: none !important; } .container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .section { padding-top: 96px; } .section--tight { padding-top: 56px; } .section--xtight { padding-top: 48px; } .section--flush { padding-top: 24px; } .section--manifesto { padding-top: 112px; } /* ---------- Tipografia ---------- */ .eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .eyebrow--dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .eyebrow--dim { color: rgba(247, 248, 251, 0.5); } .h1 { font-size: clamp(44px, 6.2vw, 86px); font-weight: 800; letter-spacing: -0.045em; line-height: 0.98; text-wrap: balance; } .h1--page { font-size: clamp(42px, 6vw, 84px); } .h2 { font-size: clamp(34px, 4.2vw, 56px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; } .h2--panel { font-size: clamp(34px, 4.2vw, 58px); text-wrap: balance; } .h2--cta { font-size: clamp(36px, 5.4vw, 76px); letter-spacing: -0.045em; line-height: 0.98; max-width: 900px; text-wrap: balance; } .h3 { font-size: clamp(26px, 3vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; } .accent { color: var(--accent); } .lead { font-size: 19px; line-height: 1.55; color: var(--muted-2); text-wrap: pretty; max-width: 540px; } .lead--md { font-size: 18px; max-width: 560px; } .lead--sm { font-size: 17px; max-width: 420px; } .copy { font-size: 16px; line-height: 1.55; color: var(--muted); } .copy--sm { font-size: 15px; } .note { font-size: 13px; font-weight: 600; color: var(--muted-4); } .note--xs { font-size: 12px; color: var(--muted-5); } .stack { display: flex; flex-direction: column; } .stack-28 { gap: 28px; } .stack-26 { gap: 26px; } .stack-22 { gap: 22px; } .stack-14 { gap: 14px; } .stack-10 { gap: 10px; } /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; font-weight: 700; cursor: pointer; border: none; transition: background .2s, border-color .2s, color .2s; white-space: nowrap; } .btn--primary { background: var(--accent); color: #fff; } .btn--primary:hover { background: var(--accent-hover); color: #fff; } .btn--outline { background: transparent; border: 1.5px solid var(--line-strong); color: var(--ink); } .btn--outline:hover { border-color: var(--ink); color: var(--ink); } .btn--sm { height: 42px; padding: 0 20px; font-size: 14px; } .btn--md { height: 52px; padding: 0 24px; font-size: 15px; } .btn--lg { height: 54px; padding: 0 26px; font-size: 16px; } .btn--xl { height: 56px; padding: 0 28px; font-size: 16px; } .btn--xs { height: 46px; padding: 0 20px; font-size: 14px; } .btn .arrow { font-size: 18px; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } .link-accent { font-size: 15px; font-weight: 700; color: var(--accent); } .link-underline { font-size: 16px; font-weight: 700; color: var(--light); border-bottom: 1.5px solid rgba(247, 248, 251, 0.3); } .link-underline:hover { color: var(--accent); } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(247, 248, 251, 0.84); border-bottom: 1px solid rgba(14, 20, 32, 0.08); } .nav__inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: center; gap: 10px; color: var(--ink); } .brand:hover { color: var(--ink); } .brand__name { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; } .nav__links { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 600; } .nav__links a { color: rgba(14, 20, 32, 0.6); padding-bottom: 2px; border-bottom: 2px solid transparent; } .nav__links a:hover { color: var(--ink); } .nav__links a[aria-current="page"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); } .nav__actions { display: flex; align-items: center; gap: 12px; } .lang-toggle { height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: transparent; font-weight: 700; font-size: 13px; cursor: pointer; color: var(--ink); display: flex; align-items: center; transition: border-color .2s; } .lang-toggle:hover { border-color: var(--ink); } .lang-toggle .sep { opacity: 0.35; margin: 0 5px; } .lang-toggle .off { opacity: 0.45; } @media (max-width: 820px) { .nav__inner { gap: 16px; } .nav__links { gap: 18px; font-size: 14px; } .nav__cta { display: none; } } @media (max-width: 520px) { .brand__name { display: none; } .nav__links { gap: 14px; } } /* ---------- Hero (Home) ---------- */ .hero { padding-top: 64px; padding-bottom: 32px; } .hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 40px; align-items: center; } .hero__copy { display: flex; flex-direction: column; gap: 28px; min-width: 0; } .hero__visual { position: relative; min-height: 540px; border-radius: var(--radius-xl); background: radial-gradient(circle at 50% 46%, rgba(61, 107, 255, 0.16), rgba(61, 107, 255, 0) 60%); } .visual-fill { position: absolute; inset: 0; } .visual-hint { position: absolute; right: 20px; bottom: 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(14, 20, 32, 0.4); pointer-events: none; } @media (max-width: 640px) { .hero { padding-top: 40px; } .hero__visual { min-height: 380px; } } /* ---------- Faixa de IAs ---------- */ .ai-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .ai-strip__label { font-size: 13px; font-weight: 700; color: var(--muted-4); } .ai-strip__list { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; font-weight: 700; } .ai-strip__list span { display: flex; align-items: center; gap: 8px; } .ai-strip__list span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* ---------- Painéis escuros ---------- */ .panel { background: var(--dark); color: var(--light); border-radius: var(--radius-xl); overflow: hidden; } .panel--split { padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 40px; align-items: center; } .panel__copy { display: flex; flex-direction: column; gap: 26px; min-width: 0; } .panel__lead { font-size: 17px; line-height: 1.6; color: var(--on-dark-70); text-wrap: pretty; } .panel__lead--lg { font-size: 19px; line-height: 1.5; color: rgba(247, 248, 251, 0.75); max-width: 520px; } .panel__visual { position: relative; min-height: 520px; } .panel__visual--tall { min-height: 540px; } .panel__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .panel__note { font-size: 13px; font-weight: 600; color: var(--on-dark-55); } .panel--cta { padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 64px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; } .panel--cta .panel__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; } .panel--banner { padding: clamp(36px, 5vw, 56px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 40px; } .panel--banner .h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; text-wrap: balance; } .geo-title { font-size: clamp(56px, 7vw, 110px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.9; } @media (max-width: 640px) { .panel__visual, .panel__visual--tall { min-height: 380px; } } .feature-list { display: flex; flex-direction: column; } .feature { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--on-dark-line); } .feature__n { font-size: 13px; font-weight: 700; color: var(--accent); padding-top: 3px; } .feature__body { display: flex; flex-direction: column; gap: 4px; } .feature__title { font-size: 17px; font-weight: 700; } .feature__desc { font-size: 14px; line-height: 1.5; color: var(--on-dark-60); } .pill { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: rgba(61, 107, 255, 0.1); color: var(--accent); } .pill--on-dark { background: rgba(61, 107, 255, 0.18); color: var(--accent-soft); } .pill-row { display: flex; align-items: center; gap: 10px; } /* ---------- Cabeçalhos de seção ---------- */ .section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 36px; } .section-head--loose { gap: 24px 40px; margin-bottom: 0; } .section-head__copy { display: flex; flex-direction: column; gap: 14px; max-width: 640px; } .section-head__copy--wide { max-width: 720px; gap: 22px; } .section-head__aside { max-width: 380px; } .section-head__aside--wide { max-width: 420px; } .section-head--solo { margin-bottom: 44px; } /* ---------- Cards ---------- */ .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); } .card--lg { border-radius: var(--radius-lg); } .card-grid { display: grid; gap: 16px; } .card-grid--services { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } .card-grid--cases { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } .card-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); } .service-card { padding: 28px; min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; transition: transform .25s, border-color .25s; } .service-card:hover { border-color: var(--accent); transform: translateY(-3px); } .service-card__n, .step__n, .case__n { font-size: 13px; font-weight: 700; color: var(--accent); } .service-card__title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; } .service-card__desc { font-size: 15px; line-height: 1.5; color: var(--muted); } .service-card__body { display: flex; flex-direction: column; gap: 8px; } /* ---------- Passos ---------- */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 24px 20px; } .step { display: flex; flex-direction: column; gap: 14px; } .step__track { position: relative; height: 28px; } .step__track::before { content: ""; position: absolute; left: 8px; right: -20px; top: 13px; height: 2px; background: rgba(14, 20, 32, 0.12); } .step:last-child .step__track::before { right: 0; } .step__track::after { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px rgba(61, 107, 255, 0.14); } .step__title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; } .step__desc { font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 280px; } /* ---------- Projeto em destaque (Home) ---------- */ .featured { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 24px; padding: 36px; color: var(--ink); transition: border-color .25s; } .featured:hover { border-color: var(--accent); color: var(--ink); } .featured__main { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; } .featured__name { font-size: clamp(40px, 5vw, 72px); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; } .featured__desc { font-size: 18px; line-height: 1.5; color: var(--muted-2); max-width: 440px; } .featured__scores { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; border-left: 1px solid var(--line); padding-left: 24px; } .score-line { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; padding: 10px 0; border-bottom: 1px solid rgba(14, 20, 32, 0.08); } .score-line:has(+ .note) { border-bottom: none; } .score-line__site { color: var(--muted-3); } .score-line__value { color: var(--accent); } @media (max-width: 640px) { .featured { padding: 24px; } .featured__scores { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 16px; } } /* ---------- Manifesto ---------- */ .manifesto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 24px; border-top: 1px solid var(--line); padding-top: 40px; } .manifesto__text { font-size: clamp(26px, 3.1vw, 42px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.18; text-wrap: pretty; } @media (max-width: 640px) { .manifesto { grid-template-columns: 1fr; } } /* ---------- Footer ---------- */ .footer { padding: 40px var(--gutter) 48px; } .footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; border-top: 1px solid var(--line); padding-top: 28px; font-size: 14px; font-weight: 600; color: var(--muted-3); } .footer__brand { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 800; } .footer__links { display: flex; flex-wrap: wrap; gap: 24px; } .footer__links a { color: rgba(14, 20, 32, 0.7); } .footer__links a:hover { color: var(--accent); } /* ---------- Projetos ---------- */ .report { grid-column: 1 / -1; padding: clamp(24px, 3.5vw, 40px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 32px 48px; align-items: start; } .report__copy { display: flex; flex-direction: column; gap: 14px; } .report__copy .copy { max-width: 380px; } .scores { display: flex; flex-direction: column; min-width: 0; } .score-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 40px; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(14, 20, 32, 0.08); font-size: 14px; font-weight: 700; } .score-row__bar { height: 8px; border-radius: 999px; background: rgba(14, 20, 32, 0.07); overflow: hidden; display: block; } .score-row__bar span { display: block; height: 8px; border-radius: 999px; background: var(--accent); width: var(--score, 0%); } .score-row__value { text-align: right; color: var(--accent); } @media (max-width: 400px) { .score-row { grid-template-columns: 90px minmax(0, 1fr) 36px; gap: 10px; } } .case-card { padding: 16px; display: flex; flex-direction: column; gap: 14px; } .case-card__shot { position: relative; height: 260px; border-radius: 16px; background: var(--dark); overflow: hidden; display: flex; align-items: center; justify-content: center; } .case-card__lines { position: absolute; inset: 26px 28px; display: flex; flex-direction: column; gap: 16px; opacity: 0.28; filter: blur(3px); pointer-events: none; } .case-card__lines span { height: 12px; border-radius: 4px; background: var(--light); } .case-card__stamp { position: relative; transform: rotate(-8deg); padding: 12px 22px; border: 3px solid var(--accent); border-radius: 10px; color: var(--accent); font-size: 22px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; box-shadow: 0 0 0 5px rgba(61, 107, 255, 0.14); } .case-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 8px 8px; font-size: 15px; font-weight: 700; } .case-cta { border: 1.5px dashed rgba(61, 107, 255, 0.5); border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 320px; color: var(--ink); transition: border-color .25s, background .25s; } .case-cta:hover { border-color: var(--accent); background: rgba(61, 107, 255, 0.05); color: var(--ink); } .case-cta__title { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; } .fronts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 40px; align-items: start; } .fronts__list { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .front { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); } .front__n { font-size: 13px; font-weight: 700; color: var(--accent); padding-top: 4px; } .front__title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; } .front__desc { font-size: 15px; line-height: 1.5; color: var(--muted); } /* ---------- Contatos ---------- */ .contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr); gap: 24px; align-items: start; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } } .form-card { padding: clamp(24px, 3.5vw, 40px); min-width: 0; } .form { display: flex; flex-direction: column; gap: 22px; } .form[hidden], .form-success[hidden] { display: none; } .field { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 700; color: rgba(14, 20, 32, 0.7); } .field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; } .input { height: 52px; border-radius: 14px; border: 1.5px solid rgba(14, 20, 32, 0.14); background: var(--bg); padding: 0 16px; font-size: 15px; font-weight: 600; color: var(--ink); outline: none; width: 100%; transition: border-color .2s, background .2s; } .input:focus { border-color: var(--accent); background: var(--white); } textarea.input { height: auto; padding: 14px 16px; resize: vertical; line-height: 1.5; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(14, 20, 32, 0.14); background: var(--white); color: var(--ink); font-weight: 700; font-size: 14px; cursor: pointer; transition: background .2s, border-color .2s, color .2s; } .chip:hover { border-color: var(--ink); } .chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--white); } .form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; } .form__error { font-size: 13px; font-weight: 600; color: #C2381F; } .form-success { display: flex; flex-direction: column; gap: 20px; min-height: 420px; justify-content: center; align-items: flex-start; } .form-success .h2:focus { outline: none; } .form-success .h2 { font-size: clamp(36px, 4.6vw, 60px); letter-spacing: -0.04em; line-height: 1; } .form-success p { max-width: 440px; font-size: 17px; line-height: 1.55; color: var(--muted-2); } .contact-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .contact-visual { position: relative; min-height: 300px; border-radius: var(--radius-lg); background: var(--dark); overflow: hidden; } .contact-visual__hint { position: absolute; left: 22px; bottom: 18px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-55); pointer-events: none; } .contact-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; color: var(--ink); transition: border-color .25s; } .contact-card:hover { border-color: var(--accent); color: var(--ink); } .contact-card__title { font-size: clamp(18px, 1.8vw, 22px); font-weight: 800; letter-spacing: -0.02em; } .contact-card__title--break { word-break: break-all; } .contact-card__desc { font-size: 14px; color: var(--muted-3); } .contact-card .btn--outline { align-self: flex-start; margin-top: 6px; } /* ---------- Acessibilidade / movimento ---------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { .service-card, .btn, .chip, .input, .contact-card, .case-cta, .featured { transition: none; } } /* ---------- Seletor de layout (A/B/C) ---------- */ .switcher { position: fixed; left: 16px; bottom: 16px; z-index: 30; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--ink); color: var(--light); font-size: 12px; font-weight: 700; box-shadow: 0 8px 24px rgba(14, 20, 32, 0.25); } .switcher a { padding: 8px 12px; border-radius: 999px; color: rgba(247, 248, 251, 0.7); } .switcher a:hover { color: #fff; } .switcher a[aria-current="true"] { background: var(--accent); color: #fff; }