/* ============================================================ KYREON — página do produto, hospedada no site da Scault. Identidade: a do PRÓPRIO Kyreon, não a da Scault. Os tokens abaixo e o artwork da marca (símbolo e logotipo, nos do ) são cópia do que o produto usa de verdade: kyreon-web/src/app/globals.css — cor e raio kyreon-web/src/components/brand/kyreon-logo.tsx — marca kyreon-web/src/app/icon.svg — favicon Se a marca mudar lá, trocar aqui — nunca redesenhar à mão. A dependência da Scault vive no texto ("desenvolvido e mantido pela Scault"), não no visual. Regra completa em clientes/Kyreon/CLAUDE.md do MazyOS. ============================================================ */ :root{ /* --- superfícies: a escada de 3 degraus do app (mesa → sidebar → card) --- */ --base: #111111; /* background — a página */ --deep: #0A0A0B; /* shell — a mesa, degrau mais fundo */ --near: #151517; /* sidebar — alternância entre seções */ --panel: #1C1C1E; /* card — superfície de conteúdo */ --panel-h: #26282C; /* secondary — hover de card */ --primary: #386BFF; /* azul da marca */ --accent: #5B87FF; /* passo do modo escuro — o azul legível sobre #111 */ --accent-l: #79A4FF; /* acento claro (o mesmo da junção do K) */ --glow: 91,135,255; --text: #F9FAFB; /* zinc-50 */ --muted: #D3D7DC; /* zinc-300 — corpo */ --muted-2: #9BA1A9; /* zinc-400 — legenda */ --hair: #2A2C31; /* border */ --hair-2: rgba(255,255,255,.055); /* azul da marca como preenchimento e como filete */ --fill: linear-gradient(118deg,#79A4FF 0%,#5B87FF 45%,#386BFF 100%); --fill-line: linear-gradient(118deg,rgba(121,164,255,.85),rgba(56,107,255,.35) 40%,rgba(121,164,255,.9) 100%); --lg-fill: linear-gradient(168deg, rgba(91,135,255,.10), rgba(28,28,30,.72) 55%, rgba(17,17,17,.8)); --lg-edge: linear-gradient(168deg, rgba(255,255,255,.2), rgba(255,255,255,.04) 30%, rgba(255,255,255,.03) 66%, rgba(121,164,255,.22)); --lg-blur: blur(26px) saturate(150%); /* O produto roda em Inter, uma família só — mantido aqui. */ --display: "Inter", -apple-system, "Segoe UI", sans-serif; --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --container: 1120px; --gutter: 24px; /* raios do produto: --radius-sm/md/lg do globals.css */ --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --ease: cubic-bezier(.28,.11,.32,1); } *,*::before,*::after{ box-sizing:border-box; } /* clip, não hidden, e no html — não no body. overflow-x:hidden no body faz o body virar o container de rolagem. Isso quebra position:sticky e bagunça a medição do ScrollTrigger: os pins nasciam com posições que ignoravam o espaço reservado uns dos outros, e duas seções chegavam a abrir sobrepostas. clip corta o transbordo do mesmo jeito, sem criar contexto de rolagem. */ html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; } body{ margin:0; background:var(--base); color:var(--muted); font-family:var(--body); font-size:17px; line-height:1.55; letter-spacing:-.01em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } body::before{ content:""; position:fixed; inset:0; z-index:-3; pointer-events:none; background:linear-gradient(180deg,#151517 0%, var(--base) 32%, #0D0D0E 78%, var(--deep) 100%); } img,svg{ max-width:100%; } a{ color:inherit; } p{ margin:0; } ul{ margin:0; padding:0; list-style:none; } ::selection{ background:var(--accent); color:var(--base); } :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; } .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; } /* ---------- tipografia ---------- */ h1,h2,h3,h4{ margin:0; color:var(--text); font-family:var(--display); font-weight:600; letter-spacing:-.026em; line-height:1.12; } .t-hero{ font-size:clamp(2.3rem,6.2vw,4.5rem); font-weight:700; letter-spacing:-.035em; line-height:1.08; } .t-section{ font-size:clamp(1.8rem,4.2vw,2.9rem); letter-spacing:-.028em; line-height:1.12; } .t-sub{ font-size:clamp(1.2rem,2.3vw,1.65rem); font-weight:600; letter-spacing:-.024em; line-height:1.22; color:var(--text); } .t-lead{ font-size:clamp(1.04rem,1.5vw,1.18rem); line-height:1.55; color:var(--muted); } .accent{ color:var(--accent); } .on-dark{ color:var(--text); } .brandblue{ background:var(--fill); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ---------- grade ---------- */ .wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); } .section{ padding-block:clamp(4.5rem,9vw,7.5rem); position:relative; } .section--near{ background:var(--near); } section[id], footer{ scroll-margin-top:76px; } .center{ text-align:center; } .center > *{ margin-inline:auto; } .center .actions{ justify-content:center; } /* ---------- cabeçalho de seção — índice numerado ---------- */ .shead{ margin-bottom:clamp(2.5rem,5vw,3.75rem); } .shead__k{ display:flex; align-items:baseline; gap:.85rem; font-family:var(--display); font-size:.76rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); margin-bottom:1.6rem; } .shead__k b{ color:var(--accent); font-weight:700; letter-spacing:.12em; } .shead__k i{ flex:1; height:1px; font-style:normal; transform:translateY(-.28em); background:linear-gradient(90deg, rgba(91,135,255,.34), var(--hair) 22%, rgba(255,255,255,.03)); } .shead h2{ max-width:26ch; } .shead .t-lead{ margin-top:1.2rem; max-width:56ch; } .shead--c{ text-align:center; } .shead--c h2, .shead--c .t-lead{ margin-inline:auto; } .shead--c .shead__k{ justify-content:center; } .shead--c .shead__k i{ display:none; } /* ---------- superfície padrão ---------- */ .panel{ position:relative; background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-lg); transition:background .35s var(--ease), border-color .35s var(--ease); } .panel--h:hover{ background:var(--panel-h); border-color:rgba(91,135,255,.3); } .tick::before, .tick::after{ content:""; position:absolute; width:9px; height:9px; border:0 solid var(--accent); opacity:.55; pointer-events:none; transition:opacity .35s var(--ease); } .tick::before{ top:-1px; left:-1px; border-top-width:1px; border-left-width:1px; border-top-left-radius:var(--r-lg); } .tick::after{ bottom:-1px; right:-1px; border-bottom-width:1px; border-right-width:1px; border-bottom-right-radius:var(--r-lg); } .panel--h:hover.tick::before, .panel--h:hover.tick::after{ opacity:1; } /* ---------- vidro: exceção ---------- */ .lg{ position:relative; background:var(--lg-fill) padding-box, var(--lg-edge) border-box; border:1px solid transparent; border-radius:var(--r-lg); backdrop-filter:var(--lg-blur); -webkit-backdrop-filter:var(--lg-blur); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(121,164,255,.08), 0 24px 60px -28px #000; transition:background .4s var(--ease), box-shadow .4s var(--ease); } .lg::after{ content:""; position:absolute; top:0; left:18%; right:18%; height:1px; background:linear-gradient(90deg, transparent, rgba(121,164,255,.55), transparent); pointer-events:none; } .lg--h:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(121,164,255,.14), 0 30px 70px -28px #000, 0 0 36px -20px rgba(91,135,255,.55); } /* ---------- botões ---------- */ .btn{ font:inherit; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.5rem; border-radius:var(--r-sm); font-family:var(--body); font-size:.98rem; font-weight:500; letter-spacing:-.008em; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .2s var(--ease); white-space:nowrap; } .btn:active{ transform:translateY(1px); } .btn--fill{ background:var(--fill); background-size:165% 100%; background-position:12% 50%; color:#0A0A0B; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(10,10,11,.22); transition:background-position .75s var(--ease), box-shadow .3s var(--ease), transform .2s var(--ease); } .btn--fill:hover{ background-position:88% 50%; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(10,10,11,.18), 0 6px 22px -12px rgba(91,135,255,.55); } .btn--line{ background: linear-gradient(rgba(28,28,30,.92),rgba(30,30,33,.92)) padding-box, var(--fill-line) border-box; border:1px solid transparent; color:var(--text); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); } .btn--line:hover{ background: linear-gradient(rgba(38,40,44,.94),rgba(34,36,40,.94)) padding-box, var(--fill) border-box; } .tlink{ font:inherit; background:none; border:0; padding:0; cursor:pointer; display:inline-flex; align-items:center; gap:.3rem; color:var(--accent); text-decoration:none; font-size:1rem; letter-spacing:-.01em; transition:opacity .25s var(--ease); } .tlink::after{ content:"→"; font-size:.95em; transition:transform .25s var(--ease); } .tlink:hover{ opacity:.75; } .tlink:hover::after{ transform:translateX(3px); } .actions{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; margin-top:2.2rem; } /* ---------- navbar ---------- */ .nav{ /* Acima do véu (85) e das seções travadas (86). Abaixo disso, o véu deixava o logo vazando por transparência no meio do texto e a seção pinada pintava por cima da própria barra. */ position:sticky; top:0; z-index:100; transition:opacity .4s var(--ease); background:rgba(17,17,17,.72); backdrop-filter:saturate(180%) blur(22px); -webkit-backdrop-filter:saturate(180%) blur(22px); border-bottom:1px solid var(--hair); } .nav__inner{ display:flex; align-items:center; justify-content:space-between; height:62px; gap:1.5rem; } /* Símbolo dentro do quadrado + logotipo ao lado — é o mesmo lockup horizontal que a sidebar do produto usa. O quadrado separa o K do símbolo do K do logotipo, que senão leem "K KYREON". */ .nav__logo{ display:flex; align-items:center; gap:.5rem; color:var(--text); text-decoration:none; } .nav__tile{ width:26px; height:26px; border-radius:6px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; flex:none; } .nav__tile svg{ height:13px; width:auto; } .nav__word{ height:10px; width:auto; display:block; } .nav__links{ display:flex; align-items:center; gap:2rem; } .nav__links a{ font-size:.85rem; color:var(--muted); text-decoration:none; transition:color .25s var(--ease); } .nav__links a:hover{ color:var(--text); } .nav__right{ display:flex; align-items:center; gap:.9rem; } .nav__right .tlink{ font-size:.85rem; } .nav__toggle{ display:none; width:40px; height:40px; cursor:pointer; color:var(--text); align-items:center; justify-content:center; border:1px solid var(--hair); border-radius:var(--r-sm); background:transparent; } .nav__mobile{ display:none; flex-direction:column; padding:.5rem 0 1.5rem; } .nav__mobile.is-open{ display:flex; } .nav__mobile a{ text-decoration:none; color:var(--text); font-family:var(--display); font-size:1.35rem; font-weight:600; letter-spacing:-.02em; padding:.5rem 0; } /* ---------- marca real do Kyreon ---------- */ .klock{ display:flex; flex-direction:column; align-items:center; gap:1rem; color:var(--text); } .klock__mark{ height:clamp(2.6rem,6vw,3.6rem); width:auto; display:block; } .klock__word{ height:clamp(1.5rem,3.4vw,2rem); width:auto; display:block; } /* ============================================================ MOLDURA DE APP KYREON Uma só estrutura serve ao mock do hero e ao modo demonstração. Fiel ao produto: sidebar com grupos nomeados, lista de conversas, chat com status de entrega. Regra que sustenta tudo em tela pequena: TODO container de coluna carrega min-height:0 / min-width:0. Sem isso o filho rolável cresce pelo conteúdo, estoura a moldura e leva o input pra fora da tela — era exatamente o bug do painel vazando no celular. ============================================================ */ .kapp{ position:relative; /* âncora do portal */ display:grid; grid-template-columns:214px minmax(0,1fr); min-height:0; min-width:0; background:var(--base); border:1px solid var(--hair); border-radius:12px; overflow:hidden; box-shadow:0 40px 90px -55px #000; } /* --- sidebar --- */ .krail{ background:var(--near); border-right:1px solid var(--hair); padding:.85rem .55rem; display:flex; flex-direction:column; gap:1rem; min-width:0; overflow:hidden; } .krail__brand{ display:flex; align-items:center; gap:.5rem; padding:.1rem .35rem .5rem; } .krail__tile{ width:27px; height:27px; border-radius:7px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; flex:none; } .krail__tile svg{ height:13px; width:auto; color:var(--text); } .krail__word{ height:9px; width:auto; color:var(--text); } .krail__g{ display:flex; flex-direction:column; gap:1px; min-width:0; } .krail__lab{ font-size:.58rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--muted-2); padding:.3rem .5rem .45rem; } .krail__i{ display:flex; align-items:center; gap:.55rem; min-width:0; padding:.44rem .5rem; border-radius:6px; font-size:.82rem; color:var(--muted); white-space:nowrap; transition:background .3s var(--ease), color .3s var(--ease); } .krail__i svg{ width:15px; height:15px; flex:none; color:var(--muted-2); transition:color .3s var(--ease); } .krail__i span{ overflow:hidden; text-overflow:ellipsis; } .krail__i em{ margin-left:auto; font-style:normal; flex:none; font-size:.62rem; font-weight:700; color:#0A0A0B; background:var(--accent); border-radius:99px; padding:.05rem .32rem; } .krail__i.is-on{ background:rgba(var(--glow),.15); color:var(--accent); } .krail__i.is-on svg{ color:var(--accent); } /* --- área principal --- */ .kmain{ display:grid; grid-template-rows:auto minmax(0,1fr) auto; min-width:0; min-height:0; /* fixo na 2ª coluna: sem isso, quando .krail vira display:none no mobile, o grid reposiciona .kmain pro auto-placement e ele cai na 1ª coluna (que é 0px) — era o app inteiro sumindo no celular */ grid-column:2; } .ktop{ display:flex; align-items:center; gap:.7rem; padding:.75rem 1rem; border-bottom:1px solid var(--hair); background:var(--near); min-width:0; } .ktop__t{ font-size:.9rem; font-weight:600; color:var(--text); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ktop__badge{ flex:none; font-size:.58rem; font-weight:700; letter-spacing:.09em; color:var(--accent); border:1px solid rgba(var(--glow),.35); border-radius:var(--r-sm); padding:.22rem .45rem; } .ktop__skip{ font:inherit; margin-left:auto; flex:none; cursor:pointer; background:transparent; border:1px solid var(--hair); border-radius:var(--r-sm); padding:.32rem .6rem; font-size:.76rem; color:var(--muted-2); transition:color .25s var(--ease), border-color .25s var(--ease); } .ktop__skip:hover{ color:var(--text); border-color:var(--muted-2); } .kbody{ position:relative; min-height:0; min-width:0; } /* --- lista de conversas (mock do hero) --- */ .klist{ border-right:1px solid var(--hair); min-width:0; min-height:0; overflow:hidden; display:flex; flex-direction:column; } .klist__h{ display:flex; align-items:center; gap:.5rem; padding:.7rem .8rem; border-bottom:1px solid var(--hair); font-size:.72rem; color:var(--muted-2); } .klist__h b{ color:var(--text); font-size:.78rem; font-weight:600; } .klist__h em{ margin-left:auto; font-style:normal; font-size:.62rem; font-weight:700; color:#0A0A0B; background:var(--accent); border-radius:99px; padding:.05rem .35rem; } .klist__i{ display:flex; gap:.6rem; padding:.7rem .8rem; border-bottom:1px solid var(--hair-2); min-width:0; } .klist__i.is-on{ background:rgba(var(--glow),.09); box-shadow:inset 2px 0 0 var(--accent); } .kav{ width:30px; height:30px; border-radius:50%; flex:none; position:relative; background:var(--panel-h); display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:600; color:var(--muted); } .kav s{ position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border-radius:50%; border:2px solid var(--near); text-decoration:none; } .kav s.on{ background:#1FA774; } .kav s.bot{ background:var(--accent); } .kav s.wait{ background:#C08A3E; } .klist__b{ min-width:0; flex:1; } .klist__n{ display:flex; align-items:baseline; gap:.4rem; min-width:0; } .klist__n b{ font-size:.8rem; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .klist__n span{ margin-left:auto; flex:none; font-size:.65rem; color:var(--muted-2); } .klist__p{ margin-top:.15rem; font-size:.74rem; color:var(--muted-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* --- chat --- */ .kchat{ display:flex; flex-direction:column; min-width:0; min-height:0; } .kchat__h{ display:flex; align-items:center; gap:.6rem; padding:.65rem .9rem; border-bottom:1px solid var(--hair); flex:none; min-width:0; } .kchat__h .kav{ width:28px; height:28px; } .kchat__id{ min-width:0; } .kchat__id b{ display:block; font-size:.82rem; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .kchat__id span{ display:block; font-size:.68rem; color:var(--muted-2); } .kchat__ia{ margin-left:auto; flex:none; font-size:.56rem; font-weight:700; letter-spacing:.09em; color:var(--accent); border:1px solid rgba(var(--glow),.32); border-radius:var(--r-sm); padding:.2rem .42rem; } .kchat__msgs{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:1rem .9rem; display:flex; flex-direction:column; gap:.5rem; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent; } /* empurra a conversa pro rodapé, como em qualquer app de mensagem. O ::before com margin-top:auto faz isso sem justify-content:flex-end, que em container rolável corta o topo ao subir a rolagem. */ .kchat__msgs::before{ content:""; margin-top:auto; } .kchat__msgs::-webkit-scrollbar{ width:5px; } .kchat__msgs::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:3px; } .kchat__foot{ flex:none; border-top:1px solid var(--hair); padding:.7rem .9rem .8rem; } .kdate{ align-self:center; font-size:.63rem; color:var(--muted-2); background:var(--panel); border-radius:99px; padding:.2rem .6rem; margin:.2rem 0; } .msg{ max-width:84%; padding:.58rem .78rem; border-radius:10px; font-size:.85rem; line-height:1.45; overflow-wrap:anywhere; } .msg--bot{ align-self:flex-start; background:var(--panel-h); color:var(--muted); border-bottom-left-radius:3px; } .msg--me{ align-self:flex-end; background:var(--primary); color:#fff; border-bottom-right-radius:3px; } .msg--think{ align-self:flex-start; display:flex; align-items:center; gap:.5rem; background:transparent; border:1px dashed var(--hair); color:var(--muted-2); font-size:.75rem; } .msg--think.is-out{ align-self:flex-end; } .msg__t{ display:flex; align-items:center; justify-content:flex-end; gap:.25rem; margin-top:.25rem; font-size:.6rem; opacity:.75; } .msg__t svg{ width:12px; height:12px; } /* --- respostas rápidas + input --- */ .qr{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.6rem; } .qr:empty{ display:none; margin:0; } .qr button{ font:inherit; cursor:pointer; font-size:.79rem; color:var(--text); text-align:left; background:rgba(var(--glow),.08); border:1px solid rgba(var(--glow),.3); border-radius:99px; padding:.4rem .8rem; min-height:36px; transition:background .25s var(--ease), border-color .25s var(--ease); } .qr button:hover{ background:rgba(var(--glow),.18); border-color:rgba(var(--glow),.5); } .lchat__form{ display:flex; gap:.45rem; align-items:center; min-width:0; } .lchat__form input{ flex:1; min-width:0; font-family:var(--body); font-size:16px; color:var(--text); background:var(--panel); border:1px solid var(--hair); border-radius:99px; padding:.6rem .9rem; transition:border-color .25s var(--ease); } .lchat__form input::placeholder{ color:#6E747D; } .lchat__form input:focus{ outline:none; border-color:var(--accent); } .lchat__send{ flex:none; width:38px; height:38px; border-radius:50%; cursor:pointer; border:0; background:var(--fill); color:#0A0A0B; display:flex; align-items:center; justify-content:center; transition:box-shadow .3s var(--ease); } .lchat__send:hover{ box-shadow:0 4px 16px -6px rgba(var(--glow),.7); } .lchat__send svg{ width:16px; height:16px; } /* --- peças de CRM: vivem dentro do portal, não numa coluna fixa --- */ .crm__card{ background:var(--panel); border:1px solid rgba(var(--glow),.3); border-radius:var(--r-md); padding:.8rem; } .crm__card b{ display:block; font-size:.87rem; font-weight:600; color:var(--text); } .crm__meta{ display:block; margin-top:.25rem; font-size:.7rem; color:var(--muted-2); } .crm__tags{ display:flex; flex-wrap:wrap; gap:.28rem; margin-top:.55rem; } .crm__tag{ font-size:.64rem; color:var(--accent); border:1px solid rgba(var(--glow),.3); border-radius:99px; padding:.14rem .48rem; } /* ============================================================ MODO KYREON — a página inteira vira o produto na abertura. Uma tela só: a conversa. O que a IA faz no sistema aparece no portal, por cima do chat, e volta pra conversa. ============================================================ */ .kmode{ position:fixed; inset:0; z-index:200; background:var(--deep); display:grid; place-items:center; padding:clamp(.5rem,2vw,1.75rem); transition:opacity .6s var(--ease), visibility .6s var(--ease); } .kmode.is-done{ opacity:0; visibility:hidden; pointer-events:none; } body.kmode-on{ overflow:hidden; } .kmode .kapp{ width:100%; max-width:1140px; height:100%; max-height:820px; animation:kappin .55s var(--ease); transition:grid-template-columns .6s var(--ease); } @keyframes kappin{ from{ opacity:0; transform:translateY(14px) scale(.995); } to{ opacity:1; transform:none; } } /* ---------- abertura minimalista ---------- A demo começa mostrando só a fala da IA: sem sidebar, sem barra de título — nada além do que a pessoa precisa fazer, que é responder. O app se revela sozinho assim que ela manda a primeira mensagem. */ .kmode .krail{ transition:opacity .45s var(--ease); } .kmode .ktop > *{ transition:opacity .4s var(--ease); } .kmode.is-intro .kapp{ grid-template-columns:0px minmax(0,1fr); } .kmode.is-intro .krail{ opacity:0; pointer-events:none; } .kmode.is-intro .ktop > *:not(.ktop__skip){ opacity:0; pointer-events:none; } /* a conversa ocupa tudo — nada de coluna lateral disputando atenção */ .kmode .kbody{ display:flex; min-height:0; min-width:0; } .kmode .kchat{ flex:1; min-width:0; } /* mas não usa os 1140px da moldura: bolha de 950px ninguém lê. Coluna centrada, na largura em que texto se lê. */ .kmode .kchat__msgs, .kmode .kchat__foot > *{ width:100%; max-width:760px; margin-inline:auto; } /* progresso: um filete no rodapé da barra de título, não uma faixa inteira */ .ktop{ position:relative; } .ktop__prog{ position:absolute; left:0; right:0; bottom:-1px; height:2px; background:rgba(255,255,255,.05); overflow:hidden; } .ktop__prog i{ display:block; height:100%; width:0; background:var(--fill); box-shadow:0 0 10px rgba(var(--glow),.75); } /* ============================================================ PORTAL — onde a ação da IA fica visível Abre dentro da moldura do app, então o que muda parece o que é: uma coisa que o sistema fez. Fecha e devolve o foco ao chat. ============================================================ */ .kportal{ position:absolute; inset:0; z-index:20; display:grid; place-items:center; padding:clamp(1rem,4vw,2.2rem); } .kportal[hidden]{ display:none; } .kportal__scrim{ position:absolute; inset:0; background:rgba(10,10,11,.66); backdrop-filter:blur(7px) saturate(120%); -webkit-backdrop-filter:blur(7px) saturate(120%); } .kportal__panel{ position:relative; width:100%; max-width:540px; border-radius:14px; padding:1rem 1.05rem 1.15rem; will-change:transform, opacity; } .kportal__head{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; margin-bottom:.9rem; } .kportal__k{ display:inline-flex; align-items:center; gap:.4rem; flex:none; font-size:.56rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); } .kportal__k s{ width:5px; height:5px; border-radius:50%; background:var(--accent); text-decoration:none; box-shadow:0 0 8px rgba(var(--glow),.9); flex:none; } .kportal__head b{ font-size:.92rem; font-weight:600; color:var(--text); letter-spacing:-.015em; } .kportal__stage{ min-height:0; } .hero__mock .kportal{ padding:clamp(.7rem,3vw,1.2rem); } .hero__mock .kportal__panel{ max-width:400px; padding:.8rem .85rem .9rem; } .hero__mock .kportal__head{ margin-bottom:.65rem; } .hero__mock .pf__col{ min-height:104px; } .hero__mock .plog{ display:none; } /* --- cena: funil compacto (card nasce, card muda de fase) --- */ .pf{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.35rem; } .pf__col{ border:1px dashed var(--hair); border-radius:var(--r-md); padding:.45rem .3rem; min-width:0; min-height:132px; transition:border-color .4s var(--ease), background .4s var(--ease); } .pf__col.is-on{ border-style:solid; border-color:rgba(var(--glow),.45); background:rgba(var(--glow),.06); } .pf__h{ font-size:.53rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-2); text-align:center; margin-bottom:.45rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .4s var(--ease); } .pf__col.is-on .pf__h{ color:var(--accent); } .pf__card{ background:var(--panel); border:1px solid rgba(var(--glow),.45); border-radius:var(--r-md); padding:.45rem .5rem; box-shadow:0 12px 26px -16px #000; min-width:0; } .pf__card b{ display:block; font-size:.73rem; font-weight:600; color:var(--text); overflow-wrap:anywhere; line-height:1.25; } .pf__card span{ display:block; margin-top:.18rem; font-size:.62rem; color:var(--muted-2); overflow-wrap:anywhere; } .pf__card .crm__tags{ margin-top:.35rem; } .pf__card .crm__tag{ font-size:.56rem; padding:.1rem .36rem; } .pf__ghost{ background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-md); padding:.4rem .45rem; margin-top:.35rem; opacity:.45; min-width:0; } .pf__ghost b{ display:block; font-size:.62rem; font-weight:600; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* --- cena: dois canais viram um histórico só --- */ .pmg{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:.55rem; align-items:center; } .pmg__src{ background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-md); padding:.6rem .65rem; min-width:0; } .pmg__src b{ display:block; font-size:.71rem; font-weight:600; color:var(--text); } .pmg__src span{ display:block; margin-top:.18rem; font-size:.62rem; color:var(--muted-2); } .pmg__arrow{ color:var(--accent); display:flex; align-items:center; justify-content:center; } .pmg__arrow svg{ width:18px; height:18px; } .pmg__out{ margin-top:.65rem; background:rgba(var(--glow),.07); border:1px solid rgba(var(--glow),.35); border-radius:var(--r-md); padding:.6rem .7rem; } .pmg__out b{ display:block; font-size:.74rem; font-weight:600; color:var(--text); } .pmg__out span{ display:block; margin-top:.18rem; font-size:.64rem; color:var(--muted-2); } /* --- cena: indicadores --- */ .pkpi{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem; } .pkpi__i{ background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-md); padding:.7rem .5rem; text-align:center; min-width:0; } .pkpi__i b{ display:block; font-size:1.2rem; font-weight:700; color:var(--text); letter-spacing:-.03em; } .pkpi__i span{ display:block; margin-top:.3rem; font-size:.55rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted-2); line-height:1.35; } .pkpi__bar{ margin-top:.5rem; height:3px; border-radius:2px; background:rgba(255,255,255,.07); overflow:hidden; } .pkpi__bar i{ display:block; height:100%; width:0; background:var(--fill); } /* --- cena: ação sensível esperando aprovação --- */ .papv{ border:1px solid rgba(192,138,62,.42); background:rgba(192,138,62,.07); border-radius:var(--r-md); padding:.85rem .9rem; } .papv__top{ display:flex; align-items:center; gap:.5rem; } .papv__top b{ font-size:.78rem; font-weight:600; color:#E8C48A; } .papv__top span{ margin-left:auto; flex:none; font-size:.55rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#C08A3E; border:1px solid rgba(192,138,62,.45); border-radius:var(--r-sm); padding:.16rem .4rem; } .papv p{ margin-top:.5rem; font-size:.78rem; color:var(--muted); line-height:1.45; } .papv p b{ color:var(--text); font-weight:600; } .papv__acts{ display:flex; gap:.45rem; margin-top:.8rem; } .papv__btn{ font-size:.72rem; font-weight:600; border-radius:var(--r-sm); padding:.4rem .8rem; } .papv__btn--ok{ background:var(--fill); color:#0A0A0B; } .papv__btn--no{ border:1px solid var(--hair); color:var(--muted-2); } .papv__note{ margin-top:.7rem; font-size:.68rem; color:var(--muted-2); line-height:1.45; } /* --- cena: agenda (a única interativa — o visitante escolhe) --- */ .kag__slots{ display:flex; flex-wrap:wrap; gap:.5rem; } .kag__slot{ font:inherit; cursor:pointer; font-size:.83rem; font-weight:600; color:var(--text); background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-md); padding:.6rem .85rem; min-height:44px; flex:1 1 auto; transition:border-color .3s var(--ease), background .3s var(--ease); } .kag__slot:hover{ border-color:rgba(var(--glow),.55); background:var(--panel-h); } .kag__slot.is-picked{ background:var(--fill); border-color:transparent; color:#0A0A0B; } .kag__ok{ margin-top:.9rem; display:flex; align-items:center; gap:.55rem; color:var(--accent); font-weight:600; font-size:.83rem; } .kag__ok svg{ width:17px; height:17px; flex:none; } /* --- log do que a IA fez, no rodapé da cena --- */ .plog{ margin-top:.85rem; padding-top:.75rem; border-top:1px solid var(--hair); } .plog li{ display:flex; gap:.5rem; align-items:flex-start; font-size:.71rem; color:var(--muted-2); padding:.22rem 0; } .plog li i{ width:4px; height:4px; margin-top:.42rem; flex:none; background:var(--accent); box-shadow:0 0 6px rgba(var(--glow),.8); } .plog li b{ color:var(--muted); font-weight:600; } /* --- fecho --- */ .kdone{ padding:1rem 1.1rem 1.1rem; border-top:1px solid var(--hair); background:var(--near); } .kdone p{ font-size:.88rem; color:var(--muted); max-width:64ch; } .kdone p b{ color:var(--text); font-weight:600; } .kdone .actions{ margin-top:.9rem; } /* ============================================================ HERO ============================================================ */ .hero{ position:relative; overflow:hidden; padding-block:clamp(2.5rem,7vh,5rem) clamp(2.5rem,6vh,4rem); } .hero__wash{ position:absolute; z-index:0; pointer-events:none; left:50%; top:-30%; transform:translateX(-50%); width:min(1200px,150vw); height:760px; background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(var(--glow),.16) 0%, rgba(var(--glow),.04) 45%, transparent 70%); } .hero .wrap{ position:relative; z-index:1; } /* Copy centralizada e o mock em largura total logo abaixo. Lado a lado, as três colunas do app (sidebar + lista + chat) não cabem na metade da tela e o chat espreme a ponto de quebrar letra por letra. */ .hero__copy{ min-width:0; text-align:center; max-width:760px; margin-inline:auto; } .hero__copy .actions{ justify-content:center; } .hero__lead{ margin-inline:auto; } .hero__k{ display:inline-flex; align-items:center; gap:.55rem; font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); border:1px solid var(--hair); border-radius:99px; padding:.4rem .8rem; margin-bottom:1.4rem; } .hero__k s{ width:5px; height:5px; border-radius:50%; background:var(--accent); text-decoration:none; box-shadow:0 0 8px rgba(var(--glow),.9); flex:none; } .hero h1{ font-size:clamp(2.1rem,4.6vw,3.35rem); font-weight:700; letter-spacing:-.035em; line-height:1.07; } .hero h1 .accent{ color:var(--accent); } .hero__lead{ margin-top:1.2rem; font-size:clamp(1rem,1.3vw,1.1rem); color:var(--muted); max-width:46ch; line-height:1.55; } .hero .actions{ margin-top:1.8rem; } .hero__meta{ margin-top:1.4rem; font-size:.8rem; color:var(--muted-2); } .hero__cue{ margin-top:.8rem; } .hero__cue .tlink{ font-size:.84rem; } /* mock do hero: a moldura do app com a inbox real */ .hero__mock{ min-width:0; margin-top:clamp(2.5rem,5vw,3.5rem); } .hero__mock .kapp{ height:clamp(420px,58vh,520px); } .kmock{ display:grid; grid-template-columns:250px minmax(0,1fr); height:100%; min-height:0; } /* faixa de números */ .stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:clamp(2.5rem,5vw,3.5rem); border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden; background:var(--panel); } .stat{ padding:1.3rem 1rem; text-align:center; border-left:1px solid var(--hair); } .stat:first-child{ border-left:0; } .stat b{ display:block; font-size:clamp(1.5rem,3vw,2.1rem); font-weight:700; color:var(--text); letter-spacing:-.02em; } .stat span{ display:block; margin-top:.4rem; font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted-2); } /* ============================================================ RESPONSIVO DO APP E DO HERO ============================================================ */ @media (max-width:1080px){ .kmock{ grid-template-columns:210px minmax(0,1fr); } } /* Abaixo de 860px o app perde a sidebar fixa: ela vira uma barra de ícones no topo, como o app se comporta no celular de verdade. A conversa segue ocupando tudo — quem mostra o sistema é o portal, não uma coluna espremida ao lado do chat. */ @media (max-width:860px){ .kapp, .kmock{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); } .krail{ flex-direction:row; align-items:center; gap:.5rem; border-right:0; border-bottom:1px solid var(--hair); padding:.5rem .6rem; overflow-x:auto; scrollbar-width:none; } .krail::-webkit-scrollbar{ display:none; } .krail__brand{ padding:0; margin-right:.2rem; } .krail__word{ display:none; } .krail__g{ flex-direction:row; gap:.25rem; } .krail__lab{ display:none; } .krail__i{ padding:.4rem .6rem; } .krail__i span{ display:none; } .krail__i.is-on span{ display:inline; } .klist{ display:none; } } @media (max-width:640px){ .kmode{ padding:0; } .kmode .kapp{ height:100dvh; max-height:none; border:0; border-radius:0; box-shadow:none; } /* Minimalismo total no celular: só a conversa, as ações do Kyreon (o portal) e "Pular". Nada de sidebar nem barra de título — não sobra espaço vertical pra chrome de app numa tela pequena, e a única coisa que a pessoa precisa fazer é responder. Vale sempre, não só na abertura. */ .kmode .kapp{ grid-template-columns:0px minmax(0,1fr); } .kmode .krail{ display:none; } .kmode .ktop > *:not(.ktop__skip){ display:none; } .ktop{ padding:.6rem .8rem; } .ktop__t{ font-size:.82rem; } .kchat__msgs{ padding:.85rem .8rem; } .msg{ max-width:88%; } .qr{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:.15rem; margin-inline:-.9rem; padding-inline:.9rem; } .qr::-webkit-scrollbar{ display:none; } .qr button{ flex:none; white-space:nowrap; } .kdone{ padding:.9rem .8rem 1rem; } .kdone p{ font-size:.84rem; } .kdone .actions{ margin-top:.8rem; } /* No celular o portal vira bottom-sheet: sobe de baixo, ocupa a largura toda e some. O chat atrás continua inteiro — era ele que antes ficava espremido pela coluna do CRM. */ .kportal{ place-items:end stretch; padding:0; } .kportal__panel{ max-width:none; border-radius:14px 14px 0 0; padding:.95rem .85rem 1.15rem; max-height:86%; overflow-y:auto; } .pf{ gap:.25rem; } .pf__col{ padding:.4rem .22rem; min-height:118px; } .pf__h{ font-size:.47rem; letter-spacing:.01em; } .pf__card{ padding:.38rem .4rem; } .pf__card b{ font-size:.67rem; } .pf__card span{ font-size:.57rem; } .pf__ghost{ padding:.32rem .36rem; } .pf__ghost b{ font-size:.56rem; } .pkpi{ gap:.32rem; } .pkpi__i{ padding:.6rem .3rem; } .pkpi__i b{ font-size:1rem; } .pkpi__i span{ font-size:.49rem; letter-spacing:.05em; } .pmg{ grid-template-columns:minmax(0,1fr); gap:.4rem; } .pmg__arrow{ transform:rotate(90deg); } .kag__slot{ flex:1 1 100%; } .hero__mock .kapp{ height:400px; } .stats{ grid-template-columns:1fr; } .stat{ border-left:0; border-top:1px solid var(--hair); padding:1.1rem 1rem; } .stat:first-child{ border-top:0; } } /* ---------- colunas / tiles ---------- */ .tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .tiles--2{ grid-template-columns:repeat(2,1fr); } .tiles--3{ grid-template-columns:repeat(3,1fr); } .tile{ padding:1.8rem 1.5rem; } .tile__k{ font-family:var(--display); font-size:.78rem; font-weight:700; letter-spacing:.16em; color:var(--accent); } .tile h3{ font-size:1.13rem; margin-top:1rem; } .tile p{ margin-top:.7rem; font-size:.96rem; } /* ---------- barra de carga: quanto vira automático × quanto fica com o time ---------- */ .loadbar{ margin-bottom:1.8rem; } .loadbar__track{ display:flex; height:52px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--hair); background:var(--panel); } .loadbar__seg{ width:var(--w); min-width:0; } .loadbar__seg--ia{ background:var(--fill); } .loadbar__seg--time{ background:var(--panel-h); border-left:1px solid var(--hair); } .loadbar__legend{ display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:.85rem; font-size:.82rem; color:var(--muted-2); } .loadbar__legend span{ display:inline-flex; align-items:center; gap:.5rem; } .loadbar__dot{ width:8px; height:8px; border-radius:50%; text-decoration:none; flex:none; } .loadbar__dot--ia{ background:var(--accent); box-shadow:0 0 6px rgba(var(--glow),.7); } .loadbar__dot--time{ background:var(--muted-2); } /* ---------- mini-visuais dos tiles de controle: mostrar, não só dizer ---------- */ .tilevis{ margin-bottom:1rem; } .tvlock{ display:flex; align-items:center; gap:.55rem; padding:.65rem .75rem; border:1px solid var(--hair); border-radius:var(--r-md); background:var(--panel); } .tvlock__icon{ color:var(--accent); flex:none; display:flex; } .tvlock__icon svg{ width:16px; height:16px; } .tvlock__label{ font-size:.8rem; color:var(--muted); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tvlock__badge{ flex:none; font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); border:1px solid rgba(var(--glow),.4); border-radius:99px; padding:.22rem .55rem; } .tvswitch{ display:flex; align-items:center; gap:.6rem; padding:.65rem .75rem; border:1px solid var(--hair); border-radius:var(--r-md); background:var(--panel); } .tvswitch__track{ position:relative; flex:none; width:34px; height:19px; border-radius:99px; background:var(--fill); transition:background .5s var(--ease) .35s; } .tvswitch__thumb{ position:absolute; top:2px; left:17px; width:15px; height:15px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.4); transition:transform .5s var(--ease) .35s; } .tiles.is-in .tvswitch__track{ background:var(--hair); } .tiles.is-in .tvswitch__thumb{ transform:translateX(-15px); } .tvswitch__label{ font-size:.8rem; color:var(--muted); } .tvcap{ padding:.65rem .75rem; border:1px solid var(--hair); border-radius:var(--r-md); background:var(--panel); } .tvcap__track{ position:relative; height:10px; border-radius:99px; background:var(--hair); } .tvcap__fill{ position:absolute; inset:0; width:0; border-radius:99px; background:var(--fill); transition:width 1.1s var(--ease) .2s; } .tiles.is-in .tvcap__fill{ width:68%; } .tvcap__cap{ position:absolute; top:-3px; bottom:-3px; left:78%; width:2px; background:var(--muted-2); } .tvcap__cap::after{ content:""; position:absolute; top:-4px; left:50%; transform:translateX(-50%); width:6px; height:6px; border-radius:50%; background:var(--muted-2); } .tvcap__legend{ display:flex; justify-content:space-between; margin-top:.55rem; font-size:.66rem; color:var(--muted-2); } .tvsilo{ display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; } .tvsilo__box{ border:1px solid var(--hair); border-radius:var(--r-md); background:var(--panel); padding:.55rem .4rem; text-align:center; } .tvsilo__box span{ font-size:.62rem; color:var(--muted-2); font-weight:600; letter-spacing:.02em; } /* ---------- eixos ---------- */ .axis{ display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); gap:1.8rem 3.5rem; align-items:start; padding-block:clamp(2.5rem,5vw,3.75rem); border-top:1px solid var(--hair); } .axis__k{ display:flex; align-items:baseline; gap:.7rem; font-family:var(--display); font-size:.76rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem; } .axis__t{ font-size:clamp(1.45rem,2.8vw,2.05rem); letter-spacing:-.026em; } .axis__d{ margin-top:1rem; font-size:1rem; } .axis ul li{ font-size:.99rem; color:var(--muted); padding:.8rem 0; border-top:1px solid var(--hair-2); display:flex; gap:.85rem; align-items:flex-start; } .axis ul li:first-child{ border-top:0; padding-top:0; } .axis ul li::before{ content:""; width:4px; height:4px; margin-top:.62rem; flex:none; background:var(--accent); box-shadow:0 0 7px rgba(91,135,255,.8); } /* ============================================================ DEMOS DE SEÇÃO — mostrar em vez de só falar. Reconstruídas a partir da UI real do kyreon-web (inbox, kanban, indicador de IA digitando, banner de aprovação), na identidade do próprio Kyreon — a mesma dos tokens no topo deste arquivo. Quem move estas demos é o scroll: cada uma é uma timeline seekável montada em kyreon.js. Por isso não há @keyframes de loop aqui — animação em loop não sabe voltar, e o scroll volta. ============================================================ */ .axis--media{ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); } .axis ul{ margin-top:1.4rem; } .demo{ overflow:hidden; align-self:stretch; } .demo__bar{ display:flex; align-items:center; gap:.6rem; padding:.85rem 1.1rem; border-bottom:1px solid var(--hair-2); font-family:var(--display); font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); } .demo__bar s{ width:5px; height:5px; border-radius:50%; background:var(--accent); text-decoration:none; box-shadow:0 0 8px rgba(91,135,255,.9); flex:none; } .demo__k{ height:11px; width:auto; color:var(--muted-2); flex:none; } /* --- inbox / chat (atende) --- */ .chatw{ padding:1.2rem 1.1rem 1.4rem; } .chatw__head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:.9rem; margin-bottom:1rem; border-bottom:1px solid var(--hair-2); } .chatw__who b{ display:block; font-family:var(--display); font-size:.92rem; color:var(--text); font-weight:600; } .chatw__who span{ display:block; font-size:.74rem; color:var(--muted-2); margin-top:.15rem; } .chatw__ia{ font-family:var(--display); font-size:.62rem; font-weight:700; letter-spacing:.1em; color:var(--accent); border:1px solid rgba(91,135,255,.3); border-radius:var(--r-sm); padding:.3rem .55rem; white-space:nowrap; } .chatw__msgs{ display:flex; flex-direction:column; gap:.6rem; min-height:150px; } .bub{ max-width:80%; padding:.65rem .85rem; border-radius:var(--r-md); font-size:.87rem; line-height:1.42; } .bub--in{ align-self:flex-start; background:#26282C; color:var(--muted); border-bottom-left-radius:2px; } .bub--out{ align-self:flex-end; background:linear-gradient(160deg,rgba(91,135,255,.18),rgba(91,135,255,.08)); border:1px solid rgba(91,135,255,.22); color:var(--text); border-bottom-right-radius:2px; } .bub--think{ align-self:flex-end; display:flex; align-items:center; gap:.55rem; background:transparent; border:1px dashed var(--hair); color:var(--muted-2); font-size:.76rem; border-bottom-right-radius:2px; } .bub--think em{ font-style:normal; } .tdots{ display:inline-flex; gap:3px; } .tdots i{ width:4px; height:4px; border-radius:50%; background:var(--accent); animation:tblink 1.1s ease-in-out infinite; } .tdots i:nth-child(2){ animation-delay:.18s; } .tdots i:nth-child(3){ animation-delay:.36s; } @keyframes tblink{ 0%,60%,100%{ opacity:.25; } 30%{ opacity:1; } } /* --- agenda --- */ .agw{ padding:1.2rem 1.1rem 1.4rem; } .agw__msg{ font-size:.87rem; color:var(--muted); font-style:italic; } .agw__slots{ display:flex; gap:.6rem; margin-top:1rem; } .slot{ font-family:var(--display); font-size:.85rem; font-weight:600; color:var(--muted); border:1px solid var(--hair); border-radius:var(--r-sm); padding:.55rem .9rem; transition:background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease); } .slot{ position:relative; overflow:hidden; } .slot__fill{ position:absolute; inset:0; background:var(--fill); } .slot b{ position:relative; font-weight:600; } .slot.is-picked{ border-color:transparent; color:#0A0A0B; } .agw__confirm{ display:flex; align-items:center; gap:.8rem; margin-top:1.3rem; padding-top:1.2rem; border-top:1px solid var(--hair-2); opacity:0; transform:translateY(6px); transition:opacity .5s var(--ease), transform .5s var(--ease); } .agw__confirm.is-in{ opacity:1; transform:none; } .agw__confirm svg{ width:20px; height:20px; color:var(--accent); flex:none; } .agw__confirm b{ display:block; color:var(--text); font-family:var(--display); font-size:.9rem; } .agw__confirm span{ display:block; font-size:.76rem; color:var(--muted-2); margin-top:.15rem; } /* --- kanban (registra) --- */ .kb{ position:relative; padding:1.2rem 1.1rem 3.6rem; min-height:210px; } .kb__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:2%; } .kb__h{ font-family:var(--display); font-size:.64rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); border:1px dashed var(--hair); border-radius:var(--r-sm); padding:.5rem .35rem; text-align:center; } .kb__h{ transition:color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease); } .kb__h.is-on{ color:var(--accent); border-style:solid; border-color:rgba(91,135,255,.4); background:rgba(91,135,255,.06); } .kb__card{ position:absolute; top:3.4rem; width:21%; left:2%; background:var(--panel-h); border:1px solid rgba(91,135,255,.3); border-radius:var(--r-sm); padding:.7rem .7rem; box-shadow:0 10px 24px -14px #000; } .kb__card b{ display:block; font-size:.8rem; color:var(--text); font-family:var(--display); } .kb__card span{ display:block; margin-top:.3rem; font-size:.78rem; color:var(--accent); font-weight:600; } .kb__card i{ display:block; margin-top:.4rem; font-style:normal; font-size:.68rem; color:var(--muted-2); } /* --- follow-up (nunca esquece) --- */ .fu{ position:relative; display:flex; justify-content:space-between; padding:2.4rem 1.4rem 1.6rem; } .fu::before{ content:""; position:absolute; left:1.6rem; right:1.6rem; top:2.85rem; height:1px; background:var(--hair); } .fu__step{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.6rem; } .fu__step i{ display:block; width:9px; height:9px; border-radius:50%; background:var(--near); border:1px solid var(--hair); box-shadow:0 0 0 4px var(--panel); } .fu__step span{ font-size:.72rem; color:var(--muted-2); letter-spacing:.02em; } .fu__step i{ transition:background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); } .fu__step.is-on i{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px var(--panel), 0 0 10px rgba(91,135,255,.8); } /* --- aprovação humana (controle) --- */ .apw{ padding:1.2rem 1.1rem 1.4rem; } .apw__bubbles{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.1rem; } .apw__banner{ border:1px solid rgba(91,135,255,.3); border-radius:var(--r-md); padding:1rem 1.1rem; background:rgba(91,135,255,.05); transition:box-shadow .5s var(--ease); } .apw__banner-top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; } .apw__banner-top b{ font-family:var(--display); font-size:.82rem; color:var(--text); } .apw__banner-top .lvl{ font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:#FFC98D; border:1px solid rgba(255,201,141,.35); border-radius:var(--r-sm); padding:.2rem .5rem; white-space:nowrap; } .apw__banner p{ margin-top:.6rem; font-size:.85rem; color:var(--muted); } .apw__banner p b{ color:var(--text); } .apw__banner-actions{ display:flex; gap:.6rem; margin-top:.9rem; } .apw__btn{ font-family:var(--display); font-size:.76rem; font-weight:600; border-radius:var(--r-sm); padding:.45rem .85rem; } .apw__btn--ok{ background:var(--fill); color:#0A0A0B; } .apw__btn--no{ border:1px solid var(--hair); color:var(--muted); } .apw__banner.is-live{ box-shadow:0 0 26px -4px rgba(91,135,255,.5); } /* ---------- comparação ---------- */ .tbl-wrap{ overflow-x:auto; } .compare{ width:100%; min-width:560px; border-collapse:collapse; } .compare th, .compare td{ padding:1rem .9rem; text-align:left; border-top:1px solid var(--hair-2); font-size:.93rem; vertical-align:top; } .compare thead th{ border-top:0; font-family:var(--display); font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); padding-bottom:1rem; } .compare tbody th{ font-family:var(--display); font-weight:600; color:var(--text); font-size:.92rem; letter-spacing:-.01em; white-space:nowrap; } .compare .kyreon{ background:rgba(var(--glow),.055); border-left:1px solid rgba(var(--glow),.28); } .compare td.kyreon{ color:var(--text); } .compare thead th.kyreon{ color:var(--accent); border-top-left-radius:var(--r-md); } .compare tbody tr:last-child td.kyreon{ border-bottom-left-radius:var(--r-md); } .td-check{ width:15px; height:15px; margin:0 .5rem -2px 0; color:var(--accent); flex:none; } /* ---------- faq ---------- */ .faq{ max-width:820px; } .faq details{ border-top:1px solid var(--hair); } .faq details:last-child{ border-bottom:1px solid var(--hair); } .faq summary{ cursor:pointer; list-style:none; position:relative; padding:1.35rem 3rem 1.35rem 0; font-family:var(--display); font-size:1.1rem; font-weight:600; letter-spacing:-.02em; color:var(--text); transition:color .25s var(--ease); } .faq summary::-webkit-details-marker{ display:none; } .faq summary:hover{ color:var(--accent); } .faq summary::after{ content:""; position:absolute; right:.3rem; top:50%; width:13px; height:13px; background:var(--accent); transform:translateY(-50%); transition:transform .3s var(--ease); -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='square'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='square'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); } .faq details[open] summary::after{ transform:translateY(-50%) rotate(135deg); } .faq p{ padding:0 3rem 1.5rem 0; font-size:.99rem; } /* ---------- cta ---------- */ .cta__panel{ padding:clamp(2.5rem,5.5vw,4rem) clamp(1.5rem,4vw,3rem); text-align:center; position:relative; overflow:hidden; } .cta__panel::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse 60% 60% at 50% 118%, rgba(91,135,255,.26) 0%, transparent 64%); } .cta__panel > *{ position:relative; z-index:1; margin-inline:auto; } .cta__panel .t-section{ max-width:22ch; } .cta__panel .t-lead{ margin-top:1.3rem; max-width:46ch; } .cta__panel .actions{ justify-content:center; } .cta__meta{ margin-top:1.9rem; font-size:.81rem; color:var(--muted-2); } /* ---------- footer ---------- */ footer{ padding-block:3.25rem 2.25rem; font-size:.85rem; border-top:1px solid var(--hair); } .foot__top{ display:flex; flex-wrap:wrap; gap:2.5rem; justify-content:space-between; align-items:flex-start; padding-bottom:2.2rem; border-bottom:1px solid var(--hair); } .foot__word{ height:13px; width:auto; display:block; color:var(--text); } .foot__brand p{ margin-top:1.1rem; color:var(--muted-2); max-width:32ch; font-size:.84rem; line-height:1.5; } .foot__brand p a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; } .foot__brand p a:hover{ color:var(--accent); } .foot__cols{ display:flex; flex-wrap:wrap; gap:3.5rem; } .foot__col h4{ font-family:var(--body); font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); } .foot__col ul{ margin-top:.9rem; } .foot__col li{ padding:.3rem 0; } .foot__col a{ color:var(--muted); text-decoration:none; transition:color .25s var(--ease); } .foot__col a:hover{ color:var(--accent); } .foot__bot{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; padding-top:1.7rem; color:var(--muted-2); font-size:.79rem; } /* ---------- reveal ---------- */ .reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); } .reveal.is-in{ opacity:1; transform:none; } /* ============================================================ FORMULÁRIO ============================================================ */ dialog.modal{ padding:0; border:0; background:transparent; color:var(--muted); max-width:min(520px, calc(100vw - 40px)); width:100%; margin:auto; } dialog.modal::backdrop{ background:rgba(10,10,11,.8); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } dialog.modal[open]{ animation:modal-in .32s var(--ease); } @keyframes modal-in{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } } .modal__box{ padding:clamp(1.6rem,4vw,2.2rem); text-align:left; } .modal__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; } .modal__head h2{ font-family:var(--display); font-size:1.5rem; letter-spacing:-.028em; color:var(--text); } .modal__head p{ margin-top:.6rem; font-size:.94rem; max-width:40ch; } .modal__x{ flex:none; width:34px; height:34px; cursor:pointer; color:var(--muted); display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid var(--hair); border-radius:var(--r-sm); transition:color .25s var(--ease), border-color .25s var(--ease); } .modal__x:hover{ color:var(--text); border-color:var(--accent); } .field{ margin-top:1.1rem; } .field label{ display:block; font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:.5rem; } .field input, .field select{ width:100%; padding:.78rem .9rem; font-family:var(--body); font-size:1rem; color:var(--text); background:#1C1C1E; border:1px solid var(--hair); border-radius:var(--r-sm); transition:border-color .25s var(--ease), background .25s var(--ease); -webkit-appearance:none; appearance:none; } .field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237F899B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .8rem center; background-size:16px; padding-right:2.4rem; } .field input::placeholder{ color:#6E747D; } .field input:focus, .field select:focus{ outline:none; border-color:var(--accent); background:#26282C; } .field input:focus-visible, .field select:focus-visible{ outline:none; } .field small{ display:none; margin-top:.4rem; font-size:.8rem; color:#F97066; } .field.is-bad input, .field.is-bad select{ border-color:#F97066; } .field.is-bad small{ display:block; } .modal__foot{ margin-top:1.6rem; } .modal__foot .btn{ width:100%; } .modal__note{ margin-top:.9rem; font-size:.78rem; color:var(--muted-2); text-align:center; } .modal__note b{ color:var(--muted); font-weight:500; } /* ============================================================ Responsivo ============================================================ */ @media (max-width:1024px){ .tiles{ grid-template-columns:repeat(2,1fr); } .axis{ grid-template-columns:1fr; gap:1.5rem; } } @media (max-width:820px){ .nav__links{ display:none; } .nav__right .tlink{ display:none; } .nav__toggle{ display:inline-flex; } .tiles--3{ grid-template-columns:1fr; } } @media (max-width:640px){ :root{ --gutter:20px; --lg-blur:blur(16px) saturate(160%); } body{ font-size:16px; } .tiles, .tiles--2, .stats{ grid-template-columns:1fr; } .actions{ flex-direction:column; align-items:stretch; } .actions .btn{ width:100%; } .shead h2{ max-width:none; } .faq summary{ font-size:1.02rem; } } /* ============================================================ SEÇÕES CINEMATOGRÁFICAS As quatro seções que têm demo travam a tela enquanto o preview roda. Quem move a animação é o scroll de quem visita — por isso as demos são timelines seekáveis, não loops de setTimeout. Regra de layout: o estado FINAL é o que está no HTML e no CSS. O GSAP anima a partir dele (gsap.from). Se o GSAP não carregar, a página aparece completa em vez de vazia. ============================================================ */ /* Vale em qualquer largura: o palco é o mesmo no desktop e no celular. O que muda é só o quanto o preview cresce. */ .axis--cine, .section--cine{ /* Enquanto pinado, o GSAP fixa este elemento com position:fixed mas z-index:auto — sem um z-index explícito aqui, o scrim (z-index:85, também fixed) pinta por cima da seção inteira, apagando o preview mesmo com o z-index dele lá dentro (esse z-index só compete DENTRO do contexto de empilhamento que o position:fixed cria aqui — nunca chega a competir com o scrim, que vive fora, num galho separado do DOM). */ z-index:86; min-height:100vh; align-content:center; } .axis--cine{ align-items:center; padding-block:clamp(1.5rem,5vh,4rem); } .section--cine{ display:grid; } .cine-bloco{ min-width:0; } /* na tela travada o preview não estica: caixa alta e vazia rouba a atenção que era pra estar no que a demo mostra */ .axis--cine .demo{ align-self:center; } /* No desktop o estado chapado continua em duas colunas: empilhar texto largo + preview passa de 100vh, e seção travada não rola — o fim ficaria fora da tela. O palco não depende disso: ele centraliza o preview na tela venha ele de onde vier. Essa regra tinha ficado sem media query — valia em QUALQUER largura, inclusive celular, e por isso o texto e o preview espremiam lado a lado numa tela de 390px: duas colunas estreitas com tudo quebrando linha, em vez de uma seção só, empilhada. */ @media (min-width:861px){ .axis--media.axis--cine{ grid-template-columns:minmax(0,1fr) minmax(0,1.06fr); column-gap:3.5rem; } } /* O texto do palco ocupa a largura inteira agora, não mais uma coluna estreita ao lado do preview — então precisa da mesma escala tipográfica das outras seções, senão fica apertado e fora de tom em relação ao resto da página. */ .axis--cine .axis__k{ margin-bottom:1.5rem; } .axis--cine .axis__t{ font-size:clamp(1.6rem,2.9vw,2.3rem); letter-spacing:-.026em; line-height:1.16; } .axis--cine .axis__d{ font-size:1.06rem; line-height:1.62; margin-top:1.25rem; } .axis--cine ul{ margin-top:2rem; } .axis--cine ul li{ font-size:1rem; line-height:1.55; padding:.9rem 0; } .axis--cine ul li::before{ margin-top:.65rem; } /* No celular a seção travada PRECISA caber em 100vh: o que passar disso fica preso fora da tela, porque elemento pinado não rola. Daí o aperto — só dentro das seções de palco. */ @media (max-width:860px){ .axis--cine{ padding-block:1.1rem; } .axis--media.axis--cine{ grid-template-columns:1fr; } .axis--media.axis--cine{ row-gap:1.1rem; } .axis--cine .axis__t{ font-size:clamp(1.25rem,5.2vw,1.6rem); } .axis--cine .axis__d{ font-size:.9rem; margin-top:.6rem; } .axis--cine ul{ margin-top:.7rem; } .axis--cine ul li{ font-size:.84rem; padding:.34rem 0; line-height:1.4; } .axis--cine ul li::before{ margin-top:.45rem; } .axis--cine .chatw__msgs{ min-height:0; gap:.38rem; } .axis--cine .chatw, .axis--cine .agw, .axis--cine .apw{ padding:.85rem .8rem .95rem; } .axis--cine .chatw__head{ padding-bottom:.6rem; margin-bottom:.7rem; } .axis--cine .bub{ font-size:.8rem; padding:.48rem .65rem; line-height:1.38; } .axis--cine .chatw__who b{ font-size:.86rem; } .axis--cine .chatw__who span{ font-size:.7rem; } .axis--cine .kb{ padding:.85rem .8rem 2.2rem; min-height:165px; } .axis--cine .kb__slot{ height:120px; } .axis--cine .agw__slots{ margin-top:.8rem; } .axis--cine .agw__confirm{ margin-top:.9rem; padding-top:.85rem; } } /* o preview ganha o palco: sobe, cresce e acende */ .cine__media{ position:relative; will-change:transform, opacity; } /* Escurece a página inteira enquanto o preview está "no palco" — nada mais deve competir com ele nesse instante. Some assim que o texto começa a chegar. Decorativo: nunca bloqueia clique. */ .cine-scrim{ position:fixed; inset:0; z-index:85; pointer-events:none; background:rgba(10,10,11,.72); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; } /* trilho de progresso — rolagem longa sem indicador desorienta */ .prail{ position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:60; display:flex; flex-direction:column; gap:11px; } .prail a{ display:block; width:7px; height:7px; border-radius:50%; background:var(--hair); border:0; padding:0; cursor:pointer; transition:background .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease); } .prail a::after{ content:attr(data-nome); position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .3s var(--ease); } .prail a{ position:relative; } .prail a:hover::after, .prail a:focus-visible::after{ opacity:1; } .prail a.is-on{ background:var(--accent); box-shadow:0 0 10px rgba(var(--glow),.85); transform:scale(1.3); } @media (max-width:1180px){ .prail{ display:none; } } @media (prefers-reduced-motion:reduce){ .prail{ display:none; } } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; } .reveal{ opacity:1; transform:none; } }