/* WorkSpace HeroiTech — página 4 "Frente e verso" (issue #1048). Papel claro, tinta de caneta (o azul da marca) e marca-texto só onde marca informação. As telas da janela usam os tokens reais do produto (layout-v2 de src/app/globals.css). */ /* Fontes servidas pelo próprio site (subconjunto latin do Google Fonts, licença em fonts/OFL.txt) */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/ibm-plex-sans.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("../fonts/inter-tight.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Mrs Saint Delafield"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/mrs-saint-delafield.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: light; --papel: #fcfcfd; --papel-2: #f3f5f9; --tinta: #0e1533; --tinta-2: #3b4460; --cinza: #5a6278; --linha: rgba(14, 21, 51, .1); --caneta: #2b3c86; /* azul do logotipo HeroiTech */ --caneta-viva: #2a40c4; --marca-texto: #ffe45e; --marca-texto-2: #fff4b0; /* tokens reais do produto (layout-v2) */ --app-bg: hsl(226 33% 96%); --app-fg: hsl(228 31% 14%); --app-s1: #fff; --app-s2: hsl(226 27% 97%); --app-pri: hsl(241 90% 67%); --app-borda: hsl(228 33% 86%); --app-mudo: hsl(228 15% 41%); --f-tit: "Inter Tight", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --f-txt: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --barra: 64px; --sai: cubic-bezier(.16, 1, .3, 1); --gutter: max(16px, 4vw); } @media (max-width: 899px) { :root { --barra: 56px; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--barra) + 12px); } body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 18px/1.6 var(--f-txt); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img, svg, video { display: block; max-width: 100%; } button, input, select { font: inherit; color: inherit; } a { color: inherit; } ::selection { background: var(--marca-texto); color: var(--tinta); } :focus-visible { outline: 2px solid var(--caneta-viva); outline-offset: 3px; border-radius: 6px; } .sq { white-space: nowrap; } /* palavra com hífen não quebra no hífen */ .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .pular { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--tinta); color: #fff; padding: 10px 14px; border-radius: 10px; text-decoration: none; } .pular:focus { top: 12px; } /* texto do site em linha contínua: títulos equilibrados, parágrafos sem palavra sozinha na última linha (as telas do produto ficam fora) */ :is(.fluxo, .secao) :is(h1, h2, h3) { text-wrap: balance; } :is(.fluxo, .secao) :is(p, dd, figcaption, small) { text-wrap: pretty; } /* ── Cabeçalho: a aba da pasta, presa à borda de cima ───────────── */ /* Uma aba de papel pendurada no alto da página, com as curvas côncavas da orelha de uma pasta de processo. O logotipo HeroiTech e o nome WorkSpace ficam nela o tempo todo; a página passa por trás, dos dois lados. .barra só reserva a altura (o script mede por ela); quem desenha é .orelha. */ .barra { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--barra); display: flex; justify-content: center; pointer-events: none; } /* véu atrás da aba: o texto que sobe se desfaz em vez de aparecer picado na borda dela */ .barra::before { content: ""; position: absolute; inset: 0 0 auto 0; height: calc(var(--barra) + 22px); z-index: -1; pointer-events: none; background: rgba(252, 252, 253, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); mask: linear-gradient(#000 55%, transparent); -webkit-mask: linear-gradient(#000 55%, transparent); } .orelha { --curva: 18px; position: relative; height: 100%; max-width: calc(100% - 2 * var(--curva) - 2 * max(8px, 2vw)); display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); padding: 0 10px 0 26px; background: #fff; border-radius: 0 0 26px 26px; pointer-events: auto; /* drop-shadow segue o recorte, curvas incluídas; box-shadow ficaria quadrado */ filter: drop-shadow(0 0 .6px rgba(14, 21, 51, .36)) drop-shadow(0 6px 14px rgba(14, 21, 51, .05)); transition: filter .4s var(--sai); } .barra.rolou .orelha { filter: drop-shadow(0 0 .6px rgba(14, 21, 51, .3)) drop-shadow(0 16px 30px rgba(14, 21, 51, .13)); } .orelha::before, .orelha::after { content: ""; position: absolute; top: 0; width: var(--curva); height: var(--curva); background: radial-gradient(circle at var(--cx) 100%, transparent calc(var(--curva) - .5px), #fff var(--curva)); } .orelha::before { right: 100%; --cx: 0; } .orelha::after { left: 100%; --cx: 100%; } .marca { display: flex; align-items: center; gap: 14px; text-decoration: none; border-radius: 10px; } .marca img { height: 26px; width: auto; } /* a marca e o botão nunca encolhem; quem sai primeiro, se faltar espaço, são os lados */ .orelha > .marca, .orelha > .btn { flex: none; } .barra .marca { padding-block: 10px; } .barra .marca img { height: 25px; margin-right: -12px; } /* o SVG oficial tem folga à direita do nome */ .barra .marca-sim { display: none; width: 27px; height: 24px; fill: var(--caneta); } .marca-sep { width: 1px; height: 24px; background: rgba(14, 21, 51, .18); } .marca-ws { font: 650 22px/1 var(--f-tit); letter-spacing: -.03em; color: var(--tinta); white-space: nowrap; } /* a pílula do lado em que a pessoa está: tinta na rotina administrativa, marca-texto no comercial */ .lados { display: flex; gap: 2px; position: relative; } .lados a { position: relative; z-index: 1; text-decoration: none; font: 500 15px/1 var(--f-txt); color: var(--tinta-2); padding: 14.5px 16px; border-radius: 999px; white-space: nowrap; transition: color .3s; } .lados a:hover { color: var(--tinta); } .lados a[aria-current="true"] { color: var(--caneta); } .lados-pilula { position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 0; border-radius: 999px; background: rgba(43, 60, 134, .08); box-shadow: inset 0 0 0 1px rgba(43, 60, 134, .1); transition: transform .5s var(--sai), width .5s var(--sai), opacity .3s, background-color .4s, box-shadow .4s; } .lados:has(a[href="#comercial"][aria-current="true"]) .lados-pilula { background: var(--marca-texto-2); box-shadow: inset 0 0 0 1px rgba(214, 178, 0, .4); } .lados a[href="#comercial"][aria-current="true"] { color: #5b4a00; } .orelha .btn { --alt: 44px; padding-left: 20px; gap: 12px; font-size: 14.5px; } .barra-prog { position: absolute; left: 26px; right: 26px; bottom: 0; height: 2px; border-radius: 2px; transform-origin: 0 50%; transform: scaleX(0); background: var(--caneta); transition: background-color .4s; } .barra.no-verso .barra-prog { background: #e7c400; } .curto { display: none; } @media (max-width: 1199px) { .orelha .longo { display: none; } .orelha .curto { display: inline; } } /* celular: a aba fica só com a marca, centrada; o agendar desce para o pé da tela (.cta-pe) */ @media (max-width: 899px) { .lados, .orelha .btn { display: none; } .orelha { --curva: 14px; padding: 0 20px; border-radius: 0 0 22px 22px; } .barra .marca { gap: 10px; padding-block: 12px; } .barra .marca img { height: 20px; margin-right: -10px; } .marca-ws { font-size: 19px; } .marca-sep { height: 20px; } .barra-prog { left: 20px; right: 20px; } } .btn.cta-pe { display: none; } /* .btn.cta-pe: precisa vencer o .btn, que vem depois */ @media (max-width: 899px) { .btn.cta-pe { display: flex; position: fixed; z-index: 50; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); width: fit-content; margin: 0 auto; translate: 0 calc(100% + 24px); opacity: 0; visibility: hidden; transition: translate .45s var(--sai), opacity .3s, visibility 0s .45s, transform .25s var(--sai), box-shadow .3s var(--sai); } .btn.cta-pe.ver { translate: 0 0; opacity: 1; visibility: visible; transition: translate .45s var(--sai), opacity .3s, visibility 0s, transform .25s var(--sai), box-shadow .3s var(--sai); } } @media (max-width: 359px) { .marca-sep, .marca-ht { display: none; } .barra .marca-sim { display: block; } } /* ── Botões ─────────────────────────────────────────────────────── */ /* Cada botão é o rótulo mais um disco com o ícone da ação. No principal (tinta de caneta) o disco vira, frente e verso, ao passar o mouse ou receber o foco; no secundário (papel) as camadas do ícone se afastam. */ .btn { --alt: 54px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: var(--alt); padding: 0 7px 0 26px; border: 1px solid transparent; border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap; font: 600 16px/1 var(--f-txt); letter-spacing: -.01em; -webkit-tap-highlight-color: transparent; transition: transform .25s var(--sai), box-shadow .3s var(--sai), background-color .3s, color .3s; } .btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .btn:focus-visible { outline: 2px solid var(--caneta-viva); outline-offset: 3px; border-radius: 999px; } .puck { position: relative; display: grid; place-items: center; flex: none; width: calc(var(--alt) - 14px); height: calc(var(--alt) - 14px); border-radius: 50%; perspective: 260px; } .btn-tinta { color: #fff; background: linear-gradient(180deg, #3a4ea6 0%, #2b3c86 52%, #24337a 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(6, 10, 34, .3), 0 0 0 1px #1e2b66, 0 1px 2px rgba(14, 21, 51, .28), 0 12px 26px -12px rgba(43, 60, 134, .8); } .btn-tinta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 70%); } .puck-f, .puck-v { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .6s var(--sai); } .puck-f { color: #fff; background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); } .puck-v { color: var(--caneta); background: #fff; box-shadow: 0 2px 6px rgba(6, 10, 34, .28); transform: rotateY(-180deg); } .btn-linha { color: var(--tinta); background: #fff; box-shadow: inset 0 0 0 1px rgba(14, 21, 51, .15), inset 0 -2px 0 rgba(14, 21, 51, .045), 0 1px 2px rgba(14, 21, 51, .06), 0 12px 24px -18px rgba(14, 21, 51, .4); } .btn-linha .puck { color: var(--caneta); background: var(--papel-2); box-shadow: inset 0 0 0 1px rgba(43, 60, 134, .12); transition: background-color .3s; } .btn-linha .puck path { transition: transform .45s var(--sai); } @media (hover: hover) { .btn-tinta:not(:disabled, [aria-disabled="true"]):hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -1px 0 rgba(6, 10, 34, .3), 0 0 0 1px #1a265c, 0 2px 4px rgba(14, 21, 51, .24), 0 20px 36px -16px rgba(43, 60, 134, .9); } .btn-tinta:not(:disabled, [aria-disabled="true"]):hover::before { opacity: 1; } .btn-tinta:not(:disabled, [aria-disabled="true"]):hover .puck-f { transform: rotateY(180deg); } .btn-tinta:not(:disabled, [aria-disabled="true"]):hover .puck-v { transform: rotateY(0deg); } .btn-linha:not(:disabled, [aria-disabled="true"]):hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(14, 21, 51, .3), inset 0 -2px 0 rgba(14, 21, 51, .05), 0 2px 4px rgba(14, 21, 51, .06), 0 18px 32px -20px rgba(14, 21, 51, .5); } .btn-linha:not(:disabled, [aria-disabled="true"]):hover .puck { background: rgba(43, 60, 134, .1); } .btn-linha:not(:disabled, [aria-disabled="true"]):hover .c1 { transform: translateY(-2px); } .btn-linha:not(:disabled, [aria-disabled="true"]):hover .c3 { transform: translateY(2px); } } .btn-tinta:focus-visible .puck-f { transform: rotateY(180deg); } .btn-tinta:focus-visible .puck-v { transform: rotateY(0deg); } .btn-linha:focus-visible .c1 { transform: translateY(-2px); } .btn-linha:focus-visible .c3 { transform: translateY(2px); } .btn:not(:disabled, [aria-disabled="true"]):active { transform: translateY(1px) scale(.98); transition-duration: .08s; } .btn-tinta:not(:disabled, [aria-disabled="true"]):active { box-shadow: inset 0 1px 2px rgba(6, 10, 34, .35), 0 0 0 1px #1a265c, 0 1px 2px rgba(14, 21, 51, .3); } .btn-linha:not(:disabled, [aria-disabled="true"]):active { background: var(--papel-2); box-shadow: inset 0 0 0 1px rgba(14, 21, 51, .3), inset 0 1px 2px rgba(14, 21, 51, .12); } /* envio em andamento: o disco vira uma roda de espera e não gira mais */ .btn[aria-busy="true"] { cursor: progress; } .btn[aria-busy="true"] .puck-f { transform: none; } .btn[aria-busy="true"] .puck-v { transform: rotateY(-180deg); } .btn[aria-busy="true"] .puck-f svg { opacity: 0; } .btn[aria-busy="true"] .puck-f::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: espera .8s linear infinite; } @keyframes espera { to { transform: rotate(360deg); } } .btn:is(:disabled, [aria-disabled="true"]):not([aria-busy]) { opacity: .55; cursor: not-allowed; } /* "Ver em vídeo": ação de texto com o disco de play; no verso o disco é marca-texto */ .ver-video { display: none; align-items: center; gap: 12px; margin-top: 22px; min-height: 48px; padding: 4px 20px 4px 4px; border: 1px solid transparent; border-radius: 999px; background: rgba(255, 255, 255, .72); color: var(--tinta); cursor: pointer; font: 600 15px/1 var(--f-txt); box-shadow: inset 0 0 0 1px var(--linha); -webkit-tap-highlight-color: transparent; transition: background-color .3s, box-shadow .3s var(--sai), transform .25s var(--sai); } .ver-video.tem { display: inline-flex; } .ver-video .play { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; color: #fff; background: linear-gradient(180deg, #3a4ea6, #2b3c86 60%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px #1e2b66, 0 6px 14px -6px rgba(43, 60, 134, .75); transition: transform .35s var(--sai); } .ver-video .play svg { width: 15px; height: 15px; margin-left: 2px; fill: currentColor; } .verso-lado .ver-video .play { color: var(--tinta); background: var(--marca-texto); box-shadow: inset 0 0 0 1px rgba(150, 118, 0, .3), 0 6px 14px -6px rgba(170, 138, 0, .6); } @media (hover: hover) { .ver-video:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(14, 21, 51, .18), 0 12px 26px -16px rgba(14, 21, 51, .45); } .ver-video:hover .play { transform: scale(1.08); } } .ver-video:focus-visible { outline: 2px solid var(--caneta-viva); outline-offset: 3px; border-radius: 999px; } .ver-video:active { transform: scale(.98); transition-duration: .08s; } /* ── Palco: a janela do produto, presa enquanto o texto passa ───── */ .palco { position: relative; } .cena { position: sticky; top: 0; height: 100vh; height: 100svh; z-index: 1; pointer-events: none; overflow: hidden; } .cena-faixa { position: absolute; inset: 0 0 auto 0; height: 0; background: linear-gradient(var(--papel) calc(100% - 30px), rgba(252, 252, 253, 0)); opacity: 0; } .janela { position: absolute; left: 0; top: 0; width: 1280px; height: 844px; transform-origin: 0 0; perspective: 3600px; pointer-events: auto; will-change: transform; --u: 1; --k: 1; --px: 0; --py: 0; --f: 0; --c: 1; --vir: 0; --zk: .6; /* altura das camadas na vista explodida */ } .giro { position: absolute; inset: 0; transform-style: preserve-3d; /* na montagem a janela começa deitada (rotateX ~50°, girada no plano) e se endireita; a virada é o rotateY */ transform: rotateX(calc((var(--py) + 50) * var(--u) * 1deg)) rotateZ(calc(var(--u) * -8deg)) rotateY(calc(var(--px) * var(--u) * 1deg + var(--f) * 180deg)); } .face { position: absolute; inset: 0; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .face.verso { transform: rotateY(180deg); } .fundo { position: absolute; inset: 0; border-radius: 22px; background: var(--app-bg); opacity: calc(1 - var(--u) * .12); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px rgba(14, 21, 51, .08), 0 40px 80px -30px rgba(14, 21, 51, .35), 0 18px 36px -24px rgba(14, 21, 51, .3); } .jt { position: absolute; left: 0; top: 0; width: 1280px; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 18px; background: #fff; border-radius: 22px 22px 0 0; border-bottom: 1px solid var(--app-borda); } .jt i { width: 12px; height: 12px; border-radius: 50%; background: #e2e5ee; } .jt-titulo { position: absolute; left: 0; right: 0; text-align: center; font: 500 14px/44px var(--f-txt); color: var(--app-mudo); pointer-events: none; } .jt-titulo b { color: var(--app-fg); font-weight: 600; } /* espessura da folha (as duas laterais) e sombra no chão: só durante a virada */ .borda { position: absolute; top: 40px; bottom: 40px; width: 16px; margin-left: -8px; border-radius: 8px; transform: rotateY(90deg); opacity: var(--vir); background: linear-gradient(90deg, #c3cada, #eef1f7 42%, #dfe3ec 72%, #bfc6d6); } .b-esq { left: 0; } .b-dir { left: 1280px; } .janela.solta .borda { display: none; } .sombra { position: absolute; left: 8%; right: 8%; bottom: -36px; height: 80px; border-radius: 50%; pointer-events: none; opacity: var(--vir); background: radial-gradient(closest-side, rgba(14, 21, 51, .3), rgba(14, 21, 51, 0)); transform: scaleX(calc(.22 + .78 * var(--c))); } .vp { position: absolute; left: 0; top: 44px; width: 1280px; height: 800px; overflow: hidden; border-radius: 0 0 22px 22px; } .vp video.gravacao { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 20; background: #fff; } .cam { position: absolute; inset: 0; transform-origin: 0 0; transition: transform .9s var(--sai); } .janela.solta .vp { overflow: visible; } .janela.solta .frente, .janela.solta .frente .vp, .janela.solta .frente .cam, .janela.solta .frente .conteudo, .janela.solta .tela.ativa, .janela.solta .kpis { transform-style: preserve-3d; } .janela.solta .verso { visibility: hidden; } .janela.solta .cam { transition: none; transform: none !important; } .janela:not(.solta) .frag { will-change: auto; } .janela:not(.encaixada) .cam { transform: none !important; } /* peças soltas da montagem */ .frag { will-change: transform; } .janela.solta .frag { transform: translate3d(calc(var(--ex, 0) * var(--u) * var(--k) * 1px), calc(var(--ey, 0) * var(--u) * var(--k) * 1px), calc(var(--ez, 0) * var(--u) * var(--zk) * 1px)) rotateX(calc(var(--rx, 0) * var(--u) * 1deg)) rotateY(calc(var(--ry, 0) * var(--u) * 1deg)); box-shadow: 0 30px 60px -24px rgb(14 21 51 / calc(.32 * var(--u))), 0 0 0 1px rgb(14 21 51 / calc(.06 * var(--u))); } /* a flutuação só roda com mouse: no celular as peças ficam paradas, o que poupa bateria e deixa a primeira tela estável mais cedo */ @media (hover: hover) and (pointer: fine) { .janela.solta.parada .frag { animation: flutua 5.5s ease-in-out infinite alternate; animation-delay: calc(var(--ez, 0) * -9ms); } } @keyframes flutua { from { translate: 0 -7px; } to { translate: 0 7px; } } /* casca do app: cabeçalho com o logotipo (como no AppShell real) e o menu lateral em cartão */ .topo { position: absolute; left: 0; top: 0; width: 1280px; height: 56px; display: flex; align-items: center; gap: 18px; padding: 0 24px; background: var(--app-bg); } .topo img { height: 21px; width: auto; } .topo-tit { font: 600 17px/1 var(--f-txt); color: var(--app-fg); padding-left: 18px; border-left: 1px solid var(--app-borda); } .topo-dir { margin-left: auto; display: flex; align-items: center; gap: 10px; font: 500 14px/1 var(--f-txt); color: var(--app-mudo); } .avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: hsl(241 90% 67% / .16); color: hsl(241 70% 48%); font: 600 12px/1 var(--f-txt); } .lado { position: absolute; left: 16px; top: 64px; width: 220px; height: 720px; background: #fff; border: 1px solid var(--app-borda); border-radius: 16px; padding: 10px 10px; font: 500 14px/1 var(--f-txt); color: var(--app-mudo); } .lado-recolher { display: block; text-align: right; padding: 2px 8px 6px; color: hsl(228 15% 60%); font-size: 16px; } .lado-sec { display: block; font: 600 10px/1 var(--f-txt); letter-spacing: .1em; color: hsl(228 15% 58%); padding: 12px 10px 6px; margin-top: 6px; border-top: 1px solid var(--app-borda); } .lado button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7.5px 10px; border: 0; border-radius: 10px; background: none; font: 500 13.5px/1.1 var(--f-txt); color: var(--app-mudo); cursor: pointer; text-align: left; transition: background-color .3s, color .3s; } .lado button svg { width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .lado button:hover { background: var(--app-s2); color: var(--app-fg); } .lado button.ativo { background: hsl(241 90% 67% / .12); color: hsl(241 70% 52%); font-weight: 600; } .janela.solta .lado button { pointer-events: none; } .conteudo { position: absolute; left: 252px; top: 56px; width: 1028px; height: 744px; } .tela { position: absolute; inset: 0; padding: 8px 24px 24px 8px; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.99); transition: opacity .5s var(--sai), transform .7s var(--sai), visibility 0s .5s; --t: 0; } .tela.ativa { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--sai), transform .7s var(--sai), visibility 0s; } /* As telas fora de cena não entram no estilo nem no layout: são 11 das 14 telas (ficam montadas a ativa e as vizinhas), a maior parte dos elementos da página, e montá-las travava o celular no carregamento. A que sai continua visível até o fim do esmaecimento (allow-discrete). */ .tela:not(.ativa):not(.perto) { content-visibility: hidden; } @supports (transition-behavior: allow-discrete) { .tela { transition: opacity .5s var(--sai), transform .7s var(--sai), visibility 0s .5s, content-visibility 0s .5s allow-discrete; } .tela.ativa { transition: opacity .5s var(--sai), transform .7s var(--sai), visibility 0s, content-visibility 0s allow-discrete; } } /* kit de componentes do produto (réplica dos tokens reais) */ .app { font: 400 14px/1.45 var(--f-txt); color: var(--app-fg); } .cartao { background: var(--app-s1); border: 1px solid var(--app-borda); border-radius: 16px; } .selo { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font: 600 12.5px/1 var(--f-txt); white-space: nowrap; } .s-azul { background: #e0ebff; color: #1d4ed8; } .s-amar { background: #fdf3c4; color: #a15c07; } .s-verde { background: #dcf5e4; color: #15803d; } .s-lil { background: #efe7ff; color: #7e22ce; } .s-verm { background: #fde4e4; color: #c81e1e; } .s-cinza { background: #eef0f5; color: #475069; } .s-ind { background: hsl(241 90% 67% / .14); color: hsl(241 70% 50%); } .mono { font-family: var(--f-mono); } .rot { font: 500 11.5px/1 var(--f-txt); letter-spacing: .08em; text-transform: uppercase; color: var(--app-mudo); } .pbtn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 10px; border: 0; background: var(--app-pri); color: #fff; font: 600 14px/1 var(--f-txt); white-space: nowrap; } .pbtn.cl { background: #fff; color: var(--app-fg); box-shadow: inset 0 0 0 1px var(--app-borda); } .aba { height: 38px; padding: 0 16px; border-radius: 999px; background: #eceef4; color: #3d4560; font: 500 14px/38px var(--f-txt); white-space: nowrap; } .aba.on { background: #2563eb; color: #fff; } .cursor { position: absolute; z-index: 9; width: 22px; height: 22px; pointer-events: none; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3l15 8.2-6.6 1.6L9.7 19z' fill='%230e1533' stroke='white' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); } /* ── Texto que passa ao lado da janela ──────────────────────────── */ /* o texto sobe por cima da cena; a margem fica no texto para o sticky soltar no fim do palco */ .fluxo { position: relative; z-index: 2; pointer-events: none; margin-top: -100vh; margin-top: -100svh; padding-bottom: 30vh; } /* folga para a janela não sair antes do texto do Atlas */ .fluxo a, .fluxo button, .fluxo input, .fluxo select { pointer-events: auto; } .heroi { position: relative; min-height: 100vh; min-height: 100svh; padding: calc(var(--barra) + 7vh) var(--gutter) 0; text-align: center; } .heroi h1 { margin: 0 auto; font: 650 clamp(40px, 4.7vw, 76px)/1 var(--f-tit); letter-spacing: -.045em; text-wrap: balance; } .heroi h1 span { display: block; } .heroi-sub { margin: 22px auto 0; max-width: 60ch; color: var(--tinta-2); font-size: clamp(17px, 1.35vw, 20px); text-wrap: pretty; } .heroi-acoes { display: flex; gap: 14px; justify-content: center; margin-top: 34px; flex-wrap: wrap; } .montar { height: 125vh; } .heroi .dica { position: absolute; left: 50%; bottom: 3.5vh; transform: translateX(-50%); width: max-content; padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(252, 252, 253, .88); box-shadow: 0 0 0 1px var(--linha), 0 10px 30px -14px rgba(14, 21, 51, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .dica { font: 500 14px/1.4 var(--f-txt); color: var(--cinza); display: flex; align-items: center; gap: 10px; } .dica::before { content: ""; width: 22px; height: 34px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px currentColor; background: radial-gradient(circle at 50% 30%, currentColor 0 2.4px, transparent 3px); animation: roda 1.8s ease-in-out 4; } /* quatro voltas bastam para indicar a rolagem */ @keyframes roda { 50% { background-position: 0 6px; } } .capitulo, .passo { padding: 0 var(--gutter); } .passo { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; } .passo.destaque { min-height: 118vh; } .passo-txt { max-width: min(32vw, 460px); } /* ~50 caracteres por linha a 1440; o site.js encosta a janela logo depois (xd) */ .capitulo-tit { margin: 0 0 6px; font: 650 clamp(40px, 4.4vw, 68px)/1 var(--f-tit); letter-spacing: -.045em; } .passo .capitulo-lead { margin: 0 0 40px; font: 500 clamp(19px, 1.5vw, 23px)/1.4 var(--f-tit); letter-spacing: -.015em; color: var(--tinta-2); } .bloco { display: inline-block; margin: 0 0 14px; font: 600 13px/1 var(--f-txt); letter-spacing: .02em; color: var(--caneta); padding: 7px 12px; border-radius: 999px; background: rgba(43, 60, 134, .08); } .verso-lado .bloco { background: var(--marca-texto-2); color: #5b4a00; } .passo h3 { margin: 0 0 12px; font: 650 clamp(26px, 2.3vw, 36px)/1.08 var(--f-tit); letter-spacing: -.035em; } .passo p { margin: 0; color: var(--tinta-2); text-wrap: pretty; } .passo .extra { margin-top: 14px; font-size: 16px; color: var(--cinza); } /* o que ainda não está no sistema do escritório leva "Em breve", sem data */ .verso-lado .bloco.breve { margin-left: 4px; background: #fff; color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--linha); } .virada { height: 150vh; position: relative; } .virada-txt { position: absolute; left: 0; right: 0; top: calc(var(--barra) + 4vh); text-align: center; padding: 0 var(--gutter); z-index: 3; opacity: 0; transform: translateY(20px); transition: opacity .5s var(--sai), transform .7s var(--sai); } .virada-txt.ver { opacity: 1; transform: none; } .virada-h { margin: 0; font: 650 clamp(36px, 4.6vw, 76px)/1 var(--f-tit); letter-spacing: -.045em; text-wrap: balance; } .virada-txt .virada-h { color: var(--tinta); text-wrap: balance; } .virada-txt p { margin: 14px auto 0; max-width: 72ch; color: var(--tinta-2); text-wrap: pretty; } @media (max-width: 899px) { .cena { z-index: 3; } .cena-faixa { display: block; } .heroi { padding-top: calc(var(--barra) + 6vh); } .heroi h1 { font-size: clamp(36px, 10.4vw, 46px); } /* até 46 px cada frase do título cabe numa linha a 768 */ .heroi .dica { display: none; } .heroi-acoes { flex-direction: column; align-items: center; gap: 12px; } .heroi-acoes .btn { width: min(100%, 340px); justify-content: space-between; } .montar { height: 60vh; } .passo { min-height: 45vh; justify-content: flex-start; padding-bottom: 9vh; } .passo.destaque { min-height: 60vh; } .passo-txt { max-width: 55ch; } /* ~74 caracteres por linha no tablet */ .passo h3 { font-size: 26px; } .capitulo-tit { font-size: 38px; } .passo p { font-size: 17px; } } /* ── Seções depois do palco ─────────────────────────────────────── */ .secao { padding: clamp(96px, 14vh, 160px) var(--gutter); position: relative; } /* rodapé: só monta quando chega perto da tela. As seções com âncora ficam fora: com altura reservada, o salto para #licenca ou #demonstracao poderia parar fora do alvo no Safari, que não compensa a rolagem quando a seção monta. */ footer { content-visibility: auto; contain-intrinsic-size: auto 600px; } .secao h2 { margin: 0; font: 650 clamp(36px, 4.6vw, 72px)/1 var(--f-tit); letter-spacing: -.045em; text-wrap: balance; } .secao .lead { margin: 18px 0 0; max-width: 52ch; color: var(--tinta-2); } /* Onboarding: o celular do cliente fica preso enquanto as cinco etapas passam; cada etapa cai na ficha do escritório. O site.js passa a fita de telas pelo celular, liga a etapa ativa e escala o aparelho para a altura livre. */ .ob { padding-bottom: clamp(48px, 8vh, 96px); } .ob-trilho { position: relative; height: calc(100vh + 5 * 60vh); height: calc(100svh + 5 * 60svh); margin-top: clamp(24px, 4vh, 48px); } .ob-palco { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, clamp(360px, 32vw, 460px)) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding: calc(var(--barra) + 24px) 0 28px; } .ob-etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .ob-etapa { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; padding: 10px 0; } /* o fio entre os números: cada trecho fica azul quando a etapa de cima termina */ .ob-etapa:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 54px; bottom: -12px; width: 2px; border-radius: 2px; background: var(--linha); transition: background-color .45s var(--sai); } .ob-etapa.feita::after { background: var(--caneta); } .ob-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--papel); box-shadow: inset 0 0 0 1.5px rgba(14, 21, 51, .18); font: 600 16px/1 var(--f-tit); color: var(--cinza); transition: background-color .4s, color .4s, box-shadow .4s; } .ob-etapa.feita .ob-num { background: var(--caneta); color: #fff; box-shadow: none; } .ob-etapa.ativa .ob-num { background: #fff; color: var(--caneta); box-shadow: inset 0 0 0 2px var(--caneta), 0 0 0 6px rgba(43, 60, 134, .1); } .ob-etapa h3 { margin: 6px 0 0; font: 650 clamp(22px, 1.9vw, 30px)/1.12 var(--f-tit); letter-spacing: -.03em; color: var(--cinza); transition: color .4s; } .ob-etapa.feita h3 { color: var(--tinta-2); } .ob-etapa.ativa h3 { color: var(--tinta); } .ob-p { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .55s var(--sai), opacity .45s var(--sai); } .ob-p > p { min-height: 0; overflow: hidden; margin: 0; color: var(--tinta-2); transition: padding .55s var(--sai); } .ob-etapa.ativa .ob-p { grid-template-rows: 1fr; opacity: 1; } .ob-etapa.ativa .ob-p > p { padding-top: 10px; } .ob-numeros { display: none; } .ob-visual { position: relative; height: 100%; min-height: 0; } .ob-fone { position: absolute; left: 0; top: 0; } .ob-ficha { position: absolute; left: calc(100% + 20px); bottom: 0; z-index: 1; } /* apoiada no pé do aparelho: em tela baixa o aparelho encolhe e a ficha não sai da tela */ /* até 1199 px a coluna do texto não deixa espaço para o aparelho e a ficha lado a lado: a seção empilha */ @media (max-width: 1199px) { .ob-trilho { height: calc(100vh + 5 * 65vh); height: calc(100svh + 5 * 65svh); } /* celular e tablet: números no alto, o aparelho no meio e o texto da etapa embaixo; o pé fica livre para o agendar fixo */ .ob-palco { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px; align-items: stretch; padding: calc(var(--barra) + 14px) 0 calc(86px + env(safe-area-inset-bottom)); } .ob-numeros { order: 1; display: flex; justify-content: space-between; position: relative; width: min(100%, 300px); margin: 0 auto; --obp: 0; } .ob-numeros::before, .ob-numeros::after { content: ""; position: absolute; left: 14px; right: 14px; top: 13px; height: 2px; border-radius: 2px; background: var(--linha); } .ob-numeros::after { background: var(--caneta); transform-origin: 0 50%; transform: scaleX(var(--obp)); } .ob-numeros i { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--papel); box-shadow: inset 0 0 0 1.5px rgba(14, 21, 51, .18); font: 600 13px/1 var(--f-tit); font-style: normal; color: var(--cinza); transition: background-color .4s, color .4s, box-shadow .4s; } .ob-numeros i.feita { background: var(--caneta); color: #fff; box-shadow: none; } .ob-numeros i.ativa { background: #fff; color: var(--caneta); box-shadow: inset 0 0 0 2px var(--caneta); } .ob-visual { order: 2; } .ob-etapas { order: 3; gap: 0; } .ob-etapa { grid-area: 1 / 1; grid-template-columns: minmax(0, 1fr); padding: 0; opacity: 0; transition: opacity .4s var(--sai); } .ob-etapa.ativa { opacity: 1; } .ob-etapa::after, .ob-num { display: none; } .ob-etapa h3 { margin: 0; font-size: 24px; color: var(--tinta); } .ob-p { grid-template-rows: 1fr; opacity: 1; } .ob-p > p, .ob-etapa.ativa .ob-p > p { max-width: 62ch; padding-top: 8px; font-size: 16px; } /* ~70 caracteres por linha no tablet */ .ob-ficha { width: 280px; } } @media (min-width: 900px) and (max-width: 1199px) { .ob-palco { padding-bottom: 28px; } } /* sem o agendar fixo do pé */ @media (max-width: 599px) { .ob-ficha { display: none; } } /* filmes: um embaixo do outro, largos o bastante para ler as telas; no celular o 9:16 (fontes com media no