/* ═══════════════════════════════════════════════════════════════ Innoviax · páginas de detalhamento (carrega após site.css) Estrutura de storytelling: dor → virada → método → prova → ciclo. Arte-direção por página via classe no (page-cie, page-ascend…). ═══════════════════════════════════════════════════════════════ */ /* ── hero de capítulo ────────────────────────────────────────── */ .p-hero { position: relative; min-height: 88svh; display: flex; align-items: center; padding: 150px 0 90px; overflow: clip; } .p-kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-hi); text-decoration: none; margin-bottom: clamp(20px, 3vh, 32px); } .p-kicker .brand-dot { width: 8px; height: 8px; } .p-kicker:hover { text-decoration: underline; text-underline-offset: 4px; } .p-hero h1 { font-size: clamp(2.4rem, 5.8vw, 4.4rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.028em; max-width: 16em; margin-bottom: clamp(20px, 3.5vh, 34px); } .p-hero h1 em { font-style: normal; color: var(--accent); } .p-sub { max-width: 58ch; font-size: clamp(1.05rem, 1.5vw, 1.18rem); line-height: 1.65; color: var(--tx-d2); margin-bottom: clamp(26px, 4vh, 40px); } .p-ctas { display: flex; gap: 14px; flex-wrap: wrap; } /* entrada do hero */ .js .p-hero .p-kicker { animation: fade-in .8s ease-out both .1s; } .js .p-hero h1 { animation: fade-in .9s ease-out both .22s; } .js .p-hero .p-sub { animation: fade-in .9s ease-out both .38s; } .js .p-hero .p-ctas { animation: fade-in .9s ease-out both .5s; } .js .p-hero .p-art { animation: art-in 1.4s var(--ease) both .25s; } @keyframes art-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } } /* arte do hero (SVG decorativo à direita) */ .p-art { position: absolute; top: 50%; right: min(-120px, calc(-4vw - 80px)); width: clamp(480px, 50vw, 760px); aspect-ratio: 1; transform: translateY(-50%) !important; opacity: .85; pointer-events: none; } .js .p-hero .p-art { animation-name: art-in-y; } @keyframes art-in-y { from { opacity: 0; transform: translateY(calc(-50% + 20px)) scale(.96); } to { opacity: .85; transform: translateY(-50%) scale(1); } } .p-art svg { width: 100%; height: 100%; overflow: visible; } /* ── a dor (a razão de quem chegou) ──────────────────────────── */ .dor { padding: clamp(90px, 13vh, 160px) 0; background: var(--bg0); } .dor-head { max-width: 820px; margin-bottom: clamp(40px, 6vh, 64px); } .dor-head h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.026em; margin-bottom: 18px; } .dor-head h2 em { font-style: normal; color: var(--accent); } .dor-head p { color: var(--tx-d2); font-size: 1.1rem; line-height: 1.7; max-width: 58ch; } .dor-list { list-style: none; margin: 0; padding: 0; } .dor-list li { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(16px, 3vw, 48px); padding: clamp(22px, 3.4vh, 34px) 0; border-bottom: 1px solid var(--bg2); } .dor-list li:first-child { border-top: 1.5px solid var(--line-d); } .dor-list h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700; letter-spacing: -0.016em; line-height: 1.2; } .dor-list p { color: var(--tx-d2); line-height: 1.65; max-width: 58ch; } .dor-list strong { color: var(--tx-d1); } .dor-echo { margin-top: clamp(40px, 6vh, 60px); font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.018em; max-width: 30ch; } .dor-echo em { font-style: normal; color: var(--accent); } /* ── seções de método (capítulo claro) ───────────────────────── */ .p-light { padding: clamp(90px, 13vh, 160px) 0; } .p-light .chap-head { max-width: 900px; } /* trilho de fases (sequência real: rail vertical com linha) */ .rail { position: relative; margin-top: clamp(40px, 6vh, 64px); } .rail::before { content: ''; position: absolute; top: 10px; bottom: 10px; left: 25px; width: 1.5px; background: var(--line-l); } .rail-item { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr); gap: clamp(14px, 2.6vw, 40px); padding: clamp(20px, 3vh, 30px) 0 clamp(20px, 3vh, 30px) 76px; } .rail-n { position: absolute; left: 0; top: clamp(16px, 2.6vh, 26px); width: 52px; height: 52px; display: grid; place-items: center; background: var(--pg0); border: 1.5px solid var(--line-l); border-radius: 50%; font-weight: 800; font-size: 1.1rem; color: var(--tx-l2); transition: border-color .3s, color .3s; } .rail-item.lit .rail-n { border-color: var(--accent); color: var(--accent-deep); } .rail-item h3 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); font-weight: 700; letter-spacing: -0.016em; line-height: 1.18; } .rail-item .rail-k { display: block; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 8px; } .rail-item p { color: var(--tx-l2); line-height: 1.65; max-width: 52ch; } /* grade editorial de tópicos (sem cartões idênticos: linhas) */ .topic-rows { margin-top: clamp(36px, 5vh, 56px); } .topic-rows .row { display: grid; grid-template-columns: 120px minmax(0, .8fr) minmax(0, 1.3fr); gap: clamp(14px, 2.6vw, 40px); align-items: baseline; padding: clamp(18px, 2.8vh, 26px) 0; border-bottom: 1px solid var(--line-l); } .topic-rows .row:first-child { border-top: 1.5px solid var(--tx-l1); } .topic-rows .rk { font: 700 13px var(--mono); letter-spacing: .08em; color: var(--accent-deep); } .topic-rows h3 { font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 700; letter-spacing: -0.014em; } .topic-rows p { color: var(--tx-l2); line-height: 1.6; max-width: 58ch; } /* tabela comparativa (antes/depois) */ .compare { margin-top: clamp(36px, 5vh, 56px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); } .compare > div { padding-top: 18px; border-top: 2.5px solid var(--line-l); } .compare .is-innoviax { border-top-color: var(--accent); } .compare h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 16px; } .compare .is-innoviax h3 { color: var(--accent-deep); } .compare ul { list-style: none; margin: 0; padding: 0; } .compare li { padding: 10px 0; color: var(--tx-l2); line-height: 1.55; border-bottom: 1px solid var(--line-l); font-size: .98rem; } .compare li strong { color: var(--tx-l1); } /* ── faixa escura de números / prova ─────────────────────────── */ .prova { background: var(--bg0); padding: clamp(80px, 12vh, 140px) 0; } .prova-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(28px, 4vw, 56px); } .prova-cell b { display: block; font-size: clamp(2.4rem, 4.6vw, 3.6rem); font-weight: 800; letter-spacing: -0.028em; line-height: 1; color: var(--accent-hi); margin-bottom: 10px; } .prova-cell span { color: var(--tx-d2); line-height: 1.5; font-size: .98rem; display: block; max-width: 26ch; } .prova-note { margin-top: clamp(32px, 4vh, 44px); color: var(--tx-d2); font-size: .88rem; max-width: 68ch; line-height: 1.6; } /* ── o lugar no ciclo (faixa do ecossistema) ─────────────────── */ .eco { background: var(--bg1); padding: clamp(70px, 10vh, 120px) 0; } .eco-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .eco-wheel { width: min(300px, 70vw); margin: 0 auto; } .eco-wheel svg { width: 100%; height: auto; overflow: visible; } .eco h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.022em; line-height: 1.1; margin-bottom: 16px; } .eco h2 em { font-style: normal; color: var(--accent); } .eco p { color: var(--tx-d2); line-height: 1.7; max-width: 54ch; } .eco p b { color: var(--tx-d1); } .eco-nav { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; } .eco-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 1px solid var(--line-d); border-radius: 999px; color: var(--tx-d1); font-size: .95rem; font-weight: 600; text-decoration: none; transition: border-color .25s, color .25s, transform .3s var(--ease); } .eco-nav a:hover { border-color: var(--accent); color: var(--accent-hi); transform: translateY(-2px); } .eco-nav .dirlabel { color: var(--tx-d2); font-weight: 500; } /* ── CTA final ───────────────────────────────────────────────── */ .p-cta { background: var(--bg0); padding: clamp(90px, 13vh, 160px) 0 clamp(70px, 10vh, 110px); } .p-cta-box { max-width: 860px; } .p-cta h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.026em; margin-bottom: 18px; } .p-cta h2 em { font-style: normal; color: var(--accent); } .p-cta > .wrap > .p-cta-box > p { color: var(--tx-d2); font-size: 1.1rem; line-height: 1.7; max-width: 54ch; margin-bottom: 30px; } .p-cta-list { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; } .p-cta-list li { position: relative; padding: 11px 0 11px 30px; color: var(--tx-d2); font-size: .98rem; border-bottom: 1px solid var(--bg1); } .p-cta-list li::before { content: '✓'; position: absolute; left: 4px; color: var(--accent-hi); font-weight: 800; } /* ── artes por página (assinaturas em SVG/CSS) ───────────────── */ /* radar do CIE */ .art-radar .ring { fill: none; stroke: var(--line-d); stroke-width: 1.3; } .art-radar .sweep { fill: none; stroke: var(--accent); stroke-width: 2; opacity: .75; } .art-radar .blip { fill: var(--accent); } .art-radar .blip.dim { fill: var(--bg2); stroke: var(--line-d); } .art-radar g.rotor { transform-origin: 400px 400px; animation: ring-spin 26s linear infinite; } /* escada do Ascend */ .art-stairs rect { fill: var(--bg2); stroke: var(--line-d); stroke-width: 1; } .art-stairs rect.on { fill: var(--accent); stroke: none; } .art-stairs text { fill: var(--tx-d2); font: 600 15px var(--mono); } /* fluxo da captação (imposto → inovação) */ .art-flow path { fill: none; stroke: var(--line-d); stroke-width: 1.4; } .art-flow .hot { stroke: var(--accent); stroke-width: 2.2; stroke-dasharray: 6 14; stroke-linecap: round; animation: flow-run 22s linear infinite; } .art-flow circle { fill: var(--bg2); stroke: var(--line-d); stroke-width: 1.4; } .art-flow circle.hot { fill: var(--accent); stroke: none; animation: none; } .art-flow text { fill: var(--tx-d2); font: 600 15px var(--mono); } /* blocos do desenvolvimento */ .art-build rect { fill: var(--bg1); stroke: var(--line-d); stroke-width: 1.2; } .art-build rect.on { fill: var(--accent-soft); stroke: var(--accent); } .art-build .cursor { fill: var(--accent); animation: live 1.4s steps(2) infinite; } /* barras do optima */ .art-bars rect { fill: var(--bg2); } .art-bars rect.on { fill: var(--accent); } .art-bars rect.alt { fill: oklch(62% 0.08 252); } .art-bars line { stroke: var(--line-d); stroke-width: 1.2; } /* selo do P&D */ .art-seal .ring { fill: none; stroke: var(--line-d); stroke-width: 1.3; } .art-seal .tick { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; fill: none; } .art-seal text { fill: var(--tx-d2); font: 600 13px var(--mono); letter-spacing: .2em; } /* onda tipográfica do manifesto (era da IA) */ .art-wave path { fill: none; stroke: var(--accent); stroke-width: 1.6; opacity: .5; } .art-wave path:nth-child(2) { opacity: .3; } .art-wave path:nth-child(3) { opacity: .18; } /* ── responsivo ──────────────────────────────────────────────── */ @media (max-width: 920px) { .p-hero { padding-top: 124px; min-height: 0; } .p-art { position: static; transform: none !important; width: min(420px, 88vw); margin: 36px auto 0; opacity: .7; } .js .p-hero .p-art { animation-name: art-in; } .dor-list li { grid-template-columns: 1fr; gap: 8px; } .rail-item { grid-template-columns: 1fr; gap: 10px; } .topic-rows .row { grid-template-columns: 1fr; gap: 6px; } .compare { grid-template-columns: 1fr; } .eco-grid { grid-template-columns: 1fr; } .eco-wheel { margin: 0 auto 8px; } } @media (max-width: 560px) { .p-ctas .btn { width: 100%; } .rail::before { left: 20px; } .rail-item { padding-left: 60px; } .rail-n { width: 42px; height: 42px; font-size: 1rem; } } @media (prefers-reduced-motion: reduce) { .art-radar g.rotor, .art-flow .hot, .art-build .cursor { animation: none; } }