/* ========================================================================== FAROL — Consultoria para Marketplaces Paleta oficial do Manual de Marca: Farol Black, Grafite, Cinza Neblina, Luz Branca — sem dourado. Contraste por peso/tamanho/espaço, não por cor. Tipografia: Astoin (display, arquivo próprio) + Articulat CF (a General Sans substitui a Articulat CF até a licença Adobe Fonts ser adquirida — ver comentário no do index.html). ========================================================================== */ @font-face { font-family: "Astoin"; src: url("assets/fonts/Astoin-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* --- paleta oficial do manual --- */ --ink: #000000; /* Farol Black */ --graphite: #3d3d3d; /* Grafite */ --mist: #bebebe; /* Cinza Neblina */ --paper: #ffffff; /* Luz Branca */ /* degradê de cinza (escala entre as 4 cores oficiais, mesma curva tonal da foto "base fundo.png" que inspirou o fundo do site) */ --grey-950: #0c0d0f; --grey-900: #131417; --grey-850: #17181c; --grey-800: #1d1f24; --grey-700: #2a2d33; --grey-600: #3a3e46; /* corpo de texto/subtítulos em telas escuras precisa de mais contraste que a escala "oficial" renderizava — clareados em relação ao original para melhorar a leitura, mantendo a mesma hierarquia entre os tons */ --grey-400: #9a9ea7; --grey-300: #c6c9ce; --grey-200: #dfe1e5; --white: #f5f6f8; /* acento único: Luz Branca. Hierarquia vem de peso e opacidade, não de matiz. */ --accent: var(--paper); --accent-soft: var(--mist); /* degradê de cinza extraído de "base fundo.png": céu #767676 -> mar #2c2c2c */ --bg: linear-gradient(178deg, #6f7275 0%, #5a5d61 16%, #45484c 34%, #313438 54%, #212327 76%, #16171a 100%); --display: "Fraunces", Georgia, serif; --sans: "General Sans", system-ui, -apple-system, sans-serif; --maxw: 1560px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--sans); color: var(--grey-200); background: var(--grey-950); background-image: var(--bg); background-attachment: fixed; line-height: 1.6; font-weight: 300; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* camada de fundo: névoa/vinheta cinza (mesma atmosfera da foto do farol) */ .seabg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% -6%, rgba(176,180,185,0.18), transparent 52%), radial-gradient(160% 130% at 50% 128%, rgba(0,0,0,0.55), transparent 58%), radial-gradient(100% 60% at 12% 40%, rgba(0,0,0,0.28), transparent 60%), radial-gradient(100% 60% at 88% 40%, rgba(0,0,0,0.28), transparent 60%); } /* textura sutil por cima do degradê — o brightness eleva a média da imagem para o cinza neutro do soft-light, então os TONS do fundo não mudam: só o relevo/manchas da textura aparece. Intensidade = opacity. */ .texture { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: url("assets/textura.jpg") center / cover no-repeat; mix-blend-mode: soft-light; filter: brightness(2.4) contrast(1.15); opacity: 0.5; } img { max-width: 100%; display: block; } /* Container mais largo que o padrão "1180px genérico" — em telas grandes o conteúdo ocupa de fato o espaço, em vez de sobrar vazio nas laterais. Padding lateral em vw faz a margem respirar proporcionalmente à tela. */ .container { width: min(var(--maxw), calc(100% - 8vw)); margin-inline: auto; } /* título de seção não ocupa 100% do container — fica mais estreito e alinhado à esquerda, como uma manchete editorial, deixando espaço assimétrico à direita em vez do bloco centralizado padrão */ .section__head { max-width: 44rem; } /* ---------- textura + feixe de luz ------------------------------------- */ .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .beam { position: fixed; top: -30vh; left: 50%; width: 140vw; height: 80vh; transform: translateX(-50%) rotate(8deg); background: radial-gradient(ellipse at top, rgba(255,255,255,0.09), transparent 60%); pointer-events: none; z-index: 0; filter: blur(20px); } /* ---------- tipografia base -------------------------------------------- */ .eyebrow { display: inline-block; font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--paper); font-weight: 600; margin-bottom: 1.4rem; } .eyebrow--dark { color: var(--mist); } .section__title { font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.08; color: var(--white); letter-spacing: 0.5px; margin-bottom: 3rem; } .section__title .muted { color: var(--grey-400); font-style: italic; } .muted { color: var(--grey-400); } .section { padding: clamp(5rem, 11vw, 9rem) 0; position: relative; z-index: 2; } /* ---------- botões ----------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.92rem 1.95rem; border-radius: 8px; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; text-decoration: none; cursor: pointer; transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.35s var(--ease); border: 1px solid transparent; } /* CTA principal: Luz Branca sólida — o contraste máximo contra o fundo escuro já É o destaque, sem precisar de cor */ .btn--gold { background: var(--paper); color: var(--ink); font-weight: 800; box-shadow: 0 0 0 rgba(255,255,255,0); } .btn--gold:hover { box-shadow: 0 10px 34px -8px rgba(255,255,255,0.4); transform: translateY(-2px); } /* botões secundários: cinza c/ branco -> branco c/ preto negrito no hover */ .btn--ghost { background: rgba(255,255,255,0.07); border-color: rgba(205,210,218,0.30); color: var(--white); } .btn--ghost:hover { background: #ffffff; border-color: #ffffff; color: #101216; font-weight: 800; transform: translateY(-2px); box-shadow: 0 10px 30px -10px rgba(255,255,255,0.35); } .btn--lg { padding: 1.05rem 2.3rem; font-size: 0.85rem; } /* CTA principal de "Vagas limitadas": um brilho passa pelo TEXTO em loop (não pelo botão inteiro) para chamar mais atenção sem gritar. O texto fica num à parte porque background-clip:text precisa de um background próprio — não dá pra dividir com o fundo branco do botão. */ .btn--shine span { background-image: linear-gradient(110deg, var(--ink) 35%, #ffffff 50%, var(--ink) 65%); background-size: 260% 100%; background-position: 140% 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: btnShineSweep 3.2s ease-in-out infinite; } @keyframes btnShineSweep { 0% { background-position: 140% 0; } 55%, 100% { background-position: -40% 0; } } @media (prefers-reduced-motion: reduce) { .btn--shine span { animation: none; background: none; color: inherit; } } /* ---------- NAV -------------------------------------------------------- */ .nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 50; transition: background 0.4s var(--ease), border-color 0.4s var(--ease), padding 0.4s var(--ease); padding: 1.1rem 0 0.9rem; border-bottom: 1px solid transparent; } .nav.scrolled { background: rgba(10,11,13,0.8); backdrop-filter: blur(14px); border-bottom-color: rgba(255,255,255,0.06); padding: 0.85rem 0 0.95rem; } /* grid de 3 colunas (em vez de flex + space-between) para o menu ficar de fato centralizado na barra — com flex, logo e botão tinham larguras diferentes e isso empurrava o menu para o lado mais estreito. */ .nav__inner { position: relative; width: min(var(--maxw), 92%); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; } .nav__brand { display: flex; flex-direction: row; align-items: center; gap: 0.9rem; justify-self: start; transition: opacity 0.4s var(--ease); } /* réplica pequena da tagline, ao lado da logo — só existe (e só faz sentido) no cabeçalho compacto do scroll; a tagline grande de baixo do menu já cobre o estado inicial do hero */ .nav__brand-tag { display: none; } @media (min-width: 1180px) { .nav__brand-tag { display: inline-block; white-space: nowrap; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey-300); font-weight: 700; } } /* some no hero em telas largas (a marca já aparece grande no círculo do hero ali do lado) e surge só quando o menu recolhe no scroll, exatamente como já ficava fixa no cantinho — só o topo muda. Em telas menores, sem o círculo com a marca, a logo do cabeçalho continua sempre visível. */ @media (min-width: 1180px) { .nav__brand { opacity: 0; pointer-events: none; } .nav.scrolled .nav__brand { opacity: 1; pointer-events: auto; } } /* logo do cabeçalho — recorta ~26% de margem transparente da imagem */ .nav__logo { display: block; overflow: hidden; width: clamp(170px, 13vw, 210px); transition: width 0.45s var(--ease), transform 0.4s var(--ease); } .nav__logo:hover { transform: scale(1.045); } .nav__logo img { /* recorta a margem transparente E a tagline "assessoria..." embutida no PNG, deixando apenas o wordmark FAROL (faixa 26,4%–66,6% da imagem) */ display: block; width: 100%; height: auto; margin: -23.5% 0 -31.5%; filter: drop-shadow(0 0 5px rgba(255,255,255,0.22)); transition: filter 0.4s var(--ease); } .nav__logo:hover img { filter: drop-shadow(0 0 12px rgba(255,255,255,0.55)); } .nav.scrolled .nav__logo { width: clamp(120px, 9vw, 148px); } .nav__links { display: flex; align-items: center; gap: 0.35rem; justify-self: center; transition: opacity 0.4s var(--ease); } .nav__links a { position: relative; color: var(--white); text-decoration: none; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.6rem 1.15rem; border-radius: 8px; background: rgba(255,255,255,0.07); border: 1px solid rgba(205,210,218,0.30); transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .nav__links a:hover { color: #101216; background: #ffffff; border-color: #ffffff; font-weight: 800; transform: translateY(-2px); box-shadow: 0 10px 26px -12px rgba(255,255,255,0.4); } .nav__links-cta { display: none; } /* tagline centralizada abaixo da linha do menu/botões, com respiro próprio. line-height generoso + max-height (em vez de height:0 seco) garante que o texto nunca fique espremido/cortado embaixo durante o recolhimento no scroll — antes a altura ia a 0 instantaneamente enquanto a opacidade ainda estava em transição, "cortando" as letras por uma fração de segundo. */ .nav__tagline { display: block; width: 100%; text-align: center; margin-top: 1.1rem; max-height: 3rem; overflow: visible; font-size: 1.1rem; line-height: 1.4; letter-spacing: 0.32em; text-transform: uppercase; color: var(--paper); font-weight: 800; transition: opacity 0.4s var(--ease), margin 0.4s var(--ease), max-height 0.4s var(--ease); } .nav.scrolled .nav__tagline { opacity: 0; margin-top: -0.6rem; max-height: 0; overflow: hidden; } /* CTA sempre em realce (Luz Branca sólida) + leve flutuação constante, agora posicionado no fluxo normal do cabeçalho (fim da linha), não mais flutuando solto no canto — daí "translateY(0)" como base dos keyframes. */ .nav__cta { flex-shrink: 0; justify-self: end; background: var(--paper); border-color: transparent; color: var(--ink); font-weight: 800; box-shadow: 0 10px 26px -10px rgba(255,255,255,0.45); animation: ctaFloat 3.2s var(--ease) infinite; } .nav__cta:hover { background: var(--paper); border-color: transparent; color: var(--ink); box-shadow: 0 18px 36px -10px rgba(255,255,255,0.65); } @keyframes ctaFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @media (prefers-reduced-motion: reduce) { .nav__cta { animation: none; } } .nav__burger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; z-index: 3; } .nav__burger span { width: 26px; height: 2px; background: var(--grey-200); transition: 0.3s; } /* ---------- HERO -------------------------------------------------------- Alinhado à esquerda e usando a largura real da tela — não é mais um bloco de 900px flutuando sozinho no meio de uma tela grande. */ .hero { min-height: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; position: relative; z-index: 2; padding: 11rem clamp(1.5rem, 6vw, 5rem) 4rem; /* Farol Black do manual — sólido na maior parte do hero, com um degradê curto no final para fundir sem costura com o cinza do resto da página. */ background: linear-gradient(180deg, #000000 0%, #000000 82%, rgba(0,0,0,0) 100%); } .hero__glow { position: absolute; top: 46%; left: 8%; transform: translate(-30%,-55%); width: 900px; height: 900px; max-width: 120vw; background: radial-gradient(circle, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 40%, transparent 68%); filter: blur(10px); pointer-events: none; } /* mancha branca suave no vazio à direita do hero em telas largas, com o selo (logo sem fundo) centrado — preenche o espaço sem virar um bloco duro / "card de IA": é só luz e degradê. Some em telas menores, onde esse espaço não sobra. */ .hero__mark { display: none; } @media (min-width: 1180px) { .hero__mark { display: flex; align-items: center; justify-content: center; position: absolute; top: 13rem; right: clamp(3rem, 9vw, 12rem); /* altura igual à largura, travada nos dois eixos — com aspect-ratio sozinho, a logo (maior que a caixa em telas menores) forçava a altura a crescer mais que a largura e a bolha ficava oval */ width: clamp(215px, 17vw, 305px); height: clamp(215px, 17vw, 305px); z-index: 1; pointer-events: auto; } /* a nuvem em si: pseudo-elemento à parte para poder borrar o degradê sem borrar o selo, e com mais paradas de transparência para sumir nas bordas como neblina em vez de terminar num círculo duro */ .hero__mark::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, #ffffff 0%, #ffffff 46%, rgba(255,255,255,0.82) 60%, rgba(255,255,255,0.45) 74%, rgba(255,255,255,0.15) 86%, rgba(255,255,255,0) 100%); filter: blur(22px); z-index: -1; transition: filter 0.5s var(--ease), transform 0.5s var(--ease); } /* leve glow extra ao passar o mouse — a nuvem "acende" um pouco */ .hero__mark:hover::before { filter: blur(26px) brightness(1.12); transform: scale(1.06); } .hero__mark img { width: 367px; height: 367px; object-fit: contain; filter: drop-shadow(0 6px 20px rgba(0,0,0,0.22)); animation: markFloat 5s ease-in-out infinite; transition: filter 0.5s var(--ease); } .hero__mark:hover img { filter: drop-shadow(0 6px 20px rgba(0,0,0,0.22)) drop-shadow(0 0 26px rgba(255,255,255,0.55)); } @keyframes markFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @media (prefers-reduced-motion: reduce) { .hero__mark img { animation: none; } } } .hero__inner { max-width: 62rem; position: relative; z-index: 2; } .hero__title { font-family: var(--display); font-weight: 500; color: var(--white); font-size: clamp(2.1rem, 4.6vw, 3.8rem); line-height: 1.08; letter-spacing: 0.3px; margin-bottom: 2.4rem; } .hero__title em { font-style: italic; color: var(--mist); } .hero__sub { font-size: clamp(1rem, 1.7vw, 1.22rem); color: var(--grey-300); max-width: 34rem; margin: 0 0 3.2rem; font-weight: 300; line-height: 1.75; } .hero__sub .mar { color: var(--paper); font-weight: 600; } .hero__actions { display: flex; gap: 1rem; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 3.6rem; } /* ============================================================ CENA DO FAROL — imagem estática de transição (logo abaixo do hero). Sem efeitos: topo e base fundem-se ao fundo da página (degradê cinza), deixando a junção quase invisível. Sem texto. ============================================================ */ .lh { position: relative; height: clamp(360px, 58vh, 640px); overflow: hidden; background: transparent; /* deixa o degradê do body aparecer nas bordas fundidas */ } .lh__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 56%; /* funde o topo e a base com a página para uma junção quase invisível */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 82%, transparent 100%); } /* Canais logo abaixo da imagem: aproxima o conteúdo p/ fechar a fusão */ .canais--fuse { padding-top: clamp(1.5rem, 4vh, 3.5rem); } /* ---------- MANIFESTO (grid de texto) --------------------------------- */ /* título desta seção usa a mesma família da tagline (General Sans), não a serifada padrão dos outros títulos — pedido específico para esse texto */ #visao .section__title { font-family: var(--sans); font-weight: 700; letter-spacing: 0; } .manifesto__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 1.6rem; } .manifesto__grid p { font-size: 1.06rem; color: var(--grey-300); } /* ---------- CARDS / SERVIÇOS ------------------------------------------- */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .card { padding: 2.2rem 1.9rem; border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; background: linear-gradient(165deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008)); transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease); position: relative; overflow: hidden; } .card::before { content: ""; position: absolute; top: 0; left: -60%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.06), transparent); transition: left 0.7s var(--ease); } .card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.3); } .card:hover::before { left: 120%; } .card__num { font-family: var(--display); font-weight: 400; font-size: 3.2rem; line-height: 1; color: rgba(255,255,255,0.4); /* fallback p/ navegadores sem text-stroke */ display: block; margin-bottom: 0.3rem; } @supports (-webkit-text-stroke: 1px black) { .card__num { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.45); } } .card h3 { font-family: var(--display); font-weight: 500; font-size: 1.5rem; color: var(--white); margin: 0.8rem 0 0.7rem; } .card p { font-size: 0.95rem; color: var(--grey-400); } .card--accent { background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02)); border-color: rgba(255,255,255,0.28); } .card--accent h3 { color: var(--paper); } .card--accent p { color: var(--grey-300); } .card__link { display: inline-block; margin-top: 1.2rem; color: var(--paper); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.05em; font-weight: 600; transition: gap 0.3s; } .card__link:hover { color: var(--mist); } /* ---------- MÉTODO / STEPS --------------------------------------------- */ .steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; } .step { padding: 2rem 1.6rem 2.2rem; border-top: 1px solid rgba(255,255,255,0.32); background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 70%); position: relative; overflow: hidden; transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease); } /* mesmo brilho que varre os cards de "O que fazemos" */ .step::before { content: ""; position: absolute; top: 0; left: -60%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.06), transparent); transition: left 0.7s var(--ease); } .step:hover { transform: translateY(-6px); border-top-color: rgba(255,255,255,0.85); background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 70%); } .step:hover::before { left: 120%; } .step__n { font-family: var(--display); font-weight: 400; font-size: 4rem; color: rgba(255,255,255,0.4); line-height: 1; display: block; margin-bottom: 0.2rem; } @supports (-webkit-text-stroke: 1px black) { .step__n { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.45); } } .step h3 { font-family: var(--display); font-weight: 500; color: var(--white); font-size: 1.35rem; margin: 0.5rem 0 0.6rem; } .step p { font-size: 0.92rem; color: var(--grey-400); } /* ---------- MARQUEE / CANAIS ------------------------------------------- */ .marquee { overflow: hidden; white-space: nowrap; margin: 0 0 1.1rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .marquee__track { display: inline-flex; gap: 1.1rem; animation: marquee 46s linear infinite; will-change: transform; } .marquee--rev .marquee__track { animation-direction: reverse; animation-duration: 54s; } .marquee:hover .marquee__track { animation-play-state: paused; } /* -25% (não -50%) porque o track agora tem 4 cópias do conjunto, não 2 — com só 2 cópias, em telas muito largas o conjunto único não é largo o bastante e sobra um vão vazio visível pouco antes do loop reiniciar */ @keyframes marquee { to { transform: translateX(-25%); } } /* chips de logo dos canais */ .chip { display: inline-flex; align-items: center; gap: 0.7rem; flex: 0 0 auto; padding: 0.6rem 1.15rem 0.6rem 0.7rem; border-radius: 100px; background: linear-gradient(160deg, rgba(255,255,255,0.97), rgba(232,235,240,0.9)); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 10px 30px -14px rgba(0,0,0,0.6); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .chip img { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; background: #fff; padding: 3px; flex: 0 0 auto; } .chip b { font-family: var(--sans); font-weight: 600; font-size: 0.95rem; color: #16181d; letter-spacing: 0.2px; white-space: nowrap; } .chip:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -14px rgba(0,0,0,0.55); } .chip--own { color: #16181d; padding-left: 1rem; } .chip--own svg { color: #2a2d33; flex: 0 0 auto; } .chip b i { font-style: normal; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; vertical-align: middle; margin-left: 0.35rem; padding: 0.12rem 0.36rem; border-radius: 5px; background: #16181d; color: #f5f6f8; text-transform: uppercase; } .canais__note { max-width: 560px; margin-top: 2.4rem; color: var(--grey-400); font-size: 1.02rem; } /* ---------- SELEÇÃO ---------------------------------------------------- */ .selecao__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; } .selecao__col { padding: 2.4rem 2.2rem; border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; background: rgba(255,255,255,0.015); } .selecao__col h3 { font-family: var(--display); font-weight: 500; color: var(--white); font-size: 1.5rem; margin-bottom: 1.4rem; display: flex; align-items: center; gap: 0.7rem; } .selecao__col ul { list-style: none; } .selecao__col li { padding: 0.7rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--grey-300); font-size: 0.98rem; } .selecao__col li:last-child { border-bottom: none; } .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .dot--on { background: var(--paper); box-shadow: 0 0 12px rgba(255,255,255,0.7); } .dot--off { background: var(--grey-600); } .selecao__col--yes { border-color: rgba(255,255,255,0.24); } /* ---------- REDES SOCIAIS (carrossel) --------------------------------- */ .social__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .social__intro { display: flex; flex-direction: column; align-items: flex-start; } /* dois logos (Instagram/YouTube) alternando no mesmo espaço */ .social__ig { position: relative; display: inline-flex; align-items: center; height: 52px; min-width: 76px; margin-bottom: 1.4rem; } .social__ig-img { position: absolute; left: 0; top: 50%; height: 48px; width: auto; transform: translateY(-50%) scale(0.9); opacity: 0; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); filter: drop-shadow(0 10px 24px rgba(0,0,0,0.35)); } .social__ig-img.is-on { opacity: 1; transform: translateY(-50%) scale(1); } .social__intro .section__title { margin-bottom: 1.4rem; } .social__text { color: var(--grey-300); font-size: 1.05rem; max-width: 440px; margin: 0 0 1.4rem; } .social__handle { display: inline-block; color: var(--paper); font-weight: 600; letter-spacing: 0.04em; text-decoration: none; margin-bottom: 1.9rem; transition: color 0.3s; } .social__handle:hover { color: var(--white); } .social__btns { display: flex; flex-wrap: wrap; gap: 0.8rem; } .social__btn { width: fit-content; } /* carrossel quadrado */ .social__carousel { position: relative; } .social__viewport { position: relative; aspect-ratio: 1 / 1; width: 100%; border-radius: 10px; overflow: hidden; background: #14151a; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 34px 80px -26px rgba(0,0,0,0.65); } .social__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.5s var(--ease); display: flex; align-items: center; justify-content: center; pointer-events: none; } .social__slide.is-active { opacity: 1; pointer-events: auto; } .social__slide img { width: 100%; height: 100%; object-fit: cover; display: block; } /* print de publicação: mostra a imagem INTEIRA (foto + comentários), sem cortar — por isso contain, com fundo escuro preenchendo as sobras */ .social__slide--post { background: #0f1014; } .social__slide--post img { object-fit: contain; } .social__dots { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1.15rem; } .social__dots button { width: 8px; height: 8px; border-radius: 50%; border: none; cursor: pointer; padding: 0; background: rgba(255,255,255,0.25); transition: background 0.3s var(--ease), width 0.3s var(--ease); } .social__dots button.active { background: var(--paper); width: 22px; border-radius: 4px; } /* ---------- CONTATO ---------------------------------------------------- */ .contato { text-align: center; overflow: hidden; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 18%, #000000 82%, rgba(0,0,0,0) 100%); } .contato__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); } .contato__mark { display: flex; align-items: center; justify-content: center; } .contato__mark img { width: min(275px, 75%); height: auto; filter: drop-shadow(0 0 10px rgba(255,255,255,0.16)); transition: filter 0.5s var(--ease), transform 0.5s var(--ease); } .contato__mark img:hover { filter: drop-shadow(0 0 34px rgba(255,255,255,0.65)); transform: scale(1.04); } .contato__content { display: flex; flex-direction: column; align-items: center; text-align: center; } .contato .eyebrow { font-size: 0.756rem; } .contato__title { font-family: var(--display); font-weight: 500; color: var(--white); font-size: clamp(1.98rem, 4.95vw, 3.6rem); line-height: 1.06; margin-bottom: 1.4rem; } .contato__sub { color: var(--grey-300); max-width: 560px; margin: 0 auto 2.6rem; font-size: 1.06rem; } .contato__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ---------- FOOTER ----------------------------------------------------- */ .footer { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,0.06); padding: 4rem 0 2rem; background: rgba(8,9,11,0.5); } .footer__inner { display: grid; grid-template-columns: 1.3fr 2fr; gap: 3rem; padding-bottom: 3rem; } .footer__logo { width: clamp(220px, 26vw, 340px); overflow: hidden; margin-bottom: 0.6rem; } .footer__logo img { display: block; width: 100%; height: auto; margin: -23.5% 0 -31.5%; } .footer__brand p { color: var(--grey-400); font-size: 0.95rem; } .footer__cnpj { margin-top: 0.9rem; font-size: 0.78rem; letter-spacing: 0.03em; color: var(--grey-600); } .footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .footer__cols h4 { color: var(--white); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.1rem; font-weight: 500; } .footer__cols a { display: block; color: var(--grey-400); text-decoration: none; font-size: 0.92rem; padding: 0.35rem 0; transition: color 0.3s; } .footer__cols a:hover { color: var(--paper); } .footer__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.05); color: var(--grey-400); font-size: 0.82rem; letter-spacing: 0.05em; } /* ---------- MODAL DE CONTATO ------------------------------------------ */ .modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 1.2rem; } .modal.open { display: flex; } .modal__backdrop { position: absolute; inset: 0; background: rgba(6,7,9,0.74); backdrop-filter: blur(6px); animation: fadeIn 0.3s var(--ease); } .modal__panel { position: relative; z-index: 1; width: min(540px, 100%); max-height: 92vh; overflow-y: auto; background: linear-gradient(165deg, #1b1d22, #131418); border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; padding: 2.3rem 2rem 2rem; box-shadow: 0 34px 90px -22px rgba(0,0,0,0.75); animation: modalIn 0.4s var(--ease); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } } .modal__close { position: absolute; top: 10px; right: 14px; background: none; border: none; color: var(--grey-400); font-size: 1.9rem; line-height: 1; cursor: pointer; transition: color 0.3s; } .modal__close:hover { color: var(--white); } .modal__title { font-family: var(--display); font-weight: 500; color: var(--white); font-size: 1.9rem; margin: 0.35rem 0 1.5rem; } .modal__lead { color: var(--grey-400); font-size: 0.95rem; margin-bottom: 1.6rem; } /* duas opções de contato: WhatsApp (principal) + e-mail (secundário) */ .opts { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0.9rem; align-items: stretch; } .opt { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.35rem; padding: 1.5rem 1.1rem; border-radius: 8px; border: 1px solid transparent; } /* principal — Luz Branca sólida, com foco visual */ .opt--wa { background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: 0 12px 30px -10px rgba(255,255,255,0.45); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); } .opt--wa:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -10px rgba(255,255,255,0.65); } .opt--wa strong { font-size: 0.95rem; font-weight: 800; letter-spacing: 0.02em; } .opt--wa span { font-size: 0.75rem; opacity: 0.75; font-weight: 600; } .opt__icon { margin-bottom: 0.25rem; } /* secundário — discreto */ .opt--mail { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); } .opt__label { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-400); font-weight: 600; white-space: nowrap; } .opt__email { font-size: 0.78rem; color: var(--white); font-weight: 500; overflow-wrap: anywhere; line-height: 1.45; margin: 0.2rem 0 0.7rem; user-select: all; } .opt__copy { background: rgba(255,255,255,0.07); border: 1px solid rgba(205,210,218,0.3); color: var(--white); font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.5rem 0.9rem; border-radius: 8px; cursor: pointer; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .opt__copy:hover { background: #fff; color: #101216; border-color: #fff; } .opt__copy.copied { background: var(--paper); border-color: var(--paper); color: var(--ink); } .opt__copy.warn { background: rgba(197,106,106,0.18); border-color: #c56a6a; color: #f0c9c9; } .opt__email::selection { background: var(--paper); color: var(--ink); } body.modal-open { overflow: hidden; } /* ---------- REVEAL / anim --------------------------------------------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ---------- ACESSIBILIDADE / NAVEGAÇÃO --------------------------------- */ /* âncoras do menu param abaixo do cabeçalho fixo, sem esconder o título */ section[id] { scroll-margin-top: 130px; } /* foco visível para navegação por teclado */ a:focus-visible, button:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; border-radius: 4px; } /* respeita quem prefere menos movimento */ @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; } .reveal { opacity: 1; transform: none; transition: none; } .social__slide, .social__ig-img { transition: none; } } /* ---------- RESPONSIVO ------------------------------------------------- */ /* menu vira hambúrguer bem antes do breakpoint de conteúdo — a linha logo + 5 links + botão não cabe numa única linha abaixo de ~1220px, e sem isso o botão "Solicitar análise" vazava para fora da tela. */ @media (max-width: 1220px) { .nav__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.15rem; } .nav__brand { align-items: center; } .nav__tagline { text-align: center; } .nav__links, .nav__cta { display: none; } .nav__burger { display: flex; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .nav.open .nav__links { display: flex; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 100vw; flex-direction: column; align-items: stretch; gap: 0; background: rgba(10,11,13,0.97); backdrop-filter: blur(14px); padding: 0.4rem 0 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.08); } .nav.open .nav__links a { padding: 0.9rem 6%; text-align: center; } .nav__links-cta { display: block; color: var(--paper) !important; } .nav__logo { width: clamp(150px, 40vw, 230px); } .nav.scrolled .nav__logo { width: clamp(120px, 30vw, 170px); } } @media (max-width: 900px) { .fbeam__cone { width: 680px; } .chip b { font-size: 0.85rem; } .chip img { width: 30px; height: 30px; } .manifesto__grid, .cards, .steps, .selecao__cols, .footer__inner, .social__grid, .contato__grid { grid-template-columns: 1fr; } .contato__mark { order: -1; margin-bottom: 0.5rem; } .social__viewport { max-width: 420px; margin-inline: auto; } .opts { grid-template-columns: 1fr; } .cards { grid-template-columns: 1fr; } .footer__cols { grid-template-columns: 1fr 1fr; } .hero { padding-top: 9rem; } } @media (min-width: 560px) and (max-width: 900px) { .cards, .steps { grid-template-columns: 1fr 1fr; } }