/* ══════════════════════════════════════════════════════════════════════ pitch.css — template dos pitch decks (Infomineral) Apresentação de PRODUTO: o que é, para quem, o que entrega. Sem status de desenvolvimento, sem preços, sem citação de terceiros. Depende de main.css (tokens de cor/fonte). Cada deck define o próprio --pitch-accent no e usa o markup gerado por tools/build_decks.py. ══════════════════════════════════════════════════════════════════════ */ html, body.pitch-body { height: 100%; overflow: hidden; } .deck { position: relative; height: 100vh; height: 100dvh; width: 100%; background: var(--bg); isolation: isolate; } /* ── ambient glow, atrás de tudo ── */ .deck::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 90% at 88% 8%, color-mix(in srgb, var(--pitch-accent, var(--accent)) 15%, transparent) 0%, transparent 62%), radial-gradient(55% 70% at 2% 96%, color-mix(in srgb, var(--pitch-accent, var(--accent)) 9%, transparent) 0%, transparent 60%); } /* ── progress bar ── */ .deck-progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--pitch-accent, var(--accent)); box-shadow: 0 0 14px color-mix(in srgb, var(--pitch-accent, var(--accent)) 60%, transparent); z-index: 50; transition: width .45s cubic-bezier(.4,0,.2,1); } /* ══ SLIDES ══ */ .slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(44px, 8vh, 96px) clamp(28px, 8vw, 120px); opacity: 0; pointer-events: none; transition: opacity .45s ease; } .slide.active { opacity: 1; pointer-events: auto; } .slide-inner { width: 100%; max-width: 1080px; margin: 0 auto; } /* entrada escalonada dos blocos do slide activo */ .slide > .slide-inner > * { opacity: 0; transform: translateY(16px); } .slide.active > .slide-inner > * { animation: pitchIn .62s cubic-bezier(.2,.7,.3,1) forwards; } .slide.active > .slide-inner > *:nth-child(1) { animation-delay: .04s; } .slide.active > .slide-inner > *:nth-child(2) { animation-delay: .12s; } .slide.active > .slide-inner > *:nth-child(3) { animation-delay: .20s; } .slide.active > .slide-inner > *:nth-child(4) { animation-delay: .28s; } .slide.active > .slide-inner > *:nth-child(5) { animation-delay: .36s; } @keyframes pitchIn { to { opacity: 1; transform: none; } } /* ── tipografia comum ── */ .slide-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--pitch-accent, var(--accent)); margin-bottom: 22px; } .slide-eyebrow::before { content: ''; width: 26px; height: 1px; flex-shrink: 0; background: currentColor; opacity: .7; } .slide-h { font-size: clamp(28px, 4.4vw, 52px); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; color: var(--text); max-width: 17ch; text-wrap: balance; } .slide-h.wide { max-width: 24ch; font-size: clamp(25px, 3.6vw, 42px); } .slide-h b, .slide-h strong { color: var(--pitch-accent, var(--accent)); font-weight: 600; } .slide-p { font-size: 16.5px; font-weight: 300; line-height: 1.8; color: var(--dim); max-width: 66ch; margin-top: 22px; } .slide-p b { color: var(--text); font-weight: 400; } /* ══ CAPA ══ */ .slide-cover { justify-content: center; } .cover-top { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 30px; } .cover-mark { font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); } .deck-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; color: var(--pitch-accent, var(--accent)); border: 1px solid color-mix(in srgb, var(--pitch-accent, var(--accent)) 38%, transparent); background: color-mix(in srgb, var(--pitch-accent, var(--accent)) 9%, transparent); } .deck-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; } .deck-pill--live { color: #3ecf8e; border-color: rgba(62,207,142,.45); background: rgba(62,207,142,.10); } .deck-pill--soon { color: var(--dim); border-color: var(--bdr); background: transparent; } .deck-pill--soon::before { box-shadow: none; } .cover-title { font-size: clamp(40px, 7.4vw, 88px); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; color: var(--text); max-width: 15ch; text-wrap: balance; } .cover-title b { color: var(--pitch-accent, var(--accent)); font-weight: 600; } .cover-promise { font-size: clamp(17px, 1.5vw, 21px); font-weight: 300; line-height: 1.6; color: var(--dim); max-width: 46ch; margin-top: 26px; } /* ícone gigante, fantasma — capa e slide final */ .cover-icon { position: absolute; right: clamp(24px, 6vw, 96px); top: 50%; transform: translateY(-50%); width: min(34vw, 400px); aspect-ratio: 1; z-index: -1; color: var(--pitch-accent, var(--accent)); opacity: .10; pointer-events: none; } .cover-icon svg { width: 100%; height: 100%; stroke-width: .8; } .slide-cta-icon { opacity: .07; width: min(28vw, 320px); } /* ── faixa de números ── */ .stat-row { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--bdr); } .stat b { display: block; font-size: clamp(24px, 2.7vw, 36px); font-weight: 600; color: var(--text); letter-spacing: -.02em; line-height: 1.1; } .stat span { display: block; margin-top: 6px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); } /* ══ GRELHA DE CAPACIDADES ══ */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; } .feature { position: relative; padding: 26px 24px 28px; border: 1px solid var(--bdr); background: color-mix(in srgb, var(--pitch-accent, var(--accent)) 4%, var(--bg)); transition: border-color .3s ease, background .3s ease, transform .3s ease; } .feature::before { content: ''; position: absolute; top: -1px; left: -1px; width: 34px; height: 2px; background: var(--pitch-accent, var(--accent)); transition: width .35s cubic-bezier(.2,.7,.3,1); } .feature:hover { border-color: color-mix(in srgb, var(--pitch-accent, var(--accent)) 34%, transparent); background: color-mix(in srgb, var(--pitch-accent, var(--accent)) 8%, var(--bg)); transform: translateY(-3px); } .feature:hover::before { width: calc(100% + 2px); } .feature-n { font-size: 10px; font-weight: 700; letter-spacing: .18em; color: var(--pitch-accent, var(--accent)); opacity: .8; } .feature h4 { font-size: 16px; font-weight: 600; color: var(--text); margin: 14px 0 9px; line-height: 1.3; letter-spacing: -.01em; } .feature p { font-size: 13.5px; line-height: 1.7; color: var(--dim); } /* ══ LISTA DE PÚBLICO / ENTREGÁVEIS ══ */ .aud-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin-top: 38px; background: var(--bdr); border: 1px solid var(--bdr); } .aud { padding: 22px 24px; background: var(--bg); } .aud h4 { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 7px; } .aud p { font-size: 13px; line-height: 1.65; color: var(--dim); } /* mosaico do que é entregue */ .tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 38px; } .tile { position: relative; padding: 20px 18px 22px; border: 1px solid var(--bdr); background: color-mix(in srgb, var(--pitch-accent, var(--accent)) 4%, var(--bg)); transition: border-color .3s ease, background .3s ease, transform .3s ease; } .tile::before { content: ''; display: block; width: 20px; height: 2px; margin-bottom: 14px; background: var(--pitch-accent, var(--accent)); opacity: .75; transition: width .35s cubic-bezier(.2,.7,.3,1); } .tile:hover { border-color: color-mix(in srgb, var(--pitch-accent, var(--accent)) 34%, transparent); background: color-mix(in srgb, var(--pitch-accent, var(--accent)) 8%, var(--bg)); transform: translateY(-3px); } .tile:hover::before { width: 44px; } .tile h4 { font-size: 14.5px; font-weight: 600; color: var(--text); line-height: 1.3; } .tile p { font-size: 12.5px; line-height: 1.6; color: var(--dim); margin-top: 7px; } /* ══ CTA ══ */ .cta-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .04em; padding: 14px 26px; border-radius: 2px; transition: all .25s ease; } .btn-primary { background: var(--pitch-accent, var(--accent)); color: #04222a; border: 1px solid var(--pitch-accent, var(--accent)); } .btn-primary:hover { filter: brightness(1.12); transform: translateY(-2px); color: #04222a; } .btn-ghost { color: var(--pitch-accent, var(--accent)); border: 1px solid color-mix(in srgb, var(--pitch-accent, var(--accent)) 34%, transparent); } .btn-ghost:hover { border-color: var(--pitch-accent, var(--accent)); background: color-mix(in srgb, var(--pitch-accent, var(--accent)) 9%, transparent); transform: translateY(-2px); } /* ══ CONTROLOS ══ */ .deck-controls { position: fixed; bottom: 24px; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 20px; pointer-events: none; } .deck-controls > * { pointer-events: auto; } .deck-arrow { width: 38px; height: 38px; border: 1px solid var(--bdr); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--dim); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(8px); cursor: pointer; transition: color .2s, border-color .2s, transform .2s; } .deck-arrow:hover { color: var(--text); border-color: var(--pitch-accent, var(--accent)); transform: scale(1.08); } .deck-dots { display: flex; gap: 8px; } .deck-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bdr); cursor: pointer; transition: background .25s, transform .25s, box-shadow .25s; } .deck-dot:hover { background: var(--dim); } .deck-dot.active { background: var(--pitch-accent, var(--accent)); transform: scale(1.5); box-shadow: 0 0 10px color-mix(in srgb, var(--pitch-accent, var(--accent)) 70%, transparent); } .deck-counter { position: fixed; bottom: 28px; right: clamp(20px,4vw,48px); z-index: 60; font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; letter-spacing: .06em; } .deck-home { position: fixed; top: 24px; left: clamp(20px,4vw,48px); z-index: 60; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); } .deck-home:hover { color: var(--text); } .deck-fullscreen { position: fixed; top: 24px; right: clamp(20px,4vw,48px); z-index: 60; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); cursor: pointer; background: none; border: none; font-family: var(--f); } .deck-fullscreen:hover { color: var(--text); } .deck-brand { position: fixed; bottom: 28px; left: clamp(20px,4vw,48px); z-index: 55; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); opacity: .5; pointer-events: none; user-select: none; } .deck-hint { position: fixed; bottom: 66px; left: 50%; transform: translateX(-50%); z-index: 60; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); opacity: 0; transition: opacity .6s ease; pointer-events: none; white-space: nowrap; } .deck-hint.show { opacity: .6; } /* ══ RESPONSIVO ══ */ @media (max-width: 980px) { .feature-grid { grid-template-columns: 1fr; gap: 14px; } .tile-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .feature { padding: 20px; } .aud-grid { grid-template-columns: 1fr; } .cover-icon { width: 46vw; opacity: .06; right: -6%; } } @media (max-width: 640px) { .slide { padding: 82px 22px 84px; justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; } .cover-icon { display: none; } .cover-title { font-size: clamp(32px, 9.5vw, 46px); } .cover-promise { font-size: 16px; margin-top: 20px; } .slide-h { font-size: clamp(24px, 6.8vw, 32px); max-width: none; } .slide-h.wide { font-size: clamp(22px, 6.2vw, 30px); } .slide-p { font-size: 15px; line-height: 1.72; margin-top: 18px; } .stat-row { gap: 22px; margin-top: 30px; padding-top: 20px; } .feature-grid, .aud-grid, .tile-grid, .cta-actions { margin-top: 26px; } .deck-brand, .deck-hint { display: none; } .deck-controls { bottom: 16px; } .deck-counter { bottom: 20px; } .tile-grid { grid-template-columns: 1fr; } .btn { flex: 1 1 100%; justify-content: center; } } /* ══ ACESSIBILIDADE ══ */ .deck-arrow:focus-visible, .deck-dot:focus-visible, .deck-fullscreen:focus-visible, .deck-home:focus-visible, .btn:focus-visible { outline: 2px solid var(--pitch-accent, var(--accent)); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .slide, .deck-progress { transition-duration: .01ms; } .slide > .slide-inner > * { opacity: 1; transform: none; animation: none !important; } .feature:hover { transform: none; } } /* ══ IMPRESSÃO / PDF (tecla P) — um slide por página 1280×720 ══ */ @media print { @page { size: 1280px 720px; margin: 0; } html, body.pitch-body { height: auto; overflow: visible; background: var(--bg); } .deck { height: auto; } .deck-controls, .deck-counter, .deck-progress, .deck-fullscreen, .deck-home, .deck-hint { display: none !important; } .slide { position: relative; inset: auto; opacity: 1 !important; width: 1280px; height: 720px; overflow: hidden; page-break-after: always; break-after: page; } .slide:last-child { page-break-after: auto; break-after: auto; } .slide > .slide-inner > * { opacity: 1 !important; transform: none !important; animation: none !important; } .deck-brand { position: absolute; } .cover-icon { top: 360px; right: 90px; width: 380px; } .slide-cta-icon { width: 300px; } }