/* ═══════════════════════════════════════════════════════════════════ Wo@h — landing page Direção de arte: "storybook editorial". Base de papel blush, tinta ameixa, brilho de pêssego como única fonte de luz. A lavanda dá estrutura, o verde-sálvia confirma, o azul-cinza é o VILÃO (só aparece no capítulo do problema). Tipografia: Fraunces (display, com eixos SOFT/WONK), Figtree (corpo), DM Mono (rótulos e horas). Paleta oficial: Blush Tan #F3E5DC base de papel Lavanda #B19CD9 estrutura, links, capítulos Sálvia #9DC183 confirmação, "sim" Pêssego #FFCBA4 luz, calor, destaque Azul-cinza #9499B0 distância, frieza, o problema ═══════════════════════════════════════════════════════════════════ */ :root { /* paleta */ --blush: #F3E5DC; --lav: #B19CD9; --sage: #9DC183; --peach: #FFCBA4; --slate: #9499B0; /* derivados */ --paper: #FBF4EE; --paper-2: #FFFDFB; --blush-dp: #EAD7CB; --ink: #2E2836; --ink-2: #5F5769; --ink-3: #8B8394; --lav-dp: #6B5A94; --lav-dpr: #4C3E6B; --sage-dp: #557040; --peach-dp: #C97B3C; --slate-dp: #5B6079; --line: rgba(46, 40, 54, .10); --line-2: rgba(46, 40, 54, .06); /* sombras quentes em camadas */ --sh-1: 0 1px 2px rgba(90, 62, 48, .05), 0 6px 16px rgba(120, 88, 70, .07); --sh-2: 0 2px 4px rgba(90, 62, 48, .06), 0 16px 40px rgba(120, 88, 70, .11); --sh-3: 0 4px 10px rgba(90, 62, 48, .07), 0 32px 70px rgba(107, 90, 148, .18); --glow: 0 10px 34px rgba(255, 175, 116, .45); --r: 26px; --r-s: 16px; --fd: 'Fraunces', Georgia, serif; --fb: 'Figtree', ui-sans-serif, system-ui, sans-serif; --fm: 'DM Mono', ui-monospace, monospace; --wrap: 1200px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 90px; } body { margin: 0; overflow-x: hidden; font-family: var(--fb); font-size: 17px; line-height: 1.62; color: var(--ink); background: var(--blush); -webkit-font-smoothing: antialiased; /* atmosfera: blobs translúcidos como os do logótipo */ background-image: radial-gradient(46rem 34rem at 82% -6%, rgba(255, 203, 164, .55), transparent 65%), radial-gradient(40rem 30rem at 4% 12%, rgba(177, 156, 217, .38), transparent 62%), radial-gradient(52rem 40rem at 96% 44%, rgba(157, 193, 131, .26), transparent 60%), radial-gradient(44rem 34rem at -8% 74%, rgba(148, 153, 176, .24), transparent 62%), radial-gradient(38rem 30rem at 60% 100%, rgba(255, 203, 164, .34), transparent 62%); background-attachment: fixed; } /* textura de papel — grão fino por cima de tudo */ .grain { position: fixed; inset: 0; z-index: 900; pointer-events: none; opacity: .38; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); } /* barra de progresso da história */ .progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; pointer-events: none; } .progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--peach), var(--lav) 55%, var(--sage)); box-shadow: 0 0 12px rgba(255, 175, 116, .7); } .skip { position: absolute; left: -999px; top: 0; z-index: 1001; background: var(--ink); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 12px 0; } .skip:focus { left: 0; } /* ── Tipografia ───────────────────────────────────────────────── */ h1, h2, h3, .brand-name, .amount, .step-n { font-family: var(--fd); font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 60; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: clamp(2.55rem, 6.6vw, 4.7rem); font-weight: 700; } h2 { font-size: clamp(1.9rem, 4.3vw, 3.05rem); font-weight: 600; } h3 { font-size: 1.22rem; font-weight: 600; letter-spacing: -.01em; } p { margin: 0 0 1em; } b, strong { font-weight: 700; } a { color: var(--lav-dp); text-decoration-color: rgba(107, 90, 148, .35); text-underline-offset: 3px; } a:hover { color: var(--lav-dpr); } img { max-width: 100%; display: block; } i { font-style: italic; } /* «highlighter» de pêssego nos destaques do título */ em { font-style: italic; font-variation-settings: 'SOFT' 90, 'WONK' 1; color: var(--ink); position: relative; white-space: nowrap; background: linear-gradient(transparent 58%, rgba(255, 203, 164, .85) 58%, rgba(255, 203, 164, .55) 92%, transparent 92%); padding: 0 .12em; } .eyebrow, .chapter-tag, .time, .stat cite, .prox-meter .lbl, .pill, .letter-tag, .stake-tag, .beat-try { font-family: var(--fm); font-size: .76rem; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; } /* ── Botões ───────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .92rem 1.7rem; border-radius: 999px; font-family: var(--fb); font-weight: 600; font-size: .97rem; text-decoration: none; border: none; cursor: pointer; transition: transform .18s cubic-bezier(.34,1.4,.4,1), box-shadow .22s ease, background .22s ease, color .22s ease; } .btn-primary { background: var(--ink); color: var(--paper-2); box-shadow: 0 2px 0 rgba(255,255,255,.4) inset, 0 8px 24px rgba(46,40,54,.22), 0 0 0 0 rgba(255,175,116,0); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(46,40,54,.26), 0 0 0 7px rgba(255,203,164,.42); } .btn-ghost { background: rgba(255,253,251,.75); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--sh-1); backdrop-filter: blur(6px); } .btn-ghost:hover { transform: translateY(-2px); border-color: rgba(107,90,148,.42); color: var(--lav-dpr); box-shadow: var(--sh-2); } .btn-glow { background: linear-gradient(140deg, var(--peach), #FFB783 70%, #F09A5E); color: #4A2C14; box-shadow: var(--glow); } .btn-glow:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(255,175,116,.62); } .btn:active { transform: translateY(1px); } .btn-sm { padding: .58rem 1.15rem; font-size: .89rem; } /* ── Nav ──────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 500; background: rgba(243, 229, 220, .72); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--line-2); } .nav-inner { max-width: var(--wrap); margin: 0 auto; display: flex; align-items: center; gap: 1.4rem; padding: .7rem 1.5rem; } .brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); } .brand-mark { width: 38px; height: 38px; border-radius: 12px; flex: none; background-image: url('assets/Logo.png'); background-size: 190%; background-position: 50% 46%; box-shadow: var(--sh-1), 0 0 0 1px rgba(255,255,255,.7) inset; } .brand-name { font-family: var(--fd); font-weight: 700; font-size: 1.42rem; margin: 0; letter-spacing: -.03em; font-variation-settings: 'SOFT' 70, 'WONK' 1; } .brand-name .at { color: var(--sage-dp); } .nav-links { display: flex; align-items: center; gap: 1.35rem; margin-left: auto; } .nav-links a { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .93rem; } .nav-links a:hover { color: var(--ink); } .nav-links a.nav-cta { color: var(--paper-2); } .nav-toggle { display: none; } /* ── Navegação por capítulos ──────────────────────────────────── */ .chapters { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 480; } .chapters ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; } .chapters a { display: block; width: 22px; height: 22px; position: relative; display: grid; place-items: center; } .chapters a span { width: 7px; height: 7px; border-radius: 50%; background: rgba(46,40,54,.22); transition: all .3s ease; } .chapters a:hover span, .chapters a.on span { background: var(--lav-dp); transform: scale(1.5); } .chapters a.on span { box-shadow: 0 0 0 4px rgba(177,156,217,.28); } .chapters a::after { content: attr(data-label); position: absolute; right: 26px; top: 50%; transform: translateY(-50%) translateX(6px); font-family: var(--fm); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; background: var(--ink); color: var(--paper); padding: .3rem .6rem; border-radius: 7px; opacity: 0; pointer-events: none; transition: all .22s ease; } .chapters a:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); } /* ── Hero ─────────────────────────────────────────────────────── */ .hero { position: relative; max-width: var(--wrap); margin: 0 auto; padding: clamp(2.6rem, 6vw, 5rem) 1.5rem 2rem; display: grid; grid-template-columns: minmax(0, 5.2fr) minmax(0, 6fr); gap: clamp(1.5rem, 4vw, 3.4rem); align-items: center; } .hero-glow { position: absolute; z-index: -1; right: 6%; top: 2%; width: 46rem; height: 40rem; max-width: 90vw; background: radial-gradient(closest-side, rgba(255,203,164,.75), rgba(255,203,164,0) 72%); filter: blur(12px); } .eyebrow { display: inline-block; color: var(--lav-dpr); background: rgba(255,253,251,.7); border: 1px solid rgba(177,156,217,.35); padding: .38rem 1rem; border-radius: 999px; margin: 0 0 1.3rem; box-shadow: var(--sh-1); } .lead { font-size: 1.16rem; color: var(--ink-2); max-width: 33rem; } .lead strong { color: var(--ink); } .hero-ctas { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.7rem 0 1rem; } .hero-note { font-size: .87rem; color: var(--ink-2); } .hero-note strong { color: var(--ink); } .tick { color: var(--sage-dp); font-weight: 700; } .hero-stage { position: relative; } .stage-frame { border-radius: 32px; overflow: hidden; aspect-ratio: 6 / 5; background: linear-gradient(158deg, #FFFDFB 0%, var(--blush) 48%, #EBDFF3 100%); border: 1px solid rgba(255,255,255,.85); box-shadow: var(--sh-3), 0 0 0 1px var(--line-2); } .stage-frame canvas { width: 100%; height: 100%; display: block; } .stage-fallback img { width: 100%; height: 100%; object-fit: cover; } .float-chip { position: absolute; z-index: 2; background: rgba(255,253,251,.9); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--sh-2); padding: .52rem 1.05rem; font-size: .84rem; font-weight: 600; white-space: nowrap; animation: floaty 6s ease-in-out infinite; } .chip-a { top: 6%; right: -2%; } .chip-b { bottom: 24%; left: -6%; animation-delay: 1.6s; } .chip-c { bottom: -3%; right: 8%; animation-delay: 3.2s; } @keyframes floaty { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-9px) } } .hero-strip { grid-column: 1 / -1; text-align: center; margin-top: clamp(1.5rem, 4vw, 3rem); } .hero-strip > p { font-family: var(--fm); font-size: .73rem; letter-spacing: .19em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .9rem; } .strip-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; } .strip-chips span { background: rgba(255,253,251,.72); border: 1px solid var(--line-2); padding: .42rem 1.05rem; border-radius: 999px; font-size: .89rem; font-weight: 500; box-shadow: var(--sh-1); } /* ── Capítulos ────────────────────────────────────────────────── */ .chapter { position: relative; max-width: var(--wrap); margin: 0 auto; padding: clamp(3.4rem, 7vw, 6rem) 1.5rem; } .chapter::before { content: ''; position: absolute; inset: 0; z-index: -2; left: 50%; width: 100vw; transform: translateX(-50%); opacity: 0; transition: opacity .4s; } .chapter.cold::before { opacity: 1; background: linear-gradient(180deg, rgba(148,153,176,0) 0%, rgba(148,153,176,.26) 18%, rgba(148,153,176,.3) 82%, rgba(148,153,176,0) 100%); } .chapter.warm::before { opacity: 1; background: linear-gradient(180deg, rgba(255,203,164,0) 0%, rgba(255,203,164,.3) 16%, rgba(255,240,222,.5) 60%, rgba(255,203,164,0) 100%); } /* traçados de circuito, como no fundo do logótipo */ .traces { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; left: 50%; width: 100vw; transform: translateX(-50%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%232E2836' stroke-opacity='.10' stroke-width='1.2'%3E%3Cpath d='M0 30h44l16-16h50l14 14h26'/%3E%3Cpath d='M0 96h30l18 18h58l14-14h30'/%3E%3Cpath d='M75 0v22l14 14v24'/%3E%3Cpath d='M30 150v-26l-16-16V78'/%3E%3Cpath d='M120 150v-30l10-10V60'/%3E%3C/g%3E%3Cg fill='%232E2836' fill-opacity='.10'%3E%3Ccircle cx='44' cy='30' r='2.4'/%3E%3Ccircle cx='89' cy='60' r='2.4'/%3E%3Ccircle cx='106' cy='114' r='2.4'/%3E%3Ccircle cx='130' cy='60' r='2.4'/%3E%3Ccircle cx='14' cy='78' r='2.4'/%3E%3C/g%3E%3C/svg%3E"); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); } .chapter-head { max-width: 44rem; margin: 0 auto clamp(2.2rem, 5vw, 3.4rem); text-align: center; } .chapter-tag { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink-2); margin: 0 0 1.1rem; } .chapter-tag .num { font-size: .78rem; font-weight: 500; letter-spacing: 0; width: 27px; height: 27px; border-radius: 9px; display: grid; place-items: center; background: var(--ink); color: var(--paper); } .chapter-tag.light { color: rgba(255,253,251,.6); } .chapter-lead { font-size: 1.1rem; color: var(--ink-2); margin: 1.2rem auto 0; max-width: 38rem; } .chapter-lead b { color: var(--ink); } /* ── 01 · O vilão ─────────────────────────────────────────────── */ .villain { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: center; max-width: 62rem; margin: 0 auto; } .villain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 14px; border-radius: var(--r-s); background: linear-gradient(160deg, #6E7288, #4E5266); box-shadow: var(--sh-2); } .villain-grid .tile { aspect-ratio: 4/3; border-radius: 9px; position: relative; background: linear-gradient(170deg, #8A8FA6, #6E7389); display: grid; place-items: center; overflow: hidden; } .villain-grid .tile.off { background: linear-gradient(170deg, #55596E, #43465A); } .villain-grid .tile.empty { background: #4A4E62; } .villain-grid .ini { font-family: var(--fd); font-weight: 600; font-size: 1.1rem; color: rgba(255,255,255,.62); width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.13); display: grid; place-items: center; } .villain-grid .tag { position: absolute; bottom: 5px; left: 5px; right: 5px; font-family: var(--fm); font-size: .53rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.8); background: rgba(30,32,44,.6); padding: .18rem .35rem; border-radius: 5px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .villain-costs { list-style: none; margin: 0; padding: 0; display: grid; gap: .95rem; } .villain-costs li { color: var(--ink-2); font-size: .99rem; padding-left: 1.5rem; position: relative; } .villain-costs li::before { content: '×'; position: absolute; left: 0; top: -.1em; color: var(--slate-dp); font-size: 1.25rem; font-weight: 700; } .villain-costs b { color: var(--ink); } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; max-width: 62rem; margin: clamp(2rem, 5vw, 3.2rem) auto 0; } .stat { background: rgba(255,253,251,.82); border: 1px solid var(--line-2); border-radius: var(--r-s); padding: 1.5rem; box-shadow: var(--sh-1); backdrop-filter: blur(4px); } .stat-n { display: block; font-family: var(--fd); font-weight: 700; font-size: 3.2rem; line-height: 1; letter-spacing: -.04em; color: var(--slate-dp); margin-bottom: .5rem; font-variation-settings: 'SOFT' 40, 'WONK' 0; } .stat p { font-size: .95rem; color: var(--ink-2); margin: 0 0 .7rem; } .stat cite { font-style: normal; color: var(--ink-3); font-size: .68rem; letter-spacing: .12em; } .stat.accent { background: linear-gradient(160deg, rgba(255,203,164,.5), rgba(255,253,251,.9)); border-color: rgba(255,203,164,.6); } .stat.accent .stat-n { color: var(--peach-dp); } .stat.accent cite { color: var(--sage-dp); font-weight: 500; } .stats-src { text-align: center; font-size: .8rem; color: var(--ink-3); margin: 1.1rem 0 0; } /* ── 02 · Primitivas ──────────────────────────────────────────── */ .primitives { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; max-width: 64rem; margin: 0 auto; } .prim { background: rgba(255,253,251,.8); border: 1px solid var(--line-2); border-radius: var(--r); padding: 1.8rem; box-shadow: var(--sh-1); transition: transform .25s ease, box-shadow .25s ease; } .prim:hover { transform: translateY(-4px); box-shadow: var(--sh-2); } .prim-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: var(--ink); background: color-mix(in srgb, var(--c) 40%, #fff); box-shadow: 0 6px 18px color-mix(in srgb, var(--c) 45%, transparent); margin-bottom: 1.1rem; } .prim p { color: var(--ink-2); font-size: .96rem; margin: 0; } /* ── Imagens de destaque ──────────────────────────────────────── */ .showcase { margin: clamp(2.4rem, 6vw, 4rem) auto 0; max-width: 66rem; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.6rem; align-items: center; } .showcase.wide { grid-template-columns: 1fr; max-width: 74rem; } .showcase img { border-radius: var(--r); box-shadow: var(--sh-3); border: 1px solid rgba(255,255,255,.7); width: 100%; aspect-ratio: 16/9; object-fit: cover; } .showcase.wide img { aspect-ratio: 21/9; } .showcase figcaption { font-size: .96rem; color: var(--ink-2); } .showcase.wide figcaption { max-width: 46rem; margin: 1.2rem auto 0; text-align: center; } .showcase figcaption b { color: var(--ink); } .soft-cta { text-align: center; margin: clamp(2rem, 4vw, 3rem) 0 0; font-size: .98rem; color: var(--ink-2); } .soft-cta a { font-weight: 600; white-space: nowrap; } /* ── 03 · O dia ───────────────────────────────────────────────── */ .day { list-style: none; margin: 0 auto; padding: 0; max-width: 68rem; position: relative; } .day::before { content: ''; position: absolute; left: 50%; top: 2rem; bottom: 2rem; width: 2px; background: linear-gradient(180deg, transparent, rgba(255,175,116,.55) 8%, rgba(177,156,217,.5) 92%, transparent); } .beat { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 3.6rem); align-items: center; padding: clamp(1.6rem, 4vw, 2.6rem) 0; } .beat:nth-child(even) .beat-copy { order: 2; } .beat-copy { max-width: 27rem; } .beat:nth-child(odd) .beat-copy { justify-self: end; text-align: right; } .beat:nth-child(odd) .beat-copy .time { flex-direction: row-reverse; } .time { display: inline-flex; align-items: center; gap: .55rem; color: var(--peach-dp); margin: 0 0 .7rem; letter-spacing: .2em; } .time::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--peach); box-shadow: 0 0 0 4px rgba(255,203,164,.4); } .beat-copy p:not(.time):not(.beat-try) { color: var(--ink-2); font-size: 1rem; } .beat-copy b { color: var(--ink); } .beat-try { color: var(--lav-dp); font-size: .7rem; margin: 1rem 0 0; } /* cartão do lobby */ .card-lobby, .card-knock, .demo { background: rgba(255,253,251,.88); border: 1px solid var(--line-2); border-radius: var(--r); padding: 1.3rem; box-shadow: var(--sh-2); backdrop-filter: blur(6px); } .card-lobby .row { display: flex; align-items: center; gap: .6rem; padding: .62rem .2rem; border-bottom: 1px dashed var(--line-2); font-size: .93rem; } .card-lobby .row:last-child { border-bottom: none; } .card-lobby .row b { font-weight: 600; color: var(--ink-2); } .card-lobby .row i { margin-left: auto; font-style: normal; font-family: var(--fm); font-size: .68rem; color: var(--ink-3); } .card-lobby .row.you { background: rgba(157,193,131,.18); border-radius: 10px; padding-inline: .6rem; } .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .dot.on { background: var(--sage); box-shadow: 0 0 0 3px rgba(157,193,131,.3); } .dot.busy { background: var(--peach); box-shadow: 0 0 0 3px rgba(255,203,164,.35); } /* demo · proximidade */ .demo-prox { --x: 8%; --vol: 0; } .prox-floor { position: relative; height: 210px; border-radius: 18px; overflow: hidden; background: radial-gradient(70% 90% at 82% 78%, rgba(255,203,164, calc(.15 + var(--vol) * .55)), transparent 70%), linear-gradient(180deg, #F6EDE6, #EADCD2); background-size: auto, auto; box-shadow: inset 0 2px 10px rgba(90,62,48,.1); } .prox-floor::before { content: ''; position: absolute; inset: 0; opacity: .5; background-image: repeating-linear-gradient(90deg, rgba(46,40,54,.055) 0 1px, transparent 1px 34px), repeating-linear-gradient(0deg, rgba(46,40,54,.045) 0 1px, transparent 1px 34px); mask-image: linear-gradient(180deg, transparent, #000 70%); } .prox-ring { position: absolute; left: 80%; bottom: 34px; transform: translate(-50%, 50%); width: 260px; height: 132px; border-radius: 50%; border: 1.5px dashed rgba(255,175,116, calc(.35 + var(--vol) * .5)); background: radial-gradient(closest-side, rgba(255,203,164, calc(var(--vol) * .35)), transparent 78%); transition: border-color .18s; } .prox-peer, .prox-me { position: absolute; bottom: 26px; text-align: center; width: 76px; margin-left: -38px; } .prox-peer { left: 80%; } .prox-me { left: var(--x); cursor: grab; touch-action: none; } .prox-me:active { cursor: grabbing; } .prox-me:focus-visible { outline: 2px solid var(--lav-dp); outline-offset: 6px; border-radius: 12px; } .prox-peer b, .prox-me b { display: block; font-family: var(--fm); font-size: .62rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); margin-top: .4rem; } .av { width: 46px; height: 46px; border-radius: 50% 50% 46% 46%; margin: 0 auto; display: grid; place-items: center; font-family: var(--fd); font-weight: 700; font-size: .95rem; color: #fff; box-shadow: 0 8px 18px rgba(90,62,48,.22), inset 0 -4px 8px rgba(0,0,0,.12); } .av-marta { background: linear-gradient(160deg, #C4A9E8, var(--lav)); } .av-me { background: linear-gradient(160deg, #B4D398, var(--sage)); font-size: .78rem; } .prox-me .av { transform: scale(calc(1 + var(--vol) * .06)); } /* ancorada à direita da Marta para nunca sair do chão da demo */ .bubble { position: absolute; bottom: 100%; right: 0; transform: translateY(-14px); background: var(--ink); color: var(--paper-2); padding: .45rem .8rem; border-radius: 12px 12px 4px 12px; font-size: .8rem; line-height: 1.35; text-align: center; width: max-content; max-width: min(230px, 62vw); box-shadow: var(--sh-2); filter: blur(calc((1 - var(--vol)) * 1.6px)); opacity: calc(.35 + var(--vol) * .65); } .prox-meter { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; } .prox-meter .lbl { color: var(--ink-3); } .bars { display: flex; gap: 4px; align-items: flex-end; flex: 1; height: 26px; } .bars i { flex: 1; border-radius: 3px; background: rgba(46,40,54,.1); height: 30%; transition: height .18s ease, background .18s ease; } .bars i:nth-child(2) { height: 48% } .bars i:nth-child(3) { height: 66% } .bars i:nth-child(4) { height: 84% } .bars i:nth-child(5) { height: 100% } .bars i:nth-child(6) { height: 78% } .bars i:nth-child(7) { height: 56% } .bars i:nth-child(8) { height: 38% } .bars i.on { background: linear-gradient(180deg, var(--sage), #7FA867); } .prox-meter .val { font-family: var(--fm); font-size: .8rem; font-weight: 500; color: var(--sage-dp); min-width: 3.2em; text-align: right; } /* demo · secretária multi-ecrã */ .monitors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mon { position: relative; aspect-ratio: 16/10; cursor: pointer; border-radius: 10px; border: 5px solid #3A3446; background: #23202D; padding: 0; overflow: hidden; transition: box-shadow .25s ease, transform .2s ease, background .3s ease; font-family: var(--fb); } .mon::after { content: 'desligado'; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--fm); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.3); } .mon:hover { transform: translateY(-2px); } .mon[aria-pressed="true"] { background: linear-gradient(160deg, #9A85C4, #6B5A94); box-shadow: 0 0 0 2px rgba(255,203,164,.6), 0 10px 26px rgba(255,175,116,.35); } .mon[aria-pressed="true"]::after { content: attr(data-app); color: #fff; font-family: var(--fb); font-size: .74rem; letter-spacing: 0; text-transform: none; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.4); } .mon[aria-pressed="true"]::before { content: ''; position: absolute; inset: 0; opacity: .35; background: repeating-linear-gradient(0deg, rgba(255,255,255,.14) 0 1px, transparent 1px 4px); } .desk-slab { height: 16px; margin: 12px 0 0; border-radius: 5px; background: linear-gradient(180deg, #C69B6D, #A87C50); box-shadow: 0 12px 22px rgba(90,62,48,.22); } .desk-foot { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; } .pill { padding: .35rem .8rem; border-radius: 999px; font-size: .66rem; border: 1px solid var(--line); } .pill.ok { background: rgba(157,193,131,.24); color: var(--sage-dp); border-color: rgba(157,193,131,.45); } .pill.bad { background: rgba(148,153,176,.2); color: var(--slate-dp); border-color: rgba(148,153,176,.4); } /* cartão da porta */ .card-knock { display: grid; grid-template-columns: 96px 1fr; gap: 1.2rem; align-items: center; } .door { position: relative; height: 150px; border-radius: 8px 8px 4px 4px; background: linear-gradient(100deg, #C08F62, #9E6E45); box-shadow: inset 0 0 0 5px rgba(255,255,255,.13), var(--sh-1); } .door .sign { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--peach); font-family: var(--fm); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; padding: .22rem .5rem; border-radius: 5px; white-space: nowrap; box-shadow: 0 0 14px rgba(255,203,164,.4); } .door .handle { position: absolute; right: 10px; top: 50%; width: 8px; height: 18px; border-radius: 4px; background: #F0D9B6; transform: translateY(-50%); } .knock-msg b { font-family: var(--fm); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--peach-dp); } .knock-msg p { font-size: 1.02rem; margin: .3rem 0 .9rem; } .knock-btns { display: flex; gap: .5rem; } .knock-btns span { font-size: .78rem; font-weight: 600; padding: .4rem .9rem; border-radius: 999px; } .knock-btns .yes { background: var(--sage); color: #29391D; } .knock-btns .no { background: rgba(148,153,176,.22); color: var(--slate-dp); } /* ── 04 · Funcionalidades ─────────────────────────────────────── */ .feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1.1rem; } .feat { position: relative; overflow: hidden; background: rgba(255,253,251,.82); border: 1px solid var(--line-2); border-radius: var(--r); padding: 1.6rem; box-shadow: var(--sh-1); transition: transform .25s ease, box-shadow .25s ease; } .feat::before { content: ''; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; border-radius: 50%; background: var(--c); opacity: .2; filter: blur(24px); transition: opacity .3s ease, transform .4s ease; } .feat:hover { transform: translateY(-5px); box-shadow: var(--sh-2); } .feat:hover::before { opacity: .42; transform: scale(1.25); } .feat-ico { position: relative; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; font-size: 1.35rem; margin-bottom: 1rem; background: color-mix(in srgb, var(--c) 34%, #fff); box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 40%, transparent); } /* os emoji nativos são saturados demais para esta paleta */ .feat-ico, .req span { filter: saturate(.55) contrast(.95); } .feat p { color: var(--ink-2); font-size: .94rem; margin: 0; } /* ── 05 · Requisitos ──────────────────────────────────────────── */ .req-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; max-width: 64rem; margin: 0 auto; } .req { background: rgba(255,253,251,.7); border: 1px solid var(--line-2); border-radius: var(--r-s); padding: 1.4rem; text-align: center; box-shadow: var(--sh-1); } .req span { font-size: 1.7rem; display: block; margin-bottom: .5rem; } .req b { font-family: var(--fd); font-size: 1.15rem; font-weight: 600; display: block; margin-bottom: .35rem; } .req p { font-size: .89rem; color: var(--ink-2); margin: 0; } .req-note { text-align: center; max-width: 40rem; margin: 1.8rem auto 0; font-size: .96rem; color: var(--ink-2); } .req-note b { color: var(--ink); } /* ── 06 · Confiança ───────────────────────────────────────────── */ .trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; } .trust-item { background: linear-gradient(165deg, rgba(255,253,251,.92), rgba(243,229,220,.7)); border: 1px solid var(--line-2); border-left: 3px solid var(--sage); border-radius: var(--r-s); padding: 1.6rem; box-shadow: var(--sh-1); } .trust-item h3 { font-size: 1.1rem; } .trust-item p { color: var(--ink-2); font-size: .94rem; margin: 0; } /* ── 07 · Passos ──────────────────────────────────────────────── */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; list-style: none; margin: 0; padding: 0; } .steps li { position: relative; background: rgba(255,253,251,.85); border: 1px solid var(--line-2); border-radius: var(--r); padding: 1.9rem; box-shadow: var(--sh-1); } .step-n { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; margin-bottom: 1rem; background: linear-gradient(150deg, var(--peach), #F5A46B); color: #4A2C14; font-size: 1.35rem; font-weight: 700; box-shadow: 0 8px 20px rgba(255,175,116,.4); } .steps p { color: var(--ink-2); font-size: .95rem; margin: 0; } /* ── 08 · Preços ──────────────────────────────────────────────── */ .billing-toggle { display: inline-flex; gap: .2rem; margin-top: 1.4rem; padding: .3rem; background: rgba(255,253,251,.8); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--sh-1); } .bt-opt { border: none; background: transparent; cursor: pointer; padding: .5rem 1.25rem; border-radius: 999px; font-family: var(--fb); font-weight: 600; font-size: .9rem; color: var(--ink-2); transition: background .2s, color .2s; } .bt-opt:hover { color: var(--ink); } .bt-opt.active { background: var(--ink); color: var(--paper-2); } .bt-opt .save { color: var(--sage-dp); font-weight: 700; } .bt-opt.active .save { color: #BFE0A4; } .pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 1.1rem; align-items: stretch; } .price-card { position: relative; display: flex; flex-direction: column; background: rgba(255,253,251,.9); border: 1px solid var(--line-2); border-radius: var(--r); padding: 1.9rem 1.6rem; box-shadow: var(--sh-1); transition: transform .25s ease, box-shadow .25s ease; } .price-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); } .price-card h3 { font-size: 1.3rem; margin-bottom: .2rem; } .price-card.featured { border: 1.5px solid rgba(255,175,116,.75); box-shadow: var(--sh-2), 0 0 0 6px rgba(255,203,164,.22); background: linear-gradient(170deg, rgba(255,240,225,.95), rgba(255,253,251,.95)); } .price-card.featured:hover { box-shadow: var(--sh-3), 0 0 0 8px rgba(255,203,164,.26); } .badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--peach); font-family: var(--fm); font-size: .64rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding: .34rem .9rem; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 18px rgba(46,40,54,.25); } .price { margin: .1rem 0 .5rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem; } .price .amount { font-size: 2.1rem; font-weight: 700; letter-spacing: -.035em; } .price .per { color: var(--ink-3); font-size: .8rem; } .price-desc { color: var(--ink-2); font-size: .92rem; min-height: 3.1em; } .price-card ul { margin: 0 0 1.5rem; padding: 0; list-style: none; font-size: .93rem; flex: 1; display: grid; gap: .5rem; } .price-card li { padding-left: 1.35rem; position: relative; color: var(--ink-2); } .price-card li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--sage-dp); font-weight: 700; font-size: .85rem; } .price-card li b { color: var(--ink); } .price-card .btn { width: 100%; } .pricing-note { max-width: 44rem; margin: 2rem auto 0; text-align: center; font-size: .86rem; color: var(--ink-3); } /* ── O que está em jogo ───────────────────────────────────────── */ .stakes { padding-top: 0; } .stakes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; max-width: 62rem; margin: 0 auto; } .stake { border-radius: var(--r); padding: 1.8rem; box-shadow: var(--sh-1); } .stake ul { margin: 0; padding-left: 1.3rem; display: grid; gap: .55rem; } .stake li { font-size: .98rem; } .stake-tag { display: block; margin-bottom: 1.1rem; } .stake.bad { background: rgba(148,153,176,.16); border: 1px solid rgba(148,153,176,.35); color: var(--ink-2); } .stake.bad .stake-tag { color: var(--slate-dp); } .stake.bad ul { list-style: '× '; } .stake.good { background: linear-gradient(160deg, rgba(157,193,131,.28), rgba(255,203,164,.28)); border: 1px solid rgba(157,193,131,.45); } .stake.good .stake-tag { color: var(--sage-dp); } .stake.good ul { list-style: '✓ '; } .stake.good li { font-weight: 500; } /* ── Carta ────────────────────────────────────────────────────── */ .letter-sec { padding: clamp(2rem, 5vw, 3.5rem) 1.5rem; } .letter { max-width: 44rem; margin: 0 auto; position: relative; background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 4px 4px 20px 20px; padding: clamp(1.8rem, 4vw, 3rem); box-shadow: var(--sh-2); transform: rotate(-.5deg); } .letter::before { content: ''; position: absolute; top: -11px; left: 50%; transform: translateX(-50%) rotate(-2deg); width: 110px; height: 22px; border-radius: 3px; background: linear-gradient(100deg, rgba(255,203,164,.85), rgba(177,156,217,.7)); box-shadow: 0 3px 8px rgba(90,62,48,.14); } .letter-tag { color: var(--ink-3); display: block; margin-bottom: 1.2rem; } .letter p { font-size: 1.06rem; color: var(--ink-2); } .letter p b { color: var(--ink); } .letter-sign { font-family: var(--fd); font-style: italic; font-size: 1.2rem; color: var(--ink); margin-bottom: 1.6rem; font-variation-settings: 'SOFT' 100, 'WONK' 1; } /* ── FAQ ──────────────────────────────────────────────────────── */ .faq { max-width: 46rem; margin: 0 auto; display: grid; gap: .7rem; } .faq details { background: rgba(255,253,251,.85); border: 1px solid var(--line-2); border-radius: var(--r-s); padding: 1.05rem 1.4rem; box-shadow: var(--sh-1); transition: border-color .2s, box-shadow .2s; } .faq details[open] { border-color: rgba(177,156,217,.55); box-shadow: var(--sh-2); } .faq summary { cursor: pointer; list-style: none; font-family: var(--fd); font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; flex: none; color: var(--lav-dp); font-size: 1.5rem; font-family: var(--fb); font-weight: 400; line-height: 1; transition: transform .25s ease; } .faq details[open] summary::after { transform: rotate(135deg); } .faq details p { color: var(--ink-2); font-size: .96rem; margin: .8rem 0 0; } /* ── Epílogo / waitlist ───────────────────────────────────────── */ .waitlist { padding: clamp(2.5rem, 6vw, 5rem) 1.5rem; } .waitlist-card { max-width: 50rem; margin: 0 auto; text-align: center; position: relative; overflow: hidden; border-radius: 34px; padding: clamp(2.2rem, 5.5vw, 4rem); color: var(--paper-2); background: radial-gradient(120% 150% at 84% -25%, rgba(255,203,164,.55), transparent 55%), radial-gradient(90% 120% at 8% 115%, rgba(177,156,217,.42), transparent 60%), linear-gradient(155deg, #3B3348, #272130 70%); box-shadow: var(--sh-3); } .waitlist-card::before { content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='%23FFCBA4' stroke-opacity='.13' stroke-width='1.2'%3E%3Cpath d='M0 30h44l16-16h50l14 14h26'/%3E%3Cpath d='M0 96h30l18 18h58l14-14h30'/%3E%3Cpath d='M75 0v22l14 14v24'/%3E%3C/g%3E%3C/svg%3E"); } .waitlist-card > * { position: relative; } .waitlist-card h2 { color: #fff; } .waitlist-card em { color: #fff; background: linear-gradient(transparent 82%, rgba(255,175,116,.85) 82%, rgba(255,175,116,.6) 96%, transparent 96%); } .wl-lead { color: rgba(255,253,251,.76); max-width: 34rem; margin: 0 auto 1.9rem; } .wl-lead strong { color: var(--peach); } #waitlist-form { display: flex; flex-direction: column; gap: .7rem; max-width: 31rem; margin: 0 auto; text-align: left; } .wl-row { display: flex; gap: .6rem; flex-wrap: wrap; } .wl-row > input { flex: 1 1 200px; min-width: 0; } /* Sem `display` próprio: um
já é block, e declará-lo aqui esmagava o `[hidden] { display: none }` do browser — o campo da empresa ficava sempre visível como uma caixa vazia, mesmo com o atributo posto. */ .wl-field[hidden] { display: none; } .wl-label { display: block; font-size: .82rem; font-weight: 500; color: rgba(255,253,251,.66); margin: 0 0 .35rem .35rem; } #waitlist-form input, #waitlist-form select { width: 100%; padding: .92rem 1.3rem; border-radius: 999px; border: 1px solid rgba(255,203,164,.28); background: rgba(255,255,255,.09); color: #fff; font-size: .97rem; font-family: var(--fb); outline: none; transition: border-color .2s, background .2s; } /* O menu nativo do